Decision point

Live preview

Light background shown; verify against a tinted or dark surface where the component is used that way in course.

Use when / avoid when

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.

Implementation

Type: custom-html-js

Dependencies: Scoped JavaScript for state management; must support multiple instances on one lesson without shared state.

Code

  Decision point
  
What must Principal Sarah do next?
  
Select the most appropriate immediate response.
  

     Ask Mark to keep monitoring Lily and review the available records.
     Call Lily’s mother to discuss the concerns.
  
  

    Check answer
    Reset
  

Classes used: .isq-decision, .isq-options, .isq-option, .isq-decision-actions, .isq-decision-feedback, .isq-visually-hidden

Production stylesheet reference →

Related items

Related patterns: Decision point Feedback

Related components: Scenario stage Callout

Governance metadata