Skip to content

⌨️ Typing Speed Test

Live at: aguidetocloud.com/typing-test/ Built: April 2026 Cost: $0 — 100% client-side JavaScript, zero API calls, zero CDN dependencies

What It Does

A world-class typing speed test rivalling MonkeyType and TypeRacer. Measures WPM, accuracy, and consistency with real-time character tracking, practice modes for quotes and code, and a full stats dashboard with keyboard heatmap. Runs entirely in the browser — no data ever leaves the user's device.

Architecture Overview

┌──────────────────────────────────────────────────────────────┐
│               100% Client-Side (No API Calls)                │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  Hidden <textarea>  ─→  input event                          │
│       ↓                                                      │
│  Character-by-character comparison                           │
│  (optimised: only update changed range per keystroke)         │
│       ↓                                                      │
│  Span class updates: correct / incorrect / current / extra   │
│       ↓                                                      │
│  Live stats: WPM / Raw WPM / Accuracy / Timer / Chars        │
│       ↓                                                      │
│  Timer ends OR text complete → Results overlay               │
│       ↓                                                      │
│  Save to localStorage → Stats / Heatmap / Trend chart        │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│  content/typing-test/_index.md         (front matter + FAQ)  │
│  layouts/typing-test/list.html         (Hugo template)       │
│  static/js/typing-test.js             (~46KB, v2)            │
│  static/css/typing-test.css           (~19KB)                │
│  Accent: #34D399 (Spring Green)                              │
│  CSS namespace: .typist-*                                    │
│  Body class: page-typing-test                                │
└──────────────────────────────────────────────────────────────┘

Features

Tab 1: ⚡ Quick Test (Default)

Feature Details
Time mode 15s, 30s, 60s (default), 120s countdown
Word count mode 10, 25, 50, 100 words — timer counts up
Punctuation toggle Injects .,;:!? and capitalisation (~18% of words)
Numbers toggle Replaces ~12% of words with 3-4 digit numbers
Auto-extend Generates for 350 WPM ceiling + dynamically appends 40 more words when nearing end — fast typists never run out
Anti-cheat Paste blocked, WPM capped at 250, result not saved if exceeded

Tab 2: 📝 Practice Modes

Mode Content
💬 Quotes 33 famous quotes about technology, learning, and life — with author attribution
💻 Code 20 real snippets: JavaScript (5), Python (5), PowerShell (5), HTML/CSS (5) — multiline with ↵ markers
✏️ Custom Paste any text to practice — focus not stolen from textarea
🔢 Numbers & Symbols IP addresses, URLs, prices, dates, hex colours, SQL, shell commands

Tab 3: 📊 My Stats

Feature Details
Overview cards Tests Taken, Best WPM, Avg WPM, Last 10 Avg, Avg Accuracy, Time Spent
WPM Trend chart Canvas line chart of last 20 tests with gradient fill
Problem Keys heatmap Full QWERTY keyboard layout coloured by error rate (green→red) + space bar
Recent Tests table Last 20 results with Date, Mode, WPM, Raw WPM, Accuracy, Duration — horizontally scrollable on mobile
Accessible summary sr-only text listing top 5 problem keys

Results Overlay

