Selector element

description

Creates a group that elements can be added to and selected from.

syntax

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

since

beta 0.3

example(s) 


@newTrial(
@  newText("q1", "What's up?")
@    .print()
@  ,
@  newText("q2", "How are you doing?").
@    .print()
@  ,
@  newText("q3", "All good?")
@    .print()
@  ,
@  newText("q4", "How's it going?")
@    .print()
@  ,
$  newSelector("choice")
$   .add( getText("q1") , getText("q2") , getText("q3") , getText("q4")  )
$   .shuffle()
$   .wait()
@)
+ Adds a selection of four questions.

Action commands

selector.add

syntax

.add()

description

Adds as many elements to the selector. By default, selection is done through clicks. See .keys and .enableClicks and .disableClicks.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
$    .add( getImage("square") , getImage("triangle") )
@    .wait()
  • Adds two images side by side and waits for a click on either one of them.
↑ back to top

selector.callback

syntax

.callback()

description

Will execute the command on the element upon next selection, or the function whenever selection happens.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
$    .callback( getSelector("shapes").shuffle() )
@    .wait()
  • Adds two images side by side. The positions of the images are shuffled anytime either image is clicked.
↑ back to top

selector.disableClicks

syntax

.disableClicks()

description

Makes it impossible to select by clicking. If no .keys command is called on the element, this makes any selection impossible.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
$    .disableClicks()
@    .add( getImage("square") , getImage("triangle") )
@    .keys(     "F"           ,        "J"           )
@    .wait()
  • Adds two images side by side and waits for a selection by pressing either the F key or the J key.
↑ back to top

selector.enableClicks

syntax

.enableClicks()

description

Makes it possible to select by clicking (default).

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .disableClicks()
@    .add( getImage("square") , getImage("triangle") )
@    .keys(     "F"           ,        "J"           )
@    .wait()
$    .enableClicks()
  • Adds two images side by side and waits for a selection by pressing either the F key or the J key, after which it becomes possible to select by clicking again.
↑ back to top

selector.frame

syntax

.frame()

description

Defines the style of the frame around the selected element. By default, it is set to solid 2px green.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
$    .frame("dashed 3px violet")
@    .wait()
  • Adds two images side by side, waits for a click on either one of them and then prints a button. Until the button is clicked, the selected image appears in a dashed, violet, 3px-wide frame.
↑ back to top

selector.keys

syntax

.keys()

description

Makes it possible to select the elements by pressing the specified keys. The keys are associated to the element in the order in which they were added, if no shuffle took place in the meantime.

example

click to expand
  • Accepts special keys as arguments as well, such as (Enter, Escape, ArrowLeft, LeftShift, etc).

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .disableClicks()
@    .add( getImage("square") , getImage("triangle") )
$    .keys(     "F"           ,        "J"           )
@    .wait()
  • Adds two images side by side and waits for a selection by pressing either the F key or the J key.
↑ back to top

selector.log

syntax

.log()

description

A line will be added to the results file when an element is selected indicating its reference name and the timestamp of selection.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
$    .log()
@,
@newButton("validation", "Validate")
@    .print()
@    .wait()
  • Adds two images side by side and a button to click below them. Any selection of either image will output a line in the results file.
↑ back to top

selector.once

syntax

.once()

description

Disables the selector after the first selection has happened.

example

click to expand 

@
@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
$    .once()
  • Adds two images side by side and a button to click below them. Any selection is definitive: further clicks will not move the frame.
↑ back to top

selector.select

syntax

.select()

description

Selects the specified element.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
$    .select( getImage("square") )
@    .wait()
  • Adds two images side by side, selects the image square by default, and waits for a click on either one of them.
↑ back to top

selector.shuffle

syntax

.shuffle()

description

See the action command shuffle

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .disableClicks()
@    .add( getImage("square") , getImage("triangle") )
$    .shuffle()
@    .keys(     "F"           ,        "J"           )
@    .wait()
  • Adds two images side by side. Initially, square is on the left, and triangle is on the right, but .shuffle randomly reverses (or does not reverse) the order. A press on the F key will select the image that ends up on the left (whichever it ends up being) and a press on the J key will select the image that ends up on the right (whichever it ends up being).
↑ back to top

selector.unselect

syntax

.unselect()

description

Unselects any element currently selected.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
@    .select( getImage("square") )
@    .wait()
$    .unselect( getImage("square") )

Adds two images side by side, selects the image square by default, and waits for a click on either one of them. After that it unselects image square.

↑ back to top

selector.wait

syntax

.wait()

description

Waits until one of the elements of the selector is selected before evaluating and executing the next commands.

example

click to expand 

@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
$    .wait()
  • Adds two images side by side and waits for a click on either one of them.
↑ back to top

Test commands

selector.test.index

syntax

.test.index()

description

Tests the index of an element in the selector (starting with 0). If you pass no index, the test will be a success if the element is part of the selector, else a failure.

example

click to expand 

@
@newText("feedback")
@,
@newCanvas("shapes", 825, 440)
@    .add(   0,   0, newImage("square"  , "square.png"  ) ) 
@    .add( 425,   0, newImage("triangle", "triangle.png") ) 
@    .print()
@,
@newSelector("choice")
@    .add( getImage("square") , getImage("triangle") ) 
@    .shuffle()
@,
$getSelector("choice")
$    .test.index( getImage("square") , 0 )
$    .success( getText("feedback").text("Square is on the left!")  )
$    .failure( getText("feedback").text("Square is on the right!") )
@,
@getCanvas("shapes")
@    .add( "center at 50%" , "center at 420" , getText("feedback") )
  • First draws a square Image element to the left of a triangle Image element onto a Canvas element, then groups the Image elements into a Selector element and uses this to shuffle their positions. Will draw a Text element saying Square is on the left! if the square Image element ended up first in the Selector element after shuffling (index = 0), or Square is on the right! otherwise (i.e., if it ended up second, index = 1).
↑ back to top

selector.test.selected

syntax

.test.selected()

description

Tests whether an element is selected.

example

click to expand 

@
@newImage("square", "square.png")
@,
@newImage("triangle", "triangle.png")
@    .before( getImage("square") )
@    .print()
@,
@newSelector("shapes")
@    .add( getImage("square") , getImage("triangle") )
@,
@newButton("validation", "Validate")
@    .print()
$    .wait( getSelector("shapes").test.selected() )
  • Adds two images side by side, and a Validate button below them. The button will validate a click only after an image has been selected.
↑ back to top

Table of contents