⚠ This website is the beta version of the PCIbex documentation and is still under development. ⚠
Link Search Menu Expand Document

Button element

since

beta 0.3

description

Represents a clickable button.

syntax

newButton("ELEMENT_NAME","BUTTON_TEXT")
  • "ELEMENT_NAME": The name of the newly-created element.
  • "BUTTON_TEXT" : The text that appears on the button.

example 

newButton("click", "Click me!")
    .print()
    .wait()

Prints a Button to the screen and waits for it to be clicked.

Action commands

button.callback

syntax

getButton(“ELEMENT_NAME”).once()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
newVideo("skate", "skate.mp4")
    .print()
,
newButton("(Re)play")
    .callback( 
        getVideo("skate")
            .stop()
            .play()
    )
    .print()
↑ back to top

button.click

syntax

getButton(“ELEMENT_NAME”).click()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
newKey(" ")
    .callback(
        getButton("continue")
            .click()
    )
,
newButton("continue", "Continue")
    .print()
    .wait()
↑ back to top

button.log

syntax

getButton(“ELEMENT_NAME”).log()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
//test
↑ back to top

button.once

syntax

getButton(“ELEMENT_NAME”).once()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
newButton("test", "It's a test!")
    .log()
    .once()
    .print()
,
newAudio("sound", "test.mp3")
    .play()
    .wait()
↑ back to top

button.wait

syntax

getButton(“ELEMENT_NAME”).wait()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
test

optional parameters

  • getButton(“ELEMENT_NAME”).wait(“first”)
  • getButton(“ELEMENT_NAME”).wait(TEST_COMMAND)
↑ back to top

standard.after

syntax

getX(“ELEMENT_NAME”).after(getX(“ARGUMENT_NAME”))

description

Takes an element as an argument, and adds that element’s content to the right of the element that the command is called on.

example

click to expand 

@// Option 1: Pass a new element as an argument
@newTrial("option-1",
@    newText("center", "BANANA")
@        .before(newText("left", "apple"))
$        .after(newText("right", "orange"))
@        .print()
@)
@
@// Option 2: Pass an existing element as an argument
@newTrial("option-2",
@    newText("left", "apple")
@    ,
@    newText("right", "orange")
@    ,
@    newText("center", "BANANA")
@        .before(getText("left"))
$        .after(getText("right"))
@        .print()
@)

↳ Prints appleBANANAorange to the screen.

↑ back to top

standard.before

syntax

getX(“ELEMENT_NAME”).before(getX(“ARGUMENT_NAME”))

description

Takes an element as an argument, and adds that element’s content to the left of the element that the command is called on.

example

click to expand 

@// Option 1: Pass a new element as an argument
@newTrial("option-1",
@    newText("center", "BANANA")
$        .before(newText("left", "apple"))
@        .after(newText("right", "orange"))
@        .print()
@)
@
@// Option 2: Pass an existing element as an argument
@newTrial("option-2",
@    newText("left", "apple")
@    ,
@    newText("right", "orange")
@    ,
@    newText("center", "BANANA")
$        .before(getText("left"))
@        .after(getText("right"))
@        .print()
@)

↳ Prints appleBANANAorange to the screen.

↑ back to top

standard.bold

syntax

getX(“ELEMENT_NAME”).bold()

description

Bolds any text that appears in the element.

example

click to expand 

@newText("bolded-text", "Hello, text!")
$    .bold()
@    .print()
*,
@newButton("bolded-button", "Hello, button!")
$    .bold()
@    .print()

↳ Prints Hello, text! in bold, then prints a button that says Hello, button! in bold on a new line.

↑ back to top

standard.center

syntax

getX(“ELEMENT_NAME”).center()

description

Horizontally centers the element.

example

click to expand 

@newButton("centered-button", "Hello, button!")
$    .center()
@    .print()

↳ Prints a horizontally centered button that says Hello, button!.

↑ back to top

