如何在浏览器中快速创建行为实验：jsPsych完整指南

如何在浏览器中快速创建行为实验：jsPsych完整指南

【免费下载链接】jsPsychCreate behavioral experiments in a browser using JavaScript项目地址: https://gitcode.com/gh_mirrors/js/jsPsych

你是否想过，能否在浏览器中轻松构建专业的行为实验？jsPsych正是这样一个强大的JavaScript框架，让研究人员和开发者能够在Web浏览器中创建心理学、认知科学和行为科学的在线实验。无需复杂的服务器设置，无需昂贵的专业软件，只需要基本的JavaScript知识，你就可以开始构建专业的实验流程。

为什么选择jsPsych进行在线行为实验？

jsPsych是一个专门为行为科学研究设计的开源框架，它解决了传统实验软件的几个痛点：

1. 跨平台兼容性- 实验可以在任何现代浏览器中运行，无论是桌面端还是移动设备
2. 数据收集自动化- 自动记录反应时间、按键响应、鼠标交互等数据
3. 插件化架构- 丰富的插件库覆盖了大多数实验需求
4. 零成本部署- 完全免费开源，无需任何许可费用

核心功能：插件与时间线的完美结合

jsPsych的核心设计理念基于两个关键概念：插件和时间线。这种设计让实验构建变得直观且灵活。

🧩 插件系统：实验构建的基础模块

每个jsPsych插件都是一个独立的功能单元，负责特定的实验任务。例如：

• 刺激呈现插件：显示文字、图片、音频、视频等刺激材料
• 响应收集插件：记录键盘按键、鼠标点击、滑块选择等用户响应
• 特殊功能插件：实现眼动追踪、问卷调查、进度条显示等高级功能

实验进度条界面：顶部进度条清晰显示完成进度，中间呈现刺激材料，下方收集用户响应

📋 时间线：实验流程的可视化管理

时间线是jsPsych的另一个核心概念，它定义了实验的执行顺序。通过将插件按顺序排列，你可以轻松创建复杂的实验流程：

var timeline = []; // 显示欢迎信息 timeline.push({ type: jsPsychHtmlKeyboardResponse, stimulus: '欢迎参加实验！按任意键继续...' }); // 呈现刺激并收集响应 timeline.push({ type: jsPsychImageKeyboardResponse, stimulus: 'images/stimulus.png', choices: ['f', 'j'] }); // 运行实验 jsPsych.run(timeline);

跨设备适配：移动端与桌面端的无缝体验

现代研究需要适应不同的设备环境。jsPsych提供了出色的响应式设计，确保实验在不同设备上都能正常工作。

jsPsych调查插件在移动端（左）和桌面端（右）的自适应显示效果

移动端适配的关键特性：

1. 自动布局调整- 界面元素根据屏幕尺寸自动重新排列
2. 触摸友好设计- 按钮和交互元素针对触摸屏进行了优化
3. 响应式媒体- 图片和视频自动缩放以适应不同分辨率

数据收集与平台集成：专业研究的完整解决方案

对于学术研究而言，数据质量和完整性至关重要。jsPsych提供了完善的数据收集和管理功能。

🔍 精确的数据记录

jsPsych自动记录每个实验试次的详细数据，包括：

• 刺激呈现时间戳
• 用户响应时间和准确性
• 实验参数和配置信息
• 设备信息和浏览器特性

🔗 与主流平台的无缝集成

jsPsych与Prolific、Amazon Mechanical Turk等主流众包平台完美集成。实验完成后，系统可以自动重定向到平台完成页面，确保数据收集的完整性和合规性。

实验完成后的平台重定向设置，确保数据收集的完整性

开始你的第一个jsPsych实验

第一步：环境搭建

首先，你需要获取jsPsych。最简单的方式是通过CDN引入：

<script src="https://unpkg.com/@jspsych/dist/jspsych.js"></script> <link rel="stylesheet" href="https://unpkg.com/@jspsych/dist/jspsych.css">

第二步：创建基本实验

让我们创建一个简单的反应时间实验：

// 初始化jsPsych const jsPsych = initJsPsych(); // 创建时间线 const timeline = []; // 添加注视点 timeline.push({ type: jsPsychHtmlKeyboardResponse, stimulus: '+', trial_duration: 1000 }); // 添加刺激呈现试次 timeline.push({ type: jsPsychImageKeyboardResponse, stimulus: 'images/blue.png', choices: ['f', 'j'], prompt: '按F键表示蓝色，按J键表示橙色' }); // 运行实验 jsPsych.run(timeline);

第三步：查看和分析数据

实验结束后，你可以轻松访问收集的数据：

// 获取所有数据 const data = jsPsych.data.get(); // 导出为CSV格式 const csv = jsPsych.data.get().csv();

高级功能：扩展你的实验能力

🎯 自定义插件开发

如果现有的插件不能满足你的需求，jsPsych允许你创建自定义插件。插件开发模板提供了极大的灵活性，几乎可以实现任何浏览器支持的功能。

📊 实时数据可视化

jsPsych支持在实验过程中实时显示数据图表，这对于调试和监控实验进展非常有用。

🔧 实验参数化

通过时间线变量，你可以轻松创建参数化的实验设计，实现拉丁方设计、随机化条件等高级实验方法。

学习资源与社区支持

📚 官方文档与教程

jsPsych拥有完善的文档系统，涵盖了从入门到高级的所有主题：

• 快速入门指南：docs/tutorials/hello-world.md
• 反应时间任务教程：docs/tutorials/rt-task.md
• 插件开发指南：docs/developers/plugin-development.md

🎓 丰富的示例代码

项目中的/examples目录包含了大量现成的实验示例，你可以直接运行和修改这些示例来学习jsPsych的各种功能。

🤝 活跃的社区支持

jsPsych拥有一个活跃的开发者社区，你可以在GitHub讨论区提出问题、分享经验或寻求帮助。

最佳实践：构建高质量在线实验

1. 预加载媒体文件

确保所有图片、音频和视频文件在实验开始前正确加载，避免加载延迟影响实验计时。

2. 测试跨浏览器兼容性

在不同的浏览器和设备上测试你的实验，确保所有功能正常工作。

3. 实现进度反馈

使用进度条插件让参与者了解实验进度，提高参与度和数据质量。

4. 数据备份机制

实现自动数据保存功能，防止因网络问题导致数据丢失。

总结：jsPsych带来的研究革命

jsPsych不仅仅是一个技术工具，它正在改变行为科学研究的方式。通过将实验迁移到浏览器中，研究人员可以：

• 扩大样本规模- 在线实验可以触及全球参与者
• 降低研究成本- 无需专门的实验室设备
• 提高实验可重复性- 代码化的实验设计确保精确复制
• 加速研究进程- 快速迭代和修改实验设计

无论你是心理学学生、认知科学研究者，还是希望进行在线行为实验的开发者，jsPsych都提供了一个强大而灵活的平台。它的插件化设计、丰富的文档和活跃的社区支持，让你能够专注于研究问题本身，而不是技术实现的细节。

开始你的jsPsych之旅吧！克隆项目仓库，运行示例代码，很快你就能创建出专业的在线行为实验。

git clone https://gitcode.com/gh_mirrors/js/jsPsych

探索核心功能源码：packages/jspsych/src/，深入了解这个强���框架的内部工作原理。

【免费下载链接】jsPsychCreate behavioral experiments in a browser using JavaScript项目地址: https://gitcode.com/gh_mirrors/js/jsPsych