javascript - 我可以创建一个循环来呈现图像并在不同页面上进行调查李克特响应吗？

Question

我正在尝试编写一个包含多个“survey-Likert”试验的实验，其中使用“survey-likert”jspsych 插件在单选按钮上方显示图像。我设法让它工作，但所有图像/问题都出现在同一页面上。我希望每一个都出现在新的页面上。理想情况下，每个问题后都有一个“继续”按钮。

任何帮助将不胜感激。西尔莎

有人建议我使用 for 循环遍历图像，但到目前为止我所做的并没有奏效并且会产生一些错误。我对编程和 jspsych 还很陌生，一直无法弄清楚为什么它不起作用。

var images = [
        './img/1.png',
    './img/2.png',
        './img/3.png',
    './img/4.png',
        './img/5.png',
    './img/6.png'
 ];


var scale_1 = [
  "Extremely Unlikely", 
  "Unlikely", 
  "Slightly Unlikely", 
  "Slightly Likely", 
  "Likely",
  "Extremely Likely"
];

for (var i = 0; i < images; i++) {
var likert = {
  type: 'survey-likert',
  questions: ['First prompt', 'Second prompt', 'Third prompt', 'Fourth prompt', 'Fifth prompt', 'Sixth prompt'],
  labels: [scale_1, scale_1, scale_1, scale_1, scale_1, scale_1],
  timeline: [
    images[i],
],
 };
}
timeline.push(likert)

我希望我的 6 张图片中的每一张都显示在一个单独的页面上，页面下方有单选按钮。选择一个选项后，会出现下一个图像和响应选项集，直到所有 6 个都出现。

这是我得到的错误:

Uncaught TypeError: Cannot read property 'info' of undefined
    at setDefaultValues (jspsych.js:874)
    at doTrial (jspsych.js:809)
    at nextTrial (jspsych.js:794)
    at Object.window.jsPsych.core.finishTrial (jspsych.js:258)
    at end_trial (jspsych-html-button-response.js:180)
    at after_response (jspsych-html-button-response.js:159)
    at HTMLDivElement.<anonymous> (jspsych-html-button-response.js:128)

和 jsPsych.init() 函数:

      jsPsych.init({
        timeline: timeline,
        preload_images: images,
        on_finish: function() {
          endExperiment( jsPsych.data.get().csv(), function() { document.write('<div id="endscreen" class="endscreen" style="width:1000px"><div class="endscreen" style="text-align:center; border:0px solid; padding:10px; font-size:120%; width:800px; float:right"><p><br><br><br>All done!<br><br>Your completion code is <span id="turkcode" style="font-weight:bold;font-size:130%">' + turkcode + '</span>. To receive payment for the HIT, return to the Amazon Mechanical Turk page and enter this code. Please contact us if something goes wrong and we\'ll fix it as quickly as possible.</p></div></div>') })
        }
      });
    }

下面是我写的代码，除了问题都出现在同一页上之外，它可以工作:

var scale_1 = [
  "Extremely Unlikely", 
  "Unlikely", 
  "Slightly Unlikely", 
  "Slightly Likely", 
  "Likely",
  "Extremely Likely"
];

var likert_page = {
  type: 'survey-likert',
  questions: [
    {prompt: '<img src="img/'+r[0]+'.png"/>', name: 'Obs1', labels: scale_1},
    {prompt: '<img src="img/'+r[1]+'.png"/>', name: 'Obs2', labels: scale_1},
    {prompt: '<img src="img/'+r[2]+'.png"/>', name: 'Obs3', labels: scale_1},
    {prompt: '<img src="img/'+r[3]+'.png"/>', name: 'Obs4', labels: scale_1},
    {prompt: '<img src="img/'+r[4]+'.png"/>', name: 'Obs4', labels: scale_1},
    {prompt: '<img src="img/'+r[5]+'.png"/>', name: 'Obs4', labels: scale_1}
  ],
  randomize_question_order: true
};
timeline.push(likert_page);

Answer 1

如果您不想使用for循环，请尝试传递如下问题，

 var scale_1 = [
       "Extremely Unlikely", 
       "Unlikely", 
       "Slightly Unlikely"
    ]; 

   var trial_1 = {
        type: "survey-likert",
        questions: [
        {
          prompt: '<img src="https://b.thumbs.redditmedia.com/wrt8Y0ISSnLljlERAyBQwA6jsoI2WqJPd8sxn7iT-gY.png"/>', name: 'Obs1', labels: scale_1
        }, 
      ]
   }

   var trial_2 = {
     type: 'survey-likert',
     questions: [
       {
         prompt: '<img src="https://cdn141.picsart.com/308218064033201.jpg?c256x256"/>', name: 'Obs2', labels: scale_1
       }, 
     ]
   }

  var trial_3 = {
    type: 'survey-likert',
    questions: [
      {
        prompt: '<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG"/>', name: 'Obs3', labels: scale_1
      }, 
    ]
  }   

  jsPsych.init({
     timeline: [trial_1, trial_2, trial_3]
  });

工作样本:https://jsbin.com/losebenere/edit?html,js,output

使用for循环你可以简化，

var images = [
  "https://b.thumbs.redditmedia.com/wrt8Y0ISSnLljlERAyBQwA6jsoI2WqJPd8sxn7iT-gY.png",
  "https://cdn141.picsart.com/308218064033201.jpg?c256x256",
  "https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG"
]

var scale_1 = [
  "Extremely Unlikely", 
  "Unlikely", 
  "Slightly Unlikely"
]

for (var i = 0; i < images.length; i++) {
  timeline.push({
    type: "survey-likert",
    questions: [{
        prompt: "<img src=" + images[i]+ ">", name: 'Obs' + i, labels: scale_1
      }
    ]
  });
}

jsPsych.init({
  timeline: timeline
});

工作样本:https://jsbin.com/hedukecawo/edit?html,js,console,output