{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "quiz-assessment-runner", "title": "Quiz Assessment Runner", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/quiz-assessment-runner/quiz-assessment-runner.component.ts", "content": "// Interactive multiple-choice exam & quiz assessment runner: 2-column test canvas with\n// real-time countdown timer, question navigator grid with status indicators, code context\n// snippets, single-choice selection cards, submit confirmation modal, and a comprehensive\n// score breakdown with review explanations. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n AlertCircle,\n Check,\n CheckCircle2,\n ChevronLeft,\n ChevronRight,\n Clock,\n FileCode,\n Flag,\n Lightbulb,\n LogOut,\n LucideAngularModule,\n RotateCcw,\n XCircle,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\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 const DEFAULT_QUESTIONS: 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 { id: 'A', text: 'Primitives are pre-compiled npm packages, while Blocks are static JSON schema files.' },\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 { id: 'C', text: 'Primitives can only be rendered server-side, while Blocks require client-side WebSockets.' },\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 { id: 'A', text: 'To comply with ECMAScript dynamic tree-shaking requirements for bundlers.' },\n {\n id: 'B',\n text: 'To prevent Vue SSR circular module dependency deadlocks where $setup.xxxVariants is undefined at runtime.',\n },\n { id: 'C', text: 'Because TypeScript forbids exporting types and constants from the same index file.' },\n { id: 'D', text: 'To enable hot-module replacement specifically for PostCSS variable transformations.' },\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 { id: 'A', text: '@apply tokens.oklch;' },\n { id: 'B', text: '@theme inline' },\n { id: 'C', text: \"@config 'tailwind.theme.ts';\" },\n { id: 'D', text: '@utility theme-variables;' },\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 { id: 'A', text: \"Directly passing v-bind='props' to the template without stripping the class prop.\" },\n {\n id: 'B',\n text: \"Using reactiveOmit(props, 'class') combined with useForwardProps and explicit :class='cn(...)'. \",\n },\n { id: 'C', text: 'Using Object.assign({}, props) inside an onMounted lifecycle hook.' },\n { id: 'D', text: \"Using v-bind='$attrs' with inheritAttrs: true set on the SFC.\" },\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 { id: 'A', text: 'Sub-12px text triggers subpixel antialiasing rendering bugs on macOS WebKit.' },\n {\n id: 'B',\n text: 'Arbitrary micro-text degrades legibility, violates WCAG AA contrast guidelines, and fragments typographic scale discipline.',\n },\n { id: 'C', text: 'Tailwind CSS v4 ignores arbitrary bracket pixel values in production builds.' },\n { id: 'D', text: 'Screen readers automatically skip DOM elements rendered smaller than 12px.' },\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 { id: 'A', text: 'Radix UI Slot primitive forwarded with asChild boolean prop.' },\n { id: 'B', text: 'React cloneElement with recursive prop decoration.' },\n { id: 'C', text: 'Custom Shadow DOM web component injection.' },\n { id: 'D', text: 'Direct DOM mutation through React portal boundaries.' },\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 { id: 'A', text: 'tabular-nums (font-variant-numeric: tabular-nums)' },\n { id: 'B', text: 'font-stretch-condensed' },\n { id: 'C', text: 'tracking-tightest' },\n { id: 'D', text: 'text-balance' },\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 { id: 'A', text: 'Always abstract card lists into a generic primitive.' },\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 { id: 'C', text: 'Never render more than two cards per block layout.' },\n { id: 'D', text: 'All block components must persist their state to IndexedDB storage.' },\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 { id: 'A', text: 'focus:outline-none with no replacement outline or ring.' },\n { id: 'B', text: 'focus-visible:ring-2 focus-visible:ring-ring with visible focus ring tokens.' },\n { id: 'C', text: 'active:scale-95 on all interactive mouse events.' },\n { id: 'D', text: 'hover:border-destructive on standard form input elements.' },\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 { id: 'A', text: 'It publishes private registry tarballs directly to npmjs.com.' },\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 { id: 'C', text: 'It configures Webpack chunk splitting for client-side routing.' },\n { id: 'D', text: 'It generates backend database migration tables automatically.' },\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 type ReviewFilter = 'all' | 'correct' | 'incorrect' | 'flagged'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-quiz-assessment-runner, [ui-quiz-assessment-runner]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"quiz-assessment-runner\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n @if (!isSubmitted()) {\n \n
\n
\n
\n
\n
\n Certification Assessment \n Exam #TS-804 \n
\n

\n TypeScript & Component Architecture Certification Quiz\n

\n
\n
\n
\n \n {{ formattedTime() }}\n remaining\n
\n \n Question {{ currentQuestionIndex() + 1 }} of {{ totalQuestions }}\n \n \n \n Exit Quiz\n \n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n
\n \n {{ currentQuestion().category }}\n \n \n Question {{ currentQuestionIndex() + 1 }} of {{ totalQuestions }}\n \n
\n \n \n {{ flagged().has(currentQuestion().id) ? 'Flagged' : 'Flag for Review' }}\n \n
\n

\n {{ currentQuestion().prompt }}\n

\n
\n\n
\n @if (currentQuestion().codeSnippet) {\n
\n \n
\n \n \n {{ currentQuestion().codeLanguage || 'TypeScript' }}\n \n
\n Context\n
\n {{ currentQuestion().codeSnippet }}\n
\n }\n\n
\n

\n Select the correct answer:\n

\n
\n @for (opt of currentQuestion().options; track opt.id) {\n \n
{{ opt.id }}
\n
\n

{{ opt.text }}

\n
\n @if (answers()[currentQuestion().id] === opt.id) {\n
\n \n
\n }\n
\n }\n
\n
\n
\n\n \n \n \n Previous Question\n \n
\n @if (currentQuestionIndex() === totalQuestions - 1) {\n \n \n Review & Submit\n \n } @else {\n \n }\n
\n
\n \n \n\n \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
\n Exam Progress\n {{ progressPercentage() }}% Complete\n
\n \n
\n \n
\n Questions \n
\n @for (q of questions; track q.id; let idx = $index) {\n \n }\n
\n
\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 Exam\n \n
\n
\n
\n \n } @else {\n
\n \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 {{ scorePercentage() }}% Score · {{ gradeLabel() }}\n

\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
\n
\n Total Score\n
\n {{ correctCount() }}\n / {{ totalQuestions }}\n
\n
{{ scorePercentage() }}% accuracy
\n
\n
\n Result Status\n
\n {{ isPassed() ? 'Passed' : 'Failed' }}\n
\n
Passing threshold: 80%
\n
\n
\n Time Elapsed\n
{{ timeSpentFormatted() }}
\n
18m 42s allocated
\n
\n
\n Flagged Questions\n
{{ flaggedCount() }}
\n
Reviewed items
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n

Answer Review & Explanations

\n

\n Detailed technical breakdown for every question in the assessment.\n

\n
\n
\n \n All ({{ totalQuestions }})\n \n \n Correct ({{ correctCount() }})\n \n \n Incorrect ({{ incorrectCount() }})\n \n \n Flagged ({{ flaggedCount() }})\n \n
\n
\n
\n
\n @for (q of filteredReviewQuestions(); track q.id) {\n
\n
\n
\n Question {{ q.id }} \n {{ q.category }}\n @if (flagged().has(q.id)) {\n \n \n Flagged\n \n }\n
\n \n \n {{\n answers()[q.id] === q.correctOptionId\n ? 'Correct (+10 pts)'\n : answers()[q.id]\n ? 'Incorrect (0 pts)'\n : 'Unanswered (0 pts)'\n }}\n \n
\n

{{ q.prompt }}

\n @if (q.codeSnippet) {\n
\n {{ q.codeSnippet }}\n
\n }\n
\n
\n \n Your Response:\n \n
\n @if (answers()[q.id]) {\n Option {{ answers()[q.id] }}:\n {{ optionText(q, answers()[q.id]!) }}\n } @else {\n No answer submitted\n }\n
\n
\n \n \n Correct Answer:\n \n
\n Option {{ q.correctOptionId }}:\n {{ optionText(q, q.correctOptionId) }}\n
\n
\n
\n
\n
\n \n Architectural Explanation:\n
\n

{{ q.explanation }}

\n
\n
\n }\n
\n
\n Exam ID: 804-FE-UIPKGE \n \n
\n
\n \n }\n\n \n \n \n
\n

