Skip to main content

​
Overview

Use Show Text to display text overlays that guide learners with instructions, feedback, questions, and contextual information. Use Hide Text to remove text overlays when they are no longer needed. Text overlays support variable interpolation, allowing you to dynamically insert learner data and training state into your messages.

​
Show Text

​
When to Use

  • Display step-by-step instructions
  • Show feedback on correct or incorrect answers
  • Display step titles or progress messages
  • Show congratulations or completion messages
  • Provide context-specific guidance

​
Parameters

ParameterTypeRequiredDescription
Display TextStringYesThe text content to show. Supports variable interpolation with {{variableName}} syntax

​
Example: Simple Instruction

Action: Show Text
Display Text: "Locate the power button on the device."
A simple text overlay appears with the instruction.

​
Example: With Variable Interpolation

Action: Show Text
Display Text: "You scored {{score}} out of {{total}}. Great job!"
If the learner’s score is 8 and total is 10, the message displays: “You scored 8 out of 10. Great job!”

​
Example: Feedback on Answer

Action: Show Text
Display Text: "Correct! {{userName}}, you identified the {{componentName}} correctly."
The text dynamically includes the learner’s name and component name from your training variables.

​
Hide Text

​
When to Use

  • Remove instructions before the next step
  • Clear feedback messages to avoid confusion
  • Clean up text overlays during transitions
  • Reset UI state between states

​
Parameters

ParameterTypeRequiredDescription
Target Action IDStringOptionalThe ID of a specific Show Text action to hide. Omit to hide all text overlays

​
Example: Hide All Text

Action: Hide Text
All text overlays disappear.

​
Example: Hide Specific Text

Action: Hide Text
Target Action ID: "instruction-text-step-3"
Only the text with ID instruction-text-step-3 is hidden. Other text overlays remain visible.

​
Best Practices

1

Show text in onEntry

Use Show Text in the onEntry actions of a state to display instructions or prompts.
2

Hide text in onExit

Use Hide Text in the onExit actions to clean up the text before transitioning.
3

Use variable interpolation

Include learner data, scores, and component names using {{variableName}} for personalized feedback.
4

Keep text concise

Use short, clear messages. Long paragraphs are hard to read on small screens.
5

Test on mobile

Verify text overlay positioning and readability on phones and tablets.

​
Variable Reference

Common variables available for interpolation:
VariableDescription
{{userName}}The learner’s name or ID
{{score}}The learner’s current score
{{total}}The total possible points
{{stepNumber}}The current step number
{{timestamp}}The current date/time
{{customVariable}}Any variable you define in your training
  • Show Panel — More complex UI with buttons, input fields, and media
  • Show Image — Display diagrams or reference photos alongside text