Skip to main content
Prompts Interactive Typing Speed Test Web App

developer coding user risk: low

Interactive Typing Speed Test Web App

Build an interactive typing speed test using HTML5, CSS3, and JavaScript with a clean interface, real-time WPM and accuracy calculations, difficulty levels, error highlighting, tes…

PROMPT 

Build an interactive typing speed test using HTML5, CSS3, and JavaScript. Create a clean interface with text display and input area. Implement WPM and accuracy calculation in real-time. Add difficulty levels with appropriate text selection. Include error highlighting and correction tracking. Implement test history with performance graphs. Add custom test creation with text import. Include virtual keyboard display showing keypresses. Support multiple languages and keyboard layouts. Create a responsive design for all devices. Add competition mode with leaderboards.

ROLES & RULES

  1. Build an interactive typing speed test using HTML5, CSS3, and JavaScript.
  2. Create a clean interface with text display and input area.
  3. Implement WPM and accuracy calculation in real-time.
  4. Add difficulty levels with appropriate text selection.
  5. Include error highlighting and correction tracking.
  6. Implement test history with performance graphs.
  7. Add custom test creation with text import.
  8. Include virtual keyboard display showing keypresses.
  9. Support multiple languages and keyboard layouts.
  10. Create a responsive design for all devices.
  11. Add competition mode with leaderboards.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Implement all specified features including real-time metrics, history graphs, custom tests, virtual keyboard, multi-language support, responsive design, and leaderboards

FAILURE MODES

  • Partial implementation omitting advanced features like leaderboards or graphs.
  • Using external libraries instead of pure HTML5/CSS3/JS.
  • Non-responsive design failing on mobile.
  • Inaccurate WPM/accuracy calculations.
  • Lack of error highlighting or multi-language support.

CAVEATS

Missing context
  • Backend technologies for leaderboards and multiplayer features.
  • List of supported languages and keyboard layouts.
  • UI/UX design guidelines or wireframes.
  • Exact formulas and thresholds for WPM, accuracy, and error tracking.
  • Data persistence details (localStorage, IndexedDB, or server).
Ambiguities
  • Does not specify WPM and accuracy calculation formulas.
  • Unclear storage mechanism for test history and leaderboards (local vs server).
  • Does not define difficulty levels or text selection criteria.
  • Leaderboards and competition mode imply backend, but only frontend technologies listed.
  • Virtual keyboard: unclear if always visible or toggleable, and how keypresses are shown.

QUALITY

OVERALL
0.60
CLARITY
0.90
SPECIFICITY
0.70
REUSABILITY
0.30
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Specify standard WPM formula: (characters typed correctly / 5) / minutes.
  • Add 'Use localStorage for history and mock leaderboards; suggest Firebase for real backend.'
  • Break into phases: '1. Core typing test with WPM/accuracy. 2. Add difficulty levels. 3. History and graphs, etc.'
  • Define difficulty levels: 'Easy: short words; Medium: mixed; Hard: long words/quotes.'
  • Include responsive breakpoints and CSS framework suggestion like Tailwind.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER