I Built a Reaction Time Test in 100 Lines of Vanilla JS — Here's How It Works

#javascript #webdev #tutorial #beginners

Most reaction time test websites are either bloated, full of ads, or don't work well on mobile. So I built my own — in a single HTML file with zero dependencies.

It now ranks on Google for "reaction time test" and serves thousands of users. Here's the code and how it works.

The Game Logic (60 lines of JS)

The test runs 5 trials. Each trial:

Shows a red screen with "Wait for green..."
After a random delay (1–4 seconds), the screen turns green
The user clicks as fast as possible
We measure the time between green appearing and the click

function runTrial() {
  if (currentTrial >= 5) { showResults(); return; }

  // Show waiting state
  screen.className = 'waiting';

  // Random delay: 1000–4000ms
  const delay = 1000 + Math.random() * 3000;

  const timeout = setTimeout(() => {
    screen.className = 'ready'; // Turn green
    readyTime = performance.now();
    waiting = true;
  }, delay);
}

screen.addEventListener('click', () => {
  if (!waiting) {
    // False start — they clicked too early
    clearTimeout(timeout);
    currentTrial++;
    runTrial();
    return;
  }

  // Real reaction time in milliseconds
  const reactionTime = Math.round(performance.now() - readyTime);
  trials.push(reactionTime);
  currentTrial++;
  runTrial();
});

The Random Delay Matters

If the delay were predictable, people would game the test. The random 1–4 second gap makes anticipation impossible — you can only react, not predict.

This is simple visual reaction time, the same type used in sports science and cognitive research.

False Start Detection

If you click before the screen turns green, we catch it and exclude that trial. This prevents "lucky" early clicks from skewing your average.

Score Rating

After 5 trials, we calculate the average and map it to a rating:

Score	Rating
< 150 ms	World Class (approaching biological limit)
150–180 ms	Elite (competitive gamer level)
180–210 ms	Excellent
210–250 ms	Above Average
250–300 ms	Average
> 300 ms	Below Average

What I Learned About SEO

Here's the surprising part: the keyword "reaction time game" has a KD (Keyword Difficulty) of 4.8 out of 100. The #2 result is a site with DR 0, 8 months old, and terrible UX. The #6 result is a mattress company. Google is literally using Reddit posts to fill the content gap.

For developers thinking about building tool websites: find keywords where the SERP looks broken. If competitors have garbage UX and zero backlinks, you can win with a better product — no SEO tricks needed.