Setting a button to Show a Layer in Claro

Steps to add a new Layer to a Claro Page.

The Layers feature lets you group together elements on a Claro page to better organize the page or to target for actions like Show or Hide.

Steps to set up a Show Action where the learner will click on a button to show another element on the Page.

This exampe uses a Button but any element can be set up as the item the learner will interact with, including text elements, image elements and more.

Similarly, this example Shows an image element but any element can be selected as the Target of the Show Action. You can also select multiple elements as targets, to Show more than one thing at a time.

Steps to set a button to show a Pop Up panel as well as include the text string saved to a variable as part of the feedback text on the Pop Up panel.

A Pop Up panel gets shown as a modal window above the main page, which will be shown as grayed-out while the panel is open.

You can show that a Tile element has been selected by the learner by changing the icon displayed on the Tile.

This is helpful if you want to use the Tile as part of a menu page, for example.

There are two steps to this.

First, you tie the Tile to a variable to track that the Tile has been selected by the learner.

Second you select the icon you wish to display on the Tile when the variable is changed (as a result of the learner selecting the Tile).

NOTE: To use Tiles as “buttons’ on a me...

Steps to add a Standard Button element to a Page.

In this example, we add the button as a new element within a Group that is already on the Page.

Steps to Snap an element to a specific location on a Page in Claro.

Steps to move elements toward the back or the front of a Page in Claro.

As you add elements to a Page in Claro the most recent element is added at the top of the page above previously-added elements.

You can move elements toward the front or back of the page one position at a time or completely to the front or back position.

Steps to use the Show Variables setting to display either the default {x} variable placeholder or the full variable string in a text element.

Steps to edit a Timer to Show and Element on the Page.

A Timer can be added to a page to time a user, apply timed actions to elements, create a timed quiz and much more!

Steps to edit an Action.

As you add Actions to a Page, they are listed on the Actions tab on the left side of the Stage.

You can use this tab to open Actions to edit them.

This tab is also helpful for understanding all the Actions or events on a Page, especially if you aren't the original author but are trying to make updates.