jewlofthelotus / slickquiz Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin for creating pretty, dynamic quizzes.
Home Page: http://jewlofthelotus.github.com/SlickQuiz
License: MIT License
A jQuery plugin for creating pretty, dynamic quizzes.
Home Page: http://jewlofthelotus.github.com/SlickQuiz
License: MIT License
Hi!
I'd like to track when a user click the last "checkAnswer" to see if the user have successfully answered all questions.
An ID on the last checkAnswer would be awesome.
Is that something you would consider?
Hi Julie, plugin works awesome as far and I require to add a timer and after exceeding that time quiz should completed and shows the result of it? Is it possible now. If I can close the test and show results by any api call, Then I can add the timer and if time completes i will show result page.. Thank you.
How to add timer for quizz? like at the beginning you have 5 minutes to give answers to 15 questions and after pressing start button timer will start countdown
From @crazycoder82
Am I the only one who is having trouble getting multiple quizes to work on the same page? I think there might be some name conflicts when there are multiple quizes on the same page. Quiz 1, Question 1 has the same id as Quiz 2, Question 1 when they are both on the same page, and it's causing some really strange behavior.
Hello! Thanks for putting this plugin out there. I was just wondering if there is an easy way to change the 'Check Answer' action to fire as soon as an option is selected, or if you have any suggestions for immediately evaluating whether the answer is correct/incorrect upon selection.
The basic form accessibility -- linking fields with <label>
elements is covered. I suggest that there are these outstanding issues:
role="button"
for the <a href="">
links;role="form"
and aria-labelledby
on the parent element;** (ARIA) Accessible Rich Internet Applications
Links:
Based on final score / level - show custom result copies.
I want an option in the jquery plugin for "oncompletion" so I can send the score to the PHP file I have set up, I am not using this in WordPress but as a stand alone.
So when I initialize the jQuery plugin I would want to have
$("#div..."). function ("slickquiz"{
...
onFinish: function(final_score){
//my $.post call to php function with the score
}
..
});
Test all the things.
From @hellopablo @abensrhir @Jaace https://github.com/QuickenLoans/SlickQuiz/issues/46
Would be nice to have a public API for events so that we can hook into the plugin easily/cleanly. e.g:
onCompleteQuiz = function() {
// AJAX save the results of the quiz, or something
}
Thanks for the great plugin. I'm confused how to call the plugin methods. How would I go about calling the resetQuiz method?
Thanks
if element present in DOM - pull it into the quiz and use it:
checkAnswerText
nextQuestionText
backButtonText
tryAgainText
if element missing from DOM - feature disabled:
skipStartButton
disableResponseMessaging
throw console.log warnings if any of these deprecated options are present
somehow document these changes and tell users how to get what they want
I have tried this code in demo page but no option works good. Sorry if I made a mistake, hope something went wrong. The options like tryAgain, prevent unanswered, randomSortAnswers, randomSortQuestions, disableResponseMessaging, completionResponseMessaging everything dint worked as expected. Below is the code I emplyed,
var quizJSON = {
"info": {
"name": "Test Your Knowledge!!",
"main": "
Think you're smart enough to be on Jeopardy? Find out with this super crazy knowledge quiz!
",Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.
",That's right! The letter A is the first letter in the alphabet!
",Uhh no. It's the first letter of the alphabet. Did you actually go to kindergarden?
" // no comma hereNice! Your cholestoral level is probably doing alright.
",Hmmm. You might want to reconsider your options.
" // no comma hereBrilliant! You're seriously a genius, (wo)man.
",Not Quite. You're actually on Planet Earth, in The Milky Way, At a computer. But nice try.
" // no comma hereHoly bananas! I didn't actually expect you to know that! Correct!
",Fail. Sorry. You lose. It actually rains approximately 32 inches a year in Michigan.
" // no comma hereGood Job! You must be very observant!
",ERRRR! What planet Earth are you living on?!?
" // no comma hereCurrently, if you have 2+ quizzes on a page and, for example, question 1 of each quiz has radio button answers - selecting an answer in any of the quizzes will clear the selection from the other quiz.
Hi,
I'm using your quiz for a mobile app, and the dynamic content comes up unstyled. I was trying to add the default jQuery mobile styling via:
$(".quizArea").appendTo( ".ui-page" ).trigger( "create" );
but the quiz fails to load afterwards. I managed to get the quiz to load (styled correctly) when I added the line to the slickQuiz.js file in the start() function (line 256), but then the quiz stopped acknowledging correct answers.
Any help would be appreciated! This is for a school project and it's my first foray into jQuery mobile so I'm a little overwhelmed.
Hi, I am trying to implement slickquiz into my android app via phonegap. I have all the js and css placed and called correctly. If I open it in a browser like chome or firefox on my pc it works fine. However, when I open it in the app, it loads fine and goes through each question, but no matter which answer you select it always counts it as the wrong answer. Do you know why this might be?
If we open in chrome "resources ->script->slickquiz_config" we can find all questions with right answers and user can cheat . How can we solve this problem?
http://wordpress.org/support/topic/display-all-questions-not-working?replies=6#post-5462595
As for the ranking one of the quizzes I'm working on has really has 2 rankings. 95%+ you are wonderful and below that you are a failure. So I guess the feature should be the ability to create X ranking levels and have the ability to set the % for each level.
Facebook
Twitter
Email
Pull in what the WP plugin is already doing.
Display BOTH answers/results as you go AND at the end.
Tweak functionality of: completionResponseMessaging
Thanks for this plugin. I just wanna ask is it possible to make modification like "adding extra button called skip question" and by pressing it user can move to next question without giving an answer and at any time or after last question script gives info that user have some questions with no answer, and want to come back and answer them. Is it possible?
thanks in advance!
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….
Please Can i have the code for Timer Option. It can be send to my email [email protected]. Thanks
Is there a setting for having select answers instead of radio ?
From @ramnathv https://github.com/QuickenLoans/SlickQuiz/issues/6
Another idea I had was to extend the feedback option from a mere correct and incorrect to one option for each option. You can easily implement it in the JSON data by adding feedback to every option in addition to option and correct. A little bit of javascript can then display the feedback corresponding to the option chosen.
You will want to retain the current way of doing this.
Hi
Is there a way to add images to a quiz eg. picture of someone and the question would be something like "Who is this person ?"
I am just starting with php , html etc. so if you could at least point me in the right direction I would appreciate it
Regards
Alvin
Sometimes you have 1 answer out of 3 set to true, but you do not want to give a hint that only one answer is true. But with radios you immediately see that only one answer is true and user can only select one input. For this situation we need an option 'force_checkbox'.
Short:
results always in radios.
We need an option to force checkboxes here.
Hi jewlofthelotus,
I'm prepare graduates, your plugin is so cool, so i use it for my project. And my problem is:
Ex: I have 5 question library, i try $('.selector').slickQuiz({json: {Library1}}) and finish that quiz. I want to try Library2, so i try all stuff again but it not working. I must refresh page and put Library2, so it work, and it so stupid. So do you have any solution for this?
Sorry for my english skill. My deadline is so close, help me please! Thanks.
Hi Julie,
Thanks for incorporating my patch for the WordPress quickly last week.
For the JuxtaLearn project (http://juxtalearn.net), I'm interesting in enabling translation of the SlickQuiz user-interface. You can see how I propose enabling internationalization/ localization here - I hope it makes sense. I think its lightweight and doesn't introduce any dependencies,
A few notes:
You'll need to link to a local copy of the modified slickQuiz.js, as I haven't got a copy on a server yet,
Translation doesn't actually occur within slickQuiz.js. See the "_t()" function in slickquiz.js.html above. (You will be able to claim internationalization as a feature, and include an example HTML...;)),
The proposal introduces 4 new option strings,
questionCountText: 'Question %current of %total',
preventUnansweredText: 'You must select at least one answer.',
questionTemplateText: '%count. %text',
scoreTemplateText: '%score / %total',
Through the introduction of the questionTemplateText
string option, I think that you may be able to remove the displayQuestionNumber
boolean option in due course. What do you think?
Obviously, let me know if you have any questions or concerns.
Thank you. Best wishes,
Nick
Thanks again for this pretty quiz plugin! and i wanna ask, is it possible to do like this:
ex:
Hi,
It would be great to have an option to display all available questions in one page.
Thanks for you plugin !
Arnaud.
Hi Jewl,
How can I use JSON for configuration file instead of using slickQuiz-config.js (with variable)?
I create JSON file and give the name slickQuiz.config.js but it didn't work.
This feature addresses two problems:
After reviewing the existing code, this feature seems reasonably straightforward after some minor refactoring of admin.js.
Here is how it could work: In the top right hand corner of each question box add a cute JSON icon. When the icon is clicked all the normal fields get hidden and, in their place, is just one text box containing the JSON representing the question. Above the text box are two new icons: [save] and [abandon]. The user can copy the JSON and place it in an external file or paste in revised JSON from another quiz.
Background: Writing quizzes takes a significant amount of time. For example, it takes me about 6 hours to write a 12 question quiz. A significant portion of that time is spent just navigating between frontend and backend during the process. I would have a significant time savings if I could review and share a JSON document. And the fact that I could pull questions from earlier quizzes for later review would be a bonus time saver.
Not yet sure how to handle correct / incorrect error messaging yet... If they submit and their attempt is wrong - do we have a custom try again message? do they get the incorrect message with a "try again" (back) button? do they get an alert popup? (ew)
http://wordpress.org/support/topic/force-correct-answer?replies=1
Maybe the incorrect message appears below the answers, instead of the current switch out that happens when an answer is false. Then they just have to change their answer and click the button again.
In quizResults we need CSS classes to point out the correct and incorrect answers to the user so he can practice this questions and start the quiz again. The class correctResponse is not enough.
<div class="quizResults">
<ol class="questions">
<li id="question0" class="question correctResponse">
<h3>1. Question</h3>
<ul class="answers">
<li class="correct">
<input>
<label>
</li>
<li class="correct">
<input>
<label>
</li>
<li class="incorrect">
<input>
<label>
</li>
</ul>
</li>
<li id="question1" class="question incorrectResponse">
<h3>2. Question</h3>
<ul class="answers">
<li class="correct">
<input>
<label>
</li>
<li class="incorrect">
<input>
<label>
</li>
<li class="incorrect">
<input>
<label>
</li>
</ul>
</li>
</ol>
</div>
Every list point of ul.answers needs a class correct|incorrect.
btw It would be nice if additionaly to li.response.correctResponse we will have li.response.incorrectResponse. I know it's not necessary but can be handled way more logical while coding your css or additional javascript.
A suggestion from a user who slightly altered the default markup.
[...]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)
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 =)
Suggested change:
var inputValue = $(this).next('label').text();
// to
var inputValue = $(this).siblings('label').text();
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.