Project 9: Typing Speed Test

📋 Project Brief

Build a high-precision typing speed trainer that tracks accuracy, WPM, and character-level errors in real-time. This project requires precise keyboard event handling, timer management, and gamified UI feedback. You will compare user input against a source text character-by-character, building a performance analysis system that identifies the user's weakest keys.

🎯 Learning Objectives

• Master keyboard event handling (keydown vs. keypress vs. input events)
• Build a precise timer system with start/stop/pause logic
• Calculate WPM using the standard formula: (characters / 5) / minutes
• Implement character-level diff highlighting
• Create gamified UI elements (streaks, ghost racers, heatmaps)

✅ Feature Requirements

Feature 1: Real-Time WPM Counter

Acceptance Criteria:

• WPM counter updates with every keystroke
• Use the standard WPM formula: (total characters typed / 5) / elapsed minutes
• Also display "Raw WPM" (includes errors) and "Net WPM" (subtracts errors)
• Accuracy percentage displayed alongside WPM
• Timer starts on first keystroke, not on page load

Feature 2: Error Heatmap

Acceptance Criteria:

• After each test, show a keyboard visualization
• Keys that were frequently mistyped are highlighted in red (intensity = error count)
• Keys with zero errors are green
• Hovering a key shows: "Pressed X times, Errors: Y, Accuracy: Z%"
• Aggregate data across multiple tests (stored in localStorage)

Feature 3: Difficulty Modes

Acceptance Criteria:

• Easy: Common words only, no punctuation
• Medium: Includes punctuation and capitalization
• Hard: Includes numbers, symbols, and technical terms
• Custom: User pastes their own text to practice
• Each mode must source text from a different word pool

Feature 4: Ghost Racer

Acceptance Criteria:

• A visual indicator shows the user's personal best speed as a "ghost" progress bar
• The ghost advances through the text at the rate of the previous best WPM
• If the user is ahead of the ghost, show a green indicator; behind = red
• Personal best is stored in localStorage per difficulty mode

Feature 5: Focus Blur

Acceptance Criteria:

• If the browser window loses focus (user switches tabs), automatically pause the timer
• Blur the text to prevent "cheating" by reading ahead in another window
• Show an overlay: "Test Paused — Click to Resume"
• Clicking the overlay resumes the timer and removes the blur

📊 Performance Metrics Display

Metric	How It's Calculated
WPM (Net)	(Correct characters / 5) / minutes
WPM (Raw)	(All characters / 5) / minutes
Accuracy	(Correct characters / Total characters) × 100
Error Rate	Errors per minute
Consistency	Standard deviation of WPM across 10-second intervals

🧪 Testing Checklist

• Unit test WPM calculation with known inputs
• Unit test character comparison logic (correct, incorrect, extra, missing)
• Integration test: completing a test shows the results screen with accurate stats
• Test focus/blur pause behavior
• A11y: text must be readable by screen readers; timer state announced

🚀 Stretch Goals

• Add multiplayer mode (compare WPM with a friend via shared link)
• Implement a "Lesson Mode" that focuses on the user's weakest keys
• Add sound effects for correct/incorrect keystrokes (toggleable)
• Create a 30-day progress chart showing WPM improvement over time