PDA

View Full Version : Javascript quiz tutorial.

starlet
08-23-2003, 04:10 PM
Yes we all know your dying to find out how to make one of those "Which blah are you?" quizes, well, let me try explain...

This first part goes in between the <head> tags, this quiz has 5 questions and 5 answers, you can have more/less etc but we'll just stick with this to start!

<SCRIPT LANGUAGE="JavaScript">
<!--
function process()
{
var person1 = 0;
var person2 = 0;
var person3 = 0;
var person4 = 0;
var person5 = 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") { person1++; }
if (value == "2") { person2++; }
if (value == "3") { person3++; }
if (value == "4") { person4++; }
if (value == "5") { person5++; }

for (i = 0; i < f.two.length; i++) if
(f.two[i].checked) value = f.two[i].value;
if (value == "1") { person1++; }
if (value == "2") { person2++; }
if (value == "3") { person3++; }
if (value == "4") { person4++; }
if (value == "5") { person5++; }

for (i = 0; i < f.three.length; i++) if
(f.three[i].checked) value = f.three[i].value;
if (value =="1") { person1++; }
if (value == "2") { person2++; }
if (value == "3") { person3++; }
if (value == "4") { person4++; }
if (value == "5") { person5++; }

for (i = 0; i < f.four.length; i++) if
(f.four[i].checked) value = f.four[i].value;
if (value =="1") { person1++; }
if (value == "2") { person2++; }
if (value == "3") { person3++; }
if (value == "4") { person4++; }
if (value == "5") { person5++; }

for (i = 0; i < f.five.length; i++) if
(f.five[i].checked) value = f.five[i].value;
if (value =="1") { person1++; }
if (value == "2") { person2++; }
if (value == "3") { person3++; }
if (value == "4") { person4++; }
if (value == "5") { person5++; }

var out = "person1";
i = person1;
if (person2 > i) { out = "person2"; i = person2; }
if (person3 > i) { out = "person3"; i = person3; }
if (person4 > i) { out = "person4"; i = person4; }
if (person5 > i) { out = "person5"; i = person5; }
location.href = out + ".html";
}
function err(msg, url, line)
{
location.href = "error.html";
}
//window.onerror = err;
// -->
</SCRIPT>

Ok, the first part of the code you need to edit is this bit...

var person1 = 0;
var person2 = 0;
var person3 = 0;
var person4 = 0;
var person5 = 0;
var f = document.f;
var i = 0;

Change the words person1, person2 etc to your results.
Now skip down to the end of the code and change these names to match yours too (and in the same order as above)

var out = "person1";
i = person1;
if (person2 > i) { out = "person2"; i = person2; }
if (person3 > i) { out = "person3"; i = person3; }
if (person4 > i) { out = "person4"; i = person4; }
if (person5 > i) { out = "person5"; i = person5; }
location.href = out + ".html";

If your results are going to be on a page with a different extension to .html (like .shtml) you also need to change that last line!

This is the part that goes in the body tag, obviously put in your questions and possible answers.

<form name="f">


<b>Question one</B><br /><br />
<input type="radio" name="one" value="1">An 1.<br />
<input type="radio" name="one" value="2">An 2<br />
<input type="radio" name="one" value="3">An 3<br />
<input type="radio" name="one" value="4">An 4<br />
<input type="radio" name="one" value="5">An 5<br />
<p>

<b>Question 2</B><br /><br />
<input type="radio" name="two" value="1">An 1.<br />
<input type="radio" name="two" value="2">An 2<br />
<input type="radio" name="two" value="3">An 3<br />
<input type="radio" name="two" value="4">An 4.<br />
<input type="radio" name="two" value="5">An 5.<br />
<p>

<b>Question 3</B><br /><br />
<input type="radio" name="three" value="1">An 1<br />
<input type="radio" name="three" value="2">An 2 <br />
<input type="radio" name="three" value="3">An 3<br />
<input type="radio" name="three" value="4">An 4<br />
<input type="radio" name="three" value="5">An 5<br />
<p>

