jQuizMe, a jQuery plug-in

What this is?

jQuizMe is a webpage quiz generator. You can make the following types of quizzes.
  • Fill In The Blank
  • Flash Cards
  • Multiple Choice (list or options tags)
  • True or False
Author: Larry Battle -> contact
Version: 1.0 - First Release
Cross-broswer: works on IE6+, Opera, Firefox and Safari.

jQuizMe 2 is out --> jQuizMe 2

Demo

Demo4 Code:

Javascript


	var quiz4 = [
		{
		"ques":"How many days are in a leap year?", "ans":"366 days", 
		"ansSel":["365 days", "364 days"] 
		},
		{
		"ques": "Which of these is a browser", "ans":"Flock"
		}
	]; 
	var options = { "quizType": "multiplyChoice", "showWrongAns":true };
	$( "#demo4" ).jQuizMe( quiz4, options);

HTML


	<div id = "demo4"></div>

Download:

Requires:
  • jQuery 1.3.2+ : here ~19KB
  • jQuizMe 1.0 : here .ZIP(css + js) = 6KB (uncompressed 17KB)
    If you want it under 2.5 KB, get rid of the unwanted quiz types and use packer to uncompress.

Example:

Tutorial:

How to make a quiz:
Step 1: A quiz starts out like this.

	var quiz3 = [];
Step 2: Now let's make a blank question. 

	var quiz3 = [ { "ques":"", "ans":""} ];
Step 3: Next, fill the question and answer with information. 

	var quiz3 = [ { "ques":"2+2", "ans":"4"} ];
Step 4: Then to add a new question, add a comma to the end of the question format and repeat the first step. 

	var quiz3 = [ { "ques":"2+2", "ans":"4"}, { "ques":"2+1", "ans":"3"}];
Step 5: Lastly, add your options and you done!
Read the documentation for more information.

Demo3 Code:

Javascript


	var quiz3 = [
		{ "ques":"2+2", "ans":"4"},	// This is a quiz question.
		{ "ques":"2+1", "ans":"3"},	// Another question.
		{ "ques":"0+1", "ans":"1"}	// And another.
	];
	$( "#demo3" ).jQuizMe( quiz3, { "quizType": "trueOrFalse" } );

HTML


	<div id = "demo3"></div>

Documentation: jQuizMe( Quiz-Data, Options );

jQuizMe( Quiz-Data, Options );

Quiz-Data:

The quiz data is an array of objects with the properties of "ques", "ans" and/or "ansSel". Each object is a quiz problem and must have a "ques"(question) and "ans"(answer) property. 

	var quiz = [ { "ques":"", "ans":""} ];  //quiz has one question.
If "ans" is an array, then there are multiple answers to the question.
Example: Demo4.
However, the "ansSel" property is only used with multiple choice quiz types.
Example: Demo2.
Currently, ver 1.0 does not allow for multiple quiz types in a quiz.


jQuizMe( Quiz-Data, Options );

Options:

(The following are the default settings)
  • addToEnding: Adds something to the ending of the questions for Flash Card and Fill In The Blank quizzes. 
    "addToEnding": " = ?"
  • activeClass: Only for Multiple Choice Types of quizzes. 
    "activeClass": "q-ol-active"
  • numOfQuizQues: Number of quiz questions. 
    "numOfQuizQues": 0
  • help: Provides a helping remark when the help button is clicked 
    "help": 'None'
  • hoverClass: Multiple Choice Types of quizzes. 
    "hoverClass": "q-ol-hover"
  • intro: Provides a introduction before the quiz begins. 
    "intro" : ''
  • multiplyChoiceLength: Note: Multiple Choice Types of quizzes. 
    "multiplyChoiceLength" : 3
  • showWrongAns: If true, show the user's wrong answer with corrected. 
    "showWrongAns" : false
  • random: Make the quiz questions in shown in random order. 
    "random": true
  • right: Note: Phrase said on right answers. 
    "right" : 'Great Job. Right!'
  • quizType: The quiz type 
    "quizType" : 'fillInTheBlank'
    Types of quizType:
    • Fill In The Blank: 
       "quizType":"fillInTheBlank"
      Note: The is the default quiz type. Also answer comparison is case insensitive.

    • Flash Cards: 
       "quizType":"flashCard"
      Note: The score is 0 when complete.

    • Multiple choice (Uses option tags): 
       "quizType":"multipleChoice"
      How it works: If the ques has no answer selections, ansSel, are provided, then it generates a select tag with the answer mixed in with random answers. Be aware that the default length is 3. Which means, 2 random answers plus the answer are the option tags.
      However, if there are answer selections, then all of the answer selections and answer will be inserted into the select tag as option tags.

    • Multiple Choice (Uses Order List tags): 
       "quizType":"multipleChoiceOl"
      How it works: Same as the above but instead of select and options tags, ol and li are used.

    • True or False: 
      "quizType":"trueOrFalse"
      How it works: If the question's answer is a Boolean value, true or false, then there is no creation of a Boolean statement, in order to form the problem into a true or false statement.

  • title: The name of the quiz. 
    "title": 'jQuizMe'

FAQs:

Question: How do I change the appearance?
Answer: Modify the jQuizMe.css file.

Question: How do I have multiple quiz types in a quiz?
Answer: Currently, this is not supported.

License:

Dual licensed under the MIT and GPL licenses.
Programmed by Larry Battle 03/06/2009