4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T13ad,import { useState } from 'react' import { Card } from '../surface' import { Stack, Row, Spacer } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { RadioGroup } from '../radiogroup' import { Button } from '../Button' import { Progress } from '../progress' import { Badge, Blob } from '../media' import { Icon } from '../Icon' const QUESTIONS = [ { q: 'In claymorphism, what signals that a control is interactive?', options: [ { value: 'a', label: 'A bright colour' }, { value: 'b', label: 'Depth — it looks raised, and presses in' }, { value: 'c', label: 'An underline' }, ], answer: 'b', }, { q: 'Why does 1st-Pouf use ink text on pastel buttons, never white?', options: [ { value: 'a', label: 'White fails WCAG AA on the pastels' }, { value: 'b', label: 'It looked nicer' }, { value: 'c', label: 'The reference required it' }, ], answer: 'a', }, { q: "What does a Segmented option's pressed-in look mean?", options: [ { value: 'a', label: "It's disabled" }, { value: 'b', label: "It's the selected option" }, { value: 'c', label: "It's loading" }, ], answer: 'b', }, { q: 'Why do Stack and Row both set min-width: 0?', options: [ { value: 'a', label: 'So every child is forced to a minimum size' }, { value: 'b', label: "So a child can shrink and truncate instead of overflowing" }, { value: 'c', label: 'It has no visible effect' }, ], answer: 'b', }, { q: "What replaced emoji across 1st-Pouf's icon vocabulary?", options: [ { value: 'a', label: 'A stroked SVG icon set' }, { value: 'b', label: 'Coloured PNGs' }, { value: 'c', label: 'Plain Unicode symbols' }, ], answer: 'a', }, ] /** An example quiz card: progress, five questions, instant right/wrong * feedback per answer, and a scored result screen with a per-question recap * and a restart. */ export function QuizBlock() { const [step, setStep] = useState(0) const [choice, setChoice] = useState('') const [revealed, setRevealed] = useState(false) const [score, setScore] = useState(0) const [history, setHistory] = useState([]) const current = QUESTIONS[Math.min(step, QUESTIONS.length - 1)]! const correct = choice === current.answer const pct = ((step + (revealed ? 1 : 0)) / QUESTIONS.length) * 100 const done = step >= QUESTIONS.length - 1 && revealed function next() { if (!revealed) { setRevealed(true) setHistory((h) => [...h, correct]) if (correct) setScore((s) => s + 1) return } setStep((s) => s + 1) setChoice('') setRevealed(false) } function restart() { setStep(0) setScore(0) setChoice('') setRevealed(false) setHistory([]) } const pctScore = Math.round((score / QUESTIONS.length) * 100) const verdict = pctScore === 100 ? 'Perfect score!' : pctScore >= 60 ? 'Nice work' : 'Keep practising' return (

Question {Math.min(step + 1, QUESTIONS.length)} of {QUESTIONS.length} {score} correct {done ? ( = 60 ? 'trophy' : 'flame'} tone={pctScore >= 60 ? 'yellow' : 'orange'} /> {verdict} You scored {score} of {QUESTIONS.length} ({pctScore}%). {QUESTIONS.map((question, i) => ( {question.q} ))} ) : ( <> {current.q} {revealed && ( {correct ? 'Correct!' : `The answer was "${current.options.find((o) => o.value === current.answer)?.label}".`} )} )}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/icon.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/progress.json","https://1st-pouf.worksonmy.dev/r/radio-group.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/quiz.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/quiz.tsx"}],"className":"h-[70svh] min-h-80"}]]}]