Least Tern > Tech Class > Teacher Resources > Resources for Web Design

JavaScript Multiple Choice Quiz

ripple line

This script will help you to create a multiple choice quiz in which the answer is either Correct or Wrong (or use other graphics of your choice).  The sample code for the page creates a 2 column table with the questions in the right column and the correct/incorrect indication in the left column.

The quiz requires the 3 graphics above. You may download them from this page or create your own. Your graphics should all be the same size. Our graphics are original and copyright free.

Code for your <head> tag. Replace the red content with the exact image name and path for your quiz (remember - the path must lead to the folder where the image is stored in relation to the page)

<html>
<body background="bknotebk.gif">
<HEAD><title>Learn Technology Words</title>
<script language="JavaScript"> <!--
//------------- Preload images ------------
if (document.images) {
jsLtrA = new Image();
jsLtrA.src = "images/question.gif";
jsLtrB = new Image();
jsLtrB.src = "images/X.gif";
jsLtrC = new Image();
jsLtrC.src = "images/C.gif";
}
//--------------Functions --------------
function setImage (zName , zObj) {
if (document.images)
zName.src = zObj.src;
}
//--> </script></HEAD>

Create the table:

<P><Table border="1" cellpadding="1" cellspacing="1">

Create the first row. Your question is in blue, emphasized as a level 3 heading. The answers are in green. In this example, answer 1A and 2C are correct.  Note that image1 changes to image2 in the second question.

<tr>
<td><h3>A bit is <IMG SRC="image/question.gif" WIDTH=15 HEIGHT=19 BORDER=0 NAME=image1></td>
<td><h4><A HREF="" onClick="setImage(image1,jsLtrC); return false;">A</a> (Binary DigIT) -- A single digit number in base-2. The smallest unit of computerized data.
<P><A HREF="" onClick="setImage(image1,jsLtrB); return false;">B</a> A high-speed line or series of connections that forms a major pathway within a network
<P><A HREF="" onClick="setImage(image1,jsLtrB); return false;">C</a> A metal thing that goes on a horse.</td>
</tr>

<tr>
<td> <h3>The <ul> tag begins <IMG SRC="image/question.gif" WIDTH=15 HEIGHT=19 BORDER=0 NAME=image2></td>
<td><h4><A HREF="" onClick="setImage(image2,jsLtrB); return false;">A</a>A numbered list
<P><A HREF="" onClick="setImage(image2,jsLtrB); return false;">B</a> An underlined list
<P><A HREF="" onClick="setImage(image2,jsLtrC); return false;">C</a> A bulletted list (also called an unordered list)</td>
</tr>
</table>

See this work:

A bit is

A. (Binary DigIT) -- 0 or 1. The smallest unit of computerized data. This is 1/8th of a byte.
B. A high-speed line or series of connections that forms a major pathway within a network
C. A metal thing that goes on a horse

The <ul> tag begins

A. A numbered list.
B. An underlined list.
C. A bulletted list (also called an unordered list)

Elizabeth Sky-McIlvain 1/19/04