如何在Gorilla平台使用JsPsych插件同时展示多张图片？

我正在Gorilla平台进行开发，尝试使用JsPsych插件同时展示三张图片（对应aURL、bURL、cURL），并让参与者点击其中一张完成选择。

现有代码如下：

图片URL引用代码 #

// URL's for images
var aURL = gorilla.stimuliURL('a.png');
var bURL = gorilla.stimuliURL('b.png');
var cURL = gorilla.stimuliURL('c.png');  

// Create an array containing all the URL's for our required stimuli
var images = [];
images.push(aURL);
images.push(bURL);
images.push(cURL);

尝试的trial代码 #

var trial = {
    type: jsPsychImageButtonResponse,
    stimulus: [aURL, bURL, cURL],
    choices: [aURL, bURL, cURL],
};

jsPsychImageButtonResponse插件的stimulus参数仅支持单个图片URL，传入数组无法实现多图展示。推荐改用jsPsychHtmlButtonResponse插件，通过自定义HTML实现多图展示+图片按钮选择：

// 图片URL引用（保留原有逻辑）
var aURL = gorilla.stimuliURL('a.png');
var bURL = gorilla.stimuliURL('b.png');
var cURL = gorilla.stimuliURL('c.png');

// 构建包含三张图片的展示HTML，可自定义布局样式
var multiImageStimulus = `
  <div style="display: flex; gap: 30px; margin-bottom: 40px; justify-content: center;">
    <img src="${aURL}" alt="图片A" style="width: 150px; height: auto;">
    <img src="${bURL}" alt="图片B" style="width: 150px; height: auto;">
    <img src="${cURL}" alt="图片C" style="width: 150px; height: auto;">
  </div>
`;

var trial = {
  type: jsPsychHtmlButtonResponse,
  stimulus: multiImageStimulus,
  // 将图片作为按钮选项
  choices: [
    `<img src="${aURL}" alt="选择图片A" style="width: 120px; height: auto;">`,
    `<img src="${bURL}" alt="选择图片B" style="width: 120px; height: auto;">`,
    `<img src="${cURL}" alt="选择图片C" style="width: 120px; height: auto;">`
  ],
  // 移除按钮默认样式，让图片按钮更自然
  button_html: '<button style="border: none; background: transparent; cursor: pointer;">%choice%</button>',
  // 可选：记录选择的图片标识
  on_finish: function(data) {
    var selectedImage = data.response;
    // 可根据需要添加自定义逻辑，比如映射图片URL到标识
  }
};

关键说明 #

1. 多图展示：通过HTML字符串拼接多张图片，用CSS flex布局实现横向排列，可根据需求调整间距、尺寸。
2. 图片按钮：直接将图片HTML作为choices选项，配合button_html清除按钮默认样式，让图片本身成为可点击的选择元素。
3. Gorilla兼容性：原有gorilla.stimuliURL的引用方式有效，确保图片已上传至平台资源标签页即可。

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