The Hotspot Step (Advanced Settings)

Learn more about some advanced features of the hotspots here. This article will cover just the step editing screen, for more on hotspot drawing, check our Hotspot editor support page.

Static Background


This is an advanced optional feature that can be useful for maintaining a consistent style across some of your steps. Think of the static background image as layer 1, then the step background image is layer 2.

For a quick example, see the image below... We have rough example of a branding experience that includes your company name, some text, and a version number of the training along the header. The rest of the image is blank, as this is where the step background image will go.

static test

Once you upload the above image into the static background area, you will be presented with the image to the left. You can then click and drag, or use the measurements down the bottom to get the step background image (the placeholder image) into the correct dimensions in relation to the static background.

static 2-1

This placeholder image will be where your step background image will show as seen below.

static 3

The advantage of this, is that if you had, say, 15 hotspot steps that you wanted a consistent looking background/header/footer, you could use a static background. This means that if you wanted to change something about one of those things, you would just need to "replace" the static background image in your library and every single one of those 15 steps will update too.

Separate Audio


You can upload a .mp3 file to the HotSpot Step that will begin playing once the step loads. This can be of any length, but the learner can move on at any time. This audio can be paused, fast forwarded, or rewinded by the learner. If they choose to continue to the next step (by clicking the right part of the screen), the audio will stop and the next step will show.

This feature can be great for reading out instructions for the user, especially for those who have difficulty with reading.

Overlay Image




You can set the score the user gets when they get this step correct. With SimTutor, the scoring works by giving them a maximum score (3 in this case) if they get the location correct on the first attempt. For each incorrect guess they can get points taken away from this maximum score (1 point per incorrect guess in this case). For example, if I guessed incorrectly once, then got the location correct, I would get 3-1=2 points total.



When the learner answers a question wrong 3 times in a row, you have some options to assist them with answering that question. The text that you put in the "Help Text" text field will display to the learner, along to any image you upload to that help image section.

Help text should give the user a way forward for when they are stuck. Sometimes certain steps such as hotspots in order can be very hard to proceed with if you do not know the answer. In this example, giving the user a list of things to click on in order will help them get through this step. Alternatively, you could upload a screenshot of that step, and label the points the learner needs to click and in what order.

Visual Settings


Firstly, you can turn off the "correct display" checkbox if you wish to NOT show the big tick when the learner gets the hotspot correct. This would be used in a menu style Hotspot step where the Hotspots aren't right or wrong, just options.

The lower area is where you can change the colors featured within this specific step. These colors can be set using the color picker, or you can input a hexadecimal value to get the precise color you need.

The background color will change the area behind the background image (usually the far left and far right sections if using a widescreen monitor) to whichever color you wish. We recommend keeping this color pretty neural, as to not distract the learner from the more relevant image in the middle of the screen. Another good color to use if applicable, is the color of your background image. This works when you have a solid plain background for your background image, so the sides (background color) of the screen merge seamlessly with the background image.

The instructions font color changes the color of the font featured in the instructions box, whereas the background, to no ones surprise, changes the background color of said box. These two colors should have enough contrast so you can distinguish the text from the background.

The visibility of the step is for when you want to hide the step from the viewer, but not fully delete it. All navigation to and from this step will be disabled while hidden - it is effectively deleted except not permanent.

Lastly, making the instruction box transparent gives you to the option to have part of the background image that was behind the instructions box to show but in a low opacity.