Outline
This article will provide an in-depth overview of the capabilities of each of the thirteen elements found in Simulation, the settings unique to each, and the global settings applicable to many or all elements.
Global element settings
These settings appear for either most or all of the available elements.
Drag handles
Small white squares that appear at the corners of each element when viewed in the Screen Editor that can be dragged to allow you to resize your element to the desired dimensions.
Editor label
- The label you can add to your element to name it as required.
- Your label is for editing purposes only, it won't appear on screen in your finished simulation.
- We recommend naming your elements clearly so they are easy to reuse or use elsewhere in the simulation (e.g. as part of an instruction).
Element disabled
- By default your element is enabled on screen - that is; visible and able to be interacted with, if applicable.
- If you use this setting to disable your element, that means it is visible, but cannot be interacted with.
- You may find this useful if you want a button to only become available when certain other conditions have been met - for instance, you may want a button to only become enabled once your learners have entered a username and password into associated Text Input elements.
Visibility
- This setting allows you to hide elements on screen by default.
- You can set them to only become visible once certain other conditions on screen have been met.
Aria label
Aria labels are text fields that can be detected and read by screen readers and other assistive technologies but are not visible on screen.
Styles: Default, Hover, Focus, Disabled
Styles and the associated sub-settings and variations allow you to style your elements in a wide variety of ways, to make sure they appear exactly as you want them to. You also have the ability to copy styling from one element to another element of the same kind, e.g. button to button.
The settings section for each style will only appear once they have been enabled.
Almost all elements have these default style settings:
Share Element Style? This allows you to make copies of the selected element’s style. Enabling this means that when you add another element of the same kind, you will find a setting in the new element titled Link Styles to Element. Simply open the drop-down and select the element that you have enabled sharing style in. Once this is done, any styling changes you make to the original element will automatically be updated in the link elements. This means you don’t have to keep manually creating the same style every time you want to add a new element of the same kind that needs to be styled in the same way. Note that if you delete the original element that is sharing its style, any elements copying from it will revert to their default styling.
Background Color & Text Color allows you to select either from the colors that are pre-set for the whole course in the Theme Editor, or use a color picker to select the right color and shade visually or by entering hexadecimal or RGBA values.
Font Family allows you to select any fonts already installed in your Evolve instance.
Font Size (px) allows you to set the font size in pixels.
Font Weight allows you to select the thickness of the text characters in the element.
Line Height allows you to select the vertical spacing between lines of text in your element. You can add decimal values in this field as well as whole numbers.
Letter Spacing (px) allows you to set the space between characters in pixels.
Text Align allows you to align text to the left, right or center. (This setting is different for Button, Toggle Button, and Display text - see Vertical/Horizontal Alignment setting below).
Text Transform allows you to set the case for your text without having to do it manually.
Text Decoration Line allows you to under or overline your text, or add a strike-through.
Text Decoration Style allows you to style your under/overline or strikethrough in five different ways: Solid, Wavy, Dashed, Dotted or Double.
Text Decoration Color allows you to set the color of your Text Decoration.
Border A Border can be added to your element either to every side or individual side(s). You can select the width of the Border in pixels, the color and whether it appears as a solid, dashed or dotted line. The border sits inside the element - e.g., the more you increase the size in pixels, the more it will encroach on the content of your element.
Border Radius By default, the corners of each element are at 90 degrees. You can use the Border Radius setting to curve the corners of your Border - either all at once, or each corner individually.
Outline allows you to add an outline to the element - you can set the width in pixels, whether it’s offset (again in pixels), the color, and the style: Dotted, Groove, Ridge, Inset, or Outset. The outline sits outside the element - e.g., the more you increase the size in pixels, the more it will expand the dimensions of your element.
Box Shadow You can add a box shadow to your element - which gives the visual effect that it is sitting ‘above’ the screen and casting a shadow. You can individually set the Horizontal and Vertical offsets, the Blur effect, the Spread (how large the shadow effect is) and set a color for it.
Padding This allows you to increase the spacing between content within an element (text, icons, image icons, etc.) and the edge of the element. You can apply this to each side of your element individually.
Margin This allows you to increase or decrease the spacing outside of the element (but note this can also be achieved by manually moving an element).
Vertical/Horizontal Alignment Available for Button, Toggle Button and Display text. Allows you to set the alignment for the content (text, icons/images) within these elements.
Hover Style allows you to set a different look for your element when it is hovered over with a mouse.
Focused Style allows you to set a different look for your element when it is selected by the user.
Disabled Style allows you to set a different look for your element when it is disabled.
When any of the above three styles are enabled, you can change the background and text colors, add a border and/or outline, and a box-shadow. You will also find some preset styles you can apply in the Apply Styles drop-down that appears at the top of each style. There is a preset Default, Focused, and Disabled style.
Element actions
Some of the elements can generate pre-set actions when interacted with. These elements are:
- Button
- Checkbox Group (each option can have a unique action)
- Drop Down (each option can have a unique action)
- Radio Group (each option can have a unique action)
- Select (each option can have a unique action)
- Toggle button
Action types available:
- Submit Screen: this corresponds to whatever you have set your Screen Action to be in your Screen settings. Interacting with the element performs that screen action.
- Submit Screen & Navigate To Screen: this allows you to use the element interaction to navigate to a specific screen in your simulation that isn’t the next one in sequence.
- Reset Elements: this means interacting with the element can reset one or more elements on your current screen to the same state they were when your learner arrived at the screen.
- Enable Or Disable Elements: this allows you to enable elements on screen that are set as disabled by default, or disable elements that are currently enabled.
- Show Or Hide Elements: this allows you to show elements on screen that are hidden by default, or hide elements that are currently visible.
- Show Next Instruction: this means interacting with the element reveals the next instruction text label you want to appear (these are created in the Screen Settings).
Hover Over/Hover Out Actions
Three elements can generate actions by either hovering over them with your mouse (or touching them on a touchscreen device) or hovering away from them - that is, moving your mouse away from the item you are mousing over (on a touch screen, this means touching the simulation outside of that element). The elements that can generate these actions are:
- Button
- Empty
- Panel
There are two available actions, and different actions can be set for hovering onto and away from the same element.
- Enable Or Disable Elements: This allows you to enable elements on screen that are set as disabled by default or disable elements that are currently enabled.
- Show Or Hide Elements: This allows you to show elements on screen that are hidden by default, or hide elements that are currently visible.
Individual element settings
This section outlines the settings that are specific to each element.
Button
This element allows you to place a button on screen that can be styled in a vast number of ways, allowing you to match it exactly to the style of buttons in the system you are simulating, or match the style of any presentational simulation you are making.
Button text
This allows you to enter the text that will be visible on the button in your finished simulation.
- There is no limit to the amount of text you can place on the button - but remember you will have to use the drag handles of the button to resize it to accommodate whatever text you enter here.
- If you wish to style the text in a particular way there are multiple settings in the Styles section that allow you to change the font, text color, etc.
Set as Hotspot?
This allows you to make your button completely transparent (without any styling or text) so it can be placed over a part of the Screen image and turn it into a clickable area.
If styling a button to match a button in your system is too time consuming, this is a much quicker alternative - but note that it won’t generate a hover or focus style when set as a hotspot.
Button icon
This group of settings allows you to add either an icon or an image to sit alongside the button text.
- Use Icon Type to select an icon or image.
- There are 82 icons to choose from, or you can upload your own icon set in your Theme Editor.
- You can position your icon to the left or right of your text, you can change the color, the size, and set the margin around the icon.
- If you wish to use an image as an icon, you can upload separate images for the default appearance, the appearance when the button is hovered over, and when the button is disabled.
- You can set the position to the left or right of your text, choose the size, and the size of margin around the image. When you use an image, it appears icon-sized.
Background image
This allows you to add an image that covers the whole of your button but sits underneath any text you have added.
- You can add separate images for default, hover, focus, and disabled styles.
- You can set the image to repeat (if smaller than the size of your button) and you can also use the Background Size subsetting to set the image to Auto size, Cover or Contain.
- You can also use the Background Position subsetting to set whether the image appears at the Bottom, Top, Left, Right, or Center of your button.
Button correct condition
This setting determines whether clicking the button in your simulation should be marked as a correct action or not, and has three selectable Condition Types:
- Should Be Clicked: Meaning the button should be clicked by the user to proceed through your simulation.
- Should Not Be Clicked: Meaning clicking the button will be an incorrect action by the user (you can determine what happens as a result of an incorrect click via the Button Click Action setting, described below).
- Can Be Clicked: This allows you to have the flexibility to mark more than one element on a screen as a correct action. Using Evolve as an example, when you create a course, there are two separate buttons on the same screen that allow you to do this action. Clicking either is a valid way to create a course. This means learners clicking a ‘Can Be Clicked’ button will be treated as a correct action, but won’t be penalized for not clicking it.
Save User Click to Variable?
- You can save the button click to a Boolean type Variable.
- Any Boolean Variables previously created for this screen will appear as selectable in the Save To Variable field, once this setting is enabled.
Display text
Display text can either be used to display predetermined text on screen or display text saved in a String Variable.
- This means you can use this element to display text the learner has entered in a different screen or different area of the same screen.
- For example, you may wish a learner to enter a username on one screen, and then display that username in a personalized piece of text on another screen.
- When you enable this setting, you can select any String Variables that have already been created for the Simulation.
Text
- Display Text contains a text editor that gives you the basic aspects of text styling for your displayed text - bold, italic, underlined, super- and subscript, special characters, bulleted lists, etc.
- If you don’t wish to display text from a Variable, and simply wish to use the element to display predetermined text, enter your text in this text editor. Use the drag handles of the element to create the right dimensions to display your text as you wish.
Checkbox
This element displays a list of options from which the learner can make a single or multiple selections.
- By default, three options are present, but you can add or reduce the number of options as you wish.
- You can set different actions for each individual selectable option you create.
Columns
By default, the options display in one vertical column - this setting allows you to change the number of columns the options are split into.
Scale Option Size To Fit Element?
This setting is useful if you have option texts of different lengths - enabling this balances out the options in the way they are positioned.
Option Focus Styles & Option Selected Styles
- Alongside the usual element styling options, Checkbox Group allows you to add specific styles to how options appear when selected, and how they appear when in focus, but unselected (for example, when you click an option it will display the Selected style, if you click again to deselect, it will then display the Focused style).
- Each of these styles allows you to set the background and text colors, and borders and outlines, as well as box shadows.
Options
Each included option has a number of different settings.
- The Option Label allows you to set the displayed text for that option.
- There is no upper character limit.
- You can set whether a particular option is already selected when the learner arrives at that screen.
- Set whether each option is designated as correct or not.
- Regardless of whether the option is correct, you can then use the Option Action setting to determine what happens when that option is selected.
- You can set a different action for each option you include.
- You can also save each individual option response (either selected or deselected) to a Boolean Variable.
- Any Boolean Variables already created will be available for selection in the Save To Variable dropdown.
Option icon
- By default, square checkbox icons appear alongside each option. These are empty when unselected, and display a tick when selected.
- If you don’t wish to use this default setting, you can either choose to have no accompanying icon (to do this select Theme Icon or Image Icon and make no selection) or select a Theme Icon (there are 82 default theme icons if you haven’t uploaded your own set) or an Image Icon - you can add any image, but it will display at icon-type size. You can select a different icon or image for selected and unselected states.
- You can also set whether the icon appears at the left or right of each option, change the size, and set the margin around the icon.
Dropdown
This element allows the learner to make a single selection from a drop-down list. You can add as many different options as required.
Drop down placeholder
You can select what text appears by default here before the learner has made a selection - e.g. ‘Click here to select…’
Drop down searchable? & drop down no search results text
- When enabled, the learner can start to type within the drop down area and the list of options will dynamically populate if relevant option text is searched for.
- You can also set what text is displayed if no search results are returned. By default, the text is ‘No results found’.
Drop down clearable?
When enabled, this allows the learner to deselect their selection by placing an X icon adjacent to the Drop Down arrow - clicking the X returns the Drop Down to an unselected state.
Options
Each included option has a number of different settings.
- Firstly, the Option Label, which allows you to set the text for that option. There is no upper character limit.
- You can set whether a particular option is already selected when the learner arrives at that screen.
- You can also set whether each option is designated as correct or not.
- Regardless of whether the option is correct, you can then use the Option Action setting to determine what happens when that option is selected.
- You can also save each individual option response (either selected or deselected) to a Boolean Variable.
- Any Boolean Variables already created will be available for selection in the Save User Selected/Deselect Option To Variable? dropdown.
Empty
This element has a more limited amount of settings, purely because it is designed to cover an area of the screen that is not required, or needs to be hidden.
It still has a number of styling options (described in Global Element Settings) so you can match it in terms of color, etc. to the system you are simulating.
Image
Like the Empty element, Image has a limited number of settings, because its purpose is simply to display an image on screen.
Image alt text
You can add descriptive alt text to the image that can be read by a screen reader or other assistive technology.
Keep Image Aspect Ratio?
- When enabled (which is by default) this keeps the original proportions of the selected image intact, regardless of the size, it is displayed at (use the drag handles on the element to resize in the Screen editor).
- A selection of the usual styling options is also available: Background Color, Border, Border Radius & Box Shadow.
Number input
This element can be used for a field that requires a numerical input, that can then be saved to a variable.
Number input placeholder
- This allows you to have default text present on your Number Input.
- The default text is ‘Enter Number…’ but can be replaced with whatever text is required.
Number input default value
- This allows you to enter any numerical value as the default displayed number.
- 0 is present as default, but can be replaced with whatever value is required.
Number input minimum value & number input maximum value
These fields allow you to set the minimum and maximum numerical values the learner can enter.
Number input step
- This field allows you to set the numerical increments of what value is entered (e.g. you could set this field to increase upward by multiples of 10).
- An increment value of 1 is the default but can be changed to whatever is required.
Enable Enter Key Action?
- When enabled, this setting means the user can press the Enter key on their keyboard to trigger an Element Action. The Number Input Action drop down is only present when this setting is enabled. There are six Actions available: No Action, Submit Screen, Reset Elements, Enable or Disable Elements, Show or Hide Elements and Show Next Instruction.
- Please note that this is only related to the learner pressing their Enter key. It is unrelated to any number the user has inputted in this field. For example: if you wished to display hidden elements on screen dependent on a specific number being entered by the learner, this needs to be set up by saving the text to a Number Variable, and creating a Trigger that performs the required Action only when the Variable contains the correct value.
Number input correct condition
- This setting allows you to set what value or value ranges constitutes a correct answer.
- Use the Condition Type field to choose from six available options: Equal to, Not equal to, Greater than, Greater than or equal to, Less than, and Less than or equal to.
- You can also save the value entered to a Number Variable.
- Any Number Variables already created will be available for selection in the Save To Variable dropdown.
Panel
This element allows you to place a scrollable panel within your simulation screen. An example of how this could be used is if you need a fixed navigation bar across the top of your Simulation, and a scrollable window beneath - you can set up a Panel to represent each. The main section can be scrolled whilst the simulated navigation bar stays fixed and in view.
- You can place an image larger than the Panel element dimensions inside it, which can then be scrolled vertically and/or horizontally by the learner.
- You don’t have to include a background image, styling options mean you can set a background color, etc.
- You can place any other elements that you wish within the Panel (except another Panel!).
- Any elements placed there can perform the same functions they would outside the panel.
- You can also display saved Variables in a Panel, or save Variables from elements within your Panel to be used elsewhere.
How to edit a panel
Unlike the other elements, there are two aspects to editing a Panel - the editor settings visible when you select the Panel, and the Panel Editor. We will describe the functions of the main editor first:
- The initial editor looks and behaves the same way as the other element editors.
- It allows you to set the styling for the Panel’s appearance, e.g. the Color, Border, Border Radius and Box Shadow.
- It can set two types of action for the panel - Hover Over and Hover Out. Each of these can be set independently and can be used to either Enable or Disable elements or Show or Hide elements.
- Hover Over/Out are the only Actions the Panel itself can produce. Elements placed inside can perform the broader functions such as Submitting the Screen, displaying or storing Variables, etc.
Panel content size
This is the group of settings in the main editor unique to the Panel element:
- Set Content Width? Allows you to either set the width of your background content manually or Lock To Panel Width.
- Set Content Height? Performs the same function for the vertical dimensions.
Panel editor
The Panel Editor can be accessed by the button at the top right of the main element editing screen:
Once opened, add the required elements to your panel and then you can edit these in the usual way.
Elements must be added to the Panel on the Panel Editor screen in order to ensure they sit within the Panel itself.
To exit the Panel Editor, click the Screen Editor button in the top left:
Radio group
This element is similar to the Checkbox element described above, except this element’s options are single select only, not multiple. By default, three options are present, but you can add or reduce the number of options as you wish.
You can set different actions for each individual selectable option you create.
Columns
By default, the options display in one vertical column - this setting allows you to change the number of columns the options are split into.
Scale option size to fit element?
This setting is useful if you have option texts of different lengths - enabling this balances out the options in the way they are positioned.
Option focus styles & option selected styles
- Alongside the usual element styling options, Radio Group allows you to add specific styles to how options appear when selected, and how they appear when in focus, but unselected (for example, when you click an option it will display the Selected style, if you click again to deselect, it will then display the Focused style.).
- Each of these styles allows you to set the background and text colors, and borders and outlines, as well as box shadows.
Options
Each included option has a number of different settings.
- Firstly, the Option Label, which allows you to set the text for that option.
- There is no upper character limit.
- You can set whether a particular option is already selected when the learner arrives at that screen.
- You can also set whether each option is designated as correct or not.
- Regardless of whether the option is correct, you can then use the Option Action setting to determine what happens when that option is selected.
- You can also save each individual option response (either selected or deselected) to a Boolean Variable.
- Any Boolean Variables already created will be available for selection in the Save To Variable dropdown.
Option icon
- By default, round icons appear alongside each option. These are empty when unselected, and display a dot when selected.
- If you don’t wish to use this default setting, you can either choose to have no accompanying icon (to do this select Theme Icon or Image Icon and make no selection) or select a Theme Icon (there are 82 default theme icons if you haven’t uploaded your own set) or an Image Icon - you can add any image, but it will display at icon-type size. You can select a different icon or image for selected and unselected states.
- You can also set whether the icon appears at the left or right of each option, change the size, and set the margin around the icon.
Select
This element behaves in a very similar way to the Drop Down element described above but has a slightly different appearance.
Select element when opened:
Drop Down element when opened:
Please note the above images are the default styles for each, and the appearance of each can be customized considerably.
Options
Each included option has a number of different settings.
- Learners can select only one option from the option list.
- The Option Label allows you to set the text for that option.
- There is no upper character limit.
- You can set whether a particular option is already selected when the learner arrives at that screen.
- You can also set whether each option is designated as correct or not.
- Regardless of whether the option is correct, you can then use the Option Action setting to determine what happens when that option is selected.
- You can also save each individual option response (either selected or deselected) to a Boolean Variable.
- Any Boolean Variables already created will be available for selection in the Save User Selected/Deselect Option To Variable? drop down.
- Please note that with Select, the top option will always be selected by default. If you need to assign an Action to the first option, we would suggest creating a placeholder option to sit above it, label it something like ‘Select an option…’, set it as Incorrect, and assign ‘No Action’ to it. The reason for this is if you assign an Action to the first option, the learner would have to select a different option, then re-select the top one for the associated Action to trigger. Alternatively, the Drop Down element does not have a pre-selected option by default.
Text area / Text input
These are two separate elements but have been included together as they only have one difference in terms of how they function. Both allow the learner to enter text, that can then be saved to String Variables. The difference between them is:
- Text Area should be used when you require learners to enter more than a single line of text — for example, if you wish learners to compose an email.
- Text Input should be used for single line form fields - for example, separate username and password fields.
Enable enter key action?
When enabled, this setting means the user can press the Enter key on their keyboard to trigger an Element Action. The Text Area Input Action and Text Input Action drop downs are only present when this setting is enabled. There are six Actions available: No Action, Submit Screen, Reset Elements, Enable or Disable Elements, Show or Hide Elements and Show Next Instruction.
Please note that this is only related to the learner pressing their Enter key. It is unrelated to any data the user has inputted in these fields. For example: if you wished to display hidden elements on screen dependent on specific text being entered by the learner, this needs to be set up by saving the text to a String Variable, and creating a Trigger that performs the required action only when the Variable contains the correct value.
Text input/text area correct conditions
This setting allows you to set what constitutes a correct answer - and when used in conjunction with Variables, can cause various actions to happen. Select Add Condition to get started. You can set as many conditions as required. Each Condition has three fields to be completed:
- Condition Type
- Equal to: the Condition is only correct if the learner’s input matches the Condition Value exactly.
- Not equal to: this is the reverse; the learner must not input what you set as the Condition Value.
- Contains: this allows more flexibility and allows learners to include the correct Condition Value amongst other text. This is useful if there are keywords your learner needs to include but can be included in a variety of ways.
- Minimum Character Length: this gives you the flexibility to allow learners to achieve a Correct Condition by typing anything at all, as long as they have typed something that meets the minimum character length you set.
- Condition Value: This is a free text field to allow you to enter any text you wish, that the learners must enter, whilst also fulfilling the Condition Type.
- Use Strict Marking?: This is the last setting within the Text Area Correct Conditions area. This applies a strict marking criteria to the learner's input, so it has to match your Condition Value exactly - e.g. with regards to case sensitivity, spacing, etc.
Please note also that each condition has both duplicate condition and delete condition buttons at the bottom.
Require all conditions to be correct?
This allows you to set whether a single condition can be treated as correct, or whether you require multiple conditions to all be met for the response to be marked as correct.
Save user input to variable?
- This allows you to save the learner’s response to a String Variable.
- Once enabled, any previously set up String Variables will be available in the Save To Variable drop down.
- These Variables can then be used elsewhere in your Simulation. For example, you may wish to ask a learner to enter their name in a Text Input in one screen, and then use a Variable to display that same text as part of a personalized greeting on a subsequent screen.
Toggle button
This element is a button with two available states, each of which can be styled independently, and cause different actions. The two states are labeled Toggled On and Toggled Off - but the same functionality is available in both states.
Toggled off text/toggled on text
The above two fields can be used to add text to your button in each state.
Styling
The standard styling options are all available, but for this element, they are available separately for each state - e.g. There is a Toggled Off Hover Style and a Toggled On Hover Style.
Toggle button icon
This has all the same functionality that a button does, e.g.:
- You can add an icon or image
- You can position left or right and increase the size
For the Toggle Button, you can add a separate image or icon for each of the following states:
- Toggled Off
- Toggled Off Hover
- Toggled Off Disabled
- Toggled On
- Toggled On Hover
- Toggled On Disabled
Background image
This has the same features as a standard Button:
- Can be positioned Top, Bottom, Left or Centre
- Can be set to repeat and to Auto size, Cover or Contain
It also has the option to set a different image for each of the same six states listed above.
Toggle button correct condition
You can choose from three different Correct Conditions:
- Should Be Toggled On
- Should Be Toggled Off
- Can Be Toggled On or Off (this state allows for learners being able to click the button without being penalized, and no negative consequence if they don’t click it)
Toggle button action: Toggled on/toggled off
You can set one of the six standard Actions for each of the two button states - as the six options include ‘No Action’ you can set an action on just one of the states also.
Save Toggle State To Variable?
- You can save the Toggle Button state to a Boolean Variable.
- Any Boolean Variables already created will be available for selection in the Save To Variable drop down.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.