A Sample Quiz Tool

Contact Us or call 1-877-932-8228
A Sample Quiz Tool

A Sample Quiz Tool

The following example brings together the concepts learned in this lesson to create a quiz tool. The quiz looks like this:

Code Sample:

DynamicForms/Demos/MathQuiz.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Math Quiz</title>
<link href="MathQuiz.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript" src="questions.js"></script>
<script type="text/javascript">	
	var timer, timesUp, timePerQuestion=10;
	observeEvent(window,"load",init);
	
	function init() {
		var category = document.getElementById("category");
		var question = document.getElementById("question");
		var btnCheck = document.getElementById("btnCheck");
		var timeLeft = document.getElementById("timeLeft");
		observeEvent(category,"change",function() {
			selChanged(category,categories,question);
			resetTimer(timePerQuestion);
		});
		observeEvent(question,"change",function() {
			questionChanged();
		});
		observeEvent(btnCheck,"click",function() {
			checkAnswer();
		});
		observeEvent(timeLeft,"focus",function() {
			timeLeft.blur();
		});
		selChanged(category,categories,question);
		resetTimer(timePerQuestion);
	}

	function selChanged(sel,data,dependentSel) {
		var selection = sel.options[sel.selectedIndex].value;
		var arrOptions = data[selection];
		var opt;
		dependentSel.options.length = 1;
		for (var i in arrOptions) {
			opt = new Option(arrOptions[i].q,arrOptions[i].a);
			appendOptionToSelect(dependentSel,opt);
		}
	}
	
	function resetTimer(seconds) {
		document.getElementById("timeLeft").value = seconds;
		clearInterval(timer);
	}
	
	function decrementTimer() {
		var timeLeft = document.getElementById("timeLeft");
		timeLeft.value--;
		if (timeLeft.value < 0) {
			resetTimer(timePerQuestion);
			msg("Time's up!  The answer is " + getAnswer() + ".");
			removeOption();
		}
	}

	function checkAnswer() {
		var userAnswer = document.getElementById("answer").value;
		var correctAnswer = getAnswer();
		
		if (userAnswer === correctAnswer) {
			msg("Right! The answer is " + correctAnswer + ".");
		} else {
			msg("Sorry. The correct answer is " + correctAnswer + ".");
		}
		removeOption();
		questionChanged();
	}
	
	function getAnswer() {
		var i = document.Quiz.question.selectedIndex;
		var answer = document.Quiz.question[i].value;
		return answer;
	}
	
	function removeOption() {
		var category = document.Quiz.category;
		var question = document.Quiz.question;
		question.remove(question.selectedIndex);
		if(question.options.length == 1) {
			category.remove(category.selectedIndex);
			if (category.options.length == 0) {
				endQuiz();
			} else {
				selChanged(category,categories,question);
			}
		}
		resetTimer(timePerQuestion);
	}
	
	function questionChanged() {
		document.Quiz.answer.value="";
		if (document.Quiz.question.selectedIndex === 0) {
			document.Quiz.btnCheck.disabled = true;
			document.Quiz.answer.disabled = true;
			resetTimer(timePerQuestion);
		} else {
			document.Quiz.btnCheck.disabled = false;
			document.Quiz.answer.disabled = false;
			document.Quiz.answer.focus();
			timer = setInterval(decrementTimer,1000);
		}
	}
	
	function endQuiz() {
		var category = document.Quiz.category;
		var question = document.Quiz.question;
		resetTimer(timePerQuestion);
		alert("Thanks for playing! The quiz will now reload.");
		appendOptionToSelect(category,new Option("Addition","addition"));
		appendOptionToSelect(category,new Option("Subtraction","subtraction"));
		appendOptionToSelect(category,new Option("Multiplication","multiplication"));
		appendOptionToSelect(category,new Option("Division","division"));
		selChanged(category,categories,question);
		resetTimer(timePerQuestion);
	}
	
	function msg(text) {
		document.getElementById("msg").innerHTML=text;	
	}
</script>
</head>
<body>
<form name="Quiz" onsubmit="return false;">
<table>
<tr>
	<td>Category:</td>
	<td>
		<select name="category" id="category">
			<option value="addition">Addition</option>
			<option value="subtraction">Subtraction</option>
			<option value="multiplication">Multiplication</option>
			<option value="division">Division</option>
		</select>
	</td>
</tr>
<tr>
	<td>Question:</td>
	<td>
		<select name="question" id="question">
			<option value="0">--Please Choose--</option>
		</select>
	</td>
</tr>
<tr>
	<td>Answer:</td>
	<td>
		<input type="text" name="answer" id="answer" 
			size="2" disabled="disabled">
		<input type="button" name="btnCheck" id="btnCheck" 
			value="Check Answer" disabled="disabled">
	</td>
</tr>
<tr>
	<td>Timer:</td>
	<td><input type="text" name="timeLeft" id="timeLeft" size="2"> seconds left</td>
</tr>
<tr>
	<td id="msg" colspan="2">Good luck!</td></tr>
</tr>
</table>
</form>
</body>
</html>

Here's how the quiz works:

  1. The Question select menu is always populated with questions in the indicated category.
  2. The "Check Answer" button and the Answer text field are only enabled when a question is selected.
  3. The timer starts when a question is selected and stops when it runs out or when the "Check Answer" button is clicked.
  4. When the "Check Answer" button is clicked, the user is informed whether or not the answer is correct and the question is removed from the question menu.
  5. When all questions in a category are gone, the category is removed from the category menu.
  6. When all questions in all categories have been completed, the user is thanked for taking the quiz and the entire quiz is restarted.

Spend some time reviewing this code. You shouldn't see anything new, except in the way the code is designed.

You will need to have a good understanding of this code in the Dynamic HTML lesson.

As an optional exercise, you may want to go through the uncommented version and add comments yourself to make sure you understand what each line of code is doing. You can then compare it to our commented version at DynamicForms/Demos/MathQuiz-commented.html.

Next