如何在jsPsych程序中实现条件匹配的实验图片分组功能？

实现思路 #

整个逻辑分三步完成：

1. 提取预试阶段的所有试次数据，把每张图片和对应的评分一一绑定
2. 按「Do not enjoy」「Neutral」「Enjoy」三类评分，将图片分成三个独立数组
3. 对每个分类的数组做随机打乱后均分，分别合并到A、B两个条件的图片列表中，就能保证两类条件下各评分等级的图片数量完全一致

完整实现代码 #

你只需要在预试pre_trial的后面新增一个call-function类型的试次，用来处理分配逻辑即可，示例代码如下：

// 数组随机洗牌工具函数（Fisher-Yates算法，保证随机均匀性）
function shuffleArray(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

var assign_condition = {
  type: 'call-function',
  func: function() {
    // 1. 提取所有预试likert试次的完整数据
    const preTrialData = jsPsych.data.get().filter({trial_type: 'survey-likert'}).values();
    // 2. 初始化三个评分对应的图片分组，索引对应likert选项的返回值（默认从0开始）
    const ratedGroups = {
      0: [], // Do not enjoy
      1: [], // Neutral
      2: []  // Enjoy
    };
    // 遍历预试数据，将图片按评分归类
    preTrialData.forEach(trial => {
      // 单问题的likert响应默认存在Q0字段中
      const userRating = trial.response.Q0;
      // 你的代码中preamble存的是图片地址，直接取值即可
      const imgUrl = trial.preamble;
      ratedGroups[userRating].push(imgUrl);
    });
    // 3. 分组打乱后均分至两个条件
    let conditionA = [], conditionB = [];
    Object.values(ratedGroups).forEach(imgGroup => {
      const shuffledImgs = shuffleArray(imgGroup);
      const splitIndex = Math.floor(shuffledImgs.length / 2);
      // 前半部分进A组，后半部分进B组
      conditionA = conditionA.concat(shuffledImgs.slice(0, splitIndex));
      conditionB = conditionB.concat(shuffledImgs.slice(splitIndex));
    });
    // 将结果存入jsPsych全局属性，后续实验随时调用
    jsPsych.data.addProperties({
      conditionA_imgs: conditionA,
      conditionB_imgs: conditionB
    });
  }
}

之后你只需要把assign_condition加入到主timeline中，放在pre_trial的后面、正式实验的前面即可。后续需要调用两个条件的图片列表时，直接通过jsPsych.data.get().values()[0].conditionA_imgs就能获取到A组的所有图片。

注意事项 #

• 如果后续你修改了预试的preamble内容（比如加入提示文本），建议将图片地址存入试次的data字段中，只需要修改预试timeline的配置：

  timeline: [{
    type: 'survey-likert',
    preamble: jsPsych.timelineVariable('image'),
    questions: [{labels: scale_1, prompt: "The prompt"}],
    // 新增data字段存储图片，避免和preamble的其他内容冲突
    data: {img: jsPsych.timelineVariable('image')}
  }]
  

  之后取值时替换为const imgUrl = trial.img即可，兼容性更好。
• 请保证预试阶段每类评分的图片数量为偶数，否则无法实现完全均分。如果实验设计允许，可提前设置预试图片总数为6的倍数（三个分类各2、4、6...张），如果出现奇数分类，可随机剔除1张该分类的图片或单独作为填充试次使用。

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