• Home
• Basics
• Coding
• Graphics
• Links
• Link Me
• Site Map
• Updates

Files Needed

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

• quiz.html
• quiz.js

Result Pages

Create an HTML page for each possible result. Your result pages should tell the user what their result is. Optionally, you can add an image and a code for the user to put on their website to share their result.

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 the line:

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 occurrences of the word "red" in this page. Change each occurrence of the word "red" to the name of your first result page (without the file extension .html).

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

File Extension

If you used .html as the file extension of the result pages, you can 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 the line:

Change ".html" to your new file extension.

Test Your Quiz

You should now test your quiz to make sure it works. If it works, 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:

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

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

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

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

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

Open quiz.html.

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

Now it should look like this. Pay attention to the name value and make sure it matches the name value of the responses above it. For the new line, you must change the value to 6.

Adding More Questions

Open quiz.js. Find the line:

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

Note that for each question section in quiz.js, the first line is different (for the first question, it says "document.quiz.one"; for the question above, it says "document.quiz.six", etc). To add more questions after this one, you will need to change the "six" to "seven", "eight", etc.

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

Open quiz.html. Find:

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

Note that for each question section in quiz.html, the response lines are different (in the first question, the name is "one"; for the question above, the name is "six", etc). To add more questions after this one, you will need to change the "six"s to "seven", "eight", etc.

Edit the questions and answers.

Quiz Example

• Example

• Home
• Basics
• Coding
• Graphics
• Links
• Link Me
• Site Map
• Updates