使用 Javascript 将详细的输入表单添加到测验结果中


Adding detailed input forms to quiz results with Javascript

我目前正在制作一个在线测验。当前的代码工作正常,但我想看看谁得分是多少。我对Javascript仍然非常陌生,我一直在为朋友构建这个测验。我学到了很多东西,只是让这个东西工作。

有人可以指出我正确的方向,如何添加一两个简单的文本输入,当在问题数组的末尾调用结果页面时,这些输入将显示

我希望能够让用户输入他们的名字,并使用 php 邮件程序将其与结果一起提交。

我试图在 HTML 区域添加一个简单的 html 输入字段,如下所示,但它从未产生任何结果。

 <input name="Name" type="text" value="" size="80">

这是我的小提琴,看看我的设置:

var allQuestions = [{
    question: "Anger can be thought of as a like other feelings and emotions.",
    choices: ["Emotion", "Wave length", "Continuum", "Exercise"],
    correctAnswer: 2
}, {
    question: "Strong, silent type of personality will usually when things finally overwhelm him.",
    choices: ["Explode", "Implode", "Leave", "Cry"],
    correctAnswer: 0
}, {
    question: "People that complain about everything, and see themselves as victims, fit the personality type called.",
    choices: ["Prosecutor", "Grouch", "Exterminator", "Terminator"],
    correctAnswer: 1
}, {
    question: "When someone wants to point out the faults in others, in order to shift blame off of himself, he is probably a",
    choices: ["Displacer", "Intimidator", "Prosecutor", "grouch"],
    correctAnswer: 2
},
{
    question: "The type of personality takes his anger out on people or things he views as “less threatening” than the person he is actually mad at.",
    choices: ["Grouch", "Displacer", "Prosecutor", "Coward"],
    correctAnswer: 1
},
{
    question: "The easiest type of anger personality to spot is usually the.   Often these types come from abusive backgrounds.",
    choices: ["Intimidator", "Grouch", "Displacer", "Prosecutor"],
    correctAnswer: 0
},
{
    question: "Anger has a medical definition, saying it is an state that ranges from to intense fury and rage.",
    choices: ["Mental State Embarrassment", "Emotional State Mild Irritation", "Exhausted State Yawning", "Typical State Relaxing"],
    correctAnswer: 1
},                    
{
    question: "Anger is often compared to a",
    choices: ["Flock of Geese", "Chord of Wood", "Pressure Cooker", "Bag of Ice"],
    correctAnswer: 2
}, 
{
    question: "Anger and rage can become a form of .  These people are known as rageaholics.",
    choices: ["Addiction", "Skin Disease", "Problem", "Comfort Zone"],
    correctAnswer: 0
},                     
{
    question: "First rule When you are   don’t say anything!",
    choices: ["Right", "Wrong", "Angry", "Confused"],
    correctAnswer: 2
},                    
{
    question: "Many times, we feel angry because a situation seems negative, and seems to clash with our.",
    choices: ["Belief System", "Current Plans", "Family Members", "Schedule"],
    correctAnswer: 0
},                    
{
    question: "Many people carry beliefs, that keep them feeling victimized all of the time.",
    choices: ["Stoic", "Unusual", "Irrational", "Western"],
    correctAnswer: 2
}, 
{
    question: "To contain anger, all we have to do is learn to view life from a perspective.",
    choices: ["Personal", "Different", "Closed", "Unknown"],
    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 = "";
var failedQuestions = [];
$(document).ready(function () {
    makeQuestions = function () {
        if (questionNum === allQuestions.length) {
            $("input[value=SUBMIT]").remove();
            $("#questions").text(" All Complete!") .append("<br> Please click the button below to submit your results.") .append("<br>Your score is" + " " + scoreNum);
            $("#questions").append("<br><input type='button' id='submit_answers' value='SUBMIT'><br><br>");
            $("#answers_correct").val(scoreNum);
            $("#questions").append("Failed questions: " + failedQuestions.join());
        } 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();
    });
});

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 {
                failedQuestions.push(questionNum);
                alert("False! Your score is still" + " " + scoreNum);
            }
        }

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

我不确定这是否是你需要的,但我添加了一个小提琴:

http://jsfiddle.net/5Jjam/40/

我用id='name'添加了div.这包含一个用于输入文本的input字段。提交所有答案后,将显示此信息。