<b>Questionn 4</B><br /><br />
<input type="radio" name="four" value="1">An 1<br />
<input type="radio" name="four" value="2">An 2<br />
<input type="radio" name="four" value="3">An 3<br />
<input type="radio" name="four" value="4">An 4<br />
<input type="radio" name="four" value="5">An 5<br />
<p>

<b>Question 5</B><br /><br />
<input type="radio" name="five" value="1">An 1<br />
<input type="radio" name="five" value="2">An 2<br />
<input type="radio" name="five" value="3">An 3<br />
<input type="radio" name="five" value="4">An 4<br />
<input type="radio" name="five" value="5">An 5<
p>

<input type="button" value="Sumbit!" onclick="process();">


Now we need to go back to the code up in the head tag to match up the answers with the result,

for (i = 0; i < f.one.length; i++) if
(f.one[i].checked) value = f.one[i].value;
if (value == "1") { person1++; }
if (value == "2") { person2++; }
if (value == "3") { person3++; }
if (value == "4") { person4++; }
if (value == "5") { person5++; }

This part is refering to question number one, so you need to match it up with your first question example, if they choose answer number one, thats person1
if they choose answer number 2 thats person2
if they choose answer 3 thats person3
if they choose answer 4 thats person4
if they choose answer 5 thats person5

Match up the other 4 questions too.

Finally you need to make the pages with the results on, in this case person1.html person2.html person3.html person4.html and person5.html

Note that the quiz will not work until its complete if you stop half way through to 'test' it it wont work, finish it fully and that should be it.
Lissa
01-16-2004, 04:41 PM
:)
adabristian
02-19-2005, 06:51 PM
I was wondering how can you make this also email the results to you with the name and contact info of the person taking test? Is this possible with this script?
jinai
07-03-2005, 06:50 AM
This is the part that goes in the body tag, obviously put in your questions and possible answers.

<form name="f">


<b>Question one</B><br /><br />
<input type="radio" name="one" value="1">An 1.<br />
<input type="radio" name="one" value="2">An 2<br />
<input type="radio" name="one" value="3">An 3<br />
<input type="radio" name="one" value="4">An 4<br />
<input type="radio" name="one" value="5">An 5<br />
<p>

<b>Question 2</B><br /><br />
<input type="radio" name="two" value="1">An 1.<br />
<input type="radio" name="two" value="2">An 2<br />
<input type="radio" name="two" value="3">An 3<br />
<input type="radio" name="two" value="4">An 4.<br />
<input type="radio" name="two" value="5">An 5.<br />
<p>

<b>Question 3</B><br /><br />
<input type="radio" name="three" value="1">An 1<br />
<input type="radio" name="three" value="2">An 2 <br />
<input type="radio" name="three" value="3">An 3<br />
<input type="radio" name="three" value="4">An 4<br />
<input type="radio" name="three" value="5">An 5<br />
<p>

<b>Questionn 4</B><br /><br />
<input type="radio" name="four" value="1">An 1<br />
<input type="radio" name="four" value="2">An 2<br />
<input type="radio" name="four" value="3">An 3<br />
<input type="radio" name="four" value="4">An 4<br />
<input type="radio" name="four" value="5">An 5<br />
<p>

<b>Question 5</B><br /><br />
<input type="radio" name="five" value="1">An 1<br />
<input type="radio" name="five" value="2">An 2<br />
<input type="radio" name="five" value="3">An 3<br />
<input type="radio" name="five" value="4">An 4<br />
<input type="radio" name="five" value="5">An 5<
p>




Which part do you change? The "An 1"'s? And where do you put the question? In "Question 5?"
salomeyasobko
07-03-2005, 06:55 AM
yes, "question 5" = your fifth question, and "An #" = the possible answers for that question. you would change An 1-5 to make them correspond w/ question 5.