Typing Speed Test Game
Type a randomly chosen sentence and get a live words-per-minute and accuracy score. The project shows how to track typed input against a target string, highlight correct and incorrect characters as you type, and compute a final score.
Live result
Run the original project
Complete source
Read and copy the code
Inside the project
How it works
- A random target sentence is split into individual character spans so each one can be styled independently.
- An input event listener compares typed text against the target character by character on every keystroke.
- A timer starts on the first keystroke and stops automatically once every character has been typed, producing the final WPM and accuracy.
Try it yourself
Run and customize it
- 01Open the live preview and start typing the displayed sentence into the text box.
- 02Watch each character turn green for correct or red for incorrect as you type.
- 03Finish typing the full sentence to see your words-per-minute and accuracy score.
- 04Click New sentence to try again with a different randomly chosen sentence.
Learning goals
What to study in this source
- Understand how to compare two strings character by character and reflect the result in the DOM in real time.
- See how a simple timer started on first input and stopped on completion produces an accurate elapsed-time measurement.
- Learn the standard words-per-minute formula: typed characters divided by five, divided by elapsed minutes.
Next experiments
Useful ways to customize it
- Add more sentences to the SENTENCES array, or load sentences from a longer list for more variety.
- Track and display a best WPM score across attempts using browser storage.
- Add a difficulty mode that penalizes accuracy more heavily for incorrect characters.
Common questions
Typing Speed Test Game FAQs
How is words-per-minute calculated in this typing test?
WPM is calculated as the number of typed characters divided by five (the standard average word length), divided by the elapsed time in minutes.
What happens if I make a typing mistake?
The incorrect character is highlighted in red immediately, but you can keep typing. Your final accuracy score reflects the percentage of characters typed correctly.
When does the timer start and stop?
The timer starts on your very first keystroke and stops automatically the moment you finish typing every character of the target sentence.
Can I add my own practice sentences?
Yes. Open the project in Code Studio and add new strings to the SENTENCES array near the top of the script.
Does the typing test work on mobile devices?
Yes. The text box works with the on-screen keyboard on phones and tablets, though a physical keyboard gives a more accurate speed reading.
How do I download and run the typing test?
Download the project ZIP, extract index.html, and open it in any modern browser. No build step or server is required.
More source code
Related projects
Neon Space Defender
A complete neon canvas shooter with waves, bosses, power-ups, keyboard controls, and mobile touch controls.
beginner / 1 fileMemory Match Card Game
A complete card-flip memory matching game with move counter, timer, and win detection in one HTML file.
advanced / 1 fileRealistic JavaScript Sun
A responsive Canvas solar animation with plasma texture, sunspots, flares, corona rays, and orbiting energy.