> ## 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 Panel & Hide Panel

> Display versatile UI panels with instructions, questions, input fields, and media

## Overview

**Show Panel** is the most versatile UI action in Creator Studio. It displays a customizable panel that can contain text, images, videos, questions, input fields, and buttons. Use **Hide Panel** to dismiss the panel when no longer needed.

Panels support variable interpolation and can be positioned anywhere in 3D space, making them flexible for various training scenarios.

## Show Panel

### When to Use

* Display instructions with supporting images
* Present multiple-choice questions
* Collect free-text input from learners
* Show confirmation dialogs
* Display information popups with diagrams
* Combine instructional text with media

### Parameters

| Parameter           | Type            | Required | Description                                                                                  |
| ------------------- | --------------- | -------- | -------------------------------------------------------------------------------------------- |
| Title               | String          | No       | Panel heading text (supports variable interpolation with `{{variableName}}`)                 |
| Display Text / Body | String          | No       | Main content text (supports variable interpolation)                                          |
| Input Field         | Object          | No       | Configuration for free-text input from learner (value stored in a variable)                  |
| Choices             | Array           | No       | Multiple-choice options (radio buttons or buttons); learner's selection fires a choice event |
| Media               | Asset Reference | No       | Attach an image, video, or audio file to display in the panel                                |
| Buttons             | Array           | No       | Custom action buttons at the bottom of the panel                                             |
| Position            | Vector3         | No       | 3D position where the panel appears (X, Y, Z coordinates)                                    |
| Rotation            | Vector3         | No       | Panel rotation in 3D space                                                                   |
| Scale               | Number          | No       | Panel size scale (1.0 = default size)                                                        |
| Billboard           | Boolean         | No       | Panel always faces the camera (`true`/`false`)                                               |
| Billboard Mode      | String          | No       | How the panel rotates to face camera (`"free"`, `"locked-y"`, etc.)                          |

### Example 1: Simple Instructions with Image

```
Action: Show Panel
Title: "Assembly Instructions"
Display Text: "Connect the components in the order shown. Do not force any connections."
Media: "assembly-diagram.png"
Position: [0, 1.5, 2]
Billboard: true
```

A panel appears with a title, instructions, and a diagram. It always faces the learner.

### Example 2: Multiple-Choice Question

```
Action: Show Panel
Title: "Safety Check"
Display Text: "Which personal protective equipment is required for this procedure?"
Choices:
  - text: "Safety glasses only"
    value: "wrong"
    event: "incorrect-answer"
  - text: "Hard hat, gloves, and safety shoes"
    value: "correct"
    event: "correct-answer"
  - text: "No PPE required"
    value: "wrong"
    event: "incorrect-answer"
Position: [0, 1.5, 2]
Billboard: true
```

A question with three answer options appears. Each selection fires an event that the author can connect to different states.

### Example 3: Input Collection

```
Action: Show Panel
Title: "Equipment Verification"
Display Text: "Enter the serial number of the equipment:"
Input Field:
  type: "text"
  placeholder: "e.g., SN-12345"
  variableName: "equipmentSerial"
Buttons:
  - label: "Submit"
    action: "submit-serial"
Position: [0, 1.5, 2]
Billboard: true
```

A text input field allows the learner to enter data. The value is stored in `equipmentSerial` variable when submitted.

### Example 4: Comprehensive Panel (Video + Text + Buttons)

```
Action: Show Panel
Title: "Step 3: Install the Module"
Display Text: "Watch the video below, then click Next when ready."
Media: "module-installation-video.mp4"
Buttons:
  - label: "Play Again"
    action: "replay-video"
  - label: "Next"
    action: "proceed-to-practice"
Position: [0, 1.5, 2]
Billboard: true
```

A panel with a video, instructional text, and multiple action buttons provides a rich learning experience.

## Hide Panel

### When to Use

* Remove the panel before transitioning to the next step
* Dismiss a confirmation dialog after learner responds
* Clear panels during transitions

### Parameters

| Parameter | Type | Required | Description                                               |
| --------- | ---- | -------- | --------------------------------------------------------- |
| None      | —    | —        | No parameters required. Hides the currently visible panel |

### Example

```
Action: Hide Panel
```

The panel is dismissed and the learner returns to the 3D scene.

## Best Practices

<Steps>
  <Step title="Use in onEntry and onExit">
    Show panels in **onEntry**, hide them in **onExit** for clean state management.
  </Step>

  <Step title="Keep panels focused">
    Include only essential content. Multiple smaller panels are better than one cluttered panel.
  </Step>

  <Step title="Enable Billboard mode">
    Set `Billboard: true` to ensure the panel always faces the learner, regardless of camera angle.
  </Step>

  <Step title="Test responsiveness">
    Verify panels are readable on mobile devices and don't obscure critical 3D content.
  </Step>

  <Step title="Use variable interpolation">
    Personalize panels with learner names, scores, and custom data using `{{variableName}}`.
  </Step>

  <Step title="Map choice events to transitions">
    Connect choice events to different target states so each answer leads to appropriate feedback.
  </Step>
</Steps>

## Common Patterns

### Tutorial Step with Image

```
State: AssemblyStep1
  onEntry:
    → Show Panel
        Title: "Step 1: Locate Components"
        Display Text: "Find these three parts in your assembly kit."
        Media: "components-image.png"
        Billboard: true
    → Set Interactable Objects (["component-1", "component-2", "component-3"], true)

  onExit:
    → Hide Panel
```

The learner sees the step instruction with a diagram, then can interact with the components.

### Quiz Question

```
State: QuizQuestion1
  onEntry:
    → Show Panel
        Title: "Knowledge Check"
        Display Text: "What is the correct tool for this task?"
        Choices: [Option A, Option B, Option C]
        Billboard: true

  transitions:
    - event: "choice-a"
      target: "QuizFeedbackWrong1"
    - event: "choice-b"
      target: "QuizFeedbackCorrect1"
    - event: "choice-c"
      target: "QuizFeedbackWrong1"

  onExit:
    → Hide Panel
```

Each answer choice routes to different feedback states.

### Data Collection

```
State: EquipmentIDEntry
  onEntry:
    → Show Panel
        Title: "Registration"
        Display Text: "Enter your equipment ID to proceed."
        Input Field: {type: "text", variableName: "equipID"}
        Buttons: [{label: "Submit", action: "submit"}]
        Billboard: true

  onExit:
    → Hide Panel
```

The learner's input is captured in the `equipID` variable and can be used later in the training.

## Related Actions

* **Show Text** — Display simple text without the panel container
* **Show Image** — Display images standalone
* **Pause Training** — Require acknowledgment before continuing
* **Set Interactable Objects** — Enable interactions with objects while the panel is open