Project 14: Quiz App with Leaderboard

📋 Project Brief

Build a gamified trivia quiz application with timed questions, a streak-based scoring system, and a local leaderboard. This project focuses on state machines, timer pressure UX, and fair randomization algorithms.

✅ Feature Requirements

Feature 1: Fisher-Yates Shuffle

Acceptance Criteria:

• Questions appear in a random order each time the quiz starts
• Answer options within each question are also shuffled
• Use the Fisher-Yates (Knuth) shuffle algorithm for unbiased randomization
• No question repeats within a single quiz session

Feature 2: Streak Multiplier

Acceptance Criteria:

• Base score per correct answer: 100 points
• Consecutive correct answers multiply the score: 1x, 1.5x, 2x, 2.5x, 3x (max)
• An incorrect answer resets the multiplier to 1x
• The current multiplier is prominently displayed with a visual "fire" effect at 3x
• Bonus time points: remaining seconds × 10 added to the score

Feature 3: Social Share Card

Acceptance Criteria:

• After the quiz, generate a shareable image/card showing: score, accuracy, time, streak
• The card is generated using HTML-to-Canvas (or a styled div screenshot)
• "Share on Twitter" pre-fills a tweet with the score and a link
• The card must be downloadable as a PNG

Feature 4: Timer Pressure

Acceptance Criteria:

• Each question has a 15-second countdown timer
• At 5 seconds remaining, the timer turns red and a pulsing animation begins
• At 0 seconds, the question auto-submits as incorrect
• A "burning edge" CSS effect appears around the question card in the last 3 seconds

Feature 5: Local Leaderboard

Acceptance Criteria:

• Top 10 scores stored in localStorage
• Each entry: name (prompted after quiz), score, accuracy, date
• Sorted by score descending; ties broken by accuracy
• The user's current score highlights if it made the leaderboard
• A "Clear Leaderboard" button with confirmation

📊 Scoring Formula

Component	Formula
Base Points	100 per correct answer
Streak Multiplier	1x → 1.5x → 2x → 2.5x → 3x (caps at 3x)
Time Bonus	Remaining seconds × 10
Final Score	(Base × Multiplier) + Time Bonus

🧪 Testing Checklist

• Unit test shuffle algorithm produces uniform distribution
• Unit test scoring: verify multiplier resets on wrong answer
• Unit test leaderboard sorting and tie-breaking
• Integration test: timer expiring auto-submits as incorrect
• A11y: timer must be announced to screen readers

🚀 Stretch Goals

• Add category selection (Science, History, Tech, etc.)
• Implement "Lifelines" (50/50, Skip, Extra Time)
• Add difficulty scaling (questions get harder as streak increases)
• Fetch questions from an external trivia API