[Home] [Explanation of Code Behind the Quiz]

Advanced: Quiz Editor - Create Your Own Quiz

The code below was used to create the quiz for this site. Blue text should be changed to fit your quiz. Red text includes additional instructions and need not be changed. To add more questions, be sure to change the 5's in the code to the number of questions you will use. You can try your own quiz questions below the yellow box.

<HTML>
<HEAD>
<TITLE>Sample Multiple Choice</TITLE>
<meta name="Author" content="
Allen W. Murphy">

<script language="JavaScript">

// Remember that Javascript numbers arrays starting at zero
// so Question #1 refers to answer[0], key[0], and explanation[0],
// Question #2 refers to answer[1], key[1], and explanations[1] ...


// Array to hold the user answers
answer = new Array(
5);

// Array to hold the correct answers
key = new Array(5);

// Array to hold explanation of each answer
explanation = new Array(5);

// Function to set up the key and initialize the user answers to none
function InitializeAnswers(){
// This loop resets all user answers to "none."
for (i=0;i < 5;i++){
answer[i]="none";
}

// Add your answer key below
key[0]="c";
key[1]="d";
key[2]="a";
key[3]="c";
key[4]="b";

// Add your explanations to each question below
explanation[0]="The author, Allen Murphy, teaches at Pennfield High outside Battle Creek.";
explanation[1]="This quiz uses Radio inputs to accept input from the user.";
explanation[2]="Multiple choice quizzes add interactivity to a web page.";
explanation[3]="The onClick attribute allows you to call a Javascript function from HTML.";
explanation[4]="The Script tag allows you to add Javascript functionality to a web page.";
}

// Function to compare the key to the user answers and caluclate the score
function GradeQuiz(){

score = 0;

NewWindow = window.open("","Results","scrollbars=yes resizable=yes");
NewWindow.document.write("<html><head><title>Quiz Results</title></head><body bgcolor=#aacc88>");
NewWindow.document.write("<h3>Your Quiz results</h3>");

for (i=0;i<5;i++){

NewWindow.document.write("<b>Question # " + String(i+1)+"</b>" + "<br>");
NewWindow.document.write("You answered -"+answer[i]+"-.<br>");
NewWindow.document.write("<font color='#0022aa'>The correct answer is -<b>"+key[i]+"</b>-.</font><br>");
if(key[i]==answer[i]){
score = score + 1;
}
NewWindow.document.write(explanation[i]);
NewWindow.document.write("<br><br>");
}
NewWindow.document.write("<h3>Your quiz score is "+String((score/5)*100)+"%.</h3>");
NewWindow.document.write("</body></html>");
NewWindow.document.close();

}
</script>
</HEAD>

<BODY BACKGROUND="background.gif" BGCOLOR="#ffffff" onLoad="InitializeAnswers()">

<blockquote>
<blockquote>
<blockquote>
<blockquote>

<table><tr>
<td>
<font color="#0000A0" size="5" face="Arial">
My Quiz on Web-Quizzes!</font></p>
</td>
<td><img src="a+sm.gif">
</td>
</tr></table>

<font face="Arial" size="2">

<form name="myform">
<p><font color="#5f55b9">Question 1:</font>
The author works at which school?</p>
<input type="radio" name="myBox1" onclick="answer[0]='a'" >a.
Flint Central<br>
<input type="radio" name="myBox1" onclick="answer[0]='b'" >b.
Battle Creek Central<br>
<input type="radio" name="myBox1" onclick="answer[0]='c'" >c.
Pennfield<br>
<input type="radio" name="myBox1" onclick="answer[0]='d'" >d.
DeWitt<br>
<br>
<p><font color="#5f55b9">Question 2:</font>
This quiz uses which <b>type</b> of HTML Input tag?</p>
<input type="radio" name="myBox2" onclick="answer[1]='a'" >a.
Select Box<br>
<input type="radio" name="myBox2" onclick="answer[1]='b'" >b.
Check Box<br>
<input type="radio" name="myBox2" onclick="answer[1]='c'" >c.
Text Box<br>
<input type="radio" name="myBox2" onclick="answer[1]='d'" >d.
Radio Button<br>
<br>
<p><font color="#5f55b9">Question 3:</font>
Using Javascript multiple choice questions in a web page is one way to add ________ .</p>
<input type="radio" name="myBox3" onclick="answer[2]='a'" >a.
interactivity<br>
<input type="radio" name="myBox3" onclick="answer[2]='b'" >b.
confusion<br>
<input type="radio" name="myBox3" onclick="answer[2]='c'" >c.
color<br>
<input type="radio" name="myBox3" onclick="answer[2]='c'" >d.
length<br>
<br>
<p><font color="#5f55b9">Question 4:</font>
Which HTML Input attribute is used to call a Javascript function?</p>
<input type="radio" name="myBox4" onclick="answer[3]='a'" >a.
Name<br>
<input type="radio" name="myBox4" onclick="answer[3]='b'" >b.
type<br>
<input type="radio" name="myBox4" onclick="answer[3]='c'" >c.
onClick<br>
<input type="radio" name="myBox4" onclick="answer[3]='c'" >d.
value<br>
<br>
<p><font color="#5f55b9">Question 5:</font>
Which HTML tag allows you to add Javascript functionality to your web pages?</p>
<input type="radio" name="myBox5" onclick="answer[4]='a'" >a.
Form tag<br>
<input type="radio" name="myBox5" onclick="answer[4]='b'" >b.
Script tag<br>
<input type="radio" name="myBox5" onclick="answer[4]='c'" >c.
Input tag<br>
<input type="radio" name="myBox1" onclick="answer[4]='c'" >d.
Title tag<br>
<br>
<input type="button" Name="Submit" value="Submit Answers" onClick="GradeQuiz()">
</form>
</font>

</blockquote>
</blockquote>
</blockquote>
</blockquote>

</BODY>
</HTML>

Instructions

  1. Highlight and copy the code in the yellow box above and paste it into the input box below.
  2. Make your changes. Start with just the blue areas. You will need to refer to the yellow box above.
  3. Press the button below to create your quiz.

    Your quiz will be generated. If you wish to save your quiz just choose Save As from the menu in the quiz's window.