FSOC-OSS / FSOC-OSS/Fsoc-level-hard

Implement Timer System with Visual Countdown

Open
#46 2 comments 0 reactions 1 assignee Claimed by @GitWizzz View on GitHub
enhancement feature hacktoberfest intermediate
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.