根据数组值检查输入

Question

好的，这次我上传了整个内容。 代码的“得分”部分是无法正常工作的部分； 总数不会增加。 我正在尝试做的是遍历名为“答案”的输入的集合。 如果选中其中之一，并且其值也与correctAnswer相同，则总数将增加1。

HTML

    <form id="quizform">
            <p id="question"></p>
            <input type="radio" value="0" name="answer"><p class="givenChoices"></p><br>
            <input type="radio" value="1" name="answer"><p class="givenChoices"></p><br>
            <input type="radio" value="2" name="answer"><p class="givenChoices"></p><br>
            <input type="radio" value="3" name="answer"><p class="givenChoices"></p><br>
    </form>
    <p id="score"></p>
    <input type="button" id="next_button" name="next" value="Next" onclick="nextQuestion()">

JavaScript的

var allQuestions = [
{
    question: "test question 1", 
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
    correctAnswer:0
},
{
    question: "test question 2", 
    choices: ["David Cameron2", "Gordon Brown2", "Winston Churchill2", "Tony Blair2"], 
    correctAnswer:1
},
{
    question: "test question 3", 
    choices: ["David Cameron3", "Gordon Brown3", "Winston Churchill3", "Tony Blair3"], 
    correctAnswer:2
},
{
    question: "test question 4", 
    choices: ["David Cameron4", "Gordon Brown4", "Winston Churchill4", "Tony Blair4"], 
    correctAnswer:3
},
{
    question: "test question 5", 
    choices: ["David Cameron5", "Gordon Brown5", "Winston Churchill5", "Tony Blair5"], 
    correctAnswer:3
},
];

var total = 0;
var j = 0;

//initial question and ansers
var currentQuestion = document.getElementById("question");
currentQuestion.innerHTML = allQuestions[0].question;

for(var i = 0; i < allQuestions[j].choices.length; i++){
var currentChoices = document.getElementsByClassName("givenChoices");
currentChoices[i].innerHTML = allQuestions[j].choices[i];
};


function nextQuestion(){
//last question checker
if(j >= allQuestions.length -1){
    document.getElementById("quizform").style.display = "none";
    document.getElementById("next_button").style.display = "none";
//add score
document.getElementById("score").innerHTML = total; 
};


//scoring
var answerList = document.getElementsByName("answer");


for(var i = 0; i < answerList.length; i++){
    if(answerList[i].checked){
        if(answerList[i].checked.value == allQuestions[j].correctAnswer){
            total++;
        }
    }
}

//show next array item
j++;
$("#quizform").fadeOut("slow", function(){
    currentQuestion.innerHTML = allQuestions[j].question;

    for(var i = 0; i < allQuestions[j].choices.length; i++){
        currentChoices[i].innerHTML = allQuestions[j].choices[i];
    }
    $("#quizform").fadeIn("slow");                    
});

};

Answer 1

假设问题是从allQuestions的内容动态生成的，我提出以下示例解决方案：

html内容：

<form id="quizform">
</form>
<p id="score"></p>
<input type="button" id="check_answer" value="Check" />

JavaScript的：

var allQuestions = [
    {
        question: "test question 1", 
        choices: ["David", "Gordon", "Winston", "Tony"], 
        correctAnswer:0
    },
    {
        question: "test question 2", 
        choices: ["David", "Gordon", "Winston", "Tony"], 
        correctAnswer:0
    }
],
    i,
    j,
    question_content,
    question,
    total;

// generate questions
for(i=0;i<allQuestions.length;i++)
{
    question = allQuestions[i];
    console.log(question.choices);
    question_content = '<p id="question-'+i+'">'+question.question+'</p>';
    for(j=0;j< question.choices.length ;j++)
    {
        question_content += '<input type="radio" value="'+j+'" name="answer-'+i+'"><span class="givenChoices">'+question.choices[j]+'</span><br>';
    }
    question_content +='<hr>';
    $("#quizform").append(question_content);
}
// validate answers
$("#check_answer").on('click',function(){
    // check if all questions has been answered
    if($('input[name^="answer-"]:checked').length !== allQuestions.length){
        alert("Please answer to all questions!");
        return;
    }
    total= 0;
    for(i=0;i<allQuestions.length;i++)
    {
        question = allQuestions[i];
        if($('input[name="answer-'+i+'"]').is(':checked')) {
            if($('input[name="answer-'+i+'"]:checked').val() == question.correctAnswer){
                total++;
            }
        }
    }
    $("#score").html(total);
});

您可以在此JSFiddle示例http://jsfiddle.net/0dLk5pn9/2/上进行检查