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.
@Chiwah – Awesome!
@Barbara Davis – It looks like another script on your page is breaking before the SlickQuiz scripts can be executed. The problem is coming from line 6 on the following file:
http://www.howyoupray.com/wordpress/wp-content/themes/theme1526/js/custom.js
You’ll need to get that working or removed before the quiz can work.
I just replaced the custom.js file with the original from the theme and it’s still not displaying. Can you tell me what the error is?
@Barbara Davis – I’m still seeing the exact same error. I think if you go through that file and change all the references that look like:
$("....")
to
jQuery("....")
(replacing the $ with jQuery, not the contents within the parentheses) should fix the issue. Let me know!
They won’t help me with 3rd party plugins. I’ve tried all the other quizzes and yours fits my needs the best
That worked, the only other thing is how do I change the color of the button?
Please look here http://www.howyoupray.com/wordpress/what-we-offer/discover/
It’s still not working properly can you check it?
Hey @Barbara Davis – glad to hear that got it working! I took a look at the quiz and there still seems to be an issue with some of the theme styles conflicting with the quiz.
Specifically, line 2099 of http://www.howyoupray.com/wordpress/wp-content/themes/theme1526/style.css
That selector tells ALL elements with the class of “button” to not display. This is a problem since my plugin uses the class of “button” as well. So if you click the quiz start button, you’ll notice that there isn’t any way to move forward after choosing an answer. That’s because the theme is indiscriminately hiding the buttons.
I took a look around your site to see why this would’ve been set and it looks like it must have been a work around to hide “Read More” links that didn’t yet have a destination. An example of this can be found on http://www.howyoupray.com/wordpress/about/
After each bullet point is a hidden “Read More” button link, that doesn’t have a destination URL. In the code, they look like:
<a href="#" title="More..." class="button" rel="nofollow">More...</a>
Another example of a hidden button I found is on the main blog page, each excerpt listed actually has a “Read More” button at the bottom, but this style setting hides them.
So, the best thing I can suggest is going through the site content and looking for these “read more” / button links – and either giving them destination URLs or removing them entirely if you don’t need them. Once you’ve done that, or if you don’t care if these hidden buttons show up without a destination URL, then just remove line 2099 from the file mentioned above.
As for changing the color of the buttons, at the bottom of the same file, add the following:
.slickQuizWrapper .button {background-color: #XXXXXX}
Where XXXXXX is replaced by the hex-code or color-name of the hue you want to use.
Hope that helps!
ok I’ve changed the style sheet, now the button shows up with no words on it. Please help I’m meeting with my client in a half hour.
@Barbara Davis – it looks like both the
color
(text-color) andbackground-color
CSS attributes got set to the same color. Try changingcolor: maroon;
to something likecolor: white;
.Very good job!!!
ok Hi again. I got my button to work, however is there a way to change the message on the last screen to something other than ranking and score? We don’t want to score or rank our quiz. Everyone is right.
@Barbara Davis – I would suggest using the following CSS to simply hide the text:
.slickQuizWrapper .quizScore, .slickQuizWrapper .quizLevel {display: none;}
Hi Julie,
Is it possible to randomly generate 10 questions out of say 25 questions each time a user takes the test?
Also, are we able to have links in the results area. If the exam result is not satisfactory, a link will appear where people can click to get more resoruces.
Thanks,
@Valencia – Regarding the 2nd question about links, yes, you should be able to use any HTML you like within the quiz text values.
As for the random 10 of 25 questions, that feature isn’t built in but it would be fairly easy to modify the plugin to do that. Your welcome to fork the plugin on github and give it a try.
Thanks for the answers Julie,
When adding a link to the result text, for example Example. the double quote will interfere with the rest of the code. Is there anyway to format the quote so that it can won’t mess up with the code.
It seems putting single quote after href for a link will remedy my problem.
@Valencia – Yes, using single quotes within a double-quoted string will work. Alternatively, you could escape the double quotes by placing a backslash before each one in the double-quoted string.
You can read more about JavaScript strings and escaping quotes here: http://www.w3schools.com/js/js_obj_string.asp
Hi,
First of all, thank you very much for such a wonderful plugin. The plugin just started working right away as I installed it. It had no problems until now. I just visited my test page and noticed that the quiz is not working any more. I don’t know what the problem might be. Also could u pls let me know how to find the error and debug such issues wen such kinda problems comes in the future.
Thanks in advance.
http://www.businessense.in/self-evaluation
sorry I missed the link in the previous comment.
@bharath – Thanks for trying it out! I took a look at your page and it looks like some of the styles you added to the page for the
question
class are preventing the questions from showing up, specifically:opacity: 0;
If you remove that, they should show up, but it looks like you’ll probably need to tweak a few more styles to get it looking really good.
In most browsers you can get to the Developer Console by right-clicking on the page and selecting “Inspect Element.” If that doesn’t work, try googling “developer tools [your browser here]”
Hope that helps!
Hello,
How can you share the results on Facebook? It shares the page but not the result.
Hi @joanna – There is not yet a facebook share button included in the quiz. It’s likely the button your seeing is what’s already included on your page. I do plan to add sharing options in the future, though.
Hi Julie,
This plug in looks great. I am developing a science learning website, and this would be perfect. Is it possible to show all questions at once?
Thanks!
Hi @Carl – thanks for checking out the plugin! Right now there isn’t a way to display all questions at once. That’s not a bad idea, so I might mull it over for a bit and figure out if there is a good way to accomplish that. Stay tuned. In the mean time, hope the one question at a time path works for you.
Hi Julie,
This is a WP site and I really like your plug and loaded a bunch of quizzes– published them- they look fine in the preview but when I drop them into a text widget [slickquiz id=12] it does not show up-
I am using the “Responsive” theme ,do you think their is a conflict or do you hae suggestions?
Hey @James G. Mushen – To use the [slickquiz] shortcode in a Text widget, you’ll need to add the following to your theme (the bottom of index.php should work):
< ?php add_filter( 'widget_text', 'do_shortcode' ); ?>
That will probably fix it, let me know!
Hi Julie,
Thanks for your response. I think It would be very powerful to have ‘show all questions’ button, which would display them vertically. Adversely, a button which shows one question at a time.
Thanks!
Carl
Hi Julie,
Love SlickQuiz. Congratulations on the great plugin.
I’m a WordPress novice and something has me vexed. I’m hoping you may be able to help. I have a quiz set up and it looks great when I publish in as a blog post. However, when I set it up as a page, the text font changes away from my template. The headings are good. I’m not finding where the code needs to change.
Help, please?
Hi Julie,
I love slickquiz. I am using the Responsive theme and had 17 quizzes loaded on the Home Page and the Home Pages bottom widgets, 1,2,3 and everything was grand- then yesterday I noticed that the slickquiz deafaults were loading; “let get started” “your score” your ranking” but none of the actual slick quiz content-
The slickquiz will load/display properly on another page—– any ideas?
The only changes that I can think of are that I updated some plugins— I asked the Responsive Theme support and they don’t know what is stopping the content to load.
Thanks Julie
@James G. Mushen – It looks like your theme probably doesn’t have a method that is needed to add the required scripts to the page.
Take a look at your theme’s footer.php template for the method
wp_footer()
, if you don’t find it there – add the following bit of code to the template before the closing</body>
tag:< ?php /* Always have wp_footer() just before the closing