Developer docs lab · Dynamic content

Dynamic quiz refresh lab

Change an enhanced answer set without destroying the quiz instance. Inspect selection migration, focus recovery, rebuilt descriptions, and the refresh lifecycle event.

Quick facts

Method
refresh(options?)
Selection
Opt in with preserveSelection
Announcement
Silent unless the host application announces
Complexity
Linear in managed answers and descriptions

Scenario

A learning platform updates a question after initialization—for example, after an editor changes the available choices or a learner switches content level.

User goal: keep a valid choice when possible and never lose track of keyboard focus.

Try it

  1. Select an answer, then replace every answer while selection preservation is enabled.
  2. Add a distractor and compare the refresh event’s added and removed counts.
  3. Arm one-time removal, focus a radio answer, and change its selection with an arrow key.
  4. Toggle host announcements to compare plugin silence with an application-authored status.

Host application controls

These controls are outside the quiz behavior. They change authored markup first, then call refresh() once after the batch is complete.

The host has not changed the answer set yet. Host announcements are off.

Live dynamic question

The quiz owns its normal result status. The separate host status above describes only application-driven content changes when you explicitly enable it.

When should an application call quiz.refresh()?

Choose one answer.

Need a hint?

The plugin does not observe DOM mutations automatically.

Current state

Answer set
Baseline
Answer count
3
Refresh count
0
Selected
None

Last a11yquiz:refresh event

This inspection log is intentionally not a live region.

No refresh event yet.

Developer notes

const quiz = createQuizForm(form);

answerList.replaceChildren(...nextAnswers);
quiz.refresh({ preserveSelection: true });

onQuizFormEvent(form, quizFormEvents.refresh, ({ detail }) => {
  console.log(detail.selected, detail.added, detail.removed);
});
  • Selection keys combine input type, name, and value; keep them stable and unique.
  • Refresh starts a new run, clears attempts, and rebuilds managed descriptions.
  • Batch changes before refreshing; the package does not install a mutation observer.

Accessibility notes and limitations

  • The authored fieldset, legend, labels, radio buttons, details, and buttons work as a semantic baseline.
  • Retained focus is not moved. If a focused managed control disappears, focus moves to a matching or nearby control.
  • The plugin does not announce refresh. The host announcement switch demonstrates an explicit application decision.
  • Visible text and event values do not rely on color; forced-colors styles remain available.
  • The page has no required motion and respects reduced-motion preferences.
  • Nested quizzes, duplicate selection keys, concurrent mutations, and content sanitization are outside the refresh contract.