Question

我目前正在进行在线测验。目前的代码工作正常，但我想看看谁得分。我仍然是Javascript的新手，我一直在为朋友建立这个测验。我已经学到了很多东西，只是让这个东西起作用。

有人可以指出我正确的方向，如何添加一个简单的文本输入，或者在问题数组结束时调用结果页面时显示的文本输入

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

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

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

Here is my fiddle to see my setup:

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

}

Answer 1

我不确定这是否是您需要的，但我添加了一个小提琴：

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

我添加了div id='name'。其中包含用于输入文字的input字段。这将在所有答案提交后显示。

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

1 个答案: