0

您好，我正在努力寻找让简单的在线测验将用户结果发送到指定电子邮件的最佳方法。我对 Javascript 相当陌生，如果有人能指出我正确的方向，我将不胜感激。

JS小提琴链接

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();

}
4

1 回答 1

0

您将希望使用像 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 之类的语言，你可以考虑设置一个带有mailto操作的表单：

于 2013-09-10T02:43:17.927 回答