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.
Hey @Richard Wiggins – you might want to take a look at the SlickQuiz WordPress plugin, it probably wouldn’t be terribly difficult to port to a small PHP CMS like Perch.
http://www.jewlofthelotus.com/2012/06/21/slickquiz-wordpress-plugin-is-live/
As for randomly loading a question set, I would probably create separate quizzes and write a function as part of the SlickQuiz CMS port to randomly select from a list of them.
Hope that helps, let me know how it goes!
@Maxime Delley – Wow! That sounds like a really cool implementation!
As for being able to restart the quiz, I’ve typically just done this with a page refresh but since you can’t do that… I would set up a new “reset” method is the JS.
If you want to give this a go, feel free to fork the plugin on github and submit a new pull request with your additions.
https://github.com/QuickenLoans/SlickQuiz
Ideally, I’d like this to be an option that one could pass in, something like “allowReset” that when set to true would add a button at the end of the quiz to “Try Again” and upon clicking would perform the reset.
If you’re not up for the challenge, let me know and I’ll add it to the list of updates I plan to make. Cheers!
Thanks Julie. I’ll give it a go and keep you posted.
@Neil Jones – I found the problem – the answer inputs where improperly coded with a closing tag and this was freaking out IE.
It’s been resolved and you can get the newest version from:
https://github.com/QuickenLoans/SlickQuiz
Thanks for your patience!
Great plugin Julie and thank you for publishing. Is there a way to include images in the quiz set up fields?
Thanks,
Rennie
@Rennie – Thanks for trying it out! You should be able to put any HTML elements into any of the values. Are you having trouble with any of them in particular?
Hi Julie thank you for your reply. How do I add an imaged to the “Main” copy field in a quiz please? I only know basic HTML. Thanks,
Rennie
Julie I figured it out!
@ Julie – you are awesome, thanks!!
Hey Julie,
Finally getting around to using your plugin properly and working well so far. Also integration into Perch seems to be okay, though I haven’t got the random multiple quizzes working yet.
I’d really like to not check each answer as you go through, but just click the ‘Next’ button and then tally the score at the quiz end. I have tried copying/combining functionality the ‘check’ and ‘next’ button code, but to not avail. Any suggestions with this?
Thanks, Richard
Hi @Richard – Yeah, you’d definitely need to merge the check and next button methods. It could certainly be done, and now that you’ve mentioned it, it seems like a reasonable feature to add. So let me think on it for a day or two and get back to you.
Thanks Julie, that’d be sweet. If you don’t get time, let me know and I’ll try and hack it myself.
Hi again Julie, just to let you know I’ve managed to combine the next button functionality with the check button and all working well!
Thanks, Richard
Awesome Richard! I encourage you to fork the github repository and share your changes. I’d like to see if I can merge them into the main plugin!
Hi Julie,
Don’t suppose you’ve had any issues with IE? I’m testing on IE8 but I’m getting a JS and it’s basically not working. You can the dev site here: http://afl.pixelcreation.co.uk
Thanks, Richard
Hi @Richard – It looks like you’ve got a slightly outdated version of the plugin. That bug was spotted a week or two ago and I pushed the the fix for it shortly after.
There is a broken HTML tag in the main slickquiz.js file that you can fix to make it work.
Change your line 100-101 from:
var input = '<input id="' + optionId + '" name="' + inputName + '" type="' + (truths > 1 ? 'checkbox' : 'radio') + '"></input>';
to:
var input = '<input id="' + optionId + '" name="' + inputName + '" type="' + (truths > 1 ? 'checkbox' : 'radio') + '" />';
That should do it!
Hi Julie, hadn’t realised you had updated. I’ve made that change but still getting the error at the same place:
quiz = $(”);
P.S. Thanks for your quick response and I’d be happy to make a ‘donation’.
Sorry, mean to say; I have tried copying over your latest script as a test by the way, but same JS error.
@Richard Wiggins – hmm, interesting. I’ve not seen that one before. I’ll take a look at it this afternoon and let you know when there’s an update! Thanks for bringing that to my attention!
@Richard Wiggins – Figured it out! I’m still not sure why it wasn’t working – since it seemed dependent on the content of the quiz, but whatevs. I just had to change a few variable declarations from
quiz = $(...);
to
var quiz = $(...);
The update is on github: https://github.com/QuickenLoans/SlickQuiz
Let me know if it works for you!
Thanks Julie, great work! I’ll give it a try a bit later.
Scrap that! Just updated my JS and tested in IE and working perfectly now. Thanks so much Julie!
Again, I’d be happy to make a ‘donation’. :)
I love your plug-in.
Experimenting
@Inggo Reyes – Awesome! Would love to see the end result when it’s ready!
Hi Julie,
I’m a Word-Press-Rookie and try to install the Slick Quiz into my website.
The plugin is activated and the quiz is created, but I don’t “understand” how to place it in my website.
Where do I have to place [slickquiz id=X]? Do I have to replace the X with something?
The [slickquiz] shortcode…Do I have to create a shortcode and put it into a widget (text)?
This: add add_filter( ‘widget_text’, ‘do_shortcode’ ) to your theme…I guess, if I created a shortcode , I replace the word “Shortcode” with the shortcode?
Probably these are stupid questions, but anyway… Thanks a lot in advance.
@Tom – No problem, I can help you out…
To place a quiz on your website, you just need to add the following bit of text to the post, page, or Text widget that you’d like it to appear on:
[slickquiz id=X]
The “X” in the above bit of text will need to be replaced with whatever the ID of the quiz you’d like to use is. You can find the ID of the quiz in the main SlickQuiz listing – it will be the first thing in the row for each quiz.
If you’d like to put a quiz in the Text widget, adding that bit of text might be all you need to do (depending on how your theme is setup). But, if you find that the quiz doesn’t work after adding that bit of text to the Text widget – you will need to add the following line of code to either your theme’s functions.php file or it’s index.php file. You should be able to add the line at the top of the file right after the opening “<?php” line:
add_filter( 'widget_text', 'do_shortcode' );
You do not need to modify the above line at all. Hope this helps get you rolling. Let me know if you have any more questions or trouble with it!
Hi Julie,
I`d like to use your quiz-plugin for a mobile app. I realize this app with Jquery Mobile. Is there a way to use your plugin with Jquery Mobile, too?
At the moment, when I include your plugin in a Jquery mobile page, it shows all questions and answers at once and not one question after another.
Best regards,
Stephan
Hi @Stephan – I’ve not yet tried the plugin out with jQuery Mobile but it would definitely be cool to get it working. Let me set up a demo and see if I can duplicate the problem and get a fix out for you!
Thanks for letting me know about this!
@Stephan – I set up a jQuery Mobile demo with SlickQuiz and did fix an issue that was preventing it from working properly – that update is now available on github:
https://github.com/QuickenLoans/SlickQuiz
I was not able to duplicate your exact issue, though (all the questions displaying at once). It sounds like you might have some CSS styles set up that are overriding the SlickQuiz settings.
Do you have a demo page I could look at? Or could you paste your pages source code into http://pastebin.com for me?
Hi,
How easy is it to enhance the plugin to add in the following:
1. An image related to the ranking. (For example: Jeopardy Newb would have an image while another rank would have a different image).
2. Links so that the person taking the poll can share the results on Facebook, G+ and Twitter.
Just need some pointers where to edit if it is not too difficult. (I can post the updates on github if you like these ideas).
Cheers!
Hi Julie,
today I gave it another try with JQuery Mobile and the latest version of the quiz-plugin. After a little try and error, it worked! The content gets styled mobile-like and the demo-quiz works.
So far, I encountered only one problem: When displayed at my Samsung Galaxy S2, it’s possible to swipe to the right, so that the content disappears. Do you have an idea how to avoid this?
I pasted my demo page here: http://pastebin.com/agbHuMx6
Kind regards,
Stephan
@Stephan – glad to hear you got it working. Unfortunately I wasn’t able to look at your demo page because the pastebin was marked as Private. The problem sounds like it might be an issue with the page setup and jQuery Mobile thinking that there is another page or content to swipe to.
@jbx – Hey! I went ahead and added functionality that adds a class to the quizLevel element when the user completes the quiz. You should be able to target the class in CSS and set background images appropriately.
You can get the update at: https://github.com/QuickenLoans/SlickQuiz
The second item – sharing buttons – you could simply put within your “results” copy, or outside of the quiz. I’m guessing you’d like to have the score incorporated into the messaging though, in which case I’d look at the completeQuiz method where you’ll have access to the score and level variables.
Hi Julie,
sorry that you couldn’t view my pastebin. I changed the the viewing property now, so please try again ;-) http://pastebin.com/agbHuMx6.
In the meantime I figured out the reason for the swipe-problem. It’s the CSS-configuration for the body-tag. The width given there makes no sense for a mobile screen. As soon as I remove it, it doesn’t swipe any more.
The plugin is very cool, I like it very much! You’ve done a very good job!
Best regards
Stephan
@Stephan – Glad to hear you got it working! Thanks for the feedback! I’d love to see your implementation in action when it’s ready. Cheers!
How do you put the quiz on the page?
@Barbara Davis – Check out the readme section of the github page:
https://github.com/QuickenLoans/SlickQuiz
You can also checkout the code for the demo page at:
https://github.com/QuickenLoans/SlickQuiz/blob/master/index.html
However, it looks like your linking to a WordPress site, in which case you should just install the SlickQuiz WordPress plugin: http://wordpress.org/extend/plugins/slickquiz/
hi julie
can i put audio in each question, thanks
Hi @aries – I don’t see why not. You should be able to put any sort of HTML within the Q&A copy.
Hi Julie – this is awesome. I’m using JQuery & JQuery Mobile, but never looked at JQuery plugin code before, and yours is a great place to start.
Any plans to put hooks in there for passing the final score to a PHP, where it could be added to a DB table? I’d be passing in the user name as well as the key. Any suggestions on where the best place would be to call the AJAX function from, in your plugin?
Cheers, and thanks for sharing!!
Fred
Hi @Fred Lunau – thanks for trying it out, it’s great to hear that people are like the plugin!
While I don’t have plans to add that kind of functionality, as it’d be so customized to each website, I can suggest the best place to make the AJAX call – take a look at the
completeQuiz
method. It’s at that point that the score and ranking are calculated.Hope that get’s you started!
Is there a way to bypass the “Get Started” button, so that when the page loads, you see the first question?
Thanks!
@DAZ – There isn’t an option to enable that right now, but you could accomplish it by modifying a single line in the slickQuiz.js file.
Change slickQuiz.js line 149 from:
$(triggers.starter).fadeIn(500);
to:
plugin.method.startQuiz(triggers.starter);
Hello Julie,
Great work! I love it :)
Just wanted to know if there is a fast way for skipping the check my answer and jump immediately to the next question, in a way you will have a summary just at the end. It would work great for a “yes” or “no” quiz.
thanks :)
Hi Julie.
Very easy implementation! Thanks for that!
I am just wondering how can we make the answers a Required field? So the user can not proceed unless if he/she ticks one of the answers.
I was thinking the following: if the user doesn’t tick one of the answers and try to proceed, a simple message comes up asking the user to choose one of the answers available.
What do you think?
Thanks.
@Jad H – Thanks for your comment! Currently, there isn’t a way to skip the answer checks, however this has been a feature that many people have been asking for. So I hope to get this added within the next few weeks. Stay tuned.
@Antonio – You’re in luck! That feature currently exists via the
disableNext
option. If you pass that in astrue
, you should get the result you’re looking for. Glad to hear you found SlickQuiz easy to work with!https://github.com/quickenloans/slickquiz
@Richard Wiggins, @Jad H – You both requested a way to bypass the correct / incorrect response messaging. Well, your wish has come true! I just pushed updates to do exactly this, get the changes at:
https://github.com/QuickenLoans/SlickQuiz
New Options:
completionResponseMessaging
(Boolean) – Hides all correct / incorrect response messages until the quiz is completed (nextQuestion button replaces checkAnswer button), defaults to falsedisableResponseMessaging
(Boolean) – Hides all correct / incorrect response messages (nextQuestion button replaces checkAnswer button), defaults to falseHi Julie,
I love your quiz plugin. I used it to put up a quiz on my site. I have two questions.
1) Can you give me any hint as to what to look for in my CSS to change the color of the buttons you click to go from one page to the next? (ie, ‘Start’ button, ‘Next’ Button). I figured out how to change the color of the word on the button, but I need to change the color of the button itself, and I haven’t been able to find that.
2) The button you click to answer a question always shows up above the answer, whereas I think it should be to the left of the answer. What can I do to fix this?
@Chiwah – Thanks for trying it out! I checked it out and your quiz looks great! Very informative, too!
1) You can target all the buttons in the quiz using the following selector:
.slickQuizWrapper .button {background-color: #eee;}
Add that to the bottom of your CSS with the
background-color
property set to override the default styling.2) To get the button to display next to the answer text, you can add the following to the bottom of your stylesheet:
.slickQuizWrapper label {display: inline;}
Hope that does it for you!
Thanks for your quick reply, Julie! Awesome!
I think my question might have sounded like I might be a tiny bit techie, but I am not. I sent your reply on to my tech guy and will let you know how it works out.
And thanks for the compliment on the quiz I put up on PetWrites.com! I love sneaking in a little education via this entertaining quiz format. I think I am going to put up a quiz for each pet category on the site. What fun!
I can’t get the quiz to display on my page
http://www.howyoupray.com/wordpress/what-we-offer/discover/