如何在现有jsPsych实验结束后加载独立文件夹中的另一实验并保留时间线？

方案1：将独立实验改为ES模块（推荐） #

这种方式能让两个实验在同一个jsPsych实例中运行，过渡完全流畅，数据天然合并，无需额外通信。

1. 改造Digit Span实验为可导入模块
   在Digit Span实验的核心js文件（比如digitspan/digitspan.js）中，导出实验的时间线和配置：

   // digitspan/digitspan.js
   // 导出实验时间线
   export const digitSpanTimeline = [
     // 原Digit Span实验的所有timeline节点
   ];
   
   // 可选：导出实验配置（如果有自定义设置）
   export const digitSpanConfig = {
     // 保留原配置，但移除on_finish（留到主实验统一处理）
   };
   

   同时修改Digit Span的HTML文件，让它既能单独运行也能被导入：

   <!-- digitspan/digitspan.html -->
   <script type="module">
     import { digitSpanTimeline, digitSpanConfig } from './digitspan.js';
     jsPsych.run(digitSpanTimeline, digitSpanConfig);
   </script>
   

2. 主实验中导入并合并时间线
   在主实验的核心js文件中，直接导入Digit Span的时间线并追加到主实验流程末尾：

   // main/main.js
   import { digitSpanTimeline } from '../digitspan/digitspan.js';
   
   // 主实验时间线
   const mainTimeline = [
     // 主实验的所有节点
   ];
   
   // 合并两个实验的时间线
   mainTimeline.push(...digitSpanTimeline);
   
   // 统一配置实验，在最终完成时获取完整数据
   jsPsych.run(mainTimeline, {
     on_finish: () => {
       // 获取包含主实验和Digit Span的完整时间线数据
       const fullData = jsPsych.data.get().json();
       // 这里可以处理或保存数据
       console.log(fullData);
     }
   });
   

方案2：iframe加载+postMessage通信（适合无法修改独立实验的场景） #

如果不能重构Digit Span实验的代码，可用iframe加载实验，再通过浏览器的postMessage接口传递数据。

1. 主实验末尾添加iframe加载逻辑
   在主实验的时间线最后，添加一个自定义trial来启动Digit Span实验：

   // 主实验最后一个trial
   const loadDigitSpanTrial = {
     type: 'html-button-response',
     stimulus: '即将开始Digit Span实验，请点击按钮继续',
     choices: ['开始'],
     on_finish: () => {
       // 创建全屏iframe加载Digit Span实验
       const iframe = document.createElement('iframe');
       iframe.src = '../digitspan/digitspan.html';
       iframe.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;border:none;';
       document.body.appendChild(iframe);
   
       // 监听来自iframe的数据消息
       window.addEventListener('message', (event) => {
         // 验证消息来源，确保安全
         if (event.origin === window.location.origin && event.data.type === 'digitspan_data') {
           // 获取两个实验的数据并合并
           const mainData = jsPsych.data.get().json();
           const digitSpanData = event.data.data;
           const fullData = [...mainData, ...digitSpanData];
   
           // 处理或保存完整数据
           console.log(fullData);
   
           // 移除iframe，结束整个流程
           document.body.removeChild(iframe);
         }
       });
     }
   };
   
   // 将该trial追加到主实验时间线末尾
   mainTimeline.push(loadDigitSpanTrial);
   

2. 修改Digit Span实验的结束逻辑
   在Digit Span实验的on_finish中添加数据发送代码：

   // digitspan/digitspan.js
   jsPsych.run(timeline, {
     on_finish: () => {
       // 获取Digit Span的实验数据
       const data = jsPsych.data.get().json();
       // 发送数据到主页面
       window.parent.postMessage({
         type: 'digitspan_data',
         data: data
       }, window.location.origin);
     }
   });
   

方案对比 #

• 模块导入方案：无额外运行开销，数据整合最便捷，实验上下文统一，但需要修改独立实验的代码结构。
• iframe方案：几乎无需改动独立实验核心逻辑，兼容性强，但数据需手动合并，调试复杂度略高。

内容的提问来源于stack exchange，提问作者Anirudh