> ## 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.

# Question Modal Answer Implementation

> Complete guide to implementing question modals with answer validation using QuestionStep and multiple-choice UI.

**Core Components:**

* `Assets/_MolcaSDK/_VR/Scripts/Scenario/Steps/QuestionStep.cs` — Step that displays question modal and validates answer selection
* `Assets/_MolcaSDK/_VR/Scripts/UI/Modal/QuestionModalUI.cs` — Question modal UI with title, question text, and answer buttons
* `Assets/_MolcaSDK/_VR/Scripts/Scenario/QuestionData.cs` — Data structure for question, options, and correct answer

## When to use

Question Modal Answer — use this guide when implementing this interaction pattern in a VR training scenario.

## Role

This guide covers implementing **question modals with answer validation** in VR training scenarios:

* **QuestionStep** — Step that displays question and validates selected answer
* **QuestionModalUI** — Visual modal component with question text and answer buttons
* **QuestionData** — Configuration for question content, options, and correctness
* **Answer Feedback** — Immediate feedback (correct/incorrect) with optional retry logic

Combined, these create interactive assessment experiences where trainees read questions, select answers, and receive instant feedback with option to retry or proceed.

## Setup Steps

### 1. Create Question Data (Content Assets)

1. Create a **QuestionData** ScriptableObject or inline component with:
   * **Question Text**: The question prompt (e.g., "What is the correct procedure?")
   * **Answer Options**: Array of answer choices
     * **Option Text**: Display text (e.g., "Option A", "Option B")
     * **Option ID**: Unique identifier for tracking
     * **Is Correct**: Boolean indicating correct answer
   * **Feedback Text**: Optional feedback for correct/incorrect selections
   * **Allow Retry**: Enable to let trainees retry after wrong answer
   * **Max Attempts**: Number of allowed attempts (default: unlimited)
   * **Show Correct Answer**: Reveal correct answer after wrong selection

<Frame hint="ScriptableObject showing question text, answer options array with correct/incorrect toggles, and feedback settings." caption="Question Data Configuration">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/question-data-config.png" alt="QuestionData ScriptableObject with question, options, and feedback configuration" />
</Frame>

### 2. Add QuestionStep for Modal Control

1. Create or select a GameObject to hold the **QuestionStep** component
2. Add **QuestionStep** component
3. Configure in Inspector:
   * **Trigger Mode**: Select how modal appears
     * **On Activated** — Modal shows immediately when step becomes active (automatic)
     * **Manual Trigger** — Step waits for manual trigger event before showing modal (requires external input)
   * **Question Data Ref**: Assign the QuestionData reference
   * **Modal Manager Ref**: Assign the ModalManager (auto-find if available)
   * **Correct Answer Action**: (Optional) Action to trigger on correct answer
   * **Incorrect Answer Action**: (Optional) Action to trigger on incorrect answer
   * **Complete On Correct**: Enable if step should complete when correct answer selected
   * **Show Feedback**: Enable to display feedback text after selection
   * **Allow Retry**: Enable to allow multiple attempts
   * **Show Modal Overlay**: Enable for background fade/blocking overlay

<Frame hint="QuestionStep Inspector showing trigger mode selection, question data reference, answer action configuration, and retry settings." caption="QuestionStep Configuration">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/questionstep-inspector.png" alt="QuestionStep component with trigger mode and all fields configured" />
</Frame>

### 3. Setup Modal UI Canvas and Answer Buttons

1. Create a Canvas (Screen Space - Overlay recommended)
2. Add **QuestionModalUI** component to the Canvas
3. Configure in Inspector:
   * **Question Text**: Assign TextMeshProUGUI for question prompt
   * **Answer Buttons**: Assign array of Button components for each answer option
   * **Feedback Text**: Assign TextMeshProUGUI for correct/incorrect feedback
   * **Modal Background**: Assign Image component for modal panel
   * **Overlay Fade**: (Optional) Assign Image component for background fade
   * **Feedback Display Duration**: Time to show feedback before next action (default: 2s)

<Frame hint="QuestionModalUI Inspector showing question text, answer button array, feedback text, and modal background assignments." caption="QuestionModalUI Setup">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/questionmodalui-inspector.png" alt="QuestionModalUI component with all UI elements assigned" />
</Frame>

