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