Thursday, May 31, 2012

HTML5 Multiple Choice Quiz Tutorial

I remember when I started working with HTML5 and I was surprised I couldn't find a decent tutorial for making a simple MCQ quiz. So now that I've gotten more confident with the technology, I've decided to publish my own. Putting together a short quiz is an excellent project for someone starting off with a technology, and it's great for someone crossing over into HTML5 from Flash.

The tutorial is here: http://www.flashbynight.com/tutes/html5quiz/

And it includes all the code and artwork you need for the project.

UPDATE: I have produced a simpler version, see here: http://www.flashbynight.com/tutes/mcqquiz

and a version with pictures here: http://www.flashbynight.com/tutes/pixquiz

The new versions will work on phone screens too.

UPDATE 2: A version with a varied number of options:

example: http://flashbynight.com/tutes/mcqquiz/example2/
source: http://flashbynight.com/tutes/mcqquiz/example2/source.zip

13 comments:

  1. The "simpler version" does not work. Even the example file doesn't work :(

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. after removing "fileDB();" the code works without error. Good work ! - this has saved my quite a bit of time !

    ReplyDelete
  4. Okay everything works, however, one question..how do I go about adding more options to each question?

    ReplyDelete
    Replies
    1. I have addressed this here: http://game306.blogspot.com/2014/03/update-html5-multichoice-quiz.html

      Delete
  5. Update: I have removed the extra line of code (fillDB()). Please note that when OFFLINE, it will not run in Chrome due to security restrictions. Test it offline in Firefox or IE.

    ReplyDelete
  6. Your example is exactly what I needed to get going - thank you so much - need to expand this into a mulitplayer model... any ideas?

    ReplyDelete
  7. Hey great tutorial ! Thank you so much =)

    ReplyDelete
  8. Hey!

    Great tutorial!
    Just wonder, how would I go about if I wanted to get a random question each time I start a new question session and then store the question away so the same question won't show multiple times?

    ReplyDelete
  9. Hi nearly the same question, less sophisticated : can you explian how we could pick x questions at random in the json file ? Thnaks anyway.

    ReplyDelete
  10. An example where questions are randomised: http://www.flashbynight.com/tutes/mcqquiz/v3_source.zip

    Other questions, please mail me at fbnmail*flashbynight.com (replace the * with @). I will help you the best I can.

    ReplyDelete
  11. Nice blog...Very useful information is providing by ur blog. Checkout Great beginning html tutorials Very clear and helpful for beginners.

    ReplyDelete
  12. Great tutorial. I was trying to see if there was a way to highlight the correct answer after a choice has been made?

    ReplyDelete