Event order issue online when updating image on each frame

Online experiments
, ,
1

Hi,

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:
    this_level=this_level-1
  else:
    this_level=1

#change image up the scale with right arrow
if event.getKeys(['right']):
  if this_level<12:
    this_level=this_level+1
  else:
    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,
Rose

2

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.

3

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

4

Does this auto translate to something that works online?

5

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

event.getKeys(['left'])

for

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
6

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.