Feature Details
Net WPM Animated counter (easeOutCubic) — standard: correct chars / 5 / minutes
Raw WPM Total chars typed / 5 / minutes
Accuracy correct / total typed × 100
Consistency 100% − coefficient of variation of WPM samples (every 2s)
Character breakdown Correct / Incorrect / Extra / Missed counts
Key Confusion Up to 20 expected→actual character pairs — only tracks forward typing (backspace doesn't corrupt)
Sparkline Canvas WPM-over-time chart with gradient fill and dots
Personal Best 🎉 pulse badge — mode-aware (words PB ≠ code PB)
Quote attribution Shows "— Author" after quote tests
Share Web Share API → clipboard copy → PNG download fallback
Page title Updates to "Typing Test — 72 WPM

UX Features

Feature Details
Retro terminal theme Green-on-black, scanlines, CRT flicker — toggle in toolbar
Key click sounds Web Audio API sine oscillator (600-1000Hz, 50ms) — toggle on/off
Keyboard shortcuts Ctrl+Enter restart, Esc end early
Auto-focus Typing anywhere on the page focuses the input (skips form elements)
Auto-scroll Instant (not smooth) scroll keeps current line in view — no lag at high WPM
Mobile hint Dismissible "Use a physical keyboard" warning (× button, shown <768px)
Reduced motion Respects prefers-reduced-motion — disables blink/CRT/slide animations

Text Content Inventory

Type Count Source
Common English words 200+ Embedded in JS (top frequency words, mixed lengths)
Famous quotes 33 With author attribution — tech, learning, life
Code snippets 20 5 JavaScript + 5 Python + 5 PowerShell + 5 HTML/CSS
Number/symbol patterns 35+ IPs, URLs, prices, dates, hex, SQL, shell commands

Technical Deep-Dive

WPM Calculation (Standard)

Net WPM  = (correct characters / 5) / elapsed minutes
Raw WPM  = (all typed characters / 5) / elapsed minutes
Accuracy = correct / total typed × 100

5 characters = 1 standard word. This is the universal standard used by MonkeyType, TypeRacer, and professional typing tests.

Consistency Algorithm

1. Sample WPM every 2 seconds during test → wpmHistory[]
2. Calculate mean and standard deviation
3. Coefficient of Variation (CV) = stdDev / mean
4. Consistency = max(0, round((1 - CV) × 100))

High consistency (90%+) = steady pace. Low = erratic bursts and slowdowns.

Optimised Rendering

Instead of updating all character spans on every keystroke, v2 only updates the changed range:

const lo = Math.max(0, Math.min(prevTypedLen, newTypedLen) - 1);
const hi = Math.min(Math.max(prevTypedLen, newTypedLen) + 1, textLength);
// Only loop lo → hi (typically 2-3 spans, not 500+)

Dynamic Text Extension

For timed tests, text is generated for 350 WPM (enough for the fastest typists). If a user still approaches the end, extendText() appends 40 more words and injects new spans via insertAdjacentHTML — no full re-render.

Key Error Tracking

  • Only records on forward typing (newLen > oldLen) — backspace doesn't corrupt stats
  • Tracks both aggregate error rates (for heatmap) and individual confusion pairs (expected→actual)
  • PB comparison is mode-aware — words PB is separate from code PB

File Structure

aguidetocloud-revamp/
├── content/typing-test/
│   └── _index.md              # Front matter, 8 FAQ items, SEO
├── layouts/typing-test/
│   └── list.html              # Hugo template, JSON-LD schemas, 3 tabs
├── static/css/
│   └── typing-test.css        # ~19KB, .typist-* namespace, retro theme
└── static/js/
    └── typing-test.js         # ~46KB, v2, complete typing engine

SEO

  • WebApplication + FAQPage JSON-LD schemas
  • 8 FAQ items visible on page + in schema
  • Pagefind searchable content block
  • Front matter: type: "typing-test", sitemap.priority: 0.8

Data Storage (localStorage)

Key Content
typist_stats {results: [{wpm, rawWpm, acc, consistency, correct, incorrect, extra, missed, mode, duration, date, codeLang}], keyErrors: {}, keyAttempts: {}, totalTime: 0} — last 100 results
typist_theme "modern" or "retro"
typist_sound "true" or "false"

All writes wrapped in try/catch for restricted environments.

Colour Note

⚠️ Accent #34D399 (HSL ~158°) is only ~2° from Cert Guides #10B981 (~160°). Violates the ≥30° hue distance rule in tool_colours.toml. Must be resolved before integration into toolkit nav/free-tools page. Candidate alternatives: ~95°–140° (yellow-green) gap is wide open.

Integration Status (NOT YET DONE)

The tool is built and working but NOT integrated into the site ecosystem:

  • [ ] Add to data/toolkit_nav.toml (prev/next nav)
  • [ ] Add to data/tool_colours.toml (resolve colour collision first)
  • [ ] Add body class page-typing-test to baseof.html chain
  • [ ] Add to Free Tools page (content/free-tools/_index.md)
  • [ ] Add to homepage toolkit cards
  • [ ] Add to nav dropdown
  • [ ] Bump tool_count in hugo.toml
  • [ ] Bump cache_version in hugo.toml
  • [ ] Add SWA cache route for /typing-test/*
  • [ ] Run smoke test after integration

Maintenance

Task Frequency
Add more quotes As desired — edit QUOTES array in JS
Add more code snippets As desired — edit CODE object in JS
Word list updates Rarely needed — 200+ common words covers most tests
Bug fixes Based on user feedback via /feedback/

Build & Critique History

  • v1 (2026-04-13): Initial build — 3 tabs, all features, retro theme, sound effects, 29/29 HTML checks
  • v1 → v1.1: Rubber-duck critique found 2 critical bugs (multiline code broken, focus stealing), 5 high issues. All fixed: textarea for multiline, Ctrl+Enter shortcut, instant scroll, focus-visible, dialog semantics, localStorage guards
  • v1.1 → v2: Added 13 features: punctuation/numbers toggles, word count mode, raw WPM, quote attribution, PB badge, error breakdown, Web Share API, chart resize, optimised rendering, dismissible mobile hint, better contrast, accessible heatmap
  • v2 → v2.1: Second critique found text exhaustion for fast typists, backspace stat corruption, cross-mode PB mixing, mobile overflow. All fixed: 350 WPM ceiling + auto-extend, forward-only tracking, mode-aware PB, scroll wrappers