{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "quiz-assessment-runner",
  "title": "Quiz Assessment Runner",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/quiz-assessment-runner/QuizAssessmentRunner.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\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-vue-next'\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<number, string>\n  initialFlagged?: number[]\n  initialSubmitted?: boolean\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<QuizAssessmentRunnerProps>(), {\n  initialQuestion: 1,\n  initialTimeRemaining: 1122, // 18m 42s\n  initialAnswers: () => ({}),\n  initialFlagged: () => [],\n  initialSubmitted: false,\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 = <Button variant=\"outline\">Save Changes</Button>\\nconst Block = <QuizAssessmentRunner initialQuestion={1} />`,\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 `<name>.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<ButtonProps>()\\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:\\n<span class=\"text-xs uppercase text-muted-foreground\">Status</span>\\n\\n// ✅ Standard-compliant:\\n<span class=\"text-xs font-medium uppercase text-muted-foreground\">Status</span>`,\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<HTMLButtonElement, ButtonProps>(\\n  ({ className, asChild = false, ...props }, ref) => {\\n    const Comp = asChild ? Slot : 'button'\\n    return <Comp ref={ref} className={cn(buttonVariants(), className)} {...props} />\\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: `<div class=\"font-mono text-sm font-semibold tabular-nums text-foreground\">\\n  18:42 remaining\\n</div>`,\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<div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\\n  <Card><CardHeader><CardTitle>Total Revenue</CardTitle></CardHeader>...</Card>\\n  <Card><CardHeader><CardTitle>Active Users</CardTitle></CardHeader>...</Card>\\n</div>`,\n    codeLanguage: 'TSX',\n    options: [\n      {\n        id: 'A',\n        text: 'Always abstract card lists into a generic <StatCard items={data} /> 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 `<name>.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\nconst totalQuestions = defaultQuestions.length\nconst currentQuestionIndex = ref(Math.max(0, Math.min(props.initialQuestion - 1, totalQuestions - 1)))\nconst answers = ref<Record<number, string>>({ ...props.initialAnswers })\nconst flagged = ref<Set<number>>(new Set(props.initialFlagged))\nconst timeRemaining = ref(props.initialTimeRemaining)\nconst isSubmitted = ref(props.initialSubmitted)\nconst isSubmitDialogOpen = ref(false)\nconst isExitDialogOpen = ref(false)\nconst reviewFilter = ref<'all' | 'correct' | 'incorrect' | 'flagged'>('all')\n\nlet timerInterval: ReturnType<typeof setInterval> | null = null\n\nonMounted(() => {\n  if (!isSubmitted.value) {\n    timerInterval = setInterval(() => {\n      if (timeRemaining.value > 0) {\n        timeRemaining.value -= 1\n      } else {\n        if (!isSubmitted.value) {\n          isSubmitted.value = true\n          isSubmitDialogOpen.value = false\n        }\n      }\n    }, 1000)\n  }\n})\n\nonUnmounted(() => {\n  if (timerInterval) {\n    clearInterval(timerInterval)\n  }\n})\n\nconst currentQuestion = computed(() => defaultQuestions[currentQuestionIndex.value])\n\nconst answeredCount = computed(() => Object.keys(answers.value).length)\nconst flaggedCount = computed(() => flagged.value.size)\nconst unansweredCount = computed(() => totalQuestions - answeredCount.value)\nconst progressPercentage = computed(() => Math.round((answeredCount.value / totalQuestions) * 100))\n\nconst correctCount = computed(() => {\n  return defaultQuestions.filter((q) => answers.value[q.id] === q.correctOptionId).length\n})\nconst incorrectCount = computed(() => {\n  return defaultQuestions.filter((q) => answers.value[q.id] && answers.value[q.id] !== q.correctOptionId).length\n})\nconst scorePercentage = computed(() => Math.round((correctCount.value / totalQuestions) * 100))\nconst isPassed = computed(() => scorePercentage.value >= 80)\n\nconst gradeLabel = computed(() => {\n  if (scorePercentage.value >= 90) return 'Grade A (Mastery)'\n  if (scorePercentage.value >= 80) return 'Grade B (Proficient)'\n  if (scorePercentage.value >= 70) return 'Grade C (Needs Review)'\n  return 'Grade F (Did Not Pass)'\n})\n\nconst formattedTime = computed(() => {\n  const mins = Math.floor(Math.max(0, timeRemaining.value) / 60)\n  const secs = Math.max(0, timeRemaining.value) % 60\n  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`\n})\n\nconst timeSpentFormatted = computed(() => {\n  const spent = Math.max(0, props.initialTimeRemaining - timeRemaining.value)\n  const mins = Math.floor(spent / 60)\n  const secs = spent % 60\n  return `${mins}m ${String(secs).padStart(2, '0')}s`\n})\n\nconst filteredReviewQuestions = computed(() => {\n  if (reviewFilter.value === 'correct') {\n    return defaultQuestions.filter((q) => answers.value[q.id] === q.correctOptionId)\n  }\n  if (reviewFilter.value === 'incorrect') {\n    return defaultQuestions.filter((q) => answers.value[q.id] !== q.correctOptionId)\n  }\n  if (reviewFilter.value === 'flagged') {\n    return defaultQuestions.filter((q) => flagged.value.has(q.id))\n  }\n  return defaultQuestions\n})\n\nfunction toggleFlag(questionId: number) {\n  const next = new Set(flagged.value)\n  if (next.has(questionId)) {\n    next.delete(questionId)\n  } else {\n    next.add(questionId)\n  }\n  flagged.value = next\n}\n\nfunction selectOption(optionId: string) {\n  answers.value = {\n    ...answers.value,\n    [currentQuestion.value.id]: optionId,\n  }\n}\n\nfunction goToQuestion(index: number) {\n  currentQuestionIndex.value = Math.max(0, Math.min(index, totalQuestions - 1))\n}\n\nfunction prevQuestion() {\n  if (currentQuestionIndex.value > 0) {\n    currentQuestionIndex.value -= 1\n  }\n}\n\nfunction nextQuestion() {\n  if (currentQuestionIndex.value < totalQuestions - 1) {\n    currentQuestionIndex.value += 1\n  } else {\n    isSubmitDialogOpen.value = true\n  }\n}\n\nfunction submitExam() {\n  isSubmitted.value = true\n  isSubmitDialogOpen.value = false\n  if (timerInterval) {\n    clearInterval(timerInterval)\n  }\n}\n\nfunction retakeQuiz() {\n  answers.value = {}\n  flagged.value = new Set()\n  timeRemaining.value = props.initialTimeRemaining\n  currentQuestionIndex.value = 0\n  isSubmitted.value = false\n  reviewFilter.value = 'all'\n\n  if (timerInterval) {\n    clearInterval(timerInterval)\n  }\n  timerInterval = setInterval(() => {\n    if (timeRemaining.value > 0) {\n      timeRemaining.value -= 1\n    } else {\n      if (!isSubmitted.value) {\n        isSubmitted.value = true\n      }\n    }\n  }, 1000)\n}\n\nfunction confirmExit() {\n  isExitDialogOpen.value = false\n  retakeQuiz()\n}\n</script>\n\n<template>\n  <div data-slot=\"quiz-assessment-runner\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- ================================================================= -->\n    <!-- VIEW 1: ACTIVE QUIZ EXAM RUNNER -->\n    <!-- ================================================================= -->\n    <template v-if=\"!isSubmitted\">\n      <!-- Quiz Top Bar / Header -->\n      <Card class=\"border-border bg-card shadow-xs\">\n        <CardContent class=\"p-4 sm:p-5\">\n          <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Badge variant=\"secondary\" class=\"text-xs font-medium\"> Certification Assessment </Badge>\n                <Badge variant=\"outline\" class=\"text-muted-foreground font-mono text-xs\"> Exam #TS-804 </Badge>\n              </div>\n              <h1 class=\"text-foreground text-base font-bold tracking-tight sm:text-lg\">\n                TypeScript & Component Architecture Certification Quiz\n              </h1>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2.5 sm:gap-3\">\n              <!-- Timer Pill -->\n              <div\n                :class=\"\n                  cn(\n                    'flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium shadow-xs transition-colors',\n                    timeRemaining < 300\n                      ? 'border-destructive/40 bg-destructive/10 text-destructive'\n                      : 'border-border bg-muted/50 text-foreground',\n                  )\n                \"\n              >\n                <Clock class=\"size-3.5 shrink-0\" />\n                <span class=\"font-mono font-semibold tabular-nums\">{{ formattedTime }}</span>\n                <span class=\"text-muted-foreground text-xs\">remaining</span>\n              </div>\n\n              <!-- Question Counter Pill -->\n              <Badge variant=\"outline\" class=\"h-8 px-2.5 text-xs font-medium tabular-nums\">\n                Question {{ currentQuestionIndex + 1 }} of {{ totalQuestions }}\n              </Badge>\n\n              <!-- Exit Button -->\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"text-muted-foreground hover:text-foreground text-xs\"\n                @click=\"isExitDialogOpen = true\"\n              >\n                <LogOut class=\"mr-1.5 size-3.5\" />\n                Exit Quiz\n              </Button>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2-Column Quiz Canvas -->\n      <div class=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n        <!-- Left: Question & Options Card -->\n        <div class=\"space-y-6 lg:col-span-8\">\n          <Card class=\"border-border shadow-xs\">\n            <CardHeader class=\"space-y-3 pb-4\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <div class=\"flex items-center gap-2\">\n                  <Badge variant=\"secondary\" class=\"text-xs font-medium\">\n                    {{ currentQuestion.category }}\n                  </Badge>\n                  <span class=\"text-muted-foreground text-xs font-medium tabular-nums\">\n                    Question {{ currentQuestionIndex + 1 }} of {{ totalQuestions }}\n                  </span>\n                </div>\n\n                <!-- Flag for Review Toggle Button -->\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  :class=\"\n                    cn(\n                      'text-xs',\n                      flagged.has(currentQuestion.id)\n                        ? 'border-warning/40 bg-warning/10 text-warning font-semibold'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"toggleFlag(currentQuestion.id)\"\n                >\n                  <Flag\n                    :class=\"cn('mr-1.5 size-3.5', flagged.has(currentQuestion.id) ? 'fill-warning text-warning' : '')\"\n                  />\n                  {{ flagged.has(currentQuestion.id) ? 'Flagged' : 'Flag for Review' }}\n                </Button>\n              </div>\n\n              <!-- Question Prompt Text -->\n              <CardTitle class=\"text-foreground text-base leading-relaxed font-semibold sm:text-lg\">\n                {{ currentQuestion.prompt }}\n              </CardTitle>\n            </CardHeader>\n\n            <CardContent class=\"space-y-5\">\n              <!-- Code Snippet Box (if available) -->\n              <div\n                v-if=\"currentQuestion.codeSnippet\"\n                class=\"border-border/80 bg-muted/40 dark:bg-muted/20 overflow-hidden rounded-lg border\"\n              >\n                <div\n                  class=\"border-border/70 bg-muted/80 dark:bg-muted/40 flex items-center justify-between border-b px-3.5 py-1.5\"\n                >\n                  <div class=\"flex items-center gap-2\">\n                    <FileCode class=\"text-muted-foreground size-3.5\" />\n                    <span class=\"text-muted-foreground font-mono text-xs font-medium\">\n                      {{ currentQuestion.codeLanguage || 'TypeScript' }}\n                    </span>\n                  </div>\n                  <span class=\"text-muted-foreground font-mono text-xs\">Context</span>\n                </div>\n                <pre\n                  class=\"text-foreground/90 overflow-x-auto p-4 font-mono text-xs leading-relaxed whitespace-pre\"\n                ><code>{{ currentQuestion.codeSnippet }}</code></pre>\n              </div>\n\n              <!-- 4 Radio Option Cards -->\n              <div class=\"space-y-3\">\n                <p class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  Select the correct answer:\n                </p>\n\n                <div class=\"grid gap-2.5\">\n                  <div\n                    v-for=\"opt in currentQuestion.options\"\n                    :key=\"opt.id\"\n                    role=\"button\"\n                    tabindex=\"0\"\n                    :class=\"\n                      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                        answers[currentQuestion.id] === opt.id\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                    @click=\"selectOption(opt.id)\"\n                    @keydown.space.prevent=\"selectOption(opt.id)\"\n                    @keydown.enter.prevent=\"selectOption(opt.id)\"\n                  >\n                    <!-- Letter Circle Badge (A, B, C, D) -->\n                    <div\n                      :class=\"\n                        cn(\n                          'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-bold transition-colors',\n                          answers[currentQuestion.id] === opt.id\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                      {{ opt.id }}\n                    </div>\n\n                    <!-- Option Text -->\n                    <div class=\"flex-1 space-y-0.5\">\n                      <p class=\"text-foreground text-sm leading-relaxed font-medium\">\n                        {{ opt.text }}\n                      </p>\n                    </div>\n\n                    <!-- Selected Check Icon -->\n                    <div v-if=\"answers[currentQuestion.id] === opt.id\" class=\"text-primary mt-0.5 shrink-0\">\n                      <Check class=\"size-4\" />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </CardContent>\n\n            <CardFooter\n              class=\"border-border bg-muted/10 flex flex-wrap items-center justify-between gap-3 border-t p-4 sm:p-5\"\n            >\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                :disabled=\"currentQuestionIndex === 0\"\n                class=\"text-xs\"\n                @click=\"prevQuestion\"\n              >\n                <ChevronLeft class=\"mr-1 size-4\" />\n                Previous Question\n              </Button>\n\n              <div class=\"flex items-center gap-2\">\n                <Button\n                  v-if=\"currentQuestionIndex === totalQuestions - 1\"\n                  variant=\"default\"\n                  size=\"sm\"\n                  class=\"text-xs font-medium\"\n                  @click=\"isSubmitDialogOpen = true\"\n                >\n                  <CheckCircle2 class=\"mr-1.5 size-4\" />\n                  Review & Submit\n                </Button>\n                <Button v-else variant=\"default\" size=\"sm\" class=\"text-xs font-medium\" @click=\"nextQuestion\">\n                  Save & Next\n                  <ChevronRight class=\"ml-1 size-4\" />\n                </Button>\n              </div>\n            </CardFooter>\n          </Card>\n        </div>\n\n        <!-- Right: Question Navigation Sidebar -->\n        <div class=\"space-y-4 lg:sticky lg:top-6 lg:col-span-4\">\n          <Card class=\"border-border shadow-xs\">\n            <CardHeader class=\"pb-3\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"text-sm font-semibold\">Question Navigator</CardTitle>\n                <Badge variant=\"outline\" class=\"font-mono text-xs tabular-nums\">\n                  {{ answeredCount }}/{{ totalQuestions }} done\n                </Badge>\n              </div>\n              <CardDescription class=\"text-xs\"> Jump directly to any question or review status. </CardDescription>\n            </CardHeader>\n\n            <CardContent class=\"space-y-4\">\n              <!-- Progress Bar -->\n              <div class=\"space-y-1.5\">\n                <div class=\"flex items-center justify-between text-xs\">\n                  <span class=\"text-muted-foreground font-medium\">Exam Progress</span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">{{ progressPercentage }}% Complete</span>\n                </div>\n                <Progress :model-value=\"progressPercentage\" class=\"h-2\" />\n              </div>\n\n              <Separator />\n\n              <!-- 10 Question Number Grid -->\n              <div class=\"space-y-2\">\n                <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"> Questions </span>\n\n                <div class=\"grid grid-cols-5 gap-2\">\n                  <button\n                    v-for=\"(q, idx) in defaultQuestions\"\n                    :key=\"q.id\"\n                    type=\"button\"\n                    :class=\"\n                      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 === currentQuestionIndex\n                          ? 'border-primary bg-primary/10 text-primary ring-primary font-bold shadow-xs ring-2'\n                          : answers[q.id]\n                            ? 'border-success/30 bg-success/10 text-success hover:bg-success/20 text-success'\n                            : flagged.has(q.id)\n                              ? 'border-warning/30 bg-warning/10 text-warning hover:bg-warning/20 text-warning'\n                              : 'border-border bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground',\n                      )\n                    \"\n                    @click=\"goToQuestion(idx)\"\n                  >\n                    {{ q.id }}\n\n                    <!-- Mini status indicator on badge -->\n                    <span\n                      v-if=\"flagged.has(q.id) && idx !== currentQuestionIndex\"\n                      class=\"ring-background bg-warning absolute -top-1 -right-1 size-2 rounded-full ring-2\"\n                      title=\"Flagged\"\n                    />\n                  </button>\n                </div>\n              </div>\n\n              <!-- Legend -->\n              <div class=\"border-border/70 bg-muted/30 space-y-2 rounded-lg border p-3 text-xs\">\n                <span class=\"text-foreground font-medium\">Status Legend</span>\n                <div class=\"text-muted-foreground grid grid-cols-2 gap-2\">\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-success size-2 rounded-full\" />\n                    <span>Answered ({{ answeredCount }})</span>\n                  </div>\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-warning size-2 rounded-full\" />\n                    <span>Flagged ({{ flaggedCount }})</span>\n                  </div>\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-primary size-2 rounded-full\" />\n                    <span>Current</span>\n                  </div>\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"bg-muted-foreground/40 size-2 rounded-full\" />\n                    <span>Unanswered ({{ unansweredCount }})</span>\n                  </div>\n                </div>\n              </div>\n\n              <Separator />\n\n              <!-- Submit Button -->\n              <Button\n                variant=\"default\"\n                class=\"h-10 w-full text-xs font-semibold shadow-xs\"\n                @click=\"isSubmitDialogOpen = true\"\n              >\n                <CheckCircle2 class=\"mr-2 size-4\" />\n                Submit Exam\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </template>\n\n    <!-- ================================================================= -->\n    <!-- VIEW 2: QUIZ RESULTS SUMMARY SCREEN -->\n    <!-- ================================================================= -->\n    <template v-else>\n      <div class=\"space-y-6\">\n        <!-- Results Hero Score Card -->\n        <Card class=\"border-border bg-card overflow-hidden shadow-xs\">\n          <div class=\"border-border bg-muted/20 border-b p-6 sm:p-8\">\n            <div class=\"flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between\">\n              <div class=\"space-y-2\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <Badge\n                    :variant=\"isPassed ? 'secondary' : 'outline'\"\n                    :class=\"\n                      isPassed\n                        ? 'border-success/30 bg-success/10 text-success'\n                        : 'bg-destructive/10 text-destructive border-destructive/30'\n                    \"\n                    class=\"text-xs font-semibold\"\n                  >\n                    {{ isPassed ? 'PASSED · CERTIFIED' : 'DID NOT PASS · RETAKE RECOMMENDED' }}\n                  </Badge>\n                  <Badge variant=\"outline\" class=\"text-muted-foreground font-mono text-xs\"> Exam Code #TS-804 </Badge>\n                </div>\n\n                <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n                  <span class=\"font-mono tabular-nums\">{{ scorePercentage }}%</span> Score · {{ gradeLabel }}\n                </h1>\n                <p class=\"text-muted-foreground max-w-xl text-sm\">\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                </p>\n              </div>\n\n              <div class=\"flex shrink-0 items-center gap-3\">\n                <Button variant=\"default\" size=\"sm\" class=\"text-xs font-semibold\" @click=\"retakeQuiz\">\n                  <RotateCcw class=\"mr-1.5 size-3.5\" />\n                  Retake Exam\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          <!-- 4 KPI Summary Cards -->\n          <CardContent class=\"p-6\">\n            <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n              <div class=\"border-border bg-card space-y-1 rounded-lg border p-4\">\n                <span class=\"text-muted-foreground text-xs font-medium\">Total Score</span>\n                <div class=\"text-foreground text-xl font-bold tabular-nums\">\n                  {{ correctCount }}\n                  <span class=\"text-muted-foreground text-sm font-normal\">/ {{ totalQuestions }}</span>\n                </div>\n                <div class=\"text-muted-foreground font-mono text-xs\">{{ scorePercentage }}% accuracy</div>\n              </div>\n\n              <div class=\"border-border bg-card space-y-1 rounded-lg border p-4\">\n                <span class=\"text-muted-foreground text-xs font-medium\">Result Status</span>\n                <div :class=\"cn('text-xl font-bold', isPassed ? 'text-success' : 'text-destructive')\">\n                  {{ isPassed ? 'Passed' : 'Failed' }}\n                </div>\n                <div class=\"text-muted-foreground font-mono text-xs\">Passing threshold: 80%</div>\n              </div>\n\n              <div class=\"border-border bg-card space-y-1 rounded-lg border p-4\">\n                <span class=\"text-muted-foreground text-xs font-medium\">Time Elapsed</span>\n                <div class=\"text-foreground font-mono text-xl font-bold tabular-nums\">\n                  {{ timeSpentFormatted }}\n                </div>\n                <div class=\"text-muted-foreground font-mono text-xs\">18m 42s allocated</div>\n              </div>\n\n              <div class=\"border-border bg-card space-y-1 rounded-lg border p-4\">\n                <span class=\"text-muted-foreground text-xs font-medium\">Flagged Questions</span>\n                <div class=\"text-foreground text-xl font-bold tabular-nums\">\n                  {{ flaggedCount }}\n                </div>\n                <div class=\"text-muted-foreground font-mono text-xs\">Reviewed items</div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Question Review Section -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n              <div>\n                <CardTitle class=\"text-base font-semibold\">Answer Review & Explanations</CardTitle>\n                <CardDescription class=\"text-xs\">\n                  Detailed technical breakdown for every question in the assessment.\n                </CardDescription>\n              </div>\n\n              <!-- Filter Buttons -->\n              <div class=\"flex flex-wrap items-center gap-1.5\">\n                <Button\n                  :variant=\"reviewFilter === 'all' ? 'default' : 'outline'\"\n                  size=\"sm\"\n                  class=\"h-7.5 px-2.5 text-xs\"\n                  @click=\"reviewFilter = 'all'\"\n                >\n                  All ({{ totalQuestions }})\n                </Button>\n                <Button\n                  :variant=\"reviewFilter === 'correct' ? 'default' : 'outline'\"\n                  size=\"sm\"\n                  class=\"h-7.5 px-2.5 text-xs\"\n                  @click=\"reviewFilter = 'correct'\"\n                >\n                  Correct ({{ correctCount }})\n                </Button>\n                <Button\n                  :variant=\"reviewFilter === 'incorrect' ? 'default' : 'outline'\"\n                  size=\"sm\"\n                  class=\"h-7.5 px-2.5 text-xs\"\n                  @click=\"reviewFilter = 'incorrect'\"\n                >\n                  Incorrect ({{ incorrectCount }})\n                </Button>\n                <Button\n                  :variant=\"reviewFilter === 'flagged' ? 'default' : 'outline'\"\n                  size=\"sm\"\n                  class=\"h-7.5 px-2.5 text-xs\"\n                  @click=\"reviewFilter = 'flagged'\"\n                >\n                  Flagged ({{ flaggedCount }})\n                </Button>\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <div\n              v-for=\"q in filteredReviewQuestions\"\n              :key=\"q.id\"\n              :class=\"\n                cn(\n                  'space-y-4 rounded-lg border p-4 transition-colors sm:p-5',\n                  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              <!-- Question Header -->\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <div class=\"flex items-center gap-2\">\n                  <Badge variant=\"outline\" class=\"text-xs font-bold tabular-nums\"> Question {{ q.id }} </Badge>\n                  <Badge variant=\"secondary\" class=\"text-xs\">\n                    {{ q.category }}\n                  </Badge>\n                  <Badge\n                    v-if=\"flagged.has(q.id)\"\n                    variant=\"outline\"\n                    class=\"border-warning/40 bg-warning/10 text-warning text-xs\"\n                  >\n                    <Flag class=\"fill-warning mr-1 size-3\" />\n                    Flagged\n                  </Badge>\n                </div>\n\n                <Badge\n                  :variant=\"answers[q.id] === q.correctOptionId ? 'secondary' : 'outline'\"\n                  :class=\"\n                    answers[q.id] === q.correctOptionId\n                      ? 'border-success/30 bg-success/10 text-success text-xs font-semibold'\n                      : 'bg-destructive/10 text-destructive border-destructive/30 text-xs font-semibold'\n                  \"\n                >\n                  <component :is=\"answers[q.id] === q.correctOptionId ? CheckCircle2 : XCircle\" class=\"mr-1 size-3.5\" />\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                </Badge>\n              </div>\n\n              <!-- Question Prompt -->\n              <p class=\"text-foreground text-sm leading-relaxed font-semibold\">\n                {{ q.prompt }}\n              </p>\n\n              <!-- Optional Context Snippet -->\n              <div\n                v-if=\"q.codeSnippet\"\n                class=\"border-border/80 bg-muted/40 dark:bg-muted/20 overflow-hidden rounded-md border\"\n              >\n                <pre\n                  class=\"text-foreground/80 overflow-x-auto p-3 font-mono text-xs leading-relaxed whitespace-pre\"\n                ><code>{{ q.codeSnippet }}</code></pre>\n              </div>\n\n              <!-- Answer Comparison Cards -->\n              <div class=\"grid gap-2 sm:grid-cols-2\">\n                <!-- User's Answer -->\n                <div\n                  :class=\"\n                    cn(\n                      'space-y-1 rounded-md border p-3 text-xs',\n                      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                  <span class=\"block text-xs font-semibold tracking-wider uppercase opacity-80\"> Your Response: </span>\n                  <div class=\"font-medium\">\n                    <span v-if=\"answers[q.id]\" class=\"mr-1 font-bold\">Option {{ answers[q.id] }}:</span>\n                    <span>\n                      {{ answers[q.id] ? q.options.find((o) => o.id === answers[q.id])?.text : 'No answer submitted' }}\n                    </span>\n                  </div>\n                </div>\n\n                <!-- Correct Answer (shown if incorrect or skipped) -->\n                <div\n                  class=\"border-success/30 bg-success/10 text-foreground text-success space-y-1 rounded-md border p-3 text-xs\"\n                >\n                  <span class=\"block text-xs font-semibold tracking-wider uppercase opacity-80\"> Correct Answer: </span>\n                  <div class=\"font-medium\">\n                    <span class=\"mr-1 font-bold\">Option {{ q.correctOptionId }}:</span>\n                    <span>{{ q.options.find((o) => o.id === q.correctOptionId)?.text }}</span>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Technical Explanation Box -->\n              <div class=\"border-border/80 bg-muted/40 text-muted-foreground space-y-1 rounded-md border p-3 text-xs\">\n                <div class=\"text-foreground flex items-center gap-1.5 font-semibold\">\n                  <Lightbulb class=\"text-primary size-3.5\" />\n                  <span>Architectural Explanation:</span>\n                </div>\n                <p class=\"leading-relaxed\">\n                  {{ q.explanation }}\n                </p>\n              </div>\n            </div>\n          </CardContent>\n\n          <CardFooter class=\"border-border bg-muted/10 flex items-center justify-between border-t p-4 sm:p-5\">\n            <span class=\"text-muted-foreground font-mono text-xs\"> Exam ID: 804-FE-UIPKGE </span>\n            <Button variant=\"default\" size=\"sm\" class=\"text-xs\" @click=\"retakeQuiz\">\n              <RotateCcw class=\"mr-1.5 size-3.5\" />\n              Retake Assessment\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n    </template>\n\n    <!-- ================================================================= -->\n    <!-- DIALOG: CONFIRM EXAM SUBMISSION -->\n    <!-- ================================================================= -->\n    <Dialog v-model:open=\"isSubmitDialogOpen\">\n      <DialogContent class=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle class=\"text-base font-semibold\">Submit Assessment?</DialogTitle>\n          <DialogDescription class=\"text-xs\">\n            Review your completion status before finalizing your submission.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div class=\"space-y-3 py-2 text-xs\">\n          <div class=\"grid grid-cols-3 gap-2 text-center\">\n            <div class=\"border-border bg-muted/40 space-y-0.5 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground\">Answered</span>\n              <p class=\"text-foreground text-base font-bold tabular-nums\">{{ answeredCount }}/{{ totalQuestions }}</p>\n            </div>\n            <div class=\"border-border bg-muted/40 space-y-0.5 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground\">Flagged</span>\n              <p class=\"text-warning text-warning text-base font-bold tabular-nums\">{{ flaggedCount }}</p>\n            </div>\n            <div class=\"border-border bg-muted/40 space-y-0.5 rounded-lg border p-2.5\">\n              <span class=\"text-muted-foreground\">Unanswered</span>\n              <p\n                :class=\"\n                  cn('text-base font-bold tabular-nums', unansweredCount > 0 ? 'text-destructive' : 'text-foreground')\n                \"\n              >\n                {{ unansweredCount }}\n              </p>\n            </div>\n          </div>\n\n          <div\n            v-if=\"unansweredCount > 0\"\n            class=\"border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-3 text-xs\"\n          >\n            <AlertCircle class=\"mt-0.5 size-4 shrink-0\" />\n            <p>\n              You have <strong>{{ unansweredCount }} unanswered question{{ unansweredCount === 1 ? '' : 's' }}</strong\n              >. Unanswered questions receive 0 points.\n            </p>\n          </div>\n\n          <p class=\"text-muted-foreground text-xs\">\n            Once submitted, you will immediately receive your final score and detailed technical explanations.\n          </p>\n        </div>\n\n        <DialogFooter class=\"gap-2 sm:gap-0\">\n          <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"isSubmitDialogOpen = false\">\n            Continue Quiz\n          </Button>\n          <Button variant=\"default\" size=\"sm\" class=\"text-xs font-semibold\" @click=\"submitExam\">\n            Confirm & Submit\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- ================================================================= -->\n    <!-- DIALOG: CONFIRM EXIT -->\n    <!-- ================================================================= -->\n    <Dialog v-model:open=\"isExitDialogOpen\">\n      <DialogContent class=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle class=\"text-base font-semibold\">Exit Assessment?</DialogTitle>\n          <DialogDescription class=\"text-xs\">\n            Are you sure you want to exit? Your answers for this session will be cleared.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div class=\"text-muted-foreground py-2 text-xs\">\n          You have answered {{ answeredCount }} of {{ totalQuestions }} questions. Exiting now will reset your attempt.\n        </div>\n\n        <DialogFooter class=\"gap-2 sm:gap-0\">\n          <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"isExitDialogOpen = false\"> Cancel </Button>\n          <Button variant=\"destructive\" size=\"sm\" class=\"text-xs\" @click=\"confirmExit\"> Exit Quiz </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/QuizAssessmentRunner.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/dialog.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/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"
  ]
}