Protoreto Wiki

Protoreto-Tutorials

[

checkbox1.checked

_ into the text field._ For this simple transition, no further script code has to be executed. But don't forget to change the target screen of the transition to "third screen". Now we have to handle the "Otherwise" case (i. e. what to do when the condition __

checkbox1.checked

is not fulfilled). You can do this by clicking the "Add new transition" button. As you can see, the new transition is captioned "Otherwise, if none of the above conditions is fulfilled:". The only thing you need to change here is to set the target screen to "third screen".

The following screenshot shows the filled-out transition dialog window:

[File:TransitionsDialogFilledOut.png|noframe|The "Transitions" dialog in advanced mode

Close the transitions dialog window, and run the prototype to test your changes.

Modifying element attributes

In the previous section, you have learned how to evaluate the status of a checkbox. Similarly, you can access other attributes of elements, such as the text inside a text area, the selection in a drop-down list, or the width of a button. But you can not only read them, you can also modify all attributes. This makes it possible to add dynamic behaviour without having to switch to another screen.

To modify an attribute of an element, you have to open the transitions dialog in advanced mode, then enter script code into the text area labeled "Execute this script code". Again, you can use the "+" button to insert references to element attributes. Here are some examples for script code that you may enter. The examples are written in JavaScript; slight variations may be necessary when you use another scripting language.

button1.text = "Hello World"

Changes the text on the button.

textfield1.text = ""

Empties the text field.

button1.x = 0; button1.y = 0

Moves the button to the upper left corner of the screen.

label1.x += 10

Moves the label 10 pixels to the right.

checkbox1.checked = true

Checks the check box.

checkbox1.checked = not checkbox1.checked

Toggles the check box status.

Please note that all the examples above only make sense when you don't select a screen in the "switch to this screen" drop-down list (i. e. "stay on the current screen"). Otherwise, the changes to the elements will not be visible, as the prototype would immediately switch to the target screen of the transition.

Using global variables

...

Protoreto-Tutorials

[[Creating a simple prototype|