Checking input against array value

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

};

Do you get an error? What makes you say you're doing something wrong. You haven't described any problem... It's always helpful when you show us what you've done to debug your code so we don't have to reinvent the wheel. — dmeglio
– dmeglio, Commented Apr 28, 2015 at 20:09
What about answerList.forEach(function(question) { ... })? That could help clean it up a lot. Then there's indexOf to find if it's in that list. — tadman
– tadman, Commented Apr 28, 2015 at 20:13
Wondering "Why this code is not working"? SO has a vote exactly for that — Ejaz
– Ejaz, Commented Apr 28, 2015 at 20:13
Should I just post the whole thing? I'm trying to check the input to see if it's correct with the array value then add 1 to the total. It's not adding to the total at the moment. — BlackBolt_
– BlackBolt_, Commented Apr 28, 2015 at 20:22

vasilenicusor · Accepted Answer · 2015-04-28 20:43:24Z

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/

Collectives™ on Stack Overflow

Checking input against array value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related