Skip to content

[Formplayer] Add stopwatch/timer question type #692

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 requestformplayerIssues related to the FormPlayer React applicationgood first issueGood for newcomers
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions