button.click

getButton(id).click() (since PennController 1.2) Simulates a click on the button. Example: [js highlight=”3,4″ try=”true”]newKey(” “) .settings.callback( getButton(“continue”) .click() ) , newButton(“continue”, “Continue”) .print() .wait()[/js] Creates a Key element associated with the spacebar which, whenever pressed, will simulate a click on the continue button added below it, then will wait until the button is clicked (or …

standard.settings.cssContainer

getElement(id).settings.cssContainer(“styleName”, “style”) or getElement(id).settings.cssContainer({“style name 1”: “style 1”, “style name 2”: “style 2″}) Applies the CSS style(s) to the container’s element. This will affect both the element itself and any element wrapping it as added via or . This command often more closely accomplishes what you want to achieve than the command. Example: [js highlight=”4″ …

button.settings.callback

getButton(id).settings.callback( command ) or getButton(id).settings.callback( command1, command2 ) Will execute the command(s) whenever the button is clicked. Example: [js highlight=”5-9″ try=”true”]newVideo(“skate”, “skate.mp4”) .print() , newButton(“(Re)play”) .settings.callback( getVideo(“skate”) .stop() .play() ) .print()[/js] Adds onto the page a video and a button which, whenever clicked, starts or restarts playing the video from the beginning.

standard.refresh

getElement(id).refresh() (since PennController 1.1) Calls the command again on the element, while leaving it where it was printed last. This command is primarily useful if some aesthetic command does not take effect unless print is called afterward, but you do not want to call print because calling it when you need the aesthetic command to …

standard.setVar

getElement(id).setVar( varName ) (since beta 0.3) Stores the current value of the element in the Var element named varName (if it exists). What the current value corresponds to is specific to each element type: For Audio elements, it corresponds to the timestamp of the end of the last playback so far (0 if never played …

standard.remove

getElement(id).remove() Removes the element from the screen. This has no effect for non-visual elements such as the purely interactive . Note that this leaves no space where the element previously was on the page (this is really removing the element, not just hiding it). Example [js highlight=”4″ try=”true”] newButton(“clickme”, “Click me”) .print() .wait() .remove() [/js] …

standard.test.printed

getElement(id).test.printed() (since beta 0.3) Tests whether the element was printed onto the page (and has not been removed since then). Example: [js highlight=”17-27″ try=”true”] newText(“instructions”, “Click on Top/Bottom to NOT print its word”) .print() , newButton(“top”, “Top”) .settings.callback( getButton(“top”).remove() ) .print() , newButton(“bottom”, “Bottom”) .settings.callback( getButton(“bottom”).remove() ) .print() , newButton(“print”, “Print the buttons’ words”) .print() …

standard.settings.visible

getElement(id).settings.visible() (since beta 0.3) Makes the element visible (again). This is useful if you previously hid the element with .settings.hidden. Example: [js highlight=”13″ try=”true”]newText(“instruction”, “Guess what fruit is in the image below”) .print() , newImage(“fruit”, “pear.png”) .settings.hidden() .print() , newButton(“reveal”, “Reveal fruit”) .print() .wait() , getImage(“fruit”) .settings.visible() [/js] Adds some text to the page, a …

standard.settings.size

getElement(id).settings.size(width, height) Resizes the element to a width of width pixels and a height of height pixels. Example: [js highlight=”2″ try=”true”]newImage(“smiley”, “pear.png”) .settings.size(40, 40) .print() [/js] Adds a 40x40px image pear.png onto the screen.

standard.settings.selector

getElement(id).settings.selector( selectorName ) or getElement(id).settings.selector( getSelector(selectorName) ) (since beta 0.3) Since beta 0.3, adds a .settings.selector command to all elements as another method for adding them to a selector. Example: [js highlight=”4,7″ try=”true”]newSelector(“shapes”) , newImage(“square”, “square.png”) .settings.selector(“shapes”) , newImage(“triangle”, “triangle.png”) .settings.selector(“shapes”) , newCanvas(“shapes canvas”, 825, 400) .settings.add( 0, 0, getImage(“square”) ) .settings.add(425, 0, getImage(“triangle”) ) …