### 4. Wire QuestionStep and QuestionModalUI Together

1. On the **QuestionStep** component, assign the **QuestionModalUI** reference
2. On the **QuestionModalUI** component, assign the **QuestionStep** reference
3. Configure answer button callbacks:
   * Each **Answer Button.onClick** → QuestionStep.OnAnswerSelected(optionIndex)
4. Verify button array length matches QuestionData answer options count
5. (Optional) Add **Overlay** GameObject with Image component for background fade

<Frame hint="QuestionModalUI and QuestionStep wired together with answer button callbacks visible." caption="QuestionStep and QuestionModalUI Integration">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/questionstep-modalui-wiring.png" alt="QuestionStep and QuestionModalUI integration with answer button callbacks" />
</Frame>

### 5. Optional: Add Answer Feedback Auxiliary

1. On the **QuestionStep** component, expand **Auxiliaries** section
2. Click **Add Auxiliary** → **VR/Scenario/Step Info** (for task list display)
3. Or add **VR/Haptic Auxiliary** for tactile feedback on answer selection
4. Configure to match your feedback preferences:
   * Haptic pulses on correct answer
   * Haptic error pattern on incorrect answer
   * Sound cues (success/failure)

<Frame hint="QuestionStep auxiliaries showing StepInfo and VRHapticAuxiliary configured for feedback." caption="Optional Feedback Auxiliaries">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/questionstep-auxiliaries.png" alt="QuestionStep with StepInfo and VRHapticAuxiliary auxiliaries" />
</Frame>

## How It Works

### QuestionStep

**File:** `Assets/_MolcaSDK/_VR/Scripts/Scenario/Steps/QuestionStep.cs`

Displays question and validates answer selection:

#### On Activated Mode (Automatic)

1. **On step start** (`OnStepActivated`): Automatically initializes and shows modal
   * Resolves QuestionData reference
   * Passes question and options to QuestionModalUI
   * Shows modal with overlay
   * Initializes attempt counter
   * Registers answer button callbacks
2. **On answer selected** (`OnAnswerSelected`): Player presses answer button
   * Compares selected option against correct answer
   * If correct:
     * Triggers optional correct action
     * Shows positive feedback (if enabled)
     * If **Complete On Correct** enabled: completes step
   * If incorrect:
     * Triggers optional incorrect action
     * Shows negative feedback (if enabled)
     * If **Allow Retry** enabled: resets for next attempt
     * Optionally shows correct answer hint
3. **On retry** (`OnRetry`): Player attempts again (if allowed)
   * Resets answer selection state
   * Resets button visual states
   * Clears feedback text
   * Waits for new answer selection
4. **On step end** (`OnStepCompleted`): Hides modal and overlay

#### Manual Trigger Mode (Awaiting Signal)

1. **On step start** (`OnStepActivated`): Initializes but does NOT show modal yet
   * Prepares QuestionData reference
   * Waits for manual trigger signal
   * Modal remains hidden, Canvas inactive
   * Attempt counter initialized but not displayed
2. **On manual trigger** (`OnManualTrigger`): External event triggers modal display
   * Shows modal with overlay
   * Registers answer button callbacks
   * Same answer validation and feedback flow as On Activated mode
3. **On answer selected/retry** → Same as On Activated mode
4. **On step end** (`OnStepCompleted`): Hides modal and overlay

**Key fields:**

* `triggerMode` — Trigger activation method (OnActivated or ManualTrigger)
* `questionDataRef` — QuestionData with question, options, correct answer
* `modalManagerRef` — ModalManager reference (auto-finds if null)
* `correctAnswerAction` — Action to trigger on correct answer
* `incorrectAnswerAction` — Action to trigger on incorrect answer
* `completeOnCorrect` — Auto-complete step on correct answer
* `showFeedback` — Display feedback text after selection
* `allowRetry` — Enable answer retry on incorrect
* `showCorrectAnswerHint` — Reveal correct answer after wrong selection
* `showModalOverlay` — Display background fade overlay

### QuestionModalUI

**File:** `Assets/_MolcaSDK/_VR/Scripts/UI/Modal/QuestionModalUI.cs`

Displays and manages question modal UI:

