{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"test-runner","type":"registry:ui","title":"TestRunner","description":"An attempt end to end \u2014 questions, confirm-before-submit, and the result. Renders an ungraded attempt as awaiting grading rather than a failure.","package":"classroom","dependencies":["@particle-academy\/react-fancy"],"registryDependencies":["types"],"files":[{"path":"components\/fancy\/test-runner\/TestRunner.tsx","content":"import { useMemo, useState } from 'react';\r\nimport {\r\n Badge,\r\n Button,\r\n Callout,\r\n Card,\r\n cn,\r\n Heading,\r\n Modal,\r\n Progress,\r\n Text,\r\n} from '@particle-academy\/react-fancy';\r\nimport {\r\n QuestionRenderer,\r\n type AnswerValue,\r\n answerValueToPayload,\r\n} from '.\/QuestionRenderer';\r\nimport type { AnswerInput, Test, TestAttempt } from '..\/types';\r\n\r\nexport interface TestRunnerProps {\r\n test: Test;\r\n onSubmit: (answers: AnswerInput[]) => Promise;\r\n onFinished?: (attempt: TestAttempt) => void;\r\n}\r\n\r\nexport function TestRunner({ test, onSubmit, onFinished }: TestRunnerProps) {\r\n const questions = useMemo(() => test.questions ?? [], [test.questions]);\r\n const [answers, setAnswers] = useState>({});\r\n const [submitting, setSubmitting] = useState(false);\r\n const [result, setResult] = useState(null);\r\n const [error, setError] = useState(null);\r\n const [confirmOpen, setConfirmOpen] = useState(false);\r\n\r\n const answeredCount = Object.values(answers).filter(\r\n (a) => a !== null && a !== undefined,\r\n ).length;\r\n const percent = questions.length\r\n ? Math.round((answeredCount \/ questions.length) * 100)\r\n : 0;\r\n const allAnswered = answeredCount === questions.length && questions.length > 0;\r\n\r\n async function handleSubmit(): Promise {\r\n setConfirmOpen(false);\r\n setSubmitting(true);\r\n setError(null);\r\n try {\r\n const payload: AnswerInput[] = questions.map(\r\n (q) => answerValueToPayload(q.id, answers[q.id] ?? null) as AnswerInput,\r\n );\r\n const attempt = await onSubmit(payload);\r\n setResult(attempt);\r\n onFinished?.(attempt);\r\n } catch (e) {\r\n const message = e instanceof Error ? e.message : String(e);\r\n setError(message);\r\n } finally {\r\n setSubmitting(false);\r\n }\r\n }\r\n\r\n if (result) {\r\n return ;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n
\r\n
\r\n
\r\n \r\n {test.title}\r\n <\/Heading>\r\n {test.description && (\r\n \r\n {test.description}\r\n <\/Text>\r\n )}\r\n <\/div>\r\n
\r\n {test.is_final && (\r\n \r\n Final exam\r\n <\/Badge>\r\n )}\r\n \r\n Pass at {test.passing_score}%\r\n <\/Text>\r\n <\/div>\r\n <\/div>\r\n\r\n
\r\n \r\n
\r\n \r\n {answeredCount} of {questions.length} answered\r\n <\/Text>\r\n \r\n {percent}%\r\n <\/Text>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n
\r\n {questions.map((q, i) => (\r\n \r\n
\r\n \r\n Question {i + 1} of {questions.length}\r\n <\/Text>\r\n \r\n {q.points} pt{q.points === 1 ? '' : 's'}\r\n <\/Badge>\r\n <\/div>\r\n \r\n setAnswers((prev) => ({ ...prev, [q.id]: next }))\r\n }\r\n \/>\r\n <\/Card>\r\n ))}\r\n <\/div>\r\n\r\n {error && (\r\n
\r\n {error}<\/Callout>\r\n <\/div>\r\n )}\r\n\r\n
\r\n \r\n {allAnswered\r\n ? \"You've answered every question.\"\r\n : `${questions.length - answeredCount} question${questions.length - answeredCount === 1 ? '' : 's'} remaining`}\r\n <\/Text>\r\n setConfirmOpen(true)}\r\n className=\"!bg-brand hover:!bg-primary-600 disabled: !text-white !font-semibold !px-6 !py-2.5 !rounded-md !shadow-sm\"\r\n >\r\n {submitting ? 'Submitting\u2026' : 'Submit test'}\r\n <\/Button>\r\n <\/div>\r\n <\/Card>\r\n\r\n setConfirmOpen(false)} size=\"sm\">\r\n \r\n \r\n Submit your answers?\r\n <\/Heading>\r\n \r\n {allAnswered\r\n ? `You've answered all ${questions.length} questions. You can't change your answers after submitting.`\r\n : `You have ${questions.length - answeredCount} unanswered question${questions.length - answeredCount === 1 ? '' : 's'}. Unanswered questions count as zero.`}\r\n <\/Text>\r\n
\r\n setConfirmOpen(false)}\r\n className=\"hover:!text-brand !px-4 !py-2\"\r\n >\r\n Keep working\r\n <\/Button>\r\n \r\n Submit\r\n <\/Button>\r\n <\/div>\r\n <\/Card>\r\n <\/Modal>\r\n <\/>\r\n );\r\n}\r\n\r\nfunction TestResult({ attempt }: { attempt: TestAttempt }) {\r\n const passed = attempt.passed === true;\r\n const pending = attempt.passed === null;\r\n const score = attempt.score !== null ? Number(attempt.score) : null;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n {pending ? '\u2026' : passed ? '\u2713' : '\u2715'}\r\n <\/div>\r\n
\r\n \r\n {pending ? 'Awaiting grading' : passed ? 'You passed!' : 'Did not pass'}\r\n <\/Heading>\r\n \r\n {pending\r\n ? 'Some answers require manual review.'\r\n : passed\r\n ? 'Nice work. Your certificate is being issued.'\r\n : 'Review the material and try again.'}\r\n <\/Text>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n
\r\n \r\n \r\n \r\n <\/div>\r\n <\/Card>\r\n );\r\n}\r\n\r\nfunction Stat({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {\r\n return (\r\n
\r\n \r\n {label}\r\n <\/Text>\r\n \r\n {value}\r\n <\/div>\r\n <\/div>\r\n );\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/test-runner\/TestRunner.tsx"}]}