Trouble getting draggable text components to work online via Pavlovia

Online experiments
1

OS: Mac OS Sequoia
PsychoPy version: 2024.2.2
Standard Standalone Installation? y
URL of experiment: generation [PsychoPy]
Do you want it to also run locally? no
What are you trying to achieve?: Allow users to drag text components into on-screen boxes.
What did you try to make it work?: Set text components to ‘draggable’ via builder. This worked when running the task locally via psychopy, but it does not seem to work in my online task. I do not receive an error message, it’s just that when I attempt to drag the text components they remain fixed to their location. All text components that I want users to be able to drag are included as “Clickable stimuli”, and their position is set to “Set every frame”.

Other relevant post: Transfering JavaScript experiment to online PsychoPy - #3 by ilkekav

2

If their position is “set every frame”, then I’d expect their position to be reset to whatever value is in that box every frame - hence what you’re seeing. If you choose “constant” instead, then its position is just set once at the beginning and then won’t override the position setting when it’s being dragged.

3

Thanks for getting back to me, Todd! After making that change, the draggable text components are still fixed in their positions. I should have provided this before, but here is the relevant JS code:

Begin experiment

#possible initial positions of draggable stimuli
pos_pool = [[0, (- 0.1)], [0, (- 0.15)], [0, (- 0.2)], [0, (- 0.25)]];

Begin routine

#draggable text components
terms = [term1, term2, term3, term4];

#polygons fixed in “end positions” where participants should drag stimuli
responses = [resp1, resp2, resp3];

#shuffle initial positions and assign draggable stimuli to them
util.shuffle(pos_pool);
for (var term, _pj_c = 0, _pj_a = util.range(terms.length), _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
term = _pj_a[_pj_c];
terms[term].pos = pos_pool[term];
}

Each frame

#loop through each “end position” to check whether a draggable stimulus is in it. If so, change the border color of the “end position” polygon to green, otherwise keep it black
for (var resp, _pj_c = 0, _pj_a = util.range(responses.length), _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
resp = _pj_a[_pj_c];
for (var term, _pj_f = 0, _pj_d = terms, _pj_e = _pj_d.length; (_pj_f < _pj_e); _pj_f += 1) {
term = _pj_d[_pj_f];
if (responses[resp].contains(term)) {
responses[resp].lineColor = “green”;
break;
}
}
}

4

I ended up editing code from demos/Drag and drop:

In builder, I actually had to uncheck “Draggable?” from each of the components that I want to drag (in my code, “terms”). Relevant JS code:

#Begin experiment
movePicked = function(picked, mouse, grabbed) {
if (grabbed != ‘undefined’ && mouse.getPressed()[0] === 1) {
grabbed.pos = mouse.getPos();
return grabbed
} else {
for (let piece of picked) {
if (piece.contains(mouse) && mouse.getPressed()[0] === 1 && grabbed === ‘undefined’){
piece.pos = mouse.getPos();
return piece;
}
}
return ‘undefined’
}
}

#Begin routine
terms = [term1, term2, term3, term4];
responses = [resp1, resp2, resp3, resp4];
picked = ;
movingPiece = null;

#Each frame
for (let term of terms) {
if (term.contains(mouse) && mouse.getPressed()[0] === 1) {
picked.push(term)
}
}

movingPiece = movePicked(picked, mouse, movingPiece)