1. **Initialize** (`SetQuestion`): Receives QuestionData and populates UI
   * Sets question text
   * Creates/populates answer buttons from options
   * Hides feedback text initially
   * Resets button visual states
2. **Show** (`ShowModal`): Reveals modal and overlay
   * Fades in modal canvas
   * Animates modal entrance
   * Makes all buttons interactive
3. **Button Interaction**: Players interact with answer buttons
   * Button hover states (color, glow, scale)
   * Haptic feedback on interaction
   * Button press animation on selection
4. **Show Feedback** (`ShowFeedback`): Displays answer feedback
   * Shows feedback text (correct/incorrect message)
   * Highlights correct/incorrect button (optional)
   * Disables remaining buttons temporarily
   * Auto-hides after feedback duration (or waits for player action)
5. **Hide** (`HideModal`): Dismisses modal and overlay
   * Fades out modal canvas
   * Animates modal exit

**Key fields:**

* `questionText` — TextMeshProUGUI for question prompt
* `answerButtons[]` — Array of Button components for answer options
* `feedbackText` — TextMeshProUGUI for feedback display
* `modalBackground` — Image for modal panel
* `overlayFade` — (Optional) Image for background overlay
* `feedbackDisplayDuration` — Time to show feedback (default: 2s)
* `showDuration` — Duration of show animation (default: 0.3s)
* `hideDuration` — Duration of hide animation (default: 0.3s)
* `correctFeedbackColor` — Color highlight for correct answer (default: green)
* `incorrectFeedbackColor` — Color highlight for incorrect answer (default: red)

### Answer Validation

**File:** `Assets/_MolcaSDK/_VR/Scripts/Scenario/QuestionData.cs`

Manages question content and correctness validation:

1. **GetQuestion** — Returns question text
2. **GetOptions** — Returns array of answer options
3. **IsAnswerCorrect** — Validates if selected option is correct
4. **GetCorrectAnswerIndex** — Returns index of correct answer
5. **GetFeedback** — Returns feedback text for selected answer
6. **GetAttemptCount** — Tracks number of attempts

***

## Expected Results & Interaction Flow

### Idle State

Step is not active. No modal visible. Canvas is hidden.

### Step Activated (Question Appears)

When **QuestionStep** becomes active:

* **Modal Canvas** becomes visible with fade animation
* **Background Overlay** appears (semi-transparent)
* **Modal Panel** displays question and answer buttons
* **Question Text** populated from QuestionData
* **Answer Buttons** are interactive and highlighted
* All buttons show default state (no selection)
* Visual feedback signals "Select your answer"

### Reading Question

Trainee reads the question:

* **Question Text** is clearly visible and readable
* **Answer Buttons** clearly show all options
* **Button Labels** match QuestionData option text
* No time pressure or interaction required yet

### Approaching Answer

As trainee's hand approaches answer buttons:

* **Buttons** show hover states (color change, scale, glow)
* **Cursor/Ray** highlights interactive button
* **Haptic Feedback** pulses on button proximity
* Visual feedback indicates "Button is ready for interaction"

### Selecting Correct Answer

Trainee presses correct answer button:

* **Button** shows press animation (scale down, color change)
* **Haptic Feedback** pulses success pattern
* **Feedback Text** displays (e.g., "Correct! Well done.")
* **Feedback Color** shows positive indication (green highlight)
* **Modal** may fade out immediately or after feedback duration
* **Step** progresses or completes based on configuration

### Selecting Incorrect Answer

Trainee presses incorrect answer button:

* **Button** shows press animation
* **Haptic Feedback** pulses error pattern
* **Feedback Text** displays (e.g., "Incorrect. Please try again.")
* **Feedback Color** shows negative indication (red highlight)
* If **Show Correct Answer Hint** enabled:
  * Correct answer button is highlighted
  * Player sees which option was correct
* If **Allow Retry** enabled:
  * Buttons remain interactive for next attempt
  * Modal stays visible
  * Attempt counter increments
* If **Allow Retry** disabled:
  * Modal fades out
  * Step completes or moves to next

### Retrying Answer

If allowed, trainee selects again after incorrect:

* **Button States** reset to default
* **Feedback Text** clears
* Trainee can select any option again
* **Attempt Counter** increments
* Process repeats until correct answer or max attempts reached

