Issue(s) while using images with Survey Likert Plugin

[batshell]

So, I have to create an Image rating task and I need to hide the image after 5 seconds. Here are the files that I have edited:

added stim duration in the jspsych-survey-likert.js file:

stimulus_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Stimulus duration',
        default: null,
        description: 'How long to show the stimulus.'
      },

In the main experiment file, I have added a new div tag for image with id: imgratehide and to hide it, I have added this code:

if (trial.stimulus_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        document.getElementById('imgratehide').style.visibility = 'hidden';
      }, trial.stimulus_duration);
    }

Problem(s):

1. Images take about 1-2 seconds to load, even when the images are small (max 30KB) and I also tried preload.
2. Sometimes the images disappear before the set time limit, to control this, I had to add a blank trial (200ms) between each of the rating task.

[jodeleeuw]

Hi @batshell,

Images take about 1-2 seconds to load, even when the images are small (max 30KB) and I also tried preload.

That's odd. Can you share more about the preloading approach you used? Are you using the preload plugin with 6.3.0?

Sometimes the images disappear before the set time limit, to control this, I had to add a blank trial (200ms) between each of the rating task.

Does this happen only after finishing a trial quickly? The setTimeout handler might still be running, and affect your next trial. You may need to call jsPsych.pluginAPI.cancelAllTimeouts() before ending the trial.

[jodeleeuw]

The auto_preload: true option won't work in this case because the images you are using aren't part of image-specific parameters (like stimulus in the image-keyboard-response plugin). When you use images in HTML markup jsPsych can't automatically detect those paths, so you'll need to load the images manually. Try using:

var preload = {
	type: 'preload',
	images: [...]
}

[batshell]

Thank you, but I had to preload all the images in a hidden "div" before start of the experiment.

[jodeleeuw]

That shouldn't be necessary to do. Did providing a list of the images to the preload plugin not work? If there's a bug I'd love to track it down.

[batshell]

That shouldn't be necessary to do. Did providing a list of the images to the preload plugin not work? If there's a bug I'd love to track it down.

Yea, it did not work, I did not see any error in the console as well.

[batshell]

@jodeleeuw I tried the preloading again by following the tutorial line by line, and it works great!
(https://www.jspsych.org/overview/media-preloading/)
Maybe I was doing something wrong, you can mark this thread as solved.