Creating the Answer Radio Buttons (Con't) - Page 25

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 <
   questionLength;questionChoice++)
  {
    questionHTML = questionHTML + "<INPUT TYPE=radio
     NAME=radQuestionChoice"
    if (questionChoice == 1)
    {
      questionHTML = questionHTML + " CHECKED";
    {
    questionHTML = questionHTML + ">";
    questionHTML = questionHTML + questions[questionNumber]
     [questionChoice];
    questionHTML = questionHTML + "<BR>";
  }

[The lines in green above are one line. They have been split for formatting purposes.]

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>

[The lines above are one line. They have been split for formatting purposes.]

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++;
  }

[The lines in green above are one line. They have been split for formatting purposes.]

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.

Creating the Answer Radio Buttons - Page 24
Beginning JavaScript
Summary - Page 26