Creating the Answer Radio Buttons - Page 24
October 12, 2001
We saw in the code above, that the radio buttons required will be
inserted by the getQuestion() function, and the
buttonCheckQ_onclick() function is connected to the button's
onclick event handler. We'll now add these functions to the top
of the page in the same script block as the answerCorrect()
function that we defined in Chapter 3.
Add the following lines [in red and green] to the top of the
trivia_quiz.htm page.
<HTML>
<HEAD>
<TITLE>Wrox Online Trivia Quiz</TITLE>
<SCRIPT LANGUAGE=JavaScript>
var questionNumber;
function answerCorrect(questionNumber, answer)
{
// declare a variable to hold return value
var correct = false;
// if answer provided is same as answer then
// correct answer is true
if (answer == answers[questionNumber])
correct = true;
// return whether the answer was correct (true or false)
return correct;
}
function getQuestion()
{
questionNumber = Math.floor(Math.random() * (questions.length));
var questionHTML = "<P>" +
questions[questionNumber][0] + "</P>";
var questionLength = questions[questionNumber].length;
var questionChoice;
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>";
}
document.QuestionForm.txtQNumber.value = questionNumber + 1;
return questionHTML;
}
function buttonCheckQ_onclick()
{
var answer = 0;
while (document.QuestionForm.radQuestionChoice[answer].checked
!= true)
{
answer++;
}
answer = String.fromCharCode(65 + answer);
if (answerCorrect(questionNumber,answer) == true)
{
alert("You got it right");
}
else
{
alert("You got it wrong");
}
window.location.reload();
}
</SCRIPT>
</HEAD>
<BODY>
[The lines in green above are one line. They have been split
for formatting purposes.]
We will discuss the getQuestion() function first, which is used
to build up the HTML needed to display the question to the user.
We first want to select a random question from our questions
array, so we need to generate a random number, which will provide
the index for the question. We store this number in the global
variable questionNumber that we declared at the top of the script
block.
function getQuestion()
{
questionNumber = Math.floor(Math.random() * (questions.length));
We generate a random number between 0 and 1 using the
Math.random() method, and then multiply that by the number of
questions in the questions array. This number is converted to an
integer using the Math object's floor() method, which returns the
lowest integer part of a floating point number. This is exactly
what we want here: a randomly selected number from 0 to
questions.length - 1. Don't forget that arrays start at an index
of 0.
Our next task is to create the radio buttons, which allow the
user to answer the question. We do this by building up the HTML
that needs to be written to the page inside the variable
questionHTML. 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;
[The lines in green above are one line. They have been split
for formatting purposes.]
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.
The Trivia Quiz - Page 23
Beginning JavaScript
Creating the Answer Radio Buttons (Con't) - Page 25
|
