Skip to main content

​
Overview

Use Show Image to display image overlays (diagrams, reference photos, safety warnings, instructional graphics) in the training interface. Use Hide Image to remove images when they are no longer needed.

​
Show Image

​
When to Use

  • Display technical diagrams or schematics
  • Show reference photos of correct procedures
  • Present safety warning graphics
  • Display instructional images alongside the 3D scene
  • Show comparison photos (correct vs. incorrect)

​
Parameters

ParameterTypeRequiredDescription
Image AssetAsset ReferenceYesSelect an image from your asset library (PNG, JPG, SVG supported)

​
Example: Safety Warning

Action: Show Image
Image Asset: "safety-hazard-icon"
A safety warning image appears in the training interface.

​
Example: Procedure Reference

Action: Show Image
Image Asset: "valve-assembly-diagram"
A technical diagram showing the correct valve assembly is displayed to guide the learner.

​
Hide Image

​
When to Use

  • Remove reference images after the learner has reviewed them
  • Clear images before transitioning to the next step
  • Reset UI state between training phases

​
Parameters

ParameterTypeRequiredDescription
Target Action IDStringOptionalThe ID of a specific Show Image action to hide. Omit to hide all images

​
Example: Hide All Images

Action: Hide Image
All image overlays disappear.

​
Example: Hide Specific Image

Action: Hide Image
Target Action ID: "reference-diagram-step-2"
Only the image with ID reference-diagram-step-2 is hidden. Other images remain visible.

​
Best Practices

1

Use high-quality images

Provide clear, high-resolution images for technical diagrams and reference photos.
2

Optimize file sizes

Compress images to reduce training file size and improve loading times.
3

Show in onEntry, hide in onExit

Display images in onEntry and remove them in onExit for clean state transitions.
4

Combine with text

Pair Show Image with Show Text for instructions + visual reference.
5

Test on mobile

Verify images are visible and properly positioned on small screens.

​
Common Patterns

​
Instruction + Diagram

State: ComponentAssembly
  onEntry:
    → Show Image (assembly-diagram)
    → Show Text "Follow the diagram. Connect the green wire first."
    → Show Panel (with instructions)

  onExit:
    → Hide Image
    → Hide Text
The learner sees a diagram, text instructions, and a detailed panel — all working together.

​
Safety Warning Before Procedure

State: DangerousProcedure
  onEntry:
    → Show Image (warning-icon)
    → Pause Training (learner must dismiss)
    → Show Text "This step involves high voltage. Follow all safety procedures."
    → Show Panel (safety checklist)
The warning appears first, then the learner must acknowledge before proceeding.
  • Show Text — Display text instructions alongside images
  • Show Panel — Combine images with text, buttons, and interactive elements