jsPsych行为实验设计入门指南：从问题到实现的实践之路

实验流程组织：时间线应用

场景问题

你需要设计一个包含欢迎界面、多个实验试次和结束页面的完整实验流程，如何有序组织这些步骤？

解决方案

使用Timeline（时间线）：控制实验流程的核心数据结构，按顺序执行一系列实验节点。

// 创建时间线数组
const timeline = [];

// 欢迎页面
const welcome = {
  type: 'html-keyboard-response',
  stimulus: '欢迎参加记忆实验<br><br>按任意键开始'
};
timeline.push(welcome);

// 实验试次（简化版）
const trial = {
  type: 'image-keyboard-response',
  stimulus: 'img/card.png',
  choices: ['y', 'n'],
  prompt: '是否见过这张卡片？(Y/N)'
};
// 添加多个试次
for (let i = 0; i < 5; i++) {
  timeline.push(trial);
}

// 结束页面
const goodbye = {
  type: 'html-keyboard-response',
  stimulus: '实验结束，感谢参与！'
};
timeline.push(goodbye);

// 初始化实验
jsPsych.init({ timeline: timeline });

[!TIP] 时间线支持嵌套结构，可通过timeline属性创建复杂的分支流程，特别适合多阶段实验设计。

效果验证

运行实验后，你将看到按顺序呈现的欢迎页→5个实验试次→结束页的完整流程。每个试次间会自动过渡，无需手动控制。

参与者进度反馈：进度条实现

场景问题

当实验包含多个试次时，参与者不清楚整体进度，可能导致中途退出。如何提供直观的进度反馈？

解决方案

启用内置的进度条功能，通过show_progress_bar配置项实现。

jsPsych.init({
  timeline: timeline,
  show_progress_bar: true,
  progress_bar_label: '实验进度',
  on_finish: () => jsPsych.data.displayData()
});

效果验证

实验运行时，页面顶部会显示一个进度条，随试次推进逐渐填充，帮助参与者了解当前完成比例。这在超过20个试次的实验中尤为重要，能显著降低中途退出率。

多设备适配：响应式设计应用

场景问题

你的实验需要在电脑、平板和手机上都能正常运行，但不同设备的屏幕尺寸差异很大，如何确保一致的用户体验？

解决方案

利用jsPsych内置的响应式设计特性，无需额外代码即可实现多设备适配。

const survey = {
  type: 'survey-likert',
  questions: [
    {
      prompt: '这个实验界面是否易于操作？',
      labels: ['非常困难', '困难', '一般', '容易', '非常容易']
    }
  ]
};
timeline.push(survey);

效果验证

在不同设备或浏览器开发者工具的设备模拟模式下运行实验，你会发现界面元素会自动调整大小和布局，确保在手机（左图）和桌面设备（右图）上都有良好表现。

界面样式定制：CSS修改技巧

场景问题

默认实验界面过于简单，你需要根据研究需求调整字体、颜色和布局，如何高效修改样式？

解决方案

通过浏览器开发者工具定位元素类名，然后编写自定义CSS覆盖默认样式。

/* 自定义刺激文本样式 */
.jspsych-stimulus {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 24px;
  color: #333333;
  margin-bottom: 30px;
}

/* 自定义按钮样式 */
.jspsych-btn {
  background-color: #4CAF50;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
}

效果验证

使用浏览器的开发者工具（如上图所示），可以实时查看和修改元素样式。刷新实验页面后，自定义样式将生效，使实验界面更符合研究需求和品牌风格。

数据收集与导出：结果处理方案

场景问题

实验完成后，如何收集和导出参与者的反应时、按键选择等数据进行后续分析？

解决方案

使用jsPsych的数据模块，通过简单的API调用来获取和导出数据。

// 实验结束时导出数据
jsPsych.init({
  timeline: timeline,
  on_finish: function() {
    // 显示数据
    jsPsych.data.displayData();
    
    // 导出为CSV
    const csvData = jsPsych.data.get().csv();
    
    // 可以发送到服务器或本地保存
    console.log("CSV数据:", csvData);
  }
});

效果验证

实验结束后，控制台将输出CSV格式的数据，包含每个试次的详细信息。你可以将这些数据导入Excel或统计软件进行进一步分析。数据包含反应时、按键、刺激内容等关键信息，精确到毫秒级。

实战挑战

尝试完成以下练习，巩固所学知识：

1. 记忆研究实验：创建一个包含10个试次的图片记忆实验，前5个试次呈现不同图片（学习阶段），后5个试次混合呈现新旧图片（测试阶段），要求参与者判断是否见过该图片。

2. 情绪启动实验：设计一个情绪启动实验，先呈现积极或消极的情绪图片（启动刺激），然后呈现中性词汇，要求参与者对词汇进行褒贬判断，分析不同情绪启动对反应时的影响。

3. 问卷与行为结合实验：结合survey-likert和image-keyboard-response插件，先让参与者完成情绪状态问卷，然后进行情绪识别实验，分析问卷结果与实验表现的相关性。

附录：常见错误速查表

错误类型	可能原因	解决方案
插件未找到	插件名称拼写错误或未正确引入	检查插件类型字符串是否正确，确保插件文件已加载
图片不显示	路径错误或文件不存在	使用相对路径，确保图片文件位于正确目录
反应时异常	刺激呈现时间设置不当	检查stimulus_duration和trial_duration参数
数据丢失	未正确配置数据收集	使用data参数明确指定需要记录的信息
进度条不显示	初始化配置错误	确保show_progress_bar设置为true且在正确位置

通过本指南，你已经掌握了jsPsych的核心功能和应用方法。尝试将这些知识应用到你的研究中，创建专业、可靠的行为实验吧！记住，实验设计的关键在于清晰的逻辑和严谨的控制，而jsPsych正是帮助你实现这一目标的强大工具。