timing problems with plugin displaying three images at once

[levan....@gmail.com]

Hi,

I'm trying to show 3 images side-by-side on each trial and register a button press response. I've created a custom plugin to do this, but the 3 images do not show up on the screen at the same time.

This does not happen on every trial, only on some trials. Other trials, they all appear instantly (at least I can't notice a delay).

Images are delayed in random order. On some trials its the 1st image thats delayed, on others its the 2nd, sometimes the 3rd, sometimes its delayed left-to-right, sometimes right-to-left.

I'm using the JATOS interface to develop an online experiment. When I try my code with the JATOS server on my local machine, there is no timing issue. But when I upload the code to my institutional JATOS server, and try the experiment myself from home, the delay appears. This suggests some preloading problem.

I preload all the images, and I've tried various preloading methods. The timing problem is still there....

Roughly 36-120 images are being preloaded before the task. If I reduce this to just 1 image and just show that 1 image 3 times side-by-side, the lag disappears. This suggests to me that perhaps the images are still not being preloaded.

The custom plugin code is here: https://github.com/lbokeria/density_asymmetry_similarity_online/blob/main/extra_functions/jspsych-triplets-keyboard-response.js

The script that specifies the input parameters and initiats the jsPsych.init is this one: https://github.com/lbokeria/density_asymmetry_similarity_online/blob/main/triplet_task.html

Has anyone had such a timing issue when presenting 3 or more images at the same time?

Thank you. If you need any further information please let me know.

Levan Bokeria

[beckyann...@gmail.com]

Hi Levan,

It sounds like preloading may not be working? Have you verified via the Network tab in developer tools that the images are preloading successfully, and not being requested from the server again when they're presented during the trial? 

We're actually aware of a preloading/caching issue with the JATOS server (see https://groups.google.com/g/jatos/c/kevNzKeTQJM), which we're currently fixing. But this only affects certain versions of iOS/MacOS, so if your display issue happens on Windows then it must be a different problem.

The only other thing I'm wondering is if this part of the code is causing the problem: https://github.com/lbokeria/density_asymmetry_similarity_online/blob/1622a88eb3e06d9dc16235b44ec98f3559d13a3f/extra_functions/jspsych-triplets-keyboard-response.js#L180-L183

I'm not sure, but I think modifying the innerHTML property immediately triggers a display update, so doing this 3 times could cause timing problems because the browser is updating the page display, then running the next JS line, updating the display again, etc. This sequence should all happen very quickly, but maybe it some cases it overlaps with the monitor refresh so you get some of the image content on one of the frames and the rest on the next...? Anyway, you could try combining all of the HTML together and updating wrapper_arena.innerHTML just once.

I hope this helps. Let us know if you figure it out, and if you're still stuck then we can help dig into it more.

Cheers,

Becky

p.s. might be better if you post on the Github jsPsych discussion forum in the future, because this one isn't actively monitored anymore.