Self-scoring Quiz Documentation

Contents

• Summary
• Usage
• Reference
• Remarks
• Customization

Quiz without CSS styles Example
Quiz with CSS styles Example

Download this sample

Summary

The Self-scoring Quiz creates a series of questions and possible answers on a page, and provides a simple technique for evaluating the guesses made.

The questions can be rearranged randomly, as well as the answers for each question. You can decide whether to require that the reader must answer all questions before getting a score. The questions and answers can be automatically numbered with numbers, letters, or bullets. Upon scoring, you can reveal, in line with the questions and answers, the correct answer, as well as an explanation for correct or incorrect guesses. Finally, you can display a final evaluation based on a range of possible scores or a percentage or correct scores.

The Self-scoring Quiz is created in javascript with the Quiz object, and with three kinds of child objects: Question, Answer, and Score objects. The Quiz object contains Question and Score objects, and Question objects contain Answer objects.

Please Note:   The quizzes produced by the Self-scoring Quiz are suitable only for entertainment purposes; they are not suitable for any form of official evaluation, even with intensive customization. This is because the identities of the correct answers are sent to the browser's user in the form of javascript code and HTML. There are many ways for even a modestly technically-savvy user to discover the correct answers without guessing, or to circumvent guessing altogether and supply any score he or she wishes.

 

Usage

There is one required file: quiz.js. Include it on your page with a line like this:

	<script src="quiz.js" type="text/javascript"></script>

To use the quiz object, create a new script block that creates a new Quiz object like this:

	<script type="text/javascript">
	var oQuiz = new Quiz();

This script block is not closed, because you will need to create Question objects to add to it, like this:

	var oQ = new Question(); 
	oQ.SetQuestionHTML("What is 2 + 2 ?");
	oQ.SetQuestionType("MC");

This script accomplishes a few things. First, it creates a new Question object. Then it sets the text for the question to "What is 2 + 2 ?". Finally, it sets the question type to a multiple choice question. It does not add the Question to the Quiz yet; that will be done after you add all the Answer objects to the Question object.

You can set other properties for the Question. The Question, when evaluated, can give feedback based on whether the question was answered correctly or not. Set the text of the feedback like this:

	oQ.SetCorrectGuessHTML("Correct.");
	oQ.SetIncorrectGuessHTML("Incorrect.");

The text displayed by the Quiz contains very little built-in formatting. Read the Reference section to see how to apply CSS class styles to a question. Alternately, you can add HTML or CSS formatting with methods that accept HTML string, such as the SetCorrectGuessHTML or SetIncorrectGuessHTML methods.

Next, you will need to add Answer objects to the Question you created, like this:

	var oA = new Answer(); 
	oA.SetAnswerHTML("Five");
	oQ.AddAnswer(oA); 

	oA = new Answer(); 
	oA.SetAnswerHTML("Four");
	oA.SetCorrect(true);
	oQ.AddAnswer(oA);

This adds two Answer objects, each one created with a call to new Answer(). For each Answer, it sets the text to be displayed as a possible answer with the SetAnswerHTML method. Identify the correct answer with a call to SetCorrect, passing the value true as an argument.  Finally, each Answer is added to the Question with the AddAnswer method of the Question object.

Finally, add the Question, complete with its collection of Answers, to the Quiz, with the AddQuestion method of the Quiz, like this:

	oQuiz.AddQuestion(oQ);

Once of you have added all of the Questions to the Quiz, add Score objects so that the Quiz can automatically display an evaluation, based on the raw score or a percentage of the possible points, like this:

	var oS = new Score();
	oS.SetScoreHTML("Score: 0");
	oS.SetMinScore(0);
	oQuiz.AddScore(oS);

	oS = new Score();
	oS.SetScoreHTML("Score: 1");
	oS.SetMinScore(1);
	oQuiz.AddScore(oS);		

This creates two Score objects and adds them to the Quiz object. The text of the Score is set with the SetScoreHTML method, and the minimum number of points that it takes to get that Score is set with the SetMinScore method. Finally, each Score is added to the Quiz with the AddScore method of the Quiz object.

The Quiz is complete and ready to render, like this:

	oQuiz.Render();
	</script>

This displays a quiz on the page, ready for the user to guess the correct answers.

However, the quiz is not yet complete. The Quiz object does not render a button or any other mechanism to automatically evaluate the user's guesses. This is up to you, but it's simple. Add an HTML button element, and set its onclick method to the Quiz's Evaluate method, like this:

	<input onclick="javascript:oQuiz.Evaluate();" 
          type="button" value="Check Answers">

