The "Touch Screen Timer" is a simple widget allowing students to set up a timer up to an hour.
Widget Learning Design Template,
Widget StoryboardLearning Design
User selects unit of time up to maximum of 1 hour. User selects and drags bar in increments (see storyboard 2) Increments are not divided equally
Storyboard
Screenshots
First screen where you setup the time
Clock-like countdown display
Digital countdown display
How it works
- Select the amount of time you want to countdown using the slider.It can be operated either using the mouse or the left/right arrow keys on your keyboard.
- Choose the display mode: "Clock" or "Digital" (see screenshots above).
- Click the "Go !" button to start the countdownm.
- When the countdown has finished, an audio alarm will alert the user.
(When using the digital display, the text colour will change to red for the last 5 seconds)
Important note:
The clock display will only work in Firefox 3.1+ and Safari 3+ (and other modern WebKit based browsers like Chrome).
Limitations
The learning design specified that the increments of time on the slider should not be divided equally. Unfortunately this could not be implemented.
The learning design also mention an audio feedback when setting the time but there is no suitable text-to-speech API available at this time. It would have been necessary to record the audio files manually which would have significantly increased the file size of the widget.
Further work
Explore the use of the
JQuery Rotate plugin to enable the clock display on Microsoft Internet Explorer.
Download
TouchScreenTimer.zip