Skip to the object
Tactile UI

Reaction Timer

A one-lamp reaction timer as a handheld made of kit parts. Press Start, wait for the lamp, then hit the key as fast as you can; five tries make a round, scored on a printed scale.

What it is for

A game you could hold, drawn from the kit's own parts: a moulded case with an LCD, one big lamp with a printed scale beside it, one long key, a Start key, a sound switch and a speaker grille.

Installnpx shadcn add https://tactileui.dev/r/reaction-timer.jsonWith a Pass: how

Controls

The switch on the case. On, a press, a false start and the end of a round each have a tone once you have pressed a key (a browser allows sound only after a press). The visitor’s own setting is kept on their device.

What a screen reader calls the case.

Everything you set here is what the Code and Prompt tabs give you.

Seats open in 11 days. Want one email that morning?

Datasheet

Mechanism
Shared handheld case, Pointerdown keys, Event timestamp timing, Segment lcd digits, Concentric corners, Scale as an object
Stack
Vanilla ES modules, CSS
Needs
Nothing, no dependencies
States
12 documented
Version
0.1.0
Licence
With a Pass

States

  1. How to playPress Start (or S). Wait for the lamp, which lights after a random 1.5 to 4 seconds, then hit the big key. Five tries make a round and the average is scored on the printed scale. A press before the lamp is a false start and the try is run again.
  2. KeysSpace or Enter is the big key and holds it down while held; with no round running it starts one. S starts. Space on the sound switch flips the switch and presses nothing. Sound begins with the first press.
  3. Made ofThe kit's Panel (the case), LCD (time and best average in seven segments, five pips for the tries), Lamp (the big lamp, four scale lamps and a state lamp), Key (the long key and the primary Start key), Tray, Switch (sound) and Grille.
  4. IdleThe time and the best read three dashes, the lamp is dark, the screen says Press start.
  5. WaitingThe LCD says Wait and the status lamp is amber. The big lamp stays dark for a random 1.5 to 4 seconds. A press now is a false start.
  6. Lamp litThe big lamp lights and the LCD says Now. Its time starts in the frame that draws the lamp, and a press is timed from the event's own timestamp. Left for over a second, the try is void.
  7. ResultThe time shows in milliseconds with a word for it (Sharp, Quick, Good, Slow) and the pip for that try goes on.
  8. False startA press before the lamp, or under 100 ms after it, sounds a low buzz and the status lamp turns red. The try does not count and is run again.
  9. Round averageAfter the fifth try the average shows and lights Under 200, 250, 300, or 300 and over on the scale. A lower average than the best is kept on this device as a new best.
  10. SoundA tone for a good press, a low buzz for a false start, two rising tones for the end of a round. The switch turns it off; the choice is remembered.
  11. Reduced motionA held key shades but does not move; the lamp still lights.
  12. Twelve finishes, two volumesThe case reads the finish and volume tokens only: aluminium, graphite and the other ten finishes, Tactile or Quiet.

Notes

Press Start and wait a random second or three; when the lamp lights, hit the key. Five tries make a round, the average lights its band on the scale, and a press before the lamp (or under 100 ms, which is a guess) is a false start. The best average is kept on the visitor's device. It shares its case with the library's other handheld games.

Original. The case is the library's shared handheld (originals/components/shared/handheld), drawn from the kit's parts at one size and scaled as an object. It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.

Anatomy

Shared handheld case, Pointerdown keys, Event timestamp timing, Segment lcd digits, Concentric corners, Scale as an object

Usage notes

A game you could hold, drawn from the kit's own parts: a moulded case with an LCD, one big lamp with a printed scale beside it, one long key, a Start key, a sound switch and a speaker grille. Press Start and wait a random second or three; when the lamp lights, hit the key. The best average is kept on the visitor's device. It shares its case with the library's other handheld games.

Options

OptionTypeDescription
soundbooleanThe switch on the case. On, a press, a false start and the end of a round each have a tone once you have pressed a key (a browser allows sound only after a press). The visitor’s own setting is kept on their device.
labeltextWhat a screen reader calls the case.

Methods

  • hooks
  • update
  • destroy

How it works

Original. The case is the library's shared handheld (originals/components/shared/handheld), drawn from the kit's parts at one size and scaled as an object. It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.