Changing the Math Quiz Timer to a Slider - Exercise

Contact Us or call 1-877-932-8228
Changing the Math Quiz Timer to a Slider - Exercise

Changing the Math Quiz Timer to a Slider

Duration: 15 to 25 minutes.

In this exercise, you will modify the Math Quiz so that the timer is a slider rather than a count down. The result will look like this:

  1. Open CSSObjectModel/Exercises/MathQuizSlider.html for editing.
  2. Notice that the timer on the page has been changed from an input element to two divs.
    <tr id="timerRow">
    		<td>Timer:</td>
    		<td>
    		<div id="divSliderBG">
    		<div id="divSlider"></div>
    		</div>
    		</td>
    		</tr>
  3. Also, all references to the timeLeft input have been removed and the code within the decrementTimer() function has been commented out.
  4. Rewrite the decrementTimer() function to use a slider like the one shown in the screenshot above.
  5. Test your solution in a browser.

Solution:

CSSObjectModel/Solutions/MathQuizSlider.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Math Quiz</title>
<link href="MathQuiz.css" rel="stylesheet">
<script src="questions.js"></script>
<script>	
	var timer, timePerQuestion = 10;
	window.onload = function() {
		init();
	}
	
	function init() {
		var category = document.getElementById("category");
		var question = document.getElementById("question");
		var btnCheck = document.getElementById("btnCheck");
		category.addEventListener('change', function() {
			selChanged(category,categories,question);
			resetTimer(timePerQuestion);
		});
		question.addEventListener('change', function() {
			questionChanged();
		});
		btnCheck.addEventListener('click', function() {
			checkAnswer();
		});
		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);
			dependentSel.add(opt);
		}
	}
	
	function resetTimer(seconds) {
		var slider = document.getElementById("divSlider");
		var timerRow = document.getElementById("timerRow");
		var answerRow = document.getElementById("answerRow");
		slider.style.left = "1px";
		timerRow.style.display = "none";
		answerRow.style.display = "none";
		clearInterval(timer);
	}
	
	function decrementTimer() {
		var slider = document.getElementById("divSlider");
		var curLeft = parseInt(getComputedStyle(slider).getPropertyValue("left"));
		var curWidth = parseInt(getComputedStyle(slider).getPropertyValue("width"));
		if (curLeft < 198 - curWidth) {
			slider.style.left = curLeft + 2 + "px";
		} else {
			resetTimer(timePerQuestion);
			msg("Time's up!  The answer is " + getAnswer() + ".","red");
			removeOption();
		}
	}

	function addRow(tableId, cells){
		var tableElem = document.getElementById(tableId);
		var newRow = tableElem.insertRow(tableElem.rows.length);
		var newCell;
		for (var i = 0; i < cells.length; i++) {
			newCell = newRow.insertCell(newRow.cells.length);
			newCell.innerHTML = cells[i];
		}
		return newRow;
	}

	function checkAnswer() {
		var userAnswer = document.getElementById("answer").value;
		var correctAnswer = getAnswer();
		var question = getQuestion();
		var arrCells = [question, userAnswer, correctAnswer];
		var row = addRow("tblResults", arrCells);
		
		if (userAnswer === correctAnswer) {
			msg("Right! The answer is " + correctAnswer + ".","green");
			row.style.backgroundColor="#00ff00";
		} else {
			msg("Sorry. The correct answer is " + correctAnswer + ".","red");
			row.style.backgroundColor="#ff9999";
		}
		removeOption();
		questionChanged();
	}
	
	function getAnswer() {
		var i = document.Quiz.question.selectedIndex;
		var answer = document.Quiz.question[i].value;
		return answer;
	}
	
	function getQuestion(){
		var i = document.Quiz.question.selectedIndex;
		var question = document.Quiz.question[i].text;
		return question;
	}
	
	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 = "";
		var timerRow,answerRow;
		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;
			timer = setInterval(decrementTimer,100);
			timerRow = document.getElementById("timerRow");
			timerRow.style.display = "";
			answerRow = document.getElementById("answerRow");
			answerRow.style.display = "";
			document.Quiz.answer.focus();
		}
	}
	
	function endQuiz() {
		var category = document.Quiz.category;
		var question = document.Quiz.question;
		resetTimer(timePerQuestion);
		alert("Thanks for playing! The quiz will now reload.");
		category.add(new Option("Addition","addition"));
		category.add(new Option("Subtraction","subtraction"));
		category.add(new Option("Multiplication","multiplication"));
		category.add(new Option("Division","division"));
		selChanged(category,categories,question);
		resetTimer(timePerQuestion);
	}
	
	function msg(text, color) {
		document.getElementById("msg").innerHTML = text;
		document.getElementById("msg").style.color = color;
	}
</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 id="answerRow">
	<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 id="timerRow">
	<td>Timer:</td>
	<td>
		<div id="divSliderBG">
			<div id="divSlider"></div>
		</div>
	</td>
</tr>
<tr>
	<td id="msg" colspan="2">Good luck!</td>
</tr>
</table>
</form>
<hr>
<table id="tblResults">
<tr>
	<th>Question</th>
	<th>Your answer</th>
	<th>Correct answer</th>
</tr>
</table>
</body>
</html>
Next