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"
}
]}
/>