{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "quiz-assessment-runner", "title": "Quiz Assessment Runner", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/quiz-assessment-runner/QuizAssessmentRunner.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertCircle,\n Check,\n CheckCircle2,\n ChevronLeft,\n ChevronRight,\n Clock,\n FileCode,\n Flag,\n Lightbulb,\n LogOut,\n RotateCcw,\n XCircle,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface QuizOption {\n id: string\n text: string\n}\n\nexport interface QuizQuestion {\n id: number\n category: string\n prompt: string\n codeSnippet?: string\n codeLanguage?: string\n options: QuizOption[]\n correctOptionId: string\n explanation: string\n}\n\nexport interface QuizAssessmentRunnerProps {\n initialQuestion?: number\n initialTimeRemaining?: number\n initialAnswers?: Record\n initialFlagged?: number[]\n initialSubmitted?: boolean\n className?: string\n}\n\nconst defaultQuestions: QuizQuestion[] = [\n {\n id: 1,\n category: 'Architecture',\n prompt:\n 'What is the primary architectural difference between a UI Primitive and a UI Block in the UIPKGE component registry?',\n codeSnippet: `// Primitive (registry:ui) vs Block (registry:block)\\nconst Primitive = \\nconst Block = `,\n codeLanguage: 'TypeScript',\n options: [\n {\n id: 'A',\n text: 'Primitives are pre-compiled npm packages, while Blocks are static JSON schema files.',\n },\n {\n id: 'B',\n text: 'Primitives encapsulate low-level mechanics and styling tokens, while Blocks compose primitives into transparent, copy-pastable domain layouts.',\n },\n {\n id: 'C',\n text: 'Primitives can only be rendered server-side, while Blocks require client-side WebSockets.',\n },\n {\n id: 'D',\n text: 'Primitives require Zod runtime validation schemas, while Blocks only support TypeScript interfaces.',\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'In the UIPKGE architecture, primitives (registry:ui) encapsulate accessibility, focus states, and styling tokens, whereas blocks (registry:block) compose those primitives raw into unabstracted layouts where developers own and customize the code.',\n },\n {\n id: 2,\n category: 'Vue 3.5 SSR',\n prompt:\n 'Why must CVA (Class Variance Authority) variant functions in Vue registry components be placed in a dedicated `.variants.ts` file rather than `index.ts`?',\n codeSnippet: `// button.variants.ts\\nexport const buttonVariants = cva(...)\\n\\n// Button.vue\\nimport { buttonVariants } from './button.variants'\\n\\n// index.ts\\nexport { default as Button } from './Button.vue'\\nexport { buttonVariants } from './button.variants'`,\n codeLanguage: 'TypeScript',\n options: [\n {\n id: 'A',\n text: 'To comply with ECMAScript dynamic tree-shaking requirements for bundlers.',\n },\n {\n id: 'B',\n text: 'To prevent Vue SSR circular module dependency deadlocks where $setup.xxxVariants is undefined at runtime.',\n },\n {\n id: 'C',\n text: 'Because TypeScript forbids exporting types and constants from the same index file.',\n },\n {\n id: 'D',\n text: 'To enable hot-module replacement specifically for PostCSS variable transformations.',\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'Circular imports between Component.vue and index.ts cause runtime evaluation failures during SSR/SSG pre-rendering, resulting in \"$setup.xxxVariants is not a function\" errors.',\n },\n {\n id: 3,\n category: 'Design Tokens',\n prompt: \"Which Tailwind CSS v4 directive establishes the OKLCH design token mapping in UIPKGE's theme layer?\",\n codeSnippet: `@theme inline {\\n --color-background: var(--background);\\n --color-foreground: var(--foreground);\\n --color-primary: var(--primary);\\n --color-card: var(--card);\\n}`,\n codeLanguage: 'CSS',\n options: [\n {\n id: 'A',\n text: '@apply tokens.oklch;',\n },\n {\n id: 'B',\n text: '@theme inline',\n },\n {\n id: 'C',\n text: \"@config 'tailwind.theme.ts';\",\n },\n {\n id: 'D',\n text: '@utility theme-variables;',\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'Tailwind CSS v4 uses `@theme inline` blocks to bind OKLCH CSS variables directly to Tailwind utility classes without needing a separate tailwind.config.js file.',\n },\n {\n id: 4,\n category: 'Reka UI / Vue',\n prompt:\n 'When authoring polymorphic components in Vue 3.5 with Reka UI, which pattern cleanly strips the class prop for `cn()` forwarding?',\n codeSnippet: `const props = defineProps()\\nconst delegatedProps = reactiveOmit(props, 'class')\\nconst forwarded = useForwardProps(delegatedProps)`,\n codeLanguage: 'TypeScript',\n options: [\n {\n id: 'A',\n text: \"Directly passing v-bind='props' to the template without stripping the class prop.\",\n },\n {\n id: 'B',\n text: \"Using reactiveOmit(props, 'class') combined with useForwardProps and explicit :class='cn(...)'.\",\n },\n {\n id: 'C',\n text: 'Using Object.assign({}, props) inside an onMounted lifecycle hook.',\n },\n {\n id: 'D',\n text: \"Using v-bind='$attrs' with inheritAttrs: true set on the SFC.\",\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'reactiveOmit from @vueuse/core strips the class attribute while retaining reactivity, allowing custom class names to merge via cn() on the root element.',\n },\n {\n id: 5,\n category: 'Design Craft',\n prompt:\n 'Why is the sub-12px micro-text rule (avoiding `text-xs`, `text-xs`) strictly enforced in UIPKGE craft standards?',\n codeSnippet: `// ❌ Anti-pattern:\\nStatus\\n\\n// ✅ Standard-compliant:\\nStatus`,\n codeLanguage: 'HTML',\n options: [\n {\n id: 'A',\n text: 'Sub-12px text triggers subpixel antialiasing rendering bugs on macOS WebKit.',\n },\n {\n id: 'B',\n text: 'Arbitrary micro-text degrades legibility, violates WCAG AA contrast guidelines, and fragments typographic scale discipline.',\n },\n {\n id: 'C',\n text: 'Tailwind CSS v4 ignores arbitrary bracket pixel values in production builds.',\n },\n {\n id: 'D',\n text: 'Screen readers automatically skip DOM elements rendered smaller than 12px.',\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'UIPKGE design craft mandates semantic typography starting at text-xs (12px) for badges and metadata to maintain readability and systematic hierarchy across devices.',\n },\n {\n id: 6,\n category: 'React Architecture',\n prompt:\n 'In the React registry mirror, what headless primitive pattern allows consumers to pass custom trigger elements via `asChild`?',\n codeSnippet: `const Button = React.forwardRef(\\n ({ className, asChild = false, ...props }, ref) => {\\n const Comp = asChild ? Slot : 'button'\\n return \\n }\\n)`,\n codeLanguage: 'TSX',\n options: [\n {\n id: 'A',\n text: 'Radix UI Slot primitive forwarded with asChild boolean prop.',\n },\n {\n id: 'B',\n text: 'React cloneElement with recursive prop decoration.',\n },\n {\n id: 'C',\n text: 'Custom Shadow DOM web component injection.',\n },\n {\n id: 'D',\n text: 'Direct DOM mutation through React portal boundaries.',\n },\n ],\n correctOptionId: 'A',\n explanation:\n 'The Radix UI Slot primitive merges props and event listeners directly onto its immediate child, enabling seamless element composition without wrapper DIVs.',\n },\n {\n id: 7,\n category: 'Typography / UX',\n prompt:\n 'Which CSS font utility prevents numerical values like timers, counters, and metrics from causing horizontal layout shift during updates?',\n codeSnippet: `
\\n 18:42 remaining\\n
`,\n codeLanguage: 'HTML',\n options: [\n {\n id: 'A',\n text: 'tabular-nums (font-variant-numeric: tabular-nums)',\n },\n {\n id: 'B',\n text: 'font-stretch-condensed',\n },\n {\n id: 'C',\n text: 'tracking-tightest',\n },\n {\n id: 'D',\n text: 'text-balance',\n },\n ],\n correctOptionId: 'A',\n explanation:\n 'tabular-nums enforces uniform width for numerical glyphs (0-9), preventing visual jitter when numbers change in timers and live feeds.',\n },\n {\n id: 8,\n category: 'Registry Conventions',\n prompt: 'What is the core rule regarding data arrays and tile layout abstractions when authoring UIPKGE blocks?',\n codeSnippet: `// ✅ Allowed in blocks:\\n
\\n Total Revenue...\\n Active Users...\\n
`,\n codeLanguage: 'TSX',\n options: [\n {\n id: 'A',\n text: 'Always abstract card lists into a generic primitive.',\n },\n {\n id: 'B',\n text: 'Blocks must compose primitives raw and top-to-bottom so developers can inspect and edit layout structure directly.',\n },\n {\n id: 'C',\n text: 'Never render more than two cards per block layout.',\n },\n {\n id: 'D',\n text: 'All block components must persist their state to IndexedDB storage.',\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'UIPKGE explicitly bans monolithic StatCard-shaped primitives. Blocks must expose raw primitive composition inline so users have full ownership of the rendered markup.',\n },\n {\n id: 9,\n category: 'Accessibility (a11y)',\n prompt:\n 'Which focus ring class pattern guarantees high-contrast keyboard accessibility without creating persistent outlines on mouse clicks?',\n codeSnippet: `class=\"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none\"`,\n codeLanguage: 'HTML',\n options: [\n {\n id: 'A',\n text: 'focus:outline-none with no replacement outline or ring.',\n },\n {\n id: 'B',\n text: 'focus-visible:ring-2 focus-visible:ring-ring with visible focus ring tokens.',\n },\n {\n id: 'C',\n text: 'active:scale-95 on all interactive mouse events.',\n },\n {\n id: 'D',\n text: 'hover:border-destructive on standard form input elements.',\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'focus-visible only applies the focus ring when keyboard navigation is detected, preserving clean aesthetics on mouse clicks while strictly satisfying WCAG 2.1 criteria.',\n },\n {\n id: 10,\n category: 'Registry Distribution',\n prompt: 'What is the purpose of the `registryDependencies` array in `.registry.ts` item manifests?',\n codeSnippet: `export default defineRegistryItem({\\n name: 'quiz-assessment-runner',\\n type: 'registry:block',\\n registryDependencies: [\\n 'https://uipkge.dev/r/badge.json',\\n 'https://uipkge.dev/r/button.json',\\n 'https://uipkge.dev/r/card.json',\\n ],\\n})`,\n codeLanguage: 'TypeScript',\n options: [\n {\n id: 'A',\n text: 'It publishes private registry tarballs directly to npmjs.com.',\n },\n {\n id: 'B',\n text: 'It instructs shadcn / shadcn-vue CLIs to transitively resolve and copy required UI primitives into the consumer project.',\n },\n {\n id: 'C',\n text: 'It configures Webpack chunk splitting for client-side routing.',\n },\n {\n id: 'D',\n text: 'It generates backend database migration tables automatically.',\n },\n ],\n correctOptionId: 'B',\n explanation:\n 'registryDependencies allows shadcn and shadcn-vue CLI tools to resolve and download all required component dependencies when installing a block.',\n },\n]\n\nexport function QuizAssessmentRunner({\n initialQuestion = 1,\n initialTimeRemaining = 1122,\n initialAnswers = {},\n initialFlagged = [],\n initialSubmitted = false,\n className,\n}: QuizAssessmentRunnerProps) {\n const totalQuestions = defaultQuestions.length\n const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(\n Math.max(0, Math.min(initialQuestion - 1, totalQuestions - 1)),\n )\n const [answers, setAnswers] = React.useState>(initialAnswers)\n const [flagged, setFlagged] = React.useState>(new Set(initialFlagged))\n const [timeRemaining, setTimeRemaining] = React.useState(initialTimeRemaining)\n const [isSubmitted, setIsSubmitted] = React.useState(initialSubmitted)\n const [isSubmitDialogOpen, setIsSubmitDialogOpen] = React.useState(false)\n const [isExitDialogOpen, setIsExitDialogOpen] = React.useState(false)\n const [reviewFilter, setReviewFilter] = React.useState<'all' | 'correct' | 'incorrect' | 'flagged'>('all')\n\n React.useEffect(() => {\n if (isSubmitted) return\n\n const interval = setInterval(() => {\n setTimeRemaining((prev) => {\n if (prev <= 1) {\n clearInterval(interval)\n setIsSubmitted(true)\n setIsSubmitDialogOpen(false)\n return 0\n }\n return prev - 1\n })\n }, 1000)\n\n return () => clearInterval(interval)\n }, [isSubmitted])\n\n const currentQuestion = defaultQuestions[currentQuestionIndex]\n\n const answeredCount = Object.keys(answers).length\n const flaggedCount = flagged.size\n const unansweredCount = totalQuestions - answeredCount\n const progressPercentage = Math.round((answeredCount / totalQuestions) * 100)\n\n const correctCount = React.useMemo(() => {\n return defaultQuestions.filter((q) => answers[q.id] === q.correctOptionId).length\n }, [answers])\n\n const incorrectCount = React.useMemo(() => {\n return defaultQuestions.filter((q) => answers[q.id] && answers[q.id] !== q.correctOptionId).length\n }, [answers])\n\n const scorePercentage = Math.round((correctCount / totalQuestions) * 100)\n const isPassed = scorePercentage >= 80\n\n const gradeLabel = React.useMemo(() => {\n if (scorePercentage >= 90) return 'Grade A (Mastery)'\n if (scorePercentage >= 80) return 'Grade B (Proficient)'\n if (scorePercentage >= 70) return 'Grade C (Needs Review)'\n return 'Grade F (Did Not Pass)'\n }, [scorePercentage])\n\n const formattedTime = React.useMemo(() => {\n const mins = Math.floor(Math.max(0, timeRemaining) / 60)\n const secs = Math.max(0, timeRemaining) % 60\n return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`\n }, [timeRemaining])\n\n const timeSpentFormatted = React.useMemo(() => {\n const spent = Math.max(0, initialTimeRemaining - timeRemaining)\n const mins = Math.floor(spent / 60)\n const secs = spent % 60\n return `${mins}m ${String(secs).padStart(2, '0')}s`\n }, [initialTimeRemaining, timeRemaining])\n\n const filteredReviewQuestions = React.useMemo(() => {\n if (reviewFilter === 'correct') {\n return defaultQuestions.filter((q) => answers[q.id] === q.correctOptionId)\n }\n if (reviewFilter === 'incorrect') {\n return defaultQuestions.filter((q) => answers[q.id] !== q.correctOptionId)\n }\n if (reviewFilter === 'flagged') {\n return defaultQuestions.filter((q) => flagged.has(q.id))\n }\n return defaultQuestions\n }, [reviewFilter, answers, flagged])\n\n const toggleFlag = (questionId: number) => {\n setFlagged((prev) => {\n const next = new Set(prev)\n if (next.has(questionId)) {\n next.delete(questionId)\n } else {\n next.add(questionId)\n }\n return next\n })\n }\n\n const selectOption = (optionId: string) => {\n setAnswers((prev) => ({\n ...prev,\n [currentQuestion.id]: optionId,\n }))\n }\n\n const goToQuestion = (index: number) => {\n setCurrentQuestionIndex(Math.max(0, Math.min(index, totalQuestions - 1)))\n }\n\n const prevQuestion = () => {\n if (currentQuestionIndex > 0) {\n setCurrentQuestionIndex((prev) => prev - 1)\n }\n }\n\n const nextQuestion = () => {\n if (currentQuestionIndex < totalQuestions - 1) {\n setCurrentQuestionIndex((prev) => prev + 1)\n } else {\n setIsSubmitDialogOpen(true)\n }\n }\n\n const submitExam = () => {\n setIsSubmitted(true)\n setIsSubmitDialogOpen(false)\n }\n\n const retakeQuiz = () => {\n setAnswers({})\n setFlagged(new Set())\n setTimeRemaining(initialTimeRemaining)\n setCurrentQuestionIndex(0)\n setIsSubmitted(false)\n setReviewFilter('all')\n }\n\n const confirmExit = () => {\n setIsExitDialogOpen(false)\n retakeQuiz()\n }\n\n return (\n
\n {/* ================================================================= */}\n {/* VIEW 1: ACTIVE QUIZ EXAM RUNNER */}\n {/* ================================================================= */}\n {!isSubmitted ? (\n <>\n {/* Quiz Top Bar / Header */}\n \n \n
\n
\n
\n \n Certification Assessment\n \n \n Exam #TS-804\n \n
\n

\n TypeScript & Component Architecture Certification Quiz\n

\n
\n\n
\n {/* Timer Pill */}\n \n \n {formattedTime}\n remaining\n
\n\n {/* Question Counter Pill */}\n \n Question {currentQuestionIndex + 1} of {totalQuestions}\n \n\n {/* Exit Button */}\n setIsExitDialogOpen(true)}\n >\n \n Exit Quiz\n \n
\n
\n \n \n\n {/* 2-Column Quiz Canvas */}\n
\n {/* Left: Question & Options Card */}\n
\n \n \n
\n
\n \n {currentQuestion.category}\n \n \n Question {currentQuestionIndex + 1} of {totalQuestions}\n \n
\n\n {/* Flag for Review Toggle Button */}\n toggleFlag(currentQuestion.id)}\n >\n \n {flagged.has(currentQuestion.id) ? 'Flagged' : 'Flag for Review'}\n \n
\n\n {/* Question Prompt Text */}\n \n {currentQuestion.prompt}\n \n \n\n \n {/* Code Snippet Box (if available) */}\n {currentQuestion.codeSnippet && (\n
\n
\n
\n \n \n {currentQuestion.codeLanguage || 'TypeScript'}\n \n
\n Context\n
\n 
\n                        {currentQuestion.codeSnippet}\n
\n
\n )}\n\n {/* 4 Radio Option Cards */}\n
\n

\n Select the correct answer:\n

\n\n
\n {currentQuestion.options.map((opt) => {\n const isSelected = answers[currentQuestion.id] === opt.id\n return (\n selectOption(opt.id)}\n onKeyDown={(e) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault()\n selectOption(opt.id)\n }\n }}\n >\n {/* Letter Circle Badge (A, B, C, D) */}\n \n {opt.id}\n
\n\n {/* Option Text */}\n
\n

{opt.text}

\n
\n\n {/* Selected Check Icon */}\n {isSelected && (\n
\n \n
\n )}\n
\n )\n })}\n
\n
\n \n\n \n \n \n Previous Question\n \n\n
\n {currentQuestionIndex === totalQuestions - 1 ? (\n setIsSubmitDialogOpen(true)}\n >\n \n Review & Submit\n \n ) : (\n \n )}\n
\n \n \n \n\n {/* Right: Question Navigation Sidebar */}\n
\n \n \n
\n Question Navigator\n \n {answeredCount}/{totalQuestions} done\n \n
\n Jump directly to any question or review status.\n \n\n \n {/* Progress Bar */}\n
\n
\n Exam Progress\n {progressPercentage}% Complete\n
\n \n
\n\n \n\n {/* 10 Question Number Grid */}\n
\n \n Questions\n \n\n
\n {defaultQuestions.map((q, idx) => {\n const isCurrent = idx === currentQuestionIndex\n const isAnswered = Boolean(answers[q.id])\n const isFlag = flagged.has(q.id)\n\n return (\n goToQuestion(idx)}\n >\n {q.id}\n\n {/* Mini status indicator on badge */}\n {isFlag && !isCurrent && (\n \n )}\n \n )\n })}\n
\n
\n\n {/* Legend */}\n
\n Status Legend\n
\n
\n \n Answered ({answeredCount})\n
\n
\n \n Flagged ({flaggedCount})\n
\n
\n \n Current\n
\n
\n \n Unanswered ({unansweredCount})\n
\n
\n
\n\n \n\n {/* Submit Button */}\n setIsSubmitDialogOpen(true)}\n >\n \n Submit Exam\n \n \n \n
\n \n \n ) : (\n /* ================================================================= */\n /* VIEW 2: QUIZ RESULTS SUMMARY SCREEN */\n /* ================================================================= */\n
\n {/* Results Hero Score Card */}\n \n
\n
\n
\n
\n \n {isPassed ? 'PASSED · CERTIFIED' : 'DID NOT PASS · RETAKE RECOMMENDED'}\n \n \n Exam Code #TS-804\n \n
\n\n

\n {scorePercentage}% Score · {gradeLabel}\n

\n

\n {isPassed\n ? 'Congratulations! You have satisfied the technical competency standards for TypeScript and UIPKGE Component Architecture.'\n : 'You scored below the 80% certification threshold. Review the explanations below and retake the assessment when ready.'}\n

\n
\n\n
\n \n
\n
\n
\n\n {/* 4 KPI Summary Cards */}\n \n
\n
\n Total Score\n
\n {correctCount} / {totalQuestions}\n
\n
{scorePercentage}% accuracy
\n
\n\n
\n Result Status\n
\n {isPassed ? 'Passed' : 'Failed'}\n
\n
Passing threshold: 80%
\n
\n\n
\n Time Elapsed\n
{timeSpentFormatted}
\n
18m 42s allocated
\n
\n\n
\n Flagged Questions\n
{flaggedCount}
\n
Reviewed items
\n
\n
\n \n \n\n {/* Question Review Section */}\n \n \n
\n
\n Answer Review & Explanations\n \n Detailed technical breakdown for every question in the assessment.\n \n
\n\n {/* Filter Buttons */}\n
\n setReviewFilter('all')}\n >\n All ({totalQuestions})\n \n setReviewFilter('correct')}\n >\n Correct ({correctCount})\n \n setReviewFilter('incorrect')}\n >\n Incorrect ({incorrectCount})\n \n setReviewFilter('flagged')}\n >\n Flagged ({flaggedCount})\n \n
\n
\n \n\n \n {filteredReviewQuestions.map((q) => {\n const isCorrect = answers[q.id] === q.correctOptionId\n const isFlag = flagged.has(q.id)\n\n return (\n \n {/* Question Header */}\n
\n
\n \n Question {q.id}\n \n \n {q.category}\n \n {isFlag && (\n \n \n Flagged\n \n )}\n
\n\n \n {isCorrect ? : }\n {isCorrect ? 'Correct (+10 pts)' : answers[q.id] ? 'Incorrect (0 pts)' : 'Unanswered (0 pts)'}\n \n
\n\n {/* Question Prompt */}\n

{q.prompt}

\n\n {/* Optional Context Snippet */}\n {q.codeSnippet && (\n
\n 
\n                          {q.codeSnippet}\n
\n
\n )}\n\n {/* Answer Comparison Cards */}\n
\n {/* User's Answer */}\n \n \n Your Response:\n \n
\n {answers[q.id] ? (\n <>\n Option {answers[q.id]}:\n {q.options.find((o) => o.id === answers[q.id])?.text}\n \n ) : (\n 'No answer submitted'\n )}\n
\n
\n\n {/* Correct Answer */}\n
\n \n Correct Answer:\n \n
\n Option {q.correctOptionId}:\n {q.options.find((o) => o.id === q.correctOptionId)?.text}\n
\n
\n
\n\n {/* Technical Explanation Box */}\n
\n
\n \n Architectural Explanation:\n
\n

{q.explanation}

\n
\n \n )\n })}\n \n\n \n Exam ID: 804-FE-UIPKGE\n \n \n \n \n )}\n\n {/* ================================================================= */}\n {/* DIALOG: CONFIRM EXAM SUBMISSION */}\n {/* ================================================================= */}\n \n \n \n Submit Assessment?\n \n Review your completion status before finalizing your submission.\n \n \n\n
\n
\n
\n Answered\n

