Line length adjustment not working online

MacOS
PsychoPy version: 2021.1.4

What are you trying to achieve?:

  • I have a method of adjustment experiment where participants will see two lines of different heights, and they have to adjust the height of one of the lines to match that of the reference line (indicated with a circle around it). They will use the up and down arrow keys to adjust and then press space to move onto the next trial. I want to calculate their average error of response (how much bigger or smaller they adjusted the line to be compared to the reference) and change it into a variable for the next part of my experiment.

URL of experiment: https://pavlovia.org/run/Ahsant13/sizeadjustment

Problem:
The experiment works fine locally, but the adjusting portion isn’t working online. Pressing the up/down arrow key should only move the height by about 2 pixels at a time, but online it’s moving by a big amount then giving the following error message.

Unfortunately we encountered the following error:

  • when converting an object to its numerical form
  • unable to convert NaN,NaN0,2 to a number

What did you try to make it work?:
I have tried to change the amount adjusted to different numbers like 0.5px or 7px, and it still works locally and not online so I think it has to do with my psychoJS code.

What I need help with:
I need help figuring out what’s wrong with my code. I have a code component in my trial that does all the adjusting portions. This is what it looks like so far on the PsychoJS

#Begin Experiment:
event = psychoJS.eventManager;
thisExp = psychoJS.experiment;
size_list = ;

#Each Frame:
#resp = event.getKeys([“up”, “down”, “space”, “escape”]);
if (resp.length) {
if ((resp[0] === “down”)) {
ResizeHeight1.size = (ResizeHeight1.size - [0, 2]);
} else {
if ((resp[0] === “up”)) {
ResizeHeight1.size = (ResizeHeight1.size + [0, 2]);
} else {
if ((resp[0] === “space”)) {
thisExp.addData(“size_judgement”, ResizeHeight1.size[1]);
continueRoutine = false;
} else {
if ((resp[0] === “escape”)) {
core.quit();
}
}
}
}
}
Difference = (polygon.size[1] / ResizeHeight1.size[1]);
thisExp.addData(“Difference”, Difference);
event.clearEvents();

#End Routine
size_list.append(Difference);
average = np.average(size_list);
thisExp.addData(“average”, average);

Hey!

Looking at your code, I spot two things that JavaScript has a hard time with:

ResizeHeight1.size - [0, 2]
Here you’re subtracting two arrays (called tuples or something in Python?) from each other, but JS doesn’t let you to that. You need to do it for each element individually. For instance:
ResizeHeight1.size[1] = ResizeHeight1.size[1] - 2

np.average
Numpy isn’t supported by JS, so you’ll need another way to calculate the mean.

Overall, I’ve got a debugging tip (or two):

  1. To find out which line gives an error, see Thomas Pronk / tutorial_js_semantic_error · GitLab
  2. Also it helps to produce debug output at various steps, so you can trace what’s happening. See Thomas Pronk / tutorial_js_console_log · GitLab

Best, Thomas