I had to build a quiz for a client a little while ago. A few multiple choice questions, submit button, and it grades the quiz and tells you how you did. It’s kinda dorky and really really simple PHP, but I figure it might be a good starter for some folks and a good primer in the basic theory of building a form in HTML and dealing with the data on another page with PHP.
The questions for the quiz are wrapped in a form:
<form action="grade.php" method="post" id="quiz">
... questions here ...
</form>
Forms typically have submit buttons, and this one is no exception. When that submit button is clicked, it will “POST” the data from each input within the form to the “action” URL provided.
Quizzes are essentially lists of questions, so an ordered list will do, so an individual question will look like this:
<li>
<h3>CSS Stands for...</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) Computer Styled Sections </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) Cascading Style Sheets</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) Crazy Solid Shapes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) None of the above</label>
</div>
</li>
Notice there are four inputs there, but they all have a type of “radio” and an identical “name” attribute. They basically act as a single input that way, as only one of them can be selected at a time and the data is POSTed as single value.
At the end, our submit button:
<input type="submit" value="Submit Quiz" />
In our grade.php file, we need to grab the values that have been POSTed, then we’ll check each one and increment a number correct, and finally display a div showing the number of correct answers:
<?php
$answer1 = $_POST['question-1-answers'];
$answer2 = $_POST['question-2-answers'];
$answer3 = $_POST['question-3-answers'];
$answer4 = $_POST['question-4-answers'];
$answer5 = $_POST['question-5-answers'];
$totalCorrect = 0;
if ($answer1 == "B") { $totalCorrect++; }
if ($answer2 == "A") { $totalCorrect++; }
if ($answer3 == "C") { $totalCorrect++; }
if ($answer4 == "D") { $totalCorrect++; }
if ($answer5) { $totalCorrect++; }
echo "<div id='results'>$totalCorrect / 5 correct</div>";
?>
Thanks for this chris! I think number is a trick question?!
Number 5 doh!
This really is basic. Why didn’t you do it with a small database in the back for easier maintenance and portability…
This site has proven to be just what I need.
Thanks man, lots of great tips.
I am new to php so I like this kind of post. Thanks for this cool trick.
It really doesn’t need to submit to another page. Make it submit to self and use a conditional statement to check if “submit” was pressed. Then check for answers and display results.
@Bogdan For something simple like this, the overhead of using a database is not required.
All-in-all a very unsecure, basic program.
CSS stands for Crazy Solid Shapes DOH!!
What I hate about this quiz the most is that it reminds me how long IE6 has been around and I still have to code for it.
Two horrible things happened during 2001:
1) The 9/11 terrorist attacks
2) IE6 was released
@Bob
That’s a good one!
Wow, I was surfing Css-Tricks when it just changed/updated… pretty bad ass
-Kelton
very straight forward but nice tutorial!
Notes:
1 – The “if”s dont need curly braces in this case.
2 – The new design is nice…I loved the headings on the sidebar!
take care ;)
Your right, they don’t need curly braces. But, it is good coding style to use curly braces, I do all the time. Don’t worry about it slowing your code down, it doesn’t! My first comp sci class, my professor always made us use them and it has stuck with me.
-Tom
http://TDevelops.com
Tweets by TomSmallwood
Its really useful, Its a good Idea for a WP good plugin!
XD
Love the new style Chris…
Love the idea of quizes in posts (do it occasionally for Kick2Kick), any known good plugins that do quizes for WordPress blogs??
Not off hand… but a little googling around turned up stuff:
http://wordpress.org/extend/plugins/quiz/
Love the new design
Thanks for this. I haven’t had alot to do with PHP up until now but it is something I would like to learn more about.
Anyone know any cool websites for learning about PHP (or books)??
Why didnt you use a list?
why the divs? if you clear:both on the inputs in your css and then float the labels against the inputs you can do without them.
Hello Chris Coyier.
Congratulation for this post, and I translation it into Portuguese and posted in my blog having all Copyright for you, ok?
see in:
http://ruancarlos.com.br/Blog/criando-um-simples-quiz-com-php/
Thank you my friend
Basic & clean. Thanx.
thanks i am working on a quiz but in asp.net. thanks for the tip
Hi,
I know this is an old topic, but if anyone can answer my query then I will be really happy. Now this tutorial is quite good for making simple, static quizzes, but if I want to use a database and an user-friendly input form to add the questions and answers, as well as to make the quiz use random questions each time people visit it, how can I do that then?
Hi Guys,
I need some advice if you can please :)
I’m creating my own website ans this will be a portfolio to help me to get a graduate php web developers job.
I want to add a quiz in the website what users can take and hopefully have a personal profile where they can check there results!
I really dont know how to start or where to look to help me on my way to building and creating this quiz, can anyone help me with this?
Thanks
Rich