v2.4Interactive Tooling

Diagnostic Quiz Assessment

Generic scored quiz framework. Four question types (single-select, multi-select, scale, text). Configurable scoring with optional result-tier interpretation. The foundation for specialized assessments.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

AI readiness quiz

How ready is your team for AI tooling?

Three questions. About 90 seconds.

Design-system maturity assessment

Where does your design system stand?

Assess token coverage, component breadth, and documentation quality in three steps.

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
title	string	undefined	Quiz heading shown on the landing screen
description	string	undefined	Supporting copy below the title
questions	Question[]	required	Quiz questions array; supports single-select, multi-select, scale, and text types
resultTiers	ResultTier[]	undefined	Tier definitions for score interpretation ({ minScore, maxScore, title, description, recommendation? })
scoring	(answers) => number	sum of option scores	Custom scoring function; defaults to summing option scores and scale values
onComplete	(result: QuizResult) => void	undefined	Called when the quiz completes with the final score, matched tier, and raw answers
startButtonLabel	string	"Start"	Landing screen button text
nextButtonLabel	string	"Next"	Progress button text
submitButtonLabel	string	"Submit"	Final-question button text
restartButtonLabel	string	"Retake"	Restart button shown on the results screen
showProgress	boolean	true	Show step indicator and progress bar
allowBack	boolean	true	Show back button between questions
className	string	undefined	Extra class applied to the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/diagnostic-quiz-assessment/styles.css">

<!-- Landing screen -->
<section class="dqa" id="my-quiz">
  <h2 class="dqa__title">How ready is your team for AI tooling?</h2>
  <p class="dqa__description">Answer 3 short questions to find out.</p>
  <div class="dqa__actions">
    <button class="dqa__button dqa__button--primary" type="button" id="dqa-start">Start</button>
  </div>
</section>

<!-- Question screen (single-select) -->
<section class="dqa" id="my-quiz" hidden>
  <p class="dqa__progress-label" aria-live="polite">Question 1 of 3</p>
  <div class="dqa__progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="3">
    <div class="dqa__progress-fill" style="width: 33%"></div>
  </div>
  <h2 class="dqa__question">How large is your team?</h2>
  <div class="dqa__options" role="radiogroup">
    <label class="dqa__option">
      <input type="radio" name="team-size" value="solo">
      <span class="dqa__option-label">Just me</span>
    </label>
    <label class="dqa__option">
      <input type="radio" name="team-size" value="small">
      <span class="dqa__option-label">2-10 people</span>
    </label>
  </div>
  <div class="dqa__actions">
    <button class="dqa__button dqa__button--primary" type="button">Next</button>
  </div>
</section>

<script>
  // Replace the JS state machine with your own scoring logic.
  // See the React source for the full single-select / multi-select /
  // scale / text answer collection and defaultScoring implementation.
  document.getElementById('dqa-start').addEventListener('click', function() {
    // advance to first question screen
  });
</script>

Customization

Override these CSS custom properties to integrate the component into your brand.

.dqa {
  --dqa-bg: var(--brand-surface, white);
  --dqa-text-color: var(--brand-ink, #102542);
  --dqa-muted-color: rgba(16, 37, 66, 0.6);
  --dqa-accent: var(--brand-accent, #1e5fcf);
  --dqa-progress-bg: rgba(0, 0, 0, 0.06);
  --dqa-progress-fill: var(--dqa-accent);
  --dqa-option-border: rgba(0, 0, 0, 0.12);
  --dqa-option-bg: white;
  --dqa-option-bg-selected: rgba(30, 95, 207, 0.08);
  --dqa-option-border-selected: var(--dqa-accent);
  --dqa-button-bg: var(--dqa-accent);
  --dqa-button-text: white;
  --dqa-button-bg-hover: color-mix(in srgb, var(--dqa-accent) 90%, black);
  --dqa-radius: 1rem;
  --dqa-section-padding: 2rem;
  --dqa-gap: 1rem;
}