Main Content

Updates
To Do List
You
Health and Beauty
Reads
Jenni
Quizzes
Tutorials
The Domain
Dollmakers
Link Star-Girl.org
Question?
Plug Your Site
Index/Blog

Extra

Change The Skin
Jenni Fanlisting
Star-Girl.org Fanlisting
Webdesign Question?
Report An Error
MT Blog Archives
Nov-Apr 04 Archives
Feb-Nov 03 Archives

Sites and Projects

Shining Top Sites
Creme De La Femme
Starshine Boards
Starstruck Zine

Starshine.la Login

Linkage

Etc.

refreshes today

Quizzes

Note: This tutorial is probably the hardest one I have, and it's difficult to get the hang of making quizzes, so don't worry if you don't get it first time round, it is pretty complicated.

1. Insert the code below into your page:

<html>
<head>
  <title>QUIZ NAME</title>
  <SCRIPT LANGUAGE="JavaScript">
<!--
function process()
{
    var OPTION1 = 0;
    var OPTION2 = 0;
    var OPTION3 = 0;
    var OPTION4 = 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") { OPTION1++; }
    if (value == "2") { OPTION2++; }
    if (value == "3") { OPTION3++; }
    if (value == "4") { OPTION4++; }

for (i = 0; i < f.two.length; i++) if (f.two[i].checked) value = f.two[i].value;
    if (value == "1") { OPTION1++; }
    if (value == "2") { OPTION2++; }
    if (value == "3") { OPTION3++; }
    if (value == "4") { OPTION4++; }
    
    for (i = 0; i < f.three.length; i++) if (f.three[i].checked) value = f.three[i].value;
    if (value == "1") { OPTION1++; }
    if (value == "2") { OPTION2++; }
    if (value == "3") { OPTION3++; }
    if (value == "4") { OPTION4++; }

for (i = 0; i < f.four.length; i++) if (f.four[i].checked) value = f.four[i].value;
    if (value == "1") { OPTION1++; }
    if (value == "2") { OPTION2++; }
    if (value == "3") { OPTION3++; }
    if (value == "4") { OPTION4++; }

for (i = 0; i < f.five.length; i++) if (f.five[i].checked) value = f.five[i].value;
    if (value == "1") { OPTION1++; }
    if (value == "2") { OPTION2++; }
    if (value == "3") { OPTION3++; }
    if (value == "4") { OPTION4++; }

location.href = out + ".html";
}
function err(msg, url, line)
{
        location.href = "error.html";
}
//window.onerror = err;
// -->
</SCRIPT>
</head>
<body>

<form name="f">
<b>YOUR QUESTION 1</b><br>
<input type="radio" name="one" value="1">YOUR ANSWER 1<br>
<input type="radio" name="one" value="2">YOUR ANSWER 2<br>
<input type="radio" name="one" value="3">YOUR ANSWER 3<br>
<input type="radio" name="one" value="4">YOUR ANSWER 4<br>
<br><br>

<b>YOUR QUESTION 2</b><br>
<input type="radio" name="two" value="1">YOUR ANSWER 1<br>
<input type="radio" name="two" value="2">YOUR ANSWER 2<br>
<input type="radio" name="two" value="3">YOUR ANSWER 3<br>
<input type="radio" name="two" value="4">YOUR ANSWER 4<br>
<br><br>

<b>YOUR QUESTION 3</b><br>
<input type="radio" name="three" value="1">YOUR ANSWER 1<br>
<input type="radio" name="three" value="2">YOUR ANSWER 2<br>
<input type="radio" name="three" value="3">YOUR ANSWER 3<br>
<input type="radio" name="three" value="4">YOUR ANSWER 4<br>
<br><br>

<b>YOUR QUESTION 4</b><br>
<input type="radio" name="four" value="1">YOUR ANSWER 1<br>
<input type="radio" name="four" value="2">YOUR ANSWER 2<br>
<input type="radio" name="four" value="3">YOUR ANSWER 3<br>
<input type="radio" name="four" value="4">YOUR ANSWER 4<br>
<br><br>

<b>YOUR QUESTION 5</b><br>
<input type="radio" name="five" value="1">YOUR ANSWER 1<br>
<input type="radio" name="five" value="2">YOUR ANSWER 2<br>
<input type="radio" name="five" value="3">YOUR ANSWER 3<br>
<input type="radio" name="five" value="4">YOUR ANSWER 4<br><br>

