Images do not appear simultaneously

[Geoff-McK]

Hi everyone,

I am trying to write a program that presents a few images for participants to study, followed by lineup with 6 photos presented simultaneously. The lineup includes either one of the studied images or a similar looking image. This images is surrounded by 5 images.

The problem is that wherever the internet connection is a little slow, the images do not appear simultaneously (i.e., there is a small time lag). What's worse is that the studied faces often appears first.

Any ideas on how to fix this? Some of the code is below:

// may not be relevant but "temp_list.csv" is a csv file with all of the file names and condition names to be used on each trial
list = "temp_list.csv"

load_list();

var stimuli = [];
var target_stimuli = [];
var faces = [];

var stimuli_set = [];
var rsvp_task2 = [];
var face_set = [];



function load_list() {
  Papa.parse(list, {
    download: true,
    header: true,
    complete: function(results) {
      faces = results["data"];
	  stimuli_set = faces;


    console.log("stimuli_set: " + stimuli_set)

	  jsPsych.addNodeToEndOfTimeline(make_rsvp_timeline());

	  

    }
  });
  jsPsych.data.addProperties({
  faces: stimuli_set
});
}


// loads (long) list of images which is called at jsPsych.init
function load_list2() {
	var A = ["S14823.jpg",
"G10664.jpg",
......
];


// this function makes the entire experiment. Some of these blocks are not relevant

function make_rsvp_timeline() {



// several variables are assigned the contents on each row of stimuli_set

for (var i=0; i<stimuli_set["length"]; i++){

    block[testInd1] = stimuli_set[i]["block"];
    trial[testInd1] = stimuli_set[i]["trial"];
    targetCond[testInd1] = stimuli_set[i]["target"];
    suspect[testInd1] = stimuli_set[i]["suspect"];
	sim[testInd1] = stimuli_set[i]["sim"];
	race[testInd1] = stimuli_set[i]["race"];
	sex[testInd1] = stimuli_set[i]["sex"];
  age[testInd1] = stimuli_set[i]["age"];


target[testInd1] = stimuli_set[i]["target"];

lineup_faces = stimuli_set[i]["foil1"].concat(",", stimuli_set[i]["foil2"], ",", stimuli_set[i]["foil3"], ",", stimuli_set[i]["foil4"],
             ",", stimuli_set[i]["foil5"], ",", stimuli_set[i]["foil6"]);


             lineup_faces = lineup_faces.split(/[,]+/);

             lineup1[testInd1] = lineup_faces[0];
             lineup2[testInd1] = lineup_faces[1];
             lineup3[testInd1] = lineup_faces[2];
             lineup4[testInd1] = lineup_faces[3];
             lineup5[testInd1] = lineup_faces[4];
             lineup6[testInd1] = lineup_faces[5];

             console.log("lineup_faces: " + lineup_faces)

             testInd1 = testInd1 + 1;

};


// this is the list that is used for study

var studyList = {
    block: block,
    trial: trial,
	target: suspect,
	sim: sim,
	targetCond: targetCond,
	race: race,
	sex: sex,
  age: age
};

console.log("studyList.target: " + studyList.target)

// this is the list that is used for test (i.e., lineup)

var test_block = {
    block: block,
    trial: trial,
	  target: suspect,
	  sim: sim,
	  targetCond: targetCond,
	  race: race,
	  sex: sex,
    lineup1: lineup1,
    lineup2: lineup2,
    lineup3: lineup3,
    lineup4: lineup4,
    lineup5: lineup5,
    lineup6: lineup6
}

console.log("test_block : " + test_block.lineup1[0])



var study_procedure = [];
var testInd = 0;

for (var stimInd=0; stimInd<studyList.target["length"]; stimInd++) {

  console.log("stimInd: "+ stimInd)

  var study = {
			type: 'html-keyboard-response',
			stimulus: '<br>',
			prompt: "<img src=" + studyList.target[stimInd] +">",
			choices: jsPsych.NO_KEYS,
			trial_duration: 5000,	//change to 750
      data: {
        block: studyList.block[stimInd],
        trial: studyList.trial[stimInd],
        race: studyList.race[stimInd],
        sex: studyList.sex[stimInd],
        age: studyList.age[stimInd],
        targetCond: studyList.targetCond[stimInd],
        condition: studyList.sim[stimInd],
        target: studyList.target[stimInd],
        lineup1: test_block.lineup1[stimInd],
        lineup2: test_block.lineup2[stimInd],
        lineup3: test_block.lineup3[stimInd],
        lineup4: test_block.lineup4[stimInd],
        lineup5: test_block.lineup5[stimInd],
        lineup6: test_block.lineup6[stimInd]

      },
      

    on_finish: function(data){
      data_all.subject.push(subNum)
      data_all.block.push(data.block)
      data_all.trial.push(data.trial)
      data_all.race.push(data.race)
      data_all.sex.push(data.sex)
      data_all.age.push(data.age)
      data_all.targetCond.push(data.targetCond)
      data_all.condition.push(data.condition)
      data_all.target.push(data.target)
      data_all.lineup1.push(data.lineup1)
      data_all.lineup2.push(data.lineup2)
      data_all.lineup3.push(data.lineup3)
      data_all.lineup4.push(data.lineup4)
      data_all.lineup5.push(data.lineup5)
      data_all.lineup6.push(data.lineup6)


    }
			};



      rsvp_timeline.push(study);

// if it's the 4th, 7th, 11th, 15th, 19th, or 23rd trial, then present a distractor task (i.e., Tetris)

  if (stimInd == 3 || stimInd == 7 || stimInd == 11 || stimInd == 15 || stimInd == 19 || stimInd == 23){

var w_center = screen.width/2;
var h_center = screen.height/2;


var distractor_instructions = {
  type: "html-keyboard-response",
  stimulus: "Now, you will play Tetris for 1 minute. <p>Use the left and right keys to move, the up key to rotate, and the down key to drop a block immediately.<p>Press Enter to begin.<p></div>",
  choices: ['enter']
};


var show_test = {
  type: "html-keyboard-response",
  stimulus: " Press enter to move to the next block.",
  choices: ['enter']
};


var tetris_block = {
  type:'external-html',
  url: "tet.html",
  cont_btn: "end",
  execute_script: true
};

rsvp_timeline.push(distractor_instructions,tetris_block,show_test);


    for (var j = 0; j<4; j++){


// this is where the lineup is presented

var multi_choice_block_horizontal = {
    type: 'lineup-multi-choice',
    questions: [        
      {prompt: '<div <p </p>', options: page_1_options, required: true, horizontal: true},
],
    button_label: 'SUBMIT',

       on_finish: function(data){
         data_all.selection.push(JSON.parse(data.responses).Q0);
        data_all.rt.push(data.rt);

       },

    
    preamble: 
    "<div style='position: fixed; top:" + (h_center-470) + "px; left:" + (w_center-300) + "px;'><p>If you see a person that you studied in the previous set of</p>" +
      "<div style='position: fixed; top:" + (h_center-440) + "px; left:" + (w_center-300) + "px;'><p>4 faces, select the number that corresponds to their photo. </p>" +

      "<div style='position: fixed; top:" + (h_center-390) + "px; left:" + (w_center-300) + "px;'><p>If you <strong> DO NOT </strong> see a person that you studied in the </p>" +
      "<div style='position: fixed; top:" + (h_center-360) + "px; left:" + (w_center-300) + "px;'><p> previous set of one of 4 faces, select the ABSENT option.</p>" +
        "<div style='position: fixed; top:" + (h_center-310) + "px; left:" + (w_center-300) + "px;'><p>Remember, a studied face <strong> may or may not </strong> be present in the lineup</p>" +

  "<div <p style = 'position: fixed; top:" + (h_center-250) + "px; left:" + (w_center-300) + "px; width: 150px;'><img src=" + test_block.lineup1[testInd] +" height=162.75 width=175></img></p>  " +  

  "<div <p style = 'position: fixed; top:" + (h_center-250) + "px; left:" + (w_center-100) + "px; width: 150px;'><img src=" + test_block.lineup2[testInd] +" height=162.75 width=175></img></p>" + 

  "<div <p style = 'position: fixed; top:" + (h_center-250) + "px; left:" + (w_center+100) + "px;  width: 150px;'><img src=" + test_block.lineup3[testInd] +" height=162.75 width=175></img></p>  " +

  "<div <p style = 'position: fixed; top:" + (h_center) + "px; left:" + (w_center-300) + "px;  width: 150px'><img src=" + test_block.lineup4[testInd] +" height=162.75 width=175</img></p> " + 

  "<div <p style = 'position: fixed; top:" + (h_center) + "px; left:" + (w_center-100) + "px;  width: 150px'><img src=" + test_block.lineup5[testInd] +" height=162.75 width=175></img></p> " + 

  "<div <p style = 'position: fixed; top:" + (h_center) + "px; left:" + (w_center+100) + "px;  width: 150px'><img src=" + test_block.lineup6[testInd] +" height=162.75 width=175></img></p> "
    

 };

 rsvp_timeline.push(multi_choice_block_horizontal);
testInd = testInd + 1;


// this is just for collecting a confidence judgment after each lineup trial

var postID = {
  		type: 'survey-text',
      preamble: function() {
        var preamble3_html = post_instructions

        return preamble3_html;
      },
  		questions: [{prompt: "</br>", columns: 10, required:true}], 


	};

var loop_node3 = {
  timeline: [postID],
  loop_function: function(data){

    var A = jsPsych.data.get().last(1).values()[0].response.Q0


    if (isNaN(Number(A))){
      console.log("isNaN: " + Number(A))

      return true;


    } else {
    if((Number(A)<0 || Number(A)>100)){

      console.log(Number(A))
      

      return true;
    } else {
      console.log(Number(A))




    var A = jsPsych.data.get().last(1).values()[0].response.Q0
    var today = new Date();

    jsPsych.data.addProperties({post_instructions: post_instructions, post_assess: Number(A)})

    // jsPsych.data.addProperties({lineup1: li})

    data_all.post_assess.push(Number(A));
		// data_all.Exp_end_time.push(today);

      return false;
    }
  }
  }
}

rsvp_timeline.push(loop_node3);

    }

} else {

 }

};




jsPsych.init({
    timeline: rsvp_task,
	preload_images: load_list2(), // make load_list2() (output of this)
	exclusions: {
			min_width: 1200,
			min_height: 400
		},
    on_interaction_data_update: function(data) {
    console.log(JSON.stringify(data))
    data_all.event.push(data.event)
      data_all.eventTrial.push(data.trial)
      data_all.time.push(data.time)
  },
    on_finish: function(data) {
      data_all.event.push(data.event)
      data_all.eventTrial.push(data.trial)
      data_all.time.push(data.time)

   }

   
    // use_webaudio: false
}); 

[ChristopheBossens]

Have you tried it with the preload plugin (couldn't find anything in the documentation that it is possible to set a parameter in the jsPsych.init function):

let preload = {
    type: jsPsychPreload, // or 'preload' depending on the jsPsych version you are using
    images: ['img/sad_face_1.jpg']
}

[Geoff-McK]

As an update, I figured out a work-around.

Conceptually, what I did was change the plugin so that all of the options and buttons were hidden.

// add multiple-choice questions
      for (var i = 0; i < trial.questions.length; i++) {
  
          // get question based on question_order
          var question = trial.questions[question_order[i]];
          var question_id = question_order[i];
          
          // create question container
          var question_classes = ['jspsych-lineup-multi-choice-question'];
          if (question.horizontal) {
              question_classes.push('jspsych-lineup-multi-choice-horizontal');
          }
  
          html += '<div id="jspsych-lineup-multi-choice-'+question_id+'" class="'+question_classes.join(' ')+'"  data-name="'+question.name+'">';
          console.log("question_id" + question_id)
  
          // add question text
          html += '<p class="jspsych-lineup-multi-choice-text lineup-multi-choice">' + question.prompt 
          if (question.required) {
              html += "<span class='required'></span>";
          }
          html += '</p>';
  
          var required_attr = question.required ? 'required' : '';
 
          var w = screen.width
          var h = screen.height;
          
          var w_c = w/2;
          var h_c = h/2;
             
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-650)) + 'px; left:' + (w_c-190) + 'px;"id="jspsych-lineup-multi-choice-option-0-6" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-6">ABSENT</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-6" value="ABSENT"></input>';
          html += '</div>';
          // html += '</div>'; 
      
          // html += '<div style="position: fixed; top: 325px; left: 265px;" id="jspsych-lineup-multi-choice-option-0-0" class="jspsych-lineup-multi-choice-option">';
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-390)) + 'px; left:' + (w_c-235) + 'px;" id="jspsych-lineup-multi-choice-option-0-0" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-0">1</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-0" value="1" ></input>';
          html += '</div>';
      
         html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-390)) + 'px; left:' + (w_c-30) + 'px;"id="jspsych-lineup-multi-choice-option-0-1" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-1">2</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-1" value="2" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-390)) + 'px; left:' + (w_c+170) + 'px;" id="jspsych-lineup-multi-choice-option-0-2" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-2">3</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-2" value="3" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-600)) + 'px; left:' + (w_c-235) + 'px;" id="jspsych-lineup-multi-choice-option-0-3" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-3">4</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-3" value="4" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-600)) + 'px; left:' + (w_c-30) + 'px;" id="jspsych-lineup-multi-choice-option-0-4" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-4">5</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-5" value="5" ></input>';
          html += '</div>';
      
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-600)) + 'px; left:' + (w_c+170) + 'px;" id="jspsych-lineup-multi-choice-option-0-5" class="jspsych-lineup-multi-choice-option">';
          html += '<label class="jspsych-lineup-multi-choice-text" for="jspsych-lineup-multi-choice-response-0-5">6</label>';
          html += '<input type="radio" name="jspsych-lineup-multi-choice-response-0" id="jspsych-lineup-multi-choice-response-0-5" value="6" '+required_attr+'></input>';
          html += '</div>'; 
 
          html += '<div style="visibility:hidden; position: fixed; top:' + (h_c-(h_c-650)) + 'px; left:' + (w_c-20) + 'px;" id="jspsych-lineup-multi-choice-submit">'
          html += '<input type="submit" id="'+plugin_id_name+'-next" class="'+plugin_id_name+' jspsych-btn"' + (trial.button_label ? ' value="'+trial.button_label + '"': '') + '></input>';
          html += '</div></form>';
 
    }

