psychopy.org | Reference | Downloads | Github

Unit issue with online experiment

URL of experiment: https://run.pavlovia.org/ellenhan/story_pile_sorting_v1/html/

Description of the problem: I have a pile sorting task (with images of short stories for subjects to drag around into the piles) and the task works locally, but wouldn’t work online (not beyond start instruction). The error message is shown below:

I had custom code in both ‘begin routine’ and ‘each frame’, but right now, I am not even sure if the experiment stopped online due to issues in my custom code or not. All my units are in ‘norm’, and I’ve also tried to change all of them to height, but didn’t work either. Would appreciate any help, Thanks!

@YT_HAN, thanks for the URL. The reason for the error is the custom code where you check whether the image contains the mouse. I think the problem is that the image has not been drawn on the first iteration of the code when you are checking if it contains the mouse, so you need an extra check:

for (let i = 0; i < stimuli.length; i++) {
  if (stimuli[i].status === PsychoJS.Status.STARTED && stimuli[i].contains(mouse)) {
    stimuli[i].size = 2*sizes[i];}
  else  {
    stimuli[i].size = 0.2*sizes[i];}
  }

You are also going to have some other errors with your code, for example the isPressedIn function does not exist online. For the equivalent:

if (image.contains(mouse) && mouse.getPressed()[0] === 1 ) {
  // do something
}

Thank you for replying so quick!! So I have checked that my custom code in the ‘begin routine’ part should be correct, because when I comment all the code in ‘each frame’, the screen shows everything alright (the images are in their native size because in the builder, the size is left as blank (http://www.psychopy.org/builder/components/image.html)).

And right now, I am only enabling the code where I check if image contains mouse in the ‘each frame’, and I used your code, which indeed gets rid of the error message before. But I think I have a new problem now, the images don’t show up anymore. And my suspicion is that it has something to do with setting new sizes for the images (because when I do console.log(stim_sizes), it’s ‘undefined’). Any thoughts on that? Thanks again!

@YT_HAN, yes I think you need to set the size of the image to get this working correctly online. In your begin routine tab, you can add a setSize call in your loop which sets the random position of your stories

for (var i = 0; i < stimuli.length; i++) {
    stimuli[i].setPos([xs[i], ys[i]]);
    stimuli[i].setSize([.2, .2]);  // Set size to something sensible
    stim_sizes.push(stimuli[i].size);
    }

The next problem is how you change your sizes when the mouse hovers over them, because you cannot do the arithmetic on the array that way. Instead, use the map function to create a new array with your modified values for size:

for (let i = 0; i < stimuli.length; i++) {
  if (stimuli[i].status === PsychoJS.Status.STARTED && stimuli[i].contains(mouse)) {
    stimuli[i].size = stim_sizes[i].map(x => x * 2);}  // Map returns a new array with new values
  else  {
    stimuli[i].size = stim_sizes[i].map(x => x * .2);}
  }

Then, you can add the following to make sure your clicked stories can be dragged:

for (let i = 0; i < stimuli.length; i++) {
  if (stimuli[i].status === PsychoJS.Status.STARTED && stimuli[i].contains(mouse) && mouse.getPressed()[0] === 1) {
    stimuli[i].setPos(mouse.getPos());
    break;
  }
}

Thanks David, I can get all features to work on Chrome now! One issue though, is that it doesn’t seem to work on Safari (and not sure about other browsers), and I think the mouse object seems to be the issue(clicking and hovering doesn’t do anything). Any idea why?