Advanced: An Explanation of the Code Behind the "Quiz"
For more information try:
[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 thru key in the function InitializeAnswers() to add new correct answers and change explanation thru explanation to add new explanations.
|// Function to set up the key
and initialize the user answers to none
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).
<p><font color="#5f55b9">Question 1:</font> The author works at which school?</p>
<input type="radio" name="myBox1" onClick="answer='a'" >a. Flint Central<br>
<input type="radio" name="myBox1" onClick="answer='b'" >b. Battle Creek Central<br>
<input type="radio" name="myBox1" onClick="answer='c'" >c. Pennfield<br>
<input type="radio" name="myBox1" onClick="answer='d'" >d. DeWitt<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.
Name="Submit" value="Submit Answers" onClick="GradeQuiz()">
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!