Javascript 我是否可以创建一个循环来呈现图像，并在不同的页面上显示调查结果？

我正试图用几个“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)

变量图像=[
“./img/1.png”，
“./img/2.png”，
“./img/3.png”，
“./img/4.png”，
“./img/5.png”，
“./img/6.png”
];
变量标度_1=[
“极不可能”，
“不太可能”，
“不大可能”，
“稍有可能”，
“可能”，
“极有可能”
];
对于（变量i=0；i

我希望我的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)

Uncaught TypeError:无法读取未定义的属性“info”
在setDefaultValues（jspsych.js:874）
在doTrial（jspsych.js:809）
下一次审判（jspsych.js:794）
位于Object.window.jsPsych.core.finishTrial（jsPsych.js:258）
试验结束时（jspsych html button response.js:180）
at after_响应（jspsych html button response.js:159）
在HTMLDEVELENT。（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>') })
        }
      });
    }

jsPsych.init({
时间线：时间线，
预加载图像：图像，
on_finish:function（）{
endExperiment（jsPsych.data.get（）.csv（），function（）{document.write（“


全部完成！

您的完成代码是“+turkcode+”。要收到点击费，请返回Amazon Mechanical Turk页面并输入此代码。如果出现问题，请与我们联系，我们将尽快解决。
'））
}
});
}

以下是我编写的代码，除了问题都出现在同一页上外，其他代码都有效：

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);

var标度_1=[
“极不可能”，
“不太可能”，
“不大可能”，
“稍有可能”，
“可能”，
“极有可能”
];
var likert_页面={
键入：“调查likert”，
问题:[
{提示：''，名称：'Obs1'，标签：scale_1}，
{提示：''，名称：'Obs2'，标签：scale_1}，
{提示：''，名称：'Obs3'，标签：scale_1}，
{提示：''，名称：'Obs4'，标签：scale_1}，
{提示：''，名称：'Obs4'，标签：scale_1}，
{提示：''，名称：'Obs4'，标签：scale_1}
],
随机化问题顺序：正确
};
时间轴推送（likert_页面）；

如果您不想将

用于循环，请尝试传递以下问题

 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]
  });

工作样本：
两个小错误：1<代码>时间线。推（likert）

在for循环之后，而不是在其末尾。2.在for循环的情况下，您需要

i

@Casper当然，只需在上面共享它@谢谢你指出这一点。我已经改变了循环的条件。你是说

时间线.push（likert）

应该是这样的

}；timeline.push（likert）

。为我的无知道歉我对这个很陌生@卡斯珀：是的，只是把它移到了循环中，但那也不起作用。除了在循环内，我还没有定义时间线。你能更详细地解释一下你的意思吗？@Casper谢谢你之前给了我，但这不完全是我想要做的。我在上面发布了一些代码，这些代码不需要循环，也不需要在单独的页面上显示每个问题。这很有效，非常感谢！我现在明白你在循环中推动时间线元素的意思了。再次感谢！

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
});