Skip to content

← Components

Scenario component

Self-assessment

A structured confidence or knowledge self-rating table — the learner rates each statement against a shared scale (e.g. Not at all confident → Very confident).

course specific Version introduced: 1.0.0 (undocumented until this release) Platforms: Rise Owner: Design and development steward — spec drafted from CSS and screenshot; pending sign-off
Course specific. Built for a specialised need and not yet generalised. Do not reuse without review.

Live preview

Rendered with production Rise CSS
Self-reflection

How confident do you feel?

Rate your current confidence in each area. There are no right or wrong answers.

Confidence self-rating
Not at all confident Somewhat confident Confident Very confident
1 Understanding your personal reporting obligations

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 short set of statements benefits from a consistent, comparable rating scale, typically at the close of a section as a reflective checkpoint.

Avoid when

  • A single reflective prompt — use the native reflection block instead.
  • As a graded or assessed instrument — this component is explicitly framed as having no right or wrong answers.

Anatomy

  • Header (eyebrow “Self-reflection”, heading, short intro)
  • Column headers naming each scale point
  • Numbered rows, each pairing a statement with radio options across the scale (.isq-self-assessment__row / __table)
  • Actions: save and reset (.isq-self-assessment__actions)

States

Responsive behaviour

The scale table is the component most at risk on narrow screens — columns of radio buttons do not fit a 375px viewport without horizontal scrolling or restructuring. Recommend a per-row accordion or stacked-scale layout on mobile (see Known limitations); this has not yet been confirmed against the published output.

Accessibility

  • Each row must be a fieldset with a legend naming the statement; each scale point must be a real radio input with a visible, associated text label — never an unlabelled circle.
  • The numbered badge (1, 2…) is decorative and must not be the only way the statement is identified to assistive technology.
  • “Save my reflection” must confirm the save state to the user (e.g. a status region), and “Reset” must not silently clear a response without confirmation given there is explicit save action.

Implementation

Type: custom-html-js

Dependencies: Scoped JavaScript to manage save/reset state; must support multiple instances per lesson.

Code

HTML

Self-reflection

How confident do you feel?

Rate your current confidence in each area. There are no right or wrong answers.

Confidence self-rating
Not at all confident Somewhat confident Confident Very confident
1 Understanding your personal reporting obligations

Classes used: .isq-self-assessment, .isq-self-assessment__actions, .isq-self-assessment__body, .isq-self-assessment__choice, .isq-self-assessment__corner, .isq-self-assessment__feedback, .isq-self-assessment__intro, .isq-self-assessment__mobile-scale, .isq-self-assessment__number, .isq-self-assessment__prompt, .isq-self-assessment__radio, .isq-self-assessment__row, .isq-self-assessment__scale-label, .isq-self-assessment__table

Production stylesheet reference →

Related items

Related patterns: Reflection

Related components: Decision point

Governance metadata

OwnerDesign and development steward — spec drafted from CSS and screenshot; pending sign-off
StatusCourse specific
Version introduced1.0.0 (undocumented until this release)
Last reviewed2026-07
Known limitations
  • This component ships in the production CSS (14 classes) and in the live Child Protection course but appears in none of the six source documents. This entry is a first specification drafted from the class names, the supplied screenshot and standard accessible-rating-table practice — it has not been verified against the actual rendered markup or tested for keyboard/mobile behaviour, and should be confirmed against a real exported course before its status is upgraded from Course-specific.