MouseTracker element

description

Creates a mouse-tracking data collector.

syntax

newMouseTracker(ELEMENT_NAME: string)
  • ELEMENT_NAME: The name of the newly-created element.

since

PennController 1.8

example(s) 


@newTrial(
@  newButton("Start")
@    .print("center at 50vw", "middle at 50vh").wait().remove()
@  ,
$  newMouseTracker("mouse")
$   .log()
$   .start()
@  ,
@  newCanvas("left", "40vw", "40vh")
@   .css("background","red")
@   .print("center at 25vw", "middle at 50vh")
@  ,
@  newCanvas("right", "40vw", "40vh")
@   .css("background","blue")
@   .print("center at 75vw", "middle at 50vh")
@  ,
@  newSelector("choice")
@   .add( getCanvas("left") , getCanvas("right") )
@   .log()
@   .wait()
@  ,
$  getMouseTracker("mouse")
$   .stop()
)
+ This code initaties the mouse tracker. The mouse tracker here tracks if user selects either right of left canvas.

Action commands

mousetracker.callback

syntax

.callback()

description

Will run the PennController command(s) or javascript function passed as arguments whenever the mouse moves after start and before stop have been called.

example

click to expand 

@newButton("Click then move your mouse when seeing a box")
@  .print("center at 50vw", "center at 50vh")
@  .wait()
@  .remove()
@,
@newCanvas("box", 100, 100).css("background", "black")
@,
@newMouseTracker("mouse")
$  .callback(
$    getCanvas("box").test.printed()
$      .success( newText("Good job!").print() )
$      .failure( newText("Missed it!").print() )
$    ,
$    getMouseTracker("mouse").stop()
$  )
@  .start()
@,
@newTimer( 200+800*Math.random() ).start().wait()
@,
@getCanvas("box").print()
@,
@newTimer( 200+300*Math.random() ).start().wait()
@,
@getCanvas("box").remove()
@,
@newButton("Finish").print().wait()
  • Starts a MouseTracker element once the button is clicked, waits between 200ms and 1s before printing a black square on the page and removes it after a time period between 200ms and 500ms. The callback command will run whenever the mouse starts moving after a click on the button, and will print a different message depending on whether the Canvas element is on the page, and will immediately stop the MouseTracker element, making sure the callback is called only once.
↑ back to top

mousetracker.log

syntax

.log()

description

Will add a line in the results file at the end of the trial reporting the mouse coordinates between start and stop.

example

click to expand 

@newTrial(
@  newButton("Start")
@    .print("center at 50vw", "middle at 50vh").wait().remove()
@  ,
@  newMouseTracker("mouse")
$   .log()
$   .start()
@  ,
@  newCanvas("left", "40vw", "40vh")
@   .css("background","red")
@   .print("center at 25vw", "middle at 50vh")
@  ,
@  newCanvas("right", "40vw", "40vh")
@   .css("background","blue")
@   .print("center at 75vw", "middle at 50vh")
@  ,
@  newSelector("choice")
@   .add( getCanvas("left") , getCanvas("right") )
@   .log()
@   .wait()
@  ,
@  getMouseTracker("mouse")
$   .stop()
)
  • This code initaties the mouse tracker. The mouse tracker tracks the coordinates between start and stop.
↑ back to top

mousetracker.start

syntax

.start()

description

Starts tracking the mouse cursor coordinates.

example

click to expand 

@newButton("Start")
@  .print("center at 50vw", "center at 50vh")
@  .wait()
@  .remove()
@,
@newMouseTracker("mouse")
@  .log()
$  .start()
@,
@newCanvas("left", "40vw", "40vh")
@  .css("background","red")
@  .print("center at 25vw","center at 50vh")
@,
@newCanvas("right", "40vw", "40vh")
@  .css("background","blue")
@  .print("center at 75vw","center at 50vh")
@,
@newSelector("choice").add(getCanvas("left"),getCanvas("right")).log().wait()
@,
@getMouseTracker("mouse").stop()
  • Will start tracking mouse movements after a click on Start and stop once one of the two Canvas elements is clicked.
↑ back to top

mousetracker.stop

syntax

.stop()

description

Stops tracking the mouse cursor coordinates.

example

click to expand 

@newButton("Start")
@  .print("center at 50vw", "center at 50vh")
@  .wait()
@  .remove()
@,
@newMouseTracker("mouse").log().start()
@,
@newCanvas("left", "40vw", "40vh")
@  .css("background","red")
@  .print("center at 25vw","center at 50vh")
@,
@newCanvas("right", "40vw", "40vh")
@  .css("background","blue")
@  .print("center at 75vw","center at 50vh")
@,
@newSelector("choice").add(getCanvas("left"),getCanvas("right")).log().wait()
@,
@getMouseTracker("mouse")
$  .stop()
  • Will start tracking mouse movements after a click on Start and stop once one of the two Canvas elements is clicked.
↑ back to top

Test commands

Table of contents