Beginning JavaScript | 21

[previous] [next]

The Trivia Quiz

We can then display the question using just one document.write(), which writes the whole question out in one go.

We start this process by declaring the questionHTML variable and setting it to the HTML needed to write the actual question to the page. This information is stored in the first index position of the second dimension of our questions array, that is questions[questionNumber][0], where questionNumber is the random index we generated before.

var questionHTML = "<p>" + questions[questionNumber][0] + "</p>"; var questionLength = questions[questionNumber].length; var questionChoice;

To create the possible answers for the user to select from, we need to know how many radio buttons are required, information that's stored in the length property of the second dimension of our questions array. Remember that the second dimension is really just an Array object stored in a particular position of our questions array and Array objects have a length property. We use the variable questionLength to store the length of the array, and also declare another variable, questionChoice, which we will use to loop through our array.

Now we can start looping through the question options and build up the radio button group. We do this in the next for loop. If it's the first radio button that we are creating the HTML for, then we add the CHECKED word to the <input> tag. We do this to ensure that one of the radio buttons is checked, just in case the user tries to press the Check Answer button without actually providing one first.

for (questionChoice = 1;questionChoice "; questionHTML = questionHTML + questions[questionNumber][questionChoice]; questionHTML = questionHTML + "<br/>"; }

For example, on one loop of the for loop, the HTML built up in questionHTML may be:

<input type="radio" name="radQuestionChoice" checked=""/> A sixties rock group from Liverpool<br/>

With the looping finished and questionHTML containing the complete HTML needed to display one question, all that remains to do is to display the question number for the current question in the text box in the form, and then return the questionHTML string to the calling code. We use questionNumber + 1 as the question number purely for user friendliness. Even though it might be a question at index 0, most people think of starting at question 1 not question 0.

document.QuestionForm.txtQNumber.value = questionNumber + 1; return questionHTML; }

That completes the getQuestion() function. The final new code that needs looking at is the buttonCheckQ_onclick() function that fires when the button is clicked. We saw this added to our code above.

We start the function by declaring the variable answer and initializing it to 0. We'll be using this as the index when looping through the radio button group, and also to hold the actual answer.

function buttonCheckQ_onclick() { var answer = 0;

The then use a while statement to loop through each of the radio buttons, incrementing the answer variable until it hits upon a radio button which is checked. At which point the loop ends and we now know which radio button the user chose as their answer, namely that at the index stored in the answer variable.

while (document.QuestionForm.radQuestionChoice[answer].checked != true) { answer++; }

As our answers array holds the answers as A, B, C, D and so on, we need to convert the radio button index contained in answer into a character. We do this in the next line:

answer = String.fromCharCode(65 + answer);

This makes use of the fact that character code for A is 65, so if the user choose the first radio button, that is the one with an index of 0, we just need to add 65 and the index number contained in answer to get the answer's character code. This is converted to a character using the String object's fromCharCode() method. Remember that some methods of the String object can be used without having to actually create a String object ourselves (called static methods); we can use the native String object which is always present.

The answerCorrect() function we created in Chapter 3 is then used as part of an if statement. We pass the question number and the answer character to the function, and it returns true if the answer was correct. If it does return true, then we show a message box telling the user that they got the question right, otherwise the else statement lets them know that they got it wrong

if (answerCorrect(questionNumber,answer) == true) { alert("You got it right"); } else { alert("You got it wrong"); }

Finally, we reload the page to select another random question. window.location.reload(); }

In the next chapter we'll be making the Trivia Quiz a more sophisticated multi-frame based application, also adding necessary features like making sure the user doesn't get the same question twice!!!

[previous] [next]