如何在jsPsych的Likert量表中关联展示对应图片？

问题原因 #

你写的代码有两个核心问题：

1. survey-likert 插件本身没有内置stimulus参数，单独配置这个属性不会触发图片加载渲染
2. 你把timeline数组嵌套在单个试次对象内的写法不符合jsPsych的语法规范，结构完全错误

最简解决方案 #

不需要额外引入其他插件，直接在survey-likert的prompt属性里插入img标签即可实现图片和量表同屏展示，示例代码如下：

// 定义Likert量表选项
var likert_scale = [
  "非常不同意",
  "不同意",
  "中立",
  "同意",
  "非常同意"
];

// 定义所有颜色圆点的图片路径
var color_imgs = [
  'img/red.jpeg',
  'img/green.jpeg',
  'img/yellow.jpeg'
  // 其余图片路径按相同格式补充即可
];

// 批量生成所有试次
var color_trials = [];
for(var i=0; i<color_imgs.length; i++){
  color_trials.push({
    type: 'survey-likert',
    questions: [
      {
        // prompt中先插入图片，再显示题项文本，style可自定义图片样式
        prompt: `<img src="${color_imgs[i]}" style="width: 200px; height: 200px; margin-bottom: 24px;"><br>我喜欢看这个颜色`,
        labels: likert_scale,
        required: true // 可选：强制用户作答后才能进入下一题
      }
    ]
  })
}

// 将生成的试次添加到jsPsych全局时间线
var timeline = [
  // 这里可以加你的指导语、练习试次等其他内容
  ...color_trials
];

// 启动实验
jsPsych.run(timeline);

如果需要调整图片的大小、边距、对齐方式等，直接修改img标签的style属性即可。

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