Skip to main content

​
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

ParameterTypeRequiredDescription
TitleStringNoPanel heading text (supports variable interpolation with {{variableName}})
Display Text / BodyStringNoMain content text (supports variable interpolation)
Input FieldObjectNoConfiguration for free-text input from learner (value stored in a variable)
ChoicesArrayNoMultiple-choice options (radio buttons or buttons); learner’s selection fires a choice event
MediaAsset ReferenceNoAttach an image, video, or audio file to display in the panel
ButtonsArrayNoCustom action buttons at the bottom of the panel
PositionVector3No3D position where the panel appears (X, Y, Z coordinates)
RotationVector3NoPanel rotation in 3D space
ScaleNumberNoPanel size scale (1.0 = default size)
BillboardBooleanNoPanel always faces the camera (true/false)
Billboard ModeStringNoHow 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

ParameterTypeRequiredDescription
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

1

Use in onEntry and onExit

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

Keep panels focused

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

Enable Billboard mode

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

Test responsiveness

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

Use variable interpolation

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

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