Then, when I call the plugin in the script, I make everything visible after 500 ms.

var multi_choice_block_horizontal = {
    type: 'lineup-multi-choice',
    questions: [        
      {prompt: '<p </p>', options: page_1_options, required: true, horizontal: true},
       // {prompt: '<p id="prompt" style="visibility:hidden;" </p>', options: page_1_options, required: true, horizontal: true},

       // {  prompt: '<p id="prompt" style="visibility:hidden;"> NO (F) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YES (J)</p>'},
],
    button_label: 'SUBMIT',

       on_finish: function(data){
         data_all.selection.push(JSON.parse(data.responses).Q0);
         // console.log(JSON.parse(data))
         console.log(data_all.selection)
        data_all.rt.push(data.rt);
        // data_all.lineup.push(data.lineup);

       },
          on_load: function(){
          setTimeout(function(){
          document.getElementById('jspsych-lineup-multi-choice-option-0-6').style.visibility = "visible";}, 500);
          setTimeout(function(){        
          document.getElementById('jspsych-lineup-multi-choice-option-0-0').style.visibility = "visible";}, 500),
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-1').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-2').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-3').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-4').style.visibility = "visible";}, 500);
          setTimeout(function(){ 
          document.getElementById('jspsych-lineup-multi-choice-option-0-5').style.visibility = "visible";}, 500);
          setTimeout(function(){
          document.getElementById('jspsych-survey-multi-choice-preamble').style.visibility = "visible";}, 500);
          setTimeout(function(){
          document.getElementById('jspsych-lineup-multi-choice-submit').style.visibility = "visible";}, 500);

      },  
    
    preamble: // function() {
   // var preamble_html = 
    "<div style='position: fixed; top:" + (h_center-(h_center-10)) + "px; left:" + (w_center-300) + "px;'><p>If you see the " + test_block.race[testInd] + "&nbsp;" + test_block.sex[testInd] +" that you studied in the previous set of</p>" +
      "<div style='position: fixed; top:" + (h_center-(h_center-40)) + "px; left:" + (w_center-300) + "px;'><p>4 faces, select the number that corresponds to their photo. </p>" +

      "<div style='position: fixed; top:" + (h_center-(h_center-90)) + "px; left:" + (w_center-300) + "px;'><p>If you <strong> DO NOT </strong> see a person that you studied in the </p>" +
      "<div style='position: fixed; top:" + (h_center-(h_center-120)) + "px; left:" + (w_center-300) + "px;'><p> previous set of one of 4 faces, select the ABSENT option.</p>" +
        "<div style='position: fixed; top:" + (h_center-(h_center-170)) + "px; left:" + (w_center-300) + "px;'><p>Remember, a studied face <strong> may or may not </strong> be present in the lineup</p>" +

  "<div <p style = 'position: fixed; top:" + (h_center-(h_center-220)) + "px; left:" + (w_center-300) + "px; width: 150px; visiblity: hidden;'><img src=" + test_block.lineup1[testInd] +" height=162.75 width=132.3></img></p>  " +  

  "<div <p style = 'position: fixed; top:" + (h_center-(h_center-220)) + "px; left:" + (w_center-100) + "px; width: 150px;'><img src=" + test_block.lineup2[testInd] +" height=162.75 width=132.3></img></p>" + 

  "<div <p style = 'position: fixed; top:" + (h_center-(h_center-220)) + "px; left:" + (w_center+100) + "px;  width: 150px;'><img src=" + test_block.lineup3[testInd] +" height=162.75 width=132.3></img></p>  " +

  "<div <p style = 'position: fixed; top:" + (h_center-(h_center-430)) + "px; left:" + (w_center-300) + "px;  width: 150px'><img src=" + test_block.lineup4[testInd] +" height=162.75 width=132.3</img></p> " + 

  "<div <p style = 'position: fixed; top:" + (h_center-(h_center-430)) + "px; left:" + (w_center-100) + "px;  width: 150px'><img src=" + test_block.lineup5[testInd] +" height=162.75 width=132.3></img></p> " + 

  "<div <p style = 'position: fixed; top:" + (h_center-(h_center-430)) + "px; left:" + (w_center+100) + "px;  width: 150px'><img src=" + test_block.lineup6[testInd] +" height=162.75 width=132.3></img></p> "
    
 //   return preamble_html;
 //   }

 };