@thanh01.pmt/interactive-quiz-kit 1.0.21 → 1.0.23

package/dist/player.js

@@ -1,8 +1,12 @@
-import * as React25 from 'react';
-import React25__default, { useRef, useState, useImperativeHandle, useCallback, useEffect, forwardRef, useMemo } from 'react';
+import * as React28 from 'react';
+import React28__default, { useRef, useState, useImperativeHandle, useCallback, useEffect, forwardRef, useMemo } from 'react';
 import ReactDOM from 'react-dom/client';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { genkit } from 'genkit';
+import { gemini20Flash, googleAI } from '@genkit-ai/googleai';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle, Check, ChevronDown, ChevronUp, CheckCircle, XCircle, RotateCcw, BarChart2, Clock, Percent, AlertTriangle, LogOut, Loader2, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Circle, Check, ChevronDown, ChevronUp, Loader2, Play, CheckCircle, XCircle, RotateCcw, BarChart2, Clock, Percent, AlertTriangle, LogOut, Wand2, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -15,6 +19,11 @@ import rehypeKatex from 'rehype-katex';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import CodeMirror from '@uiw/react-codemirror';
+import { cpp } from '@codemirror/lang-cpp';
+import { javascript } from '@codemirror/lang-javascript';
+import { python } from '@codemirror/lang-python';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -298,6 +307,847 @@ var SCORMService = class {
   }
 };
 
