Simulation Screen & Settings

In this article, you'll find an overview of the simulation screen as well as a thorough breakdown of its settings.

Overview

A screen will be used as part of a step within a process you are trying to recreate. Each screen will have:

• Screen image: The background image used to place interactions on.
• Screen elements: Elements are different types of interaction.
• Screen instructions and objectives: Information to guide the learner through the simulation.
• Screen feedback: Feedback to indicate whether the user interacted with the correct elements.
• Screen actions: What will happen once the learner has correctly or incorrectly interacted with the elements.
• Screen variables and triggers: Rules to dictate how the learner’s interaction may affect other content on the screen.

Screen setup

To set up a simulation screen, you can follow the steps outlined in this section.

Start by adding your first screen and uploading your screen image. This could be a screenshot of a piece of software you’re simulating or any image you'd like to add interactions to.

Set your simulation window size. It’s possible to manually set the window size of the simulation component in the Behaviour tab, however, it is also possible to set the window size to automatically fit the image size.

Next, set your screen instructions. Screen instructions are used to instruct and guide the learner through the simulation. Users must interact with instructions (e.g. click next).

Instructions can be set to “submit” the screen — this can be used to create a walkthrough rather than have the user click on any elements. You can also enable or disable “element interaction” — this means learners must click "next" on the instruction before interacting with an element, or they can interact with an element at any point

Additional screen setup options

• Set your screen objective
  • The screen objective can be used to tell the learner what they need to do on screen
  • It does not need to be interacted with and will stay visible on screen until the learner completes the correct actions

• Add a hint

  • This can be set to only show after an incorrect attempt in the Behaviour tab of the component, under Action Bar
  • The hint will show a lightbulb icon in the Action Bar and can be used to provide the learner with hints/tips in order to correctly complete the screen
  • It is possible to highlight an element on screen when the hint is opened, this might be the correct element on screen

• Set the marking on the screen

  • Set whether the screen is markable - e.g. do you want to “mark” the screen to check whether the learner has interacted with it correctly or not
  • You can choose to disable marking so it doesn’t matter if the user gets it right or wrong
  • If you enable marking you can then choose what type of feedback to give to users

• Set the screen action

  • What will happen once the user correctly or incorrectly interacts with the elements on screen, e.g. navigate to the next screen, end the simulation or go to another screen completely

• Set screen variables and triggers

  • These can be used to create additional rules on screen, in a similar way to logic triggers, e.g. show a hidden element if a learner enters their name in a text input. It is not necessary to have screen variables and triggers on a screen if they are not required.

Screen Toolbar

The top toolbar in the Simulation screen-builder is the Screen toolbar:

You can perform the following actions with this toolbar:

• Add screens
• Paste screens
• Undo/redo actions
• Make the editor full screen
• View Screen name
• Edit Screen
• Add Elements
• See all elements on screen and which element “submits” the screen
• Zoom in/out
• Lock horizontal and vertical dragging
• Snap elements to one another for alignment
• Focus - this highlights the current element and makes it much easier to position

The tools are also available per screen in the screen list:

The above icons are defined as follows:

• Pin icon: Use this to “pin” the screen in live preview. Once pinned, that screen will be the simulation’s starting point in the live preview. While editing, this saves you having to complete the entire simulation in the preview to check changes you have made.
• Duplicate: Duplicate the screen.
• Delete: Delete the screen

Screen images and responsiveness

Screen images can be in any size and in the following file types:

• PNG
• JPEG
• SVG
• GIF

We recommend building your screens with the correct size for the device the majority of learners will view the content on.

Simulations are compatible with mobile devices, however, they are not responsive. Due to the nature of simulations, a software simulation of a desktop application may not be the same as a mobile application.

Something that might be worth considering is creating two different simulations (one for mobile and one for desktop), hiding both, and creating a Logic trigger for the learner to choose which version they want to show. The Logic trigger should be used in conjunction with an action button to “show” the hidden simulation of their choice.

Screen instructions

Screen instructions are used to instruct the learner through the simulation. They can be set up in a number of ways to achieve different experiences, such as instructing a user to "click next." Here is an example of that flow:

Instruction shows > learner reads > clicks “next” arrow > second instruction appears or shows Screen objective.

To create this, you can follow the steps below:

1. Add instruction text.
2. Add instruction image or icon if required.
3. Instruction Position: Consider what is on your screen and how large the window is as to where you position this.
4. Instruction Width: You can make this wider if you have a lot of content.
5. Next Instruction Button Type: Set to Next Arrow — you might want to switch it to “close cross” for your last instruction on the screen.
6. Allow Element Interaction: Set to Disabled — this means a user has to click next on the instruction and view them all before being able to interact with the screen.
7. Overlay settings can be customized as you prefer.
8. Submit Screen: Set to Disabled.

Repeat this process for as many sets of instructions you'd like to show the learner prior to them interacting with the screen elements.

"Walkthrough" instructions

It is possible to create a “walkthrough” style simulation, where you can highlight different elements on the screen as the learner clicks through. They are not expected to interact with the elements, just purely click through the instructions.

To create this, you can follow the steps outlined below:

Choose File

No file selected

Cancel

