Simple Quiz

This script Allows you to generate a simple quiz for the viewer to take. Displays the viewer's results and a percentage grade in an alert box.

Script Code

Grab a copy of the file below and place it in the same directory as the Web page on which you will use the script (if you wish to place the script file in a different directory you will need to make the necessary adjustments to the src attribute of the script tag that calls it).

sgames001.js

The code below should be placed between the <body> and </body> tags where you want the form to appear.

<form name="quiz_form" id="quiz_form" action="#" onsubmit="return quiz_grade();">
<label for="qu_1">1. What is 1+1? (a) 2 (b) Argh! Why math?!</label><br /> 
<input type="text" name="qu_1" id="qu_1" /><br />
<label for="qu_2">2. Who sings the song "Free Fallin’"? (a) Elvis (b) Lance Berkman 
 (c)Tom Petty (d) "Weird Al" Yankovic</label><br /> 
<input type="text" name="qu_2" id="qu_2" /><br />
<label for="qu_3">3. What’s the name of this Web site? (a) JavaScriptin' is Fun 
 (b) JavaScript City (c) Java with Script (d) Scriptin’ to the Oldies</label><br /> 
<input type="text" name="qu_3" id="qu_3" /><br />
<label for="qu_4">4. Who lives in a pineapple under the sea? (a) Dora the Explorer
 (b) Hannah Montana (c) Big Bird (d) Sponge Bob Square Pants!</label><br /> 
<input type="text" name="qu_4" id="qu_4" /><br />
<label for="qu_5">5. Who won the 1994-1995 NBA Championship? (a) Orlando Magic 
 (b) Houston Rockets (c) Chicago Bulls (d) San Antonio Spurs</label><br /> 
<input type="text" name="qu_5" id="qu_5" /><br />
<br />
<input type="submit" value="Submit Answers" />
</form>
<script type="text/javascript" src="sgames001.js"></script>

Example

A working sample of the script is shown below.

Answer the questions and submit:

Options

You can change the appearance of the text and form by using the appropriate IDs in your your style sheet and by editing the labels in the HTML as desired.

More questions may be added to the quiz by adding them to the HTML file and adding the additional answers in the script file. For example, to add question 6 you could add the following to the HTML code:

<label for="qu_6">6. What is my favorite color? (a) Red (b) Green (c) Blue (d) Orange</label><br />
<input type="text" name="qu_6" id="qu_6" /><br />

and add the following to the JavaScript code (in the sgames001.js file):

q_answers[5] = "c"; // Answer for Question 6

Note that the array index number is one less than the question number.

Accessibility

Setting the form action to link to a backup server-side script that performs the same function should do the trick for those without JavaScript.