Quiz in Javascript with Arrays?

Question

So, I'm trying to create a quiz in Javascript, by using number ids of the text inputs in HTML, then running a for loop and if to compare the input to the answer in an answers array.

In Html:

<form>
    China<input type="text" id="0"><br>
    France<input type="text" id="1"><br>
    Japan<input type="text" id="2"><br>
    <input type="button" id="submitt" value="submit">
</form>

In Javascript:

var answers = ["Beijing", "Paris", "Tokyo",];

$("#submitt").click(function() {
    var totalYes=0;
    function checkAnswers() {
        for(var i=0; i<answers.length; i++) {
            var userAnswer = document.getElementById(i);
            if(userAnswer.value===answers[i]) {
                totalYes++;
            }
        }
    }
    alert(totalYes);
    checkAnswers();
}); 

But the code doesn't add 1 to the variable totalYes (questions correct). I've tried totalYes+=1 and totalYes + 1 as well. The alert of totalYes shows up as 0 everytime.

But I know that's the only part not working because when I change totalYes to correct and incorrect alerts, it works:

var answers = ["Beijing", "Paris", "Tokyo",];

$("#submitt").click(function() {
    var totalYes=0;
    function checkAnswers() {
        for(var i=0; i<answers.length; i++) {
            var userAnswer = document.getElementById(i);
            if(userAnswer.value===answers[i]) {
                alert("Correct!");
            } else {
                alert("Incorrect!");
            }
        }
    }
    alert(totalYes);
    checkAnswers();
}); 

Please help?

Answer 1

jsFiddle Demo

NOTE: Because totalYes is a global variable you'll want to reset it to 0 after you show how many the user got right

JS

var answers = ["Beijing", "Paris", "Tokyo", ];
var totalYes = 0;

$("#submitt").click(function (e) {
    checkAnswers();
    alert(totalYes);
    e.preventDefault();
});

function checkAnswers() {
    for (var i = 0; i < answers.length; i++) {
        var userAnswer = document.getElementById(i);
        if (userAnswer.value === answers[i]) {
            totalYes++;
        }
    }
}

---

Side Note: This would be the easy test to cheat on...simply view source and you can see the JavaScript answers. Perhaps you should toLower() the text and then md5 or sha1 the answers. Then simply do the same when checking them

jsFiddle Demo

var answers = ["feecd450f4886bbed257e222fcf7609cbdd57a64", "3c4bd4d0d0d1e076ce617723edd6a73afc9126ab", "0f1aae8b8398c20f81e1c36e349a7880c9234c63", ];
var totalYes = 0;

$("#submitt").click(function (e) {
    checkAnswers();
    alert(totalYes);
    e.preventDefault();
    totalYes = 0;
});

function checkAnswers() {
    for (var i = 0; i < answers.length; i++) {
        var userAnswer = document.getElementById(i);
        if (Sha1.hash(userAnswer.value.toLowerCase()) === answers[i]) {
            totalYes++;
        }
    }
}

Note: You will see some sha1 code this code was taken from http://www.movable-type.co.uk/scripts/sha1.html#code

This will make it impossible without a rainbow table to simply view source to get the answer, I hope this is helpful in some small way

---

Extra note: Because you are using a for loop for each question, any answer can be put into any textbox. Example: Paris can be put in the textbox next to China and you'll still get 1 right.

Answer 2

The order of calling functions is not correct. You are first alerting your variable and then start counting correct answers. Change to:

$("#submitt").click(function() {
    var totalYes=0;
    function checkAnswers() {
        for(var i=0; i<answers.length; i++) {
            var userAnswer = document.getElementById(i);
            if(userAnswer.value===answers[i]) {
                totalYes++;
            }
        }
    }
    checkAnswers(); // check answers at the first place
    alert(totalYes);
});