Quiz

01Preview

Choose an option: it answers straight away. Use Next, Back and View results to go through the whole flow. Change the width to see the phone sizes.

import { Quiz } from '@nuton/ui'

const questions = [
  {
    question: 'What best defines Human-Centered Design?',
    options: ['A process focused on aesthetics', 'A design approach that prioritizes user needs', …],
    correctAnswer: 1,
    explanation: 'Human-Centered Design starts from people’s goals…',
  },
  …
]

<Quiz
  questions={questions}
  defaultState={savedState}
  onStateChange={save}
/>

02Installation

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { Quiz, type QuizState } from '@nuton/ui'

const questions = [
  {
    question: 'What best defines Human-Centered Design?',
    options: ['A process focused on aesthetics', 'A design approach that prioritizes user needs'],
    correctAnswer: 1,
    explanation: 'Human-Centered Design starts from people’s goals and behaviours.',
  },
]

<Quiz
  questions={questions}
  defaultState={savedState}          // restore the learner's progress
  onStateChange={(state) => save(state)}
  saveStatus={saveStatus}            // 'idle' | 'saving' | 'saved' | 'failed'
/>

• Use Quiz for the whole flow. It handles answering, locking, feedback, Back and Next, and the results screen.
• Clicking an option answers the question. There is no separate check step, so write options that are clearly different.
• Add an explanation to every question. It turns a wrong answer into learning.
• Save progress with onStateChange and show the request with saveStatus. Restore it with defaultState, or control it with state.
• Add type: 'open' for a written answer. Give it a modelAnswer. Pass evaluate to grade answers in your app or with AI; without it, learners compare with the model answer and mark themselves.
• Use QuizOption or QuizResults on their own only for custom layouts.

04Variants and sizes

Quiz has no visual variants. It fills its container and switches to the live phone sizes when the container is narrower than 480px (a container query, so it also works in side panels).

Lesson column

<Quiz questions={questions} />

Narrow container

<div style={{ inlineSize: 375 }}>
  <Quiz questions={questions} />
</div>

05States and interactions

Quiz states

<Quiz questions={questions} defaultState={{ currentIndex: 0, answers: { 0: 1 }, score: 1, done: false }} />

<Quiz questions={questions} defaultState={{ currentIndex: 1, answers: { 0: 1, 1: 0 }, score: 1, done: false }} />

<Quiz questions={questions} saveStatus="failed" />

Results tiers

Open-ended questions

Figma Quiz 292:13104 has an “Open ended” variant (3009:42182): the question, then a Text Area with “Type your answer here…”. The live quiz has no open questions yet, so marking, loading and error states are code-only. Check answer locks the answer (read-only, still focusable), then it is marked in one of two ways.

<Quiz questions={[{ type: 'open', question, modelAnswer, explanation, guidance, minLength: 20, maxLength: 400 }]} />

const evaluate = async (answer, question, { signal }) => {
  const res = await fetch('/api/grade', { method: 'POST', body: JSON.stringify({ answer, questionId }), signal })
  if (!res.ok) throw new Error('Grading failed')   // shows the error and Try again
  return res.json()                                 // { result: 'correct' | 'partial' | 'incorrect', feedback?: string }
}

<Quiz questions={questions} evaluate={evaluate} />

<Quiz questions={questions} evaluate={evaluate} /> // evaluate rejects once

Option states

Answering a question

1. Next is disabled until the question is answered.
2. Clicking an option (or Enter or Space on it) answers. “Correct!” or “Wrong! The correct answer is B.” is announced politely.
3. All options lock. The right option and the learner's wrong pick get an icon and a caption; the others are dimmed.
4. The feedback title and explanation appear, and the progress bar moves on.
5. Back returns to answered questions, which stay locked. The score counts each question once. Unsent drafts of open answers are kept while the quiz is open.
6. On the last question the button says View results. Retake starts again from question 1.

State tokens

Set on .nu-quiz-option: --nu-quiz-option-bg, -stroke, -fg, -marker-stroke, -marker-bg, -marker-fg, -caption, -radius, -marker-size and -focus-shadow. On .nu-quiz: --nu-quiz-radius, -pad-top, -pad-inline, -pad-bottom, -question-size and -options-gap.

06Composition examples

In a lesson, with saved progress

The live lesson puts a “QUIZ · 4” label and a hatched rule above the card. That label is page markup, not part of Quiz; here it is hidden from screen readers because the quiz region already has a name. Each change is “saved” with a short delay to show the save status.

const [state, setState] = useState<QuizState>(initialQuizState)
const [saveStatus, setSaveStatus] = useState<QuizSaveStatus>('idle')

const save = async (next: QuizState) => {
  setState(next)
  setSaveStatus('saving')
  try { await api.saveQuiz(lessonId, next); setSaveStatus('saved') }
  catch { setSaveStatus('failed') }
}

<div className="lesson-section-label" aria-hidden="true">Quiz · {questions.length}</div>
<Quiz
  aria-label={`Lesson quiz, ${questions.length} questions`}
  questions={questions}
  state={state}
  onStateChange={save}
  saveStatus={saveStatus}
/>

07API reference

Quiz props

QuizOption props

QuizResults props

Accessibility

You must: give each option distinct text, set the right correctAnswer index, and name each quiz when a page has more than one.

Live app mapping

08Guidelines and related components

Do and don't

Related components

• FlashcardRecall practice with a question that flips to its answer.
• ProgressThe bar at the top of the quiz and on the results screen.
• ButtonBack, Next and Retake are Nuton Buttons.
• RadioFor choices that are not right or wrong.