Spacefem's Quiz Tutorials: JavaScript Type Quizzes This tutorial will show you how to make a "What type of ___ are you?" sort of quiz using only HTML and Javascript, which every web host in the world lets you use, so it's really simple. The files will even work on your own computer. A "type" quiz asks users questions and then determines which type or thing they are, not how much of something they have... that's a points-based quiz, and I have a tutorial for that over here. Here we go...

Text in blue is stuff you can/should change. Part 1: Setting up the page If you haven't already, set up your basic HTML page. It should look something like this:
<HTML>
<HEAD>
<TITLE>
My Quiz
</TITLE>
<!--Quiz calculation stuff will go here-->

</HEAD>
<BODY>
My Quiz
<!--Quiz itself will go here-->

</BODY>
</HTML>

Yay! Part 2: Setting up the basic form To make an HTML form, you have to use the FORM tags. The code below goes in between your <BODY> and </BODY> tags:
<form name="f">

<!--This is where your questions go-->

<input type="button" value="Compute Score!" onclick="process();"><br><br>
</form>
This will create the outlines of the form and the button at the end of the quiz that people press to get their score. Part 3: Making the questions Okay, here's a very basic question:
<b>What is your favorite color?<br></b>
<input TYPE="radio" NAME="a" VALUE="4">Blue.<br>
<input TYPE="radio" NAME="a" VALUE="1">Red.<br>
<input TYPE="radio" NAME="a" VALUE="2">Violet.<br>
<input TYPE="radio" NAME="a" VALUE="3">Black.<br><br>
The first line is the question itself, with <b> and </b> tags around it to make it bold. They're optional, of course. The rest of it is the form tags to set up Radio buttons... those are little circles that only allow one to be picked at a time. The VALUE="*" numbers will depend on what the answer is linked to... each on of your "type" answers will have a number associated with it. The NAME="a" value has to change for every question. It's easiest to just put these in alphabetical order, so for the next question, make them all "b" like this:
<b>How do you like your steak cooked?<br></b>
<input TYPE="radio" NAME="b" VALUE="2">Violet.<br>
<input TYPE="radio" NAME="b" VALUE="4">Blue.<br>
<input TYPE="radio" NAME="b" VALUE="1">Red.<br>
<input TYPE="radio" NAME="b" VALUE="3">Black.<br><br>
Put all the questions below the <form> tag and above the <input TYPE="button"> line. There you go. Part 4: Making the score Past this code in between your <HEAD> and </HEAD> tags:
<script LANGUAGE="JavaScript">
<!--
function process()
{
var blue = 0;
var red = 0;
var violet = 0;
var black = 0;

var f = document.f;
var i = 0;

<!--This is where the question values go-->

var out = "blue";
i = blue;

if (violet > i) { out ="violet"; i = violet; }
if (red > i) { out ="red"; i = red; }
if (black > i) { out ="black"; i = black; }
location.href = out + ".shtml";
}
function err(msg, url, line)
{
location.href = "error.html";
}
//window.onerror = err;
// -->
</SCRIPT>

I've chosen different colors as the "types" for my quiz. Basically, all the values start at zero, and each time a question is chosen that works for that color the quiz will add a point to it. At the end, the quiz assumes that the answer will be Blue, and goes through and looks to see if there are other answers with more points that blue. If there are, the new answer gets substituted as the answer and checked against the next ones.

Try to order your "if" statements so that the least common result is first. It's tricky, but you have to pay attention. To keep this whole tutorial simple, I'm not going to explain what anything there is. Just don't break it when you go to change your stuff. The "Total" numbers will send the person to the site you specify if their total is less than the number, so they go from smallest to largest. Part 5: The Question Loops Okay, for each question you made, you now have to tell the browser how to figure out the score. It's basically going to look at each answer in each question to see if it's checked or not, and if it is it'll add it to your score.
for (i = 0; i < f.a.length; i++) if (f.a[i].checked) value = f.a[i].value;
if (value == "1") { red++; }
if (value == "2") { violet++; }
if (value == "3") { black++; }
if (value == "4") { blue++; }

for (i = 0; i < f.b.length; i++) if (f.b[i].checked) value = f.b[i].value;
if (value == "1") { red++; }
if (value == "2") { violet++; }
if (value == "3") { black++; }
if (value == "4") { blue++; }

Again, for each question you'll have to customize the loop. the "form.a" parts (make sure you get all three of them!) need to be "form.b", "form.c", etc. The "count<4" has to change depending on how many answer choices you have. This part goes into the header space, where the "<!--This is where the question loops go-->" line is.

Part 6: There we go! So basically, this is what our whole page looks like:
<HTML>
<HEAD>
<TITLE>
My Quiz
</TITLE>
<script LANGUAGE="JavaScript">
<!--
function process()
{
var blue = 0;
var red = 0;
var violet = 0;
var black = 0;

var f = document.f;
var i = 0;

for (i = 0; i < f.a.length; i++) if (f.a[i].checked) value = f.a[i].value;
if (value == "1") { red++; }
if (value == "2") { violet++; }
if (value == "3") { black++; }
if (value == "4") { blue++; }

for (i = 0; i < f.b.length; i++) if (f.b[i].checked) value = f.b[i].value;
if (value == "1") { red++; }
if (value == "2") { violet++; }
if (value == "3") { black++; }
if (value == "4") { blue++; }

var out = "blue";
i = blue;

if (violet > i) { out ="violet"; i = violet; }
if (red > i) { out ="red"; i = red; }
if (black > i) { out ="black"; i = black; }
location.href = out + ".shtml";
}
function err(msg, url, line)
{
location.href = "error.html";
}
//window.onerror = err;
// -->
</SCRIPT>
</HEAD>
<BODY>
My Quiz

<form name="f">

<b>What is your favorite color?<br></b>
<input TYPE="radio" NAME="a" VALUE="4">Blue.<br>
<input TYPE="radio" NAME="a" VALUE="1">Red.<br>
<input TYPE="radio" NAME="a" VALUE="2">Violet.<br>
<input TYPE="radio" NAME="a" VALUE="3">Black.<br><br>

<b>How do you like your steak cooked?<br></b>
<input TYPE="radio" NAME="b" VALUE="2">Violet.<br>
<input TYPE="radio" NAME="b" VALUE="4">Blue.<br>
<input TYPE="radio" NAME="b" VALUE="1">Red.<br>
<input TYPE="radio" NAME="b" VALUE="3">Black.<br><br>

<input type="button" value="Compute Score!" onclick="process();"><br><br>
</form>
</BODY>
</HTML>


And there, you have your quiz! If you do all this and it doesn't work, read my troubleshooting tutorial to fix it.