Developer's Guide:
Overview: This page describes the jQuizMe's arguments. jQuizMe( quiz, options, lang );
You can view the source for the demos here.
Note: jQuizMe only needs a quiz to run.
Quiz :
jQuizMe( quiz, options, lang );
A quiz is just an array of problems with a quiz type attached to it.
A problem is an object with 4 possible properties.
| Property | Type | Description |
| ans | HTML Array of HTML | Answer. If an array, then the answer has multiple answers. |
| ansInfo | HTML | Provides information for the question |
| ansSel | HTML Array of HTML | Answer choice selection. Used with true or false, and multiple choice quiz types |
| ques | HTML | Question |
Note: All problems must have the ques and ans property.
Also, all properties can be string, numbers or html as values.
So here is a simple problem.
{ ques : "2 + 2", ans : "4" } // 2 + 2 = 4
And we can turn it into a quiz, without a quiz type, by placing it into an array.
var basicQuiz = [
{ ques : "2 + 2", ans : "4" } // Only has one question.
];Quiz Type:
| Short Name | Full Name | Description |
| flash | flashCard | A basic flash card game. Questions are shown, then answers. |
| fill | fillInTheBlank | Fill in the blank using <input type=text/> tags. |
| multi | multipleChoice | Multiple choice quiz using the <select><option> tags. |
| multiList | multipleChoiceOl | Multiple choice quiz using the <ol><li> tags. |
| tf | trueOrFalse | True or false, uses <input type=radio/> tags. |
Note: You can use the short or full name for a quiz type.
Special Note: If tf, multi, or multiList don't have an ansSel property, then the answer selections are formed by using the answers from there own quiz type section.
There are two ways to add a quiz type.
If the quiz is an array, like the previous example , then you must assign the quiz type through the options.
options.quizType = "fill"
The second method is turn the quiz into an object literal, allowing you to have multiple quiz types.
The way to do this is by naming a quiz type as a property of the quiz. Then insert your array of problems into the property.
var basicQuiz = {
"fill": [
{ ques : "2 + 2", ans : "4" } // Only has one question.
]
}; // basicQuiz is now a fill in the blank quiz with one question.Examples:
The following format works if you want a quiz with one quiz type.
var quiz = [
{
ques: "Silver", //question
ans: "Ag", // answer
ansInfo : "<br/>More info <a href='http://www.periodictable.com/Elements/079/index.html'>here</a>" // answer information.
},
{
ques: "Gold.",
ans: "Au",
ansInfo : "Gold-Au <br/>More info <a href='http://www.periodictable.com/Elements/079/index.html'>here</a>"
}
];
var options = {
addToEnd: " has what periodic symbol ?",
quizType: "fill" //Or you can write fillInTheBlank instead of fill.
};
// quiz has 2 problems, while the options has set the quiz type to fill in the blank.
$( "#quizArea" ).jQuizMe( quiz, options );However, if you want a quiz with multiple quiz types, then do the following.
var quizMulti = {
multiList:[
{ ques: "opposite / hypotonus", ans: "sin", ansSel : "tan" },
{ ques: "adjacent / hypotonus", ans: "cos", ansSel: "tan" }
],
tf:[
{ ques: "cos( 30 degrees )", ans: "√3 / 2", ansSel: [ " √2 / 3", "1/4" ] },
{ ques: "sin( 60 degrees )", ans: "√3 / 2", ansSel: [ "1/2", "√2" ] }
],
fill:[
{ ques: "1/tan", ans: "cot" },
{ ques: "1/cos", ans: "sec" }
]
};
// quizMulti has 6 problems with 3 different quiz types.
$( "#quizArea" ).jQuizMe( quizMulti );
Options :
jQuizMe( quiz, options, lang );
| Name | Defaults | Type | Despition |
| addToEnd: | "" | HTML | This is attached to the end of all quesitons that are fill in the blank quiz types. |
| activeClass: | "q-ol-active" | String | .q-ol-list :active class. Used on multiple choice quiz types. |
| allQuizType: | '' | String | Forces all the questions to have this quiz type. |
| allRandom: | true | Boolean | Randomize all the questions in the quiz. |
| animationType: | 0 | Number | There are four basic animate styles; 0 = "show/hide", 1 = "fadeToggle", 2 = "slideToggle", 3 = "weight & height Toggle". Note: IE defaults to 3, due to css rendering bugs. Also, you don't need to set this if animationCode is defined. |
| animationCode: | false | Function | Custom animation code. ex. options.animationCode = function( el, on, spd ){ el[ ( on ) ? "show" : "hide" ]( spd );} |
| animateSpeed: | "normal" | String Number | The animation speed. Possible values are "fast" "slow" "normal" or a number. |
| blockCheck: | true | Boolean | Blocks the check-button until the user tries to answer. |
| disableRestart: | false | Boolean | Hide the restart button on game over. |
| disableDelete: | false | Boolean | Hide the delete button on game over. |
| help: | 'None' | HTML | Provide help information during the quiz. |
| hoverClass: | "q-ol-hover" | String | .q-ol-list :hover class. Used on multiple choice quiz types. |
| intro: | '' | HTML | Provide a introduction before the quiz starts. |
| multiLen : | 3 | Number | The number of answer choices for a multiple choice quiz type. |
| numOfQuizQues: | 0 | Number | Set the questions between 1 and the total questions. If 0, defaults to the total questions length. |
| random: | true | Boolean | Randomizes all the questions in each quiz type. But maintains the order of the quiz types. |
| review: | true | Boolean | Enables review of questions during gameOver. |
| showAns: | true | Boolean | Show the answers after each question. |
| showAnsInfo: | true | Boolean | If provided, show information about the answer, after each question. Note: ansInfo is property for answer information. |
| showWrongAns: | false | Boolean | Show the user's wrong answer after each wrong question. |
| statusUpdate: | function(){} | Function | Sends a status Update to the function assigned. The arguments are ( quit:Bool, statsCopy:object, quitFunc:function, nextFunc:function ) More Info in wiki |
| quizType: | "fillInTheBlank" | String | Sets the quiz type. Note: This only works on if the quiz is an array. |
| title: | 'jQuizMe' | HTML | The title of the quiz. |
Note: HTML means the value is a string but you can put html in it.
Example:
var quiz = {
multi:[
{ ques: "Which is not a javascript keyword.", ans:"local", ansSel:[ "new", "delete" ]}
]
};
var options = {
showAns: false,
review: false
};
$( "#quizArea" ).jQuizMe( quiz, options );
Lang :
jQuizMe( quiz, options, lang );
This following is the default language settings.
_lang = {
ans:{ // _lang.ans are shown during the display of .q-result, the answer result.
corrAns: "Correct answer(s):",
praise: 'Great Job. Right!',
whyAns: "Info:",
yourAns: "Your Answer:"
},
btn:{ // [ "text", "title" ]
begin: [ "Begin Quiz" ],
check: [ "Check" ],
del: [ "Delete", "Delete quiz" ],
help: [ "Help", 'Click for help'],
next: [ "Next" ],
restart: [ "Restart", "Restart quit over" ],
details: [ "Details" ],
review: [ "Review" ],
showOnlyMissed: [ "", "Click to show only missed questions." ],
quit: [ "Quit", "Quit quiz" ],
quitNo: [ "->", "Back" ],
quitYes: [ '', "Yes" ]
},
err:{
badQType: "Invalid quiz type.",
badKey: " is an invalid key value.",
error: "Error",
noQType: "No quizTypes.",
noQues: "Quiz has no questions.",
notArr: "Must be an array.",
notObj: "Invalid quiz data structure. Must be an array or object."
},
stats:{
right: "Right",
rate: "Rate",
score: "Score",
wrong: "Wrong",
total: "Total",
tried: "Tried"
},
quiz:{
tfFalse: "False",
tfTrue: "True"
}
}Example:
The following changes the praise for a right answer to "Excellent!".
var lang = {
ans : {
praise:"Excellent!"
}
};
$( "#quizArea" ).jQuizMe( quiz, { quizType: "multi" }, lang );Please see the language section for translations.
Great job, this is gonna be awesome for second language learning. Thanks!I'll rate it for Well done!
This looks like a really useful plug-in. Can't wait to try it out!!
This looks great. I'm developing a simple e-learning course and I'm considering using it for the quiz sections.
Is it possible to let the user try again if they answer a question incorrectly the first time?
To respond to you questions faster, please leave your comments on my blog.
url: http://bateru.com/news/?p=34
@ garymc82
I think that if a user gets a question wrong the first time, then they should read the answer information provided and review at the end for better learning.
This way they get through the quiz faster and don't feel blocked every time they try to move on.
However, if it is vital that you have that feature, then I'll program it.
Well done. This is a really nice plug-in. It works like a charm.
One suggestion: It is a little confusing to have the "Check" button and the "Next" button be the same. It took me a minute to figure out how to go on to the next question, because I did not realize that the button had changed. Perhaps there could be a separate "Next" button that is dimmed until the "Check" button is clicked.
It would be nice to add option "Show all Questions" like in: http://www.sometests.com/tests/SelfAssessment/AreYouAGoodDriver.html
I absoultly agree with what the visitor mentioned above, it will be great that the quiz can show all questions at the same time
multianswer has a bug
and "check" button can hidden or replace direct by "next" not check by each question until the end
"next" "preview" show each question is better.
how about something close to http://www.aceonline.com.sg/ACE%20Online%20-%20output/quizmaker.html
In multiList type, it's possible to answer by just selection the radio button and not by clicking on the "check" button? How can I hide "quit" and "help" buttons? only with css? Is it possible to hide the questions when showing the result of each one? Many thanks!
Great plugin! i'd love an additional feature to be able to automatically re-queue incorrectly answered questions though.
Wow this looks very promising and an excellent fit for some out-dated javascript code from several years back. Looking forward to testing and implementing.
Is there a way for the 'question' to be an image or include an image?
Thanks in advance!
Guilherme
Use <img src="url"/>
I'm hoping to use this for my online courses. I'm wondering if there's a way to get the plugin to pull questions from a MySQL database. Would that require JSON? Is there a pure PHP solution? Otherwise all questions have to be hardcoded in the JS, right?
Larry responded to my query here: http://snip.it/abcg Thanks!
Is there any way so that for each individual answer option we can provide different ansInfo. I mean for multiple choice questions. There is an answer option 'A' and another 'B'.
If user chooses 'A', we show the text : 'bla bla bla ok' as ansInfo If user chooses 'B', we show the text : 'This this this ok' as ansInfo
user can see the answer if he/she have small knowledge about javascript or press CTRL+u by show view source
I'd also like to generate questions using a MySql? and PHP. That way the user will not be able to see the answers. Does anyone know how to do this?
Is there any way we can show the Highest Score/LeaderBoard? and Identify Winners, using any database. The preferred environment would be .net(aspx). Please tell me how can this be done and using which database ? http://snip.it/abcg .....This link where you answered another questions is dead. Pls help !
How can I saved on the data base with PHP the test results of jquizme?