当前位置：首页 > news >正文

在浏览器中创建心理学实验的终极指南：使用jsPsych框架的完整教程

news 2026/5/26 15:30:16

在浏览器中创建心理学实验的终极指南：使用jsPsych框架的完整教程

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

你是否想在浏览器中轻松创建专业的行为实验？jsPsych是一个强大的JavaScript框架，专门为心理学、认知科学和行为研究设计，让你无需复杂的编程知识就能构建在线实验。这个免费的开源工具让研究者能够在任何支持Web浏览器的设备上运行实验，从简单的反应时任务到复杂的交互式研究设计都能轻松实现。😊

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

jsPsych的核心优势在于其插件化架构和时间线系统。每个插件都像一个专门的任务模块——有的负责显示刺激材料，有的记录按键反应，还有的收集问卷数据。通过将这些插件按照时间顺序组合起来，你可以创建出几乎任何类型的实验流程。

想象一下，你需要创建一个包含指导语、刺激呈现、反应收集和问卷调查的实验。使用jsPsych，你只需要：

选择合适的插件
定义每个试次的参数
将它们按顺序排列在时间线中

就是这么简单！无需从头编写复杂的JavaScript代码，jsPsych已经为你处理了所有底层细节。

实验进度可视化：如上图所示，jsPsych支持进度条功能，让参与者清楚了解实验完成情况。这个面部识别任务展示了进度条与核心实验任务的完美结合。

跨设备兼容性：一次编写，处处运行

现代研究需要适应不同的设备环境。jsPsych天生支持响应式设计，你的实验可以在桌面电脑、平板电脑和智能手机上无缝运行。

移动端与桌面端适配：这张对比图清晰地展示了jsPsych调查插件在不同设备上的显示效果。左侧是移动设备界面，右侧是桌面端界面，两者都完美适配各自的屏幕尺寸。

插件生态系统：丰富的实验组件

jsPsych提供了超过40个内置插件，涵盖了大多数常见的实验需求：

基础刺激呈现插件

视觉刺激：图像、文本、HTML内容显示
听觉刺激：音频播放和响应收集
视频刺激：视频播放和交互控制

响应收集插件

键盘响应：记录按键反应和反应时间
按钮响应：鼠标或触摸屏点击响应
滑块响应：连续量表评分和选择

高级功能插件

问卷调查：Likert量表、多项选择、文本输入
眼动追踪：与WebGazer集成进行在线眼动研究
视频录制：记录参与者的面部表情和行为

灵活的问卷配置：通过JSON格式定义复杂的调查结构，如用户名、邮箱等文本输入项。这种配置方式让问卷设计变得既灵活又易于维护。

快速入门：5分钟创建你的第一个实验

1. 环境搭建

首先，通过Git克隆jsPsych仓库：

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

2. 创建基本实验

创建一个简单的HTML文件，包含以下代码：

<!DOCTYPE html> <html> <head> <script src="jspsych.js"></script> <script src="plugin-html-keyboard-response.js"></script> <link rel="stylesheet" href="jspsych.css"> </head> <body> <script> const trial = { type: jsPsychHtmlKeyboardResponse, stimulus: '欢迎参加实验！按任意键继续。' }; const timeline = [trial]; jsPsych.run(timeline); </script> </body> </html>

3. 添加更多试次

扩展你的时间线，添加多个试次：

const timeline = []; timeline.push({ type: jsPsychHtmlKeyboardResponse, stimulus: '准备开始第一个任务...', trial_duration: 2000 }); timeline.push({ type: jsPsychImageKeyboardResponse, stimulus: 'stimuli/face.jpg', choices: ['f', 'j'], prompt: '按F表示熟悉，按J表示陌生' }); jsPsych.run(timeline);

高级功能：让实验更专业

条件逻辑和循环

jsPsych支持复杂的实验设计，包括条件分支、循环和随机化：

const trial = { type: jsPsychImageKeyboardResponse, stimulus: jsPsych.timelineVariable('image'), data: { condition: jsPsych.timelineVariable('condition') } }; const conditions = [ {image: 'happy.jpg', condition: 'positive'}, {image: 'sad.jpg', condition: 'negative'} ]; const block = { timeline: [trial], timeline_variables: conditions, randomize_order: true };

数据收集与分析

jsPsych自动记录详细的数据，包括：

反应时间（毫秒精度）
按键或点击响应
试次开始和结束时间戳
自定义数据字段

所有数据都可以导出为CSV、JSON或直接发送到服务器。

实验刺激材料：这是金融决策任务中使用的信用卡刺激示例。jsPsych可以轻松呈现各种类型的视觉刺激，从简单的几何图形到复杂的真实世界图像。

扩展与定制：满足特殊研究需求

创建自定义插件

如果内置插件不能满足你的需求，你可以轻松创建自定义插件：

const myCustomPlugin = { type: 'custom', trial: function(display_element, trial) { // 自定义实验逻辑 display_element.innerHTML = trial.stimulus; // 收集数据 jsPsych.finishTrial({ response: 'custom_data', rt: performance.now() - start_time }); } };