Quiz

Inline knowledge checks with instant feedback or scored mode for tutorials and courses.

For isolated previews, theme switching, and sandbox editing, open the Quiz playground on holydocs.com .

When to use

Use this component when the reader benefits from an active surface such as a form, quiz, chart, or draggable visual.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Instant Feedback

Single question with immediate feedback.

What protocol does HolyDocs use for webhooks?
mdx
<Quiz>  <Question text="What protocol does HolyDocs use for webhooks?">    <Option>REST polling</Option>    <Option correct>HTTP POST callbacks</Option>    <Option>WebSocket</Option>    <Explanation>Webhooks are HTTP POST requests sent to your configured URL when events occur.</Explanation>  </Question></Quiz>

Scored Quiz

Multi-question quiz with score.

Which database does HolyDocs use?
Where are assets stored?
mdx
<Quiz mode="scored">  <Question text="Which database does HolyDocs use?">    <Option correct>D1 (SQLite)</Option>    <Option>PostgreSQL</Option>    <Option>MongoDB</Option>    <Explanation>HolyDocs uses Cloudflare D1, a serverless SQLite database.</Explanation>  </Question>  <Question text="Where are assets stored?">    <Option>S3</Option>    <Option correct>R2</Option>    <Option>Local disk</Option>    <Explanation>R2 is Cloudflare's S3-compatible object storage.</Explanation>  </Question></Quiz>

Props

PropTypeDefaultDescription
modestring'instant'Feedback mode: instant or scored.

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<Quiz>  <Question text="What protocol does HolyDocs use for webhooks?">    <Option>REST polling</Option>    <Option correct>HTTP POST callbacks</Option>    <Option>WebSocket</Option>    <Explanation>Webhooks are HTTP POST requests sent to your configured URL when events occur.</Explanation>  </Question></Quiz>

Tips

  • Explain what changes when a reader interacts with the component. Motion or controls alone should not carry the full meaning.
  • Keep a non-interactive fallback in mind for screenshots, exported docs, and AI-driven readers that only see the resulting HTML.
  • Verify keyboard behavior and focus states whenever the component includes inputs, toggles, or draggable controls.
Color

Visual color swatch with hex value and optional name, useful for design system documentation.

Learn More
Form

Embeddable forms that collect user input and send it via email.

Learn More
Carousel

Embla-style carousel for screenshots, product tours, quotes, and gallery cards with optional autoplay.

Learn More

More

Previous Chart
Next Form
Ask a question... ⌘I