Skip to content

[Formplayer] Add stopwatch/timer question type #32

Description

@r0ssing

Add a custom Stopwatch / Timer question type for ODE, focused on capturing elapsed time as a numeric response.

The control should allow users to measure and submit a duration, with the saved value stored as a double.

Potential display options:

  • Stopwatch with Start, Pause, Resume, Reset, and Save/Confirm actions
  • Countdown timer mode, where a configured duration counts down to zero
  • Manual duration entry as a fallback or optional mode
  • Large elapsed-time display for easy readability
  • Compact mobile-friendly layout
  • Optional lap/split display if supported by the data model

UX considerations:

  • Clearly show the current elapsed or remaining time
  • Prevent accidental reset while timing is active
  • Make the saved value explicit before submission
  • Support keyboard navigation and screen readers
  • Work well on mobile and desktop
  • Preserve existing validation and required-question behavior
  • Render consistently in readonly/review mode
  • Support translation of all user-facing text using standard ODE i18n/localization support
  • Define the stored unit clearly, such as seconds as a double
  • Handle paused, reset, incomplete, and already-saved states predictably

Implementation scope:

  • Add the Stopwatch / Timer as a custom question type in ODE
  • Store the captured duration as a double, preferably in a documented canonical unit
  • Support configurable behavior such as stopwatch mode, countdown mode, manual entry, min/max duration, and precision
  • Add a Storybook component for the control in formplayer
  • Include stories for stopwatch mode, countdown mode, paused state, reset state, validation/error state, readonly state, translated labels, and mobile-friendly layouts
  • Update relevant documentation to describe configuration options, saved value format, units, accessibility behavior, localization support, and example usage

Acceptance criteria:

  • A Stopwatch / Timer question can be configured and rendered in ODE
  • Users can start, pause/resume, reset, and save a duration
  • The selected/captured duration is saved as a double in the documented unit
  • Required-question and validation behavior works consistently
  • Incomplete or unsaved timing states are handled clearly
  • All user-facing text is translatable using existing ODE i18n support
  • The control supports accessible labels, keyboard interaction, and visible focus states
  • Storybook includes examples for the main timer states and variants
  • Documentation is updated with usage guidance and examples

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions