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

# General Interaction Patterns Implementation

> Guide to combining existing steps and interactions for flexible patterns like clickable detection via GrabStep, gaze-triggered actions with XRGazeItem, and composite multi-step interactions.

**Core Concepts:**

* **Interaction to Step Wiring** — Wire interaction events (XRGazeItem, XRClickableItem) directly to step trigger methods
* **Flexible Triggering** — Trigger PopupStep and QuestionStep using gaze, click, or manual events
* **Event-Based Flow** — Compose complex behaviors by wiring interaction and step events

## When to use

General Interaction Patterns — use this guide when implementing this interaction pattern in a VR training scenario.

## Role

This guide covers **general interaction patterns** that combine existing steps and interactions:

* **Clickable Items as GrabStep** — Use GrabStep with XRGrabInteractable for clickable object detection
* **Gaze-Triggered Modals** — Use XRGazeItem to trigger PopupStep or QuestionStep directly
* **Composite Interactions** — Chain multiple steps together via SequenceController event wiring
* **Event-Based Triggering** — Wire interaction events to step trigger methods for flexible control

These patterns enable complex multi-step interactions by combining existing components and wiring events.

## Pattern 1: Clickable Item Detection Using GrabStep

### Concept

Use **GrabStep** with **XRGrabInteractable** on a target object to create a clickable interaction pattern.

### Setup Steps

#### 1. Create Clickable Target

1. Create or select a GameObject as your clickable target
2. Add **XRGrabInteractable** component (from XR Interaction Toolkit)
3. Add **GrabStep** component for step validation
4. Add **ReferenceableComponent** for reference system
5. Configure **GrabStep**:
   * **Complete On Grab**: Enable to complete immediately on grip
   * **Require Hold Duration**: Disable (no hold needed for click)
   * **Allow Any Interactor**: Enable for either hand

<Frame hint="Clickable object with XRGrabInteractable and GrabStep configured for click detection." caption="Clickable Target Setup">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/clickable-target-setup.png" alt="Clickable target with grab interactable and step" />
</Frame>

#### 2. Add Visual Feedback Auxiliaries

1. On **GrabStep**, add **StepObjectHighlightAuxiliary** for hover feedback
2. Add **VRHapticAuxiliary** for grip feedback
3. Add **StepInfo** to show task in list
4. Configure highlight to show when step active

<Frame hint="GrabStep with highlight and haptic auxiliaries configured." caption="Clickable with Feedback Auxiliaries">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/clickable-with-auxiliaries.png" alt="Clickable step with highlight and haptic feedback" />
</Frame>

### Expected Results

* **Idle**: Object shows normal appearance
* **Hand Near**: Highlight feedback appears (glow/outline)
* **Hand In Range**: Buttons/feedback indicate "clickable"
* **Grip Detected**: GrabStep completes, next step triggers
* **Visual Response**: Animation or state change on successful click

***

## Pattern 2: Gaze-Triggered PopupStep

### Concept

Use **XRGazeItem** to detect when the player gazes at an object for a configured dwell time, then fire an event to trigger **PopupStep** display.

### Setup Steps

#### 1. Create Gaze Target with XRGazeItem

1. Create or select a GameObject as your gaze target
2. Add **Collider** (Box or Sphere, trigger mode optional)
3. Add **ReferenceableComponent** for reference system
4. Add **XRGazeItem** component
5. Configure **XRGazeItem**:
   * **Required Look Time**: Duration (1-2s typical)
   * **Look Angle Threshold**: Precision angle (15° default, smaller = more precise)
   * **Reset Progress When Look Away**: Enable to reset on look away
   * **Feedback UI Ref**: Assign ProgressFeedbackUI (shows radial fill during gaze)

<Frame hint="XRGazeItem configured on target object with required look time and angle threshold settings." caption="XRGazeItem for Gaze Detection">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/xrgaze-item-setup.png" alt="XRGazeItem component with gaze detection settings" />
</Frame>

#### 2. Create PopupStep

1. Create or select a GameObject to hold the **PopupStep** component
2. Add **PopupStep** component
3. Configure **PopupStep**:
   * **Trigger Mode**: **Manual Trigger** (will be triggered by gaze event)
   * **Popup Content Ref**: Assign popup content
   * **Complete On Confirm**: Enable
   * **Modal Manager Ref**: Auto-find or assign

#### 3. Wire XRGazeItem to PopupStep

1. On the **XRGazeItem** component, locate **onGazeComplete** event
2. Add callback to invoke **PopupStep.TriggerPopup()** (or custom trigger method)
3. This fires when gaze dwell time is met

<Frame hint="XRGazeItem onGazeComplete event wired to PopupStep trigger method." caption="XRGazeItem to PopupStep Event Wiring">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/xrgaze-popup-wiring.png" alt="XRGazeItem onGazeComplete event connected to PopupStep trigger" />
</Frame>

### Expected Results

* **Gaze at target**: ProgressFeedbackUI shows radial fill (if assigned)
* **Dwell time met**: XRGazeItem fires onGazeComplete event
* **PopupStep triggered**: Modal shows automatically without sequence dependency
* **User confirms/cancels**: PopupStep completes and hides
* **Seamless flow**: Direct gaze-to-popup interaction without step chaining

***

## Pattern 3: Gaze-Triggered QuestionStep

### Concept

Similar to Pattern 2, but use **XRGazeItem** to trigger **QuestionStep** for gaze-based assessment.

### Setup Steps

#### 1. Setup XRGazeItem (for Gaze Detection)

1. Create or select a GameObject as your gaze target
2. Add **Collider** and **ReferenceableComponent**
3. Add **XRGazeItem** component
4. Configure:
   * **Required Look Time**: Duration (1-2s typical)
   * **Look Angle Threshold**: 15° (default, adjust for precision)
   * **Reset Progress When Look Away**: Enable
   * **Feedback UI Ref**: Assign ProgressFeedbackUI (optional)

#### 2. Setup QuestionStep (with Manual Trigger)

1. Create or select a GameObject to hold the **QuestionStep** component
2. Add **QuestionStep** component
3. Configure:
   * **Trigger Mode**: **Manual Trigger** (will be triggered by gaze event)
   * **Question Data Ref**: Assign question content
   * **Complete On Correct**: Enable
   * **Allow Retry**: Enable (if desired)

#### 3. Wire XRGazeItem to QuestionStep

1. On the **XRGazeItem** component, add callback to **onGazeComplete** event
2. Wire to **QuestionStep.TriggerPopup()** (or custom trigger method)
3. Fires when gaze dwell time is met

<Frame hint="XRGazeItem configured and wired to QuestionStep trigger for gaze-based assessment." caption="XRGazeItem to QuestionStep Event Wiring">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/xrgaze-question-wiring.png" alt="XRGazeItem onGazeComplete event connected to QuestionStep trigger" />
</Frame>

### Expected Results

* **Gaze at target**: ProgressFeedbackUI shows radial fill progress (if assigned)
* **Dwell time met**: XRGazeItem fires onGazeComplete event
* **QuestionStep triggered**: Question modal shows automatically
* **Player selects answer**: Answer validated and feedback shown
* **Complete integration**: Gaze drives entire assessment without step sequencing

***

## Pattern 4: Composite Interaction (GrabStep → PopupStep → QuestionStep)

### Concept

Build complex interactions by chaining three steps:

1. **GrabStep** — Click/interact with object
2. **PopupStep** — Confirmation dialog appears
3. **QuestionStep** — Assessment or choice
4. **Feedback** — Based on answers

### Setup Steps

#### 1. Create Step Sequence

In **SequenceController**, add steps in order:

```
[Step 1: GrabStep]
  - Clickable object detection
  - Complete On Grab: Enable
  ↓ OnStepEnd fires
[Step 2: PopupStep]
  - Trigger Mode: On Activated (shows immediately)
  - Complete On Confirm: Enable
  ↓ OnStepEnd fires
[Step 3: QuestionStep]
  - Trigger Mode: On Activated (shows immediately)
  - Complete On Correct: Enable
  ↓ OnStepEnd fires
[Step 4: Completion Step or Next Scenario]
```

#### 2. Configure Each Step

**GrabStep:**

* Target: Interactive object with XRGrabInteractable
* Auxiliaries: Highlight, Haptics, Info
* Complete On Grab: Enable

**PopupStep:**

* Trigger Mode: On Activated (auto-shows after grab)
* Content: "Are you sure?"
* Complete On Confirm: Enable

**QuestionStep:**

* Trigger Mode: On Activated (auto-shows after confirm)
* Content: Question and answers
* Allow Retry: Optional

<Frame hint="Sequence showing GrabStep → PopupStep → QuestionStep flow in SequenceController." caption="Composite Interaction Step Sequence">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/composite-step-sequence.png" alt="Three-step composite interaction flow" />
</Frame>

### Expected Results

1. **Click Phase**: Player grabs object
   * Highlight feedback while hand near
   * Haptics on grip
2. **Confirmation Phase**: Popup appears automatically
   * Player presses confirm or cancel
   * If cancel: step ends, sequence stops
   * If confirm: proceeds to next
3. **Assessment Phase**: Question appears automatically
   * Player selects answer
   * If correct: step completes, sequence continues
   * If incorrect: retry allowed (if enabled)
4. **Completion**: All steps satisfied, next scenario begins

***

## Troubleshooting

| Issue                                        | Solution                                                                                                                                                                                |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **GrabStep not detecting click**             | Verify XRGrabInteractable on target; check hand proximity detection; ensure colliders not disabled                                                                                      |
| **PopupStep not triggered by gaze**          | Check XRGazeItem onGazeComplete event is wired to PopupStep.TriggerPopup(); verify Trigger Mode = Manual Trigger on PopupStep; confirm ProgressFeedbackUI assigned if feedback expected |
| **Gaze not detecting properly**              | Verify XRGazeItem component enabled; check collider on target object; confirm Required Look Time is reasonable (0.5-3s); adjust Look Angle Threshold if too strict                      |
| **XRGazeItem event not firing**              | Check onGazeComplete callback is registered in Inspector; verify head transform reference resolves (defaults to Camera.main); test gaze direction with Debug.Log                        |
| **QuestionStep triggered but not visible**   | Verify QuestionStep Trigger Mode = Manual Trigger; check QuestionModalUI Canvas is active; ensure Modal Manager found or assigned                                                       |
| **Composite sequence breaks mid-flow**       | Check step completion conditions (Complete On Grab, Complete On Confirm, Complete On Correct); verify all references assigned; test event wiring in Play mode                           |
| **Multiple interactions triggering at once** | Disable interactions after trigger (set disableAfterGaze = true on XRGazeItem, or disableAfterClick = true on XRClickableItem); verify only one step active at a time                   |

***

## Visual Examples

### Clickable Interaction Flow

<Frame hint="Sequence showing hand approaching object, highlight feedback, grip detection, and completion." caption="Clickable Interaction Flow (Animation)">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/clickable-flow.gif" alt="Complete clickable interaction with hover and click feedback" />
</Frame>

### XRGazeItem-to-Popup Flow

<Frame hint="Sequence showing gaze at target, progress feedback, gaze dwell complete, popup appears and user confirms." caption="XRGazeItem-Triggered Popup Flow (Animation)">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/xrgaze-popup-flow.gif" alt="XRGazeItem gaze completion triggering popup display" />
</Frame>

### Composite Three-Step Flow

<Frame hint="Complete flow showing click → popup confirmation → question → completion." caption="Composite Interaction Complete Flow (Animation)">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/composite-complete-flow.gif" alt="Full three-step composite interaction with all phases" />
</Frame>

***

## Related

* [GrabStep](/vr/steps/grab-step) — Click/grab interaction base
* [XRGazeItem](/vr/interactions/xr-gaze-item) — Gaze detection for direct event triggering
* [PopupStep](/vr/implementation/popup-modal-confirmation) — Modal confirmation patterns
* [QuestionStep](/vr/implementation/question-modal-answer) — Assessment and feedback patterns
* [SequenceController](/core/sequence-controller) — Sequence flow and step ordering
* [VR step auxiliaries](/vr/steps/vr-step-auxiliaries) — Feedback (highlight, haptics, info)