My favorites | Sign in
Logo
Project hosting will be READ-ONLY Wednesday at 8am PST due to brief network maintenance.
                
Search
for
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 );

Demo 2


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

Demo 3


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
Hosted by Google Code