This tutorial will teach you how to make a quiz like this one I created.
I do not claim any ownership for the script used in this tutorial. I obtained it in late 2003 from the source code of a website. I have not found the creator of the script but have found users of it on websites such as Developerz.com and CreateBlog.com.
Preparation
Make sure you know what kind of quiz you are making. You might want to set out your questions and answers, and which answers suit which result. Write them out neatly on a piece of paper or in a Word document temporarily.
Make a page for your quiz. If you’d like it to have your header and footer files, just copy a blank page.
Have some blank pages ready to show the different quiz results as well – one result per page.
The quiz will work with whatever file extension you have – including .php, .htm, .html, .shtml.
The script
This is the basic script that should be put in your <head> section. We will look at the HTML coding for the quiz itself, later.
This snippet allows for four questions, with four options each. The quiz has four different results. I will explain how to modify this later.
<script type="text/javascript">
<!--
function process()
{
var result1 = 0;
var result2 = 0;
var result3 = 0;
var result4 = 0;
var f = document.f;
var i = 0;
for (i = 0; i < f.one.length; i++) if (f.one[i].checked) value = f.one[i].value;
if (value == "1") { result1++; }
if (value == "2") { result2++; }
if (value == "3") { result3++; }
if (value == "4") { result4++; }
if (value == "5") { result5++; }
for (i = 0; i < f.two.length; i++) if (f.two[i].checked) value = f.two[i].value;
if (value == "1") { result1++; }
if (value == "2") { result2++; }
if (value == "3") { result3++; }
if (value == "4") { result4++; }
if (value == "5") { result5++; }
for (i = 0; i < f.three.length; i++) if (f.three[i].checked) value = f.three[i].value;
if (value == "1") { result1++; }
if (value == "2") { result2++; }
if (value == "3") { result3++; }
if (value == "4") { result4++; }
if (value == "5") { result5++; }
for (i = 0; i < f.four.length; i++) if (f.four[i].checked) value = f.four[i].value;
if (value == "1") { result1++; }
if (value == "2") { result2++; }
if (value == "3") { result3++; }
if (value == "4") { result4++; }
if (value == "5") { result5++; }
var out = "result1";
i = result1;
if (result2 > i) { out = "result2"; i = result2; }
if (result3 > i) { out = "result3"; i = result3; }
if (result4 > i) { out = "result4"; i = result4; }
location.href = out + ".ext";
}
function err(msg, url, line)
{
location.href = "error.ext";
}
//window.onerror = err;
// -->
</script>
Copy and paste the code into your <head> section in the page where you would like the quiz. Notice the two places towards the end of the script where there is .ext. Change this to your file extension – .php, .html, whatever that may be.
Making the pages
You will need to make error.ext (where ext is your file extension). This will appear if the page is missing. The quiz provides a result even if questions are missed, so alert the viewer of this if you want them to be given an accurate result.
You will then need to make four pages for the results. They need to be named like so, where ext is your file extension:
- result1.ext
- result2.ext
- result3.ext
- result4.ext
Once you have made the pages, you can add the results to them, or you can do them later.
The HTML
This is the HTML quiz for the questions and answers of the quiz. You will obviously put this in the <body> section where you want it to appear.
<form name="f" action=""> <strong>Question 1</strong><br> <input type="radio" name="one" value="1"> Option 1<br> <input type="radio" name="one" value="2"> Option 2<br> <input type="radio" name="one" value="3"> Option 3<br> <input type="radio" name="one" value="4"> Option 4<br> <br> <strong>Question 2</strong><br> <input type="radio" name="two" value="1"> Option 1<br> <input type="radio" name="two" value="2"> Option 2<br> <input type="radio" name="two" value="3"> Option 3<br> <input type="radio" name="two" value="4"> Option 4<br> <br> <strong>Question 3</strong><br> <input type="radio" name="three" value="1"> Option 1<br> <input type="radio" name="three" value="2"> Option 2<br> <input type="radio" name="three" value="3"> Option 3<br> <input type="radio" name="three" value="4"> Option 4<br> <br> <strong>Question 4</strong><br> <input type="radio" name="four" value="1"> Option 1<br> <input type="radio" name="four" value="2"> Option 2<br> <input type="radio" name="four" value="3"> Option 3<br> <input type="radio" name="four" value="4"> Option 4<br> <br><br> <input type="button" onclick="process();" value="Submit"> </form>
Note: The above code is in HTML. To convert to XHTML, simply add the trailing backslashes for the line breaks and for the radio input buttons.
Editing The Questions and Answers
Firstly, place your questions where it says Question 1, Question 2, and so on.
Now to put the answer options in. You will notice the value of the options are in numerical order. When you look at the actual script, you will see that the option numbers coincide with the numbers of the results pages.
So, if you had ‘you are a cloud’ as the result for result1, the answers that would lead to ‘you are a cloud’ would all have to be the first answer option.
If you had ‘you are a sun’ as the result for result2, the answers that would lead to ‘you are a sun’ would all have to be the second answer option.
And so on. So make sure you fill in those correctly.
Adding More Questions
Hopefully, after uploading all the files – the error page, the results pages, and obviously the quiz page – everything worked. If not, go back and check again.
To add more questions, go to your script first.
Copy the last section that looks like this:
for (i = 0; i < f.four.length; i++) if (f.four[i].checked) value = f.four[i].value;
if (value == "1") { result1++; }
if (value == "2") { result2++; }
if (value == "3") { result3++; }
if (value == "4") { result4++; }
if (value == "5") { result5++; }
Then paste it directly afterward. You will have to change the word four every time you see it, so that it reads five, for another question.
Now you need to add another question. Go to the HTML coding, and copy the entire last question. Paste it after the question.
You will need to change: name=four to name=five.
To add more questions, simply repeat this process, but change the numbers to six, seven, and so on.
Adding more options
If you would like to add more options and possible results, this is how you would go about doing it.
Go to your script. You need to copy the end of each section for another option.
First, copy var result4 = 0; and copy it onto another line for var result5 = 0;.
Then you need to copy the fourth part of each question section, and place if (value == “5″) { result5++; } afterwards – this is for a fifth result!
You also need to copy the final part. Don’t forget! You should also have if (result5 > i) { out = “result5″; i = result5; } to make sure the result really does come out.
Now for the answer options. Go to your HTML. You need to copy the last answer option of each question.
Then you will need to change 4 to 5:
<input type=”radio” name=”one” value=”5″> Option 5
The “one” should be be the number of the question. Don’t change it!
Repeat this if you still want to have more possible options and results.
Mixing the Answers
Of course, the annoying thing about this quiz is that someone will notice that all the first answers lead to the one result, all the second answers to another result… much like a boring “mostly As, mostly Bs” quiz.
To avoid this, simply mix up the answers. Look at one question. The answer options are in numeric order. Move the lines around each other, so they read in a different order.
That will get the answers nicely jumbled so no one can really tell.
More Quizzes?
If you want to make more quizzes, simply repeat the process.
You must rename the result1, result2, etc. to something else. It can help to name it the result of your quiz, like ‘good’, ‘bad’, ‘ugly’.
It can also be easier to have each quiz and its files in one folder on your site. When you make a new quiz, put that in a different folder.
Happy quizzing!