Grow your CSS skills. Land your dream job.

Building a Simple Quiz

Published by Chris Coyier

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

Comments

  1. Brian
    Permalink to comment#

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

  2. Brian
    Permalink to comment#

    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. Permalink to comment#

    This site has proven to be just what I need.

    Thanks man, lots of great tips.

  5. Silvio
    Permalink to comment#

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

  6. Permalink to comment#

    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
    Permalink to comment#

    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. Bob
    Permalink to comment#

    Two horrible things happened during 2001:

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

  10. @Bob

    That’s a good one!

  11. Permalink to comment#

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

    -Kelton

  12. Eduardo
    Permalink to comment#

    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
      Permalink to comment#

      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. Permalink to comment#

    Love the new design

  16. Permalink to comment#

    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. Permalink to comment#

    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
    Permalink to comment#

    Basic & clean. Thanx.

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

  23. Permalink to comment#

    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?

  24. richard hemmings
    Permalink to comment#

    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

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

*May or may not contain any actual "CSS" or "Tricks".