1. Create a Button element and set it as a “hotspot." This will make it transparent. Resize and position in the desired area.
2. Correct Condition: Should Not be Clicked
3. Button Click Action: No Action

Remember to name your elements clearly in the Editor Label to make it easier when building the instructions!

Now, you can add instructions:

1. Add instruction text.
2. Add instruction image or icon if required.
3. Highlight Elements: Choose the element you want the instruction to highlight. This will add a box and pulse animation around the element.
4. Instruction Position: Set to Anchor to Element.
5. Anchor to Element: Choose the same element you have highlighted.
6. Anchor Position: Choose which “side” of the element the instruction will sit. Think about what else is on screen and where the element itself sits on the screen.
7. Instruction Width: You may want to change this to suit the position it is on the screen.
8. Next Instruction Button Type: Set to Next Arrow.
9. Submit Screen: We recommend setting this to Disabled for all instructions except the last instruction. For the last instruction, set this to Enabled. This will submit the screen and move to the next screen in the simulation after the learner has read it or clicked next.

Repeat these steps for each element on screen and corresponding instructions.

Screen hints

Screen hints can be used to give the learner a “hint” about what they are supposed to do on screen. They can be shown when they first start the screen or appear once they have incorrectly interacted with an element.

The Hint button will sit in the “Action Bar” which you can position above or below the simulation.

There are two aspects to setting up your screen hints:

• Behaviour Tab: Under the Action Bar settings you can set how and when the hint displays across the simulation.
• Screen Settings: Set hint text and where it shows on each screen.

Behaviour tab

The Action Bar displays the Hint, under the Action Bar settings choose from:

• Always Show: The hint will always be available for the learner to click on.
• Show After Failed Attempt: The hint will only become available once the learner has incorrectly interacted with the screen elements.

Screen settings

In the screen settings you can choose to:

• Enable or disable the hint
• Set the hint text
• Set a hint icon: This is the icon that will appear within the hint itself, not the action bar.
• Set the hint position on the screen: This is where the hint text box will appear on screen.
• Set whether to highlight an element: You could choose to highlight the correct element a user must select
• Set the hint width

Screen marking

The screen marking section of the screen settings allows you to choose whether a screen is marked and how. This essentially means you can mark the screen correct or incorrect, depending on what the user has done.

The settings include:

• Marking enabled?
  • Enabled: This will allow you to “mark” the screen and screen elements as correct or incorrect, provide correct/incorrect feedback and show marking on the elements (ie. a tick or cross next to the specified elements).
  • Disabled: This will allow you to create a “walkthrough” style simulation where a learner doesn’t necessarily need to get the screen correct.
  • If the marking is disabled the below settings will not be available
• Mark selected elements?
  • Mark all elements:All elements on screen will be markable, and the element marking indicators will show against each element
  • Mark selected elements: Choose which elements you want the screen to mark. For instance, you may have lots of elements on screen to make the screen realistic, but you only want to bother marking specific ones that the learner might interact with.
• Show correct feedback?
  • Disabled: No correct feedback will appear if the learner selects the correct element, they will just be navigated to the next screen automatically.
  • Show correct feedback: This will enable the Correct Feedback section in the screen settings, where you can enter feedback text or image.
• Show Not Final Incorrect Feedback?
  • Disabled: The learner will only receive feedback on their final attempt.
  • Show Not Final Incorrect: This will enable the Show Not Final Feedback section in the screen settings. This allows you to show feedback after the first incorrect attempt a learner has. This is good to enable if you have more than one attempt per screen.
• Show Final Incorrect Feedback?
  • Disabled: The learner will not receive incorrect feedback on their final attempt.
  • Show Final Incorrect Feedback: This will enable the Show Final Incorrect Feedback section in the screen settings. This allows you to add incorrect feedback that will show on the learner’s final attempt.
• Show Element Marking?
  • Disabled: No marking will appear on screen.
  • Show Element Marking: This will mark the selected elements by showing a tick or cross next to the elements the learner has correctly or incorrectly interacted with.
• Show Marking on?
  • Interacted Elements: Show the marking only on the elements the learner has interacted with
  • All Markable Elements: Show marking on all elements you have included in the Mark Selected Elements section.

Screen feedback

Depending on your settings in Screen Marking, you can add feedback to your screens, including:

• Correct Feedback
• Not Final Incorrect Feedback
• Final Incorrect Feedback

Within each feedback setting you can:

• Add feedback text
• Add feedback image or icon. This shows within the feedback popup.
• Choose to highlight a particular element. This can be useful on the “not final incorrect feedback” to highlight the correct element to the learner
• Set where the feedback is positioned.
• Set the feedback popup width

Screen actions

The Screen Actions area in the settings allows you to set what will happen once the screen has been submitted, either by a correct or incorrect action on screen or by an instruction.

Screen actions will be triggered once the learner has:

• Correctly interacted with the screen
• Used up all their attempts
• Interacted with an instruction that is set to submit the screen.

Screen actions include:

• Navigate to next screen: The learner will be taken to the next screen.
• Navigate to selected screen: The learner will be taken to a specific screen, for instance, to create a branching type scenario.
• End simulation: This will end the simulation and take the learner to the results if enabled.
• Restart simulation: This will restart the simulation from the beginning.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.