Multiple choice quiz using HTML + Javascript: re: updating the score using array objects and properties (Help analyzing code)

Question

I am trying to analyze someone's code line for line so that I can reverse engineer it. However I'm currently stumped...

Please look at the code at the following link:

http://jsfiddle.net/alxers/v9t4t/

^ I'm stuck at the 4th function...

function updateScore() {
    var rightAnswer = allQuestions[questionCount].correctAnswer;
    var chosenAnswer = document.getElementById("choice" + (rightAnswer + 1));
    if (chosenAnswer.checked) {
        score++;
    }
}

I understand what the 'var rightAnswer' line is doing... it's retrieving the applicable object from the allQuestions array. And from that object, it then accesses the correctAnswer property. Each time this function is executed, rightAnswer should have values of 2, then 1, then 0, I think?...

This is where I get confused - the value for rightAnswer is then used in the next line of code which assigns a document.getElementById to the variable chosenAnswer.

But the code is adding 1 to rightAnswer, so the HTML Elements that will be retrieved will be "choice3", "choice2", and "choice0" ???

I would think that the code would try to retrieve the element for whatever answer/radio-bubble the user selects, right???

I guess I'm not understanding this...

and also i guess it follows that I don't understand what the next line of code does - I understand that 1 will be added to the score (which starts at 0), but I don't understand the if-conditional, which uses the checked.property

Any help would be greatly appreciated!

Answer 1

You're right on track – It gets the correctAnswer of the current question – ie. '2' for the first question, meaning the third option in the array (since 0, is always the first position in an array)

if you look at the HTML, the ID for the third radio button is choice3 so the script increments to determine if the proper radio button is is punched (.checked returns true/false), if it is, then they were right, so the score is bumped up!

A better initial design could have been:

<h3 id="questionHeader"></h3>

<input type="radio" name="choice" value="0" id="choice0">
<label id="answ0"></label>
<br>
<input type="radio" name="choice" value="1" id="choice1">
<label id="answ1"></label>
<br>
<input type="radio" name="choice" value="2" id="choice2">
<label id="answ2"></label>
<br>
<button id="next">Next</button>

To prevent the extra step in the javascript, and match both the form values, and the array positions.

Answer 2

It's adding one because the ids don't start with 0, but with 1: choice1, choice2, choice3.

The if-conditional is checking to see if chosenAnswer, which gets the id of the correct answer in the html, is selected (i.e. that radio button is checked). If the correct answer is chosen, then it increments the score.