Defining function breaks the experiment (Drag & Drop Stimuli)

Online experiments
1

Hi everyone.

I am trying to adapt a drag & drop code (Drag & Drop Stimuli - #6 by dvbridges) to work online.

The py code:

def movePicked(picked, newmouse, grabbed):
    # Move piece if we already moving that piece
    if grabbed is not None and newmouse.isPressedIn(grabbed):
        grabbed.pos = newmouse.getPos()
        return grabbed
    else:
        # Move newly clicked piece
        for piece in picked:
            if newmouse.isPressedIn(piece) and grabbed is None:
                return piece

The auto translated js code:

function movePicked(picked, newmouse, grabbed) {
    if (((grabbed !== null) && newmouse.isPressedIn(grabbed))) {
        grabbed.pos = newmouse.getPos();
        return grabbed;
    } else {
        for (var piece, _pj_c = 0, _pj_a = picked, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
            piece = _pj_a[_pj_c];
            if ((newmouse.isPressedIn(piece) && (grabbed === null))) {
                return piece;
            }
        }
    }
}

When I run the experiment I got the error ReferenceError: movePicked is not defined
Following the instruction on this discussion (Manually defined functions don't work when running experiment online) I changed the js code accordingly:

function = movePicked(picked, newmouse, grabbed) {
    if (((grabbed !== null) && newmouse.isPressedIn(grabbed))) {
        grabbed.pos = newmouse.getPos();
        return grabbed;
    } else {
        for (var piece, _pj_c = 0, _pj_a = picked, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
            piece = _pj_a[_pj_c];
            if ((newmouse.isPressedIn(piece) && (grabbed === null))) {
                return piece;
            }
        }
    }
}

But now if I run the experiment it gets stuck on “initializing the experiment”.
What is wrong?

2

Hi @tandy , try this instead

movePicked = function(picked, newmouse, grabbed) { ...
1 Like
3

I am now getting another error as soon as the routine starts: TypeError: Cannot read properties of undefined (reading ‘contains’)

The code in the begin experiment

movePicked = function(picked, newmouse, grabbed) {
    if (((grabbed !== null) && newmouse.isPressedIn(grabbed))) {
        grabbed.pos = newmouse.getPos();
        return grabbed;
    } else {
        for (var piece, _pj_c = 0, _pj_a = picked, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
            piece = _pj_a[_pj_c];
            if ((newmouse.isPressedIn(piece) && (grabbed === null))) {
                return piece;
            }
        }
    }
}

The code in the begin routine:

pieces = [drag_1, drag_2, drag_3, drag_4, drag_5, drag_6, drag_7, drag_8, drag_9, drag_10];
picked = [];
movingPiece = null;

The code in each frame tab:

for (var piece, _pj_c = 0, _pj_a = pieces, _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
    piece = _pj_a[_pj_c];
    if ((newmouse.isPressedIn(piece) && (movingPiece === null))) {
        picked.push(piece);
    }
}
movingPiece = movePicked(picked, newmouse, movingPiece);
4

Oh I remember now that this code was written manually, so you are going to run into errors unless you disable the auto-translation. I will have to have a look at running it with the new version of PsychoPy.

5

Try the following, which worked for me (running v2021.2.3):

  1. manually specify movingPiece in a JS component, as ‘movingPiece = undefined;’ (and remove corresponding variable, i.e, ‘movingPiece = None’, from auto->JS component)
  2. for all JS defined functions related to mouse drag/drop, change ‘null’ to ‘undefined’ (without the ‘’).

Autotranslate turns ‘None’ into ‘null’, but should be ‘undefined’, according to PsychoPy Python to Javascript crib sheet 2021 - Google Docs

2 Likes
6

It worked, thank you!