Quiz Card

A quiz card for courses, campaign pages or product tours. Single-choice questions are judged on the first click; for multiple-choice questions, tick your picks and press Check answer. Once judged, the correct option turns green and a check draws itself inside the circle on the right, wrong picks turn red and shake horizontally, the remaining options fade, and the explanation expands in height. Press Next or Enter and the current question slides out to the left while the next one slides in from the right; a progress bar and a digit-by-digit rolling score sit on top, and after the last question an end screen shows the total, a verdict and each question's result — click any question to review it, or Play again.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<QuizCard/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/quiz-card.en.json

Usage

import { QuizCard } from "@/components/ui/quiz-card";

<QuizCard
  questions={[
    {
      q: "What is the highest mountain in Taiwan?",
      options: ["Xueshan", "Yushan", "Hehuanshan", "Alishan"],
      answer: 1,
      explanation: "Yushan's main peak stands at about 3,952 m.",
    },
    {
      q: "Which of these are outlying islands of Taiwan? (select all)",
      options: ["Penghu", "Kinmen", "Orchid Island", "Okinawa"],
      answer: [0, 1, 2],
    },
  ]}
  allowBack
  onAnswer={(index, correct) => console.log(index, correct)}
  onComplete={(score, total) => console.log(`${score} / ${total}`)}
/>

Props

QuizQuestion

QuizCardLabels

You can also override quiz, multipleHint, keyHint, backToResult, correctTag, wrongTag, resultTitle, review, answeredCorrect, answeredWrong and unanswered; see the JSDoc in the source for details.

How it works

• Colours can be overridden with CSS variables: --wb-quiz-correct (default emerald-500) and --wb-quiz-wrong (default red-500); --wb-quiz-duration is written from duration and drives the progress bar width transition.
• Question changes use AnimatePresence mode="wait" with a direction: moving forward, the question slides out left and the next slides in from the right (spring stiffness 300, damping 30); going back or reviewing reverses it.
• The score rolls digit by digit inside the component: each digit rolls in from below, and only the digit that changed moves.
• shuffleOptions builds the permutation from a deterministic hash, so server and browser render the same order; the A, B, C letters and number keys follow the displayed order.
• Answered questions are locked; with allowBack, or when clicking a question on the end screen, the review shows the recorded result without replaying the animation.

Accessibility

• Single-choice options are role="radiogroup" / role="radio" (roving tabindex), multiple-choice options are role="group" / role="checkbox", with aria-checked for the picked state; Arrow keys, Home and End move between options
• Number keys 1–9 pick the matching option, Enter confirms a multiple-choice answer or moves to the next question; keys pressed while an IME (e.g. Chinese) is composing are ignored
• The result is announced through aria-live="assertive" as “Correct!” or “Not quite — the correct answer is B”
• Correct and wrong are conveyed by check / cross icons and “Correct” / “Wrong” tags as well as colour; the end screen list has screen-reader text for each question
• The top progress bar is role="progressbar"; the rolling score animation is hidden from assistive tech and exposed as plain text instead
• When the user has Reduce motion turned on, wrong picks do not shake, the check appears instantly, and question changes cross-fade