## Quiz Card (S—158)

A multiple-choice question: pick, check, and the right answer is marked with an explanation before Next.

- URL: https://sundaeui.dev/components/quiz-card
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/quiz-card.json`
- Tags: learning, quiz, question, multiple-choice, onboarding, assessment

Choose an option and press Check. The correct option gets a tick, a wrong pick gets a cross, and a short explanation slides in. Next moves to the next question with a progress bar.
At the end it shows the score and lets you retry.

### Usage

```tsx
import { QuizCard } from '@/components/sundae/quiz-card'

<QuizCard />
```

### Props

- `questions` (`{ q: string; options: string[]; answer: number; why?: string }[]`, required): Questions.
- `onComplete` (`(score: number) => void`): Called at the end.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Lessons, onboarding knowledge checks, certifications.

### When not to use

- Surveys with no right answer: use a form.

### Accessibility

- Options are a radiogroup; results use role="status" and say “Correct” or “Incorrect” in text, not just icons.
- Reduced motion removes the movement and keeps every state change.