Question

您好我正在努力寻找一种简单的在线测验的最佳方法，将用户结果发送到指定的电子邮件。我对Javascript很新，如果有人能指出我正确的方向，我会非常感激。

var allQuestions = [{question: "2 + 2", choices: ["4", "8", "10", "2"],     correctAnswer:0},
{question: "6 + 3", choices: ["7", "3", "5", "9"], correctAnswer:3},
{question: "4 + 4", choices: ["8", "7", "2", "9"],
correctAnswer:0},
{question: "5 + 0", choices: ["4", "5", "3", "9"], correctAnswer:1},];

//you can access checkbox name through an array
//match array number to number in allQuestions array

var questionNum = 0;
var scoreNum = 0;
var makeQuestions = "";


$(document).ready(function() {
    makeQuestions = function() {
        if(questionNum === allQuestions.length){
            $("input[value=SUBMIT]").remove();
            $("#questions").text(" Done!Please click the button below to submit your results.  Your score is" + " " + scoreNum);
        }
        else{
        $("#questions").text(allQuestions[questionNum].question);
        for(var i=0; i<allQuestions[questionNum]['choices'].length;i++){
            $('#words').append('<input type="radio" name="buttons">' + allQuestions[questionNum]['choices'][i] + '</input');
        }
        }
    }
    makeQuestions();

});



var checkQuestions = function() {
    var lenG = document.getElementsByName("buttons").length;
    console.log(lenG);
    var rightAnswer = allQuestions[questionNum]['correctAnswer'];
    for (var i=0; i<lenG; i++){
        if (document.getElementsByName("buttons")[i].checked === true) {
            console.log(i);
            console.log(document.getElementsByName("buttons")[i].checked);
            //compare value to what was inputted
            if(i === rightAnswer){
                scoreNum +=1;
                alert("Correct! Your score is" +" " + scoreNum);
            }
            else{
                alert("False! Your score is still"+ " " + scoreNum );
            }
        }

}
questionNum = questionNum +1;
$("#words").empty();
makeQuestions();

}

Answer 1

您将要使用像PHP这样的服务器端语言将分数邮寄给您。你还应该考虑一种方法来为每个提交附加某种用户标识符（如名称），否则你只会得到一个装满分数的收件箱而无法将它们与测验者联系起来。

我已更新您的jsfiddle，只是为了让您了解该怎么做。我把“submit.php”的内容放在CSS框中。如果它没有正确解决或某事，这里又是：

<?php
$answers_correct = (ctype_digit($_POST['answers_correct']) ? $_POST['answers_correct'] : 'spoofed');

$to      = 'your@email.com';
$subject = 'the subject';
$message = 'Answers correct: ' . $answers_correct;
$headers = 'From: webmaster@example.com' . "\r\n" .
    'Reply-To: webmaster@example.com' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);
?>

Thank you for submitting your results!

对HTML的更改：

<body>
<div id="questions"></div>
<div id="words"></div>

<input type="button" value="SUBMIT" onClick="checkQuestions()" />

<div style="display:none;">
    <form id="answer_submission_form" action="submit.php" method="POST">
        <input type="hidden" id="answers_correct" name="answers_correct">
    </form>
</div>

</body>

对你的JS进行了更改，所有这些都在$(document).ready(){...：

中

$(document).ready(function() {
    makeQuestions = function() {
        if(questionNum === allQuestions.length){
            $("input[value=SUBMIT]").remove();
            $("#questions").text(" Done!Please click the button below to submit your results.  Your score is" + " " + scoreNum);
            $("#questions").append("<br><input type='button' id='submit_answers' value='SUBMIT'>");
            $("#answers_correct").val(scoreNum);
        }
        else{
            $("#questions").text(allQuestions[questionNum].question);
            for(var i=0; i<allQuestions[questionNum]['choices'].length;i++){
                $('#words').append('<input type="radio" name="buttons">' + allQuestions[questionNum]['choices'][i] + '</input');
            }
        }
    }
    makeQuestions();


    $('#submit_answers').on('click', function() {
        $('#answer_submission_form').submit();
    });

});

如果您真的不想使用像我这样不推荐的PHP这样的语言，您可以考虑设置一个form with a mailto action：

报告在线测验结果

1 个答案: