Widgets for Inclusive Distributed Environments

Welcome Guest, you are in: Login


Search the wiki



   Workshop at JISC
   TechDis in York
   Workshop at Portland
   College in Mansfield
   Workshop at Teesside
   University in

Touch Screen Timer

Modified on 01/11/2010 13:45 by Franck PERRIN Categorized as Uncategorized
The "Touch Screen Timer" is a simple widget allowing students to set up a timer up to an hour.

Widget Learning Design Template, Widget Storyboard

Learning 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



First screen where you setup the time

First screen where you setup the time

Clock-like countdown display

Clock-like countdown display

Digital countdown display

Digital countdown display

How it works

  1. 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.
  2. Choose the display mode: "Clock" or "Digital" (see screenshots above).
  3. Click the "Go !" button to start the countdownm.
  4. 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).


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.


Image Image Image Image