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?

Your javascript code does not look right. A function within a function? — Noman Ghani
– Noman Ghani, Commented Apr 13, 2014 at 8:38
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. — abc123
– abc123, Commented Apr 14, 2014 at 14:00

abc123 · Accepted Answer · 2014-04-14 14:00:22Z

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.

Artyom Neustroev · Accepted Answer · 2014-04-13 08:44:25Z

0

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

answered Apr 13, 2014 at 8:44

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Collectives™ on Stack Overflow

Quiz in Javascript with Arrays?

2 Answers 2

jsFiddle Demo

jsFiddle Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related