SaaS control room · Runtime options

Quiz state playground

Select a mode and an option preset, apply the configuration, then exercise the quiz. The configuration panel stays outside the plugin root so it cannot be mistaken for runtime markup.

Scenario

A developer is comparing product requirements before committing configuration to an assessment screen.

User goal: observe how mode and feedback options change interaction state.

Try it

  1. Apply each preset in practice mode and submit a wrong answer.
  2. Switch to exam mode and confirm the effective attempt limit becomes one.
  3. Switch to review mode and inspect the revealed, read-only state.
  4. Watch the runtime readout after selection, checking, reset, and configuration changes.

Demo configuration

These controls belong to the demo shell. Changes take effect only when you activate “Apply configuration.”

Option preset

Guided retry preset applied in practice mode.

Runtime quiz

This form is the complete plugin root. It does not contain or query the configurator above.

Which technique provides a visible keyboard focus indicator?

Choose one answer.

Need a hint?

Look for a selector designed for keyboard-visible focus treatment.

Runtime readout

State
idle
Mode
practice
Attempts
0 / 3
Selected
None
Preset
Guided retry

Accessibility notes

  • The configurator and quiz are separate, labeled forms with independent submit actions.
  • Native radios, select, fieldset, legend, and buttons retain their browser keyboard behavior.
  • Configuration changes and quiz feedback use separate polite status regions.
  • Applying a preset does not move focus; focus stays on the apply button.
  • The readout repeats state as text, and the page has no required motion.
  • Review mode is intentionally read-only; exam mode is behavioral, not secure assessment infrastructure.

Developer notes

The runtime root is #playground-quiz[data-a11y-quiz]. The configurator uses [data-playground-controls] and is never passed to the plugin. 

activeQuiz?.destroy();
quizForm.reset();
activeQuiz = createQuizForm(quizForm, options);

The page imports the built API from ../dist/index.js and package styles from ../dist/styles.css.