jQuizMe Example: Simple Math Quiz

Here’s an example of jQuizMe.
Goal: Make a quiz for Addition, Subtraction and Multiplication for two digit numbers.

Steps:

Make a random number generator.
Make a function to form a question and answers.
Form the quiz.
Call jQuizMe

Step 1:
I wrote a random number generator in javascript here.

var getRandomNum = function( i, decLen ){
	var powOf10s = Math.pow( 10, decLen || 0 );
	return i ?  Math.floor( powOf10s * Math.random() * i ) / powOf10s : Math.random();
};

Or.. you could just use Math.floor( Math.random() * number ).

Step 2 & 3: (Due to time constraints I combined step 2 and 3.)

var link = "http://bateru.com/news/2011/04/learn-sig-figs-in-no-time/";
var ops = operations = [ " + ", " - ", " * ", " / " ];
var precision = 2;

var arrOfRandomNum = function( arrLength, max, decLen ){
	if( arrLength < 0 ){ return false; }
	var arr = [], i = arrLength;
	while( i-- ){
		arr[ i ] = getRandomNum( max, decLen );
	}
	return arr;
};
var makeQuiz = function(){
	var quiz = { "fill":[] };
	var question = '', nums = [];
	var i = questionLength = 10;
	while( i-- ){
		nums = arrOfRandomNum( 2, 19 );
		question = nums.join( ops[ getRandomNum( ops.length ) ] );
		quiz.fill.push({
			ques: question,
			ans: eval( question ).toPrecision(precision)
		});
	}
	return quiz;
}

Step 4:

$( "#quiz" ).jQuizMe( makeQuiz(), {
	intro: ops.join(',') + " quiz.
Note: Your answer must have " + precision + " sig figs."
});

Here's the working demo.

Larry Battle

I love to program, and discover new tech. Check out my stackoverflow and github accounts.

Next Code of the Day: PHP, get the current directory of a page. »

Previous « Code of the day: MS-DOS, Open Explorer from Current Path

View Comments

hi Larry,

I tried your script which works but has a problem : when restarted it doesn't create new random numbers, but instead, produces a randomized reshuffle of the same initial array of numbers.

This is the same script with 2 simplified variations; you can use either one, the problem is the same; to have a new series you have to reload the page.

		
			var link = "http://bateru.com/news/2011/04/learn-sig-figs-in-no-time/";
			var ops = operations = [ " + ", " - ", " * ", " / " ];
			var precision = 0;

			var getRandomNum = function( i, decLen ){
					var powOf10s = Math.pow( 10, decLen || 0 );
					return i ?  Math.floor( powOf10s * Math.random() * i ) / powOf10s : Math.random();
			};
			var arrOfRandomNum = function( arrLength, max, decLen ){
				if( arrLength < 0 ){ return false; }
				var arr = [], i = arrLength;
				while( i-- ){
					arr[ i ] = getRandomNum( max, decLen ); 
				}
				return arr;
			};
			var makeQuiz = function(){
				var quiz = { "fill":[] };
				var question = '', nums = [];
				var i = questionLength = 10;
				while( i-- ){
					nums = arrOfRandomNum( 2, 19 );
					question = nums.join( ops[ getRandomNum( ops.length ) ] );
					quiz.fill.push({
						ques: question,
						ans: eval( question ).toPrecision(precision)
					});
				}
				return quiz;
			}

			var makeQuizMP2 = function(){
				var quiz = { "fill":[] };
				var question = '', nums = [];
				var i = questionLength = 10;
				while( i-- ){					
					nums = arrOfRandomNum( 1,100 );
					question = nums;
					quiz.fill.push({
						ques: question,
						ans: eval( Math.pow(nums,2) )
					});
				}
				return quiz;
			}			

			var makeQuizMP1 = function(){
				var quiz = { "fill":[] };
				var question = '', nums = [];
				var i = questionLength = 10;
				while( i-- ){					
					num = getRandomNum( 100 , 0 );			
					question = num;
					quiz.fill.push({
						ques: question,
						ans: eval( Math.pow(num,2) )
					});
				}
				return quiz;
			}				
			
			$( "#twoDigitsSquare" ).jQuizMe( makeQuizMP2(), {
				intro: "number square ?"
			});

Larry Battle says:

May 6, 2011 at 5:23 pm

The easiest way to solve your problem is to generate more questions and use the jQuizMe option "numOfQuizQues".

options.numOfQuizQues limits the number of quiz questions that will be asked, even though there more questions.

So in essence, what you do is set questionLength = 100.
Then ...

options = {
intro: "number square",
numOfQuizQues: 10
}

$( "#quizArea" ).jQuizMe( makeQuizMP2(), options );

I hoped that helped.
Michel says:

May 7, 2011 at 3:58 am

A direct practical use for my question : I did create several simple quizzes for testing the square of 2 digits (like above), than another one for 3 digits, than again 2 others for 4 and 5 digits : not very efficient.

I would prefer to be able to select in the display box for a main script, the number of digits, or generally speaking the type or category of test I want to make.
- Larry says:
  
  May 7, 2011 at 9:26 am
  Basically, you want a function that creates the quiz for you when called.
  In general it could behave something like this.
```
$( "#startButtonToMakeQuiz" ).click(function(){
// Collect user's choices.
var numberOfQuestions = $( "#selectNumOfQuestions" ).val();
var quizChoice = $( "#quizChoice" ).val();
var quiz = makeQuiz( quizChoice ); // Call appropriate function to generate quiz material.
var options = { numOfQuizQues : numOfQuestions }; // Call appropriate function to get user's selections.
$( "#quizArea" ).jQuizMe( quiz, options );
});
```

Michel says:

May 7, 2011 at 3:43 am

thank you Larry, that did the trick !

another question : how should I pass a parameter, from the quiz box to the script ?

For instance, should the user decide on the fly how many Q&A he wants to test, he could select a number in a select box; or, he could select to apply or not a randomization parameter.

That is what is implemented in the "Minna No Nihongo" quiz, but I can't find the part of the script where you interact with the user's choices.
- Larry says:
  
  May 7, 2011 at 9:15 am
  That's really up to you.
  To look into how I programmed the user interaction portion search for
```
$("#startQuiz").click(function(){
	...
});
```
  in mnn_quiz.js