The Trivia Quiz - Page 23

It's time to return to the Trivia Quiz as we left it in Chapter 3. So far we have defined the questions and answers in arrays, and defined a function to check whether the user's answer is correct. Now we know how to create HTML forms and elements, we can start using them in the quiz to provide the user input. By the end of this section the question form will look like the picture below.

At present our questions are multi-choice; we represent the multi-choice options by a radio button group.

We create the form elements dynamically using our old friend document.write() and the information contained in the questions array. Once the user has selected the radio button representing the answer, they then click the Check Question button, which calls our checkAnswer() function, works out if the user got the question right, and lets them know. We then move on to the next question.

Let's start by creating the form elements.

Creating the Form

The first thing we need to do is add a form to our page in which the radio buttons will be written. Load in trivia_quiz.htm and change the bottom of the page, below where the questions and answers arrays are defined as follows:

// assign answer for question 3 
answers[2] = "C";
</SCRIPT>

<FORM NAME="QuestionForm">

Question
<INPUT TYPE="text" NAME=txtQNumber SIZE=1>

<SCRIPT LANGUAGE=JavaScript>
   document.write(getQuestion());
</SCRIPT>

<INPUT TYPE="button" VALUE="Check Question" NAME=buttonCheckQ 
   onclick="return buttonCheckQ_onclick()">
</FORM>

</BODY>
</HTML>

We're inserting the new form, named QuestionForm, inside the body of the page.

The elements on the form are a text box, defined by the line:

<INPUT TYPE="text" NAME=txtQNumber SIZE=1>

which will hold the current question number, and a button named buttonCheck:

	
<INPUT TYPE="button" VALUE="Check Question" NAME=buttonCheckQ 
   onclick="return buttonCheckQ_onclick()">

which when clicked will check the answer supplied by the user and let them know if they got it correct or not. The button has its onclick event connected to a function, buttonCheckQ_onclick(), which we'll create in a moment.

Where are the radio buttons you can see in the picture above? Well, we'll be using the document.write() method again to dynamically insert the questions as the page is loaded. That way we can pick a random question each time from our question array. It's the code:

<SCRIPT LANGUAGE=JavaScript>
   document.write(getQuestion());
</SCRIPT>

that inserts the question using the second function we need to add, getQuestion().

How It Works - Page 22
Beginning JavaScript
Creating the Answer Radio Buttons - Page 24