Some images will load, but others won't

[Maya-Taliaferro]

Hi everyone,

I'm not super familiar with jsPsych so this may or may not be an obvious problem, but for some reason not all of my image files will display when I run my script. I am preloading the images I have beforehand, but still the images within the 'jsPsychHtmlAudioResponse' function won't appear. I'm wondering if this has to do with the html string used for the stimulus?

Would appreciate any and all help on this! Thanks so much!

Here is my code (sorry if the formatting is bad, couldn't figure out how to properly attach my code):

/*Initialize jsPsych */
   const jsPsych = initJsPsych({
    on_finish: () => jatos.endStudy(jsPsych.data.get().json())
   });

   /* create timeline */
   var timeline = [];

     /* define welcome message trial */
    var welcome = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: "Welcome to the task. Press any key to begin."
    };
    timeline.push(welcome);

    /* define instructions trial */
    var instructions = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: `
        <p>In this task, you will be recording auditory stimuli for a visual search task. </p>
        <p>Your recordings will be presented to a pool of participants. </p>
        <p>Your goal is to create stimuli that will get these participants to identify the object in the search task as fast as possible. </p>
        <p>(We will be measuring reaction time of the participants from the point after the recording stops to when they find the shape). </p>
        </p>
        <p>You will be generating these stimuli by finishing the sentence:</p>
        <p> <strong>"Show me the ___"</strong> </p>
        <p> Please note: participants will see the same items displayed, but they will not be presented in the same position <p>
        <p>Press any key to proceed to a demonstration.</p>
      `
    };
    timeline.push(instructions);

    var initmic = {
    type: jsPsychInitializeMicrophone
    }; 
  timeline.push(initmic);


   /* preload intro images */
    var intro_preload = {
      type: jsPsychPreload,
      images: ['Displays/children.png','Displays/adults.png','Displays/example.jpg','Displays/intro_shapes.png','Displays/intro_shapes_show.png',
      'Displays/inclu_color.png','Displays/inclu_color_show.png','Displays/inclu_shape.png','Displays/inclu_shape_show.png']
    }
   timeline.push(intro_preload);

   var conditions = ['Displays/children.png','Displays/adults.png'];

    /* demonstration type */
   var cond_type = {
    type: jsPsychImageKeyboardResponse,
    prompt: "<p> You will be making stimuli for this age group </p> <p> (Click any button to continue) </p>",
    stimulus: jsPsych.randomization.sampleWithoutReplacement(conditions, 1)
    };
    timeline.push(cond_type);

   /* intro demostration */
   var demo1 = {
    type: jsPsychImageKeyboardResponse,
    stimulus: 'Displays/intro_shapes.png',
    prompt: "<p>First, you will see a display of colored shapes. </p> <p> (Click any button to continue) </p>",
    };
    timeline.push(demo1);
    var demo2 = {
    type: jsPsychImageKeyboardResponse,
    stimulus: 'Displays/intro_shapes_show.png',
    prompt: "<p>Next, the target shape to be identified will be highlighted.</p> <p> (Click any button to continue) </p>",
    };
    timeline.push(demo2);
   var demo3 = {
    type: jsPsychImageKeyboardResponse,
    stimulus: 'Displays/example.jpg',
    prompt: "<p>Finally, you will be asked to record stimuli to identify the target shape following by completing the phrase: </p> <p> <strong> ''Show me the ___ ''</strong>  <p> (Click any button to continue) </p>",
    };
    timeline.push(demo3);
    var incl_instructions = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: `
        <p>Next will be some warm-up trials for practice. </p>
      `
    };
    timeline.push(incl_instructions);

    /* inclusion criteria */
    var inclu_1_1 = {
    type: jsPsychImageKeyboardResponse,
    stimulus: 'Displays/inclu_color.png',
    prompt: "<p>PRACTICE DISPLAY 1</p> <p> (Click any button to continue) </p>",
    };
    timeline.push(inclu_1_1);
    var inclu_1_2 = {
    type: jsPsychImageKeyboardResponse,
    stimulus: 'Displays/inclu_color_show.png',
    prompt: "<p>PLEASE RECORD YOUR RESPONSE</p> <p> <strong>''Show me the ___ ''</strong> </p> <p> (Click any button to continue) </p>",
    };
    timeline.push(inclu_1_2);
    var inclu_2_1 = {
    type: jsPsychImageKeyboardResponse,
    stimulus: 'Displays/inclu_shape.png',
    prompt: "<p>PRACTICE DISPLAY 2</p> <p> (Click any button to continue) </p>",
    };
    timeline.push(inclu_2_1);
    var inclu_2_2 = {
    type: jsPsychImageKeyboardResponse,
    stimulus: 'Displays/inclu_shape_show.png',
    prompt: "<p>PLEASE RECORD YOUR RESPONSE</p> <p> <strong>''Show me the ___ ''</strong> </p> <p> (Click any button to continue) </p>",
    };
    timeline.push(inclu_2_2);
    
    /* end of inclusion criteria */
    var expt_instructions = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: `
        <p>Now we will be starting the real stimuli creation. </p>
      `
    };
    timeline.push(expt_instructions);

    /* reminding participants of their condition type */
    timeline.push(cond_type);



    //NEEDS WORK !!!
    var block_preload = {
      type: jsPsychPreload,
      images: ['Displays/2disp_1.png','Displays/2disp_1_show.png','Displays/2disp_2.png','Displays/2disp_2_show.png','Displays/2disp_3.png','Displays/2disp_3_show.png','Displays/2disp_4.png','Displays/2disp_4_show.png']
    };
    timeline.push(block_preload); 

    //Kept the same for debuggin purposes
    var block_1 = [{image1:'Displays/2disp_1.png'}, {image2:'Displays/2disp_1_show.png'},
        {image1:'Displays/2disp_2.png'}, {image2:'Displays/2disp_2_show.png'},
        {image1:'Displays/2disp_3.png'}, {image2:'Displays/2disp_3_show.png'},
        {image1:'Displays/2disp_4.png'}, {image2:'Displays/2disp_4_show.png'}];
    var block_2 = [{image1:'Displays/2disp_1.png'}, {image2:'Displays/2disp_1_show.png'},
        {image1:'Displays/2disp_2.png'}, {image2:'Displays/2disp_2_show.png'},
        {image1:'Displays/2disp_3.png'}, {image2:'Displays/2disp_3_show.png'},
        {image1:'Displays/2disp_4.png'}, {image2:'Displays/2disp_4_show.png'}];
    var block_3 = [{image1:'Displays/2disp_1.png'}, {image2:'Displays/2disp_1_show.png'},
        {image1:'Displays/2disp_2.png'}, {image2:'Displays/2disp_2_show.png'},
        {image1:'Displays/2disp_3.png'}, {image2:'Displays/2disp_3_show.png'},
        {image1:'Displays/2disp_4.png'}, {image2:'Displays/2disp_4_show.png'}];

    //randomly assign a condition
    var block_number = jsPsych.randomization.sampleWithoutReplacement([1,2,3], 1)[0];

    // Save the block number to the jsPsych data
    jsPsych.data.addProperties({'block_number': block_number}); 

    // Use the block number to create the stimuli array (i.e. timeline_variables) to use for this session.
    var stimuli;
    if (block_number == 1) {
      stimuli = block_1;
    } else if (block_number == 2) {
      stimuli = block_2; 
    } else {
      stimuli = block_3;
    }

    var display_trial = {
    type: jsPsychImageKeyboardResponse,
    stimulus: jsPsych.timelineVariable('image1')
    };
    

   var record_trial = {
    type: jsPsychHtmlAudioResponse,
    stimulus: function(){
      return '<p>Please record your stimuli by finishing the phrase: Show me the ___ </p><img src=“'+jsPsych.timelineVariable('image2')+'” />'
    },
    recording_duration: 6000
    };

    var trial_procedure = {
    timeline: [display_trial,record_trial],
    timeline_variables: stimuli
   }
   timeline.push(trial_procedure);

   /*Run everything */
  jatos.onLoad(() => {
  jatos.addAbortButton();
  jsPsych.run(timeline);
  });

