Showing and Hiding Elements - Exercise

Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

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.Math Quiz Math Quiz 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

This tutorial is based on Webucator's Introduction to JavaScript Training Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.