Sweet!! I just released my very first jQuery plugin on github – SlickQuiz!
SlickQuiz, simply put, is:
A jQuery plugin for creating pretty, dynamic quizzes.
I’ll let the demo speak for itself – check it out below!!
Your Score:
Your Ranking:
Check out the github page for all the technical details!
Update 6/21/12: We now have a SlickQuiz WordPress plugin!
Update 11/2/13: Wow! Thank you all SO much for trying out SlickQuiz. I hope it’s working well for all of your needs. Today, I’m disabling comments on this post in an effort to route all questions and support requests to a more organized system via Github Issues: https://github.com/jewlofthelotus/SlickQuiz/issues
Please: if you have any issues or feature requests, look through the existing issues for your item before creating a new one. Thanks all! Looking forward to adding some awesome new features in the next year!
Lastly, if you want to stay up to date with new SlickQuiz developments, I’ll be regularly posting about it on my new blog: http://www.juliecameron.com/blog/category/slickquiz/
313 Comments | Comments are closed.
Hello,
How can we make slisk quiz to jumbled questions and answers .
@ch: Currently, there isn’t an option to randomly sort the questions and answers.
I can certainly see that being a valuable option, so you are welcome to fork my github repository and submit a pull request.
I’ll also add it to my list of updates and try to get it in for you!
Thanks for trying SlickQuiz out!
@julie..,
Thanks for ur quick response,
i dont want to show check it button . ie when user selected any of radio button(option,) it would go to next question .. ie no need of next & check it buttons… to make my application user friendly.. can u please help ..
one thing is that i have hidden next buttton now the issue is with check button
How can i show listiems instead of radio buttons…
..
@ch: The SlickQuiz plugin is currently designed to display the correct / incorrect response message after each question (versus displaying which questions were correctly / incorrectly answered at the end of the quiz).
So at this point, having the “Check Answer” and “Next” buttons are the only way to move forward in the quiz.
Since questions can have multiple answers, a user should be able to check off each answer before moving on. For this reason, setting the quiz up to jump to the next question as soon as the user selects a single answer wouldn’t work out – they’d not be able to select all the correct answers.
As for showing list items instead of radio buttons – I’m not really sure what you’re trying to accomplish here. The radio buttons and checkboxes need to be present for the user to select an answer. Are you trying to set it up so that the entire answer text is selectable?
If you have a demo site or an example that I could look at, I’d be better able to help you and understand what you’re going for.
@julie
Thanks for response,
my idea is to display options without any checkbox and radio buttons ..
so if i click on any of text it would display next question… is it possible .
cheers!!!
@ch: It is certainly possible with some modifications. My only concern is that it wouldn’t be obvious which questions have more than one answer. The benefit of having the radio buttons and checkboxes is that people are familiar with them and generally understand that radio buttons will only allow one item to be selected, where as checkboxes allow for multiple selections.
If your quiz is only going to have one answer per question (radio buttons), then that concern wouldn’t be relevant and having the text only as the selectable area would be a nice feature.
At this point, I would have to spend some time thinking about how to make these options available in addition to the current setup – so I can’t promise this feature additions in the short term. But as I said, you’re welcome to fork the plugin on github and submit your approach as a pull request.
Thanks again for your interest!
@julie…
Actually my question is having only one option .. so my requirement is obviously radio button or text . i feel that text option is the better.. radio looks horrible on my screen .
i have tried many ways can u please help in this scenario…
waiting 4r ur quick response………/////////\\\\\\\\\\\\
@ch: If you could create a new issue on the github page describing your scenario and desired functionality, someone will be able to look into a solution for you.
https://github.com/QuickenLoans/SlickQuiz/issues
Did you use a script or something similar to generate the JSON from a file of questions or did you hand code it all? If the former, could you share it with us?
@Davesh For the plugin example, I just hand coded the JSON – with a nice text editor it wasn’t too hard to just copy/paste questions and change values.
I have also put together a WordPress plugin that puts a form in the admin dashboard where users can simply fill in the fields. AJAX posts the JSONified form data to the backend where it gets saved to the DB. I have not released this plugin yet, but hope to in the next few weeks. It would be a good example of how to create a good admin interface for this plugin in any language.
Thanks. How do I do the CMS thing you mention in the readme? I want to create several pages with a different quiz on each – all on one website – but I assume each page will look in the ‘js’ folder for the same config file.
@Davesh Instead of referencing the config file, you can actually pass the JSON right into the plugin using the “json” attribute, like so:
As for the CMS solution, the only thing that currently exists is the WordPress plugin that I mentioned. Once that is released, you should be able to use that as a model for alternative frameworks and languages.
Not sure if it was because I was having a dense moment or because I am new to javascript/jquery but took a bit of time to realise that you do not put in the {} braces in the {YOUR_JSON_HERE}. Got it working now. Thanks and it’s a great plugin!
@Davesh: Thanks! Glad you like it! Feel free to link up your quiz – I’d love to see my plugin in action!
Hello,
Is there a way to check if you have answered, let’s say 2 questions right, and then give a alert box saying ‘yay you answered 2 questions right’. I want to alert box to show up right after you answered 2 questions right, so after you click check my answer. Is this possible?
Kevin
@Kevin: At this point there isn’t a setting to do that sort of thing, but you’re welcome to fork the repository and submit a pull request with a solution. Or, if you want to post an issue to the github repository we can look into adding it – please be sure to include your use case and why you’d like this feature added.
https://github.com/QuickenLoans/SlickQuiz
HI, How can I publish the quiz in the post or page, there is a shortcode o something that let me publish the quiz directly from the wordpress post o page dashboard?
@stefan: If you’d like to use SlickQuiz on WordPress, you’d be best off using the new WP plugin:
http://wordpress.org/extend/plugins/slickquiz/
It will allow you to create and manage quizzes from the WP admin interface and use a shortcode to embed quizzes in your pages and posts.
Alwaya waiting for a wp quiz plugin that SAVE the USER results for every quiz… Its ll be possible modify this one to get it…?
@Carlos: There is a WP plugin but it does not yet save user results. This is a feature I’d like to implement in the future, there isn’t a timeline on that yet though.
http://www.jewlofthelotus.com/2012/06/21/slickquiz-wordpress-plugin-is-live/
Julie, I am a newbie’s newbie to WordPress, so please bear with while might be a fairly elementary question. I installed the plugin and activated it and it seems to work fine as far as creating a new quiz. When I put “[slickquiz id=X]” (I replaced the “X” with the number of the quiz I created) and view the page, all I get is:
THE NAME OF THE QUIZ
Get Started
Your Score:
Your Ranking:
That’s it. Any idea what I’m doing wrong? I appreciate your help!
Thanks,
Michael
@Michael: That’s a good question. It sounds like there is a JavaScript error on the page preventing it from working. This could be due to a conflict with another plugin or the theme, or a number of other things.
Could you try updating the plugin with the newest version available at:
http://wordpress.org/extend/plugins/slickquiz
For some reason the update isn’t showing up in WordPress installs but you can download it from the website and replace it in your app manually.
Thanks, Julie. I’ll give it a try and let you know what happens. Thank you for the quick response!
Hi Julie. I uninstalled the plugin and re-installed. Got the same reesult. Question for you, however. You asked me to try to update the plugin with the newest version available. When I went to the link you provided, it took me to what appears to be v1.0 of the plugin. Is this the newest version or is there a newer version available?
Thanks again!
@Michael – Yeah, for some reason WP isn’t showing the newest version, I have yet to figure out what I’m doing wrong.
As for the problems you’re having, would you mind creating a new thread in the WP support forum? That way other people with the same issue an contribute.
http://wordpress.org/support/plugin/slickquiz
If you could, please also include any seemingly relevant error messages that you might find in the developer console. Depending on your browser, you should be able to bring this up through the application menu. Check the Console pane for anything mentioning slickquiz.
It seems like some of the required files might not be loading for you.
First, thanks a lot for this plugin. Second, sorry for my english. And third, is it possible to put an image in answers options ? When a try to do it, and test my quiz, the correct answer is always considered as false. Did you have any suggestion to solve my problem ?
I found a solution, i feel like a genius ;) i had something like “answer.image” in slickQuiz.js at line 95 :
“answerHTML.append(” + input + ” + answer.option + ” + answer.image + ”)”
… and add “image” at each answers like that :
option”: “A)”, “image”:”, “correct”: true
@Julia – Thanks for trying out the plugin! Glad to hear that you’re finding it useful.
You should be able to place HTML including images in the answer values themselves, like so:
Do you know if this jQuery will conflict with Nivo Slider WordPress plugin Version 1.2.1? I’d really like to use it, but can’t afford to introduce a problem on this site right now.
@Dee – I have not yet tested SlickQuiz with that particular WP plugin so I couldn’t say for sure. If I have a chance to try the combination out I will let you know. But your best bet right now might be to set up a test environment where you could try them together without impacting the live website.
Hy Julie,
Thanks for great plugin :)
Was wondering if it’s possible to inlude image on the left next to every question and it’s options so it can serve as a reference for the answers?
I’m guessing i would have to put an image and quiz in the same wrapper and then each of them in a different div (image on the left, quiz on the right). I’m trying to do it my self, but no luck :/
@drake – It seems like what you’re trying to do could probably be accomplished purely with CSS. Each question set has an ID that you could target to set a background image and adjust the left padding.
Hope this helps! Thanks for using the plugin!
hey Julie, thx for the tip. I managed to include the image within an option and style it with css. One more question: How can i include image above the question :) Thx
found another way – i’ve just overwritted the question title with:
“q”: “Question”,
thanks again for great plugin ;)
@drake – Perfect! As for the question image – could you likely use the CSS background image approach as well.
Apply a background image to each question by the element ID and then just shift the top padding down so that it’s not covered up.
Hi,
I’m having a REALLY weird problem with the quiz under IE7 (I know, but I have to use it!- client requirement…) – Whilst the example on your site works fine in IE7 under XP, if I download it and open the file locally or upload it to my server, it won’t see any answers as correct? Very weird? Any ideas as to why???
Many Many thanks in advance
Neil
@Neil Jones – I checked out your site and found the Quiz page – I am able to duplicate the issue in IE, and you’re right – that is pretty weird.
I thought maybe there was an issue with the config file and commas, but I copied your exact config to my local setup and it works fine. So let me dig into this a bit more and see what I can find.
BTW – the quiz looks really great otherwise!
@Julie – Thank so much for looking at it -I did think it was a comma issue and triple checked it to make sure (always makes my had hurt!) – I’ve been finding a few other odd things in IE that only happen under XP of late – please can we just live in a world of webkit!
Thanks again
Neil
arr, i’ve adjusted the quiz localy and moved it to joomla site, where it conflicts with mootools. Tried with Jquery.noConflict, but no luck. In console i’m getting: “question.q is undefined”.
Could i somehow adjust the script to work with mootools? I need both libraries for various plugins :/
p.s. open thought: joomla module of the quiz would be great :)
@drake – That seems like an error that should be fairly easily resolved, do you have a dev link I could take a look at?
hey Julie, i’ll setup online demo – could i send you link via email/im?
@drake – sure, I’m jewlofthelotus on pretty much every service (AIM / Twitter / Gtalk)
great, added to gtalk ;)
great support! Issue with mootools was resolved with updated plugin on github.
Thank you.
@Julie Hi Julie – any joy with the IE7/XP issue or is it a bit of a stumper?
Many thanks again!
Neil
@Neil Jones – Hey, I wasn’t able to look at it last week, but I should have a chance to dig into it this afternoon. I’ll post another comment when I know more. Cheers!
@ Julie – Thank you so much! :)
Hi Julie, this looks like a great little plugin and almost perfect for what I need to do on a project this week.
Just wondered if you had any advice on the following?:
I’d like to have 5 questions, as per your demo, but has multiple sets of 5 questions and a set is randomly chosen/loaded on page load. I’ll also be looking to drive this from a CMS (Perch) so will have to try and figure out the json method. Any tips?
Thanks, Richard
Hi Julie,
I’m using it as a Dashboard widget to include it in ebooks created with iBooks Author and it is working really well.
I’m looking for a way to display a “Start again” button at the end of the quiz because I can’t refresh the page in the ebook. Have you got any idea how I could do this easily ?
Thanks for this really nice plugin !