The Trivia Quiz - Building One of the Basic Functions

The Trivia Quiz—Building One of the Basic Functions

In the previous chapter we declared the arrays that hold the questions and answers for our trivia quiz. We also populated these arrays with the first three questions. At that point we didn't have enough knowledge to actually make use of the data, but with what we've learned in this chapter, we can create a function that uses the information in the arrays to check whether an answer is correct.

Load in trivia_quiz.htm and alter it to that shown here:

<html>
<head>
<title>Wrox Online Trivia Quiz</title>
    
<script language="JavaScript" type="text/javascript">
    
function answerCorrect(questionNumber, answer)
{
   // declare a variable to hold return value
   var correct = false;
    
   // if answer provided is same as correct answer then correct variable is true

   if (answer == answers[questionNumber])
      correct = true;
    
   // return whether the answer was correct (true or false)
   return correct;
}
    
    
    
// Questions variable will holds questions
var questions = new Array();
var answers = new Array();
// define question 1
questions[0] = new Array();
    
// the question
questions[0][0] = "The Beatles were";
    
// first choice
questions[0][1] = "A sixties rock group from Liverpool";
    
// second choice
questions[0][2] = "Four musically gifted insects";
    
// third choice
questions[0][3] = "I don't know - can I have the questions on Baseball please";
    
// assign answer for question 1
answers[0] = "A";
    
// define question 2
questions[1] = new Array();
questions[1][0] = "Homer Simpson's favorite food is";
questions[1][1] = "Fresh salad";
questions[1][2] = "Doughnuts";
questions[1][3] = "Bread and water";
questions[1][4] = "Apples";
    
// assign answer for question 2
answers[1] = "B";
    
// define question 3
questions[2] = new Array();
questions[2][0] = "Lisa Simpson plays which musical instrument";
questions[2][1] = "Clarinet";
questions[2][2] = "Oboe";
questions[2][3] = "Saxophone";
questions[2][4] = "Tubular Bells";
    
// assign answer for question 3
answers[2] = "C";
    
</script>
</head>
    
<body>
    
</body>
</html>

The only changes here are that we've removed the alert() function, which told the user that the array was initialized, and added a function, answerCorrect(), which checks whether a trivia question has been answered correctly. This function has been added inside the script block in the head of the page. The answerCorrect() function takes two parameters: the question index from the arrays in the parameter questionNumber and the answer the user has given in the parameter answer. It then checks whether the user's answer is in fact correct—if it is, the function returns true, otherwise it returns false.

Currently the code checks the answer given by the user by checking to see whether the element of the answers array with an index of questionNumber is equal to the answer parameter. Given how simple this function is, couldn't we have just included the code wherever it's needed? Why go to the bother of creating a function? The answer to this query is that we have plans for that function. Currently, its role is simply to check whether the multiple-choice response, a single letter given by the user, is the same as the letter stored in the answers array. However, later we'll expand the trivia quiz to handle text-based questions such as, "Which President was involved in the Watergate scandal?" and we want the answer to be considered correct whether the user enters Richard Nixon, Nixon, R Nixon, and so on. This involves more than a simple comparison, so at some point we'll expand the answerCorrect() function to incorporate this extra intelligence. By including it in just one function, we need to change our code in only one place and can do so without breaking other parts of our program. Code using our function expects only a true or false result—how this function comes by this result is irrelevant.

To test our new answerCorrect() function, let's write some code that goes through each of the questions in the questions array and uses the answerCorrect() function to work out which answer is correct. Insert the following lines into the body of the page, inside the script block after the questions and answers array have been defined. Once you've finished testing, you can delete this code because it does not form part of the final trivia quiz.

// define question 3
questions[2] = new Array();
questions[2][0] = "Lisa Simpson plays which musical instrument";
questions[2][1] = "Clarinet";
questions[2][2] = "Oboe";
questions[2][3] = "Saxophone";
questions[2][4] = "Tubular Bells";
    
// assign answer for question 3
answers[2] = "C";
    
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("The Answer to Question 1 is " + answers[0] + "<br>");
document.write("The Answer to Question 2 is " + answers[1] + "<br>");
document.write("The Answer to Question 3 is " + answers[2]);
</script>
</body>
</html>

The code writes all the answers to the page by accessing the answer array and getting the letter in there that corresponds to the correct answer for each question.

If you load trivia_quiz.htm into your browser, you should see what is shown in Figure 3-14.

Figure 3-14

Note that the questions and answers arrays holding the question and answer data have global scope within the page, something that I warned you about in the previous section. However, here it is necessary because the arrays need to be accessed by both the function and the JavaScript code within the page.