This article details simulation elements, how they can be used, and how you can reuse elements for different purposes.

Overview

Elements are used to create clickable interactive elements on your image, for example, buttons, dropdowns, or checkboxes.

Elements can be used to create correct or incorrect actions a learner must take in order to progress in the simulation.

Use elements

With elements, you can perform the following actions:

Set the name in the Editor Label
- In the same way you can name components, you can also name elements so you can reuse them in other simulations once you have built them.
Set visibility
- Like the Infographic component, you can choose to have elements visible or hidden. They can be made visible by clicking on another element or by using a screen trigger.
Add element text (e.g. button text like Submit)
Disabled/Enabled
- You will want most elements enabled.
- You can choose to disable an element that will be enabled by the user completing another action on screen. For example, a “login” button element may be disabled until you enter email and password in text input elements.
Set the style
- You can create the default, hover, focused, and disabled state styles of an element.
- You can also “apply” styles across different states to save time.
- You can also allow an element’s style to be copied to other elements of the same type.
- Enabling the “hotspot” mode will set a button as transparent and can be used as a simple hotspot interaction.
Set the “correct condition”
- Set what the learner must do in order to mark the element as correct.
Set the element action
- What should the element do once interacted with (e.g. submit the screen to the next screen, show or hide other elements).
Triggers
- Can be used in a similar way to triggers in Logic to trigger other actions on the screen.

You will see two toolbars across the top of your simulation screen builder. The second toolbar is the Element toolbar:

Element name
Edit element button
Skip to different elements on screen
Duplicate element
Position element (x/y)
Size element (w/h)
Lock element for editing
Add element to library for pasting across simulations
Delete element

Reuse elements

It is possible to reuse elements across simulations, either from simulations or the Elements Library.

Reuse elements from any simulation

It’s possible to paste elements from any simulation in your Evolve instance. To do this, you can follow the steps below:

Start by clicking Paste Element from the element list.

A new window will appear. You can search for any elements that have been created. By default, you will be searching Simulation Elements, not those added to the elements library.

Once you have found the element you want, click on it and select Paste Selected Element. This will add it to your simulation.

Reuse from the elements library

It is possible to save specific elements to the Elements Library. This is useful for saving particular styles or types of elements you have created. For example, a login button may have the same style as every other action button in the simulation so you may want to save it and make it easily accessible and reusable.

You can do this by following the below steps:

Click the element you want to save and click “Save To Element Library” from the toolbar. You will then be prompted to choose a name — make this as clear as possible so you can find it again and it’s easy for others to use too.

You can then reuse this by selecting Paste Element from the element dropdown. You’ll be presented with the search. You will need to select the advanced search option (the arrow on the right) and choose Elements Library to search in.

You will then be able to search for the type of element, who created it, and use the name you added when saving it.