Today you'll read about a free JavaScript quiz program you can use on your sites. It is for those who prefer something quick and free, even if somewhat limited, to the easy sophistication of the commercial Master Quiz CGI program.

The JavaScript program lets you have any number of questions. Answer choices must be radio buttons.

The questions must all have the same number of answer choices. For example, if the first question has five answer choices, then all questions must have five answer choices. Answers have numerical values for use in the scoring process.

A button click displays the total score.

The JavaScript quiz program may be utilized when a one-page quiz is appropriate with the score presented on the same page as the quiz. Paragraphs explaining the different possible scores could be presented on the same page. Examples:

1. A quiz about marketing could help the visitor determine whether or not they really need a certain marketing course.
    
2. A quiz could be utilized to help determine which type of book to recommend. When the score falls within a certain range, book A is recommended. In another range, book B, And so forth.
    
3. A quiz to consult knowledge of a specific subject can help prospective students determine which homestudy courses to register for.

(For multi-page quizzes, quizzes with checkboxes, easy form generation, no JavaScript dependency, database storage, email notification, and/or alternate "thank you" pages depending on the total score, use the feature rich Master Quiz at http://willmaster.com/a/10/pl.pl?mq instead.)

A demo of the JavaScript quiz program is at http://willmaster.com/a/10/pl.pl?104demo

The demo page contains a quiz and program source code that you can modify for your sites.

The Quiz Form

Begin the form with:

<form name="quizform">

Next, on a separate sheet of paper or your word processor, write down the quiz questions. Label each question as "Q1," "Q2," "Q3," and so forth.

Decide how many answer choices the questions will have. Each question must have the same number of answers to choose from.

The answer choices are radio buttons. The name of the radio buttons will be the label of the question they belong to.

For example, let's suppose the first question is, "Is blue a nice color?" and it's label is "Q1." For this example, we'll assume the answer choices have score values 1 through 5.

The radio buttons for "Is blue a nice color?" would then be:

<input type="radio" name="Q1" value="1">
<input type="radio" name="Q1" value="2">
<input type="radio" name="Q1" value="3">
<input type="radio" name="Q1" value="4">
<input type="radio" name="Q1" value="5">

Create a set of radio buttons for each of your questions, the name of the radio buttons being the label of the question they represent.

(Score values may be positive or negative numbers. To specify a negative number, precede the number with a hyphen, like "-3")

The quiz answers and the questions can be put into an HTML table or formatted any way you wish.

End the form with a total score field (for the JavaScript code to automatically fill in), a "Calculate the score" button, and the end form tag:

Score: <input type="text" 
name="totalscore" 
size="4">
<br>
<input type="button" 
value="Calculate the score" 
onClick="CalculateScore()"> 
</form>

When the "Calculate the score" button is clicked, the JavaScript code (see below) will add up the values selected in the radio buttons and automatically put sum into the total score field.

JavaScript Code

Copy the JavaScript code from the source code of the demo page. You'll find it in the HEAD area.

In the first part of the JavaScript code, you'll see the line:

NumChoices = 3;

Change that number 3 to the number of answer choices your questions have. In the example we used above, the number is 5.

Next, about midway of the JavaScript code, you'll see a block of code between the lines

// Begin calculation block.

and

// End calculation block.

The program lines look like this (all one line, even though printed here in 2 lines):

if(document.quizform.Q1[i].checked) 
{ score += parseInt(document.quizform.Q1[i].value); }

There must be one program line similar to the above for every question of your quiz. The above example is correct for the first question. For the second question's line, replace the two instances of "Q1[" with "Q2[" — in the same manner, modify each line with the label of the question it is to represent.

Putting it Together

Put the JavaScript code into the HEAD area of your page. The quiz form needs to go into the BODY area.

The BODY area begins with the <body...> tag and ends with the </body> tag. It is where the visible portion of your web page goes.

The head area is the section above the BODY area between the <head> and </head> tags.

The quiz can be tested off-line, if you wish. When it's working the way you want, upload it and do a final test.

Copyright 2001 William Bontrager
Programmer/Publisher, "WillMaster Possibilities" ezine
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com
Business Home Page: http://willmaster.com/