Beginning JavaScript

Creating the Answer Radio Buttons

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 to the top of the trivia_quiz.htm page.

<HTML> <HEAD> <TITLE>Wrox Online Trivia Quiz</title> <STYLE TYPE="text/css">  </STYLE> <STYLE TYPE="text/css">  </STYLE> <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>

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.