Quiz Tutorial

Files Needed

Right click on each of the below files and choose "Save Target As…" to save them to your computer.

Result Pages

Create a page for each quiz result. Give the page a descriptive name, but do not put any spaces, punctuation, or other special characters in the filename. It will not work with this code.

Your result page should tell the user what their result is. Optionally, you can have an image and a code for the user to put on their website.

For this tutorial, we have five different result pages: red.html, yellow.html, blue.html, pink.html, and black.html. If this is your first time using this tutorial, you should only make five results. Once you get the quiz working, you can add more; instructions are at the end of the tutorial.

Quiz Questions and Responses

Open quiz.html. Find:

<form name="quiz">

Edit everything in UPPERCASE below this line to add your own questions and responses.

For this tutorial, we have five different questions. If this is your first time using this tutorial, you should only make five questions. Once you get the quiz working, you can add more; instructions are at the end of the tutorial.

Also, if this is your first time using this tutorial, keep the order of the responses consistent. The red answer should always be first, followed by blue, followed by yellow, etc.

Quiz Script

Each of the .html pages should now display correctly, but the quiz should not work yet.

Open quiz.js.

There are eight occurances of the word "red" in this page. Change each occurance of the word "red" to the name of your first result page (without the file extension .html).

There are nine occurances of the words "blue", "yellow", "pink", and "black" in this page. Change each occurance of these words to the name of your other result pages (without the file extension .html).

File Extension

If not change the file extension of the result pages, skip this section.

If you did change the file extension of your result pages (so they do not end with .html), you will need to edit the quiz script. Find:

location.href = result + ".html";

You will need to change the ".html" to your new file extension.

Test Your Quiz

You should now test your quiz to make sure it works. If so, you can now add more results or questions.

Adding More Results

Create a new page for the result you want to add.

Open quiz.js. Find:

var red = 0;
var blue = 0;
var yellow = 0;
var pink = 0;
var black = 0;

Add another line after the last one above with the name of your new result page:

var red = 0;
var blue = 0;
var yellow = 0;
var pink = 0;
var black = 0;
var green = 0;

For each question, you will need to add another line. Originally it would look like this:

if (value == "1") { red++; }
if (value == "2") { blue++; }
if (value == "3") { yellow++; }
if (value == "4") { pink++; }
if (value == "5") { black++; }

Now it should look like this, with your new result added. You must change the value number to 6.

if (value == "1") { red++; }
if (value == "2") { blue++; }
if (value == "3") { yellow++; }
if (value == "4") { pink++; }
if (value == "5") { black++; }
if (value == "6") { green++; }

At the end of the code, you will need to add another line. Originally it would look like this:

var result = "red";
i = red;
if (blue > i) { result = "blue"; i = blue; }
if (yellow > i) { result = "yellow"; i = yellow; }
if (pink > i) { result = "pink"; i = pink; }
if (black > i) { result = "black"; i = black; }

Now it should look like this. Note that there are three places that you need to add your result page name.

var result = "red";
i = red;
if (blue > i) { result = "blue"; i = blue; }
if (yellow > i) { result = "yellow"; i = yellow; }
if (pink > i) { result = "pink"; i = pink; }
if (black > i) { result = "black"; i = black; }
if (green > i) { result = "green"; i = green; }

Open quiz.html.

Add another response that corresponds with the new result for each question. Originally it would look like this:

<p>
<strong>QUESTION ONE</strong><br>
<label><input type="radio" name="one" value="1">RED ANSWER</label><br>
<label><input type="radio" name="one" value="2">BLUE ANSWER</label><br>
<label><input type="radio" name="one" value="3">YELLOW ANSWER</label><br>
<label><input type="radio" name="one" value="4">PINK ANSWER</label><br>
<label><input type="radio" name="one" value="5">BLACK ANSWER</label>
</p>

Now it should look like this. Pay attention to the name value and make sure it matches the name value of the respsonses above it. You must change the value number to 6.

<p>
<strong>QUESTION ONE</strong><br>
<label><input type="radio" name="one" value="1">RED ANSWER</label><br>
<label><input type="radio" name="one" value="2">BLUE ANSWER</label><br>
<label><input type="radio" name="one" value="3">YELLOW ANSWER</label><br>
<label><input type="radio" name="one" value="4">PINK ANSWER</label><br>
<label><input type="radio" name="one" value="5">BLACK ANSWER</label><br>
<label><input type="radio" name="one" value="6">GREEN ANSWER</label>
</p>

Adding More Questions

Open quiz.js. Find:

// determine which result has highest score

Just before this line, insert the code below to add another question:

for (i = 0; i < quiz.six.length; i++) { if (quiz.six[i].checked) { value = quiz.six[i].value; } }
if (value == "1") { red++; }
if (value == "2") { blue++; }
if (value == "3") { yellow++; }
if (value == "4") { pink++; }
if (value == "5" { black++; }

Note that for each question section on quiz.js, the first line is different (in the first question there are three "one"s on the first line, in the code above there are three "six"s on the first line, etc). To add another question after this, you will need to change the three "six"s to the number of the question.

Change "red", "blue", etc, so that they match your result page names.

Open quiz.html. Find:

<p><input type="button" value="Submit" onclick="process();"></p>

Just before this line, insert the code below to add another question:

<p>
<strong>QUESTION SIX</strong><br>
<label><input type="radio" name="six" value="1">RED ANSWER</label><br>
<label><input type="radio" name="six" value="2">BLUE ANSWER</label><br>
<label><input type="radio" name="six" value="3">YELLOW ANSWER</label><br>
<label><input type="radio" name="six" value="4">PINK ANSWER</label><br>
<label><input type="radio" name="six" value="5">BLACK ANSWER</label>
</p>

Note that for each question section on quiz.html, the response lines are different (in the first question there are five "one"s on the response lines, in the code above there are five "six"s on the response lines, etc). To add another question after this, you will need to change the five "six"s to the number of the question.

Edit the questions and answers.

Quiz Example