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
The "simpler version" does not work. Even the example file doesn't work :(
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteafter removing "fileDB();" the code works without error. Good work ! - this has saved my quite a bit of time !
ReplyDeleteOkay everything works, however, one question..how do I go about adding more options to each question?
ReplyDeleteI have addressed this here: http://game306.blogspot.com/2014/03/update-html5-multichoice-quiz.html
DeleteUpdate: 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.
ReplyDeleteYour example is exactly what I needed to get going - thank you so much - need to expand this into a mulitplayer model... any ideas?
ReplyDeleteHey great tutorial ! Thank you so much =)
ReplyDeleteHey!
ReplyDeleteGreat 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?
Hi nearly the same question, less sophisticated : can you explian how we could pick x questions at random in the json file ? Thnaks anyway.
ReplyDeleteAn example where questions are randomised: http://www.flashbynight.com/tutes/mcqquiz/v3_source.zip
ReplyDeleteOther questions, please mail me at fbnmail*flashbynight.com (replace the * with @). I will help you the best I can.
Nice blog...Very useful information is providing by ur blog. Checkout Great beginning html tutorials Very clear and helpful for beginners.
ReplyDeleteGreat tutorial. I was trying to see if there was a way to highlight the correct answer after a choice has been made?
ReplyDelete