Building a Simple Quiz

Mar 25 2009
29

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.

 

View DemoDownload Files

 

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>";

?>

Subscribe to The Thread

  1. Brian

    Thanks for this chris! I think number is a trick question?!

  2. Brian

    Number 5 doh!

  3. This really is basic. Why didn’t you do it with a small database in the back for easier maintenance and portability…

  4. This site has proven to be just what I need.

    Thanks man, lots of great tips.

  5. Silvio

    I am new to php so I like this kind of post. Thanks for this cool trick.

  6. 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.

  7. CSS stands for Crazy Solid Shapes DOH!!

  8. josh

    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.

  9. Two horrible things happened during 2001:

    1) The 9/11 terrorist attacks
    2) IE6 was released

  10. @Bob

    That’s a good one!

  11. Wow, I was surfing Css-Tricks when it just changed/updated… pretty bad ass

    -Kelton

  12. Eduardo

    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 ;)

    • TommyJ

      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
      http://twitter.com/TomSmallwood

  13. Its really useful, Its a good Idea for a WP good plugin!

    XD

  14. 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??

  15. Love the new design

  16. 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)??

  17. Why didnt you use a list?

  18. 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.

  19. 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/

  20. Thank you my friend

  21. ashvin

    Basic & clean. Thanx.

  22. thanks i am working on a quiz but in asp.net. thanks for the tip

This comment thread is closed. If you have important information to share, you can always contact me.