JavaScript Quiz Program
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:
- A quiz about marketing could help the visitor
determine whether or not they really need a certain
marketing course.
- 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.
- 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 instead.)
See the demo of the JavaScript quiz program.
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.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2001 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
