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 the software but I can’t get the “user name” label text to work even with the “save user scores” set to YES. What am I doing wrong?
@Bob Z – Do you have a demo page I could look at? I’ll need to see the problem in action. It sounds like there is likely another plugin or JavaScript error blocking SlickQuiz from saving.
Julie,
Thanks for your quick response. i got the “user name” function working and the entire page seems to be working correctly. The only question I have left is “where are the user scores saved”?
Regards,
Bob
@Bob Z – If you go to the SlickQuiz admin page, the second to last table column contains a icon / link to the scores for that quiz.
Julie
Thanks for your help. Your quiz is operating as advertized. Great job – they should all be done this well.
Regards,
Bob Z
Hi Julie,
I’m afraid I’m having a couple of issues with Slickquiz with JQM.
The quiz seems to work but isn’t giving the correct answers. A link to a test quiz is:
http://www.imagepoetica.co.uk/Learning/Quizzes/contraception_quiz.html
The correct answer for the 1st two questions is #3. I noticed that by removing the link to the jquery mobile .js file the quiz works (but obviously the rest of the page doesn’t).
Am I doing some thing wrong?
Thanks in advance
Gareth
@Gareth Franklin – Try replacing your slickQuiz.js file with the newest version:
https://github.com/QuickenLoans/SlickQuiz/blob/master/js/slickQuiz.js
I included a hack for JQM sites a while ago, but then made some changes that might have rendered the hack useless / broken. Let me know if the newest version fixes it for you!
Julie,
You total legend. New code worked perfectly.
Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.
Cheers
Gareth
There are a number of things not working correctly. Mainly the page will not load even though the directions were followed. I cannot get more then one question to post at a time. It also will not show the correct results when I run the quiz in the admin section. I am using WordPress 3.6.
@Bernard – Do you have a demo page with a broken quiz that I could look at? I’ll need to actually see what’s going on in order to help. It’s likely a conflict with another plugin or the theme.
Here is the page … this is all it shows. http://belight3.com/dietary-laws/
@Bernard – Can you take a look at the footer template in your theme and make sure the following method is present right above the closing
</body>
tag:<?php wp_footer(); ?>
Okay … that fixed it.
@Bernard – Glad to hear that did it! Unfortunately, the
wp_footer()
method is an often forgotten theme inclusion that is required for many plugins to work.Saving user scores, entering a persons name, and more then one questions displayed are not working.
@Bernard – I just tested the quiz on your homepage and I can see the request going through to the backend to save the scores. The username is attached and the data seems to be going through just fine. In the main quiz list in the admin interface, click on the icon under the “Scores” column for that quiz and you should see the listing of submitted scores there.
As for the “Number of questions to display?” option – that should probably be renamed. What it’s doing is selecting that number of questions from your entire set to present to the user – not all at once, but one after another. So, for example, a lot of people have been creating quizzes with 50 questions but only want to present the user with a random 10. So, they’ll set that option to 10 and enable random sorting. Sorry if that wasn’t clear. At this time, there is no way to display multiple questions at once. I do have an issue setup to possibly one day add that feature: https://github.com/QuickenLoans/SlickQuiz-WordPress/issues/17
Okay then it is working fine. :)
Hi Julie,
I love this quiz script!
How exactly can I disable the completionResponseMessaging? As per this commit?
What steps must I take?
Thanks,
Jen
PS: my quiz is here: http://www.concept-academy.co.il/lnd/mob/quiz.html
I’m making a mobile version, which I’ll be happy to send you on Github when finished, if you’re interested.
@jen – Can you tell me a bit more specifically what it is you’re trying to accomplish? The
completionResponseMessaging
option is disabled by default.Sure: just want to get the score at the end, and go from one question to the next, without each answer being ‘graded’ at every step.
There seems to be a bug with the scoring here: http://www.concept-academy.co.il/lnd/mob/quiz.html
At first I cloned the Git Head repo, and edited that. This made every answer wrong, even the ones set to true, got a wrong grade when running the quiz in index.html
Then, I replaced the slickQuiz.js file, as you posted here: http://www.jewlofthelotus.com/2011/12/23/slickquiz-jquery-plugin-now-on-github/comment-page-6/#comment-2867, but
Every answer now receives a “pass”, no matter which one is chosen.
Did I miss something when editing?
@jen To disable the display of correct/incorrect messaging between questions, you have two options:
completionResponseMessaging
ordisableResponseMessaging
.completionResponseMessaging
will hold all correct/incorrect messaging until the final quiz score is displayed at the end. So at the end, you’ll get your score, rank, result message, and then each question with the answer selected and the correct/incorrect message.disableResponseMessaging
will not display any correct/incorrect messaging during the quiz or after. This option essentially eliminates the need to explain to your users why they got questions right or wrong.To enable these options, you’d modify your
master.js
file to look something like:$(function () {
$('#slickQuiz').slickQuiz({
completionResponseMessaging: true
});
});
In regards to the scoring issue you mentioned, I just went through the quiz on your page and got the expected correct/incorrect response for each question. Are you still having issues with it?
Hi Julie,
I have two questions for you. The first relates to the quiz not appearing properly in IE. I didn’t do anything with it since it was last working, other than your upgrade that I can find. It is working in Firefox. Is there a compatibility issue I’m missing?
Second, I’d like to make the box around the person’s name more apparent. I can’t remember where to access the code to do that. Can you point me in the right direction?
@David MairIEIR – Could you describe what’s happening in IE? Is it working at all or does it just not look right? Feel free to send me a screenshot if it’s purely a styling issue.
For your second item, are you referring to the input the user can enter their name in? If so, you could add the following selector to your theme’s
styles.css
and customize the box via CSS:.slickQuizWrapper .nameLabel input {}
Thanks Julie. I was able to handle the name box. The IE issue is that the quiz will not work at all. The Name box does not appear.
http://soterhealth.com/archives/affordable-care-act-quiz/
@David Mair – I bet you’re using a version of IE that is less than IE9, right? The issue is that you’re using the jquery-updater plugin which is pulling in version 2.0.3 of jQuery – a version that is not compatible with IE6/7/8. jQuery dropped support of IE6/7/8 with their release of jQuery 2.0. So if you require support for those older IE browsers, you’ll need to load a version of jQuery prior to 2.0.
Hey Julie. I love the plugin! It’s clean and simple… but evidently not simple enough for me. Let me explain; I’m creating a jQuery Mobile PhoneGap app that will include multiple quizzes. The problem is, It’s not clear to me how I can create more than one quiz. Do I set them all up within the slickQuiz-config.js file or can I create separate files? Can I use .json files to contain my keys and values? If so, what are the steps for initializing these?
Also, there is a conflict with jQuery Mobile and SlickQuiz. The correct answers are returned incorrect when the jQuery Mobile js file is included, but works fine when it’s removed. I have the most up-to-date files from GitHub, is there something else I’m missing? Here’s a link to what I’ve done so far: http://www.fortgordon.com/FYI/AFTB-ios-project/www/acronyms-quiz.html
I’m sorry, I’m still very new to javascript :\
Hi @Nate! There are a few ways you could go about setting up multiple quizzes. I’ve got a few gists that might give you some ideas. The first two show you how to pull the JSON object directly into the plugin on initialization – these would be good options if you plan on having multiple quizzes on a single page, but they’d work for single quiz pages just fine as well.
https://gist.github.com/jewlofthelotus/5624959 – This will show you how to place the quiz config JSON directly into the plugin options.
https://gist.github.com/jewlofthelotus/5627944 – Will show you how to use getJSON to pull the quiz config object from a file directly into the options
The method you’ve setup would work well too, since you’re naming your JSON object uniquely and referring to it in the quiz options. You could do the same for any additional quizzes.
As for the jQuery Mobile conflict, it looks like you’re using an older version of the SlickQuiz library. Try replacing your version with this one and let me know how it works: https://raw.github.com/QuickenLoans/SlickQuiz/master/js/slickQuiz.js
Thanks for the links! They were very helpful.
I have one more question: I saw in an earlier comment that the WordPress Plugin allows you to save scores (at least that was my understanding). Is this feature available in the jQuery Plugin? Basically for each of my tests, I want to include an icon that either indicates a complete or incomplete test based on the test score (0%-79%=incomplete and 80%-100%=complete). Is this an easy function to integrate in this plugin?
Again, sorry for my noobness in JavaScript. I’m sure there’s an easy way to figure this out, but I would really appreciate some direction [staring blankly at my code].
Hey @Nate – glad I could be of some help. RIght now, there isn’t a way to save scores with the jQuery plugin. Doing so would require either backend integration (a database, backend logic; plus, maybe AJAX) or possibly something like localStorage to keep track of progress, answers, scores, etc. So it’s entirely doable, but every implementation will likely be unique / personal preference to some degree. I know that answer probably doesn’t help too much…
That’s okay, it helps point me in the right direction. I’ll look more into the local storage options. Since this’ll be a PhoneGap app, I think local storage would be the best route. Just wanted to be sure I wasn’t making things harder on myself if the functionality already existed in the plugin. Thanks for the quick response!
@Nate – Good luck! Let me know what you come up with!
Thanks, and I’d be happy to let you know when I finally conqueror all these obstacles. Working with your plugin has been a great learning experience.
The newest problem I’m running into is that it seems like the jQuery mobile styles are still causing issues even with the updated SlickQuiz Library. I’m able to apply the jqm styles to all the dynamically inserted content, which is great because the touch-friendly radio buttons are really what I need for this mobile app, but when the jqm styles are applied, its not able to recognize the correct answer again. I’m assuming this is due to the code reformatting that jqm is causing, but I’m not sure how to remedy this situation. I’m hoping this’ll be an easy question for you to answer. Sorry if I’m being a bother :\
If you’d like to check out what it looks like thus far, here’s the link:
http://www.fortgordon.com/FYI/AFTB-ios-project/www/acronyms-quiz.html
The correct answer for question 1 is “Army Emergency Relief”.
@Nate – Sorry for taking so long to respond, it’s been a busy week! And thanks for sending over so much detail. It does sound like JQM’s DOM manipulation is likely what’s causing the issue – I’ve had this happen in the past, but thought I resolved it. I tried to check out your link this morning but found the page down. If you can put that back up, I can take a look at it and try to find the problem.
Sorry about that. I was reformatting some of the pages. Here’s the new link:
http://www.fortgordon.com/FYI/AFTB-ios-project/www/pages/l1t2p4_quiz.htm
Hi @Nate – I checked out your link and didn’t have any trouble with the quiz. I got the answers to return correct or incorrect as expected. Are you still having the issue? Also, if so, what browser are you using?
Sorry, I guess I should have sent links to both situations. Here it is with the JQM styles applied (Basically, I moved the jquery.mobile.js file right before the closing body tag):
http://www.fortgordon.com/FYI/AFTB-ios-project/www/pages/l1t2p4_quiz2.htm
and here it is again where the dynamically added styles are not working:
http://www.fortgordon.com/FYI/AFTB-ios-project/www/pages/l1t2p4_quiz.htm
As you can see, the first link has the styling that I want, but the functionality isn’t working correctly.
@Nate – It’s definitely an issue with JQM adding new elements and content – specifically with the
that gets inserted after the answer text.<span class="ui-btn-inner">
<span class="ui-btn-text">Army Emergency Relief</span>
<span class="ui-icon ui-icon-radio-on ui-icon-shadow"> </span>
</span>
If you need to get this working, the easiest / fastest way would be to modifiy the following line in slickQuiz.js from:
https://github.com/QuickenLoans/SlickQuiz/blob/master/js/slickQuiz.js#L302
var inputValue = $(this).next('label').text();
to
var inputValue = $(this).next('label ui-btn-text').text();
I have not tested this, but I’m pretty sure it should work. Let me know how it goes!
Sweet! That’s what I needed :)
It still wasn’t retrieving the information correctly with the added
ui-btn-text
, so I ran a function to remove the space inspan.ui-icon
:var selectedAnswers = [];
answerInputs.each( function() {
$('span.ui-icon').text("");
var inputValue = $(this).next("label").text();
selectedAnswers.push(inputValue);
});
And BAM! Problem Solved. You Rock! Thanks for the help :)
I am using jQuery mobile and I have a menu with several buttons that go to different html pages. What happens is that when I give to open the page questionnaire that will bare me but I did not load the questions. If the product fee if you load and run questions page also works individually. That problem I can have?
Anyone have an application completed and could send a ejmeplo of how it works on several pages?
Thanks in advance
Hi There, Love the quiz. I build all my sites in MODX don’t suppose you plan on doing the plugin for that CMS?
If not any idea how I can impliment your quiz so it send the results to my client?
Thanks
R
@Nate – glad to hear it!
@jose luis – If you have a demo page setup where the problem is happening, I could take a look and let you know if I see anything wrong…
@Ross Williams – Thanks for checking out the plugin. Unfortunately, I do not have any plans for a MODX plugin – but if you want to try rolling your own you should checkout the WordPress version of the plugin which includes an admin interface for creating and saving quizzes: https://github.com/QuickenLoans/SlickQuiz-WordPress
Hi,
I installed the plugin in a wordpress multisite but the plugin appears only on the main site :(
What could I do please ?
Thank you.
@oli – Hello and thanks for checking out SlickQuiz. I had another WP user writeup a bit about how to get it working multisite, you can find that here: http://wordpress.org/support/topic/multisite-support-38
I’ve not tried to get multisite support working myself, but if you run into any trouble let me know and I’ll see what I can do. Cheers!
After testing almost all the quiz plugins available online, I stick to SlickQuiz jQuery Plugin as it totally fulfills my requirement. It is great and simple to use. But I have a small issue please help me out to solve it.
The start button is always enable even when the user do not put his or her name in name field before starting the quiz. Although it is appeared as disabled, but on clicking it without filling name field the quiz is started. I am really not able to solve the problem. Please help me
@Sibasish Ghosh – Thanks for your awesome comment! So glad it’s meeting your needs so well!
Can you shoot me a link to an example where you’re seeing the issue with the start button? Also, let me know which browser you’re using!
Thanks for pointing this out!
@Julie
Thank you for your reply, however, I already read this article: http://wordpress.org/support/topic/multisite-support-38 :)
The problem is that I tried to activate the plugin through network or separately but each time, it appears only on main site. My multisite wordpress is in subfolder mode and not subdomain (don’t know if it helps). The wordpress version is 3.6.
Thank you again for your help.
The link where I get the problem is http://www.mcq.electrical4u.com/ and I am using Firefox. Waiting for reply
@Julie:
Well, a friend tested the plugin on WordPress 3.6 and it appears for every sub sites. So I guess it’s because i’m in 3.6.1… or because of my HTACCESS which could get something wrong ?
Sorry, I ‘ve just tested with another theme ant it appears so the problem comes from my theme :(
Thank you anyway :)