Standard element commands

Commands that are defined for all PennController element types.

Action commands

table of contents

Test commands

table of contents

standard.after

syntax

.after()

description

Adds some content to the right of the element.

example

click to expand 


@
@newImage("bad", "no.png")
@,
@newImage("good", "ya.png")
@,
@newText("left label", "Bad")
@    .before( getImage("bad") )
@,
@newText("right label", "Good")
$    .after( getImage("good") )
@,
@newScale("judgment", 5)
@    .before( getText("left label") )
$    .after( getText("right label") )
@    .print()
@    .wait()
  • Creates two image and two text elements and prints a 5-point radio-button scale, with the text Bad preceded by the image no.png on its left, and the text Good followed by the image ya.png on its right.
↑ back to top

standard.before

syntax

.before()

description

Adds some content to the left of the element.

example

click to expand 


@
@newImage("bad", "no.png")
@,
@newImage("good", "ya.png")
@,
@newText("left label", "Bad")
$    .before( getImage("bad") )
@,
@newText("right label", "Good")
@    .after( getImage("good") )
@,
@newScale("judgment", 5)
$    .before( getText("left label") )
@    .after( getText("right label") )
@    .print()
@    .wait()
  • Creates two image and two text elements and prints a 5-point radio-button scale, with the text Bad preceded by the image no.png on its left, and the text Good followed by the image ya.png on its right.
↑ back to top

standard.bold

syntax

.bold()

description

Makes any text in the element appear boldfaced.

example

click to expand 


@
@newText("warnning", "NOTE: this text is a warning!")
$    .bold()
@    .italic()
@    .color("red")
@    .print()
  • Prints a text in boldface, italic and red.
↑ back to top

standard.center

syntax

.center()

description

Makes the element appear centered on the horizontal axis.

example

click to expand 


@
@newText("helloworld", "Hello world")
$    .center()
@    .print()
  • Prints Hello world onto the screen, horizontally centered.
↑ back to top

standard.color

syntax

.color()

description

Makes any text in the element appear in the specified color. The "color" string follows CSS conventions (most common names such as “red”, “blue”, … are valid)

example

click to expand 


@
@newText("warnning", "NOTE: this text is a warning!")
@    .bold()
@    .italic()
$    .color("red")
@    .print()
  • Prints a text in boldface, italic and red.
↑ back to top

standard.css

syntax

.css()

description

Applies the CSS style(s) to the element.

example

click to expand 


@
@newText("frame", "framed")
$    .css("border", "solid 1px black")
@,
@newText("sentence", "The last word of this sentence is ")
@    .after( getText("frame") )
@    .print()
  • Prints a text reading The last word of this sentence is framed, with the last word (framed) framed in a box with 1px black borders.
↑ back to top

standard.cssContainer

syntax

.cssContainer()

description

Applies the CSS style(s) to the container’s element.

example

click to expand 

@newText("frame", " world")
@    .before( newText("Hello ") )
@    .css("border", "solid 1px black")
$    .cssContainer("border", "solid 1px red")
@    .print()
  • Prints the text world preceded with the text Hello and adds a black frame around world and a red frame around the whole Hello world text.
↑ back to top

standard.disable

syntax

.disable()

description

Disables any interactive feature of the element.

example

click to expand 

@newKey("audioanswer", "Y", " ")
@    .log("last")
@    .setVar("inputanswer")
@    .callback( getTimer("time limit").stop() )
@,
@getTimer("time limit")
@    .wait()
@,
$getKey("audioanswer").disable()
  • Key element remains active until it is disabled in the last line.
↑ back to top

standard.enable

syntax

.enable()

description

Enables any interactive feature of the element that was previously disabled.

example

click to expand 


@
@newAudio("sentence", "test.mp3")
@    .once()
@    .print()
@,
@newKey("secret key", "R")
@    .wait()
@,
@getAudio("sentence")
$    .enable()
  • Prints buttons to play/pause the audio file test_sentence.ogg, and disables those buttons when the file has played through (see audio.once).
↑ back to top

standard.hidden

syntax

.hidden()

description

Makes the element invisible. Note that when printed, a hidden element still occupies space on the page, but its content is not visible.

example

click to expand 


@newText("instruction", "Guess what fruit is in the image below")
@    .print()
@,
@newImage("fruit", "pear.png")
$    .hidden()
@    .print()
@,
@newButton("reveal", "Reveal fruit")
@    .print()
@    .wait()
@,
@getImage("fruit")
@    .visible()

  • Adds some text to the page, a blank space below it and a button below the blank space which, when clicked, reveals an image of a pear.

↑ back to top

standard.italic

syntax

.italic()

description

Makes any text in the element appear in italic.

example

click to expand 


@newText("warnning", "NOTE: this text is a warning!")
@    .bold()
$    .italic()
@    .color("red")
@    .print()
  • Prints a text in boldface, italic and red.
↑ back to top

standard.left

syntax

.left()

description

Makes the element appear horizontally aligned to the left (default).

example

click to expand 

@newText("helloworld", "Hello world")
@    .right()
@    .print()
@,
@newButton("left", "Align text to the left")
@    .print()
@    .wait()
@,
@getText("helloworld")
$    .left()
  • Prints Hello world onto the screen, horizontally aligned to the left.
↑ back to top

standard.log

syntax

.log()

description

Will add lines to the results file reporting element-specific events. See each Element page to see what gets recorded, and which parameter you can pass to log.

example

click to expand 

