Make a reaction time test with AI (no coding)

What you need

• A computer
• A free Claude account (claude.ai) or a free ChatGPT account
• No software to install

What you get

A reaction time test where you click the moment the screen turns green. It measures 5 rounds, shows your average, best time, and a rank, and has a button to send your result to friends.

Step by step

1. 1

   Go to claude.ai and sign in

   Open claude.ai in your browser and sign in. Signing up is free. For ChatGPT, go to chatgpt.com.

   You know it worked whenYou are ready when you see a chat box at the bottom of the screen.

2. 2

   Paste the prompt and send it

   Copy the prompt below, paste it into the chat box, and send it. If you already have rank names in mind, edit that line first.

   Prompt to pasteCopy prompt

   Make a reaction time test that I can play right in my browser. Put everything in a single file.
   
   - A big tap area on the screen. Pressing "Click to start" turns the screen red with the text "Wait..."
   - At a random time between 1.5 and 4 seconds, the screen turns green and says "Now!" Clicking then shows the reaction time in milliseconds (ms)
   - If I click before it turns green, show "Too soon" and repeat that round
   - Play 5 rounds in total. At the end, show the average time, the best time, and a rank in one line
   - Come up with fun rank names yourself (for example Lightning, Cat, Turtle)
   - On the results screen, add a "Share result" button. On a phone it opens the share sheet. On a computer it copies the result text
   - On a computer, pressing the space bar should work the same as clicking the screen
   - Design for a phone screen first. All text in English

   Make it yours

   • It is more fun if you choose the rank names yourself, such as "Reflex Monster" or "Sleepy Panda".
   • You can change the number of rounds (5) to 3 or 10.
   • Add extras like "play an animal sound" later, by asking.

   Want more control? (a slightly more technical version)

   Copy this version

   Make a reaction time test as one self-contained HTML file.
   - Big button area: "Tap to start" -> red background "Wait..." (random 1.5 to 4 seconds) -> green "Now!" -> tap shows ms
   - If tapped too early, show "Too soon" and repeat that round
   - After 5 rounds show the result: average, best, and a rank in one line
   - "Copy result" button: use navigator.share if available, otherwise the clipboard. End the text with the page address
   - Treat the space bar as a tap
   - Mobile first
   - All UI text in English

   You know it worked whenIn Claude, a "Click to start" screen appears in the result panel on the right.

   TipIf ChatGPT only shows a long block of code, say "Show it so I can play it right away (use Canvas)."

3. 3

   Play it all the way through once

   Click the screen to start. Wait on the red screen, then click the moment it turns green. After 5 rounds you get your result. Also click early on purpose to see that "Too soon" appears.

   You know it worked whenIf a time in milliseconds appears and an average and rank show after 5 rounds, it works.

   TipIf clicks do nothing, click the game once first. The same applies if you are using the space bar.

4. 4

   Change it by asking

   Change the fun parts and the wording by asking.

   TipTry things like "Change the rank names to animals", "Cut it down to 3 rounds", "Under 200 ms is the Lightning rank", or "Put the average time first in the shared text".

5. 5

   Check the Share result button

   On a computer, press "Share result" and paste into a notes app. The text should have been copied.

   You know it worked whenIf the pasted text includes your average time and rank, it works.

   TipAfter you make the link, say "Put this page address at the end of the shared text" so friends can take the challenge right away.

6. 6

   Turn it into a link and post it in the group chat

   Click Publish at the top right of the result panel to make a link and paste it into WhatsApp or another group chat. For the full steps, see "Share it as a link" below.

   You know it worked whenIf you open the link on your phone and a tap measures your time, you are done.

If you get stuck

Try next

• The same structure makes a typing speed test or a color-matching test just as easily.
• Collecting friends' scores in one place needs separate storage, which is a step up. Run the solo version for a while first.

Features used here

More recipes