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 DynamicHtml/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:

DynamicHtml/Solutions/MathQuiz.html
---- C O D E   O M I T T E D ----

	function resetTimer(seconds) {
		var timerRow = document.getElementById("timerRow");
		timerRow.style.display="none";
		document.getElementById("timeLeft").value = seconds;
		clearInterval(timer);
	}

---- C O D E   O M I T T E D ----

	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="";
		}
	}
	
---- C O D E   O M I T T E D ----

<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>
</tr>
</table>
</form>
</body>
</html>

Challenge Solution:

DynamicHtml/Solutions/MathQuiz-challenge.html
---- C O D E   O M I T T E D ----

	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);
	}
---- C O D E   O M I T T E D ----

	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();
		}
	}
---- C O D E   O M I T T E D ----

<tr id="answerRow">

---- C O D E   O M I T T E D ----
Next