Multiple-choice card with a progress bar in the header, stem text, and four lettered option rows.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Education11 } from "@/components/beste/piece/education11";
<Education11
questionIndex={3}
totalQuestions={10}
question="Which hook schedules an effect after the DOM is painted?"
options={[
{
"letter": "A",
"label": "useLayoutEffect",
"state": "idle"
},
{
"letter": "B",
"label": "useEffect",
"state": "selected"
},
{
"letter": "C",
"label": "useMemo",
"state": "idle"
},
{
"letter": "D",
"label": "useDeferredValue",
"state": "idle"
}
]}
/>Quiz outcome card with a trophy tile, pass or fail tint, score fraction, percent, and elapsed time.
Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.
Graded assignment card with a color-tinted letter tile, score fraction, and a clipped feedback excerpt.
Multi-course path card listing numbered steps, per-step hours, and a primary Path tag in the header.
In lesson 6, the dependency array skips the `setCount` setter. Isn't it a stale closure risk?
Student Q&A card with an avatar header, resolved pill, clipped question body, and reply and like counts.
Course assignment card with a violet file tile, status pill, due date, and attachment count footer.