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.
I love this plug in. I would like to use it as an email opt-in on my website so I can collect email addresses.
How can I add code so that when it asks them for their name it also asks for their email?
Love it!
Great quiz. Is there a way to skip the first step and immediately show the first question upon loading the website?
I cannot get the text or the button to show up on my page http://www.howyoupray.com/what-we-offer-discover/discover/?preview=true&preview_id=511&preview_nonce=9170b0cdd0
I am running WordPress v 3.5 and version 1.1.2 of your SlickQuiz Plugin
I really really need your help. I cannot get the get started link to show up on my quiz here http://www.howyoupray.com/what-we-offer-discover/discover/
Its Awsome
can i retrieve questions from database???
Hi,
Thanks for sharing! I am integrating this into an e-learning tool for a university ; much nicer than most quiz formats out there.
@Pam McCall – There isn’t a way to add an email field at this point. You’re welcome to attempt to modify the plugin and contribute your changes: https://github.com/QuickenLoans/SlickQuiz-WordPress In the meantime, I’ll add the feature to my list.
@Jakob Herrmann – There isn’t currently an option to skip the start button, but I’d like to add that. In the meanwhile, you could use jQuery to trigger a click event on the start button on page load, something like the following:
$(function () {
$('#slickQuiz .startQuiz').click();
});
@Barbara Davis – Looks like you got everything working?
@vaishali – The jQuery plugin does not involve any database storage, but it’s certainly possible to integrate the plugin with an existing CMS or database. You might take a look at the WordPress plugin for an example of such a setup. https://github.com/QuickenLoans/SlickQuiz-WordPress
@Oliver Lock – Thanks so much for the feedback!
Hi Julie!
Is there any way you can create a premium feature for adding media like pictures, audio and video?
Hi,
Greetings!
I am Looking for Jquery quiz software.
I tried with your script and its working fine.
I downloaded from github ad its having few files of code only. when i ched the wordpress plugin , its having all options like adding quizs,unlimited questions , etc. How can i get this jquery quiz software script (not wordpress plugin). am i require to pay and get the script ? if so how much?
Thank you !
Hi,
Is there a possibility of chaining?
I want to give the user different questions, depending on the first question.
So, if the answer on Q1 is a show Qa1, Qa2, Qa3..
if the answer on Q1 is b show Qb1, Qb2, Qb3….
Thank you for your help.
Hi; I just created my first quiz, the preview looks awesome. Because I’m new to this whole website environment could someone tell me how I get this to show up on the website. Do I have to copy and paste code somewhere? If so what code and where do I put it? Thanks for any help. Bruce
Hi again,
Any tips on making different questions have different weightings in the final score?
Thanks!
Figured it out ; D
hi, i updated to Version 1.1.5 and now the quiz are not showing on the site. can i revert back to the Version 1.0.16 or will this affect the database in some way? i’m not sure if the update made changes to it that will make it not work on the older version.
thank you
?
trying to use the wp plug in for slickquiz and I really want it to work. But when I use the code it says to use and replace the X with a 1, I only see the code not the quiz. Have any thoughts? I have tried it in a post, page and widget text spot.
help!
Nice work.
Is it possible to fetch the questions from database??
Hi Julia,
thank you for best plugin. I have one small question.
Can I set number of questions?
I want make more questions 50-100 and in test I want add only 10 randomly qestions.
Is some solutions for it?
Thank you
Hi, Thank you for creating this! It’s nice and easy to work with and does just what it says it’s going to. Nice Job!
This is a snazzy plug-in! Just a heads-up for anybody using more recent versions of jQuery than the one included at GitHub. The live() method has been depracated, so if you use a version of jQuery more recent than 1.7, you can swap out the three instances of the live() method in slickQuiz.js with the on() method, and it should work like a charm. (Of course, you could just stick with the included version of jQuery, too, but
Julie
Hey thanks, I successfully retrieved questions from database. My new task is to save the quiz score in database. I am using plain php. Is it possible??
Regards,
Vaishali
Hello, very nice work, I added more than 100 questions to my quiz and i am using it for android app, and it takes too much to load because of parsing the config file, any ideas on how to optimize it ?
How can I export and import a quiz?
Hi,
I’m not a techie but a former “Jeopardy!” writer who wants to put a quiz on her new website. I see you like the show :) I just added a page and see that the quiz has no instructions for how to enter multiple choices, nor does it explain where “main copy” and “result copy” are to be used, since there’s a separate place to explain the incorrect answer with “incorrect response message”; also, why 2 answer areas and what if I don’t need Levels of 1 – 5? These are all my important q’s for you. I hope to get this going in the next couple of days…
Thanks much!
Ruth
OK, I panicked, sort of. Just spent the last hour or so playing around with it. What I really need to know is how you change the font and color of the first line in the response for correct and incorrect answers so I don’t have to pay someone to help me with it. Thanks.
OMG guys! I’m so sorry it’s been over a month since I’ve responded (or even approved) comments! For some reason my blog stopped sending me email notifications when new comments were posted :( Will be fixing that… so here it goes…
@Darragh Brady – You should be able to put standard HTML tags in all of the copy fields (question, answer, main, result, correct, incorrect). So depending on what you’re trying to accomplish, that might be enough for you!
@Kishen – The jQuery plugin is also available on github at https://github.com/QuickenLoans/SlickQuiz
@Glenn – Right now, question chaining is not possible. It is an interesting idea, so I will add it to my list of potential features to include. https://github.com/QuickenLoans/SlickQuiz/issues/48
@Bruce – I’m guessing you’re using the WordPress version of the plugin? If so, in the main listing of quizzes, look for the ID at the beginning of the line for the quiz you want to put on a page. In the post or page you want to include the quiz on, place
[slickquiz id=X]
in the post where you want the quiz to be. Make sure you replace the “X” with the ID you found in the quiz listing.@Oliver Lock – Right now the quiz isn’t set up for weighted questions, I’m sure it’d be possible. You’d likely have to include a weight value for each question in your quizJSON object and then alter the
calculateLevel
method to factor in the question weights. I’d love to see your implementation – do you have a github fork by any chance?@mike – Simply placing an older version in your plugins directory should not cause any issues. If you fully uninstall the plugin via the wordpress interface though, it will delete all quiz data stored in the database. Were you ever able to get the quiz running again?
@kathi wheeler – Were you able to get this working? If not, could you like me to an example page on your site where you’re trying to add a quiz?
@vkulkarni – It’s definitely possible to integrate the jQuery plugin with a database or CMS. I’d suggest looking at the WordPress version of the plugin for example CMS like implementations. Basically, as long as you can load your quizJson to the page – it doesn’t matter if it’s coming from a DB or hardcoded. https://github.com/QuickenLoans/SlickQuiz-WordPress
@Michal – Right now there isn’t an option to only display a set # of questions. I have had this request before though, and it is on my list – so stay tuned. https://github.com/QuickenLoans/SlickQuiz/issues/49
@Chris – Thanks so much! I’d love to see your implementation!
@GTP – Thanks for the comment regarding jQuery versions and
live()
vson()
. The plugin has since been updated with the newest version of jQuery and is now usingon()
‘s.@vaishali – It’s definitely possible to save scores to a database. As mentioned above, I’d suggest looking at the WordPress version of the plugin for example CMS like implementations. Basically, I’d suggest sending an AJAX request to your backend in the
completeQuiz
method after the scores are calculated and levels and ranks are determined. https://github.com/QuickenLoans/SlickQuiz-WordPress@salah – I would have to see an example of this happening. There are certainly ways to optimize, some options might depend on what you’re trying to accomplish. You should try passing the JSON object right into the plugin, instead of loading a separate config file – like so:
$('#slickQuiz').slickQuiz({json: {YOUR_JSON_HERE}});
@Dennis – Right now there isn’t an import / export option. I’m guessing you’re using the WordPress version of the plugin? That’s not a bad idea for a feature, so I’ll add it to my list. https://github.com/QuickenLoans/SlickQuiz-WordPress/issues/16
@Ruth Deutsch – Currently the first lines of the correct and incorrect response messages are being styled by line 119-123 in the
css/master.css
stylesheet. You should be able to override those with your preferences.Hi! Love the quiz software, but i want to use custom radio buttons. I’ve tried a few solutions that wrap the input and hide the radio button (like this – http://www.egstudio.biz/custom-radio-buttons-with-jquery/) but whenever i do, the radio buttons no longer register with the quiz (i.e. always a blank answer) Thoughts?? Thanks!
Got it!
Had to change
var inputValue = $(this).next(‘label’).text();
to
var inputValue = $(this).siblings(‘label’).text();
The SPAN wrapper was causing the next() function useless. Might consider using this in the next version so silly people like me can easily use custom images for inputs =)
Hi Julie,
Its very nice to use this plugin. I like this very much.
Now I want to display images in questions.. Is this possible???
I was wondering if it is possible to make a quick change to the current code that would only show the next button if the answer was correct and only show the back button if the answer was incorrect. I have been playing with the code for a whole now and dont seem to be getting anywhere with my goal.
Thanks, Love the plugin!
@msauber – Glad to hear you got it working! I’ll definitely put that on my list, it’s a great idea! https://github.com/QuickenLoans/SlickQuiz/issues/50
@vkulkarni – That is entirely possible. Right now, you should be able to place any HTML you like into the JSON object copy values – including image tags.
@travis – The simplest solution would probably be to setup some conditions around the lines that display the next and back buttons – https://github.com/QuickenLoans/SlickQuiz/blob/master/js/slickQuiz.js#L251
You should be able to key off the
correctResponse
variable created above https://github.com/QuickenLoans/SlickQuiz/blob/master/js/slickQuiz.js#L237Hey Julie do you know if anyone implemented what was asked on this comment http://www.jewlofthelotus.com/2011/12/23/slickquiz-jquery-plugin-now-on-github/comment-page-2/#comment-1490
I would love to see this if it is working?
First, love the quiz addition. Second, your Michigan question asks how many INCHES of rain Michigan receives per year, then answers how many TIMES a year it rains in Michigan. Now, I’m no meteorologist but I demand full credit for my participation! lol. Thanks for the quiz app. I’ll come back when my first quiz is ready for publish… Spoiler alert, it’s about ICE MACHINES! Riveting stuff.
@travis – Unfortunately, no – that hasn’t been added in yet, but I’ll see what I can do over the next week or so. I agree that it would be a handy addition.
@Alex – Great find! I’ll update the plugin! Looking forward to seeing your quiz!
Hello
I want Fech que from database . so how i can use it please
small demo code please
Hi julie,
This plugin is really very gud. i used that in my website. I created the quiz with the questions from database. Then I stored the result in database. Right now to my task is store history of questions attempted by student and exam will start from that question not from start. I am using codeigniter framework, not wordpress
Plz help me.
Regards,
Sam
Hi,
I was wondering if your plugin allows for specific redirects to URLs associated with certain results?
Thanks!
@SB – That’s kind of a loaded question. Are you using a development framework of any kind?
@Sam – First, you’re going to need to store the entirety of the quiz JSON object for each user in the database, however you’ll need to slightly alter the default JSON format to include the users answers to each question they’ve completed. So you’d likely want to send off an AJAX request to codeigniter each time they answer a question, with that updated JSON object to store in the db. Next up, you’ll need to make some alterations to the SlickQuiz jQuery plugin – it wil need to pre-select answers when the quiz is loaded (so that score calculations can be done when they finish), and then you’ll need to identify the first unanswered question while the quiz is getting built, and instead of showing the start button on load, show that question instead.
@Christine – Right now the plugin does not handle any redirects based on results. Are you using the WordPress or jQuery version? I’ve gotten similar requests so this is definitely something that could get baked in at some point in the future.
Hi!
I am looking for a quiz where i can display images with question and option text. I am really stucked in between my work. Hope you understand . Please do help asap.
Thanks in advance
Not. i m not using any Framework.
i want to fetch all que & answer @ only 1 time .
after all proces like score done by ajax , jquery ..etc.
Hi!, It is very very helpful plugin, but it would have helped more if it has images in question and options.
Thanks,
Any one knows how to save the awsers on a database or something? i don´t want to use WordPress! Thanks
Hello Julie!
I’m using your plugin on a page of a site. But he is not running and I wonder why?
When I put it on a wordpress page, it appears the button to start but does not perform the questions. Url appears only in the “#”. Could you tell me why this happens?
Sorry the incoviniente!
thank you very much
@Shriyank – You should be able to add standard HTML
img
elements to any of the question / answer values.@Luciano Xavier – Do you have a demo page I could look at? I’ll have to see the broken quiz in action to determine what the issue might be.
@SB & @Paulo Pinho – Saving scores to a database (without using the wordpress version of the plugin) would be a somewhat advanced programming goal. I can’t provide you with any suggestions on how to do it because each implementation will vary greatly – depending on your framework (or lack there of), your database, your site’s general infrastructure, and your personal programming expertise.
Hi,
I’ve added you SlickQuiz plugin to a site I’m currently building. I’m building a desktop site and a mobile app (which will be published through PhoneGap).
The quiz works perfectly when I’m running it on the desktop site- but I’m having issues on the mobile version.
I’ve uploaded a quiz on the following site:
http://www.imagepoetica.co.uk
The quiz is reached by following the ‘Learning’ link. The actual url is:
http://www.imagepoetica.co.uk/Learning/Quizzes/contraception_quiz.html
When I got to this page initially the quiz will not work (just displays Start quiz, You Scored, Ranking). However when I refresh the page it all works fine. Can you please tell me what I’m doing wrong?
Thanks in advance.
Gareth
@Gareth Franklin – I just tried loading the quiz page both in Chrome on the desktop and in Safari on my iPhone. It worked fine in both cases. You said you’re working with PhoneGap – are you trying to load the quiz within that interface? Is that where it’s not working.
Your description of the problem though, sounds like possibly a permissions issue – where on the first page load, the necessary resources haven’t loaded, but on the secondary request, they have. You might take a look at your developer tools Network panel to see if any resources are missing from the first load.
Hi Julie,
I was just logging on to post a follow-up report.
It seems it was a JQM / AJAX issue. I’ve added [data-ajax=”false”] to the links to the quiz and it sorted the problem.
Thank you very much for the prompt response. I love slick quiz- it’s the exact thing that I needed for this project. Us noobies rely on talented and generous experts like yourself- please keep up the good work.
Cheers again,
Gareth
@Gareth Franklin – Awesome! Glad to hear you got it working!
Hi Julie – awesome code :)
I’m trying to add a few more things to the quiz – would like to add a different image to each question and a JS form at the end (Wufoo) to collect data.
How would you go about doing this? I’ve tried adding the images/form to the quiz json config file, but that breaks the code.
I can do HTML/CSS but nothing more than that, so I’m sure I’m being an idiot!
Thanks again – any suggestions hugely appreciated.
@Jonty – Thanks for trying out SlickQuiz! Generally, when people tell me that adding images / forms / HTML tags to the quiz config file breaks the code, it’s usually because they’re forgetting to escape their quotes. Escaping quotes ensures that the parser knows when the string begins and ends – if there are quotes in the middle of the string (that match whichever version of quotes you’re wrapping the string with) it will assume the stop is there, rather than treat it as just a character within the string. So you’d want your code to look something like this:
"q": "<img src=\"path/to/image\" /> What number is the letter A in the English alphabet?"
Alternatively, you could use single quotes for the image tag, which would eliminate the need for escaping at all:
"q": "<img src='path/to/image' /> What number is the letter A in the English alphabet?"
Or, if your entire question value is wrapped in single quotes, then you’d want to either sanitize single quotes for tags within that string, or use double quotes for tags within the string:
"q": '<img src=\'path/to/image\' /> What number is the letter A in the English alphabet?'
"q": '<img src="path/to/image" /> What number is the letter A in the English alphabet?'
Let me know if this gets things working for you!