Add highlighting what's undone in form

[jaykim1213]

Does this PR close any open issues?

Closes #937
Closes #1205

Give a longer description of what this PR addresses and why it's needed

Add highlighting for unanswered items in a form
Tracks both unanswered required responses and invalid responses (e.g. multiple dropdowns)

Provide pictures/videos of the behavior before and after these changes (optional)

demo-form-elements

Test

• stimulus
• invalid responses (min/max selections not met)
• check answer
• I don't know option

Screen.Recording.2026-04-21.at.11.10.23.PM.mov

Are there any additional TODOs before this PR is ready to go?

TODOs:

• Test with demo-style (make some of the questions required)
• Update relevant documentation
• ...

Discussion

• UI/UX for triggering the validation

[github-actions]

🪓 PR closed, deleted preview.

[Copilot]

Pull request overview

Adds an “unanswered required questions” UX to response forms so participants can quickly see what still needs attention before proceeding.

Changes:

• Introduces showUnanswered flow to display per-question prompts for required-but-empty responses and a total unanswered count message.
• Adds visual highlighting for required unanswered responses in ResponseSwitcher.
• Extends NextButton to notify the parent when Next is attempted while disabled (to trigger highlighting).

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/components/response/utils.ts	Adds requiredAnswerIsEmpty and extends generateErrorMessage with showUnanswered support.
src/components/response/ResponseBlock.tsx	Tracks showUnanswered, computes unanswered count, and shows a summary alert; wires onNextAttempted.
src/components/response/ResponseSwitcher.tsx	Computes unanswered-required state and applies highlight styling; threads showUnanswered to inputs.
src/components/NextButton.tsx	Adds onNextAttempted and changes click handling to allow “attempt” behavior when disabled.
src/components/response/*Input.tsx	Passes showUnanswered through to generateErrorMessage / local required messaging.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jaykim1213]

• enable next button
• test video force completion -> stimulus is not satisfied
• test react component -> stimulus is not satisfied
• test with the training

[Copilot]

Pull request overview

Copilot reviewed 24 out of 24 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 24 out of 24 changed files in this pull request and generated 6 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 26 out of 26 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

tests/test-training-feedback.spec.ts:51

• The helper name exhaustSimpleDropboxIncorrectAttempts/exhaustSimpleDropboxAttemptsWithoutAnswer looks like a typo (“Dropbox” vs “Dropdown”). Renaming to “Dropdown” would make the intent clearer and avoid confusion with the Dropbox product.

async function exhaustSimpleDropboxIncorrectAttempts(page: Page, attempts: number) {
  await page.getByPlaceholder('Choose mark').click();
  await page.getByRole('option', { name: 'Bubble', exact: true }).click();

  const checkAnswerButton = page.getByRole('button', { name: 'Check Answer' });
  for (let i = 0; i < attempts; i += 1) {
    await checkAnswerButton.click();
  }
}

async function exhaustSimpleDropboxAttemptsWithoutAnswer(page: Page, attempts: number) {
  const checkAnswerButton = page.getByRole('button', { name: 'Check Answer' });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.