Build a Spiffy Quiz Engine: New Premium Tutorial
plus

Build a Spiffy Quiz Engine: New Premium Tutorial

Download Source Files

Final Product What You'll Be Creating

The first official Nettuts+ quiz was a massive success with an impressive number of developers participating and evaluating their knowledge. There were a non-trivial number of comments asking how the mini quiz engine was built. And lo and behold! That’s what we’re gonna learn in this week’s Premium exclusive tutorial!

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network.


What You’ll Learn Today

  • Creating a simple quiz engine completely from scratch
  • Leveraging cutting edge CSS3 to spruce up the presentation
  • Filling in where the JavaScript standard library ends

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.


A Friendly Plug

If you enjoyed the quiz engine that we built today, I built an even more advanced version. One with reviews on the result page, social sharing, question counters and much more. It’s so good that even the Tuts+ sites are going to use it!

Have a quick look at jQuizzy, my new quiz engine. You’ll love it, I promise!

jQuizzy

Siddharth is Siddharth on Codecanyon
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://syafzmagz.com SyafzMagz

    I’ve tried in the demo area…how to untick it?

    • http://www.ssiddharth.com Siddharth
      Author

      Thanks for the headsup! Fixed. See my reply below for specifics.

      • grayskyes

        I tried the demo as well, and you can select multiple answers instead of just one… this may be why the question regarding unticking was asked. I can select all four options if I want, which I’m assuming isn’t desirable.

      • JohnRivs

        1º SyafzMagz is asking about unticking things because when u tick 2 things, u cant actually untick one of them..i guess..

        2º the answers are wrong =/ some questions are different from the real quiz =/

      • Ian

        Maybe because in the demo it allows you to select more than one option. So if I click one, decide I want to change my answer so I click another one, they’re now both clicked. That’s definitely a problem. Perhaps the name attribute wasn’t used correctly? I haven’t watched the tutorial just making an assumption.

      • http://designmethis.com Jonathan

        I agree.. Looks great except it ticks everything you select without being able to untick anything leaving you with multiple answers. Definitely something that needs to be fixed.

      • http://www.ssiddharth.com Siddharth
        Author

        Hey guys! Thanks for finding the bug. I’ve updated both the demo and the source code. See my reply below to find out why it was letting you select multiple options.

        Also, Ian gets a gold star for his guess. :)

  • http://www.mattfreeman.co.uk Matt Freeman

    The worst quiz software I’ve EVER seen. You get to end and it tells you Questions X and Y are wrong (X and Y being numerics), okay where from here..

    a) Summary page doesn’t tell you what the wrong question were, nor does it show the answer where incorrect.

    b) You can’t go back to see what the hell the question was

    c) Restarting it and proceeding through you have to count in your head the question number since they aren’t label. You can also neither skip forward or backwards

    Poor and now you write a tutotrial about it?

    • http://www.ssiddharth.com Siddharth
      Author

      I must admit — comments like these are a little disheartening. We’re building a simple quiz engine and learning some techniques along the way — we’re not building production ready software.

      I’m sorry that this engine, that I built for fun, doesn’t satisfy your requirements. If you’re actually looking for something that’s full featured, can I recommend my jQuizzy plugin? It actually has everything that you’ve listed as requirements.

      Thanks for reading!

      • Matt Freeman

        Sorry I thought this was jQuizzy, my apologises.

      • http://www.ssiddharth.com Siddharth
        Author

        Nah, no worries. Glad to have set the record straight!

    • Sarel

      @Matt Freeman… dude, seriously? Have you no respect for ppl who’s trying to make something new? I mean, the stuff you said makes sense… but seriously, try tell your girlfriend/wife/whatever next time you make love and do something the first time: “What the fuck? You’re doing it wrong… sheesh, then you try that shit on me… your efforts are useless… here’s a few suggestions… a, b, c etc” – see how that works out for you. I bet you’d rather say it soft and lovingly. Now, I know Siddharth isn’t your girlfriend… but he’s another human being who are trying to better the world (at least on the internet) for us all and who’s trying to share what he learned from doing this plugin.

      Honestly, if you worked for me in my development team I’d fire you! The interesting part that you didn’t include in your shitty reply was: “Here’s what I did, and here’s why it’s better” – I think the reason for this is probably because you don’t have something better or similar to this plugin… it had bugs, you wanted to rip it for your own site… it didn’t work (maybe your boss shat on you because you delivered something that’s still in beta and tried to make as if it’s your own and the you couldn’t fix it). Who knows. Bottom line, your comment are unwanted and I think the software industry would be better if you gone and did something else… like farming or whatever.

      Now, after reading all this… how did this make you feel? Did you have a warm and fuzzy feeling in your heart or did you get pissed off at me while reading this? Next time when you post something … think about the original author (or the target of your post) before you open your proverbial verbal diarrhea machine.

      (Hopefully ppl who know you read this before this comment gets banned)

  • http://www.jamieholliday.co.uk Jamie

    Looks great but I get the same error with un-selecting the radio buttons.

    • http://www.ssiddharth.com Siddharth
      Author

      Hey Jamie. Sorry about that. I went ahead and pushed a tiny fix for that. Please see below for specifics.

  • http://www.ssiddharth.com Siddharth
    Author

    Hey guys. About the multiple checkbox issue, it seems an older version of the HTML got copied over. Damn Git.

    Basically, the version without the ‘name’ attribute, which enables grouping, for the radios got added thus letting you choose multiple options. As you know, it’s a simple fix and I’ve updated both the demo and the source files. Add a unique name attribute for each group of radio buttons and you’re set.

  • JohnRivs

    thx for deleting my ‘wrong answers’ post =)
    wasted time

  • http://nbonnici.info Nicolas Bonnici

    Exceeds expectations! You scored 86.67%

    Yeaha!

    This script need a few improvements but it’s like a good start for build some social quizz thing.

  • Sergey Zubov

    Looks good, works fine, all that should be done now is hide the correct answers from source code :D

    Offtopic I guess but thats exactly how we cheated in University with one test, I have no freaking idea how teacher of Information Technology in course Data security didn’t hide correct answer array from the source code :D

    • Sorvar

      +1

      Great tutorial and result but it’s a bit silly that the answers are just inside the source code..
      Is there another way to define the correct awnsers so the user can’t see them?

      • http://www.ssiddharth.com Siddharth
        Author

        Make a simple AJAX call to retrive the data from the server. I skipped it since the focus is on the rest of the techniques.

      • Sorvar

        Thanks for the update Siddharth, I’ll look into it!

  • http://nick-osullivan.co.uk Nick

    See this is the reason why premium is so great and why I wish I had the money to get it!

  • http://www.arnaud-olivier.fr Arnaud

    Great
    Thanks / merci :)

  • Montez French

    Great tool! The only thin i would do is use PHP & mySQL to place the answers in the database. The answers to the quiz is in the source of the page.

  • http://www.websicle.co.uk Blake

    Should encrypt the javascript data too, as people can view the source find the var, in this case it was ‘kroggy’ and get the answers.

  • Damian

    Great entry level tutorial and I plan on adapting this for an internal project.

    I was wondering if you knew why it doesnt work in IE, as I notice your jQuizzy one does.

    Any help would be appreciated!

  • http://tsdesign.com.my Ranag

    Able to add image in question part other than text?

  • http://www.dev-hq.net/ Joe

    This looks amazing – wish I was a premium member!

  • Mick

    how would you implement checkboxes into the quiz rather than just radio buttons?

  • Shafiq

    How to write german words (ö, ü, ä) in this tutorial mean in 0.1 version.