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
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:
UX considerations:
Implementation scope:
Acceptance criteria: