Advanced - An Explanation of the code behind the "Quiz"

[Home]

Advanced: An Explanation of the Code Behind the "Quiz"

Most Web quizzes make use of two important features: forms and Javascript. Forms are HTML's way of allowing users to input information in a web page. Javascript is a scripting language, which allows you to process that data.

There are several good sites on the internet that provide an in-depth explanation of HTML forms and Javascript. My discussion will focus specifically on how to use these to create multiple choice questions.

For more information try:
[Javascript for the Total Non-Programmer]
[HTML An Interacticve tutorial for Beginners]

In my quiz, I used three arrays to store information about the quiz (Figure 5-1). The array key[] stores the correct answers to each question. The array explanation[] stores a written explanation of each answer. The array answer[] stores the user's responses. To alter my quiz, I just change the values of key[0] thru key[4] in the function InitializeAnswers() to add new correct answers and change explanation[0] thru explanation[4] to add new explanations.

Figure 5-1:

// Function to set up the key and initialize the user answers to none
function InitializeAnswers(){

// This loop resets all user answers to "none."
for (i=0;i < 5;i++){

answer[i]="none";

}

// Add your answer key below
key[0]="c";
key[1]="d";
key[2]="a";
key[3]="c";
key[4]="b";

// Add your explanations to each question below
explanation[0]="The author, Allen Murphy, teaches at Pennfield High outside Battle Creek.";
explanation[1]="This quiz uses Radio inputs to accept input from the user.";
explanation[2]="Multiple choice quizzes add interactivity to a web page.";
explanation[3]="The onClick attribute allows you to call a Javascript function from HTML.";
explanation[4]="The Script tag allows you to add Javascript functionality to a web page.";

}

The body of the document includes the actual questions. A form with radio inputs is used to display each question. The values of the answer[] array are assigned with the onClick= attribute of the radio input tags (Figure 5-2).

Figure 5-2:

<form name="myform">
<p><font color="#5f55b9">Question 1:</font> The author works at which school?</p>

<input type="radio" name="myBox1" onClick="answer[0]='a'" >a. Flint Central<br>
<input type="radio" name="myBox1" onClick="answer[0]='b'" >b. Battle Creek Central<br>
<input type="radio" name="myBox1" onClick="answer[0]='c'" >c. Pennfield<br>
<input type="radio" name="myBox1" onClick="answer[0]='d'" >d. DeWitt<br>

<br>

The function GradeQuiz() is invoked when the "Submit Answers" button is clicked (Figure 5-3). It compares the answer[] array to the key[] array and computes the percent score. The results are displayed in a new window.

Figure 5-3:

Click here to see the entire code. You will also be allowed to change the code and test it, in the process creating your own quiz!