Show Panel & Hide Panel

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

Use in onEntry and onExit

Show panels in onEntry, hide them in onExit for clean state management.

Keep panels focused

Include only essential content. Multiple smaller panels are better than one cluttered panel.

Enable Billboard mode

Set Billboard: true to ensure the panel always faces the learner, regardless of camera angle.

Test responsiveness

Verify panels are readable on mobile devices and don’t obscure critical 3D content.

Use variable interpolation

Personalize panels with learner names, scores, and custom data using {{variableName}}.

Map choice events to transitions

Connect choice events to different target states so each answer leads to appropriate feedback.

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.

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

Creator App

Workflow

Transitions

Variables

Actions — Training Control

Actions — Step Instructions

Actions — Media Playback

Actions — Object Manipulation

Actions — UI Control

Actions — Speed & Time

Actions — Training Feedback

Actions — Hand & Tool Visualization

Overview

Show Panel

When to Use

Parameters

Example 1: Simple Instructions with Image

Example 2: Multiple-Choice Question

Example 3: Input Collection

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

Hide Panel

When to Use

Parameters

Example

Best Practices

Common Patterns

Tutorial Step with Image

Quiz Question

Data Collection

​Overview

​Show Panel

​When to Use

​Parameters

​Example 1: Simple Instructions with Image

​Example 2: Multiple-Choice Question

​Example 3: Input Collection

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

​Hide Panel

​When to Use

​Parameters

​Example

​Best Practices

​Common Patterns

​Tutorial Step with Image

​Quiz Question

​Data Collection

​Related Actions

Overview

Show Panel

When to Use

Parameters

Example 1: Simple Instructions with Image

Example 2: Multiple-Choice Question

Example 3: Input Collection

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

Hide Panel

When to Use

Parameters

Example

Best Practices

Common Patterns

Tutorial Step with Image

Quiz Question

Data Collection

Related Actions