Submit Assessment?

\n

Review your completion status before finalizing your submission.

\n
\n
\n
\n
\n Answered\n

{{ answeredCount() }}/{{ totalQuestions }}

\n
\n
\n Flagged\n

{{ flaggedCount() }}

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

\n
\n
\n @if (unansweredCount() > 0) {\n \n \n

\n You have\n {{ unansweredCount() }} unanswered question{{ unansweredCount() === 1 ? '' : 's' }}. Unanswered questions receive 0 points.\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 \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 You have answered {{ answeredCount() }} of {{ totalQuestions }} questions. Exiting now will reset your\n attempt.\n
\n
\n \n \n
\n \n \n `,\n})\nexport class UiQuizAssessmentRunnerComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly Clock = Clock\n protected readonly FileCode = FileCode\n protected readonly Flag = Flag\n protected readonly Lightbulb = Lightbulb\n protected readonly LogOut = LogOut\n protected readonly RotateCcw = RotateCcw\n protected readonly XCircle = XCircle\n protected readonly cn = cn\n\n protected readonly questions = DEFAULT_QUESTIONS\n protected readonly totalQuestions = DEFAULT_QUESTIONS.length\n\n @Input() set initialQuestion(v: number | undefined) {\n const idx = Math.max(0, Math.min((v ?? 1) - 1, this.totalQuestions - 1))\n this.currentQuestionIndex.set(idx)\n }\n @Input() set initialTimeRemaining(v: number | undefined) {\n this.initialBudget = v ?? 1122\n this.timeRemaining.set(v ?? 1122)\n }\n @Input() set initialAnswers(v: Record | undefined) {\n this.answers.set({ ...(v ?? {}) })\n }\n @Input() set initialFlagged(v: number[] | undefined) {\n this.flagged.set(new Set(v ?? []))\n }\n @Input() set initialSubmitted(v: boolean | undefined) {\n this.isSubmitted.set(!!v)\n }\n @Input('class') className?: string\n\n private initialBudget = 1122\n private timer: ReturnType | null = null\n\n readonly currentQuestionIndex = signal(0)\n readonly answers = signal>({})\n readonly flagged = signal>(new Set())\n readonly timeRemaining = signal(1122)\n readonly isSubmitted = signal(false)\n readonly isSubmitDialogOpen = signal(false)\n readonly isExitDialogOpen = signal(false)\n readonly reviewFilter = signal('all')\n\n constructor() {\n const destroyRef = inject(DestroyRef)\n destroyRef.onDestroy(() => this.clearTimer())\n // Start the countdown on the next macrotask so constructor-time input setters land first.\n setTimeout(() => this.startTimer(), 0)\n }\n\n readonly currentQuestion = computed(() => DEFAULT_QUESTIONS[this.currentQuestionIndex()]!)\n readonly answeredCount = computed(() => Object.keys(this.answers()).length)\n readonly flaggedCount = computed(() => this.flagged().size)\n readonly unansweredCount = computed(() => this.totalQuestions - this.answeredCount())\n readonly progressPercentage = computed(() => Math.round((this.answeredCount() / this.totalQuestions) * 100))\n readonly correctCount = computed(\n () => DEFAULT_QUESTIONS.filter((q) => this.answers()[q.id] === q.correctOptionId).length,\n )\n readonly incorrectCount = computed(\n () => DEFAULT_QUESTIONS.filter((q) => this.answers()[q.id] && this.answers()[q.id] !== q.correctOptionId).length,\n )\n readonly scorePercentage = computed(() => Math.round((this.correctCount() / this.totalQuestions) * 100))\n readonly isPassed = computed(() => this.scorePercentage() >= 80)\n readonly gradeLabel = computed(() => {\n const s = this.scorePercentage()\n if (s >= 90) return 'Grade A (Mastery)'\n if (s >= 80) return 'Grade B (Proficient)'\n if (s >= 70) return 'Grade C (Needs Review)'\n return 'Grade F (Did Not Pass)'\n })\n readonly formattedTime = computed(() => {\n const t = Math.max(0, this.timeRemaining())\n return `${String(Math.floor(t / 60)).padStart(2, '0')}:${String(t % 60).padStart(2, '0')}`\n })\n readonly timeSpentFormatted = computed(() => {\n const spent = Math.max(0, this.initialBudget - this.timeRemaining())\n return `${Math.floor(spent / 60)}m ${String(spent % 60).padStart(2, '0')}s`\n })\n readonly filteredReviewQuestions = computed(() => {\n const f = this.reviewFilter()\n if (f === 'correct') return DEFAULT_QUESTIONS.filter((q) => this.answers()[q.id] === q.correctOptionId)\n if (f === 'incorrect') return DEFAULT_QUESTIONS.filter((q) => this.answers()[q.id] !== q.correctOptionId)\n if (f === 'flagged') return DEFAULT_QUESTIONS.filter((q) => this.flagged().has(q.id))\n return DEFAULT_QUESTIONS\n })\n\n get hostClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n get timerPillClass(): string {\n return cn(\n 'flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium shadow-xs transition-colors',\n this.timeRemaining() < 300\n ? 'border-destructive/40 bg-destructive/10 text-destructive'\n : 'border-border bg-muted/50 text-foreground',\n )\n }\n\n get flagButtonClass(): string {\n return cn(\n 'text-xs',\n this.flagged().has(this.currentQuestion().id)\n ? 'border-warning/40 bg-warning/10 text-warning font-semibold'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n optionClass(optionId: string): string {\n return cn(\n 'group relative flex cursor-pointer items-start gap-3.5 rounded-lg border p-3.5 text-left transition-colors sm:p-4',\n 'focus-visible:ring-ring select-none focus-visible:ring-2 focus-visible:outline-none',\n this.answers()[this.currentQuestion().id] === optionId\n ? 'border-primary bg-primary/[0.04] dark:bg-primary/10 ring-primary shadow-xs ring-1'\n : 'border-border bg-card hover:bg-muted/40 hover:border-muted-foreground/30',\n )\n }\n\n optionLetterClass(optionId: string): string {\n return cn(\n 'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-bold transition-colors',\n this.answers()[this.currentQuestion().id] === optionId\n ? 'border-primary bg-primary text-primary-foreground'\n : 'border-border bg-muted/60 text-muted-foreground group-hover:border-foreground/30 group-hover:text-foreground',\n )\n }\n\n navButtonClass(idx: number, qid: number): string {\n return cn(\n 'relative flex size-10 items-center justify-center rounded-lg border text-xs font-semibold tabular-nums transition-colors',\n 'focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',\n idx === this.currentQuestionIndex()\n ? 'border-primary bg-primary/10 text-primary ring-primary font-bold shadow-xs ring-2'\n : this.answers()[qid]\n ? 'border-success/30 bg-success/10 text-success hover:bg-success/20'\n : this.flagged().has(qid)\n ? 'border-warning/30 bg-warning/10 text-warning hover:bg-warning/20'\n : 'border-border bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n reviewCardClass(q: QuizQuestion): string {\n return cn(\n 'space-y-4 rounded-lg border p-4 transition-colors sm:p-5',\n this.answers()[q.id] === q.correctOptionId\n ? 'border-success/30 bg-success/[0.02] bg-success/[0.05]'\n : 'border-destructive/30 bg-destructive/[0.02] dark:bg-destructive/[0.05]',\n )\n }\n\n userAnswerClass(q: QuizQuestion): string {\n return cn(\n 'space-y-1 rounded-md border p-3 text-xs',\n this.answers()[q.id] === q.correctOptionId\n ? 'border-success/30 bg-success/10 text-foreground text-success'\n : 'border-destructive/30 bg-destructive/10 text-destructive',\n )\n }\n\n optionText(q: QuizQuestion, optionId: string): string {\n return q.options.find((o) => o.id === optionId)?.text ?? ''\n }\n\n toggleFlag(questionId: number): void {\n this.flagged.update((prev) => {\n const next = new Set(prev)\n if (next.has(questionId)) next.delete(questionId)\n else next.add(questionId)\n return next\n })\n }\n\n selectOption(optionId: string): void {\n const qid = this.currentQuestion().id\n this.answers.update((prev) => ({ ...prev, [qid]: optionId }))\n }\n\n goToQuestion(index: number): void {\n this.currentQuestionIndex.set(Math.max(0, Math.min(index, this.totalQuestions - 1)))\n }\n\n prevQuestion(): void {\n if (this.currentQuestionIndex() > 0) this.currentQuestionIndex.update((i) => i - 1)\n }\n\n nextQuestion(): void {\n if (this.currentQuestionIndex() < this.totalQuestions - 1) this.currentQuestionIndex.update((i) => i + 1)\n else this.isSubmitDialogOpen.set(true)\n }\n\n submitExam(): void {\n this.isSubmitted.set(true)\n this.isSubmitDialogOpen.set(false)\n this.clearTimer()\n }\n\n retakeQuiz(): void {\n this.answers.set({})\n this.flagged.set(new Set())\n this.timeRemaining.set(this.initialBudget)\n this.currentQuestionIndex.set(0)\n this.isSubmitted.set(false)\n this.reviewFilter.set('all')\n this.clearTimer()\n this.startTimer()\n }\n\n confirmExit(): void {\n this.isExitDialogOpen.set(false)\n this.retakeQuiz()\n }\n\n /** Decrement the clock once — extracted so specs can drive time without fake timers. */\n tick(): void {\n if (this.timeRemaining() > 0) this.timeRemaining.update((t) => t - 1)\n else if (!this.isSubmitted()) {\n this.isSubmitted.set(true)\n this.isSubmitDialogOpen.set(false)\n }\n }\n\n private startTimer(): void {\n this.clearTimer()\n if (this.isSubmitted()) return\n this.timer = setInterval(() => this.tick(), 1000)\n }\n\n private clearTimer(): void {\n if (this.timer) {\n clearInterval(this.timer)\n this.timer = null\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/quiz-assessment-runner/quiz-assessment-runner.component.ts" }, { "path": "packages/registry-angular/blocks/quiz-assessment-runner/index.ts", "content": "export {\n UiQuizAssessmentRunnerComponent,\n DEFAULT_QUESTIONS,\n type QuizOption,\n type QuizQuestion,\n type ReviewFilter,\n} from './quiz-assessment-runner.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/quiz-assessment-runner/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/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" ] }