Showing and Hiding Elements - Exercise

Contact Us or call 1-877-932-8228
Showing and Hiding Elements - Exercise

Showing and Hiding Elements

Duration: 20 to 30 minutes.

In this exercise, you will modify a Math Quiz to only show the countdown timer when it is running.

  1. Open CSSObjectModel/Exercises/MathQuiz.html for editing.
  2. Modify the code so that the table row with the timer in it (the last row) only shows up when the timer is running. Hint: You will make your changes in resetTimer() and questionChanged().
  3. Test your solution in a browser.

Challenge

Only show the Answer row when a question is selected.

Solution:

CSSObjectModel/Solutions/MathQuiz.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");
		var timeLeft = document.getElementById("timeLeft");
		category.addEventListener('change', function() {
			selChanged(category,categories,question);
			resetTimer(timePerQuestion);
		});
		question.addEventListener('change', function() {
			questionChanged();
		});
		btnCheck.addEventListener('click', function() {
			checkAnswer();
		});
		timeLeft.addEventListener('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);
			dependentSel.add(opt);
		}
	}
	
	function resetTimer(seconds) {
		var timerRow = document.getElementById("timerRow");
		timerRow.style.display = "none";
		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="";
		var timerRow;
		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);
			timerRow = document.getElementById("timerRow");
			timerRow.style.display = "";
		}
	}
	
	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) {
		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 id="timerRow">
	<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>
</table>
</form>
</body>
</html>

Challenge Solution:

CSSObjectModel/Solutions/MathQuiz-challenge.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");
		var timeLeft = document.getElementById("timeLeft");
		category.addEventListener('change', function() {
			selChanged(category,categories,question);
			resetTimer(timePerQuestion);
		});
		question.addEventListener('change', function() {
			questionChanged();
		});
		btnCheck.addEventListener('click', function() {
			checkAnswer();
		});
		timeLeft.addEventListener('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);
			dependentSel.add(opt);
		}
	}
	
	function resetTimer(seconds) {
		var timerRow = document.getElementById("timerRow");
		var answerRow = document.getElementById("answerRow");
		timerRow.style.display = "none";
		answerRow.style.display = "none";
		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="";
		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,1000);
			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) {
		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 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><input type="text" name="timeLeft" id="timeLeft" size="2"> seconds left</td>
</tr>
<tr>
	<td id="msg" colspan="2">Good luck!</td>
</tr>
</table>
</form>
</body>
</html>
Next