JavaScript Quiz Program

Question

Can someone explain the flow of this program? in the first part, is the test, test_status, question, choice, choices, chA, chB, chC, correct is declared or it is the value of quiz? Also the test.innerHTML += it will add the value of test and the radio?

<script type="text/javascript">
var quiz = 0,
    test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
              ["What is 36 + 42", "64", "78", "76", "B"],
              ["What is 7 x 4?", "21", "27", "28", "C"],
              ["What is 16 / 4?", "4", "6", "3", "A"],
              ["What is 8 x 12?", "88", "112", "96", "C"]
              ];

function get(x) {
    return document.getElementById(x);
}

function renderQuestion() {
    test = get("test");
    if (quiz >= questions.length) {
        test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
        get("test_status").innerHTML = "Test completed";
        quiz = 0;
        correct = 0;
        return false;
    }
    get("test_status").innerHTML = "Question " + (quiz + 1) + " of " + questions.length;
    question = questions[quiz][0];
    chA = questions[quiz][1];
    chB = questions[quiz][2];
    chC = questions[quiz][3];
    test.innerHTML = "<h3>" + question + "</h3>";
    test.innerHTML += "<input type='radio' name='choices' value='A'> " + chA + "<br>";
    test.innerHTML += "<input type='radio' name='choices' value='B'> " + chB + "<br>";
    test.innerHTML += "<input type='radio' name='choices' value='C'> " + chC + "<br><br>";
    test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}

function checkAnswer() {
    choices = document.getElementsByName("choices");
    for (var i = 0; i < choices.length; i++) {
        if (choices[i].checked) {
            choice = choices[i].value;
        }
    }
    if (choice == questions[quiz][4]) {
        correct++;
    }
    quiz++;
    renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>

Answer 1

Alright. Let's begin with our workstation.

var quiz = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;

var questions = [
    ["What is 36 + 42", "64", "78", "76", "B"],
    ["What is 7 x 4?", "21", "27", "28", "C"],
    ["What is 16 / 4?", "4", "6", "3", "A"],
    ["What is 8 x 12?", "88", "112", "96", "C"]
];

Notice that quiz and correct are numbers only. I think "quiz" will be the counter of done questions and "correct" will be the counter of correct questions. All the other variables are undefined, except questions wich have a pretty curious Array's structure. The obvious: it's a list of questions with 3 choices only. Each question follows this structure:

[" QUESTION ", " OPTION A ", " OPTION B ", " OPTION C ", " CORRECT OPTION "];

So I think that's unlimited. If you want to add some questions, try that.

Let's continue. After our global variables we program some functions to make the quizz happen. They're get - return a DOM element by id -, renderQuestion - show the current question - and checkAnswer - action taked when someone choose an option. I think that function get it's just to clear the code, it's not so required. Let's jump to the next, right?

  function renderQuestion(){
      test = get("test"); //document.getElementById('test')
      if(quiz >= questions.length){
        test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
        get("test_status").innerHTML = "Test completed";
        quiz = 0;
        correct = 0;
        return false;
      }
      get("test_status").innerHTML = "Question "+(quiz+1)+" of "+questions.length;
      question = questions[quiz][0];
      chA = questions[quiz][1];
      chB = questions[quiz][2];
      chC = questions[quiz][3];
      test.innerHTML = "<h3>"+question+"</h3>";

      test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
      test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
      test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
      test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
    }

The first thing this function do is var test = document.getElementById('test'). Then it checks if your quiz already ended with quiz >= questions.length. That is, quiz really is just a counter of completed questions. Of course, as we're starting, quiz < questions.length will push us out of that conditional.

get("test_status").innerHTML = "Question "+(quiz+1)+" of "+questions.length;

That will print "Question 1 of 4" inside DOM #test_status. Here we will finally use our undefined variables:

question = questions[quiz][0];
chA = questions[quiz][1];
chB = questions[quiz][2];
chC = questions[quiz][3];

As quiz = 0, question = "What is 36+42", chA = "64", chB = "78" and chC = "76". Then we're ready to print all the question inside DOM #test:

test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";

The output will be:

<h3>What is 36 + 42</h3><input type='radio' name='choices' value='A'> 64<br><input type='radio' name='choices' value='B'> 78<br><input type='radio' name='choices' value='C'> 76<br><button onclick='checkAnswer()'>Submit Answer</button>

Pay atention!

Here's a button that calls the function checkAnswer:

<button onclick='checkAnswer()'>Submit Answer</button>

That's what keep your quiz on. So, let's "click that" to call what we need:

    function checkAnswer(){
      choices = document.getElementsByName("choices");
      for(var i=0; i<choices.length; i++){
        if(choices[i].checked){
          choice = choices[i].value;
        }
      }

      if(choice == questions[quiz][4]){
        correct++;
      }
      quiz++;
      renderQuestion();
    }

The first thing: what's our choices?

choices = document.getElementsByName("choices");

Now we have them. But what's our selected choice's value?

for(var i=0; i<choices.length; i++){
    if(choices[i].checked){
        choice = choices[i].value;
    }
}

Remember: choices is our current list of choices, choice is our current choice's value. Let's continue.

if(choice == questions[quiz][4]){
     correct++;
}

It verifies if our current choice's value is equal to our current question's correct choice. If it's, then our counter of correct questions will be incremented.

quiz++;
renderQuestion();

Just to finish: we move to the next question and call renderQuestion to start over again. When you finish the last one question, the renderQuestion function will stop on that conditional quiz >= questions.length, calling this:

test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
quiz = 0;
correct = 0;
return false;

I think it's easier to understand now.

Oh, I almost forgot. Did we started the quiz? Not. That's what this do:

window.addEventListener("load", renderQuestion, false);

When your window's ready, it'll call renderQuestion() for you.