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

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

	function decrementTimer() {
		var slider = document.getElementById("divSlider");
		var curLeft = parseInt( getCurrentStyle(slider,"left") );
		var curWidth = parseInt( getCurrentStyle(slider,"width") );
		if (curLeft < 198 - curWidth) {
			slider.style.left = curLeft + 2 + "px";
		} else {
			resetTimer(timePerQuestion);
			msg("Time's up!  The answer is " + getAnswer() + ".","red");
			removeOption();
		}
	}
---- C O D E   O M I T T E D ----
Next