FSOC-OSS / FSOC-OSS/Fsoc-level-hard
Implement Timer System with Visual Countdown
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 21
- PR merge metrics
- No merged PRs in 30d
Description
**Title:** Add Configurable Timer with Progress Bar and Audio Alerts
## Problem Statement
The quiz currently has no time limit or timer, reducing the challenge and competitive aspect. Users cannot practice time-management skills or simulate timed test conditions. A timer system would add urgency and improve the quiz experience.
## Proposed Solution
Create a comprehensive timer system with:
* Configurable time limits per quiz or per question
* Visual countdown display (digital and progress bar)
* Audio alerts at time intervals
* Pause/resume functionality
* Time warnings (10 seconds remaining)
* Auto-submit when time expires
* Time statistics in results
## Acceptance Criteria
### ✅ Timer Configuration
* Option to set total quiz time or per-question time
* Time options: 30s, 60s, 120s per question or 5/10/15/30 min total
* "Unlimited time" option to disable timer
* Save time preference in localStorage
* Display timer settings in quiz setup page
### ✅ Visual Display
* Digital countdown timer (MM:SS format)
* Circular progress bar around timer
* Linear progress bar at top of quiz
* Color changes as time decreases (green → yellow → red)
* Prominent display in quiz interface
* Mobile-responsive positioning
### ✅ Audio Alerts
* Sound effect when timer starts
* Alert sound at 10 seconds remaining
* Final countdown sound (5, 4, 3, 2, 1)
* Time's up alarm sound
* Mute button to disable sounds
* Volume control slider
### ✅ Pause/Resume Functionality
* Pause button in quiz interface
* Pause modal with resume/quit options
* Timer freezes during pause
* Blur quiz content when paused
* Track total paused time
* Limit pause duration or count
### ✅ Time Warnings
* Visual flash at 10 seconds
* Urgent color change (pulsing red)
* Toast notification for time warnings
* Shake animation for last 5 seconds
* Optional vibration on mobile devices
### ✅ Auto-Submit
* Automatically submit answer when time expires
* Show modal indicating time's up
* Display unanswered questions
* Transition to results or next question
* Prevent further input after expiration
### ✅ Time Statistics
* Total time taken displayed in results
* Time per question breakdown
* Average time per question
* Fastest/slowest answered question
* Time bonus points for quick answers
* Time efficiency chart
Contributor guide
Assessment
This issue has not been assessed yet.