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).
ISQ Rise implementation preview
How confident do you feel?
Rate your current confidence in each area. There are no right or wrong answers.
| 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.
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 to manage save/reset state; must support multiple instances per lesson.
Code
<!-- Illustrative markup drafted from the screenshot and CSS class names — verify against the real exported course before treating as canonical -->
<section class="isq-self-assessment" aria-labelledby="sa-title">
<span class="isq-eyebrow">Self-reflection</span>
<h2 class="isq-heading isq-heading--h2" id="sa-title">How confident do you feel?</h2>
<p class="isq-body--intro">Rate your current confidence in each area. There are no right or wrong answers.</p>
<table class="isq-self-assessment__table">
<caption class="isq-visually-hidden">Confidence self-rating</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Not at all confident</th>
<th scope="col">Somewhat confident</th>
<th scope="col">Confident</th>
<th scope="col">Very confident</th>
</tr>
</thead>
<tbody>
<tr class="isq-self-assessment__row">
<th scope="row"><span class="isq-self-assessment__number">1</span> Understanding your personal reporting obligations</th>
<td><label class="isq-self-assessment__choice"><input class="isq-self-assessment__radio" type="radio" name="sa-1"><span class="isq-visually-hidden">Not at all confident</span></label></td>
<td><label class="isq-self-assessment__choice"><input class="isq-self-assessment__radio" type="radio" name="sa-1"><span class="isq-visually-hidden">Somewhat confident</span></label></td>
<td><label class="isq-self-assessment__choice"><input class="isq-self-assessment__radio" type="radio" name="sa-1"><span class="isq-visually-hidden">Confident</span></label></td>
<td><label class="isq-self-assessment__choice"><input class="isq-self-assessment__radio" type="radio" name="sa-1"><span class="isq-visually-hidden">Very confident</span></label></td>
</tr>
</tbody>
</table>
<div class="isq-self-assessment__actions">
<button class="isq-button isq-button--primary">Save my reflection</button>
<button class="isq-button isq-button--light">Reset</button>
</div>
</section>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
Governance metadata
| Owner | Design and development steward — spec drafted from CSS and screenshot; pending sign-off |
|---|---|
| Status | Course specific |
| Version introduced | 1.0.0 (undocumented until this release) |
| Last reviewed | 2026-07 |
| Known limitations |
|