### Step Complete

Correct answer selected or max attempts exceeded:

* **Modal** fully hidden with fade animation
* **Overlay** fully faded
* **Feedback Text** clears
* **Step** fires `OnStepEnd` event
* Canvas returns to inactive state
* Learning interaction complete

## Implementation (Inspector Only)

For question modal, **no code required**. Configure entirely in Inspector:

1. **QuestionData** — Question text, answer options, correct answer
2. **QuestionStep** — Data reference, action configuration, retry settings
3. **QuestionModalUI** — Canvas, question text, answer buttons, feedback setup
4. **ModalManager** — Lifecycle management (auto-find)

All components work together automatically through the step lifecycle.

## Troubleshooting

| Issue                                  | Solution                                                                                                                                                       |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Modal not visible**                  | Verify QuestionModalUI Canvas is active and visible; check Canvas sorting order; ensure QuestionStep is assigned QuestionModalUI reference                     |
| **Answer buttons not responding**      | Confirm Answer Button array assigned in QuestionModalUI; verify button callbacks wired to QuestionStep.OnAnswerSelected(); test with cursor visible            |
| **Question text not showing**          | Verify Question Text TextMeshProUGUI assigned; check QuestionData has non-empty question text; ensure text color contrasts with background                     |
| **Feedback not displaying**            | Check **Show Feedback** enabled in QuestionStep; verify Feedback Text component assigned in QuestionModalUI; confirm feedback duration > 0                     |
| **Correct answer not validated**       | Verify QuestionData has one option marked as correct; check button array length matches option count; test with Debug.Log in IsAnswerCorrect()                 |
| **Retry not working**                  | Enable **Allow Retry** in QuestionStep; verify button states reset properly after feedback; check max attempts not exceeded                                    |
| **Wrong button highlighted**           | Verify correctFeedbackColor and incorrectFeedbackColor contrast settings; check button Image components receive color changes; test button highlight animation |
| **Modal overlay blocking interaction** | Reduce overlay opacity or disable **Show Modal Overlay**; ensure overlay Canvas.blocksRaycasts = false for non-blocking behavior                               |
| **Step never completes**               | Verify **Complete On Correct** enabled in QuestionStep; confirm correct answer selected; check attempt limit not exceeded if retry enabled                     |

## Visual Examples

### Scene Setup

<Frame hint="Scene view showing question modal Canvas, answer buttons, overlay layer, and QuestionStep/QuestionModalUI components." caption="Complete Question Modal Scene Setup">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/question-modal-scene-setup.png" alt="Scene with question modal, answer buttons, and overlay" />
</Frame>

### Question and Answer States

<Frame hint="Close-up showing question text, answer buttons in different states: default, hover, selected (correct/incorrect)." caption="Question Modal Answer Button States">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/question-modal-button-states.png" alt="Question modal showing button states and answer selection" />
</Frame>

### Interaction Flow Animation

<Frame hint="Animated sequence showing question appears → user selects answer → feedback shows → modal responds based on correctness." caption="Question Modal Interaction Sequence (Animation)">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/question-modal-interaction-sequence.gif" alt="Complete question modal interaction with answer selection and feedback" />
</Frame>

### Feedback Display

<Frame hint="Modal showing correct/incorrect feedback with color coding and optional correct answer highlight." caption="Question Modal Feedback Display">
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/ptmolcateknologinusantara/images/features/vr/implementation/question-modal-feedback-display.png" alt="Question modal with feedback message and answer highlighting" />
</Frame>

## Related

* [QuestionStep](/vr/steps/question-step) — Question display and answer validation
* [ModalManager](/vr/ui/modal-manager) — Modal lifecycle and management
* [VR UI Widgets](/shared/ui-widgets) — Base UI component library
* [Step lifecycle events](/core/sequence-controller) — OnStepBegin, OnStepEnd event system
* [VR step auxiliaries](/vr/steps/vr-step-auxiliaries) — Integration with scoring, haptics, and info display
* [Step scoring auxiliary](/vr/scoring/step-scoring-auxiliary) — Assessment scoring for answer validation
* [VR player manager](/vr/vr-player-manager) — Disable locomotion during question interaction