根据数组值检查输入

Question

Ok, I uploaded the whole thing this time. The "scoring" part of the code is what is not working correctly; the total doesn't get increased. What I'm trying to do is loop through the collection of inputs named "answer". If one of them is checked and also has the same value as the correctAnswer then the total is increased by 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

Supposing the questions are generated dynamic from content of allQuestions , i propose the following sample solution:

html content:

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

You can check this on this JSFiddle example http://jsfiddle.net/0dLk5pn9/2/