MouseTracker only while dragging for use with DragDrop

[mawilson]

I’m setting up an experiment that uses a DragDrop to allow a participant to place a single word in one of two positions. After they place the word the first time, the DragDrop is disabled so they can’t change it.

I’d like to use a MouseTracker to see how participants move the cursor as they’re dragging the word (e.g., do they hesitate or change direction?), so I’m using a MouseTracker for that. However, the default behavior of the mouse tracker tracks everything, so even if I turn it on right before the DragDrop is displayed, if someone moves their mouse around before clicking on a draggable element it will still pick that up (though stopping it right after the DragDrop is finished prevents tracking later movement).

It looks like the callback for DragDrop only activates when an element is dropped, which works to stop the tracker, but not to start it.

Is there a way to turn on mouse tracking only when an element is being dragged (or at least only when the left mouse button is being held down, under the assumption participants are unlikely to do that unless they’re dragging the word)?

The experiment is here: https://farm.pcibex.net/r/PtpjPM/.

Here’s the relevant code:

newMouseTracker("mouse").log().start(),

newDragDrop("dd", "bungee")
    .log("all")
    .addDrop(getText(first_arg), getText(second_arg))
    .addDrag(getText("word"))
    .offset('0.5em', '0.1em', getText(first_arg), getText(second_arg))
    .wait()
    .callback(getMouseTracker("mouse").stop())
    .removeDrag(getText("word"))
    .removeDrop(getText(first_arg), getText(second_arg)
)		

[Jeremy]

Hi,

My initial suggestion was to use a Selector element to detect a click on the word, and start the MouseTracker element then, but it turns out that selector.callback also fires only after the click has been released, which defeats the purpose

At this point, you’re better off injecting a javascript function using the Function element:

newMouseTracker("mouse").log()
,

newFunction( async ()=> {
    await new Promise(r=>getText("word")._element.jQueryContainer.mousedown(r));
    getMouseTracker("mouse").start()._runPromises();
})
    .call()
,

Jeremy

[mawilson]

Perfect—thank you so much!

[Author]

Posts