Developer docs lab · Scoring comparison

Multiple-answer scoring lab

Test the same checkbox question with exact and partial scoring. The matched content makes the scoring rule—not the question—the only meaningful variable.

Scenario

A course author must choose whether learners need the complete answer set or can demonstrate useful partial knowledge without selecting a wrong answer.

User goal: compare both scoring rules with identical selections.

Try it

  1. Select only “Visible label” in both quizzes, then check each answer.
  2. Reset and select all three correct answers to see both modes pass.
  3. Select any correct answer plus “Placeholder-only label” to see both modes fail.
  4. Use Tab and Space to complete the comparison without a pointer.

Side-by-side scoring

Partial mode accepts a non-empty subset only when every selected answer is correct. It does not award a correct result when a wrong option is included. All-or-nothing is a compatibility alias of exact mode, so these two quizzes cover every distinct rule.

Exact scoring
Which practices give a form control an accessible name?

Choose all three correct answers.

Partial scoring
Which practices give a form control an accessible name?

Choose one or more correct answers and no incorrect answers.

Accessibility notes

  • Native fieldsets, legends, labels, checkboxes, and buttons provide the baseline interaction.
  • Tab moves among controls and Space toggles a focused checkbox.
  • Visible text and live status updates communicate results without relying on color.
  • Focus remains in the current form; no focus is forced into result text.
  • The layout has no required motion and supports forced-colors styling from the package CSS.
  • Partial scoring reports a correct result, not a numeric score or percentage.

Developer notes

Each root uses [data-a11y-quiz]. Answer cards use .a11y-quiz__answer, inputs use .a11y-quiz__input, and correct cards carry data-correct="true". 

createQuizForm(exactForm, { scoringMode: "exact" });
createQuizForm(partialForm, { scoringMode: "partial" });

The page imports ../dist/index.js and ../dist/styles.css.