standard.css

syntax

getX(“ELEMENT_NAME”).css(“CSS_PROPERTY”, “VALUE”)

description

Applies the specified CSS property and value pair to the element.

example

click to expand 

@newText("framed-text", "Hello, text!")
$    .css("border", "solid 1px red")
@    .print()
*,
@newButton("orchid-smallcaps-button", "Hello, button!")
$    .css({"background-color":"orchid", "font-variant":"small-caps"})
@    .print()

↳ Prints Hello, text! surrounded by a 1px solid red border. On a new line, prints a button with an orchid background color that says Hello, button! in small caps.

optional parameters

  • getX(“ELEMENT_NAME”).css({“CSS_PROPERTY_1”:”VALUE_1”, “CSS_PROPERTY_2”:”VALUE_2”})
↑ back to top

standard.cssContainer

syntax

getX(“ELEMENT_NAME”).cssContainer(“CSS_PROPERTY”, “VALUE”)

description

Applies the specified CSS property and value pair to the container of the element.

example

click to expand 
newText("center", "BANANA")
    .before(newText("left", "apple"))
    .after(newText("right", "orange"))
    .css("color", "red")
    .cssContainer("background-color", "aqua")
    .print()

↳ Prints appleBANANAorange to the screen. The substring BANANA has a red text color, and the entire string has an aqua background color.

optional parameters

  • getX(“ELEMENT_NAME”).cssContainer({“CSS_PROPERTY_1”:”VALUE_1”, “CSS_PROPERTY_2”:”VALUE_2”})
↑ back to top

standard.disable

syntax

getX(“ELEMENT_NAME”).disable()

description

Disables any interactive feature of the element.

example

click to expand 

@// example
↑ back to top

standard.enable

syntax

getX(“ELEMENT_NAME”).enable()

description

Enables any interactive feature that was previously disabled.

example

click to expand 
// example
↑ back to top

standard.hidden

syntax

getX(“ELEMENT_NAME”).hidden()

description

Hides an element. If the element is printed, it occupies space on the screen but its content is not visible.

example

click to expand 

@newText("hidden-text", "Surprise!")
$    .hidden()
@    .print()
*,
@newButton("reveal", "Click to reveal a surprise")
@    .print()
@    .wait()
*,
@getText("hidden-text")
@    .visible()

↳ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

↑ back to top

standard.left

syntax

getX(“ELEMENT_NAME”).left()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.print

syntax

getX(“ELEMENT_NAME”).print()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.refresh

syntax

getX(“ELEMENT_NAME”).refresh()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.remove

syntax

getX(“ELEMENT_NAME”).remove()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.right

syntax

getX(“ELEMENT_NAME”).right()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.scaling

syntax

getX(“ELEMENT_NAME”).scaling()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example

that zooms an element in/out to fit the argument(s), which can be: a ratio (with 1 for 100%), a unit dimension (eg. “10vw”), or the page/screen (pass "page")

↑ back to top

standard.selector

syntax

getX(“ELEMENT_NAME”).selector()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.setVar

syntax

getX(“ELEMENT_NAME”).setVar()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.size

syntax

getX(“ELEMENT_NAME”).size()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top

standard.visible

syntax

getX(“ELEMENT_NAME”).visible()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 

@newText("hidden-text", "Surprise!")
@    .hidden()
@    .print()
*,
@newButton("reveal", "Click to reveal a surprise")
@    .print()
@    .wait()
*,
@getText("hidden-text")
$    .visible()

↳ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

↑ back to top

Test commands

button.test.clicked

syntax

getButton(“ELEMENT_NAME”).test.clicked()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
newButton("print", "Print the buttons' words")
    .print()
    .wait()
    .remove()
,
getButton("top")
    .test.printed()
    .success( newText("top word", "hello").print() )
↑ back to top

standard.test.printed

syntax

getX(“ELEMENT_NAME”).test.printed()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand 
// example
↑ back to top