Tutorial On How to Make a Quiz or Interactive Site, Page 3

Lost? Go back to the beginning.

Let's Get On With It!

The "Coolness Quiz" example we are going to create requires two pages. The first page consists of a series of questions. The second displays the results. There's nothing special about that first page--it's just plain ol' HTML, so there's nothing to learn here:

<html>
<head>
<title>Take the Coolness Quiz!</title>
</head>
<body>
<h1>Find Out How Cool You Are</h1>
<form action="results.php" method="post">

<b>Question 1: Do you pick your nose?</b><br>
<input type="radio" name="q1" value="yes"> Yes <br>
<input type="radio" name="q1" value="no"> No <br>

<b>Question 2: Do you have any friends?</b><br>
<input type="radio" name="q2" value="yes"> Yes <br>
<input type="radio" name="q2" value="no"> No <br>

<b>Question 3: Is your hair styled in a fashionable way?</b><br>
<input type="radio" name="q3" value="yes"> Yes <br>
<input type="radio" name="q3" value="no"> No <br>

<b>Question 4: Can you dunk a basketball?</b><br>
<input type="radio" name="q4" value="yes"> Yes <br>
<input type="radio" name="q4" value="no"> No <br>

<b>Question 5: Do you get out much?</b><br>
<input type="radio" name="q5" value="yes"> Yes <br>
<input type="radio" name="q5" value="no"> No <br>

<br>
<input type="submit" value="Determine Your Coolness">
</form>
</body>
</html>

Notice a couple things. First, these are all yes/no questions. They don't have to be. Second, I named them q1 through q5. You could have named them anything you want. The "radio" input type, you'll recall, creates those little circles that only allow a visitor to pick one out of a set. If you want to let them pick multiple answers to the same question, you could use checkboxes instead.

Now Let's Get Right To That Second Page

Okay, so the second page-- the one with PHP scripting in it-- is right below. Here's the whole thing in one shot, then we'll talk about what each part does:

<?php
$score = 0;
if ($_POST['q1'] == 'no')
$score++;
if ($_POST['q2'] == 'yes')
$score++;
if ($_POST['q3'] == 'yes')
$score++;
if ($_POST['q4'] == 'yes')
$score++;
if ($_POST['q5'] == 'yes')
$score++;
?>

<html>
<head>
<title>Your Results for the Coolness Quiz!</title>
</head>
<body>
<h1>Your Results for the Coolness Quiz!</h1>

<?php
echo '<b>Your coolness score was ' . $score . '/5</b><br><br>';
if ($score < 3)
echo 'You are not very cool!';
else if ($score == 5)
echo 'Congratulations, a perfect score!';
else
echo 'Not bad, you scored average';
?>


</body>
</html>

Notice What's Happening Here

The first thing we do is create a variable called "$score". All variables in PHP begin with a dollar sign. Then we have some "if" statements. Now remember, the previous page posted the answers in a form, and the way you check their value is to reference the $_POST array like so $_POST['q1'], which will give you the value of the q1 that was selected (either "yes" or "no") from the previous page. In our first "if" statement we are checking to see if this value is equal to "no", and we do that using the double == sign. If it is equal to "no", it means the visitor does not pick his nose and thus we increment his score by 1. The statement $score++; does this (we could have also used $score = $score + 1; and it would've been the same thing, but the double + is a shortcut).

The next four "if" statements continue doing similar stuff, and it is clear the highest possible score on this quiz would be a five. So we jump out of PHP and into HTML to output some standard stuff, then we go back into PHP to output the result. See that first "echo" statement, the one that looks like this echo '<b>Your coolness score was ' . $score . '/5</b><br><br>';. It is different than the one I explained back on the previous page because this time it has the dot operator. What this does is, it "concatenates" or joins multiple things together to be outputted as one single line. In this case, we want to join together some words saying "your score is", then we want to put in the score, then we want to put some more text. Remember, the text parts are placed inside single or double quotes (single in this case) and the variable always starts with a dollar sign.

After that, we want to put a custom message depending on the score. It's back to the "if" statements. If the score is less than 3, we "echo" out a disparaging message. Then you see we do an "else if", meaning if the first condition was not true, test this one out instead. We say "else if" the score is 5, we want to "echo" out a message saying the visitor got a perfect score. Finally we end with just an "else" which will take care of any condition that didn't meet the criteria for the previous "if" or "else if" and output a message saying the visitor got an average score.

That's It!

Click here to see the pages in action. Simple as can be, right? Right. Of course you can go wild with your imagination and create some amazing interactive pages.

So Now You Know How to Create, Here's How to Make It Happen

You have to think up a domain name and get a hosting account with a hosting company that supports PHP. Haha, I hope I didn't lose you there! Back in the 90s when I started doing this stuff, hosting a site was expensive and more complicated. These days the prices are ridiculously low, and getting it all set up is fully automated and simple. You can get an account with a hosting company like HostGator (more info) for less than $4/month that includes free setup plus support for PHP (obviously). This very site is hosted by HostGator, and I am pleased with them as a hosting company.

If you want to run forums, a blog, or other scripts, you can find these on the web for free and install them yourself. However, StartLogic actually pre-configures such scripts for you as part of their package so you're all set and ready to go. Then simply put some advertisements on your page and I promise you'll earn back more than the monthly cost of the site. You could probably make that in a day, actually.

So What the Heck Are You Waiting For, Get Started!

Once you sign up for your hosting account, copy and upload the example pages from this tutorial to your web space -- You have my permission to do so, no worries about copyright. (Name the first page anything you want, but name the second one "results.php" because that's what the form in the first page is submitting to.) Test them out yourself, add additional questions, change the text. When you are comfortable, create your own ideas from scratch! And hey, drop me a line so I can know if I've inspired anyone out there! My email is four_degreez at yahoo dot com, and I've recently started a blog about web development with topics including PHP, javascript, Java, design, SEO and more. You might find it helpful!