❌

阅读视图

发现新文章，点击刷新页面。

反应力测试应用

✇掘金 前端
Younglina

项目概述

这是一个基于 Nuxt 3 构建的认知能力测试应用，旨在通过两个经典的实验测试用户的反应时间和注意力控制能力。应用采用现代化的 Vue 3 技术栈开发，所有数据均本地存储，保护用户隐私。

image.png

image.png

image.png

在线体验：younglina.wang/reaction

核心特性

  • 🎨 现代化UI设计 - 提供优雅的视觉体验
  • ⚡ 双重测试模式 - 包含颜色反应测试和 Simon Task 两套完整的认知测试
  • 📊 数据可视化 - 使用折线图实现反应时间趋势图表和统计分布
  • 💾 本地数据存储 - 基于 localStorage 的客户端数据持久化
  • 📱 响应式设计 - 完美适配桌面和移动设备
  • 🔒 隐私保护 - 所有数据保存在用户本地设备，不上传服务器

技术架构

技术栈

  • 前端框架: Nuxt 3.14.0
  • UI框架: Vue 3.5.0
  • 开发语言: TypeScript 5.0.0
  • 样式方案: Tailwind CSS 3.4.0
  • 图表库: Chart.js 4.4.0 + vue-chartjs 5.3.0
  • 构建工具: Vite (内置于 Nuxt 3)
  • 包管理器: npm

功能详解

1. 颜色反应测试 (Color Test)

颜色反应测试是评估简单视觉反应时间的经典实验。

测试原理

  1. 屏幕初始显示蓝色背景
  2. 随机延迟一定时间后变为红色
  3. 用户点击屏幕
  4. 系统记录反应时间（毫秒）

核心实现

const startTest = () => {

  // 设置随机延迟 (1-4秒)
  const delay = Math.floor(Math.random() * 3000) + 1000

  changeTimer = setTimeout(() => {

    changeTimestamp = performance.now()

    backgroundColor.value = 'bg-red-500'

    displayStatus.value = '点击!'

  }, delay)

}

const handleClick = () => {

  if (!isRunning) return

  // 计算反应时间
  const rt = Math.round(performance.now() - changeTimestamp)

  reactionTimes.push(rt)

  recalcStats()

  saveStats()

}

数据统计

  • 测试次数: 累计测试总数
  • 平均反应时间: 所有测试的平均值
  • 最快反应时间: 历史最佳成绩
  • 趋势图表: 折线图显示反应时间变化趋势

2. Simon Task

Simon Task 是测试认知控制和注意力分配的经典实验。

测试原理

  • 规则: 出现红色点击左边，出现绿色点击右边
  • 干扰: 颜色可能出现在屏幕左侧或右侧
  • 目标: 测试用户是否能克服空间位置干扰，正确执行颜色-动作映射

统计指标

  • 正确率: 正确反应百分比
  • 平均反应时间: 正确反应的平均时间
  • 错误次数: 测试过程中的错误反应
  • 进度跟踪: 当前测试进度（12次试验）

数据可视化

项目使用 Chart.js 的折线图与柱状图实现数据可视化。

许可证

MIT License 源码地址：github.com/Younglina/r…

❌