Javascript quiz maker

Demo

Overview

This script enables you to create quiz forms on your web nice and easily.

Licensing

This script is free and licensed under LGPL. Commercial licenses are also available.

Download

• quiz-maker.zip

Files in package:

• js/dg-quiz-maker.js - Main javascript file for the widget
• js/external/* - Mootools library used by the script

Demo

Configuration

Include javascript files

First of all, you'll need to include the two javascript files mootools-1.2.4-core-yc.js and dg-quiz-maker.js

Example:

<script src="/scripts/quiz-maker/js/external/mootools-1.2.4-core-yc.js"></script>
<script src="/scripts/quiz-maker/js/dg-quiz-maker.js"></script>

Configure the DG.QuizMaker object

The code below shows you an example on how to configure the quiz maker

var questions = [
   {
     label : 'What is the capital of Norway ?',
     options : ['Stockholm', 'Oslo', 'Copenhagen'],
     answer : ['Oslo']
     forceAnswer : true
   },
   {
     label : 'World champion, WC South Africa 2010 ?',
     options : ['Brazil', 'Netherlands', 'Spain'],
     answer : ['Spain']
   },
   {
     label : 'Prime minister(s) of England during World War II ?',
     options : ['Clement Attlee', 'Sir Winston Churchill', 'Neville Chamberlain', 'Sir Anthony Eden'],
     answer : [1,2] // refers to the second and third option
   }
,
   {
     label : 'United States has how many states',
     options : ['49','50','51'],
     answer : ['50']
   },
   {
     label : 'A crocodile is a member of which family ?',
     options : ['amphibian','reptile', 'vermin'],
     answer : ['reptile']
   },
   {
     label: 'In which year did Atlanta(US) arrange the summer olympics ?',
     options : ['1992','1996','2000'],
     answer :['1996']
   }
]

function showAnswerAlert() {
   $('error').set('html', 'You have to answer before you continue to the next question');
}
function clearErrorBox() {
   $('error').set('html','');
}

var quizMaker = new DG.QuizMaker({
   questions : questions,
   el : 'questions',
   listeners : {
   'finish' : showScore,
   'missinganswer' : showAnswerAlert,
   'sendanswer' : clearErrorBox
}
});

The question object

I have created a "questions" array. Each element in the array represents a question.

• label representes the label for this question
• options represents the different available answering options
• answer represents the correct answers. Answers can be either a text equal to the correct option, or the index of the correct answer, example in the code above: prime minister of england. Correct answers are the second and third option, i.e. index 1 and 2
• forceAnswer can be used to force an answer on a specific question. forceAnswer can also be added directly to the constructor if you want to force an answer to all questions
• forceCorrectAnswer can be used to force a correct answer on a specific question. forceCorrectAnswer can also be added directly to the constructor if you want to force correct answers to all questions

Constructor parameters

The constructor accepts the following parameters:

• questions: A reference to the question array.
• el: The element on your html page(example a <div>) where the questions will be displayed
• listeners: List of functions to call when specific events occurs. See list below for valid events

Events

The script implements these events:

• finished: Fires when the quiz is finished. Example: in the code above, I have specified that a function called "showScore" should be called when the quiz is finished

• sendanswer: Fires when the user clicks the answer button.
• missinganswer: Fires when the user clicks the answer button and answer is missing.
• wrongAnswer: Fires when config option forceCorrectAnswer is set to true and wrong answer has been sent.

Public methods

There is one very important method in this script, and that is the getScore() method.

This method should be called after the user has finished the quiz. It will return an object like this:

{
  numCorrectAnswers : 4
  numQuestions : 6
  percentageCorrectAnswers : 67
  incorrectAnswers : [
    {
      questionNumber : 1
      label : What is the capital of Norway
      correctAnswer : Oslo
      userAnswer : Copenhagen
  },
    {
      questionNumber : 3
      label : Prime minister of england during WWII
      correctAnswer : Churchill, Chamberlain
      userAnswer : Churchill, Eden
  }
]
}

You can use this object to show your custom user response for the quiz. Take a look at the demo for an example of how this has been implemented

Comments

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com