Widgets for Inclusive Distributed Environments

Welcome Guest, you are in: Login
RSS RSS

Navigation











Search the wiki

»

Calendar

15/10/2010
   Workshop at JISC
   TechDis in York
22/10/2010
   Workshop at Portland
   College in Mansfield
05/11/2010
   Workshop at Teesside
   University in
   Middlesbrough

Touch Screen Timer

RSS
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

Storyboard



Screenshots

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).

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
Image Image Image Image