+// src/services/evaluators/multiple-choice-evaluator.ts
+var MultipleChoiceEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    const correctAnswerId = question.correctAnswerId;
+    const isCorrect = answer === correctAnswerId;
+    const correctOption = question.options.find((opt) => opt.id === correctAnswerId);
+    const correctAnswerDetail = {
+      id: correctAnswerId,
+      value: (correctOption == null ? void 0 : correctOption.text) || ""
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/multiple-response-evaluator.ts
+var MultipleResponseEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    const correctAnswerIds = question.correctAnswerIds;
+    let isCorrect = false;
+    if (Array.isArray(answer)) {
+      const userAnswerSet = new Set(answer);
+      const correctAnswerSet = new Set(correctAnswerIds);
+      isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
+    }
+    const correctValues = correctAnswerIds.map(
+      (id) => {
+        var _a2;
+        return ((_a2 = question.options.find((opt) => opt.id === id)) == null ? void 0 : _a2.text) || "";
+      }
+    );
+    const correctAnswerDetail = {
+      id: correctAnswerIds,
+      value: correctValues
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/true-false-evaluator.ts
+var TrueFalseEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    const correctAnswer = question.correctAnswer;
+    let userAnswer = answer;
+    if (typeof answer === "string") {
+      userAnswer = answer.toLowerCase() === "true";
+    }
+    const isCorrect = typeof userAnswer === "boolean" && userAnswer === correctAnswer;
+    const correctAnswerDetail = {
+      id: null,
+      value: correctAnswer
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/short-answer-evaluator.ts
+var ShortAnswerEvaluator = class {
+  async evaluate(question, answer) {
+    var _a, _b;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (typeof answer === "string") {
+      const userAnswerTrimmed = answer.trim();
+      const caseSensitive = (_b = question.isCaseSensitive) != null ? _b : false;
+      isCorrect = question.acceptedAnswers.some(
+        (accAns) => caseSensitive ? accAns.trim() === userAnswerTrimmed : accAns.trim().toLowerCase() === userAnswerTrimmed.toLowerCase()
+      );
+    }
+    const correctAnswerDetail = {
+      id: null,
+      value: question.acceptedAnswers
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/numeric-evaluator.ts
+var NumericEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (typeof answer === "string" || typeof answer === "number") {
+      const userAnswerNum = parseFloat(String(answer));
+      if (!isNaN(userAnswerNum)) {
+        isCorrect = question.tolerance != null ? Math.abs(userAnswerNum - question.answer) <= question.tolerance : userAnswerNum === question.answer;
+      }
+    }
+    const correctAnswerDetail = {
+      id: null,
+      value: question.answer
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/sequence-evaluator.ts
+var SequenceEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (Array.isArray(answer) && answer.length === question.correctOrder.length) {
+      isCorrect = answer.every((itemId, index) => itemId === question.correctOrder[index]);
+    }
+    const correctValues = question.correctOrder.map(
+      (id) => {
+        var _a2;
+        return ((_a2 = question.items.find((item) => item.id === id)) == null ? void 0 : _a2.content) || "";
+      }
+    );
+    const correctAnswerDetail = {
+      id: question.correctOrder,
+      value: correctValues
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/matching-evaluator.ts
+var MatchingEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
+      const userAnswerMap = answer;
+      isCorrect = question.correctAnswerMap.length === Object.keys(userAnswerMap).length && question.correctAnswerMap.every((map) => userAnswerMap[map.promptId] === map.optionId);
+    }
+    const correctMap = question.correctAnswerMap.reduce((acc, curr) => {
+      var _a2, _b;
+      const promptText = ((_a2 = question.prompts.find((p) => p.id === curr.promptId)) == null ? void 0 : _a2.content) || "";
+      const optionText = ((_b = question.options.find((o) => o.id === curr.optionId)) == null ? void 0 : _b.content) || "";
+      acc[promptText] = optionText;
+      return acc;
+    }, {});
+    const correctAnswerDetail = {
+      id: null,
+      value: correctMap
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/fill-in-the-blanks-evaluator.ts
+var FillInTheBlanksEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
+      const userAnswerMap = answer;
+      isCorrect = question.answers.length > 0 && question.answers.every((correctAnsDef) => {
+        var _a2, _b;
+        const userValForBlank = (_a2 = userAnswerMap[correctAnsDef.blankId]) == null ? void 0 : _a2.trim();
+        if (userValForBlank === void 0) return false;
+        const caseSensitive = (_b = question.isCaseSensitive) != null ? _b : false;
+        return correctAnsDef.acceptedValues.some(
+          (accVal) => caseSensitive ? accVal.trim() === userValForBlank : accVal.trim().toLowerCase() === userValForBlank.toLowerCase()
+        );
+      });
+    }
+    const correctMap = question.answers.reduce((acc, curr) => {
+      acc[curr.blankId] = curr.acceptedValues.join(" | ");
+      return acc;
+    }, {});
+    const correctAnswerDetail = {
+      id: null,
+      value: correctMap
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/drag-and-drop-evaluator.ts
+var DragAndDropEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
+      const userAnswerMap = answer;
+      isCorrect = question.answerMap.length === Object.keys(userAnswerMap).length && question.answerMap.every((map) => userAnswerMap[map.draggableId] === map.dropZoneId);
+    }
+    const correctMap = question.answerMap.reduce((acc, curr) => {
+      var _a2, _b;
+      const draggableText = ((_a2 = question.draggableItems.find((d) => d.id === curr.draggableId)) == null ? void 0 : _a2.content) || "";
+      const dropZoneText = ((_b = question.dropZones.find((z3) => z3.id === curr.dropZoneId)) == null ? void 0 : _b.label) || "";
+      acc[draggableText] = dropZoneText;
+      return acc;
+    }, {});
+    const correctAnswerDetail = {
+      id: null,
+      value: correctMap
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/hotspot-evaluator.ts
+var HotspotEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (Array.isArray(answer)) {
+      const userAnswerSet = new Set(answer);
+      const correctAnswerSet = new Set(question.correctHotspotIds);
+      isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
+    }
+    const correctValues = question.correctHotspotIds.map(
+      (id) => {
+        var _a2;
+        return ((_a2 = question.hotspots.find((h) => h.id === id)) == null ? void 0 : _a2.description) || id;
+      }
+    );
+    const correctAnswerDetail = {
+      id: question.correctHotspotIds,
+      value: correctValues
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/services/evaluators/programming-evaluator.ts
+var ProgrammingEvaluator = class {
+  async evaluate(question, answer) {
+    var _a, _b;
+    const points = (_a = question.points) != null ? _a : 0;
+    let isCorrect = false;
+    if (typeof answer === "string" && typeof question.solutionGeneratedCode === "string") {
+      if (typeof window !== "undefined" && ((_b = window.Blockly) == null ? void 0 : _b.JavaScript)) {
+        const LocalBlockly = window.Blockly;
+        let generatedUserCode = "";
+        try {
+          const tempWorkspace = new LocalBlockly.Workspace();
+          const dom = LocalBlockly.Xml.textToDom(answer);
+          LocalBlockly.Xml.domToWorkspace(dom, tempWorkspace);
+          generatedUserCode = LocalBlockly.JavaScript.workspaceToCode(tempWorkspace) || "";
+          const normalize = (code) => code.replace(/\s+/g, " ").trim();
+          isCorrect = normalize(generatedUserCode) === normalize(question.solutionGeneratedCode);
+          tempWorkspace.dispose();
+        } catch (e) {
+          console.error(`Error generating code from user's ${question.questionType} XML for evaluation:`, e);
+          isCorrect = false;
+        }
+      } else {
+        console.warn(`Blockly library not available for ${question.questionType} evaluation. Skipping code comparison.`);
+        isCorrect = false;
+      }
+    }
+    const correctAnswerDetail = {
+      id: null,
+      value: question.solutionGeneratedCode || ""
+    };
+    return Promise.resolve({
+      isCorrect,
+      correctAnswer: correctAnswerDetail,
+      pointsEarned: isCorrect ? points : 0
+    });
+  }
+};
+
+// src/utils/jsonUtils.ts
+var JsonRepairEngine = class {
+  /**
+   * Attempts to repair unterminated strings in JSON.
+   * NOTE: This is a heuristic approach and may not be perfect for all cases.
+   */
+  static repairUnterminatedStrings(jsonStr) {
+    let repaired = jsonStr;
+    let inString = false;
+    let escaped = false;
+    let lastQuoteIndex = -1;
+    for (let i = 0; i < repaired.length; i++) {
+      const char = repaired[i];
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        escaped = true;
+        continue;
+      }
+      if (char === '"') {
+        inString = !inString;
+        if (inString) {
+          lastQuoteIndex = i;
+        }
+      }
+    }
+    if (inString && lastQuoteIndex !== -1) {
+      const beforeUnterminated = repaired.substring(0, lastQuoteIndex + 1);
+      const afterUnterminated = repaired.substring(lastQuoteIndex + 1);
+      const breakPoints = [",", "}", "]", "\n"];
+      let breakIndex = -1;
+      for (let i = 0; i < afterUnterminated.length; i++) {
+        if (breakPoints.includes(afterUnterminated[i])) {
+          breakIndex = i;
+          break;
+        }
+      }
+      if (breakIndex !== -1) {
+        const stringContent = afterUnterminated.substring(0, breakIndex);
+        const remainder = afterUnterminated.substring(breakIndex);
+        const escapedContent = stringContent.replace(new RegExp('(?<!\\\\)"', "g"), '\\"');
+        repaired = beforeUnterminated + escapedContent + '"' + remainder;
+      } else {
+        const escapedContent = afterUnterminated.replace(new RegExp('(?<!\\\\)"', "g"), '\\"');
+        repaired = beforeUnterminated + escapedContent + '"';
+      }
+    }
+    return repaired;
+  }
+  // FIX: Replaced unsafe single quote replacement with a stateful parser.
+  /**
+   * Safely replaces single quotes with double quotes only for keys and string values,
+   * ignoring apostrophes inside already double-quoted strings.
+   */
+  static safelyFixQuotes(jsonStr) {
+    let result = "";
+    let inDoubleQuoteString = false;
+    let escaped = false;
+    for (let i = 0; i < jsonStr.length; i++) {
+      const char = jsonStr[i];
+      if (escaped) {
+        result += char;
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        escaped = true;
+        result += char;
+        continue;
+      }
+      if (char === '"') {
+        inDoubleQuoteString = !inDoubleQuoteString;
+      }
+      if (char === "'" && !inDoubleQuoteString) {
+        result += '"';
+      } else {
+        result += char;
+      }
+    }
+    return result;
+  }
+  /**
+   * Fixes common JSON formatting issues using more robust methods.
+   */
+  static applyCommonFixes(jsonStr) {
+    let fixed = jsonStr;
+    fixed = this.safelyFixQuotes(fixed);
+    fixed = fixed.replace(/,\s*([}\]])/g, "$1");
+    fixed = fixed.replace(/("|}|\d|]|true|false|null)\s*\n\s*(")/g, "$1,\n$2");
+    fixed = fixed.replace(/"[\s\S]*?"/g, (match) => {
+      const content = match.substring(1, match.length - 1);
+      const fixedContent = content.replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+      return `"${fixedContent}"`;
+    });
+    fixed = fixed.replace(/"(true|false|null)"/g, "$1");
+    return fixed;
+  }
+  /**
+   * Validates JSON by attempting to parse and providing detailed error info.
+   */
+  static validateAndGetError(jsonStr) {
+    try {
+      JSON.parse(jsonStr);
+      return { isValid: true };
+    } catch (error) {
+      const errorMessage = error.message || "";
+      const positionMatch = errorMessage.match(/position (\d+)/);
+      const position = positionMatch ? parseInt(positionMatch[1], 10) : void 0;
+      return {
+        isValid: false,
+        error: errorMessage,
+        position
+      };
+    }
+  }
+  /**
+   * Main repair function that attempts multiple strategies.
+   */
+  static repairJson(jsonStr) {
+    var _a;
+    let current = jsonStr.trim();
+    const maxAttempts = 5;
+    let lastError = "";
+    let lastPosition = -1;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      const validation = this.validateAndGetError(current);
+      if (validation.isValid) {
+        return current;
+      }
+      console.warn(`JSON repair attempt ${attempt + 1}: ${validation.error}`);
+      if (validation.error === lastError && validation.position === lastPosition) {
+        console.error("Repair attempt stuck on the same error, aborting this strategy.");
+        if (validation.position) {
+          const truncated = current.substring(0, validation.position);
+          const openBraces = (truncated.match(/{/g) || []).length;
+          const closeBraces = (truncated.match(/}/g) || []).length;
+          const openBrackets = (truncated.match(/\[/g) || []).length;
+          const closeBrackets = (truncated.match(/\]/g) || []).length;
+          let repaired = truncated.replace(/,\s*$/, "");
+          for (let i = 0; i < openBrackets - closeBrackets; i++) repaired += "]";
+          for (let i = 0; i < openBraces - closeBraces; i++) repaired += "}";
+          current = repaired;
+          const finalValidation = this.validateAndGetError(current);
+          if (finalValidation.isValid) return current;
+        }
+        break;
+      }
+      lastError = validation.error || "";
+      lastPosition = validation.position;
+      if ((_a = validation.error) == null ? void 0 : _a.includes("Unterminated string")) {
+        current = this.repairUnterminatedStrings(current);
+      } else {
+        current = this.applyCommonFixes(current);
+      }
+    }
+    try {
+      let finalAttempt = this.applyCommonFixes(jsonStr.trim());
+      finalAttempt = this.repairUnterminatedStrings(finalAttempt);
+      JSON.parse(finalAttempt);
+      return finalAttempt;
+    } catch (e) {
+      throw new Error(`Unable to repair JSON after ${maxAttempts} attempts. Last known error: ${lastError}`);
+    }
+  }
+};
+function extractJsonFromMarkdown(text) {
+  if (!text) {
+    throw new Error("Input text is empty or null.");
+  }
+  const trimmedText = text.trim();
+  try {
+    JSON.parse(trimmedText);
+    return trimmedText;
+  } catch (e) {
+  }
+  const markdownPatterns = [
+    /```(?:json|JSON)\s*([\s\S]*?)\s*```/,
+    // ```json ... ```
+    /```\s*({[\s\S]*?}|\[[\s\S]*?\])\s*```/
+    // ``` { ... } ``` or ``` [ ... ] ```
+  ];
+  for (const pattern of markdownPatterns) {
+    const match = trimmedText.match(pattern);
+    if (match && match[1]) {
+      const content = match[1].trim();
+      try {
+        JSON.parse(content);
+        return content;
+      } catch (e) {
+        console.warn("JSON inside markdown block is invalid, attempting repair...");
+        try {
+          return JsonRepairEngine.repairJson(content);
+        } catch (repairError) {
+          console.warn(`Markdown block repair failed: ${repairError.message}. Trying other strategies...`);
+        }
+      }
+    }
+  }
+  const firstBrace = trimmedText.indexOf("{");
+  const firstBracket = trimmedText.indexOf("[");
+  let startIndex = -1;
+  if (firstBrace === -1 && firstBracket === -1) ; else if (firstBrace === -1) {
+    startIndex = firstBracket;
+  } else if (firstBracket === -1) {
+    startIndex = firstBrace;
+  } else {
+    startIndex = Math.min(firstBrace, firstBracket);
+  }
+  if (startIndex !== -1) {
+    const textToProcess = trimmedText.substring(startIndex);
+    let balance = 0;
+    let inString = false;
+    let escaped = false;
+    const startChar = textToProcess[0];
+    const endChar = startChar === "{" ? "}" : "]";
+    for (let i = 0; i < textToProcess.length; i++) {
+      const char = textToProcess[i];
+      if (escaped) {
+        escaped = false;
+        continue;
+      }
+      if (char === "\\") {
+        escaped = true;
+        continue;
+      }
+      if (char === '"') {
+        inString = !inString;
+      }
+      if (!inString) {
+        if (char === startChar) balance++;
+        if (char === endChar) balance--;
+      }
+      if (balance === 0 && i > 0) {
+        const potentialJson = textToProcess.substring(0, i + 1);
+        try {
+          JSON.parse(potentialJson);
+          return potentialJson;
+        } catch (e) {
+          console.warn(`Balanced JSON segment is invalid, attempting repair...`);
+          try {
+            return JsonRepairEngine.repairJson(potentialJson);
+          } catch (repairError) {
+            console.warn(`Repair failed for balanced segment: ${repairError.message}`);
+          }
+        }
+        break;
+      }
+    }
+  }
+  console.warn("All extraction strategies failed, attempting to repair the entire input text as a last resort.");
+  try {
+    return JsonRepairEngine.repairJson(trimmedText);
+  } catch (finalError) {
+    throw new Error(`Unable to extract or repair valid JSON from AI response. Preview: "${trimmedText.substring(0, 100)}...". Final error: ${finalError.message}`);
+  }
+}
+z.object({
+  language: z.custom(),
+  problemPrompt: z.string(),
+  userCode: z.string(),
+  testCase: z.custom()
+});
+var AIEvaluationOutputSchema = z.object({
+  passed: z.boolean().describe("Did the user's code produce the expected output for the given input?"),
+  actualOutput: z.any().describe("The actual output produced by the user's code."),
+  reasoning: z.string().describe("A brief explanation of why the code passed or failed, or if there was a syntax error.")
+});
+var EvaluateUserCodeOutputSchema = AIEvaluationOutputSchema;
+
+// src/ai/flows/evaluate-user-code.ts
+async function evaluateUserCode(clientInput, apiKey) {
+  try {
+    const ai = genkit({
+      plugins: [googleAI({ apiKey })],
+      model: gemini20Flash
+    });
+    const { language, problemPrompt, userCode, testCase } = clientInput;
+    const promptText = `
+You are an expert Code Judge and Teaching Assistant for a ${language} programming course.
+Your task is to evaluate a student's code submission for a specific problem against a single test case.
+
+## Problem Description
+${problemPrompt}
+
+## Student's Code Submission
+\`\`\`${language}
+${userCode}
+\`\`\`
+
+## Test Case to Evaluate
+- Input(s): ${JSON.stringify(testCase.input)}
+- Expected Output: ${JSON.stringify(testCase.expectedOutput)}
+
+## Your Task
+1.  **Analyze Execution:** Mentally execute the student's code with the provided input(s).
+2.  **Determine Output:** Figure out what the actual output of the code would be.
+3.  **Compare:** Compare the actual output with the expected output.
+4.  **Handle Errors:** If the code has a syntax error or would crash, treat it as a failure.
+5.  **Provide Reasoning:** Briefly explain your conclusion. If it failed, explain why (e.g., "incorrect result", "infinite loop", "syntax error on line 5").
+
+**CRITICAL JSON OUTPUT FORMAT:**
+Return ONLY the JSON object with this EXACT structure.
+
+\`\`\`json
+{
+  "passed": false,
+  "actualOutput": 5,
+  "reasoning": "The function correctly summed the numbers but did not filter for only even numbers."
+}
+\`\`\`
+
+Return only the JSON response.`;
+    const response = await ai.generate(promptText);
+    const rawText = response.text;
+    const jsonText = extractJsonFromMarkdown(rawText);
+    const aiGeneratedContent = JSON.parse(jsonText);
+    return EvaluateUserCodeOutputSchema.parse(aiGeneratedContent);
+  } catch (error) {
+    console.error("Error evaluating user code:", error);
+    if (error instanceof z.ZodError) {
+      throw new Error(`AI evaluation output validation failed: ${error.message}`);
+    }
+    return {
+      passed: false,
+      actualOutput: "Evaluation Error",
+      reasoning: `The AI judge failed to process the code. Error: ${error.message}`
+    };
+  }
+}
+
+// src/services/APIKeyService.ts
+var GEMINI_API_KEY_SERVICE_NAME = "gemini";
+var LOCAL_STORAGE_PREFIX = "iqk_api_keys_";
+function _encode(data) {
+  if (typeof window !== "undefined" && typeof window.btoa === "function") {
+    try {
+      return window.btoa(data);
+    } catch (e) {
+      console.error("Base64 encoding (btoa) failed:", e);
+      return data;
+    }
+  }
+  return data;
+}
+function _decode(data) {
+  if (typeof window !== "undefined" && typeof window.atob === "function") {
+    try {
+      return window.atob(data);
+    } catch (e) {
+      console.error("Base64 decoding (atob) failed:", e);
+      return data;
+    }
+  }
+  return data;
+}
+var APIKeyService = class {
+  static getStorageKey(serviceName) {
+    return `${LOCAL_STORAGE_PREFIX}${serviceName}`;
+  }
+  /**
+   * Saves an API key to localStorage. The key is mildly obfuscated using Base64.
+   * @param serviceName - The name of the service (e.g., 'gemini').
+   * @param apiKey - The API key to save.
+   */
+  static saveAPIKey(serviceName, apiKey) {
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        const encodedKey = _encode(apiKey);
+        localStorage.setItem(this.getStorageKey(serviceName), encodedKey);
+      } catch (e) {
+        console.error(`Error saving API key for ${serviceName} to localStorage:`, e);
+      }
+    } else {
+      console.warn("localStorage is not available. APIKeyService cannot save keys.");
+    }
+  }
+  /**
+   * Retrieves an API key from localStorage.
+   * @param serviceName - The name of the service.
+   * @returns The decoded API key, or null if not found or if localStorage is unavailable.
+   */
+  static getAPIKey(serviceName) {
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        const storedKey = localStorage.getItem(this.getStorageKey(serviceName));
+        if (storedKey) {
+          return _decode(storedKey);
+        }
+      } catch (e) {
+        console.error(`Error retrieving API key for ${serviceName} from localStorage:`, e);
+      }
+    }
+    return null;
+  }
+  /**
+   * Removes an API key from localStorage.
+   * @param serviceName - The name of the service.
+   */
+  static removeAPIKey(serviceName) {
+    if (typeof window !== "undefined" && window.localStorage) {
+      try {
+        localStorage.removeItem(this.getStorageKey(serviceName));
+      } catch (e) {
+        console.error(`Error removing API key for ${serviceName} from localStorage:`, e);
+      }
+    }
+  }
+  /**
+   * Checks if an API key exists in localStorage for the given service.
+   * @param serviceName - The name of the service.
+   * @returns True if a key exists, false otherwise.
+   */
+  static hasAPIKey(serviceName) {
+    return this.getAPIKey(serviceName) !== null;
+  }
+};
+
+// src/services/CodeEvaluationService.ts
+var CodeEvaluationService = class {
+  constructor() {
+    this.apiKey = APIKeyService.getAPIKey(GEMINI_API_KEY_SERVICE_NAME);
+  }
+  /**
+   * Evaluates a user's code against a single test case using an AI judge.
+   * @param question The full CodingQuestion object.
+   * @param userCode The user's submitted code string.
+   * @param testCase The specific TestCase to evaluate against.
+   * @returns A promise that resolves to an EvaluationResult object.
+   */
+  async evaluateSingleTestCase(question, userCode, testCase) {
+    if (!this.apiKey) {
+      return {
+        testCaseId: testCase.id,
+        passed: false,
+        actualOutput: "Configuration Error",
+        reasoning: "API Key is not configured."
+      };
+    }
+    const aiResult = await evaluateUserCode({
+      language: question.language,
+      problemPrompt: question.prompt,
+      userCode,
+      testCase
+    }, this.apiKey);
+    return __spreadValues({
+      testCaseId: testCase.id
+    }, aiResult);
+  }
+  /**
+   * Evaluates user's code against all test cases for a given question.
+   * @param question The full CodingQuestion object.
+   * @param userCode The user's submitted code string.
+   * @returns A promise that resolves to an array of EvaluationResult objects.
+   */
+  async evaluateAllTestCases(question, userCode) {
+    const results = [];
+    for (const testCase of question.testCases) {
+      const result = await this.evaluateSingleTestCase(question, userCode, testCase);
+      results.push(result);
+    }
+    return results;
+  }
+  /**
+   * Evaluates user's code against only the public test cases for a given question.
+   * Useful for a "Run Tests" button before final submission.
+   * @param question The full CodingQuestion object.
+   * @param userCode The user's submitted code string.
+   * @returns A promise that resolves to an array of EvaluationResult objects.
+   */
+  async evaluatePublicTestCases(question, userCode) {
+    const publicTestCases = question.testCases.filter((tc) => tc.isPublic);
+    const results = [];
+    for (const testCase of publicTestCases) {
+      const result = await this.evaluateSingleTestCase(question, userCode, testCase);
+      results.push(result);
+    }
+    return results;
+  }
+};
+
+// src/services/evaluators/coding-evaluator.ts
+var CodingEvaluator = class {
+  async evaluate(question, answer) {
+    var _a;
+    const points = (_a = question.points) != null ? _a : 0;
+    if (typeof answer !== "string" || !answer.trim()) {
+      return {
+        isCorrect: false,
+        correctAnswer: { id: null, value: question.solutionCode },
+        pointsEarned: 0,
+        evaluationDetails: question.testCases.map((tc) => ({
+          testCaseId: tc.id,
+          passed: false,
+          actualOutput: "No submission",
+          reasoning: "User did not submit any code."
+        }))
+      };
+    }
+    try {
+      const evaluationService = new CodeEvaluationService();
+      const testCaseResults = await evaluationService.evaluateAllTestCases(question, answer);
+      const isCorrect = testCaseResults.every((result) => result.passed);
+      const correctAnswerDetail = {
+        id: null,
+        value: question.solutionCode
+      };
+      return {
+        isCorrect,
+        correctAnswer: correctAnswerDetail,
+        pointsEarned: isCorrect ? points : 0,
+        evaluationDetails: testCaseResults
+        // Pass through the detailed results
+      };
+    } catch (error) {
+      console.error("A critical error occurred during code evaluation:", error);
+      return {
+        isCorrect: false,
+        correctAnswer: { id: null, value: question.solutionCode },
+        pointsEarned: 0,
+        evaluationDetails: question.testCases.map((tc) => ({
+          testCaseId: tc.id,
+          passed: false,
+          actualOutput: "Evaluation Error",
+          reasoning: error instanceof Error ? error.message : "An unknown error occurred."
+        }))
+      };
+    }
+  }
+};
+
 // src/services/QuizEngine.ts
 var QuizEngine = class {
   constructor(options) {
@@ -314,6 +1164,8 @@ var QuizEngine = class {
     this.callbacks = options.callbacks || {};
     this.questions = ((_a = this.config.settings) == null ? void 0 : _a.shuffleQuestions) ? [...this.config.questions].sort(() => Math.random() - 0.5) : this.config.questions;
     this.overallStartTime = Date.now();
+    this.evaluators = /* @__PURE__ */ new Map();
+    this.registerEvaluators();
     if (((_b = this.config.settings) == null ? void 0 : _b.timeLimitMinutes) && this.config.settings.timeLimitMinutes > 0) {
       this.timeLeftInSeconds = this.config.settings.timeLimitMinutes * 60;
     }
@@ -352,6 +1204,22 @@ var QuizEngine = class {
     }
     (_e = (_d = this.callbacks).onQuestionChange) == null ? void 0 : _e.call(_d, initialQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
   }
+  registerEvaluators() {
+    this.evaluators.set("multiple_choice", new MultipleChoiceEvaluator());
+    this.evaluators.set("multiple_response", new MultipleResponseEvaluator());
+    this.evaluators.set("true_false", new TrueFalseEvaluator());
+    this.evaluators.set("short_answer", new ShortAnswerEvaluator());
+    this.evaluators.set("numeric", new NumericEvaluator());
+    this.evaluators.set("sequence", new SequenceEvaluator());
+    this.evaluators.set("matching", new MatchingEvaluator());
+    this.evaluators.set("fill_in_the_blanks", new FillInTheBlanksEvaluator());
+    this.evaluators.set("drag_and_drop", new DragAndDropEvaluator());
+    this.evaluators.set("hotspot", new HotspotEvaluator());
+    const programmingEvaluator = new ProgrammingEvaluator();
+    this.evaluators.set("blockly_programming", programmingEvaluator);
+    this.evaluators.set("scratch_programming", programmingEvaluator);
+    this.evaluators.set("coding", new CodingEvaluator());
+  }
   _recordCurrentQuestionTime() {
     if (this.questionStartTime && this.currentQuestionIndex >= 0 && this.currentQuestionIndex < this.questions.length) {
       const currentQId = this.questions[this.currentQuestionIndex].id;
@@ -444,180 +1312,28 @@ var QuizEngine = class {
     }
     return this.getCurrentQuestion();
   }
-  evaluateQuestion(question, answer) {
-    var _a, _b, _c;
-    let isCorrect = false;
-    let correctAnswerDetail = null;
-    const points = (_a = question.points) != null ? _a : 0;
-    const findOptionText = (q, id) => {
-      var _a2;
-      return ((_a2 = q.options.find((opt) => opt.id === id)) == null ? void 0 : _a2.text) || "";
-    };
-    switch (question.questionType) {
-      case "multiple_choice": {
-        const q = question;
-        const correctAnswerId = q.correctAnswerId;
-        const correctValue = findOptionText(q, correctAnswerId);
-        correctAnswerDetail = { id: correctAnswerId, value: correctValue };
-        isCorrect = answer === correctAnswerId;
-        break;
-      }
-      case "multiple_response": {
-        const q = question;
-        const correctAnswerIds = q.correctAnswerIds;
-        const correctValues = correctAnswerIds.map((id) => findOptionText(q, id));
-        correctAnswerDetail = { id: correctAnswerIds, value: correctValues };
-        if (Array.isArray(answer)) {
-          const userAnswerSet = new Set(answer);
-          const correctAnswerSet = new Set(correctAnswerIds);
-          isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
-        }
-        break;
-      }
-      case "true_false": {
-        const q = question;
-        correctAnswerDetail = { id: null, value: q.correctAnswer };
-        let tfAnswer = answer;
-        if (typeof answer === "string") tfAnswer = answer.toLowerCase() === "true";
-        isCorrect = typeof tfAnswer === "boolean" && tfAnswer === q.correctAnswer;
-        break;
-      }
-      case "short_answer": {
-        const q = question;
-        correctAnswerDetail = { id: null, value: q.acceptedAnswers };
-        if (typeof answer === "string") {
-          const userAnswerTrimmed = answer.trim();
-          const caseSensitive = (_b = q.isCaseSensitive) != null ? _b : false;
-          isCorrect = q.acceptedAnswers.some((accAns) => caseSensitive ? accAns.trim() === userAnswerTrimmed : accAns.trim().toLowerCase() === userAnswerTrimmed.toLowerCase());
-        }
-        break;
-      }
-      case "numeric": {
-        const q = question;
-        correctAnswerDetail = { id: null, value: q.answer };
-        if (typeof answer === "string" || typeof answer === "number") {
-          const userAnswerNum = parseFloat(String(answer));
-          if (!isNaN(userAnswerNum)) {
-            isCorrect = q.tolerance != null ? Math.abs(userAnswerNum - q.answer) <= q.tolerance : userAnswerNum === q.answer;
-          }
-        }
-        break;
-      }
-      case "sequence": {
-        const q = question;
-        const correctValues = q.correctOrder.map((id) => {
-          var _a2;
-          return ((_a2 = q.items.find((item) => item.id === id)) == null ? void 0 : _a2.content) || "";
-        });
-        correctAnswerDetail = { id: q.correctOrder, value: correctValues };
-        if (Array.isArray(answer) && answer.length === q.correctOrder.length) {
-          isCorrect = answer.every((itemId, index) => itemId === q.correctOrder[index]);
-        }
-        break;
-      }
-      case "matching": {
-        const q = question;
-        const correctMap = q.correctAnswerMap.reduce((acc, curr) => {
-          var _a2, _b2;
-          const promptText = ((_a2 = q.prompts.find((p) => p.id === curr.promptId)) == null ? void 0 : _a2.content) || "";
-          const optionText = ((_b2 = q.options.find((o) => o.id === curr.optionId)) == null ? void 0 : _b2.content) || "";
-          acc[promptText] = optionText;
-          return acc;
-        }, {});
-        correctAnswerDetail = { id: null, value: correctMap };
-        if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
-          const userAnswerMap = answer;
-          isCorrect = q.correctAnswerMap.length === Object.keys(userAnswerMap).length && q.correctAnswerMap.every((map) => userAnswerMap[map.promptId] === map.optionId);
-        }
-        break;
-      }
-      case "fill_in_the_blanks": {
-        const q = question;
-        const correctMap = q.answers.reduce((acc, curr) => {
-          acc[curr.blankId] = curr.acceptedValues.join(" | ");
-          return acc;
-        }, {});
-        correctAnswerDetail = { id: null, value: correctMap };
-        if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
-          const userAnswerMap = answer;
-          isCorrect = q.answers.every((correctAnsDef) => {
-            var _a2, _b2;
-            const userValForBlank = (_a2 = userAnswerMap[correctAnsDef.blankId]) == null ? void 0 : _a2.trim();
-            if (userValForBlank === void 0) return false;
-            const caseSensitive = (_b2 = q.isCaseSensitive) != null ? _b2 : false;
-            return correctAnsDef.acceptedValues.some((accVal) => caseSensitive ? accVal.trim() === userValForBlank : accVal.trim().toLowerCase() === userValForBlank.toLowerCase());
-          });
-        }
-        break;
-      }
-      case "drag_and_drop": {
-        const q = question;
-        const correctMap = q.answerMap.reduce((acc, curr) => {
-          var _a2, _b2;
-          const draggableText = ((_a2 = q.draggableItems.find((d) => d.id === curr.draggableId)) == null ? void 0 : _a2.content) || "";
-          const dropZoneText = ((_b2 = q.dropZones.find((z) => z.id === curr.dropZoneId)) == null ? void 0 : _b2.label) || "";
-          acc[draggableText] = dropZoneText;
-          return acc;
-        }, {});
-        correctAnswerDetail = { id: null, value: correctMap };
-        if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
-          const userAnswerMap = answer;
-          isCorrect = q.answerMap.length === Object.keys(userAnswerMap).length && q.answerMap.every((map) => userAnswerMap[map.draggableId] === map.dropZoneId);
-        }
-        break;
-      }
-      case "hotspot": {
-        const q = question;
-        const correctValues = q.correctHotspotIds.map((id) => {
-          var _a2;
-          return ((_a2 = q.hotspots.find((h) => h.id === id)) == null ? void 0 : _a2.description) || id;
-        });
-        correctAnswerDetail = { id: q.correctHotspotIds, value: correctValues };
-        if (Array.isArray(answer)) {
-          const userAnswerSet = new Set(answer);
-          const correctAnswerSet = new Set(q.correctHotspotIds);
-          isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
-        }
-        break;
-      }
-      case "blockly_programming":
-      case "scratch_programming": {
-        const q = question;
-        correctAnswerDetail = { id: null, value: q.solutionGeneratedCode || "" };
-        if (typeof answer === "string" && typeof q.solutionGeneratedCode === "string") {
-          if (typeof window !== "undefined" && ((_c = window.Blockly) == null ? void 0 : _c.JavaScript)) {
-            const LocalBlockly = window.Blockly;
-            let generatedUserCode = "";
-            try {
-              const tempWorkspace = new LocalBlockly.Workspace();
-              const dom = LocalBlockly.Xml.textToDom(answer);
-              LocalBlockly.Xml.domToWorkspace(dom, tempWorkspace);
-              generatedUserCode = LocalBlockly.JavaScript.workspaceToCode(tempWorkspace) || "";
-              const normalize = (code) => code.replace(/\s+/g, " ").trim();
-              isCorrect = normalize(generatedUserCode) === normalize(q.solutionGeneratedCode);
-              tempWorkspace.dispose();
-            } catch (e) {
-              console.error(`Error generating code from user's ${q.questionType} XML for evaluation:`, e);
-              isCorrect = false;
-            }
-          } else {
-            console.warn(`Blockly library not available in QuizEngine for ${q.questionType} code generation during evaluation. Skipping code comparison.`);
-            isCorrect = false;
-          }
+  getElapsedTime() {
+    return Date.now() - this.overallStartTime;
+  }
+  destroy() {
+    this.stopTimer();
+    this._recordCurrentQuestionTime();
+    if (this.scormService && this.scormService.hasAPI()) {
+      if (["initialized", "committed", "sending_data"].includes(this.quizResultState.scormStatus || "")) {
+        const termResult = this.scormService.terminate();
+        if (termResult.success) {
+          this.quizResultState.scormStatus = "terminated";
+        } else {
+          this.quizResultState.scormStatus = "error";
+          this.quizResultState.scormError = termResult.error || "SCORM termination failed on destroy.";
         }
-        break;
-      }
-      default: {
-        const _exhaustiveCheck = question;
-        console.warn("Unsupported question type in QuizEngine evaluation:", _exhaustiveCheck);
-        isCorrect = false;
-        correctAnswerDetail = { id: null, value: "Evaluation not implemented." };
       }
     }
-    return { isCorrect, correctAnswer: correctAnswerDetail, pointsEarned: isCorrect ? points : 0 };
+    this.scormService = null;
   }
+  // (Tiếp theo từ Phần 1)
   async calculateResults() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e;
     this.stopTimer();
     this._recordCurrentQuestionTime();
     let totalScore = 0;
@@ -627,92 +1343,31 @@ var QuizEngine = class {
     for (const question of this.questions) {
       const userAnswerRaw = this.userAnswers.get(question.id) || null;
       maxScore += (_a = question.points) != null ? _a : 0;
-      const { isCorrect, correctAnswer: correctAnswerDetail, pointsEarned } = this.evaluateQuestion(question, userAnswerRaw);
+      const evaluator = this.evaluators.get(question.questionType);
+      if (!evaluator) {
+        console.warn(`No evaluator found for question type: ${question.questionType}`);
+        questionResultsArray.push({
+          questionId: question.id,
+          questionType: question.questionType,
+          prompt: question.prompt,
+          isCorrect: false,
+          pointsEarned: 0,
+          userAnswer: { id: null, value: userAnswerRaw },
+          correctAnswer: { id: null, value: "Evaluation not implemented." },
+          timeSpentSeconds: parseFloat((this.questionTimings.get(question.id) || 0).toFixed(2))
+        });
+        continue;
+      }
+      const {
+        isCorrect,
+        correctAnswer: correctAnswerDetail,
+        pointsEarned,
+        evaluationDetails
+      } = await evaluator.evaluate(question, userAnswerRaw);
       totalScore += pointsEarned;
       const timeSpentOnThisQuestion = parseFloat((this.questionTimings.get(question.id) || 0).toFixed(2));
-      accumulatedTotalTimeSpent += timeSpentOnThisQuestion;
-      let userAnswerDetail = null;
-      let allOptions = void 0;
-      if (userAnswerRaw !== null) {
-        switch (question.questionType) {
-          case "multiple_choice": {
-            const q = question;
-            allOptions = q.options.map((opt) => ({ id: opt.id, value: opt.text }));
-            const id = userAnswerRaw;
-            userAnswerDetail = { id, value: ((_b = allOptions.find((opt) => opt.id === id)) == null ? void 0 : _b.value) || "" };
-            break;
-          }
-          case "multiple_response": {
-            const q = question;
-            allOptions = q.options.map((opt) => ({ id: opt.id, value: opt.text }));
-            const ids = userAnswerRaw;
-            const values = ids.map((id) => {
-              var _a2;
-              return ((_a2 = allOptions == null ? void 0 : allOptions.find((opt) => opt.id === id)) == null ? void 0 : _a2.value) || "";
-            });
-            userAnswerDetail = { id: ids, value: values };
-            break;
-          }
-          case "true_false":
-          case "short_answer":
-          case "numeric":
-            userAnswerDetail = { id: null, value: userAnswerRaw };
-            break;
-          case "sequence": {
-            const q = question;
-            allOptions = q.items.map((item) => ({ id: item.id, value: item.content }));
-            const ids = userAnswerRaw;
-            const values = ids.map((id) => {
-              var _a2;
-              return ((_a2 = allOptions == null ? void 0 : allOptions.find((opt) => opt.id === id)) == null ? void 0 : _a2.value) || "";
-            });
-            userAnswerDetail = { id: ids, value: values };
-            break;
-          }
-          case "matching": {
-            const q = question;
-            const userAnswerMap = userAnswerRaw;
-            const valueMap = {};
-            for (const promptId in userAnswerMap) {
-              const optionId = userAnswerMap[promptId];
-              const promptText = ((_c = q.prompts.find((p) => p.id === promptId)) == null ? void 0 : _c.content) || "";
-              const optionText = ((_d = q.options.find((o) => o.id === optionId)) == null ? void 0 : _d.content) || "";
-              valueMap[promptText] = optionText;
-            }
-            userAnswerDetail = { id: null, value: valueMap };
-            break;
-          }
-          // --- LOGIC MỚI ĐƯỢC THÊM VÀO ---
-          case "fill_in_the_blanks": {
-            if (typeof userAnswerRaw === "object" && userAnswerRaw !== null && !Array.isArray(userAnswerRaw)) {
-              userAnswerDetail = { id: null, value: userAnswerRaw };
-            }
-            break;
-          }
-          case "drag_and_drop": {
-            const q = question;
-            if (typeof userAnswerRaw === "object" && userAnswerRaw !== null && !Array.isArray(userAnswerRaw)) {
-              const userAnswerMapByIds = userAnswerRaw;
-              const enrichedUserAnswerMap = {};
-              for (const draggableId in userAnswerMapByIds) {
-                const dropZoneId = userAnswerMapByIds[draggableId];
-                const draggableText = ((_e = q.draggableItems.find((d) => d.id === draggableId)) == null ? void 0 : _e.content) || `(ID: ${draggableId})`;
-                const dropZoneText = ((_f = q.dropZones.find((z) => z.id === dropZoneId)) == null ? void 0 : _f.label) || `(ID: ${dropZoneId})`;
-                enrichedUserAnswerMap[draggableText] = dropZoneText;
-              }
-              userAnswerDetail = { id: null, value: enrichedUserAnswerMap };
-            }
-            break;
-          }
-          // ------------------------------------
-          // Các loại câu hỏi còn lại vẫn giữ fallback
-          case "hotspot":
-          case "blockly_programming":
-          case "scratch_programming":
-            userAnswerDetail = { id: null, value: userAnswerRaw };
-            break;
-        }
-      }
+      accumulatedTotalTimeSpent += timeSpentOnThisQuestion;
+      const userAnswerDetail = this.formatUserAnswerDetail(question, userAnswerRaw);
       questionResultsArray.push({
         questionId: question.id,
         questionType: question.questionType,
@@ -721,18 +1376,18 @@ var QuizEngine = class {
         pointsEarned,
         userAnswer: userAnswerDetail,
         correctAnswer: correctAnswerDetail,
-        allOptions,
-        timeSpentSeconds: timeSpentOnThisQuestion
+        timeSpentSeconds: timeSpentOnThisQuestion,
+        evaluationDetails
       });
     }
     const percentage = maxScore > 0 ? parseFloat((totalScore / maxScore * 100).toFixed(2)) : 0;
     let passed = void 0;
-    if (((_g = this.config.settings) == null ? void 0 : _g.passingScorePercent) != null) {
+    if (((_b = this.config.settings) == null ? void 0 : _b.passingScorePercent) != null) {
       passed = percentage >= this.config.settings.passingScorePercent;
     }
     const totalQuizTimeSpentSeconds = parseFloat(accumulatedTotalTimeSpent.toFixed(2));
     const averageTimePerQuestionSeconds = this.questions.length > 0 ? parseFloat((totalQuizTimeSpentSeconds / this.questions.length).toFixed(2)) : 0;
-    const metadataPerformance = this._calculateMetadataPerformance();
+    const metadataPerformance = await this._calculateMetadataPerformance();
     const finalResults = __spreadValues({
       score: totalScore,
       maxScore,
@@ -748,11 +1403,118 @@ var QuizEngine = class {
       averageTimePerQuestionSeconds
     }, metadataPerformance);
     this.quizResultState = __spreadValues(__spreadValues({}, this.quizResultState), finalResults);
-    if ((_h = this.config.settings) == null ? void 0 : _h.scorm) this._sendResultsToSCORM(finalResults);
+    if ((_c = this.config.settings) == null ? void 0 : _c.scorm) this._sendResultsToSCORM(finalResults);
     await this._sendResultsToWebhook(finalResults);
-    (_j = (_i = this.callbacks).onQuizFinish) == null ? void 0 : _j.call(_i, finalResults);
+    (_e = (_d = this.callbacks).onQuizFinish) == null ? void 0 : _e.call(_d, finalResults);
     return finalResults;
   }
+  formatUserAnswerDetail(question, userAnswerRaw) {
+    var _a, _b, _c, _d, _e;
+    if (userAnswerRaw === null) return null;
+    switch (question.questionType) {
+      case "multiple_choice": {
+        const q = question;
+        const id = userAnswerRaw;
+        return { id, value: ((_a = q.options.find((opt) => opt.id === id)) == null ? void 0 : _a.text) || "" };
+      }
+      case "multiple_response": {
+        const q = question;
+        const ids = userAnswerRaw;
+        const values = ids.map((id) => {
+          var _a2;
+          return ((_a2 = q.options.find((opt) => opt.id === id)) == null ? void 0 : _a2.text) || "";
+        });
+        return { id: ids, value: values };
+      }
+      case "sequence": {
+        const q = question;
+        const ids = userAnswerRaw;
+        const values = ids.map((id) => {
+          var _a2;
+          return ((_a2 = q.items.find((item) => item.id === id)) == null ? void 0 : _a2.content) || "";
+        });
+        return { id: ids, value: values };
+      }
+      case "matching": {
+        const q = question;
+        const userAnswerMap = userAnswerRaw;
+        const valueMap = {};
+        for (const promptId in userAnswerMap) {
+          const optionId = userAnswerMap[promptId];
+          const promptText = ((_b = q.prompts.find((p) => p.id === promptId)) == null ? void 0 : _b.content) || "";
+          const optionText = ((_c = q.options.find((o) => o.id === optionId)) == null ? void 0 : _c.content) || "";
+          valueMap[promptText] = optionText;
+        }
+        return { id: null, value: valueMap };
+      }
+      case "drag_and_drop": {
+        const q = question;
+        if (typeof userAnswerRaw === "object" && userAnswerRaw !== null && !Array.isArray(userAnswerRaw)) {
+          const userAnswerMapByIds = userAnswerRaw;
+          const enrichedUserAnswerMap = {};
+          for (const draggableId in userAnswerMapByIds) {
+            const dropZoneId = userAnswerMapByIds[draggableId];
+            const draggableText = ((_d = q.draggableItems.find((d) => d.id === draggableId)) == null ? void 0 : _d.content) || `(ID: ${draggableId})`;
+            const dropZoneText = ((_e = q.dropZones.find((z3) => z3.id === dropZoneId)) == null ? void 0 : _e.label) || `(ID: ${dropZoneId})`;
+            enrichedUserAnswerMap[draggableText] = dropZoneText;
+          }
+          return { id: null, value: enrichedUserAnswerMap };
+        }
+        return { id: null, value: userAnswerRaw };
+      }
+      default:
+        return { id: null, value: userAnswerRaw };
+    }
+  }
+  async _calculateMetadataPerformance() {
+    var _a;
+    const loPerformanceMap = /* @__PURE__ */ new Map();
+    const categoryPerformanceMap = /* @__PURE__ */ new Map();
+    const topicPerformanceMap = /* @__PURE__ */ new Map();
+    const difficultyPerformanceMap = /* @__PURE__ */ new Map();
+    const bloomLevelPerformanceMap = /* @__PURE__ */ new Map();
+    const updateMap = (map, key, points, isCorrect) => {
+      if (!key) return;
+      const current = map.get(key) || { totalQuestions: 0, correctQuestions: 0, pointsEarned: 0, maxPoints: 0 };
+      current.totalQuestions++;
+      current.maxPoints += points;
+      if (isCorrect) {
+        current.correctQuestions++;
+        current.pointsEarned += points;
+      }
+      map.set(key, current);
+    };
+    for (const q of this.questions) {
+      const userAnswer = this.userAnswers.get(q.id) || null;
+      const evaluator = this.evaluators.get(q.questionType);
+      if (evaluator) {
+        const { isCorrect } = await evaluator.evaluate(q, userAnswer);
+        const pointsForThisQuestion = (_a = q.points) != null ? _a : 0;
+        updateMap(loPerformanceMap, q.learningObjective, pointsForThisQuestion, isCorrect);
+        updateMap(categoryPerformanceMap, q.category, pointsForThisQuestion, isCorrect);
+        updateMap(topicPerformanceMap, q.topic, pointsForThisQuestion, isCorrect);
+        updateMap(difficultyPerformanceMap, q.difficulty, pointsForThisQuestion, isCorrect);
+        updateMap(bloomLevelPerformanceMap, q.bloomLevel, pointsForThisQuestion, isCorrect);
+      }
+    }
+    const formatPerformanceArray = (map, keyName) => {
+      return Array.from(map.entries()).map(([key, data]) => ({
+        [keyName]: key,
+        totalQuestions: data.totalQuestions,
+        correctQuestions: data.correctQuestions,
+        pointsEarned: data.pointsEarned,
+        maxPoints: data.maxPoints,
+        percentage: data.maxPoints > 0 ? parseFloat((data.pointsEarned / data.maxPoints * 100).toFixed(2)) : 0
+      }));
+    };
+    return {
+      performanceByLearningObjective: formatPerformanceArray(loPerformanceMap, "learningObjective"),
+      performanceByCategory: formatPerformanceArray(categoryPerformanceMap, "category"),
+      performanceByTopic: formatPerformanceArray(topicPerformanceMap, "topic"),
+      performanceByDifficulty: formatPerformanceArray(difficultyPerformanceMap, "difficulty"),
+      performanceByBloomLevel: formatPerformanceArray(bloomLevelPerformanceMap, "bloomLevel")
+    };
+  }
   async _sendResultsToWebhook(results) {
     var _a;
     if (!((_a = this.config.settings) == null ? void 0 : _a.webhookUrl)) {
@@ -820,80 +1582,15 @@ var QuizEngine = class {
       results.scormError = e instanceof Error ? e.message : "Unknown SCORM data sending error.";
     }
   }
-  _calculateMetadataPerformance() {
-    const loPerformanceMap = /* @__PURE__ */ new Map();
-    const categoryPerformanceMap = /* @__PURE__ */ new Map();
-    const topicPerformanceMap = /* @__PURE__ */ new Map();
-    const difficultyPerformanceMap = /* @__PURE__ */ new Map();
-    const bloomLevelPerformanceMap = /* @__PURE__ */ new Map();
-    const updateMap = (map, key, points, isCorrect) => {
-      if (!key) return;
-      const current = map.get(key) || { totalQuestions: 0, correctQuestions: 0, pointsEarned: 0, maxPoints: 0 };
-      current.totalQuestions++;
-      current.maxPoints += points;
-      if (isCorrect) {
-        current.correctQuestions++;
-        current.pointsEarned += points;
-      }
-      map.set(key, current);
-    };
-    this.questions.forEach((q) => {
-      var _a;
-      const qResult = this.userAnswers.get(q.id);
-      const { isCorrect } = this.evaluateQuestion(q, qResult || null);
-      const pointsForThisQuestion = (_a = q.points) != null ? _a : 0;
-      updateMap(loPerformanceMap, q.learningObjective, pointsForThisQuestion, isCorrect);
-      updateMap(categoryPerformanceMap, q.category, pointsForThisQuestion, isCorrect);
-      updateMap(topicPerformanceMap, q.topic, pointsForThisQuestion, isCorrect);
-      updateMap(difficultyPerformanceMap, q.difficulty, pointsForThisQuestion, isCorrect);
-      updateMap(bloomLevelPerformanceMap, q.bloomLevel, pointsForThisQuestion, isCorrect);
-    });
-    const formatPerformanceArray = (map, keyName) => {
-      return Array.from(map.entries()).map(([key, data]) => ({
-        [keyName]: key,
-        totalQuestions: data.totalQuestions,
-        correctQuestions: data.correctQuestions,
-        pointsEarned: data.pointsEarned,
-        maxPoints: data.maxPoints,
-        percentage: data.maxPoints > 0 ? parseFloat((data.pointsEarned / data.maxPoints * 100).toFixed(2)) : 0
-      }));
-    };
-    return {
-      performanceByLearningObjective: formatPerformanceArray(loPerformanceMap, "learningObjective"),
-      performanceByCategory: formatPerformanceArray(categoryPerformanceMap, "category"),
-      performanceByTopic: formatPerformanceArray(topicPerformanceMap, "topic"),
-      performanceByDifficulty: formatPerformanceArray(difficultyPerformanceMap, "difficulty"),
-      performanceByBloomLevel: formatPerformanceArray(bloomLevelPerformanceMap, "bloomLevel")
-    };
-  }
-  getElapsedTime() {
-    return Date.now() - this.overallStartTime;
-  }
-  destroy() {
-    this.stopTimer();
-    this._recordCurrentQuestionTime();
-    if (this.scormService && this.scormService.hasAPI()) {
-      if (["initialized", "committed", "sending_data"].includes(this.quizResultState.scormStatus || "")) {
-        const termResult = this.scormService.terminate();
-        if (termResult.success) {
-          this.quizResultState.scormStatus = "terminated";
-        } else {
-          this.quizResultState.scormStatus = "error";
-          this.quizResultState.scormError = termResult.error || "SCORM termination failed on destroy.";
-        }
-      }
-    }
-    this.scormService = null;
-  }
 };
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
 // src/react-ui/components/elements/radio-group.tsx
-var RadioGroup = React25.forwardRef((_a, ref) => {
+var RadioGroup = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     RadioGroupPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn("grid gap-2", className)
@@ -903,9 +1600,9 @@ var RadioGroup = React25.forwardRef((_a, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React25.forwardRef((_a, ref) => {
+var RadioGroupItem = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     RadioGroupPrimitive.Item,
     __spreadValues({
       ref,
@@ -914,16 +1611,16 @@ var RadioGroupItem = React25.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React25.createElement(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center" }, /* @__PURE__ */ React25.createElement(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }))
+    /* @__PURE__ */ React28.createElement(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center" }, /* @__PURE__ */ React28.createElement(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }))
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React25.forwardRef((_a, ref) => {
+var Label = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     LabelPrimitive.Root,
     __spreadValues({
       ref,
@@ -932,9 +1629,9 @@ var Label = React25.forwardRef((_a, ref) => {
   );
 });
 Label.displayName = LabelPrimitive.Root.displayName;
-var Card = React25.forwardRef((_a, ref) => {
+var Card = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     __spreadValues({
       ref,
@@ -946,9 +1643,9 @@ var Card = React25.forwardRef((_a, ref) => {
   );
 });
 Card.displayName = "Card";
-var CardHeader = React25.forwardRef((_a, ref) => {
+var CardHeader = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     __spreadValues({
       ref,
@@ -957,9 +1654,9 @@ var CardHeader = React25.forwardRef((_a, ref) => {
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React25.forwardRef((_a, ref) => {
+var CardTitle = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     __spreadValues({
       ref,
@@ -971,9 +1668,9 @@ var CardTitle = React25.forwardRef((_a, ref) => {
   );
 });
 CardTitle.displayName = "CardTitle";
-var CardDescription = React25.forwardRef((_a, ref) => {
+var CardDescription = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     __spreadValues({
       ref,
@@ -982,14 +1679,14 @@ var CardDescription = React25.forwardRef((_a, ref) => {
   );
 });
 CardDescription.displayName = "CardDescription";
-var CardContent = React25.forwardRef((_a, ref) => {
+var CardContent = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
+  return /* @__PURE__ */ React28.createElement("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React25.forwardRef((_a, ref) => {
+var CardFooter = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     __spreadValues({
       ref,
@@ -1040,7 +1737,7 @@ var MarkdownRenderer = ({
   const processedContent = processContentForVideos(content);
   return (
     // Using Tailwind Typography for beautiful default styling of markdown content
-    /* @__PURE__ */ React25__default.createElement("div", { className: `prose dark:prose-invert max-w-none ${className}` }, /* @__PURE__ */ React25__default.createElement(
+    /* @__PURE__ */ React28__default.createElement("div", { className: `prose dark:prose-invert max-w-none ${className}` }, /* @__PURE__ */ React28__default.createElement(
       ReactMarkdown,
       {
         remarkPlugins: [remarkGfm, remarkMath],
@@ -1053,7 +1750,7 @@ var MarkdownRenderer = ({
             const { platform, id } = getVideoId(src);
             if (platform && id) {
               const videoSrc = platform === "youtube" ? `https://www.youtube.com/embed/${id}` : `https://player.vimeo.com/video/${id}`;
-              return /* @__PURE__ */ React25__default.createElement("div", { className: "aspect-w-16 aspect-h-9 my-4" }, /* @__PURE__ */ React25__default.createElement(
+              return /* @__PURE__ */ React28__default.createElement("div", { className: "aspect-w-16 aspect-h-9 my-4" }, /* @__PURE__ */ React28__default.createElement(
                 "iframe",
                 {
                   src: videoSrc,
@@ -1066,7 +1763,7 @@ var MarkdownRenderer = ({
             }
             return (
               // eslint-disable-next-line @next/next/no-img-element
-              /* @__PURE__ */ React25__default.createElement(
+              /* @__PURE__ */ React28__default.createElement(
                 "img",
                 __spreadProps(__spreadValues({}, props), {
                   style: {
@@ -1083,12 +1780,12 @@ var MarkdownRenderer = ({
           // Override the default table to add responsive wrapper
           table: (_c) => {
             var _d = _c, { node } = _d, props = __objRest(_d, ["node"]);
-            return /* @__PURE__ */ React25__default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React25__default.createElement("table", __spreadProps(__spreadValues({}, props), { className: "my-4 w-full text-sm" })));
+            return /* @__PURE__ */ React28__default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React28__default.createElement("table", __spreadProps(__spreadValues({}, props), { className: "my-4 w-full text-sm" })));
           },
           // Override default blockquote for better styling
           blockquote: (_e) => {
             var _f = _e, { node } = _f, props = __objRest(_f, ["node"]);
-            return /* @__PURE__ */ React25__default.createElement(
+            return /* @__PURE__ */ React28__default.createElement(
               "blockquote",
               __spreadProps(__spreadValues({}, props), {
                 className: "border-l-4 border-primary bg-muted/50 p-4 my-4 italic"
@@ -1113,7 +1810,7 @@ var MultipleChoiceQuestionUI = ({
   const handleSelection = (value) => {
     onAnswerChange(value);
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__default.createElement(
     RadioGroup,
     {
       value: userAnswer || void 0,
@@ -1136,17 +1833,17 @@ var MultipleChoiceQuestionUI = ({
       } else {
         itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
       }
-      return /* @__PURE__ */ React25__default.createElement(
+      return /* @__PURE__ */ React28__default.createElement(
         Label,
         {
           key: option.id,
           htmlFor: option.id,
           className: itemClassName
         },
-        /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React25__default.createElement(RadioGroupItem, { value: option.id, id: option.id, className: "mr-3" }), /* @__PURE__ */ React25__default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: option.text })))
+        /* @__PURE__ */ React28__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React28__default.createElement(RadioGroupItem, { value: option.id, id: option.id, className: "mr-3" }), /* @__PURE__ */ React28__default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: option.text })))
       );
     })
-  ), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+  ), showCorrectAnswer && explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
 };
 var TrueFalseQuestionUI = ({
   question,
@@ -1162,7 +1859,7 @@ var TrueFalseQuestionUI = ({
   const handleSelection = (value) => {
     onAnswerChange(value);
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__default.createElement(
     RadioGroup,
     {
       value: userAnswer || void 0,
@@ -1185,21 +1882,21 @@ var TrueFalseQuestionUI = ({
       } else {
         itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
       }
-      return /* @__PURE__ */ React25__default.createElement(
+      return /* @__PURE__ */ React28__default.createElement(
         Label,
         {
           key: option.id,
           htmlFor: option.id,
           className: itemClassName
         },
-        /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React25__default.createElement(RadioGroupItem, { value: option.value, id: option.id, className: "mr-3" }), /* @__PURE__ */ React25__default.createElement("span", { className: "text-base" }, option.label))
+        /* @__PURE__ */ React28__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React28__default.createElement(RadioGroupItem, { value: option.value, id: option.id, className: "mr-3" }), /* @__PURE__ */ React28__default.createElement("span", { className: "text-base" }, option.label))
       );
     })
-  ), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+  ), showCorrectAnswer && explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
 };
-var Checkbox = React25.forwardRef((_a, ref) => {
+var Checkbox = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     CheckboxPrimitive.Root,
     __spreadValues({
       ref,
@@ -1208,12 +1905,12 @@ var Checkbox = React25.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React28.createElement(
       CheckboxPrimitive.Indicator,
       {
         className: cn("flex items-center justify-center text-current")
       },
-      /* @__PURE__ */ React25.createElement(Check, { className: "h-4 w-4" })
+      /* @__PURE__ */ React28.createElement(Check, { className: "h-4 w-4" })
     )
   );
 });
@@ -1241,7 +1938,7 @@ var MultipleResponseQuestionUI = ({
     }
     onAnswerChange(newAnswers.length > 0 ? newAnswers : null);
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-3", role: "group", "aria-labelledby": `question-prompt-${questionId}` }, options.map((option) => {
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__default.createElement("div", { className: "space-y-3", role: "group", "aria-labelledby": `question-prompt-${questionId}` }, options.map((option) => {
     const isSelected = Array.isArray(userAnswer) && userAnswer.includes(option.id);
     const isCorrectOption = correctAnswerIds.includes(option.id);
     let itemClassName = "p-4 rounded-lg border-2 transition-all cursor-pointer hover:border-primary flex items-center";
@@ -1254,14 +1951,14 @@ var MultipleResponseQuestionUI = ({
     } else {
       itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
     }
-    return /* @__PURE__ */ React25__default.createElement(
+    return /* @__PURE__ */ React28__default.createElement(
       Label,
       {
         key: option.id,
         htmlFor: option.id,
         className: itemClassName
       },
-      /* @__PURE__ */ React25__default.createElement(
+      /* @__PURE__ */ React28__default.createElement(
         Checkbox,
         {
           id: option.id,
@@ -1271,14 +1968,14 @@ var MultipleResponseQuestionUI = ({
           "aria-label": option.text.replace(/<[^>]*>?/gm, "")
         }
       ),
-      /* @__PURE__ */ React25__default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: option.text }))
+      /* @__PURE__ */ React28__default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: option.text }))
     );
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
 };
-var Input = React25.forwardRef(
+var Input = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React28.createElement(
       "input",
       __spreadValues({
         type,
@@ -1312,7 +2009,7 @@ var ShortAnswerQuestionUI = ({
       (accAns) => isCaseSensitive ? accAns.trim() === userAnswerTrimmed : accAns.trim().toLowerCase() === userAnswerTrimmed.toLowerCase()
     );
   }
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `short-answer-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__default.createElement(Label, { htmlFor: `short-answer-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React28__default.createElement(
     Input,
     {
       id: `short-answer-input-${questionId}`,
@@ -1325,7 +2022,7 @@ var ShortAnswerQuestionUI = ({
             ${showCorrectAnswer && userAnswer ? isActuallyCorrect ? "border-green-500 focus-visible:ring-green-500" : "border-destructive focus-visible:ring-destructive" : "border-input"}
           `
     }
-  ), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer && !isActuallyCorrect && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React25__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Accepted Answers:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside text-sm text-accent-foreground/80" }, acceptedAnswers.map((ans, idx) => /* @__PURE__ */ React25__default.createElement("li", { key: idx }, ans))), isCaseSensitive && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "(Case-sensitive)")), explanation && /* @__PURE__ */ React25__default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+  ), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer && !isActuallyCorrect && /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React28__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Accepted Answers:"), /* @__PURE__ */ React28__default.createElement("ul", { className: "list-disc list-inside text-sm text-accent-foreground/80" }, acceptedAnswers.map((ans, idx) => /* @__PURE__ */ React28__default.createElement("li", { key: idx }, ans))), isCaseSensitive && /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "(Case-sensitive)")), explanation && /* @__PURE__ */ React28__default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
 };
 var NumericQuestionUI = ({
   question,
@@ -1348,7 +2045,7 @@ var NumericQuestionUI = ({
       isActuallyCorrect = tolerance !== void 0 && tolerance !== null ? Math.abs(userAnswerNum - correctAnswerValue) <= tolerance : userAnswerNum === correctAnswerValue;
     }
   }
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `numeric-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__default.createElement(Label, { htmlFor: `numeric-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React28__default.createElement(
     Input,
     {
       id: `numeric-input-${questionId}`,
@@ -1363,7 +2060,7 @@ var NumericQuestionUI = ({
             ${showCorrectAnswer && userAnswer !== null && userAnswer !== "" ? isActuallyCorrect ? "border-green-500 focus-visible:ring-green-500" : "border-destructive focus-visible:ring-destructive" : "border-input"}
           `
     }
-  ), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer !== null && userAnswer !== "" && !isActuallyCorrect && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React25__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Correct Answer:"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-accent-foreground/80" }, correctAnswerValue, tolerance !== void 0 && tolerance !== null && tolerance > 0 && ` (Tolerance: \xB1${tolerance}, Accepted range: ${correctAnswerValue - tolerance} to ${correctAnswerValue + tolerance})`)), explanation && /* @__PURE__ */ React25__default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+  ), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer !== null && userAnswer !== "" && !isActuallyCorrect && /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React28__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Correct Answer:"), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-accent-foreground/80" }, correctAnswerValue, tolerance !== void 0 && tolerance !== null && tolerance > 0 && ` (Tolerance: \xB1${tolerance}, Accepted range: ${correctAnswerValue - tolerance} to ${correctAnswerValue + tolerance})`)), explanation && /* @__PURE__ */ React28__default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
 };
 var FillInTheBlanksQuestionUI = ({
   question,
@@ -1403,10 +2100,10 @@ var FillInTheBlanksQuestionUI = ({
       (accVal) => caseSensitive ? accVal.trim() === userAnswerForBlank : accVal.trim().toLowerCase() === userAnswerForBlank.toLowerCase()
     );
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement("div", { className: "text-base leading-relaxed flex flex-wrap items-center gap-x-1", "aria-labelledby": `question-prompt-${questionId}` }, segments.map((segment, index) => {
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__default.createElement("div", { className: "text-base leading-relaxed flex flex-wrap items-center gap-x-1", "aria-labelledby": `question-prompt-${questionId}` }, segments.map((segment, index) => {
     var _a;
     if (segment.type === "text") {
-      return /* @__PURE__ */ React25__default.createElement(
+      return /* @__PURE__ */ React28__default.createElement(
         MarkdownRenderer,
         {
           key: `text-${index}`,
@@ -1424,7 +2121,7 @@ var FillInTheBlanksQuestionUI = ({
       } else {
         inputClassName += " border-input";
       }
-      return /* @__PURE__ */ React25__default.createElement(
+      return /* @__PURE__ */ React28__default.createElement(
         Input,
         {
           key: blankId,
@@ -1440,11 +2137,11 @@ var FillInTheBlanksQuestionUI = ({
       );
     }
     return null;
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch chung:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-3" }, correctAnswersMap.map((ansDef) => {
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch chung:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 space-y-3" }, correctAnswersMap.map((ansDef) => {
     var _a;
     const isBlankCorrect = getCorrectnessForBlank(ansDef.blankId);
     const userAnswerDisplay = userInputs[ansDef.blankId] || "Ch\u01B0a tr\u1EA3 l\u1EDDi";
-    return /* @__PURE__ */ React25__default.createElement("div", { key: `feedback-${ansDef.blankId}`, className: `p-2 border rounded-md ${isBlankCorrect ? "border-green-500/50 bg-green-500/10" : "border-destructive/50 bg-destructive/10"}` }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold" }, "\xD4 tr\u1ED1ng '", ((_a = segments.find((s) => s.id === ansDef.blankId && s.type === "blank")) == null ? void 0 : _a.id) || ansDef.blankId, "':"), ' B\u1EA1n \u0111\xE3 \u0111i\u1EC1n: "', userAnswerDisplay, '".'), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs" }, "\u0110\xE1p \xE1n ch\u1EA5p nh\u1EADn: ", ansDef.acceptedValues.join(", ")));
+    return /* @__PURE__ */ React28__default.createElement("div", { key: `feedback-${ansDef.blankId}`, className: `p-2 border rounded-md ${isBlankCorrect ? "border-green-500/50 bg-green-500/10" : "border-destructive/50 bg-destructive/10"}` }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React28__default.createElement("span", { className: "font-semibold" }, "\xD4 tr\u1ED1ng '", ((_a = segments.find((s) => s.id === ansDef.blankId && s.type === "blank")) == null ? void 0 : _a.id) || ansDef.blankId, "':"), ' B\u1EA1n \u0111\xE3 \u0111i\u1EC1n: "', userAnswerDisplay, '".'), /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs" }, "\u0110\xE1p \xE1n ch\u1EA5p nh\u1EADn: ", ansDef.acceptedValues.join(", ")));
   }))));
 };
 var buttonVariants = cva(
@@ -1472,11 +2169,11 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React25.forwardRef(
+var Button = React28.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React28.createElement(
       Comp,
       __spreadValues({
         className: cn(buttonVariants({ variant, size, className })),
@@ -1536,37 +2233,37 @@ var SequenceQuestionUI = ({
     if (!showCorrectAnswer || !Array.isArray(userAnswer) || userAnswer.length <= index) return null;
     const userItemId = userAnswer[index];
     const correctItemId = correctOrder[index];
-    return userItemId === correctItemId ? /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "h-4 w-4 text-green-500 ml-2 flex-shrink-0" }) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-4 w-4 text-destructive ml-2 flex-shrink-0" });
+    return userItemId === correctItemId ? /* @__PURE__ */ React28__default.createElement(CheckCircle, { className: "h-4 w-4 text-green-500 ml-2 flex-shrink-0" }) : /* @__PURE__ */ React28__default.createElement(XCircle, { className: "h-4 w-4 text-destructive ml-2 flex-shrink-0" });
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-6" }, /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React25__default.createElement(Label, { className: "font-semibold" }, "S\u1EAFp x\u1EBFp c\xE1c m\u1EE5c sau theo \u0111\xFAng th\u1EE9 t\u1EF1:"), /* @__PURE__ */ React25__default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2" }, availableItems.map((item) => /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0 space-y-6" }, /* @__PURE__ */ React28__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React28__default.createElement(Label, { className: "font-semibold" }, "S\u1EAFp x\u1EBFp c\xE1c m\u1EE5c sau theo \u0111\xFAng th\u1EE9 t\u1EF1:"), /* @__PURE__ */ React28__default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2" }, availableItems.map((item) => /* @__PURE__ */ React28__default.createElement(
     Button,
     {
       key: item.id,
       variant: "outline",
       onClick: () => handleSelectItem(item),
-      className: "justify-start text-left h-auto py-2 px-3",
+      className: "justify-start text-left h-auto py-2 px-3 whitespace-normal",
       disabled: showCorrectAnswer
     },
-    /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item.content })
-  ))), availableItems.length === 0 && selectedSequence.length > 0 && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, 'T\u1EA5t c\u1EA3 c\xE1c m\u1EE5c \u0111\xE3 \u0111\u01B0\u1EE3c ch\u1ECDn. Nh\u1EA5p v\xE0o m\u1EE5c trong "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn" \u0111\u1EC3 b\u1ECF ch\u1ECDn.')), /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React25__default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React25__default.createElement(Label, { className: "font-semibold" }, "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn:"), /* @__PURE__ */ React25__default.createElement(Button, { variant: "ghost", size: "sm", onClick: handleResetSequence, disabled: showCorrectAnswer || selectedSequence.length === 0 }, /* @__PURE__ */ React25__default.createElement(RotateCcw, { className: "mr-2 h-3.5 w-3.5" }), " \u0110\u1EB7t l\u1EA1i")), selectedSequence.length === 0 ? /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground p-3 border border-dashed rounded-md" }, "Ch\u01B0a ch\u1ECDn m\u1EE5c n\xE0o. Nh\u1EA5p v\xE0o c\xE1c m\u1EE5c \u1EDF tr\xEAn \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u.") : /* @__PURE__ */ React25__default.createElement("ul", { className: "space-y-2" }, selectedSequence.map((item, index) => /* @__PURE__ */ React25__default.createElement(
+    /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: item.content })
+  ))), availableItems.length === 0 && selectedSequence.length > 0 && /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground" }, 'T\u1EA5t c\u1EA3 c\xE1c m\u1EE5c \u0111\xE3 \u0111\u01B0\u1EE3c ch\u1ECDn. Nh\u1EA5p v\xE0o m\u1EE5c trong "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn" \u0111\u1EC3 b\u1ECF ch\u1ECDn.')), /* @__PURE__ */ React28__default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React28__default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React28__default.createElement(Label, { className: "font-semibold" }, "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn:"), /* @__PURE__ */ React28__default.createElement(Button, { variant: "ghost", size: "sm", onClick: handleResetSequence, disabled: showCorrectAnswer || selectedSequence.length === 0 }, /* @__PURE__ */ React28__default.createElement(RotateCcw, { className: "mr-2 h-3.5 w-3.5" }), " \u0110\u1EB7t l\u1EA1i")), selectedSequence.length === 0 ? /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground p-3 border border-dashed rounded-md" }, "Ch\u01B0a ch\u1ECDn m\u1EE5c n\xE0o. Nh\u1EA5p v\xE0o c\xE1c m\u1EE5c \u1EDF tr\xEAn \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u.") : /* @__PURE__ */ React28__default.createElement("ul", { className: "space-y-2" }, selectedSequence.map((item, index) => /* @__PURE__ */ React28__default.createElement(
     "li",
     {
       key: item.id,
       onClick: () => handleRemoveFromSequence(item, index),
-      className: `flex items-center justify-between p-3 border rounded-md ${showCorrectAnswer ? (userAnswer == null ? void 0 : userAnswer[index]) === correctOrder[index] ? "border-green-500 bg-green-500/10" : "border-destructive bg-destructive/10" : "bg-muted/30 cursor-pointer hover:border-destructive/50"} transition-colors`
+      className: `flex items-center justify-between p-3 border rounded-md whitespace-normal ${showCorrectAnswer ? (userAnswer == null ? void 0 : userAnswer[index]) === correctOrder[index] ? "border-green-500 bg-green-500/10" : "border-destructive bg-destructive/10" : "bg-muted/30 cursor-pointer hover:border-destructive/50"} transition-colors`
     },
-    /* @__PURE__ */ React25__default.createElement("div", { className: "flex-grow flex items-center" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold mr-2" }, index + 1, "."), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item.content })),
-    showCorrectAnswer ? getFeedbackIcon(index) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-4 w-4 text-muted-foreground hover:text-destructive flex-shrink-0" })
-  )))), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Th\u1EE9 t\u1EF1 \u0111\xFAng:"), /* @__PURE__ */ React25__default.createElement("ol", { className: "list-decimal list-inside text-sm text-accent-foreground/80 space-y-1 mt-1" }, correctOrder.map((itemId) => {
+    /* @__PURE__ */ React28__default.createElement("div", { className: "flex-grow flex items-center" }, /* @__PURE__ */ React28__default.createElement("span", { className: "font-semibold mr-2" }, index + 1, "."), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: item.content })),
+    showCorrectAnswer ? getFeedbackIcon(index) : /* @__PURE__ */ React28__default.createElement(XCircle, { className: "h-4 w-4 text-muted-foreground hover:text-destructive flex-shrink-0" })
+  )))), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Th\u1EE9 t\u1EF1 \u0111\xFAng:"), /* @__PURE__ */ React28__default.createElement("ol", { className: "list-decimal list-inside text-sm text-accent-foreground/80 space-y-1 mt-1" }, correctOrder.map((itemId) => {
     const item = items.find((i) => i.id === itemId);
-    return /* @__PURE__ */ React25__default.createElement("li", { key: itemId }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item ? item.content : "Kh\xF4ng t\xECm th\u1EA5y m\u1EE5c" }));
-  }))), explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+    return /* @__PURE__ */ React28__default.createElement("li", { key: itemId }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: item ? item.content : "Kh\xF4ng t\xECm th\u1EA5y m\u1EE5c" }));
+  }))), explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
 };
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React25.forwardRef((_a, ref) => {
+var SelectTrigger = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     SelectPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -1576,13 +2273,13 @@ var SelectTrigger = React25.forwardRef((_a, ref) => {
       )
     }, props),
     children,
-    /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React25.createElement(ChevronDown, { className: "h-4 w-4 opacity-50" }))
+    /* @__PURE__ */ React28.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React28.createElement(ChevronDown, { className: "h-4 w-4 opacity-50" }))
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React25.forwardRef((_a, ref) => {
+var SelectScrollUpButton = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     SelectPrimitive.ScrollUpButton,
     __spreadValues({
       ref,
@@ -1591,13 +2288,13 @@ var SelectScrollUpButton = React25.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React25.createElement(ChevronUp, { className: "h-4 w-4" })
+    /* @__PURE__ */ React28.createElement(ChevronUp, { className: "h-4 w-4" })
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React25.forwardRef((_a, ref) => {
+var SelectScrollDownButton = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     SelectPrimitive.ScrollDownButton,
     __spreadValues({
       ref,
@@ -1606,13 +2303,13 @@ var SelectScrollDownButton = React25.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React25.createElement(ChevronDown, { className: "h-4 w-4" })
+    /* @__PURE__ */ React28.createElement(ChevronDown, { className: "h-4 w-4" })
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React25.forwardRef((_a, ref) => {
+var SelectContent = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
-  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React28.createElement(
     SelectPrimitive.Content,
     __spreadValues({
       ref,
@@ -1623,8 +2320,8 @@ var SelectContent = React25.forwardRef((_a, ref) => {
       ),
       position
     }, props),
-    /* @__PURE__ */ React25.createElement(SelectScrollUpButton, null),
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React28.createElement(SelectScrollUpButton, null),
+    /* @__PURE__ */ React28.createElement(
       SelectPrimitive.Viewport,
       {
         className: cn(
@@ -1634,13 +2331,13 @@ var SelectContent = React25.forwardRef((_a, ref) => {
       },
       children
     ),
-    /* @__PURE__ */ React25.createElement(SelectScrollDownButton, null)
+    /* @__PURE__ */ React28.createElement(SelectScrollDownButton, null)
   ));
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React25.forwardRef((_a, ref) => {
+var SelectLabel = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     SelectPrimitive.Label,
     __spreadValues({
       ref,
@@ -1649,9 +2346,9 @@ var SelectLabel = React25.forwardRef((_a, ref) => {
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React25.forwardRef((_a, ref) => {
+var SelectItem = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     SelectPrimitive.Item,
     __spreadValues({
       ref,
@@ -1660,14 +2357,14 @@ var SelectItem = React25.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React25.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(Check, { className: "h-4 w-4" }))),
-    /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children)
+    /* @__PURE__ */ React28.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React28.createElement(Check, { className: "h-4 w-4" }))),
+    /* @__PURE__ */ React28.createElement(SelectPrimitive.ItemText, null, children)
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React25.forwardRef((_a, ref) => {
+var SelectSeparator = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     SelectPrimitive.Separator,
     __spreadValues({
       ref,
@@ -1720,7 +2417,7 @@ var MatchingQuestionUI = ({
     }
     return htmlString.replace(/<[^>]*>?/gm, "");
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React25__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4" }, prompts.map((promptItem) => {
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React28__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4" }, prompts.map((promptItem) => {
     var _a;
     const selectedOptionId = currentAnswers[promptItem.id] || "";
     const correctOptionId = getCorrectOptionIdForPrompt(promptItem.id);
@@ -1729,21 +2426,21 @@ var MatchingQuestionUI = ({
     if (showCorrectAnswer && selectedOptionId) {
       borderColor = isSelectionCorrect ? "border-green-500" : "border-destructive";
     }
-    return /* @__PURE__ */ React25__default.createElement("div", { key: promptItem.id, className: `p-3 border rounded-md ${borderColor} transition-colors bg-background` }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `select-prompt-${promptItem.id}`, className: "font-medium text-base block mb-2" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: promptItem.content })), /* @__PURE__ */ React25__default.createElement(
+    return /* @__PURE__ */ React28__default.createElement("div", { key: promptItem.id, className: `p-3 border rounded-md ${borderColor} transition-colors bg-background` }, /* @__PURE__ */ React28__default.createElement(Label, { htmlFor: `select-prompt-${promptItem.id}`, className: "font-medium text-base block mb-2 whitespace-normal" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: promptItem.content })), /* @__PURE__ */ React28__default.createElement(
       Select,
       {
         value: selectedOptionId,
         onValueChange: (value) => handleSelectChange(promptItem.id, value),
         disabled: showCorrectAnswer
       },
-      /* @__PURE__ */ React25__default.createElement(SelectTrigger, { id: `select-prompt-${promptItem.id}` }, /* @__PURE__ */ React25__default.createElement(SelectValue, { placeholder: "Ch\u1ECDn \u0111\xE1p \xE1n..." })),
-      /* @__PURE__ */ React25__default.createElement(SelectContent, null, shuffledOptions.map((option) => /* @__PURE__ */ React25__default.createElement(SelectItem, { key: option.id, value: option.id }, getPlainText(option.content))))
-    ), showCorrectAnswer && selectedOptionId && (isSelectionCorrect ? /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "h-5 w-5 text-green-500 mt-2 inline-block" }) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-5 w-5 text-destructive mt-2 inline-block" })), showCorrectAnswer && !selectedOptionId && correctOptionId && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "Ch\u01B0a ch\u1ECDn. \u0110\xE1p \xE1n \u0111\xFAng: ", getPlainText((_a = shuffledOptions.find((o) => o.id === correctOptionId)) == null ? void 0 : _a.content)));
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, correctAnswerMap.map((map) => {
+      /* @__PURE__ */ React28__default.createElement(SelectTrigger, { id: `select-prompt-${promptItem.id}` }, /* @__PURE__ */ React28__default.createElement(SelectValue, { placeholder: "Ch\u1ECDn \u0111\xE1p \xE1n..." })),
+      /* @__PURE__ */ React28__default.createElement(SelectContent, null, shuffledOptions.map((option) => /* @__PURE__ */ React28__default.createElement(SelectItem, { key: option.id, value: option.id, className: "whitespace-normal" }, getPlainText(option.content))))
+    ), showCorrectAnswer && selectedOptionId && (isSelectionCorrect ? /* @__PURE__ */ React28__default.createElement(CheckCircle, { className: "h-5 w-5 text-green-500 mt-2 inline-block" }) : /* @__PURE__ */ React28__default.createElement(XCircle, { className: "h-5 w-5 text-destructive mt-2 inline-block" })), showCorrectAnswer && !selectedOptionId && correctOptionId && /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "Ch\u01B0a ch\u1ECDn. \u0110\xE1p \xE1n \u0111\xFAng: ", getPlainText((_a = shuffledOptions.find((o) => o.id === correctOptionId)) == null ? void 0 : _a.content)));
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React28__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, correctAnswerMap.map((map) => {
     var _a, _b;
     const promptText = (_a = prompts.find((p) => p.id === map.promptId)) == null ? void 0 : _a.content;
     const optionText = (_b = initialOptions.find((o) => o.id === map.optionId)) == null ? void 0 : _b.content;
-    return /* @__PURE__ */ React25__default.createElement("li", { key: map.promptId }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: `<strong>${getPlainText(promptText) || "N/A"}</strong> gh\xE9p v\u1EDBi <strong>${getPlainText(optionText) || "N/A"}</strong>` }));
+    return /* @__PURE__ */ React28__default.createElement("li", { key: map.promptId }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: `<strong>${getPlainText(promptText) || "N/A"}</strong> gh\xE9p v\u1EDBi <strong>${getPlainText(optionText) || "N/A"}</strong>` }));
   })))));
 };
 var DragAndDropQuestionUI = ({
@@ -1773,7 +2470,7 @@ var DragAndDropQuestionUI = ({
     var _a;
     return (_a = answerMap.find((map) => map.draggableId === draggableItemId)) == null ? void 0 : _a.dropZoneId;
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-4" }, backgroundImageUrl && /* @__PURE__ */ React25__default.createElement("div", { className: "mb-4 overflow-hidden rounded-md border" }, /* @__PURE__ */ React25__default.createElement("img", { src: backgroundImageUrl, alt: question.imageAltText || "Drag and drop background", className: "w-full h-auto object-contain max-h-[300px]", "data-ai-hint": "abstract pattern" })), /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React25__default.createElement(Label, { className: "font-semibold" }, "Gh\xE9p c\xE1c m\u1EE5c sau v\xE0o \u0111\xFAng v\u1ECB tr\xED:"), draggableItems.map((item) => {
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0 space-y-4" }, backgroundImageUrl && /* @__PURE__ */ React28__default.createElement("div", { className: "mb-4 overflow-hidden rounded-md border" }, /* @__PURE__ */ React28__default.createElement("img", { src: backgroundImageUrl, alt: question.imageAltText || "Drag and drop background", className: "w-full h-auto object-contain max-h-[300px]", "data-ai-hint": "abstract pattern" })), /* @__PURE__ */ React28__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React28__default.createElement(Label, { className: "font-semibold" }, "Gh\xE9p c\xE1c m\u1EE5c sau v\xE0o \u0111\xFAng v\u1ECB tr\xED:"), draggableItems.map((item) => {
     const selectedDropZoneId = currentAnswers[item.id] || "";
     const correctDropZoneId = getCorrectDropZoneIdForDraggable(item.id);
     const isSelectionCorrect = showCorrectAnswer && selectedDropZoneId ? selectedDropZoneId === correctDropZoneId : null;
@@ -1783,21 +2480,21 @@ var DragAndDropQuestionUI = ({
     } else {
       itemStyle += " border-muted";
     }
-    return /* @__PURE__ */ React25__default.createElement("div", { key: item.id, className: itemStyle }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `select-draggable-${item.id}`, className: "font-medium text-base mb-2 sm:mb-0 sm:mr-4 flex-1" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item.content })), /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center space-x-2 w-full sm:w-auto" }, /* @__PURE__ */ React25__default.createElement(
+    return /* @__PURE__ */ React28__default.createElement("div", { key: item.id, className: itemStyle }, /* @__PURE__ */ React28__default.createElement(Label, { htmlFor: `select-draggable-${item.id}`, className: "font-medium text-base mb-2 sm:mb-0 sm:mr-4 flex-1" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: item.content })), /* @__PURE__ */ React28__default.createElement("div", { className: "flex items-center space-x-2 w-full sm:w-auto" }, /* @__PURE__ */ React28__default.createElement(
       Select,
       {
         value: selectedDropZoneId,
         onValueChange: (value) => handleSelectChange(item.id, value),
         disabled: showCorrectAnswer
       },
-      /* @__PURE__ */ React25__default.createElement(SelectTrigger, { id: `select-draggable-${item.id}`, className: "w-full sm:min-w-[200px]" }, /* @__PURE__ */ React25__default.createElement(SelectValue, { placeholder: "Ch\u1ECDn v\u1ECB tr\xED..." })),
-      /* @__PURE__ */ React25__default.createElement(SelectContent, null, dropZones.map((zone) => /* @__PURE__ */ React25__default.createElement(SelectItem, { key: zone.id, value: zone.id }, zone.label.replace(/<[^>]*>?/gm, ""))))
-    ), showCorrectAnswer && selectedDropZoneId && (isSelectionCorrect ? /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "h-5 w-5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-5 w-5 text-destructive flex-shrink-0" }))));
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, answerMap.map((map) => {
+      /* @__PURE__ */ React28__default.createElement(SelectTrigger, { id: `select-draggable-${item.id}`, className: "w-full sm:min-w-[200px]" }, /* @__PURE__ */ React28__default.createElement(SelectValue, { placeholder: "Ch\u1ECDn v\u1ECB tr\xED..." })),
+      /* @__PURE__ */ React28__default.createElement(SelectContent, null, dropZones.map((zone) => /* @__PURE__ */ React28__default.createElement(SelectItem, { key: zone.id, value: zone.id }, zone.label.replace(/<[^>]*>?/gm, ""))))
+    ), showCorrectAnswer && selectedDropZoneId && (isSelectionCorrect ? /* @__PURE__ */ React28__default.createElement(CheckCircle, { className: "h-5 w-5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ React28__default.createElement(XCircle, { className: "h-5 w-5 text-destructive flex-shrink-0" }))));
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React28__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, answerMap.map((map) => {
     var _a, _b;
     const draggableText = (_a = draggableItems.find((d) => d.id === map.draggableId)) == null ? void 0 : _a.content;
-    const dropZoneText = (_b = dropZones.find((z) => z.id === map.dropZoneId)) == null ? void 0 : _b.label;
-    return /* @__PURE__ */ React25__default.createElement("li", { key: map.draggableId }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: `<strong>${draggableText || "N/A"}</strong> v\xE0o <strong>${dropZoneText || "N/A"}</strong>` }));
+    const dropZoneText = (_b = dropZones.find((z3) => z3.id === map.dropZoneId)) == null ? void 0 : _b.label;
+    return /* @__PURE__ */ React28__default.createElement("li", { key: map.draggableId }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: `<strong>${draggableText || "N/A"}</strong> v\xE0o <strong>${dropZoneText || "N/A"}</strong>` }));
   })))));
 };
 var HotspotQuestionUI = ({
@@ -1868,7 +2565,7 @@ var HotspotQuestionUI = ({
     tempDiv.innerHTML = htmlString;
     return tempDiv.textContent || tempDiv.innerText || "";
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React25__default.createElement("div", { className: "relative w-full border border-muted rounded-md overflow-hidden", style: { maxWidth: "100%", maxHeight: "500px" } }, /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React28__default.createElement("div", { className: "relative w-full border border-muted rounded-md overflow-hidden", style: { maxWidth: "100%", maxHeight: "500px" } }, /* @__PURE__ */ React28__default.createElement(
     "img",
     {
       src: imageUrl,
@@ -1876,7 +2573,7 @@ var HotspotQuestionUI = ({
       className: "block max-w-full max-h-full object-contain",
       "data-ai-hint": question.imageAltText ? question.imageAltText.split(" ").slice(0, 2).join(" ") : "diagram illustration"
     }
-  ), hotspots.map((hotspot) => /* @__PURE__ */ React25__default.createElement(
+  ), hotspots.map((hotspot) => /* @__PURE__ */ React28__default.createElement(
     "div",
     {
       key: hotspot.id,
@@ -1890,9 +2587,9 @@ var HotspotQuestionUI = ({
         if (e.key === "Enter" || e.key === " ") handleHotspotClick(hotspot.id);
       }
     }
-  ))), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-md" }, "Correct Hotspots:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, (correctAnswerIds || []).map((id) => {
+  ))), showCorrectAnswer && explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__default.createElement("p", { className: "font-semibold text-md" }, "Correct Hotspots:"), /* @__PURE__ */ React28__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, (correctAnswerIds || []).map((id) => {
     const hotspot = hotspots.find((h) => h.id === id);
-    return /* @__PURE__ */ React25__default.createElement("li", { key: id }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: (hotspot == null ? void 0 : hotspot.description) || (hotspot == null ? void 0 : hotspot.id) || "N/A", className: "inline" }));
+    return /* @__PURE__ */ React28__default.createElement("li", { key: id }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: (hotspot == null ? void 0 : hotspot.description) || (hotspot == null ? void 0 : hotspot.id) || "N/A", className: "inline" }));
   })))));
 };
 var loadScript = (src, async = true) => {
@@ -2010,7 +2707,7 @@ var useBlocklyLoader = () => {
   }, []);
   return { isLoading, loadError, isReady, retry };
 };
-var BlocklyProgrammingQuestionUI = React25__default.forwardRef(({
+var BlocklyProgrammingQuestionUI = React28__default.forwardRef(({
   question,
   userAnswer,
   showCorrectAnswer = false
@@ -2185,7 +2882,7 @@ var BlocklyProgrammingQuestionUI = React25__default.forwardRef(({
   }, [blocklyReady]);
   const workspaceHeight = showCorrectAnswer ? "300px" : "450px";
   const workspaceContainerId = `blockly-workspace-container-${question.id}`;
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: question.prompt })), question.points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, blocklyLoading && /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: question.prompt })), question.points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, blocklyLoading && /* @__PURE__ */ React28__default.createElement(
     "div",
     {
       style: {
@@ -2197,8 +2894,8 @@ var BlocklyProgrammingQuestionUI = React25__default.forwardRef(({
       },
       className: "flex items-center justify-center"
     },
-    /* @__PURE__ */ React25__default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-muted-foreground animate-pulse mb-2" }, "Loading Blockly Environment..."), /* @__PURE__ */ React25__default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto" }))
-  ), blocklyLoadError && !blocklyLoading && /* @__PURE__ */ React25__default.createElement(
+    /* @__PURE__ */ React28__default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-muted-foreground animate-pulse mb-2" }, "Loading Blockly Environment..."), /* @__PURE__ */ React28__default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto" }))
+  ), blocklyLoadError && !blocklyLoading && /* @__PURE__ */ React28__default.createElement(
     "div",
     {
       style: {
@@ -2210,14 +2907,14 @@ var BlocklyProgrammingQuestionUI = React25__default.forwardRef(({
       },
       className: "flex items-center justify-center p-4"
     },
-    /* @__PURE__ */ React25__default.createElement("div", { className: "text-destructive text-center" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-lg" }, "Failed to load Blockly"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm mt-2 mb-3" }, blocklyLoadError), /* @__PURE__ */ React25__default.createElement("div", { className: "space-x-2" }, /* @__PURE__ */ React25__default.createElement(
+    /* @__PURE__ */ React28__default.createElement("div", { className: "text-destructive text-center" }, /* @__PURE__ */ React28__default.createElement("p", { className: "font-semibold text-lg" }, "Failed to load Blockly"), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm mt-2 mb-3" }, blocklyLoadError), /* @__PURE__ */ React28__default.createElement("div", { className: "space-x-2" }, /* @__PURE__ */ React28__default.createElement(
       "button",
       {
         onClick: retry,
         className: "px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors text-sm"
       },
       "Try Again"
-    ), /* @__PURE__ */ React25__default.createElement(
+    ), /* @__PURE__ */ React28__default.createElement(
       "button",
       {
         onClick: () => window.location.reload(),
@@ -2225,7 +2922,7 @@ var BlocklyProgrammingQuestionUI = React25__default.forwardRef(({
       },
       "Refresh Page"
     )))
-  ), !blocklyLoading && !blocklyLoadError && /* @__PURE__ */ React25__default.createElement(
+  ), !blocklyLoading && !blocklyLoadError && /* @__PURE__ */ React28__default.createElement(
     "div",
     {
       id: workspaceContainerId,
@@ -2242,7 +2939,7 @@ var BlocklyProgrammingQuestionUI = React25__default.forwardRef(({
       },
       "aria-label": `Blockly programming workspace for question: ${question.prompt}`
     }
-  ), showCorrectAnswer && question.explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" }))));
+  ), showCorrectAnswer && question.explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" }))));
 });
 BlocklyProgrammingQuestionUI.displayName = "BlocklyProgrammingQuestionUI";
 var SCRATCH_JS_ENGINE_LAYOUT_PATH = "/static/scratch-blocks/js/blockly_compressed_vertical.js";
@@ -2523,15 +3220,15 @@ var ScratchProgrammingQuestionUI = forwardRef(({
   }, [isBlocklyReady, initializeWorkspace]);
   const workspaceHeight = showCorrectAnswer ? "300px" : "450px";
   if (isLoadingScripts) {
-    return /* @__PURE__ */ React25__default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React25__default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React25__default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto mb-2" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-muted-foreground" }, "Loading Scratch Assets...")));
+    return /* @__PURE__ */ React28__default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React28__default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React28__default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto mb-2" }), /* @__PURE__ */ React28__default.createElement("p", { className: "text-muted-foreground" }, "Loading Scratch Assets...")));
   }
   if (componentError) {
-    return /* @__PURE__ */ React25__default.createElement("div", { style: { height: workspaceHeight, width: "100%", color: "hsl(var(--destructive))", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--destructive))", borderRadius: "0.375rem", padding: "1rem", backgroundColor: "hsl(var(--card))" } }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-lg mb-2" }, "Failed to load Scratch Workspace."), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground mb-3 text-center" }, componentError), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground mb-4 text-center" }, "Please ensure all Scratch/Blockly JavaScript files are correctly copied to your", /* @__PURE__ */ React25__default.createElement("code", null, "public/static/scratch-blocks/js"), " directory. Check browser console for more details.", /* @__PURE__ */ React25__default.createElement("br", null), /* @__PURE__ */ React25__default.createElement("strong", null, "CRITICAL: Ensure you have copied the CSS files from ", /* @__PURE__ */ React25__default.createElement("code", null, "node_modules/scratch-blocks/css/"), " (e.g., ", /* @__PURE__ */ React25__default.createElement("code", null, "vertical.css"), ") to ", /* @__PURE__ */ React25__default.createElement("code", null, "public/static/scratch-blocks/css/"), " and linked it in your main layout. Without CSS, blocks will not render correctly.")), /* @__PURE__ */ React25__default.createElement(Button, { onClick: attemptLoadScripts, variant: "outline" }, "Try Reloading Scripts"));
+    return /* @__PURE__ */ React28__default.createElement("div", { style: { height: workspaceHeight, width: "100%", color: "hsl(var(--destructive))", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--destructive))", borderRadius: "0.375rem", padding: "1rem", backgroundColor: "hsl(var(--card))" } }, /* @__PURE__ */ React28__default.createElement("p", { className: "font-semibold text-lg mb-2" }, "Failed to load Scratch Workspace."), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground mb-3 text-center" }, componentError), /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-muted-foreground mb-4 text-center" }, "Please ensure all Scratch/Blockly JavaScript files are correctly copied to your", /* @__PURE__ */ React28__default.createElement("code", null, "public/static/scratch-blocks/js"), " directory. Check browser console for more details.", /* @__PURE__ */ React28__default.createElement("br", null), /* @__PURE__ */ React28__default.createElement("strong", null, "CRITICAL: Ensure you have copied the CSS files from ", /* @__PURE__ */ React28__default.createElement("code", null, "node_modules/scratch-blocks/css/"), " (e.g., ", /* @__PURE__ */ React28__default.createElement("code", null, "vertical.css"), ") to ", /* @__PURE__ */ React28__default.createElement("code", null, "public/static/scratch-blocks/css/"), " and linked it in your main layout. Without CSS, blocks will not render correctly.")), /* @__PURE__ */ React28__default.createElement(Button, { onClick: attemptLoadScripts, variant: "outline" }, "Try Reloading Scripts"));
   }
   if (!isBlocklyReady && !isLoadingScripts) {
-    return /* @__PURE__ */ React25__default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-muted-foreground" }, "Scratch environment did not initialize (Blockly not ready). Check console for script loading errors."));
+    return /* @__PURE__ */ React28__default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-muted-foreground" }, "Scratch environment did not initialize (Blockly not ready). Check console for script loading errors."));
   }
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, question.prompt), question.points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, question.prompt), question.points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__default.createElement(
     "div",
     {
       ref: blocklyDivRef,
@@ -2547,17 +3244,237 @@ var ScratchProgrammingQuestionUI = forwardRef(({
       },
       "aria-label": `Scratch programming workspace for question: ${question.prompt}`
     }
-  ), showCorrectAnswer && question.explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-accent-foreground/80" }, question.explanation))));
+  ), showCorrectAnswer && question.explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-accent-foreground/80" }, question.explanation))));
 });
 ScratchProgrammingQuestionUI.displayName = "ScratchProgrammingQuestionUI";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React28.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React28.createElement(
+    TabsPrimitive.List,
+    __spreadValues({
+      ref,
+      className: cn(
+        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        className
+      )
+    }, props)
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React28.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React28.createElement(
+    TabsPrimitive.Trigger,
+    __spreadValues({
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className
+      )
+    }, props)
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React28.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React28.createElement(
+    TabsPrimitive.Content,
+    __spreadValues({
+      ref,
+      className: cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )
+    }, props)
+  );
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+var TOAST_LIMIT = 1;
+var TOAST_REMOVE_DELAY = 1e6;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+var addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId
+    });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return __spreadProps(__spreadValues({}, state), {
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      });
+    case "UPDATE_TOAST":
+      return __spreadProps(__spreadValues({}, state), {
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? __spreadValues(__spreadValues({}, t), action.toast) : t
+        )
+      });
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast2) => {
+          addToRemoveQueue(toast2.id);
+        });
+      }
+      return __spreadProps(__spreadValues({}, state), {
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? __spreadProps(__spreadValues({}, t), {
+            open: false
+          }) : t
+        )
+      });
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) {
+        return __spreadProps(__spreadValues({}, state), {
+          toasts: []
+        });
+      }
+      return __spreadProps(__spreadValues({}, state), {
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      });
+  }
+};
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+function toast(_a) {
+  var props = __objRest(_a, []);
+  const id = genId();
+  const update = (props2) => dispatch({
+    type: "UPDATE_TOAST",
+    toast: __spreadProps(__spreadValues({}, props2), { id })
+  });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: __spreadProps(__spreadValues({}, props), {
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      }
+    })
+  });
+  return {
+    id,
+    dismiss,
+    update
+  };
+}
+function useToast() {
+  const [state, setState] = React28.useState(memoryState);
+  React28.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  return __spreadProps(__spreadValues({}, state), {
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
+  });
+}
 
-// src/react-ui/components/ui/QuestionRenderer.tsx
-var QuestionRenderer = React25__default.forwardRef(({
+// src/react-ui/components/ui/CodingQuestionUI.tsx
+var languageMap = {
+  cpp: cpp(),
+  javascript: javascript({ typescript: true }),
+  // Use TS extension for better JS support
+  python: python(),
+  swift: javascript({ typescript: true }),
+  // Fallback for Swift syntax highlighting
+  csharp: cpp()
+  // Fallback for C# syntax highlighting
+};
+var CodingQuestionUI = ({
+  question,
+  onAnswerChange,
+  userAnswer,
+  showCorrectAnswer = false
+}) => {
+  const [code, setCode] = useState("");
+  const [isRunningTests, setIsRunningTests] = useState(false);
+  const [testResults, setTestResults] = useState([]);
+  const { toast: toast2 } = useToast();
+  useEffect(() => {
+    const initialCode = typeof userAnswer === "string" ? userAnswer : question.functionSignature || "";
+    setCode(initialCode);
+  }, [question.id, userAnswer, question.functionSignature]);
+  const handleCodeChange = useCallback((value) => {
+    setCode(value);
+    onAnswerChange(value);
+  }, [onAnswerChange]);
+  const handleRunPublicTests = async () => {
+    setIsRunningTests(true);
+    setTestResults([]);
+    try {
+      const evaluationService = new CodeEvaluationService();
+      const results = await evaluationService.evaluatePublicTestCases(question, code);
+      setTestResults(results);
+    } catch (error) {
+      toast2({
+        title: "Evaluation Error",
+        description: error instanceof Error ? error.message : "An unknown error occurred.",
+        variant: "destructive"
+      });
+    } finally {
+      setIsRunningTests(false);
+    }
+  };
+  const langExtension = languageMap[question.codingLanguage];
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: question.prompt })), question.points && /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React28__default.createElement("div", { className: "font-mono text-sm border rounded-md overflow-hidden" }, /* @__PURE__ */ React28__default.createElement(
+    CodeMirror,
+    {
+      value: code,
+      height: "300px",
+      extensions: [langExtension],
+      onChange: handleCodeChange,
+      readOnly: showCorrectAnswer,
+      theme: "dark"
+    }
+  )), !showCorrectAnswer && /* @__PURE__ */ React28__default.createElement(Button, { onClick: handleRunPublicTests, disabled: isRunningTests }, isRunningTests ? /* @__PURE__ */ React28__default.createElement(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ React28__default.createElement(Play, { className: "mr-2 h-4 w-4" }), isRunningTests ? "Running..." : "Run Public Tests"), /* @__PURE__ */ React28__default.createElement(Tabs, { defaultValue: "tests", className: "w-full" }, /* @__PURE__ */ React28__default.createElement(TabsList, null, /* @__PURE__ */ React28__default.createElement(TabsTrigger, { value: "tests" }, "Test Cases"), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement(TabsTrigger, { value: "solution" }, "Solution")), /* @__PURE__ */ React28__default.createElement(TabsContent, { value: "tests" }, /* @__PURE__ */ React28__default.createElement("div", { className: "space-y-2 p-2 border rounded-md min-h-[100px]" }, testResults.length > 0 ? testResults.map((result, index) => /* @__PURE__ */ React28__default.createElement("div", { key: result.testCaseId, className: "flex items-center text-sm" }, result.passed ? /* @__PURE__ */ React28__default.createElement(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }) : /* @__PURE__ */ React28__default.createElement(XCircle, { className: "h-4 w-4 text-destructive mr-2" }), /* @__PURE__ */ React28__default.createElement("span", null, "Test Case #", index + 1, ": ", result.passed ? "Passed" : "Failed"), !result.passed && /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-muted-foreground ml-2" }, "- ", result.reasoning))) : /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground" }, showCorrectAnswer ? "Final results are shown in the quiz summary." : "Click 'Run Public Tests' to see results."))), showCorrectAnswer && /* @__PURE__ */ React28__default.createElement(TabsContent, { value: "solution" }, /* @__PURE__ */ React28__default.createElement("div", { className: "font-mono text-sm border rounded-md overflow-hidden" }, /* @__PURE__ */ React28__default.createElement(
+    CodeMirror,
+    {
+      value: question.solutionCode,
+      height: "300px",
+      extensions: [langExtension],
+      readOnly: true,
+      theme: "dark"
+    }
+  )))), showCorrectAnswer && question.explanation && /* @__PURE__ */ React28__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__default.createElement(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" }))));
+};
+var QuestionRenderer = React28__default.forwardRef(({
   question,
   onAnswerChange,
   userAnswer,
   showCorrectAnswer = false
 }, ref) => {
+  const { t } = useTranslation();
   const commonProps = {
     question,
     onAnswerChange,
@@ -2566,37 +3483,39 @@ var QuestionRenderer = React25__default.forwardRef(({
   };
   switch (question.questionType) {
     case "multiple_choice":
-      return /* @__PURE__ */ React25__default.createElement(MultipleChoiceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(MultipleChoiceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "true_false":
-      return /* @__PURE__ */ React25__default.createElement(TrueFalseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(TrueFalseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "multiple_response":
-      return /* @__PURE__ */ React25__default.createElement(MultipleResponseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(MultipleResponseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "short_answer":
-      return /* @__PURE__ */ React25__default.createElement(ShortAnswerQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(ShortAnswerQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "numeric":
-      return /* @__PURE__ */ React25__default.createElement(NumericQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(NumericQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "fill_in_the_blanks":
-      return /* @__PURE__ */ React25__default.createElement(FillInTheBlanksQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(FillInTheBlanksQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "sequence":
-      return /* @__PURE__ */ React25__default.createElement(SequenceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(SequenceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "matching":
-      return /* @__PURE__ */ React25__default.createElement(MatchingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(MatchingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "drag_and_drop":
-      return /* @__PURE__ */ React25__default.createElement(DragAndDropQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(DragAndDropQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "hotspot":
-      return /* @__PURE__ */ React25__default.createElement(HotspotQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ React28__default.createElement(HotspotQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     case "blockly_programming":
-      return /* @__PURE__ */ React25__default.createElement(BlocklyProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
+      return /* @__PURE__ */ React28__default.createElement(BlocklyProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
     case "scratch_programming":
-      return /* @__PURE__ */ React25__default.createElement(ScratchProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
+      return /* @__PURE__ */ React28__default.createElement(ScratchProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
+    case "coding":
+      return /* @__PURE__ */ React28__default.createElement(CodingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
     default:
-      return /* @__PURE__ */ React25__default.createElement("div", { className: "p-4 border border-destructive bg-destructive/10 rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-destructive" }, "Unsupported Question Type"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, "The question type is not currently supported by the renderer."), /* @__PURE__ */ React25__default.createElement("pre", { className: "mt-2 p-2 bg-muted rounded text-xs font-code overflow-x-auto" }, JSON.stringify(question, null, 2)));
+      return /* @__PURE__ */ React28__default.createElement("div", { className: "p-4 border border-destructive bg-destructive/10 rounded-md" }, /* @__PURE__ */ React28__default.createElement("p", { className: "font-semibold text-destructive" }, t("unsupportedQuestionType")), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground" }, t("unsupportedQuestionTypeDescription")), /* @__PURE__ */ React28__default.createElement("pre", { className: "mt-2 p-2 bg-muted rounded text-xs font-code overflow-x-auto" }, JSON.stringify(question, null, 2)));
   }
 });
 QuestionRenderer.displayName = "QuestionRenderer";
-var Progress = React25.forwardRef((_a, ref) => {
+var Progress = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     ProgressPrimitive.Root,
     __spreadValues({
       ref,
@@ -2605,7 +3524,7 @@ var Progress = React25.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React28.createElement(
       ProgressPrimitive.Indicator,
       {
         className: "h-full w-full flex-1 bg-primary transition-all",
@@ -2616,9 +3535,9 @@ var Progress = React25.forwardRef((_a, ref) => {
 });
 Progress.displayName = ProgressPrimitive.Root.displayName;
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React25.forwardRef((_a, ref) => {
+var AccordionItem = React28.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     AccordionPrimitive.Item,
     __spreadValues({
       ref,
@@ -2627,9 +3546,9 @@ var AccordionItem = React25.forwardRef((_a, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React25.forwardRef((_a, ref) => {
+var AccordionTrigger = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React25.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React28.createElement(
     AccordionPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -2639,39 +3558,39 @@ var AccordionTrigger = React25.forwardRef((_a, ref) => {
       )
     }, props),
     children,
-    /* @__PURE__ */ React25.createElement(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+    /* @__PURE__ */ React28.createElement(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
   ));
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React25.forwardRef((_a, ref) => {
+var AccordionContent = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     AccordionPrimitive.Content,
     __spreadValues({
       ref,
       className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     }, props),
-    /* @__PURE__ */ React25.createElement("div", { className: cn("pb-4 pt-0", className) }, children)
+    /* @__PURE__ */ React28.createElement("div", { className: cn("pb-4 pt-0", className) }, children)
   );
 });
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-var ScrollArea = React25.forwardRef((_a, ref) => {
+var ScrollArea = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     ScrollAreaPrimitive.Root,
     __spreadValues({
       ref,
       className: cn("relative overflow-hidden", className)
     }, props),
-    /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]" }, children),
-    /* @__PURE__ */ React25.createElement(ScrollBar, null),
-    /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Corner, null)
+    /* @__PURE__ */ React28.createElement(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]" }, children),
+    /* @__PURE__ */ React28.createElement(ScrollBar, null),
+    /* @__PURE__ */ React28.createElement(ScrollAreaPrimitive.Corner, null)
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React25.forwardRef((_a, ref) => {
+var ScrollBar = React28.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     __spreadValues({
       ref,
@@ -2683,25 +3602,52 @@ var ScrollBar = React25.forwardRef((_a, ref) => {
         className
       )
     }, props),
-    /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    /* @__PURE__ */ React28.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
   );
 });
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/react-ui/components/ui/QuizResult.tsx
-var QuizResult = ({ result, quizTitle, onExitQuiz }) => {
+var QuizResult = ({
+  result,
+  quizTitle,
+  onExitQuiz,
+  onGenerateReview,
+  showReviewButton = false,
+  isReviewLoading = false
+}) => {
   var _a, _b, _c, _d;
+  const { t } = useTranslation();
   const getAnswerDisplay = (answer) => {
-    if (answer === null || answer === void 0) return "Not Answered";
+    if (answer === null || answer === void 0) return t("practiceFlow.results.notAnswered");
     if (typeof answer === "boolean") return answer ? "True" : "False";
     if (Array.isArray(answer)) return answer.join(", ");
-    if (typeof answer === "object") return JSON.stringify(answer);
+    if (typeof answer === "object") {
+      if (answer.hasOwnProperty("value")) {
+        const value = answer.value;
+        if (value === null || value === void 0) return t("practiceFlow.results.notAnswered");
+        if (typeof value === "boolean") return value ? "True" : "False";
+        if (Array.isArray(value)) return value.join(", ");
+        if (typeof value === "object") return JSON.stringify(value, null, 2);
+        return String(value);
+      }
+      return JSON.stringify(answer, null, 2);
+    }
     return String(answer);
   };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-3xl font-headline text-center" }, "Quiz Results: ", quizTitle), /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-center text-lg" }, "Here's how you performed!")), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "space-y-6" }, /* @__PURE__ */ React25__default.createElement(Card, { className: "bg-secondary/50" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl flex items-center" }, /* @__PURE__ */ React25__default.createElement(BarChart2, { className: "mr-2 h-5 w-5 text-primary" }), "Overall Score")), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center" }, /* @__PURE__ */ React25__default.createElement("div", null, /* @__PURE__ */ React25__default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.score, " / ", result.maxScore), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, "Points")), /* @__PURE__ */ React25__default.createElement("div", null, /* @__PURE__ */ React25__default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.percentage.toFixed(2), "%"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, "Percentage")), /* @__PURE__ */ React25__default.createElement("div", null, result.passed !== void 0 && (result.passed ? /* @__PURE__ */ React25__default.createElement("div", { className: "flex flex-col items-center text-green-600" }, /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xl font-semibold mt-1" }, "Passed")) : /* @__PURE__ */ React25__default.createElement("div", { className: "flex flex-col items-center text-destructive" }, /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xl font-semibold mt-1" }, "Failed")))))), /* @__PURE__ */ React25__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm" }, /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement(Clock, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React25__default.createElement("span", null, "Total time spent:"), /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold" }, (_b = (_a = result.totalTimeSpentSeconds) == null ? void 0 : _a.toFixed(0)) != null ? _b : "N/A", " seconds")), /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement(Percent, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React25__default.createElement("span", null, "Average time per question:"), /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold" }, (_d = (_c = result.averageTimePerQuestionSeconds) == null ? void 0 : _c.toFixed(1)) != null ? _d : "N/A", " seconds"))), result.scormStatus && result.scormStatus !== "idle" && result.scormStatus !== "no_api" && /* @__PURE__ */ React25__default.createElement(Card, null, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-lg" }, "SCORM Sync Status")), /* @__PURE__ */ React25__default.createElement(CardContent, null, /* @__PURE__ */ React25__default.createElement("p", { className: `flex items-center ${result.scormStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.scormStatus === "error" && /* @__PURE__ */ React25__default.createElement(AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold ml-1" }, result.scormStatus)), result.scormError && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.scormError))), result.webhookStatus && result.webhookStatus !== "idle" && /* @__PURE__ */ React25__default.createElement(Card, null, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-lg" }, "Webhook Sync Status")), /* @__PURE__ */ React25__default.createElement(CardContent, null, /* @__PURE__ */ React25__default.createElement("p", { className: `flex items-center ${result.webhookStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.webhookStatus === "error" && /* @__PURE__ */ React25__default.createElement(AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold ml-1" }, result.webhookStatus)), result.webhookError && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.webhookError))), /* @__PURE__ */ React25__default.createElement(Accordion, { type: "single", collapsible: true, className: "w-full" }, /* @__PURE__ */ React25__default.createElement(AccordionItem, { value: "question-breakdown" }, /* @__PURE__ */ React25__default.createElement(AccordionTrigger, { className: "text-lg font-semibold" }, "Detailed Question Breakdown"), /* @__PURE__ */ React25__default.createElement(AccordionContent, null, /* @__PURE__ */ React25__default.createElement(ScrollArea, { className: "h-[300px] pr-4" }, /* @__PURE__ */ React25__default.createElement("ul", { className: "space-y-4" }, result.questionResults.map((qResult, index) => {
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__default.createElement(CardHeader, null, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-3xl font-headline text-center" }, t("practiceFlow.results.title", { quizTitle })), /* @__PURE__ */ React28__default.createElement(CardDescription, { className: "text-center text-lg" }, t("practiceFlow.results.description"))), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "space-y-6" }, /* @__PURE__ */ React28__default.createElement(Card, { className: "bg-secondary/50" }, /* @__PURE__ */ React28__default.createElement(CardHeader, null, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-xl flex items-center" }, /* @__PURE__ */ React28__default.createElement(BarChart2, { className: "mr-2 h-5 w-5 text-primary" }), t("practiceFlow.results.overallScore"))), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center" }, /* @__PURE__ */ React28__default.createElement("div", null, /* @__PURE__ */ React28__default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.score, " / ", result.maxScore), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground" }, t("practiceFlow.results.points"))), /* @__PURE__ */ React28__default.createElement("div", null, /* @__PURE__ */ React28__default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.percentage.toFixed(2), "%"), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground" }, t("practiceFlow.results.percentage"))), /* @__PURE__ */ React28__default.createElement("div", null, result.passed !== void 0 && (result.passed ? /* @__PURE__ */ React28__default.createElement("div", { className: "flex flex-col items-center text-green-600" }, /* @__PURE__ */ React28__default.createElement(CheckCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React28__default.createElement("p", { className: "text-xl font-semibold mt-1" }, t("practiceFlow.results.passed"))) : /* @__PURE__ */ React28__default.createElement("div", { className: "flex flex-col items-center text-destructive" }, /* @__PURE__ */ React28__default.createElement(XCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React28__default.createElement("p", { className: "text-xl font-semibold mt-1" }, t("practiceFlow.results.failed"))))))), /* @__PURE__ */ React28__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm" }, /* @__PURE__ */ React28__default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React28__default.createElement(Clock, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React28__default.createElement("span", null, t("practiceFlow.results.timeSpent")), /* @__PURE__ */ React28__default.createElement("span", { className: "font-semibold" }, (_b = (_a = result.totalTimeSpentSeconds) == null ? void 0 : _a.toFixed(0)) != null ? _b : "N/A", " ", t("practiceFlow.results.timeUnit"))), /* @__PURE__ */ React28__default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React28__default.createElement(Percent, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React28__default.createElement("span", null, t("practiceFlow.results.avgTimePerQuestion")), /* @__PURE__ */ React28__default.createElement("span", { className: "font-semibold" }, (_d = (_c = result.averageTimePerQuestionSeconds) == null ? void 0 : _c.toFixed(1)) != null ? _d : "N/A", " ", t("practiceFlow.results.timeUnit")))), result.scormStatus && result.scormStatus !== "idle" && result.scormStatus !== "no_api" && /* @__PURE__ */ React28__default.createElement(Card, null, /* @__PURE__ */ React28__default.createElement(CardHeader, null, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-lg" }, "SCORM Sync Status")), /* @__PURE__ */ React28__default.createElement(CardContent, null, /* @__PURE__ */ React28__default.createElement("p", { className: `flex items-center ${result.scormStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.scormStatus === "error" && /* @__PURE__ */ React28__default.createElement(AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React28__default.createElement("span", { className: "font-semibold ml-1" }, result.scormStatus)), result.scormError && /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.scormError))), result.webhookStatus && result.webhookStatus !== "idle" && /* @__PURE__ */ React28__default.createElement(Card, null, /* @__PURE__ */ React28__default.createElement(CardHeader, null, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-lg" }, "Webhook Sync Status")), /* @__PURE__ */ React28__default.createElement(CardContent, null, /* @__PURE__ */ React28__default.createElement("p", { className: `flex items-center ${result.webhookStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.webhookStatus === "error" && /* @__PURE__ */ React28__default.createElement(AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React28__default.createElement("span", { className: "font-semibold ml-1" }, result.webhookStatus)), result.webhookError && /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.webhookError))), /* @__PURE__ */ React28__default.createElement(Accordion, { type: "single", collapsible: true, className: "w-full" }, /* @__PURE__ */ React28__default.createElement(AccordionItem, { value: "question-breakdown" }, /* @__PURE__ */ React28__default.createElement(AccordionTrigger, { className: "text-lg font-semibold" }, t("practiceFlow.results.questionBreakdown")), /* @__PURE__ */ React28__default.createElement(AccordionContent, null, /* @__PURE__ */ React28__default.createElement(ScrollArea, { className: "h-[300px] pr-4" }, /* @__PURE__ */ React28__default.createElement("ul", { className: "space-y-4" }, result.questionResults.map((qResult, index) => {
     var _a2, _b2;
-    return /* @__PURE__ */ React25__default.createElement("li", { key: qResult.questionId, className: "p-4 border rounded-md bg-background" }, /* @__PURE__ */ React25__default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React25__default.createElement("h4", { className: "font-semibold" }, "Question ", index + 1), qResult.isCorrect ? /* @__PURE__ */ React25__default.createElement("span", { className: "text-green-600 font-medium flex items-center" }, /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "mr-1 h-4 w-4" }), " Correct") : /* @__PURE__ */ React25__default.createElement("span", { className: "text-destructive font-medium flex items-center" }, /* @__PURE__ */ React25__default.createElement(XCircle, { className: "mr-1 h-4 w-4" }), " Incorrect")), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Your Answer:"), " ", getAnswerDisplay(qResult.userAnswer)), !qResult.isCorrect && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Correct Answer:"), " ", getAnswerDisplay(qResult.correctAnswer)), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Points Earned:"), " ", qResult.pointsEarned), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Time Spent:"), " ", (_b2 = (_a2 = qResult.timeSpentSeconds) == null ? void 0 : _a2.toFixed(0)) != null ? _b2 : "N/A", "s"));
-  }))))))), /* @__PURE__ */ React25__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: onExitQuiz, className: "w-full" }, /* @__PURE__ */ React25__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), "Exit Results")));
+    return /* @__PURE__ */ React28__default.createElement("li", { key: qResult.questionId, className: "p-4 border rounded-md bg-background" }, /* @__PURE__ */ React28__default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React28__default.createElement("h4", { className: "font-semibold" }, t("common.questions", { count: index + 1 })), qResult.isCorrect ? /* @__PURE__ */ React28__default.createElement("span", { className: "text-green-600 font-medium flex items-center" }, /* @__PURE__ */ React28__default.createElement(CheckCircle, { className: "mr-1 h-4 w-4" }), " ", t("practiceFlow.results.passed")) : /* @__PURE__ */ React28__default.createElement("span", { className: "text-destructive font-medium flex items-center" }, /* @__PURE__ */ React28__default.createElement(XCircle, { className: "mr-1 h-4 w-4" }), " ", t("practiceFlow.results.failed"))), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React28__default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.yourAnswer")), " ", getAnswerDisplay(qResult.userAnswer)), !qResult.isCorrect && /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React28__default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.correctAnswer")), " ", getAnswerDisplay(qResult.correctAnswer)), /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React28__default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.pointsEarned")), " ", qResult.pointsEarned), /* @__PURE__ */ React28__default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React28__default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.timeSpent")), " ", (_b2 = (_a2 = qResult.timeSpentSeconds) == null ? void 0 : _a2.toFixed(0)) != null ? _b2 : "N/A", t("practiceFlow.results.timeUnit")));
+  }))))))), /* @__PURE__ */ React28__default.createElement(CardFooter, { className: "flex flex-col sm:flex-row justify-between gap-2" }, onExitQuiz && /* @__PURE__ */ React28__default.createElement(Button, { variant: "outline", onClick: onExitQuiz, className: "w-full sm:w-auto" }, /* @__PURE__ */ React28__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), t("common.exit")), showReviewButton && onGenerateReview && /* @__PURE__ */ React28__default.createElement(
+    Button,
+    {
+      onClick: onGenerateReview,
+      disabled: isReviewLoading,
+      className: "w-full sm:w-auto"
+    },
+    isReviewLoading ? /* @__PURE__ */ React28__default.createElement(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ React28__default.createElement(Wand2, { className: "mr-2 h-4 w-4" }),
+    isReviewLoading ? t("practiceFlow.results.generatingReview") : t("practiceFlow.results.generateReview")
+  )));
 };
 
 // src/react-ui/components/ui/QuizPlayer.tsx
@@ -2717,49 +3663,65 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
   const [timeLeft, setTimeLeft] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const { t } = useTranslation();
   const programmingQuestionRef = useRef(null);
+  const engineRef = useRef(null);
+  const isInitializedRef = useRef(false);
+  const callbacks = useMemo(() => ({
+    onQuizStart: (initialData) => {
+      setCurrentQuestion(initialData.initialQuestion);
+      setCurrentQuestionNumber(initialData.currentQuestionNumber);
+      setTotalQuestions(initialData.totalQuestions);
+      setTimeLeft(initialData.timeLimitInSeconds);
+      setIsLoading(false);
+    },
+    onQuestionChange: (question, qNum, total) => {
+      var _a2;
+      setCurrentQuestion(question);
+      setCurrentQuestionNumber(qNum);
+      setTotalQuestions(total);
+      const existingAnswer = (_a2 = engineRef.current) == null ? void 0 : _a2.getUserAnswer((question == null ? void 0 : question.id) || "");
+      setUserAnswer(existingAnswer !== void 0 ? existingAnswer : null);
+    },
+    onQuizFinish: (results) => {
+      setFinalResult(results);
+      setQuizFinished(true);
+      onQuizComplete(results);
+      setIsLoading(false);
+    },
+    onTimeTick: (timeLeftInSeconds) => {
+      setTimeLeft(timeLeftInSeconds);
+    },
+    onQuizTimeUp: () => {
+      setError("Time's up! Your quiz has been submitted automatically.");
+    }
+  }), [onQuizComplete]);
   const handleAnswerChange = useCallback((answer) => {
     if ((currentQuestion == null ? void 0 : currentQuestion.questionType) !== "blockly_programming" && (currentQuestion == null ? void 0 : currentQuestion.questionType) !== "scratch_programming") {
       setUserAnswer(answer);
     }
-  }, [currentQuestion]);
+  }, [currentQuestion == null ? void 0 : currentQuestion.questionType]);
+  const quizConfigKey = useMemo(() => {
+    return JSON.stringify({
+      id: quizConfig.id,
+      version: quizConfig.version,
+      title: quizConfig.title
+    });
+  }, [quizConfig.id, quizConfig.version, quizConfig.title]);
   useEffect(() => {
+    if (isInitializedRef.current) {
+      return;
+    }
     setIsLoading(true);
     setError(null);
     setQuizFinished(false);
     setFinalResult(null);
     setUserAnswer(null);
+    isInitializedRef.current = true;
     let localQuizEngine = null;
     try {
-      const callbacks = {
-        onQuizStart: (initialData) => {
-          setCurrentQuestion(initialData.initialQuestion);
-          setCurrentQuestionNumber(initialData.currentQuestionNumber);
-          setTotalQuestions(initialData.totalQuestions);
-          setTimeLeft(initialData.timeLimitInSeconds);
-          setIsLoading(false);
-        },
-        onQuestionChange: (question, qNum, total) => {
-          setCurrentQuestion(question);
-          setCurrentQuestionNumber(qNum);
-          setTotalQuestions(total);
-          const existingAnswer = engine == null ? void 0 : engine.getUserAnswer((question == null ? void 0 : question.id) || "");
-          setUserAnswer(existingAnswer !== void 0 ? existingAnswer : null);
-        },
-        onQuizFinish: (results) => {
-          setFinalResult(results);
-          setQuizFinished(true);
-          onQuizComplete(results);
-          setIsLoading(false);
-        },
-        onTimeTick: (timeLeftInSeconds) => {
-          setTimeLeft(timeLeftInSeconds);
-        },
-        onQuizTimeUp: () => {
-          setError("Time's up! Your quiz has been submitted automatically.");
-        }
-      };
       localQuizEngine = new QuizEngine({ config: quizConfig, callbacks });
+      engineRef.current = localQuizEngine;
       setEngine(localQuizEngine);
       const initialQ = localQuizEngine.getCurrentQuestion();
       setCurrentQuestion(initialQ);
@@ -2771,84 +3733,88 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
         setUserAnswer(existingAnswer !== void 0 ? existingAnswer : null);
       }
       setIsLoading(false);
-      return () => {
-        if (localQuizEngine) {
-          localQuizEngine.destroy();
-        }
-      };
     } catch (e) {
-      console.error("Error initializing QuizEngine:", e);
       setError(e instanceof Error ? e.message : "Failed to load quiz.");
       setIsLoading(false);
-      if (localQuizEngine) {
-        localQuizEngine.destroy();
-      }
+      isInitializedRef.current = false;
     }
-  }, [quizConfig, onQuizComplete]);
-  const handleSubmitAnswer = () => {
+    return () => {
+      if (localQuizEngine) localQuizEngine.destroy();
+      if (engineRef.current) engineRef.current = null;
+      isInitializedRef.current = false;
+    };
+  }, [quizConfigKey, callbacks, quizConfig]);
+  const handleSubmitAnswer = useCallback(() => {
     var _a2;
-    if (!engine || !currentQuestion) return;
+    const currentEngine = engineRef.current;
+    if (!currentEngine || !currentQuestion) return;
     let answerToSubmit = null;
     if (currentQuestion.questionType === "blockly_programming" || currentQuestion.questionType === "scratch_programming") {
       if (programmingQuestionRef.current && typeof programmingQuestionRef.current.getWorkspaceXml === "function") {
         answerToSubmit = programmingQuestionRef.current.getWorkspaceXml();
       } else {
-        console.warn(`${currentQuestion.questionType} ref not available for submission. Submitting last known answer from engine if any.`);
-        answerToSubmit = (_a2 = engine.getUserAnswer(currentQuestion.id)) != null ? _a2 : null;
+        answerToSubmit = (_a2 = currentEngine.getUserAnswer(currentQuestion.id)) != null ? _a2 : null;
       }
     } else {
       answerToSubmit = userAnswer;
     }
     if (answerToSubmit !== void 0) {
-      engine.submitAnswer(currentQuestion.id, answerToSubmit);
-    }
-  };
-  const handleNext = () => {
-    if (engine) {
-      handleSubmitAnswer();
-      if (engine.getCurrentQuestionNumber() < engine.getTotalQuestions()) {
-        engine.nextQuestion();
-      } else {
-        handleFinishQuiz();
-      }
-    }
-  };
-  const handlePrevious = () => {
-    if (engine && engine.getCurrentQuestionNumber() > 1) {
-      handleSubmitAnswer();
-      engine.previousQuestion();
-    }
-  };
-  const handleFinishQuiz = async () => {
-    if (engine) {
-      setIsLoading(true);
-      handleSubmitAnswer();
-      await engine.calculateResults();
-    }
-  };
+      currentEngine.submitAnswer(currentQuestion.id, answerToSubmit);
+    }
+  }, [currentQuestion, userAnswer]);
+  const handleNext = useCallback(() => {
+    const currentEngine = engineRef.current;
+    if (!currentEngine) return;
+    handleSubmitAnswer();
+    if (currentEngine.getCurrentQuestionNumber() < currentEngine.getTotalQuestions()) {
+      currentEngine.nextQuestion();
+    } else {
+      handleFinishQuiz();
+    }
+  }, [handleSubmitAnswer]);
+  const handlePrevious = useCallback(() => {
+    const currentEngine = engineRef.current;
+    if (!currentEngine || currentEngine.getCurrentQuestionNumber() <= 1) return;
+    handleSubmitAnswer();
+    currentEngine.previousQuestion();
+  }, [handleSubmitAnswer]);
+  const handleFinishQuiz = useCallback(async () => {
+    const currentEngine = engineRef.current;
+    if (!currentEngine) return;
+    setIsLoading(true);
+    handleSubmitAnswer();
+    await currentEngine.calculateResults();
+  }, [handleSubmitAnswer]);
   const progressPercent = useMemo(() => {
     if (totalQuestions === 0) return 0;
     return quizFinished ? 100 : Math.max(0, Math.min(100, (currentQuestionNumber - 1) / totalQuestions * 100));
   }, [currentQuestionNumber, totalQuestions, quizFinished]);
+  const formatTime = useCallback((seconds) => {
+    if (seconds === null) return "-:--";
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs < 10 ? "0" : ""}${secs}`;
+  }, []);
   if (isLoading) {
-    return /* @__PURE__ */ React25__default.createElement("div", { className: "flex flex-col items-center justify-center h-64" }, /* @__PURE__ */ React25__default.createElement(Loader2, { className: "h-12 w-12 animate-spin text-primary" }), /* @__PURE__ */ React25__default.createElement("p", { className: "mt-4 text-muted-foreground" }, "Loading Quiz..."));
+    return /* @__PURE__ */ React28__default.createElement("div", { className: "flex flex-col items-center justify-center h-64" }, /* @__PURE__ */ React28__default.createElement(Loader2, { className: "h-12 w-12 animate-spin text-primary" }), /* @__PURE__ */ React28__default.createElement("p", { className: "mt-4 text-muted-foreground" }, t("common.loading")));
   }
   if (error) {
-    return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-destructive flex items-center" }, /* @__PURE__ */ React25__default.createElement(AlertCircle, { className: "mr-2 h-6 w-6" }), "Quiz Error")), /* @__PURE__ */ React25__default.createElement(CardContent, null, /* @__PURE__ */ React25__default.createElement("p", null, error)), /* @__PURE__ */ React25__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React25__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), " Exit Quiz")));
+    return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__default.createElement(CardHeader, null, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-destructive flex items-center" }, /* @__PURE__ */ React28__default.createElement(AlertCircle, { className: "mr-2 h-6 w-6" }), "Quiz Error")), /* @__PURE__ */ React28__default.createElement(CardContent, null, /* @__PURE__ */ React28__default.createElement("p", null, error)), /* @__PURE__ */ React28__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React28__default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React28__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), " ", t("common.exit"))));
   }
   if (quizFinished && finalResult) {
-    return /* @__PURE__ */ React25__default.createElement(QuizResult, { result: finalResult, onExitQuiz, quizTitle: quizConfig.title });
+    return /* @__PURE__ */ React28__default.createElement(QuizResult, { result: finalResult, onExitQuiz, quizTitle: quizConfig.title });
   }
   if (!currentQuestion) {
-    return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, null, "Quiz Ended"), /* @__PURE__ */ React25__default.createElement(CardDescription, null, "No more questions, or quiz not loaded correctly.")), /* @__PURE__ */ React25__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React25__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), " Exit Quiz")));
+    return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__default.createElement(CardHeader, null, /* @__PURE__ */ React28__default.createElement(CardTitle, null, "Quiz Ended"), /* @__PURE__ */ React28__default.createElement(CardDescription, null, "No more questions, or quiz not loaded correctly.")), /* @__PURE__ */ React28__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React28__default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React28__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), " ", t("common.exit"))));
   }
-  const formatTime = (seconds) => {
-    if (seconds === null) return "-:--";
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs < 10 ? "0" : ""}${secs}`;
-  };
-  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-2xl font-headline" }, quizConfig.title), timeLeft !== null && /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center text-sm text-muted-foreground" }, /* @__PURE__ */ React25__default.createElement(Clock, { className: "mr-1 h-4 w-4" }), "Time Left: ", formatTime(timeLeft))), quizConfig.description && /* @__PURE__ */ React25__default.createElement(CardDescription, null, quizConfig.description), /* @__PURE__ */ React25__default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React25__default.createElement(Progress, { value: progressPercent, "aria-label": `Quiz progress: ${currentQuestionNumber} of ${totalQuestions} questions`, className: "w-full" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground mt-1 text-right" }, "Question ", currentQuestionNumber, " of ", totalQuestions))), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "min-h-[200px]" }, /* @__PURE__ */ React25__default.createElement(
+  return /* @__PURE__ */ React28__default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__default.createElement(CardHeader, null, /* @__PURE__ */ React28__default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React28__default.createElement(CardTitle, { className: "text-2xl font-headline" }, quizConfig.title), timeLeft !== null && /* @__PURE__ */ React28__default.createElement("div", { className: "flex items-center text-sm text-muted-foreground" }, /* @__PURE__ */ React28__default.createElement(Clock, { className: "mr-1 h-4 w-4" }), t("practiceFlow.player.timeLeft", { time: formatTime(timeLeft) }))), quizConfig.description && /* @__PURE__ */ React28__default.createElement(CardDescription, null, quizConfig.description), /* @__PURE__ */ React28__default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React28__default.createElement(
+    Progress,
+    {
+      value: progressPercent,
+      "aria-label": `Quiz progress: ${currentQuestionNumber} of ${totalQuestions} questions`,
+      className: "w-full"
+    }
+  ), /* @__PURE__ */ React28__default.createElement("p", { className: "text-sm text-muted-foreground mt-1 text-right" }, t("practiceFlow.player.questionProgress", { current: currentQuestionNumber, total: totalQuestions })))), /* @__PURE__ */ React28__default.createElement(CardContent, { className: "min-h-[200px]" }, /* @__PURE__ */ React28__default.createElement(
     QuestionRenderer,
     {
       question: currentQuestion,
@@ -2858,7 +3824,25 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
       key: currentQuestion.id,
       ref: currentQuestion.questionType === "blockly_programming" || currentQuestion.questionType === "scratch_programming" ? programmingQuestionRef : null
     }
-  )), /* @__PURE__ */ React25__default.createElement(CardFooter, { className: "flex justify-between items-center" }, /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: handlePrevious, disabled: currentQuestionNumber <= 1 }, /* @__PURE__ */ React25__default.createElement(ChevronLeft, { className: "mr-2 h-4 w-4" }), " Previous"), onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "ghost", onClick: onExitQuiz, className: "text-muted-foreground hover:text-destructive" }, "Exit Quiz"), /* @__PURE__ */ React25__default.createElement(Button, { onClick: handleNext }, currentQuestionNumber === totalQuestions ? "Finish Quiz" : "Next", currentQuestionNumber !== totalQuestions && /* @__PURE__ */ React25__default.createElement(ChevronRight, { className: "ml-2 h-4 w-4" }), currentQuestionNumber === totalQuestions && /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "ml-2 h-4 w-4" }))));
+  )), /* @__PURE__ */ React28__default.createElement(CardFooter, { className: "flex justify-between items-center" }, /* @__PURE__ */ React28__default.createElement(
+    Button,
+    {
+      variant: "outline",
+      onClick: handlePrevious,
+      disabled: currentQuestionNumber <= 1
+    },
+    /* @__PURE__ */ React28__default.createElement(ChevronLeft, { className: "mr-2 h-4 w-4" }),
+    " ",
+    t("common.previous")
+  ), onExitQuiz && /* @__PURE__ */ React28__default.createElement(
+    Button,
+    {
+      variant: "ghost",
+      onClick: onExitQuiz,
+      className: "text-muted-foreground hover:text-destructive"
+    },
+    t("common.exit")
+  ), /* @__PURE__ */ React28__default.createElement(Button, { onClick: handleNext }, currentQuestionNumber === totalQuestions ? t("practiceFlow.player.finishQuiz") : t("common.next"), currentQuestionNumber !== totalQuestions && /* @__PURE__ */ React28__default.createElement(ChevronRight, { className: "ml-2 h-4 w-4" }), currentQuestionNumber === totalQuestions && /* @__PURE__ */ React28__default.createElement(CheckCircle, { className: "ml-2 h-4 w-4" }))));
 };
 
 // src/player.ts
@@ -2887,20 +3871,20 @@ function mountQuizPlayer(targetElementId, quizConfig) {
       }
     };
     if (quizResult) {
-      return React25__default.createElement(QuizResult, {
+      return React28__default.createElement(QuizResult, {
         result: quizResult,
         quizTitle: quizConfig.title,
         onExitQuiz: handleExit
       });
     }
-    return React25__default.createElement(QuizPlayer, {
+    return React28__default.createElement(QuizPlayer, {
       quizConfig,
       onQuizComplete: handleQuizComplete,
       onExitQuiz: handleExit
     });
   };
   const root = ReactDOM.createRoot(targetElement);
-  root.render(React25__default.createElement(React25__default.StrictMode, null, React25__default.createElement(AppContainer)));
+  root.render(React28__default.createElement(React28__default.StrictMode, null, React28__default.createElement(AppContainer)));
 }
 
 export { mountQuizPlayer };