Translating PsychoPy to JavaScript

Coding
1

Hello,

I’m struggling with finding the right way to translate this PsychoPy Code to JS:

#getmouse
position = mouse.getPos()
posa = position [0]
posb = position [1]
buttons = mouse.getPressed()
#if buttons[0] == 1:
#    print position
#    buttons[0] = 0

if posa > pos1-0.14 and posa < pos1+0.14:
    if posb > pos2-0.0625 and posb < pos2+0.0625:
        if buttons[0] == 1:

(followed by an if code that I already translated into JS)
What I’m trying to do here is creating a box (image that was already connected with the mouse) with the coordinates of the picture, so that participants click on that image and are then able to continue the trial.

What I did so far is this:

#getmouse
var position = mouse.getPos()
var posa = position [0]
var posb = position [1]
var buttons = mouse.getPressed()
#if buttons[0] == 1:
#    print position
#    buttons[0] = 0

if (posa > pos1-0.14 && posa < pos1+0.14) {
    if (posb > pos2-0.0625 && posb < pos2+0.0625) {
        if (buttons[0] == 1) {
....}}}

Any suggestions?

2

Hi @rebecca.shane, if you are trying to get participants to click on a button (image) to continue, there are two options.

Without code

Go to your mouse component, and add the name of your clickable image to the clickable stimuli field, and set your mouse to end the trial on valid click.

With code

Use the JS code component and get the trial to end when the image contains the mouse and the mouse button is down:

if ( image.contains(mouse.getPos()) && mouse.getPressed()[0] === 1 ) {
  continueRoutine = false;
}
1 Like
3

Thank you for the reply! I already implemented the “Without Code” option, but the routine is a bit more complex, which is why I need a code.
Unfortunately I don’t know how to implement the “With Code” option in my code.
This would be the full code:

#getmouse
position = mouse.getPos()
posa = position [0]
posb = position [1]
buttons = mouse.getPressed()
#if buttons[0] == 1:

print position

buttons[0] = 0

if (posa > pos1+0.65 && posa < pos1+0.75) {
if (posb > pos2-0.75 && posb < pos2-0.65) {
if (buttons[0] == 1) {
if(slider.getRating() == right1){
if(slider_2.getRating() == right2){
if(slider_3.getRating() == right3){
if(slider_4.getRating() == right4){
if(mouse.getPressed()) {continueRoutine = false}
}}}}}}}

The participants need to click on 4 sliders to indicate 4 answers and only then the “next” button should get them to the next practice trial.

How should I write it?

4

Ok, well try the following Py/JS in the “Each Frame” tab of the code component. It checks whether all sliders have ratings. If any one has no rating, it will not allow the routine to end. The last bit of code is for your button, which is probably either a polygon or image stim? It checks whether the mouse is clicked in the image, and whether allowContinue is true (it will only be true if all sliders have ratings.

Python

allowContinue = True
for each in [slider, slider_2, slider_3, slider_4]:
  if each.getRating() == None:
    allowContinue = False
    break


if mouse.isPressedIn(yourButton) and allowContinue:
    continueRoutine = False

JavaScript

allowContinue = true
for (let each of [slider, slider_2, slider_3, slider_4]) {
  if (each.getRating() === undefined || each.getRating() === "undefined") {
    allowContinue = false;
    break;
  } 
}

if (yourButton.contains(mouse.getPos()) && mouse.getPressed()[0] === 1 && allowContinue) 
{
  continueRoutine = false;
}

Thats how I would do it, your code would be the following in Python:

#getmouse
position = mouse.getPos()
posa = position [0]
posb = position [1]
buttons = mouse.getPressed()

if slider.getRating() == right1 and slider_2.getRating() == right2 and slider_3.getRating() == right3 and slider_4.getRating() == right4:
    if posa > pos1+0.65 and posa < pos1+0.75 and posb > pos2-0.75 and posb < pos2-0.65:
      if buttons[0] == 1:
          continueRoutine = False
1 Like