Event order issue online when updating image on each frame


I’ve created an experiment through the builder that displays an image and allows participants to change the appearance of that image along a fixed 12-point scale using left and right arrow keys. There are 12 versions of each image saved with unique filenames (e.g. imageA_1.png, imageA_2.png… and so on), and I added a short bit of code that collects key press and updates the file name of the displayed image on each frame:

#change image down the scale with left arrow
if event.getKeys(['left']):
  if this_level >1:

#change image up the scale with right arrow
if event.getKeys(['right']):
  if this_level<12:

# update image name with new level
this_image = ImageName + '_' + str(this_level) + '.png'

ImageName is the prefix of the image name per trial loaded in from a csv. A different key (space bar) allows them to move on to the next routine.
This all works smoothly when running locally through PsychoPy. However, when I deploy the experiment to pavlovia, something odd is happening with the image updating (no errors though):

  • On the very first trial, no image is shown at all.

  • On all subsequent trials, the image that should have been presented on the previous trial briefly flashes on the screen before presenting the correct image for the current trial.

I have tried a number of workarounds within PsychoPy but no luck yet (and it’s difficult to tell what the problem is because it runs fine locally). I assume it’s specific to the js/html order of events.

Any ideas/help would be much appreciated,

Hi Rose, I had the exact same issues and the code outlined by Thomas in this thread fixed it for me.

Try something like: componentName.setImage(this_image) in your begin routine tab.

Hi Tim,
Ah that worked perfectly – thank you!!

Does this auto translate to something that works online?

No it doesn’t. I had to go into the js file and swap out



psychoJS.eventManager.getKeys({keyList: ['left'], waitRelease: false}).length > 0

That works online, and allows participants to press and hold either key to move up and down the scale continuously.

1 Like

I need to try that. I’d be using keys=event.getKeys() and then if ‘left’ in keys but it would require a new press for each step.