Speed Type

CONTROLS: - Desktop: - Keyboard Keys: Type characters to match displayed text - Backspace Key: Delete last typed character and move cursor back - Any Key: Start timer on first keypress (if game started) - Mouse Click (Start Button): Begin typing challenge - Mouse Click (Settings Button): Open settings menu (Time Duration, Word List, Difficulty, Sound Effects) - Mouse Click (New Test Button): Restart current test - Mouse Click (Test Again Button): Return to start screen after results - Mouse Click (Back Button): Return to start screen from game area - Mobile/Tablet: - On-Screen Keyboard: Type characters using device keyboard - Backspace Key: Delete last typed character - Touch (Buttons): Tap buttons to interact with UI BASIC MECHANICS: 1. Text Display: - Text generation: Randomly generates text from selected word list - Text layout: 12 rows × 15 words per row (180 words total) - Character wrapping: Each word wrapped in span elements - Cursor position: Blinking cursor shows current character to type - Text scrolling: Auto-scrolls every 15 words - Text visibility: Text visible only when game active 2. Typing Input: - Character matching: Compare typed character to displayed character - Case sensitivity: Case-insensitive comparison (toLowerCase conversion) - Key detection: Detects all keyboard key presses - Input prevention: Prevents default browser behavior on keypress - First keypress: Starts timer when first character typed 3. Correct Character Detection: - Correct match: Typed character matches displayed character - Visual feedback: Character turns green (#00FF00) with glow effect - Correct animation: Flash animation with scale effect - Correct sound: Plays 800Hz tone (if sound enabled) - Correct counter: Increments correctCount - Character advancement: Cursor moves to next character 4. Incorrect Character Detection: - Incorrect match: Typed character doesn't match displayed character - Visual feedback: Character turns red (#FF003C) with glow effect - Incorrect animation: Flash animation with scale effect - Incorrect sound: Plays 200Hz tone (if sound enabled) - Incorrect counter: Increments incorrectCount - Character advancement: Cursor still moves to next character 5. Cursor System: - Cursor indicator: Blinking vertical bar (|) before current character - Cursor color: Red (#FF003C) with glow effect - Cursor animation: Blinks every 0.8 seconds - Cursor position: Updates as you type - Cursor movement: Moves forward on keypress, backward on Backspace 6. Timer System: - Time duration: Selectable (15, 30, 60, 120 seconds) - Timer start: Begins on first keypress - Timer display: Large countdown in center (red, Orbitron font) - Timer update: Updates every second - Timer animation: Pulse animation with glow effect - Timer end: Reaches 0s when time expires - Timer stop: Stops when time reaches zero 7. Progress Bar: - Progress indicator: Horizontal bar shows time elapsed - Progress calculation: (elapsedSeconds / testDuration) × 100% - Progress update: Updates every second with timer - Progress color: Red gradient (#FF003C to #E60039) - Progress animation: Glowing gradient animation - Progress completion: Reaches 100% when timer expires 8. Word Counting: - Word increment: Increments when space character typed - Word detection: Detects spaces between words - Word total: Tracks total words completed - Word reset: Resets to 0 on new test - Word tracking: Used for WPM calculation 9. Character Counting: - Character increment: Increments for each non-space character - Character total: Tracks total characters typed - Character reset: Resets to 0 on new test - Space exclusion: Spaces not counted in character count - Character display: Shown in stats and results 10. WPM Calculation: - Formula: (wordCount / elapsedSeconds) × 60 - Real-time: Updates during typing - Final WPM: Calculated when test ends - WPM display: Shown in stats (during test) and results (final) - Rounding: Rounded down using Math.floor() 11. Accuracy Calculation: - Formula: (correctCount / (correctCount + incorrectCount)) × 100 - Real-time: Updates during typing - Final accuracy: Calculated when test ends - Accuracy display: Shown in stats and results - Accuracy colors: Green (≥90%), Yellow (≥70%), Red (<70%) - Rounding: Rounded down using Math.floor() 12. Real-Time Stats Display: - WPM display: Current words per minute - Accuracy display: Current accuracy percentage - Character count: Total characters typed - Correct/Incorrect: Breakdown of correct vs incorrect - Stats update: Updates continuously during typing - Stats position: Below timer 13. Backspace Functionality: - Backspace detection: Detects Backspace key press - Character removal: Removes last typed character - Cursor movement: Moves cursor back one position - Visual reset: Removes correct/incorrect class from previous character - Word count: Decrements if deleted character was space - Index decrement: Moves index back to previous character 14. Text Generation: - Word selection: Randomly selects words from chosen word list - Random index: Math.floor(Math.random() * words.length) - Word wrapping: Each word wrapped in span elements - Character spans: Each character in separate span with class="letter" - First cursor: First character gets cursor class - Space handling: Spaces between words also wrapped in spans 15. Word Lists - Common Words: - Word count: 100+ common English words - Word types: Everyday vocabulary (tell, many, say, point, run, etc.) - Difficulty: Easiest for general typing practice - Examples: "tell", "many", "say", "point", "run", "should", "can" 16. Word Lists - Programming Terms: - Word count: 50+ programming-related terms - Word types: General programming concepts - Examples: "function", "variable", "array", "object", "string", "boolean" - Difficulty: Medium difficulty for developers 17. Word Lists - JavaScript: - Word count: 60+ JavaScript-specific keywords - Word types: JS keywords, methods, APIs - Examples: "const", "let", "function", "async", "await", "promise" - Difficulty: Medium-Hard for JS developers 18. Word Lists - Python: - Word count: 70+ Python-specific keywords - Word types: Python keywords, built-ins, methods - Examples: "def", "class", "if", "elif", "lambda", "yield" - Difficulty: Medium-Hard for Python developers 19. Word Lists - Java: - Word count: 60+ Java-specific keywords - Word types: Java keywords, classes, methods - Examples: "public", "private", "static", "class", "interface" - Difficulty: Medium-Hard for Java developers 20. Word Lists - C++: - Word count: 60+ C++-specific keywords - Word types: C++ keywords, operators, functions - Examples: "int", "double", "class", "template", "namespace" - Difficulty: Medium-Hard for C++ developers 21. Word Lists - React: - Word count: 50+ React-specific terms - Word types: React hooks, components, APIs - Examples: "React", "component", "useState", "useEffect", "props" - Difficulty: Medium-Hard for React developers 22. Word Lists - HTML: - Word count: 70+ HTML tags and attributes - Word types: HTML elements and attributes - Examples: "html", "div", "span", "button", "input", "class" - Difficulty: Medium for web developers 23. Word Lists - CSS: - Word count: 70+ CSS properties and values - Word types: CSS properties, values, units - Examples: "margin", "padding", "display", "position", "flex" - Difficulty: Medium for web developers 24. Word Lists - SQL: - Word count: 60+ SQL keywords and commands - Word types: SQL statements, clauses, functions - Examples: "SELECT", "FROM", "WHERE", "JOIN", "GROUP BY" - Difficulty: Medium-Hard for database developers 25. Word Lists - Code Snippets: - Word count: 80+ code snippet tokens - Word types: Code fragments with operators and syntax - Examples: "function", "=", "+", "return", "[", "]", "{", "}" - Difficulty: Hard (includes punctuation) 26. Word Lists - Language Code: - JavaScript Code: Code tokens with JS syntax - Python Code: Code tokens with Python syntax - Java Code: Code tokens with Java syntax - React Code: Code tokens with React/JSX syntax - Difficulty: Hard (includes syntax and operators) 27. Word Lists - Famous Quotes: - Word count: 60+ words from famous quotes - Word types: Complete quote sentences - Examples: "The", "only", "way", "to", "do", "great", "work" - Difficulty: Easy-Medium (natural language) 28. Difficulty Levels: - Easy: (Default settings, may affect word selection) - Medium: (May affect word complexity) - Hard: (May affect word complexity and length) - Expert: (Maximum difficulty) - Difficulty impact: May affect word list filtering or selection 29. Sound Effects: - Sound toggle: Enable/disable sound effects - Correct sound: 800Hz tone on correct character - Incorrect sound: 200Hz tone on incorrect character - Typing sound: 400Hz tone on any keypress - Sound duration: 0.05-0.2 seconds per sound - Audio context: Web Audio API for sound generation - Sound volume: 0.05-0.1 gain (5-10% volume) 30. Results Screen: - Display trigger: Shows when timer expires or text completed - Final WPM: Large display of final words per minute - Final accuracy: Large display with color coding - Final characters: Total characters typed - Performance message: Encouraging message based on performance - Message tiers: Outstanding (≥80 WPM, ≥90%), Excellent (≥60 WPM, ≥80%), Good (≥40 WPM, ≥70%), Not bad (≥20 WPM, ≥60%), Keep practicing (<20 WPM or <60%) - Test Again button: Returns to start screen 31. Auto-Scrolling: - Scroll trigger: Every 15 words completed - Scroll calculation: wordCount / 15 × 40 pixels - Scroll animation: Smooth scroll to next section - Text visibility: Keeps current typing area visible - Viewport management: Maintains readable text area 32. Visual Feedback: - Correct flash: Green background flash on correct characters - Incorrect flash: Red background flash on incorrect characters - Scale animation: Character scales to 1.1x during flash - Glow effects: Text shadows for visual emphasis - Color persistence: Characters keep color until deleted 33. Timer Display: - Font: Orbitron monospace font - Size: 64px (48px on mobile) - Color: Red (#FF003C) with glow - Animation: Pulse animation (scale 1.0-1.05) - Update frequency: Every 1 second - Format: "{remainingSeconds}s" 34. Stats Display Format: - Layout: Three-column display (WPM, Accuracy, Characters) - WPM color: Red (#FF003C) - Accuracy color: Green (≥90%), Yellow (≥70%), Red (<70%) - Character color: White (#EAEAEA) - Font size: 24px for values, 14px for labels - Breakdown: Shows correct/incorrect count below main stats 35. Game States: - Start screen: Initial screen with settings and start button - Game area: Active typing test screen - Results screen: Final results display - State transitions: Start → Game → Results → Start - Screen visibility: Only one screen visible at a time 36. Settings Menu: - Settings button: Top-right corner gear icon - Dropdown menu: Dropdown panel with options - Sections: Time Duration, Word List, Difficulty, Sound Effects - Selection indicators: Selected options highlighted - Close on click: Closes when option selected or outside click 37. Time Duration Options: - 15 seconds: Short test - 30 seconds: Standard test (default) - 60 seconds: Medium test - 120 seconds: Long test - Selection: Click option to select - Timer update: Timer display updates immediately 38. Word List Selection: - 17 word lists: Common, Programming, JavaScript, Python, Java, C++, React, HTML, CSS, SQL, Code Snippets, JavaScript Code, Python Code, Java Code, React Code, Quotes - Selection: Click word list name to select - Text regeneration: New text generated with selected list - List icons: Emoji icons for each list type 39. Difficulty Selection: - Options: Easy (default), Medium, Hard, Expert - Selection: Click difficulty level - Visual indicator: Selected difficulty highlighted - Impact: May affect word complexity (implementation varies) 40. Sound Options: - Sound On: All sound effects enabled (default) - Sound Off: All sound effects disabled - Minimal Sounds: Reduced sound frequency (if available) - Selection: Click sound option STRATEGIC TIPS: - Accuracy First: Focus on accuracy over speed. High accuracy (≥90%) is more important than raw speed. - Consistent Rhythm: Maintain consistent typing rhythm. Steady pace beats bursts of speed. - Finger Position: Use proper touch typing technique. Home row positioning improves speed and accuracy. - Error Recovery: Don't panic on mistakes. Continue typing - errors counted but don't stop progress. - Preview Text: Read ahead slightly. Knowing upcoming words helps typing flow. - Word Lists: Practice specific word lists. Programming lists improve coding-related typing speed. - Time Management: Use full time duration. Longer tests (60s+) give more accurate WPM measurements. - Regular Practice: Practice daily for improvement. Consistent practice builds muscle memory. - Backspace Use: Use backspace sparingly. Correcting every mistake wastes time - balance accuracy and speed. - Relaxation: Stay relaxed while typing. Tension reduces speed and increases errors. ADVANCED TECHNIQUES: - Touch Typing Mastery: Master touch typing. Typing without looking increases speed dramatically. - Muscle Memory: Build muscle memory for common words. Frequently typed words become automatic. - Code-Specific Practice: Practice language-specific lists. Familiarity with keywords increases speed. - Error Minimization: Minimize errors through practice. Fewer errors = higher accuracy = better scores. - Speed Building: Gradually increase speed. Focus on accuracy first, then build speed. - Pattern Recognition: Recognize common word patterns. Patterns like "tion", "ing" become automatic. - Rhythm Maintenance: Maintain typing rhythm. Consistent cadence improves overall performance. - Mental Preparation: Prepare mentally before test. Clear mind improves focus and accuracy. - Posture and Ergonomics: Maintain good posture. Proper ergonomics prevents fatigue and improves speed. - Goal Setting: Set specific WPM goals. Track progress and aim for improvement milestones. WINNING AND PROGRESSION: - WPM Achievement: Achieve high words per minute. Targets: Beginner (20-30), Intermediate (40-60), Advanced (70-90), Expert (100+) - Accuracy Achievement: Maintain high accuracy. Targets: Good (70-79%), Excellent (80-89%), Perfect (90-100%) - Consistency Challenge: Maintain consistent scores across multiple tests. Reliability demonstrates skill. - Word List Mastery: Master all word lists. Each list requires different skills and knowledge. - Time Duration Mastery: Master all time durations. Longer tests require endurance and consistency. - Code Typing Excellence: Excel at code-specific lists. Fast code typing improves programming productivity. - Daily Improvement: Track daily improvement. Consistent practice leads to measurable progress. - Performance Tiers: Reach higher performance tiers. Outstanding (≥80 WPM, ≥90%) demonstrates mastery. - Character Milestones: Type more characters per test. Higher character counts = higher WPM potential. - Perfect Tests: Complete tests with 100% accuracy. Perfect accuracy demonstrates precision and control. Enjoy improving your typing speed and accuracy through challenging typing tests!