Можно ли создать цикл для представления изображения и получения ответов на опросы на разных страницах? - PullRequest
Новая
       53

Можно ли создать цикл для представления изображения и получения ответов на опросы на разных страницах?

1 голос
/ 10 октября 2019

Я пытаюсь кодировать эксперимент с несколькими испытаниями 'survey-Likert', в которых изображение над переключателями представлено с помощью плагина jspsych 'survey-likert'. Мне удалось заставить это работать, но все изображения / вопросы появляются на той же странице. Я бы хотел, чтобы каждый появился на новой странице. В идеале с кнопкой «продолжить» после каждого вопроса.

Любая помощь будет высоко ценится. Saoirse

Кто-то предложил мне использовать цикл 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);

1 Ответ

1 голос
/ 10 октября 2019

Попробуйте передать вопросы, как показано ниже, если вы не хотите использовать for loop, 

 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 loop, вы можете упростить 

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

...