Free Online Visual and Audio Reaction Time Test Tool

Overview

A clean, high-performance web utility designed to measure user response times to visual and auditory stimuli. The tool provides a professional interface for quick reflex assessments, ensuring sub-millisecond precision using the browser's high-resolution timer API.

Core Features

• Visual Reaction Mode: A signal-based test where users click as soon as the screen changes color (Red to Green).
• Audio Reaction Mode: A signal-based test where users click as soon as a sharp beep sound is generated.
• Precision Metrics: Real-time calculation of current reaction time, average of the current session, and best/fastest time.
• In-Memory Statistics: Tracking of session attempts without utilizing local storage (fully sandboxed compatible).
• Interactive Feedback: Visual animations indicating 'Too Early' if the user clicks before the stimulus occurs.
• Responsive Interface: Designed to look crisp on desktop, tablet, and mobile screens.

UI/UX Design

• Layout:
  • Header: Clean title and simple instructions.
  • Main Area: A large, centralized 'click zone' that changes color or prompts interaction.
  • Stats Panel: A neatly organized row below the main zone displaying 'Average', 'Fastest', and 'Attempts'.
  • Mode Selection: A toggle or button group at the top to switch between Visual and Audio testing.
• Color Palette (Light Mode Only):
  • Background: #f8fafc (Cool Grey)
  • Primary Action: #2563eb (Vibrant Blue)
  • Success State: #16a34a (Green)
  • Error State: #dc2626 (Red)
  • Text: #1e293b (Slate)
• Animations & Micro-interactions:
  • Button 'scale' transitions on hover.
  • Smooth background color shifts (e.g., transition from Gray to Green for visual test).
  • Subtle fade-in for result cards.

Technical Directives

• Architecture: One single HTML file (CSS in <style>, JS in <script>).
• Storage Constraints: Strictly forbidden. Do not use localStorage, sessionStorage, or cookies. Maintain state using in-memory variables only. Reset state on refresh.
• Sandbox Compatibility: Do not use alert(), confirm(), or prompt(). Create custom CSS modals if confirmation is needed.
• Audio Handling: Use the Web Audio API (OscillatorNode) for generated, low-latency audio signals rather than external MP3 files to ensure consistency.
• Performance: Use performance.now() for all timing calculations to avoid drift associated with Date.now().
• Libraries: Only lightweight CDN-based libraries allowed (e.g., Tailwind CSS via CDN for styling). No bundling steps.