When the user clicks the button labeled "Check Answers", the Quiz object will evaluate the radio buttons and check boxes for the quiz, determining which ones have been checked, and whether they are the correct answers. Each correct guess will get one point. An unanswered question or an incorrect guess gets no points. Immediately below the question, the CorrectGuessHTML or the IncorrectGuessHTML (whichever is appropriate) is displayed. Below all the questions, the proper Score is displayed.

 

Reference

There are four objects for this feature. The Quiz object is the primary object. It contains a collection of Question objects and a collection of Score objects. Each Question object contains a collection of Answer objects. Score objects are used for ranges of points that are awarded for guessing correct Answers.

Quiz object

Properties

The Quiz object has no public properties.

Methods

<STYLE>
.qnumber { WIDTH: 40px; }
</STYLE>

<script type="text/javascript">
oQuiz.SetQuestionNumberCssClass
("qnumber");
</script>

Question object

The Question object supports three types of questions:

• True/False questions allow only two possible Answer objects. The user must guess exactly one Answer.
• Multiple-Choice questions allow as many Answer objects as you want. The user must guess exactly one Answer.
• Multiple-Select questions allow as many Answer objects as you want. The user must guess at least one Answer, but can guess as many Answer objects there are.

Properties

The Question object has no public properties.

Methods

<STYLE>
.anumber { WIDTH: 40px; }
</STYLE>

<script type="text/javascript">
oQuestion.SetAnswerNumberCssClass
("anumber");
</script>

Answer object

Properties

The Answer object has no public properties.

Methods

Score object

A collection of Score objects is used to group ranges of points that can be awarded for a Quiz.

Properties

The Score object has no public properties.

Methods

Remarks

Formatting

The default Quiz will render itself with very little formatting, and will probably space the questions and answers too close together. As a minimum, you will probably want to call the SetQuestionCssClass method to assign the question text to a CSS class with attributes that include the margin-top attribute.

Prevent multiple evaluations

The Evaluate method returns a boolean value that indicates whether the quiz was succesfully evaluated. It returns false if the user needs to answer more questions. If it returns false, then the user has answered all of the questions. If you used a button to initiate the evaluation, then you may want to disable that button, so as to prevent the user from changing her or his guesses, and re-evaluating the quiz. There are two simple ways to do this.

To make the button appear disabled, use a code snippet like this to create the button:

	<input id="btnCheck" onclick="javascript:CheckAnswers();" 
          type="button" value="Check Answers">
	<script type="text/javascript">
	function CheckAnswers()
	{
	if (oQuiz1.Evaluate())
		document.getElementById("btnCheck").disabled = 
         true;
	}
	</script>

To make the button disappear completely, use a code snippet like this to create the button:

	<input id="btnCheck" onclick="javascript:CheckAnswers();" 
          type="button" value="Check Answers">
	<script type="text/javascript">
	function CheckAnswers()
	{
	if (oQuiz1.Evaluate())
		document.getElementById("btnCheck")
         .style.display = "none";
	}
	</script>

Exact points

The Score objects do not automatically reveal the exact points awarded, or the possible points that were calculated, or the percentage. However, those values can easily be retrieved from the Quiz, and then placed inside the Score's HTML, like this:

	<script type="text/javascript">
	...
	... other code to create the Quiz objects
	...
	oScore.SetScoreHTML("Actual score: 
           <span id='actualscore'></span><br>" + 
		"Possible score: <span id='possiblescore'>
            </span><br>" +
		"Percentage: <span id='percentage'></span>");
	...
	... other code to Render the Quiz
	...
	</script>

	<input id="btnCheck" onclick="javascript:CheckAnswers();" 
         type="button" value="Check Answers">

	<script type="text/javascript">
	function CheckAnswers()
	{
	oQuiz.Evaluate();
	document.getElementById("actualscore").innerText = 
         oQuiz.GetAwardedPoints();
	document.getElementById("possiblescore").innerText = 
         oQuiz.GetPossiblePoints();
	document.getElementById("percentage").innerText = 
         oQuiz.GetPercentage();
	}
	</script>
 

Customization

You can achieve a great deal of customization by applying more sophisticated HTML and CSS attributes to the ...HTML and ...CssClass methods. Experiment.

There are no methods provided to determine which guess the user made if the guess was incorrect. This could be useful if you want to customize the Score messages to provide specific guidance based on the actual (incorrect) guess made. The function Quiz_HasGuess has code that iterates through the HTML elements that correspond to the Answer objects for a Question. The checked property for the HTML elements indicates whether the user guessed that Answer.

The function Quiz_RenderAnswer writes out the <input> elements for the Answers for each question. If you want to handle the onclick event for the radio button and checkbox controls displayed for each Answer, the Quiz_RenderAnswer function is the right place to do it.


^ Back to top