> ## Documentation Index
> Fetch the complete documentation index at: https://docs.altoura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Show Text & Hide Text

> Display or hide text overlays in the training interface

## 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

| Parameter    | Type   | Required | Description                                                                              |
| ------------ | ------ | -------- | ---------------------------------------------------------------------------------------- |
| Display Text | String | Yes      | The 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

| Parameter        | Type   | Required | Description                                                                   |
| ---------------- | ------ | -------- | ----------------------------------------------------------------------------- |
| Target Action ID | String | Optional | The 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

<Steps>
  <Step title="Show text in onEntry">
    Use **Show Text** in the **onEntry** actions of a state to display instructions or prompts.
  </Step>

  <Step title="Hide text in onExit">
    Use **Hide Text** in the **onExit** actions to clean up the text before transitioning.
  </Step>

  <Step title="Use variable interpolation">
    Include learner data, scores, and component names using `{{variableName}}` for personalized feedback.
  </Step>

  <Step title="Keep text concise">
    Use short, clear messages. Long paragraphs are hard to read on small screens.
  </Step>

  <Step title="Test on mobile">
    Verify text overlay positioning and readability on phones and tablets.
  </Step>
</Steps>

## Variable Reference

Common variables available for interpolation:

| Variable             | Description                              |
| -------------------- | ---------------------------------------- |
| `{{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 |

## Related Actions

* **Show Panel** — More complex UI with buttons, input fields, and media
* **Show Image** — Display diagrams or reference photos alongside text