Brickslab.Toolsv2.1.1

@brickslab./ui-webQuiz

Post-quiz result card with score ring, badges, and recommendations in compact or detailed mode.

Compact

78%
78/100 pts
Completed in 4m 5s
3/7/2026
Achievements
⚡Speed demon
🏆High scorer

Detailed

78%
78/100 pts
Completed in 4m 5s
3/7/2026
Achievements
⚡Speed demon
🏆High scorer
Recommendations
Review chapter 3You missed 3 questions on this topic.
Practice set BStrengthen your weak areas.

Low score

32%
32/100 pts
Completed in 7m 0s

Props

PropTypeDéfautRequisDescription
resultQuizResult—✓Result data: score, maxScore, percent, timeSpent, badges, recommendations.
variant"compact" | "detailed""compact"—Compact shows score + badges. Detailed also shows recommendations.
showAnswersbooleanfalse—Reserved — triggers answer review integration.
onRetake() => void——Shows a Retake quiz button when provided.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  result={...}
  variant="compact"
  showAnswers={false}
  onRetake={...}
/>
resultvariantshowAnswersonRetake

Usage

tsx
import { QuizResultSummary } from "@brickslab./ui-web";

<QuizResultSummary
  result={{
    score: 78,
    maxScore: 100,
    timeSpent: 245,
    badges: [{ id: "b1", label: "High scorer", icon: "🏆" }],
    recommendations: [{ label: "Review chapter 3" }],
  }}
  variant="detailed"
  onRetake={() => resetQuiz()}
/>