Updated Oct 06, 2009 by larry.ba...@gmail.com

HowToUse

Developer's Guide:

Overview: This page describes the jQuizMe's arguments. jQuizMe( quiz, options, lang );

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 );

Demo 1

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: "&#8730;3 / 2", ansSel: [ " &#8730;2 / 3", "1/4" ] },
		{ ques: "sin( 60 degrees )", ans: "&#8730;3 / 2", ansSel: [ "1/2", "&#8730;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 );

Demo 4

Please see the language section for translations.

Comment by Nickisurfer, Jul 06, 2009

Great job, this is gonna be awesome for second language learning. Thanks!I'll rate it for Well done!

Comment by saifuddin.merchant, Jul 06, 2009

This looks like a really useful plug-in. Can't wait to try it out!!

Comment by garymc82, Jul 14, 2009

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?

Comment by larry.ba...@gmail.com, Jul 16, 2009

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.

Comment by kurt.meredith, Jan 21, 2010

Well done. This is a really nice plug-in. It works like a charm.

Comment by kurt.meredith, Jan 21, 2010

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.

Comment by nbchip, Feb 02, 2010

It would be nice to add option "Show all Questions" like in: http://www.sometests.com/tests/SelfAssessment/AreYouAGoodDriver.html

► Sign in to add a comment

Developer's Guide:

Quiz :

Quiz Type:

Examples:

Demo 1

Demo 2

Options :

Example:

Demo 3

Lang :

Example:

Demo 4

To respond to you questions faster, please leave your comments on my blog.