Add image under text in instruction

[jingxu9]

I tried to insert stimuli example image below the text in the second page of instruction, but always get a flash of something between the first instruction page that contains only the text, and the second instruction page that contains both the text and the images. I have no idea what that was that flashed through the display, and how to get rid of it. Could you please help? Thanks!

My codes:

var instruction = {
    type:'instructions',
    pages:['text','another text' +'<image src="path"></img>'],
    show_clickable_nav:true
}

[becky-gilbert]

I think this is because you're using an image in the instructions, and that image is not preloaded, so the flash/delay comes from the browser having to load the image before showing that page. Can you try adding this line to your jsPsych.init?

  preload_images: ['path_to_your_instructions_image']

[becky-gilbert]

Another thing you can do is open your developer tools, then go to the 'network' tab. Ideally you want your instructions image to show up there when the page first loads, rather than when you get to the instructions page that contains the image.

[jingxu9]

It says "the experiment failed to load" once I added the preload_images to the jsPsych.init
Just to make sure: the jsPsych.init is placed at the end of the code?

[jingxu9]

ooops my bad, a sytax error. I corrected it and the program can run, but still with that flash...

[becky-gilbert]

Hmm. I've just tried this with the following code in Chrome, and I couldn't reproduce the problem:

var instruction = { 
  type:'instructions', 
  pages:['text','another text' +'<image src="jspsych/examples/img/1.gif"></img>'], 
  show_clickable_nav:true
}
jsPsych.init({
  timeline: [instruction],
  preload_images: ['jspsych/examples/img/1.gif']
})

Can you confirm that this is what your code looks like, and that the image is definitely preloading for you?

[jingxu9]

Initially I placed "timeline: [instruction]" below "preload_images: ['jspsych/examples/img/1.gif']", and now I switched the two, the problem almost solved! Thanks so much!
But still another question... I made some part of my text bold while the rest not, and there was still a even quicker flash, seemingly showing a version where none of the text was bold. I wonder is that avoidable? Thanks!

my codes: (

var instruction={
    type:'instructions',
    pages:['<p>Your task is to find the target which is an <span style="font-weight:bold;">octagon with a white cross inside</span>, </p><p>and respond <span style="font-weight:bold;">on which side the dot is</span> by pressing the <span style="font-weight:bold;">left or right arrow key</span>.</p>'],
    show_clickable_nav:true

[becky-gilbert]

I know what you mean where the text shows up normal and quickly changes to bold, however I can't seem to reproduce it on my end. So I'm not sure if this works, but can you try changing your <span> tags to <strong> to control the formatting, like this?

pages:['<p>Your task is to find the target which is an <strong>octagon with a white cross inside</strong>, </p><p>and respond <strong>on which side the dot is</strong> by pressing the <strong>left or right arrow key</strong>.</p>'], 

It might be that the <strong> tags are processed more quickly by the browser. (And thanks to @conbainbridge for the suggestion!)

[jodeleeuw]

I don't think this is likely to be the issue, but I don't have any other suggestions. I'm pretty sure there's not a big enough difference between <strong> and <span> to create a problem here, but happy to be proven wrong!

[jingxu9]

@jodeleeuw you were right, the flash still exists. But since it is just an instruction, the lag is not causing any big problems. Also it might be something related to the hardware, if the lag only appears on my end. @becky-gilbert Thank you so much for your helps!!