\n {answeredCount}/{totalQuestions}\n

\n
\n
\n Flagged\n

{flaggedCount}

\n
\n
\n Unanswered\n 0 ? 'text-destructive' : 'text-foreground',\n )}\n >\n {unansweredCount}\n

\n
\n
\n\n {unansweredCount > 0 && (\n
\n \n

\n You have{' '}\n \n {unansweredCount} unanswered question{unansweredCount === 1 ? '' : 's'}\n \n . Unanswered questions receive 0 points.\n

\n
\n )}\n\n

\n Once submitted, you will immediately receive your final score and detailed technical explanations.\n

\n
\n\n \n \n \n \n \n \n\n {/* ================================================================= */}\n {/* DIALOG: CONFIRM EXIT */}\n {/* ================================================================= */}\n \n \n \n Exit Assessment?\n \n Are you sure you want to exit? Your answers for this session will be cleared.\n \n \n\n
\n You have answered {answeredCount} of {totalQuestions} questions. Exiting now will reset your attempt.\n
\n\n \n \n \n \n \n \n \n )\n}\n\nexport default QuizAssessmentRunner\n", "type": "registry:block", "target": "~/components/blocks/QuizAssessmentRunner.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Interactive multiple-choice exam & quiz assessment runner: 2-column test canvas with real-time countdown timer, question navigator grid with status indicators (completed, active, flagged, unanswered), syntax-highlighted code snippets, single-choice selection cards, submit confirmation modal, and comprehensive score breakdown with review explanations.", "categories": [ "education", "app" ] }