[ChristopheBossens]

Hi!

When running the experiment, can you open the console window (on windows you can press the F12 key in most browsers) and check if there are any errors that appear in this window related to images not being loaded or found (when the jsPsychHtmlAudioResponse is on screen). I don't think it has anything to do with the preloading because even if an image is not preloaded, it should still appear on the screen.

What I would also do is take the jsPsychHtmlAudioResponse in isolation, and first define the stimulus with only an HTML string (so no function and no reference to the timelinevariable, just the actual img src. From there I would step by step change it back to your original solution and see where it breaks down.

[Maya-Taliaferro]

Super helpful, thanks so much!

[becky-gilbert]

This is great debugging advice. Thanks @ChristopheBossens!

[becky-gilbert]

Hi @mayataliaferro98, I think the problem is with the implementation of timeline variables. For your stimuli arrays (block1, block2, block3) each object in the array needs to contain all of the variables needed for one "trial", where each "trial" is one pass through your trial_procedure timeline. (I'm using quotes around trial here because I'm referring to the whole trial procedure, but I know that each trial is actually made up of two trial objects: display_trial and record_trial).

Right now, the objects in your block arrays either contain image1 or image2. So what's happening is that, on the first pass through the trial procedure, the timeline runs with the first object in the stimuli array - image1 is found in that first object, but there's no image2, so it breaks when it gets to the record_trial part of your procedure.

Instead, just put image1 and image2 into the same objects, e.g.

var block_1 = [
    {image1:'Displays/2disp_1.png', image2:'Displays/2disp_1_show.png'},
    {image1:'Displays/2disp_2.png', image2:'Displays/2disp_2_show.png'},
    {image1:'Displays/2disp_3.png', image2:'Displays/2disp_3_show.png'},
    {image1:'Displays/2disp_4.png', image2:'Displays/2disp_4_show.png'}
];

Does that help?

[Maya-Taliaferro]

Yes! That was the issue - so silly of me! Thanks so much Becky!!

[becky-gilbert]

BTW @mayataliaferro98 I edited your post to fix the code formatting. You can see how to do it here: #1113 😃