@
@newButton("go", "Go!")
@    .print()
@    .wait()
@,
@newText("sentence", "Hello world!")
$    .log()
@    .print()
@,
@newButton("done", "Done!")
@    .print()
@    .wait()
↑ back to top

standard.print

syntax

.print()

description

Adds the content of the element to the screen. This has no effect for non-visual elements such as the purely interactive Selector elements.

example

click to expand 

@
@newImage( "smiley" , "ya.png" )
@,
@newCanvas( "myCanvas" , 100 , 100 )
@    .css( "border" , "solid 1px black" )
@    .center()
@    .add( "center at 50%" , "center at 50%" , getImage("smiley") )
$    .print()
  • Prints the smiley image at the center of the canvas.
↑ back to top

standard.refresh

syntax

.refresh()

description

Calls the command print again on the element, while leaving it where it was printed last.

example

click to expand 

@
@newImage( "smiley" , "ya.png" )
@,
@newCanvas( "myCanvas" , 100 , 100 )
@    .css( "border" , "solid 1px black" )
@    .center()
@    .add( "center at 50%" , "center at 50%" , getImage("smiley") )
@    .print()
@,
@newButton( "resize" , "Resize the image" )
@    .print()
@    .wait()
@,
@getImage( "smiley" )
@    .size( 64, 64 )
@,
@getCanvas("myCanvas")
$    .refresh()
  • Prints the smiley image at the center of the canvas and adds a button below the canvas. After the button is clicked, the smiley is resized to 64x64 and without refresh the smiley would no longer be centrally aligned on canvas. Calling print on the canvas would recenter the image correctly, but it would move the canvas below the button. The solution is therefore to call refresh (or to call the settings command add again on the canvas).
↑ back to top

standard.remove

syntax

.remove()

description

Removes the element from the screen. This has no effect for non-visual elements such as the purely interactive Selector elements.

example

click to expand 

@
@newButton("clickme", "Click me")
@    .print()
@    .wait()
$    .remove()
  • Adds a button that says Click me to the screen, and removes it after it is clicked.
↑ back to top

standard.right

syntax

.right()

description

Makes the element appear horizontally aligned to the right.

example

click to expand 

@
@newText("sentence", "This is a longer sentence")
@    .print()
@,
@newText("helloworld", "Hello world")
$    .right()
@    .print()
  • Prints Hello world onto the screen, horizontally aligned to the right.
↑ back to top

standard.scaling

syntax

.scaling()

description

Scales elements using a zoom index/to a given size/container.

example

click to expand 


@newTrial(
@    newCanvas("container", 640, 360)
@      .color("pink")
@      .add( 20, "middle at 50%", newButton("Hello"))
@      .add("right at 620px", "middle at 50%", newButton("world"))
$      .scaling("page")
@      .print("center at 50vw","middle at 50vh")
@    ,
@    getButton("Hello").wait()
@)
  • In the example above, command will make sure the Canvas element and the elements it containsare stretched (preserving the ratio) so that it occupies the maximum area possible on the page.
↑ back to top

standard.selector

syntax

.selector()

description

Since beta 0.3, Selector adds a .selector command to all elements as another method for adding them to a selector.

example

click to expand 


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

standard.setVar

syntax

.setVar()

description

Stores the current value of the element in the Var element named varName (if it exists).

example

click to expand 

@
$newVar("name")
@,
@newTextInput("nameInput", "What is your name?")
@    .once()
@    .print()
@    .wait()
$    .setVar("name")
@,
@newText("helloname")
@    .before( newText("hello", "Hello") )
$    .text( getVar("name") )
@    .print()
  • Creates a Var element named name and adds a text box in which to enter a name. When the return/enter key is pressed while editing the input box, it disables the box and stores its value in the Var element named name. Then it prints a text reading Hello name, where name corresponds to the value of the Var element.
↑ back to top

standard.size

syntax

.size()

description

Resizes the element to a width of width pixels and a height of height pixels.

example

click to expand 


@newImage("smiley", "pear.png")
$    .size(40, 40)
@    .print()
  • Adds a 40x40px image pear.png onto the screen.
↑ back to top

standard.visible

syntax

.visible()

description

Makes the element visible (again). This is useful if you previously hid the element with .hidden.

example

click to expand 


@newText("instruction", "Guess what fruit is in the image below")
@    .print()
@,
@newImage("fruit", "pear.png")
@    .hidden()
@    .print()
@,
@newButton("reveal", "Reveal fruit")
@    .print()
@    .wait()
@,
@getImage("fruit")
$    .visible()

  • Adds some text to the page, a blank space below it and a button below the blank space which, when clicked, reveals an image of a pear.

↑ back to top

standard.test.printed

syntax

.test.printed()

description

Tests whether the element was printed onto the page (and has not been removed since then).

example

click to expand 


@
@newText("instructions", "Click on Top/Bottom to NOT print its word")
@    .print()
@,
@newButton("top", "Top")
@    .callback( getButton("top").remove() ) 
@    .print()
@,
@newButton("bottom", "Bottom")
@    .callback( getButton("bottom").remove() )
@    .print()
@,
@newButton("print", "Print the buttons' words")
@    .print()
@    .wait()
@    .remove()
@,
$getButton("top")
$    .test.printed()
$    .success( newText("top word", "hello").print() )
$,
$getButton("bottom")
$    .test.printed()
$    .success( newText("bottom word", "world").print() )

  • Prints a Top and a Bottom button onto the page, which disappear when clicked. After a click on the print button, the word hello will appear if the top button is still displayed, and the word world will appear if the bottom button is still displayed.

↑ back to top