2. Okay yeah, it looks kinda long and confusing, but paste it into a word document or something, and edit it in there. First of all you need to change where it says:

function process() { var OPTION1 = 0; var OPTION2 = 0; var OPTION3 = 0; var OPTION4 = 0; var f = document.f; var i = 0;

(the OPTION1, 2 etc.) to your options, e.g. cat, dog, rabbit, bird. They need to be one word really.
3. Now scroll down until you get to:

<form name="f"> <b>YOUR QUESTION 1</b><br>
<input type="radio" name="one" value="1">YOUR ANSWER 1<br> <input type="radio" name="one" value="2">YOUR ANSWER 2<br> <input type="radio" name="one" value="3">YOUR ANSWER 3<br> <input type="radio" name="one" value="4">YOUR ANSWER 4<br>

4. Change the 'YOUR QUESTION 1' to the question you want to ask, e.g. 'Do you like furry animals?'. Change 'YOUR ANSWER 1' to something like 'Yes'. 'YOUR ANSWER 2' could be 'No'. Then you can delete 'YOUR ANSWER 3' and 'YOUR ANSWER 4' if you have no other options. Or, you could fill those in with 'Not really' and 'Not sure'. Do this for the other 4 questions. If you want to add more questions, just copy and paste one of the question paragraphs. Make sure you change the name= bit to six, seven, eight etc. depending on how many questions you do.
5. Scroll up your quiz page again and find the part near the top which says:

for (i = 0; i < f.one.length; i++) if (f.one[i].checked) value = f.one[i].value; if (value == "1") { OPTION1++; } if (value == "2") { OPTION2++; } if (value == "3") { OPTION3++; } if (value == "4") { OPTION4++; }

6. Now the bit which says 'OPTION1' 2, 3 and 4, you need to change to cat, dog, rabbit and bird. But you have to relate it to the question. For example, my question one was 'Do you like furry animals?'. If the person answered yes, then you need to replace 'OPTION1' with all the furry animals, and if no, then replace with the bird (because it's not furry). As there were only two options, you need to delete the other 2 or it won't work. So your code ends up like this for question 1:

for (i = 0; i < f.one.length; i++) if (f.one[i].checked) value = f.one[i].value; if (value == "1") { cat++; dog++; rabbit++;} if (value == "2") { bird++; }

7. That's quite complicated, and if you have 4 answers to your question, it's much simpler. For example, the question might look like this:

<b>Pick a type of food</b><br>
<input type="radio" name="two" value="1">Bone<br>
<input type="radio" name="two" value="2">Fish<br>
<input type="radio" name="two" value="3">Seed<br>
<input type="radio" name="two" value="4">Carrot<br>

And the code relating to it would look like this:

for (i = 0; i < f.two.length; i++) if (f.two[i].checked) value = f.two[i].value; if (value == "1") { dog++; } if (value == "2") { cat++; } if (value == "3") { bird++; } if (value == "4") { rabbit++; }

8. Once you've completed your questions and code, replace this bit of code:

var out = "OPTION1"; i = OPTION1; if (OPTION1 > i) { out = "OPTION1"; i = OPTION1; } if (OPTION2 > i) { out = "OPTION2"; i = OPTION2; } if (OPTION3 > i) { out = "OPTION3"; i = OPTION3; } if (OPTION4 > i) { out = "OPTION4"; i = OPTION4; }

with your own options, for example mine are: var out = "cat"; i = cat; if (cat > i) { out = "cat"; i = cat; } if (dog > i) { out = "dog"; i = dog; } if (rabbit > i) { out = "rabbit"; i = rabbit; } if (bird > i) { out = "bird"; i = bird; }

9. Now when the person has answered all your quiz questions, when they click the button at the bottom of the form, the quiz is automatically set so the person goes to OPTION.html. This means that I would make results pages called cat.html, bird.html, dog.html and rabbit.html. That way, when the person finishes the quiz they can pick up their 'I'm a cat!' image or whatever lol. Just make .html pages for your OPTION1, OPTION2 etc. and you should be okay. Try saving into your web site and taking the quiz, and if you get 404s at the end, try renaming your pages.
10. If you're totally confused, click here to look at my finished coding. Copy and paste it if you like (but don't steal my questions and answers) until you get the hang of editing everything.

Back | Forward

Advertised

Your Site Here?

All content and design is � Jennifer Brown 2005, unless otherwise stated. Please click *here* for more information.