A couple of weeks ago a friend asked me if I’d be interested doing a little contract work for the company he works for. The project was to come up with an on line quiz, mimicking that of FreeRice.com. Reasonably simple I thought, so I figured it might be good for a laugh and few pennies. The caveat being, if possible, for it to be entirely browser-side, as his company’s software did not support server-side code. Now that sounded interesting.
Being the impulsive code-monkey that I am, instead of waiting for the finalization of my contract to come through, I simply went ahead and coded the whole thing. Naturally, they decided to give this to someone internal and not hire me, so their loss is your gain. I didn’t have anything to do with this software after I’d written it, so I figured I would publish it here on my blog for the whole world to use.
The software itself is incredibly simple. Actually, I hesitate to call it software at all. It’s just one Javascript class file, some specifically name HTML elements and a single Javascript call to start the whole thing up. I like the Prototype framework, so I decided to use that to power JProQuiz, hence the “Pro” part. I also used the Scriptaculous builder so I wouldn’t have too much messy HTML in the class file. The entire class file (quiz.js) is less than 300 lines long and the majority of those are comments. (Can you tell I’m a little proud of it?)
The basic idea is a single class that acts as an engine and using a JSON configuration file, which contains all the quiz questions, options, and correct answers, drives the entire quiz experience for the user. Now, you’re probably wondering: “How do you keep the JSON config file obfuscated so that people can’t just look at the answers?” Err… well… you can’t. This quiz is entirely browser-side, so the data has to be available to the front end. The JSON file is sort of buried in the class file, so it’s definitely not immediately obvious where the questions are coming from. It would take someone who knew their way around Javascript to figure out what was going on. And if someone really wants to dig through your code and find your JSON file and read all the answers so they can get a 100% on your little web quiz, well, boogaloo for them. So, don’t use JProQuiz to power the new on line SATs, just use it for fun little quizzes.
You can download JProQuiz here.
And you can see a live example here.
If you use JProQuiz please let me know by commenting below. Or if you have any questions, suggestions, or bugs . . . bring ‘em on!
January 26th, 2009 at 2:12 pm
Hi, I’m trying to use your Jpro Quiz for a non-profit’s website. Firstly, is that OK? Secondly, when I try to add another option to the JSON, it seems to break the quiz. I just tried to add an option “e” as an answer on one of the questions. Then the whole quiz stopped working.
I still love it and think it’s way cool though. Thanks!
January 26th, 2009 at 2:20 pm
Hi, Eric. Absolutely you can use the script. Sorry you seem to be having some trouble with it. JSON can be a bit hard to diagnose because if there’s a syntax problem it will just fail silently. First thing I’d check was that the syntax is correct. Make sure every comma and quotation mark is in the right place.
Feel free to post your JSON file so we can all take a look at it.
January 31st, 2009 at 10:03 pm
This is a really cool set of scripts, except for one problem. It seems to blow up IE (6 and 7). On a project I’m working on I’ve got it all going fine in FF and Safari, and it will run through once in IE. But if I try to reload the page, in IE, it will pop a box that says the page can’t be loaded. If I close IE and load the page again, it will run once and then I’m back at not being able to reload the page.
I came back here, in IE7, to try the example to see if it’s something I did (I’ve modified the code some to work with my project), but the example doesn’t work at all. The page loads, but there’s no link to start the quiz.
Really I’m just commenting to let you know what I’ve run into. I’ll do some digging and see if I can find a solution, most likely a problem in the underlying libraries but I have no experience with either scriptaculous or prototype so I can’t say for sure. If I can find a solution I’ll be sure to let you know.
February 2nd, 2009 at 9:32 am
Hi Edward,
Thanks! I have to shamefully admit, however, that I didn’t test it in IE6 or 7. If you find a solution I’d be ever so grateful if you posted it here. If not, definitely let me know and I’ll see if I can’t write some patches for you so we can get it working. I’d love to see this used practically in the real world.
Most of the IE/FF discrepancies I find lie in the way each handles the scriptaculous libraries. I actually prefer JQuery to Prototype/Scriptaculous mainly for these reasons.
March 2nd, 2009 at 4:08 pm
The IE problem is simply that you have a span open.
Change:
To:
(so that the second “span” is closing)
and your problem goes away.
Nick, this is just what I was looking for. Nice job!
March 2nd, 2009 at 4:11 pm
Sorry. It looks like you have it dropping HTML. I didn’t think of that.
Change the open span AFTER id=”total” to be closed and that will fix it.
March 2nd, 2009 at 4:16 pm
Patrick, thanks so much for fix! It’s frustrating how small problems like that can bork the whole thing. I should have been more careful.
Glad you found the quiz software useful. If you ever get a live version going, definitely shoot me the link. nickbart (at) gmail (dot) com.
January 14th, 2010 at 12:25 pm
I was trying to use your quiz script on my site. When I couldn’t get it to work, I tried the total simple example which you include in the zip file.
It works when I test locally. When I try to put it on my site, I get “Score 0/ ” and the error “Line: 119 Char: 3 Error: Object doesn’t support this property or method.”
My theory is that the JSON file needs a specific permission level that it does not have. Any ideas? Thanks.
January 14th, 2010 at 12:53 pm
Hey Patrick,
Sorry you’re having trouble with the script. Are you using IE? I’d try running through it in Firefox with Firebug installed and see what sort of debug info you can get.
I believe the JSON config file does need at least read permission by the web server, so I’d make sure that was in place.
I’ll see if I can’t run through your issue tonight and see if I can recreate your issue.
January 14th, 2010 at 1:52 pm
Thanks for the quick response. It doesn’t work on Firefox either. Debugging brings up line 118 of quiz.js — “this.__questions.size is not a function.”
This is rather strange since as I said, it works locally.
January 14th, 2010 at 8:16 pm
I think I’ve solved the problem. I stumbled across an item on the Web somewhere that says you can’t use a JSON file with PHP. My site has PHP on the same box as ColdFusion. I don’t know jack about PHP so I assumed this to be true. As an experiment, I changed the JSON extension to .TXT (and in quiz.js) as well . . . and what do you know, all of the sudden it works. Take that for what it’s worth. I don’t know what the ramifications of using it this way would be.