[Solved] JavaScript Quiz Program


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.

solved JavaScript Quiz Program