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
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Siddharth
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I’ve tried in the demo area…how to untick it?
Thanks for the headsup! Fixed. See my reply below for specifics.
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.
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 =/
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.
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.
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. :)
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?
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!
Sorry I thought this was jQuizzy, my apologises.
Nah, no worries. Glad to have set the record straight!
@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)
Looks great but I get the same error with un-selecting the radio buttons.
Hey Jamie. Sorry about that. I went ahead and pushed a tiny fix for that. Please see below for specifics.
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.
thx for deleting my ‘wrong answers’ post =)
wasted time
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.
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
+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?
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.
Thanks for the update Siddharth, I’ll look into it!
See this is the reason why premium is so great and why I wish I had the money to get it!
Great
Thanks / merci :)
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.
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.
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!
Able to add image in question part other than text?
This looks amazing – wish I was a premium member!
how would you implement checkboxes into the quiz rather than just radio buttons?