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
Example: Simple Instruction
Example: With Variable Interpolation
Example: Feedback on Answer
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
Example: Hide All Text
Example: Hide Specific Text
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:Related Actions
- Show Panel — More complex UI with buttons, input fields, and media
- Show Image — Display diagrams or reference photos alongside text