Spacefem's Quiz Tutorials: PHP Quizzes

Here at spacefem we have two main types of quizzes: the points based quiz (how ___ are you?) and the type-based quiz (what kind of ___ are you?). They're both really simple to do in php. You'll need a server that runs php and a host that lets you make your own scripts.

This tutorial will show you how to make either quiz, because they're strikingly similar. In either case, you'll need to create three files:



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>
</HEAD>
<BODY>
My Quiz
<!--Quiz itself will go here-->

</BODY>
</HTML>

Yay!

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 METHOD="post" ACTION="scorequiz.php">
<!--This is where your questions go-->
<INPUT TYPE="submit" VALUE="Score Quiz!" >
<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.

Making the questions

Okay, here's a very basic question:
<b>How many feet have you licked?<BR></B>
<INPUT TYPE="radio" NAME="a" VALUE="0">Zero.<BR>
<INPUT TYPE="radio" NAME="a" VALUE="1">One.<BR>
<INPUT TYPE="radio" NAME="a" VALUE="2">Two.<BR>
<INPUT TYPE="radio" NAME="a" VALUE="3">Three.<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 can be changed to whatever you want the points to be. 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 many anthills have you blowtorched?<BR></B>
<INPUT TYPE="radio" NAME="b" VALUE="1">Zero.<BR>
<INPUT TYPE="radio" NAME="b" VALUE="3">One.<BR>
<INPUT TYPE="radio" NAME="b" VALUE="6">Two.<BR>
<INPUT TYPE="radio" NAME="b" VALUE="9">A lot.<BR><BR>
Put all the questions below the <form> tag and above the <input TYPE="button"> line. There you go.

Part 2: Making the score

Create a new file and call it "scorequiz.php". That's what was in the "action" field on your <FORM ACTION="scorequiz.php"> on the last page we created. Right?

The trick here is to make php loop through all the fields in your form and look at the value. Whenever data from a form is sent (and the METHOD="post"), it sits in an array called $_POST. For example, on that last question about the anthills, let's say the person selected "a lot". The "value" of that input is 9, so on the php script that we're in as soon as they hit "submit" there's going to be a variable like $_POST['b'] that's set equal to 9.

The points-based form handler

Will look like this:
<?php
// First, go through all the questions:
$points = 0;
foreach($_POST as $quizanswer) {
    $points = $points + $quizanswer;
}

// Now points is the total of all field values.  Let's see where we want to go.
if ($points > 100) {
    header('location: showanswer.php?a=4');
} else if ($points > 60) {
    header('location: showanswer.php?a=3');
} else if ($points > 30) {
    header('location: showanswer.php?a=2');
} else {
    header('location: showanswer.php?a=1');
}

?>
The header() function will basically send a user straight to one of those answer pages, based on their points. Obviously you can play with those "if" statements and the values to have more answers, or change the divisions for answers.

The type-based form handler

Will look like this:
<?php
// First, go through all the questions:
foreach($_POST as $quizanswer) {
    if(isset($points[$quizanswer])) {
        $points[$quizanswer]++;
    } else {
        $points[$quizanswer]=1;
    }
}

// Now go through the $points array we just made, 
// and go to the value that earned the most.
$topscore = max($points);
foreach($points as $type => $value) {
    if ($value == $topscore) {
        header('location: showanswer.php?a='.$type);
    }
}
?>

The random form handler

If you really don't care where people go, you can do this:
<?php
// Get a random number.  If you have five answers, it'll end in 5:
$type = rand(1,5);
header('location: showanswer.php?a='.$type);
?>

Part 3: The answer page

The nice thing about php is that you don't have to make a totally separate answer page if only a few little details change about each answer. Let's say there's an image for each answer that people can copy. So create a file called "showanswer.php", it'll look like this:
<?php
// Set up arrays of things we want to tell people about this answer
$title[1] = "Blue";
$title[2] = "Green";
$title[3] = "Red";
$title[4] = "Purple";
$title[5] = "Orange";

$page_title = "Quiz Answer: You Are " . $title[$_GET['a']];

$answer_display = "<a href=\"http://www.yoursite.com\">
    <img src=\"http://www.yoursite.com/images".$title[$_GET['a']].".gif\">
    </a>";
?>


<HTML>
<HEAD>
<TITLE>
<? echo $page_title; ?>
</TITLE>
</HEAD>
<BODY>
<? echo $answer_display; ?>

Copy this code to show the answer on your web page:
<? echo htmlspecialchars($answer_display); ?>
</BODY>
</HTML>
If you have a points-based quiz, those colors (Blue, Green, Red) will be levels (Not very, a little bit, completely).

Other Quick Tips

Before you start working with PHP, I think it's a good idea to get error reporting turned on. The easiest way to do this, usually, is to make a text file named ".htaccess" that just has this:
php_flag display_errors on
php_value error_reporting 6143
This way if something bad happens, you'll know.