Decision point
Requires a realistic professional judgement and reveals the reasoning behind the correct response.
ISQ Rise implementation preview
What must Principal Sarah do next?
Select the most appropriate immediate response.
Light background shown; verify against a tinted or dark surface where the component is used that way in course.
Use when / avoid when
Use when
- A genuine professional juncture with credible distractors.
Avoid when
- An obvious answer with implausible distractors — use a native knowledge check for simple recall.
Anatomy
- Eyebrow (“Decision point”)
- Question
- Options (.isq-options / .isq-option, real radio inputs)
- Actions (.isq-decision-actions)
- Feedback (.isq-decision-feedback)
States
Responsive behaviour
Options stack full-width; touch targets remain adequate.
Accessibility
- Real radio inputs, not click handlers on generic elements.
- Selected / correct / incorrect states use text and icon, not colour alone.
- Feedback is announced and placed immediately after the action that revealed it.
- Reset only included where repeating the activity has real learning value.
Current implementation
Theme and platform: ISQ · Articulate Rise
Implementation type: custom-html-js
The classes below belong to the ISQ implementation namespace. A future theme may implement the same component contract with different tokens and class names.
Dependencies: Scoped JavaScript for state management; must support multiple instances on one lesson without shared state.
Code
<div class="isq-decision">
<span class="isq-eyebrow">Decision point</span>
<h2 class="isq-heading isq-heading--h2">What must Principal Sarah do next?</h2>
<p class="isq-body">Select the most appropriate immediate response.</p>
<div class="isq-options">
<label class="isq-option"><input type="radio" name="decision-1"> Ask Mark to keep monitoring Lily and review the available records.</label>
<label class="isq-option"><input type="radio" name="decision-1"> Call Lily’s mother to discuss the concerns.</label>
</div>
<div class="isq-decision-actions">
<button class="isq-button isq-button--primary">Check answer</button>
<button class="isq-button isq-button--light">Reset</button>
</div>
</div>Classes used: .isq-decision, .isq-options, .isq-option, .isq-decision-actions, .isq-decision-feedback, .isq-visually-hidden
Governance metadata
| Owner | Design and development steward |
|---|---|
| Status | Core |
| Version introduced | 1.0.0 |
| Last reviewed | 2026-07 |
| Known limitations | None recorded. |