@thanh01.pmt/interactive-quiz-kit 1.0.25 → 1.0.28

package/dist/player.js

@@ -1,4295 +0,0 @@
-import * as React9 from 'react';
-import React9__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, 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 { jsx, jsxs } from 'react/jsx-runtime';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva } from 'class-variance-authority';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeHighlight from 'rehype-highlight';
-import remarkMath from 'remark-math';
-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';
-
-// src/player.ts
-
-// src/services/SCORMService.ts
-var SCORM_TRUE = "true";
-var SCORM_NO_ERROR = "0";
-var CMI_CORE_LESSON_STATUS_PASSED = "passed";
-var CMI_CORE_LESSON_STATUS_FAILED = "failed";
-var CMI_CORE_LESSON_STATUS_COMPLETED = "completed";
-var CMI_CORE_LESSON_STATUS_INCOMPLETE = "incomplete";
-var CMI_CORE_LESSON_STATUS_NOT_ATTEMPTED = "not attempted";
-var CMI_COMPLETION_STATUS_COMPLETED = "completed";
-var CMI_COMPLETION_STATUS_INCOMPLETE = "incomplete";
-var CMI_SUCCESS_STATUS_PASSED = "passed";
-var CMI_SUCCESS_STATUS_FAILED = "failed";
-var SCORMService = class {
-  constructor(settings) {
-    this.scormAPI = null;
-    this.scormVersionFound = null;
-    this.isInitialized = false;
-    this.isTerminated = false;
-    this.studentName = null;
-    this.settings = {
-      setCompletionOnFinish: true,
-      setSuccessOnPass: true,
-      autoCommit: true,
-      ...settings
-    };
-    if (typeof window !== "undefined") {
-      this._findAPI();
-    }
-  }
-  _findAPIRecursive(win) {
-    if (win === null) return null;
-    if (win.API_1484_11) {
-      this.scormVersionFound = "2004";
-      return win.API_1484_11;
-    }
-    if (win.API) {
-      this.scormVersionFound = "1.2";
-      return win.API;
-    }
-    if (win.parent && win.parent !== win) {
-      return this._findAPIRecursive(win.parent);
-    }
-    if (win.opener && typeof win.opener !== "undefined" && win.opener !== win && win.opener !== win.parent) {
-      try {
-        if (win.opener.document) {
-          return this._findAPIRecursive(win.opener);
-        }
-      } catch (e) {
-        console.warn("SCORMService: Could not access win.opener for API search due to cross-origin restrictions.");
-      }
-    }
-    return null;
-  }
-  _findAPI() {
-    try {
-      this.scormAPI = this._findAPIRecursive(window);
-      if (this.scormAPI) {
-        if (!this.scormVersionFound) this.scormVersionFound = this.settings.version;
-        console.log(`SCORMService: API Found. Version determined: ${this.scormVersionFound}`);
-      } else {
-        console.warn("SCORMService: SCORM API not found in window hierarchy.");
-      }
-    } catch (e) {
-      console.error("SCORMService: Error finding SCORM API", e);
-      this.scormAPI = null;
-    }
-  }
-  hasAPI() {
-    return this.scormAPI !== null;
-  }
-  getSCORMVersion() {
-    return this.scormVersionFound;
-  }
-  initialize() {
-    if (!this.hasAPI()) return { success: false, error: "SCORM API not found." };
-    if (this.isInitialized) return { success: true, studentName: this.studentName || void 0 };
-    const result = this.scormVersionFound === "2004" ? this.scormAPI.Initialize("") : this.scormAPI.LMSInitialize("");
-    if (result.toString() === SCORM_TRUE || result === true) {
-      this.isInitialized = true;
-      this.isTerminated = false;
-      const studentNameVar = this.settings.studentNameVar || (this.scormVersionFound === "2004" ? "cmi.learner_name" : "cmi.core.student_name");
-      this.studentName = this.getValue(studentNameVar);
-      if (this.scormVersionFound === "2004") {
-        const completionStatusVar = this.settings.completionStatusVar_2004 || this.settings.lessonStatusVar || "cmi.completion_status";
-        if (this.getValue(completionStatusVar) === "not attempted") {
-          this.setValue(completionStatusVar, CMI_COMPLETION_STATUS_INCOMPLETE);
-        }
-      } else {
-        const lessonStatusVar = this.settings.lessonStatusVar_1_2 || this.settings.lessonStatusVar || "cmi.core.lesson_status";
-        if (this.getValue(lessonStatusVar) === CMI_CORE_LESSON_STATUS_NOT_ATTEMPTED) {
-          this.setValue(lessonStatusVar, CMI_CORE_LESSON_STATUS_INCOMPLETE);
-        }
-      }
-      if (this.settings.autoCommit) this.commit();
-      return { success: true, studentName: this.studentName || void 0 };
-    } else {
-      const error = this.getLastError();
-      return { success: false, error: `Initialization failed: ${error.message}` };
-    }
-  }
-  terminate() {
-    if (!this.hasAPI() || !this.isInitialized || this.isTerminated) {
-      const reason = !this.hasAPI() ? "API not found" : !this.isInitialized ? "Not initialized" : "Already terminated";
-      return { success: !this.hasAPI() || this.isTerminated, error: this.isTerminated ? void 0 : reason };
-    }
-    const result = this.scormVersionFound === "2004" ? this.scormAPI.Terminate("") : this.scormAPI.LMSFinish("");
-    if (result.toString() === SCORM_TRUE || result === true) {
-      this.isTerminated = true;
-      this.isInitialized = false;
-      return { success: true };
-    } else {
-      const error = this.getLastError();
-      return { success: false, error: `Termination failed: ${error.message}` };
-    }
-  }
-  setValue(element, value) {
-    if (!this.hasAPI() || !this.isInitialized) {
-      return { success: false, error: !this.hasAPI() ? "SCORM API not found." : "SCORM not initialized." };
-    }
-    const valStr = value.toString();
-    const result = this.scormVersionFound === "2004" ? this.scormAPI.SetValue(element, valStr) : this.scormAPI.LMSSetValue(element, valStr);
-    if (result.toString() === SCORM_TRUE || result === true) {
-      if (this.settings.autoCommit) this.commit();
-      return { success: true };
-    } else {
-      const error = this.getLastError();
-      return { success: false, error: `SetValue failed for ${element}: ${error.message}` };
-    }
-  }
-  getValue(element) {
-    if (!this.hasAPI() || !this.isInitialized) return null;
-    const value = this.scormVersionFound === "2004" ? this.scormAPI.GetValue(element) : this.scormAPI.LMSGetValue(element);
-    const error = this.getLastError();
-    if (error.code !== SCORM_NO_ERROR && error.code !== "403" && error.code !== "0") {
-      console.warn(`SCORMService: GetValue for ${element} produced an error ${error.code}: ${error.message}. Returning raw value:`, value);
-    }
-    return value?.toString() ?? null;
-  }
-  commit() {
-    if (!this.hasAPI() || !this.isInitialized) {
-      return { success: false, error: !this.hasAPI() ? "SCORM API not found." : "SCORM not initialized." };
-    }
-    const result = this.scormVersionFound === "2004" ? this.scormAPI.Commit("") : this.scormAPI.LMSCommit("");
-    if (result.toString() === SCORM_TRUE || result === true) {
-      return { success: true };
-    } else {
-      const error = this.getLastError();
-      return { success: false, error: `Commit failed: ${error.message}` };
-    }
-  }
-  setScore(rawScore, maxScore, minScore = 0) {
-    if (!this.hasAPI() || !this.isInitialized) return;
-    if (this.scormVersionFound === "2004") {
-      const scoreRawVar = this.settings.scoreRawVar_2004 || this.settings.scoreRawVar || "cmi.score.raw";
-      const scoreMaxVar = this.settings.scoreMaxVar_2004 || this.settings.scoreMaxVar || "cmi.score.max";
-      const scoreMinVar = this.settings.scoreMinVar_2004 || this.settings.scoreMinVar || "cmi.score.min";
-      const scoreScaledVar = this.settings.scoreScaledVar_2004 || "cmi.score.scaled";
-      this.setValue(scoreMinVar, minScore);
-      this.setValue(scoreMaxVar, maxScore);
-      this.setValue(scoreRawVar, rawScore);
-      if (maxScore > minScore) {
-        const scaledScore = (rawScore - minScore) / (maxScore - minScore);
-        this.setValue(scoreScaledVar, parseFloat(scaledScore.toFixed(4)));
-      } else if (maxScore === minScore && maxScore !== 0) {
-        this.setValue(scoreScaledVar, rawScore >= maxScore ? 1 : 0);
-      } else {
-        this.setValue(scoreScaledVar, 0);
-      }
-    } else {
-      const scoreRawVar = this.settings.scoreRawVar_1_2 || this.settings.scoreRawVar || "cmi.core.score.raw";
-      const scoreMaxVar = this.settings.scoreMaxVar_1_2 || this.settings.scoreMaxVar || "cmi.core.score.max";
-      const scoreMinVar = this.settings.scoreMinVar_1_2 || this.settings.scoreMinVar || "cmi.core.score.min";
-      this.setValue(scoreMinVar, minScore);
-      this.setValue(scoreMaxVar, maxScore);
-      this.setValue(scoreRawVar, rawScore);
-    }
-  }
-  setLessonStatus(status, passed) {
-    if (!this.hasAPI() || !this.isInitialized) return;
-    if (this.scormVersionFound === "2004") {
-      const completionStatusVar = this.settings.completionStatusVar_2004 || this.settings.lessonStatusVar || "cmi.completion_status";
-      const successStatusVar = this.settings.successStatusVar_2004 || "cmi.success_status";
-      if (this.settings.setCompletionOnFinish && (status === "completed" || status === "passed" || status === "failed")) {
-        this.setValue(completionStatusVar, CMI_COMPLETION_STATUS_COMPLETED);
-      } else if (status === "incomplete" || status === "browsed") {
-        this.setValue(completionStatusVar, CMI_COMPLETION_STATUS_INCOMPLETE);
-      }
-      if (this.settings.setSuccessOnPass && passed !== void 0) {
-        this.setValue(successStatusVar, passed ? CMI_SUCCESS_STATUS_PASSED : CMI_SUCCESS_STATUS_FAILED);
-      }
-    } else {
-      const lessonStatusVar = this.settings.lessonStatusVar_1_2 || this.settings.lessonStatusVar || "cmi.core.lesson_status";
-      let finalStatus = status;
-      if (this.settings.setCompletionOnFinish) {
-        if (this.settings.setSuccessOnPass && passed !== void 0) {
-          finalStatus = passed ? CMI_CORE_LESSON_STATUS_PASSED : CMI_CORE_LESSON_STATUS_FAILED;
-        } else {
-          finalStatus = CMI_CORE_LESSON_STATUS_COMPLETED;
-        }
-      } else {
-        if (status === CMI_CORE_LESSON_STATUS_PASSED || status === CMI_CORE_LESSON_STATUS_FAILED) ; else {
-          finalStatus = CMI_CORE_LESSON_STATUS_INCOMPLETE;
-        }
-      }
-      this.setValue(lessonStatusVar, finalStatus);
-    }
-  }
-  getLastError() {
-    if (!this.hasAPI()) return { code: "-1", message: "SCORM API not found." };
-    const errorCode = this.scormVersionFound === "2004" ? this.scormAPI.GetLastError() : this.scormAPI.LMSGetLastError();
-    if (errorCode === SCORM_NO_ERROR || errorCode === 0 || errorCode === "0") {
-      return { code: SCORM_NO_ERROR, message: "No error." };
-    }
-    const errorMessage = this.scormVersionFound === "2004" ? this.scormAPI.GetErrorString(errorCode.toString()) : this.scormAPI.LMSGetErrorString(errorCode.toString());
-    const diagnostic = this.scormVersionFound === "2004" ? this.scormAPI.GetDiagnostic(errorCode.toString()) : this.scormAPI.LMSGetDiagnostic(errorCode.toString());
-    return {
-      code: errorCode.toString(),
-      message: errorMessage?.toString() ?? "Unknown error.",
-      diagnostic: diagnostic?.toString() ?? void 0
-    };
-  }
-  formatCMITime(totalSeconds) {
-    const pad = (num, size = 2) => num.toString().padStart(size, "0");
-    if (this.scormVersionFound === "2004") {
-      const hours = Math.floor(totalSeconds / 3600);
-      const minutes = Math.floor(totalSeconds % 3600 / 60);
-      const seconds = parseFloat((totalSeconds % 60).toFixed(2));
-      let timeString = "PT";
-      if (hours > 0) timeString += `${hours}H`;
-      if (minutes > 0 || hours > 0 && seconds > 0) {
-        timeString += `${minutes}M`;
-      }
-      if (seconds > 0 || timeString === "PT") {
-        timeString += `${seconds}S`;
-      }
-      return timeString === "PT" ? "PT0S" : timeString;
-    } else {
-      const hours = Math.floor(totalSeconds / 3600);
-      const minutes = Math.floor(totalSeconds % 3600 / 60);
-      const secondsOnly = Math.floor(totalSeconds % 60);
-      const centiseconds = Math.floor((totalSeconds - Math.floor(totalSeconds)) * 100);
-      return `${pad(hours, 4)}:${pad(minutes)}:${pad(secondsOnly)}.${pad(centiseconds)}`;
-    }
-  }
-};
-
-// src/services/evaluators/multiple-choice-evaluator.ts
-var MultipleChoiceEvaluator = class {
-  async evaluate(question, answer) {
-    const points = question.points ?? 0;
-    const correctAnswerId = question.correctAnswerId;
-    const isCorrect = answer === correctAnswerId;
-    const correctOption = question.options.find((opt) => opt.id === correctAnswerId);
-    const correctAnswerDetail = {
-      id: correctAnswerId,
-      value: 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) {
-    const points = question.points ?? 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) => question.options.find((opt) => opt.id === id)?.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) {
-    const points = question.points ?? 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) {
-    const points = question.points ?? 0;
-    let isCorrect = false;
-    if (typeof answer === "string") {
-      const userAnswerTrimmed = answer.trim();
-      const caseSensitive = question.isCaseSensitive ?? 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) {
-    const points = question.points ?? 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) {
-    const points = question.points ?? 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) => question.items.find((item) => item.id === id)?.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) {
-    const points = question.points ?? 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) => {
-      const promptText = question.prompts.find((p) => p.id === curr.promptId)?.content || "";
-      const optionText = question.options.find((o) => o.id === curr.optionId)?.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) {
-    const points = question.points ?? 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) => {
-        const userValForBlank = userAnswerMap[correctAnsDef.blankId]?.trim();
-        if (userValForBlank === void 0) return false;
-        const caseSensitive = question.isCaseSensitive ?? 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) {
-    const points = question.points ?? 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) => {
-      const draggableText = question.draggableItems.find((d) => d.id === curr.draggableId)?.content || "";
-      const dropZoneText = question.dropZones.find((z3) => z3.id === curr.dropZoneId)?.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) {
-    const points = question.points ?? 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) => question.hotspots.find((h) => h.id === id)?.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) {
-    const points = question.points ?? 0;
-    let isCorrect = false;
-    if (typeof answer === "string" && typeof question.solutionGeneratedCode === "string") {
-      if (typeof window !== "undefined" && window.Blockly?.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(/(?<!\\)"/g, '\\"');
-        repaired = beforeUnterminated + escapedContent + '"' + remainder;
-      } else {
-        const escapedContent = afterUnterminated.replace(/(?<!\\)"/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) {
-    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 (validation.error?.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 {
-      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) {
-    const points = question.points ?? 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) {
-    this.userAnswers = /* @__PURE__ */ new Map();
-    this.currentQuestionIndex = 0;
-    this.timerId = null;
-    this.timeLeftInSeconds = null;
-    this.scormService = null;
-    this.quizResultState = { scormStatus: "idle" };
-    this.questionStartTime = null;
-    this.questionTimings = /* @__PURE__ */ new Map();
-    this.config = options.config;
-    this.callbacks = options.callbacks || {};
-    this.questions = this.config.settings?.shuffleQuestions ? [...this.config.questions].sort(() => Math.random() - 0.5) : this.config.questions;
-    this.overallStartTime = Date.now();
-    this.evaluators = /* @__PURE__ */ new Map();
-    this.registerEvaluators();
-    if (this.config.settings?.timeLimitMinutes && this.config.settings.timeLimitMinutes > 0) {
-      this.timeLeftInSeconds = this.config.settings.timeLimitMinutes * 60;
-    }
-    if (this.config.settings?.scorm) {
-      this.quizResultState.scormStatus = "initializing";
-      this.scormService = new SCORMService(this.config.settings.scorm);
-      if (this.scormService.hasAPI()) {
-        const initResult = this.scormService.initialize();
-        if (initResult.success) {
-          this.quizResultState.scormStatus = "initialized";
-          this.quizResultState.studentName = initResult.studentName;
-        } else {
-          this.quizResultState.scormStatus = "error";
-          this.quizResultState.scormError = initResult.error || "SCORM initialization failed.";
-        }
-      } else {
-        this.quizResultState.scormStatus = "no_api";
-      }
-    }
-    const initialQ = this.getCurrentQuestion();
-    if (initialQ) {
-      this.questionStartTime = Date.now();
-    }
-    if (this.callbacks.onQuizStart) {
-      this.callbacks.onQuizStart({
-        initialQuestion: initialQ,
-        currentQuestionNumber: this.getCurrentQuestionNumber(),
-        totalQuestions: this.getTotalQuestions(),
-        timeLimitInSeconds: this.timeLeftInSeconds,
-        scormStatus: this.quizResultState.scormStatus,
-        studentName: this.quizResultState.studentName
-      });
-    }
-    if (this.timeLeftInSeconds !== null) {
-      this.startTimer();
-    }
-    this.callbacks.onQuestionChange?.(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;
-      const elapsedMs = Date.now() - this.questionStartTime;
-      const currentTotalTime = this.questionTimings.get(currentQId) || 0;
-      this.questionTimings.set(currentQId, currentTotalTime + elapsedMs / 1e3);
-    }
-    this.questionStartTime = null;
-  }
-  startTimer() {
-    if (this.timerId !== null) clearInterval(this.timerId);
-    this.timerId = setInterval(() => this.handleTick(), 1e3);
-  }
-  stopTimer() {
-    if (this.timerId !== null) {
-      clearInterval(this.timerId);
-      this.timerId = null;
-    }
-  }
-  handleTick() {
-    if (this.timeLeftInSeconds === null) return;
-    if (this.timeLeftInSeconds > 0) {
-      this.timeLeftInSeconds--;
-      this.callbacks.onTimeTick?.(this.timeLeftInSeconds);
-    }
-    if (this.timeLeftInSeconds <= 0) {
-      this.stopTimer();
-      this.callbacks.onQuizTimeUp?.();
-      this.calculateResults();
-    }
-  }
-  getTimeLeftInSeconds() {
-    return this.timeLeftInSeconds;
-  }
-  getCurrentQuestion() {
-    return this.questions[this.currentQuestionIndex] || null;
-  }
-  getCurrentQuestionNumber() {
-    return this.currentQuestionIndex + 1;
-  }
-  getTotalQuestions() {
-    return this.questions.length;
-  }
-  getUserAnswer(questionId) {
-    return this.userAnswers.get(questionId);
-  }
-  isQuizFinished() {
-    return this.quizResultState.score !== void 0;
-  }
-  submitAnswer(questionId, answer) {
-    this.userAnswers.set(questionId, answer);
-    const question = this.questions.find((q) => q.id === questionId);
-    if (question) this.callbacks.onAnswerSubmit?.(question, answer);
-  }
-  nextQuestion() {
-    this._recordCurrentQuestionTime();
-    if (this.currentQuestionIndex < this.questions.length - 1) {
-      this.currentQuestionIndex++;
-      const currentQ = this.getCurrentQuestion();
-      this.questionStartTime = Date.now();
-      this.callbacks.onQuestionChange?.(currentQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
-      return currentQ;
-    }
-    return null;
-  }
-  previousQuestion() {
-    this._recordCurrentQuestionTime();
-    if (this.currentQuestionIndex > 0) {
-      this.currentQuestionIndex--;
-      const currentQ = this.getCurrentQuestion();
-      this.questionStartTime = Date.now();
-      this.callbacks.onQuestionChange?.(currentQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
-      return currentQ;
-    }
-    return null;
-  }
-  goToQuestion(index) {
-    if (index >= 0 && index < this.questions.length && index !== this.currentQuestionIndex) {
-      this._recordCurrentQuestionTime();
-      this.currentQuestionIndex = index;
-      const currentQ = this.getCurrentQuestion();
-      this.questionStartTime = Date.now();
-      this.callbacks.onQuestionChange?.(currentQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
-      return currentQ;
-    }
-    return this.getCurrentQuestion();
-  }
-  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;
-  }
-  // (Tiếp theo từ Phần 1)
-  async calculateResults() {
-    this.stopTimer();
-    this._recordCurrentQuestionTime();
-    let totalScore = 0;
-    let maxScore = 0;
-    const questionResultsArray = [];
-    let accumulatedTotalTimeSpent = 0;
-    for (const question of this.questions) {
-      const userAnswerRaw = this.userAnswers.get(question.id) || null;
-      maxScore += question.points ?? 0;
-      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;
-      const userAnswerDetail = this.formatUserAnswerDetail(question, userAnswerRaw);
-      questionResultsArray.push({
-        questionId: question.id,
-        questionType: question.questionType,
-        prompt: question.prompt,
-        isCorrect,
-        pointsEarned,
-        userAnswer: userAnswerDetail,
-        correctAnswer: correctAnswerDetail,
-        timeSpentSeconds: timeSpentOnThisQuestion,
-        evaluationDetails
-      });
-    }
-    const percentage = maxScore > 0 ? parseFloat((totalScore / maxScore * 100).toFixed(2)) : 0;
-    let passed = void 0;
-    if (this.config.settings?.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 = await this._calculateMetadataPerformance();
-    const finalResults = {
-      score: totalScore,
-      maxScore,
-      percentage,
-      answers: this.userAnswers,
-      questionResults: questionResultsArray,
-      passed,
-      webhookStatus: "idle",
-      scormStatus: this.quizResultState.scormStatus || "idle",
-      scormError: this.quizResultState.scormError,
-      studentName: this.quizResultState.studentName,
-      totalTimeSpentSeconds: totalQuizTimeSpentSeconds,
-      averageTimePerQuestionSeconds,
-      ...metadataPerformance
-    };
-    this.quizResultState = { ...this.quizResultState, ...finalResults };
-    if (this.config.settings?.scorm) this._sendResultsToSCORM(finalResults);
-    await this._sendResultsToWebhook(finalResults);
-    this.callbacks.onQuizFinish?.(finalResults);
-    return finalResults;
-  }
-  formatUserAnswerDetail(question, userAnswerRaw) {
-    if (userAnswerRaw === null) return null;
-    switch (question.questionType) {
-      case "multiple_choice": {
-        const q = question;
-        const id = userAnswerRaw;
-        return { id, value: q.options.find((opt) => opt.id === id)?.text || "" };
-      }
-      case "multiple_response": {
-        const q = question;
-        const ids = userAnswerRaw;
-        const values = ids.map((id) => q.options.find((opt) => opt.id === id)?.text || "");
-        return { id: ids, value: values };
-      }
-      case "sequence": {
-        const q = question;
-        const ids = userAnswerRaw;
-        const values = ids.map((id) => q.items.find((item) => item.id === id)?.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 = q.prompts.find((p) => p.id === promptId)?.content || "";
-          const optionText = q.options.find((o) => o.id === optionId)?.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 = q.draggableItems.find((d) => d.id === draggableId)?.content || `(ID: ${draggableId})`;
-            const dropZoneText = q.dropZones.find((z3) => z3.id === dropZoneId)?.label || `(ID: ${dropZoneId})`;
-            enrichedUserAnswerMap[draggableText] = dropZoneText;
-          }
-          return { id: null, value: enrichedUserAnswerMap };
-        }
-        return { id: null, value: userAnswerRaw };
-      }
-      default:
-        return { id: null, value: userAnswerRaw };
-    }
-  }
-  async _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);
-    };
-    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 = q.points ?? 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) {
-    if (!this.config.settings?.webhookUrl) {
-      results.webhookStatus = "idle";
-      return;
-    }
-    results.webhookStatus = "sending";
-    try {
-      const response = await fetch(this.config.settings.webhookUrl, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(results)
-      });
-      if (response.ok) {
-        results.webhookStatus = "success";
-      } else {
-        results.webhookStatus = "error";
-        results.webhookError = `Webhook returned status: ${response.status} ${response.statusText}`;
-        try {
-          const errorBody = await response.text();
-          results.webhookError += ` - Body: ${errorBody.substring(0, 200)}`;
-        } catch (e) {
-        }
-      }
-    } catch (error) {
-      results.webhookStatus = "error";
-      results.webhookError = error instanceof Error ? `Fetch error: ${error.message}` : "Unknown webhook error.";
-    }
-  }
-  _sendResultsToSCORM(results) {
-    if (!this.scormService || !this.scormService.hasAPI() || this.quizResultState.scormStatus === "no_api") {
-      results.scormStatus = this.quizResultState.scormStatus || "idle";
-      return;
-    }
-    if (this.quizResultState.scormStatus === "error" && this.quizResultState.scormError?.includes("initialization failed")) {
-      results.scormStatus = "error";
-      results.scormError = this.quizResultState.scormError;
-      return;
-    }
-    results.scormStatus = "sending_data";
-    try {
-      this.scormService.setScore(results.score, results.maxScore, 0);
-      let lessonStatusSetting = "completed";
-      if (this.config.settings?.passingScorePercent !== void 0 && this.config.settings?.passingScorePercent !== null) {
-        lessonStatusSetting = results.passed ? "passed" : "failed";
-      } else if (this.config.settings?.scorm?.setCompletionOnFinish) {
-        lessonStatusSetting = "completed";
-      }
-      this.scormService.setLessonStatus(lessonStatusSetting, results.passed);
-      if (results.totalTimeSpentSeconds !== void 0 && this.scormService.formatCMITime) {
-        const cmiTime = this.scormService.formatCMITime(results.totalTimeSpentSeconds);
-        const sessionTimeVar = this.config.settings?.scorm?.sessionTimeVar || (this.scormService.getSCORMVersion() === "2004" ? "cmi.session_time" : "cmi.core.session_time");
-        if (sessionTimeVar) this.scormService.setValue(sessionTimeVar, cmiTime);
-      }
-      const commitResult = this.scormService.commit();
-      if (commitResult.success) {
-        results.scormStatus = "committed";
-      } else {
-        results.scormStatus = "error";
-        results.scormError = commitResult.error || "SCORM commit failed.";
-      }
-    } catch (e) {
-      results.scormStatus = "error";
-      results.scormError = e instanceof Error ? e.message : "Unknown SCORM data sending error.";
-    }
-  }
-};
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var RadioGroup = React9.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Root,
-    {
-      className: cn("grid gap-2", className),
-      ...props,
-      ref
-    }
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React9.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    RadioGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(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 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    ),
-    ...props
-  }
-));
-Card.displayName = "Card";
-var CardHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var CardContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
-var MarkdownRenderer = ({
-  content,
-  className
-}) => {
-  if (!content) {
-    return null;
-  }
-  const getVideoId = (url) => {
-    try {
-      const urlObj = new URL(url);
-      if (urlObj.hostname.includes("youtube.com") || urlObj.hostname.includes("youtu.be")) {
-        const videoId = urlObj.hostname.includes("youtu.be") ? urlObj.pathname.split("/").pop() : urlObj.searchParams.get("v");
-        return { platform: "youtube", id: videoId ? videoId : null };
-      }
-      if (urlObj.hostname.includes("vimeo.com")) {
-        const videoId = urlObj.pathname.split("/").pop();
-        return { platform: "vimeo", id: videoId ? videoId : null };
-      }
-    } catch (e) {
-    }
-    return { platform: null, id: null };
-  };
-  const processContentForVideos = (text) => {
-    const videoUrlRegex = /(^|\s)((https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/|vimeo\.com\/)[^\s]+)($|\s)/g;
-    return text.replace(
-      videoUrlRegex,
-      (match, preWhitespace, url, _p3, _p4, postWhitespace) => {
-        const replacement = `
-
-![Embedded Video](${url.trim()})
-
-`;
-        return `${preWhitespace.replace(
-          /\n/g,
-          ""
-        )}${replacement}${postWhitespace.replace(/\n/g, "")}`;
-      }
-    );
-  };
-  const processedContent = processContentForVideos(content);
-  return (
-    // Using Tailwind Typography for beautiful default styling of markdown content
-    /* @__PURE__ */ jsx("div", { className: `prose dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ jsx(
-      ReactMarkdown,
-      {
-        remarkPlugins: [remarkGfm, remarkMath],
-        rehypePlugins: [rehypeHighlight, rehypeKatex],
-        components: {
-          // Override the default image component to handle videos and responsive images
-          img: ({ node, ...props }) => {
-            const src = props.src || "";
-            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__ */ jsx("div", { className: "aspect-w-16 aspect-h-9 my-4", children: /* @__PURE__ */ jsx(
-                "iframe",
-                {
-                  src: videoSrc,
-                  title: props.alt || "Embedded video",
-                  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-                  allowFullScreen: true,
-                  className: "w-full h-full rounded-md"
-                }
-              ) });
-            }
-            return (
-              // eslint-disable-next-line @next/next/no-img-element
-              /* @__PURE__ */ jsx(
-                "img",
-                {
-                  ...props,
-                  style: {
-                    maxWidth: "100%",
-                    height: "auto",
-                    borderRadius: "0.5rem",
-                    margin: "1rem 0"
-                  },
-                  alt: props.alt || ""
-                }
-              )
-            );
-          },
-          // Override the default table to add responsive wrapper
-          table: ({ node, ...props }) => /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsx("table", { ...props, className: "my-4 w-full text-sm" }) }),
-          // Override default blockquote for better styling
-          blockquote: ({ node, ...props }) => /* @__PURE__ */ jsx(
-            "blockquote",
-            {
-              ...props,
-              className: "border-l-4 border-primary bg-muted/50 p-4 my-4 italic"
-            }
-          )
-        },
-        children: processedContent
-      }
-    ) })
-  );
-};
-var MultipleChoiceQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, options, points, explanation, correctAnswerId, id: questionId } = question;
-  const handleSelection = (value) => {
-    onAnswerChange(value);
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsx(
-        RadioGroup,
-        {
-          value: userAnswer || void 0,
-          onValueChange: handleSelection,
-          className: "space-y-3",
-          "aria-labelledby": `question-prompt-${questionId}`,
-          children: options.map((option) => {
-            const isSelected = userAnswer === option.id;
-            const isCorrect = option.id === correctAnswerId;
-            let itemClassName = "p-4 rounded-lg border-2 transition-all cursor-pointer hover:border-primary";
-            if (showCorrectAnswer) {
-              if (isCorrect) {
-                itemClassName += " border-green-500 bg-green-500/10";
-              } else if (isSelected && !isCorrect) {
-                itemClassName += " border-destructive bg-destructive/10";
-              } else {
-                itemClassName += " border-muted";
-              }
-            } else {
-              itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
-            }
-            return /* @__PURE__ */ jsx(
-              Label,
-              {
-                htmlFor: option.id,
-                className: itemClassName,
-                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx(RadioGroupItem, { value: option.id, id: option.id, className: "mr-3" }),
-                  /* @__PURE__ */ jsx("div", { className: "text-base flex-1", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: option.text }) })
-                ] })
-              },
-              option.id
-            );
-          })
-        }
-      ),
-      showCorrectAnswer && explanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
-      ] })
-    ] })
-  ] });
-};
-var TrueFalseQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, points, explanation, correctAnswer, id: questionId } = question;
-  const options = [
-    { id: `true-${questionId}`, label: "True", value: "true" },
-    { id: `false-${questionId}`, label: "False", value: "false" }
-  ];
-  const handleSelection = (value) => {
-    onAnswerChange(value);
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsx(
-        RadioGroup,
-        {
-          value: userAnswer || void 0,
-          onValueChange: handleSelection,
-          className: "space-y-3",
-          "aria-labelledby": `question-prompt-${questionId}`,
-          children: options.map((option) => {
-            const isSelected = userAnswer === option.value;
-            const isOptionCorrect = option.value === "true" && correctAnswer === true || option.value === "false" && correctAnswer === false;
-            let itemClassName = "p-4 rounded-lg border-2 transition-all cursor-pointer hover:border-primary";
-            if (showCorrectAnswer) {
-              if (isOptionCorrect) {
-                itemClassName += " border-green-500 bg-green-500/10";
-              } else if (isSelected && !isOptionCorrect) {
-                itemClassName += " border-destructive bg-destructive/10";
-              } else {
-                itemClassName += " border-muted";
-              }
-            } else {
-              itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
-            }
-            return /* @__PURE__ */ jsx(
-              Label,
-              {
-                htmlFor: option.id,
-                className: itemClassName,
-                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx(RadioGroupItem, { value: option.value, id: option.id, className: "mr-3" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-base", children: option.label })
-                ] })
-              },
-              option.id
-            );
-          })
-        }
-      ),
-      showCorrectAnswer && explanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
-      ] })
-    ] })
-  ] });
-};
-var Checkbox = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var MultipleResponseQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, options, points, explanation, correctAnswerIds, id: questionId } = question;
-  const handleSelectionChange = (optionId, checked) => {
-    const currentAnswers = Array.isArray(userAnswer) ? [...userAnswer] : [];
-    let newAnswers;
-    if (checked) {
-      if (!currentAnswers.includes(optionId)) {
-        newAnswers = [...currentAnswers, optionId];
-      } else {
-        newAnswers = currentAnswers;
-      }
-    } else {
-      newAnswers = currentAnswers.filter((id) => id !== optionId);
-    }
-    onAnswerChange(newAnswers.length > 0 ? newAnswers : null);
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", role: "group", "aria-labelledby": `question-prompt-${questionId}`, children: 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";
-        if (showCorrectAnswer) {
-          if (isCorrectOption) {
-            itemClassName += isSelected ? " border-green-500 bg-green-500/10" : " border-green-500";
-          } else {
-            itemClassName += isSelected ? " border-destructive bg-destructive/10" : " border-muted";
-          }
-        } else {
-          itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
-        }
-        return /* @__PURE__ */ jsxs(
-          Label,
-          {
-            htmlFor: option.id,
-            className: itemClassName,
-            children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: option.id,
-                  checked: isSelected,
-                  onCheckedChange: (checked) => handleSelectionChange(option.id, !!checked),
-                  className: "mr-3",
-                  "aria-label": option.text.replace(/<[^>]*>?/gm, "")
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "text-base flex-1", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: option.text }) })
-            ]
-          },
-          option.id
-        );
-      }) }),
-      showCorrectAnswer && explanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
-      ] })
-    ] })
-  ] });
-};
-var Input = React9.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-var ShortAnswerQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, points, explanation, acceptedAnswers, id: questionId, isCaseSensitive } = question;
-  const handleInputChange = (event) => {
-    onAnswerChange(event.target.value || null);
-  };
-  const displayUserAnswer = userAnswer || "";
-  let isActuallyCorrect = false;
-  if (showCorrectAnswer && userAnswer) {
-    const userAnswerTrimmed = userAnswer.trim();
-    isActuallyCorrect = acceptedAnswers.some(
-      (accAns) => isCaseSensitive ? accAns.trim() === userAnswerTrimmed : accAns.trim().toLowerCase() === userAnswerTrimmed.toLowerCase()
-    );
-  }
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: `short-answer-input-${questionId}`, className: "sr-only", children: "Your Answer" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: `short-answer-input-${questionId}`,
-          type: "text",
-          value: displayUserAnswer,
-          onChange: handleInputChange,
-          placeholder: "Type your answer here...",
-          "aria-describedby": explanation ? `explanation-${questionId}` : void 0,
-          className: `
-            ${showCorrectAnswer && userAnswer ? isActuallyCorrect ? "border-green-500 focus-visible:ring-green-500" : "border-destructive focus-visible:ring-destructive" : "border-input"}
-          `
-        }
-      ),
-      showCorrectAnswer && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
-        userAnswer && !isActuallyCorrect && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: "Your answer was marked incorrect." }),
-        /* @__PURE__ */ jsxs("div", { className: "p-3 bg-accent/20 border border-accent rounded-md", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Accepted Answers:" }),
-          /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside text-sm text-accent-foreground/80", children: acceptedAnswers.map((ans, idx) => /* @__PURE__ */ jsx("li", { children: ans }, idx)) }),
-          isCaseSensitive && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "(Case-sensitive)" })
-        ] }),
-        explanation && /* @__PURE__ */ jsxs("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Explanation:" }),
-          /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-var NumericQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, points, explanation, answer: correctAnswerValue, tolerance, id: questionId } = question;
-  const handleInputChange = (event) => {
-    const value = event.target.value;
-    if (value === "" || /^-?\d*\.?\d*$/.test(value)) {
-      onAnswerChange(value === "" ? null : value);
-    }
-  };
-  const displayUserAnswer = userAnswer || "";
-  let isActuallyCorrect = false;
-  if (showCorrectAnswer && userAnswer !== null && userAnswer !== "") {
-    const userAnswerNum = parseFloat(String(userAnswer));
-    if (!isNaN(userAnswerNum)) {
-      isActuallyCorrect = tolerance !== void 0 && tolerance !== null ? Math.abs(userAnswerNum - correctAnswerValue) <= tolerance : userAnswerNum === correctAnswerValue;
-    }
-  }
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: `numeric-input-${questionId}`, className: "sr-only", children: "Your Answer" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: `numeric-input-${questionId}`,
-          type: "text",
-          inputMode: "numeric",
-          pattern: "[0-9]*\\.?[0-9]*",
-          value: displayUserAnswer,
-          onChange: handleInputChange,
-          placeholder: "Enter a number",
-          "aria-describedby": explanation ? `explanation-${questionId}` : void 0,
-          className: `
-            ${showCorrectAnswer && userAnswer !== null && userAnswer !== "" ? isActuallyCorrect ? "border-green-500 focus-visible:ring-green-500" : "border-destructive focus-visible:ring-destructive" : "border-input"}
-          `
-        }
-      ),
-      showCorrectAnswer && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
-        userAnswer !== null && userAnswer !== "" && !isActuallyCorrect && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: "Your answer was marked incorrect." }),
-        /* @__PURE__ */ jsxs("div", { className: "p-3 bg-accent/20 border border-accent rounded-md", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Correct Answer:" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-accent-foreground/80", children: [
-            correctAnswerValue,
-            tolerance !== void 0 && tolerance !== null && tolerance > 0 && ` (Tolerance: \xB1${tolerance}, Accepted range: ${correctAnswerValue - tolerance} to ${correctAnswerValue + tolerance})`
-          ] })
-        ] }),
-        explanation && /* @__PURE__ */ jsxs("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Explanation:" }),
-          /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-var FillInTheBlanksQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, segments, answers: correctAnswersMap, points, explanation, id: questionId, isCaseSensitive } = question;
-  const [userInputs, setUserInputs] = useState({});
-  useEffect(() => {
-    if (userAnswer && typeof userAnswer === "object" && !Array.isArray(userAnswer)) {
-      setUserInputs(userAnswer);
-    } else {
-      const initialInputs = {};
-      segments.forEach((segment) => {
-        if (segment.type === "blank" && segment.id) {
-          initialInputs[segment.id] = "";
-        }
-      });
-      setUserInputs(initialInputs);
-    }
-  }, [segments, userAnswer]);
-  const handleInputChange = (blankId, value) => {
-    const newInputs = { ...userInputs, [blankId]: value };
-    setUserInputs(newInputs);
-    const hasValue = Object.values(newInputs).some((val) => val.trim() !== "");
-    onAnswerChange(hasValue ? newInputs : null);
-  };
-  const getCorrectnessForBlank = (blankId) => {
-    if (!showCorrectAnswer || !userInputs[blankId]) return null;
-    const userAnswerForBlank = userInputs[blankId]?.trim();
-    const correctAnswerDef = correctAnswersMap.find((a) => a.blankId === blankId);
-    if (!correctAnswerDef || !userAnswerForBlank) return false;
-    const caseSensitive = isCaseSensitive === void 0 ? false : isCaseSensitive;
-    return correctAnswerDef.acceptedValues.some(
-      (accVal) => caseSensitive ? accVal.trim() === userAnswerForBlank : accVal.trim().toLowerCase() === userAnswerForBlank.toLowerCase()
-    );
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-base leading-relaxed flex flex-wrap items-center gap-x-1", "aria-labelledby": `question-prompt-${questionId}`, children: segments.map((segment, index) => {
-        if (segment.type === "text") {
-          return /* @__PURE__ */ jsx(
-            MarkdownRenderer,
-            {
-              content: segment.content || "",
-              className: "inline"
-            },
-            `text-${index}`
-          );
-        }
-        if (segment.type === "blank" && segment.id) {
-          const blankId = segment.id;
-          const isCorrect = getCorrectnessForBlank(blankId);
-          let inputClassName = "inline-block w-auto min-w-[100px] max-w-[200px] h-8 mx-1 align-baseline text-base";
-          if (showCorrectAnswer && userInputs[blankId]?.trim()) {
-            inputClassName += isCorrect ? " border-green-500 focus-visible:ring-green-500" : " border-destructive focus-visible:ring-destructive";
-          } else {
-            inputClassName += " border-input";
-          }
-          return /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: blankId,
-              type: "text",
-              value: userInputs[blankId] || "",
-              onChange: (e) => handleInputChange(blankId, e.target.value),
-              placeholder: "\u0110i\u1EC1n...",
-              className: inputClassName,
-              "aria-label": `Blank ${index + 1}`,
-              disabled: showCorrectAnswer
-            },
-            blankId
-          );
-        }
-        return null;
-      }) }),
-      showCorrectAnswer && explanation && /* @__PURE__ */ jsxs("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Gi\u1EA3i th\xEDch chung:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
-      ] }),
-      showCorrectAnswer && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-3", children: correctAnswersMap.map((ansDef) => {
-        const isBlankCorrect = getCorrectnessForBlank(ansDef.blankId);
-        const userAnswerDisplay = userInputs[ansDef.blankId] || "Ch\u01B0a tr\u1EA3 l\u1EDDi";
-        return /* @__PURE__ */ jsxs("div", { className: `p-2 border rounded-md ${isBlankCorrect ? "border-green-500/50 bg-green-500/10" : "border-destructive/50 bg-destructive/10"}`, children: [
-          /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
-            /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
-              "\xD4 tr\u1ED1ng '",
-              segments.find((s) => s.id === ansDef.blankId && s.type === "blank")?.id || ansDef.blankId,
-              "':"
-            ] }),
-            ' B\u1EA1n \u0111\xE3 \u0111i\u1EC1n: "',
-            userAnswerDisplay,
-            '".'
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs", children: [
-            "\u0110\xE1p \xE1n ch\u1EA5p nh\u1EADn: ",
-            ansDef.acceptedValues.join(", ")
-          ] })
-        ] }, `feedback-${ansDef.blankId}`);
-      }) })
-    ] })
-  ] });
-};
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React9.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var SequenceQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, items, points, explanation, id: questionId, correctOrder } = question;
-  const [selectedSequence, setSelectedSequence] = useState([]);
-  const [availableItems, setAvailableItems] = useState([]);
-  useEffect(() => {
-    const initialUserOrder = Array.isArray(userAnswer) ? userAnswer : [];
-    const initialSelected = [];
-    const initialAvailable = [...items];
-    initialUserOrder.forEach((itemId) => {
-      const item = items.find((i) => i.id === itemId);
-      if (item) {
-        initialSelected.push(item);
-        const itemIndexInAvailable = initialAvailable.findIndex((i) => i.id === itemId);
-        if (itemIndexInAvailable > -1) {
-          initialAvailable.splice(itemIndexInAvailable, 1);
-        }
-      }
-    });
-    setSelectedSequence(initialSelected);
-    setAvailableItems(initialAvailable);
-  }, [items, userAnswer]);
-  const handleSelectItem = (item) => {
-    if (showCorrectAnswer) return;
-    const newSelectedSequence = [...selectedSequence, item];
-    setSelectedSequence(newSelectedSequence);
-    setAvailableItems(availableItems.filter((i) => i.id !== item.id));
-    onAnswerChange(newSelectedSequence.map((i) => i.id));
-  };
-  const handleRemoveFromSequence = (itemToRemove, index) => {
-    if (showCorrectAnswer) return;
-    const newSelectedSequence = selectedSequence.filter((_, i) => i !== index);
-    setSelectedSequence(newSelectedSequence);
-    setAvailableItems([...availableItems, itemToRemove].sort((a, b) => items.findIndex((i) => i.id === a.id) - items.findIndex((i) => i.id === b.id)));
-    onAnswerChange(newSelectedSequence.length > 0 ? newSelectedSequence.map((i) => i.id) : null);
-  };
-  const handleResetSequence = () => {
-    if (showCorrectAnswer) return;
-    setSelectedSequence([]);
-    setAvailableItems([...items]);
-    onAnswerChange(null);
-  };
-  const getFeedbackIcon = (index) => {
-    if (!showCorrectAnswer || !Array.isArray(userAnswer) || userAnswer.length <= index) return null;
-    const userItemId = userAnswer[index];
-    const correctItemId = correctOrder[index];
-    return userItemId === correctItemId ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-500 ml-2 flex-shrink-0" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-destructive ml-2 flex-shrink-0" });
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0 space-y-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx(Label, { className: "font-semibold", children: "S\u1EAFp x\u1EBFp c\xE1c m\u1EE5c sau theo \u0111\xFAng th\u1EE9 t\u1EF1:" }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2", children: availableItems.map((item) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            onClick: () => handleSelectItem(item),
-            className: "justify-start text-left h-auto py-2 px-3 whitespace-normal",
-            disabled: showCorrectAnswer,
-            children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: item.content })
-          },
-          item.id
-        )) }),
-        availableItems.length === 0 && selectedSequence.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: '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__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx(Label, { className: "font-semibold", children: "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn:" }),
-          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: handleResetSequence, disabled: showCorrectAnswer || selectedSequence.length === 0, children: [
-            /* @__PURE__ */ jsx(RotateCcw, { className: "mr-2 h-3.5 w-3.5" }),
-            " \u0110\u1EB7t l\u1EA1i"
-          ] })
-        ] }),
-        selectedSequence.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground p-3 border border-dashed rounded-md", children: "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__ */ jsx("ul", { className: "space-y-2", children: selectedSequence.map((item, index) => /* @__PURE__ */ jsxs(
-          "li",
-          {
-            onClick: () => handleRemoveFromSequence(item, index),
-            className: `flex items-center justify-between p-3 border rounded-md whitespace-normal ${showCorrectAnswer ? 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`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-grow flex items-center", children: [
-                /* @__PURE__ */ jsxs("span", { className: "font-semibold mr-2", children: [
-                  index + 1,
-                  "."
-                ] }),
-                /* @__PURE__ */ jsx(MarkdownRenderer, { content: item.content })
-              ] }),
-              showCorrectAnswer ? getFeedbackIcon(index) : /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-muted-foreground hover:text-destructive flex-shrink-0" })
-            ]
-          },
-          item.id
-        )) })
-      ] }),
-      showCorrectAnswer && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "p-3 bg-accent/20 border border-accent rounded-md", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Th\u1EE9 t\u1EF1 \u0111\xFAng:" }),
-          /* @__PURE__ */ jsx("ol", { className: "list-decimal list-inside text-sm text-accent-foreground/80 space-y-1 mt-1", children: correctOrder.map((itemId) => {
-            const item = items.find((i) => i.id === itemId);
-            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: item ? item.content : "Kh\xF4ng t\xECm th\u1EA5y m\u1EE5c" }) }, itemId);
-          }) })
-        ] }),
-        explanation && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Gi\u1EA3i th\xEDch:" }),
-          /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-var Select = SelectPrimitive.Root;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Label,
-  {
-    ref,
-    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var MatchingQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, prompts, options: initialOptions, points, explanation, correctAnswerMap, id: questionId } = question;
-  const [currentAnswers, setCurrentAnswers] = useState({});
-  const [shuffledOptions, setShuffledOptions] = useState(initialOptions);
-  useEffect(() => {
-    if (question.shuffleOptions) {
-      setShuffledOptions([...initialOptions].sort(() => Math.random() - 0.5));
-    } else {
-      setShuffledOptions(initialOptions);
-    }
-  }, [initialOptions, question.shuffleOptions]);
-  useEffect(() => {
-    if (userAnswer && typeof userAnswer === "object" && !Array.isArray(userAnswer)) {
-      setCurrentAnswers(userAnswer);
-    } else {
-      const initial = {};
-      prompts.forEach((p) => initial[p.id] = "");
-      setCurrentAnswers(initial);
-    }
-  }, [userAnswer, prompts]);
-  const handleSelectChange = (promptId, optionId) => {
-    const newAnswers = { ...currentAnswers, [promptId]: optionId };
-    setCurrentAnswers(newAnswers);
-    const hasSelection = Object.values(newAnswers).some((val) => val && val !== "");
-    onAnswerChange(hasSelection ? newAnswers : null);
-  };
-  const getCorrectOptionIdForPrompt = (promptId) => {
-    return correctAnswerMap.find((map) => map.promptId === promptId)?.optionId;
-  };
-  const getPlainText = (htmlString) => {
-    if (!htmlString) return "";
-    if (typeof document !== "undefined") {
-      const tempDiv = document.createElement("div");
-      tempDiv.innerHTML = htmlString;
-      return tempDiv.textContent || tempDiv.innerText || "";
-    }
-    return htmlString.replace(/<[^>]*>?/gm, "");
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0 space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4", children: prompts.map((promptItem) => {
-        const selectedOptionId = currentAnswers[promptItem.id] || "";
-        const correctOptionId = getCorrectOptionIdForPrompt(promptItem.id);
-        const isSelectionCorrect = showCorrectAnswer && selectedOptionId ? selectedOptionId === correctOptionId : null;
-        let borderColor = "border-muted";
-        if (showCorrectAnswer && selectedOptionId) {
-          borderColor = isSelectionCorrect ? "border-green-500" : "border-destructive";
-        }
-        return /* @__PURE__ */ jsxs("div", { className: `p-3 border rounded-md ${borderColor} transition-colors bg-background`, children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: `select-prompt-${promptItem.id}`, className: "font-medium text-base block mb-2 whitespace-normal", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: promptItem.content }) }),
-          /* @__PURE__ */ jsxs(
-            Select,
-            {
-              value: selectedOptionId,
-              onValueChange: (value) => handleSelectChange(promptItem.id, value),
-              disabled: showCorrectAnswer,
-              children: [
-                /* @__PURE__ */ jsx(SelectTrigger, { id: `select-prompt-${promptItem.id}`, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Ch\u1ECDn \u0111\xE1p \xE1n..." }) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: shuffledOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, className: "whitespace-normal", children: getPlainText(option.content) }, option.id)) })
-              ]
-            }
-          ),
-          showCorrectAnswer && selectedOptionId && (isSelectionCorrect ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-5 w-5 text-green-500 mt-2 inline-block" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-5 w-5 text-destructive mt-2 inline-block" })),
-          showCorrectAnswer && !selectedOptionId && correctOptionId && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
-            "Ch\u01B0a ch\u1ECDn. \u0110\xE1p \xE1n \u0111\xFAng: ",
-            getPlainText(shuffledOptions.find((o) => o.id === correctOptionId)?.content)
-          ] })
-        ] }, promptItem.id);
-      }) }),
-      showCorrectAnswer && explanation && /* @__PURE__ */ jsxs("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Gi\u1EA3i th\xEDch:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
-      ] }),
-      showCorrectAnswer && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: "\u0110\xE1p \xE1n \u0111\xFAng:" }),
-        /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1 text-sm", children: correctAnswerMap.map((map) => {
-          const promptText = prompts.find((p) => p.id === map.promptId)?.content;
-          const optionText = initialOptions.find((o) => o.id === map.optionId)?.content;
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: `<strong>${getPlainText(promptText) || "N/A"}</strong> gh\xE9p v\u1EDBi <strong>${getPlainText(optionText) || "N/A"}</strong>` }) }, map.promptId);
-        }) })
-      ] })
-    ] })
-  ] });
-};
-var DragAndDropQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, draggableItems, dropZones, points, explanation, answerMap, id: questionId, backgroundImageUrl } = question;
-  const [currentAnswers, setCurrentAnswers] = useState({});
-  useEffect(() => {
-    if (userAnswer && typeof userAnswer === "object" && !Array.isArray(userAnswer)) {
-      setCurrentAnswers(userAnswer);
-    } else {
-      const initial = {};
-      draggableItems.forEach((item) => initial[item.id] = "");
-      setCurrentAnswers(initial);
-    }
-  }, [userAnswer, draggableItems]);
-  const handleSelectChange = (draggableItemId, dropZoneId) => {
-    const newAnswers = { ...currentAnswers, [draggableItemId]: dropZoneId };
-    setCurrentAnswers(newAnswers);
-    const hasSelection = Object.values(newAnswers).some((val) => val && val !== "");
-    onAnswerChange(hasSelection ? newAnswers : null);
-  };
-  const getCorrectDropZoneIdForDraggable = (draggableItemId) => {
-    return answerMap.find((map) => map.draggableId === draggableItemId)?.dropZoneId;
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0 space-y-4", children: [
-      backgroundImageUrl && /* @__PURE__ */ jsx("div", { className: "mb-4 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx(Label, { className: "font-semibold", children: "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;
-          let itemStyle = "flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 border rounded-md transition-colors bg-background";
-          if (showCorrectAnswer && selectedDropZoneId) {
-            itemStyle += isSelectionCorrect ? " border-green-500" : " border-destructive";
-          } else {
-            itemStyle += " border-muted";
-          }
-          return /* @__PURE__ */ jsxs("div", { className: itemStyle, children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: `select-draggable-${item.id}`, className: "font-medium text-base mb-2 sm:mb-0 sm:mr-4 flex-1", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: item.content }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 w-full sm:w-auto", children: [
-              /* @__PURE__ */ jsxs(
-                Select,
-                {
-                  value: selectedDropZoneId,
-                  onValueChange: (value) => handleSelectChange(item.id, value),
-                  disabled: showCorrectAnswer,
-                  children: [
-                    /* @__PURE__ */ jsx(SelectTrigger, { id: `select-draggable-${item.id}`, className: "w-full sm:min-w-[200px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Ch\u1ECDn v\u1ECB tr\xED..." }) }),
-                    /* @__PURE__ */ jsx(SelectContent, { children: dropZones.map((zone) => /* @__PURE__ */ jsx(SelectItem, { value: zone.id, children: zone.label.replace(/<[^>]*>?/gm, "") }, zone.id)) })
-                  ]
-                }
-              ),
-              showCorrectAnswer && selectedDropZoneId && (isSelectionCorrect ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-5 w-5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-5 w-5 text-destructive flex-shrink-0" }))
-            ] })
-          ] }, item.id);
-        })
-      ] }),
-      showCorrectAnswer && explanation && /* @__PURE__ */ jsxs("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Gi\u1EA3i th\xEDch:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
-      ] }),
-      showCorrectAnswer && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: "\u0110\xE1p \xE1n \u0111\xFAng:" }),
-        /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1 text-sm", children: answerMap.map((map) => {
-          const draggableText = draggableItems.find((d) => d.id === map.draggableId)?.content;
-          const dropZoneText = dropZones.find((z3) => z3.id === map.dropZoneId)?.label;
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: `<strong>${draggableText || "N/A"}</strong> v\xE0o <strong>${dropZoneText || "N/A"}</strong>` }) }, map.draggableId);
-        }) })
-      ] })
-    ] })
-  ] });
-};
-var HotspotQuestionUI = ({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}) => {
-  const { prompt, imageUrl, imageAltText, hotspots, points, explanation, correctAnswerIds, id: questionId } = question;
-  const [selectedIds, setSelectedIds] = useState([]);
-  useEffect(() => {
-    if (Array.isArray(userAnswer)) {
-      setSelectedIds(userAnswer);
-    } else {
-      setSelectedIds([]);
-    }
-  }, [userAnswer]);
-  const handleHotspotClick = (hotspotId) => {
-    if (showCorrectAnswer) return;
-    const newSelectedIds = selectedIds.includes(hotspotId) ? selectedIds.filter((id) => id !== hotspotId) : [...selectedIds, hotspotId];
-    setSelectedIds(newSelectedIds);
-    onAnswerChange(newSelectedIds.length > 0 ? newSelectedIds : null);
-  };
-  const getHotspotStyle = (hotspot) => {
-    const style = {
-      position: "absolute",
-      border: "2px dashed transparent",
-      cursor: showCorrectAnswer ? "default" : "pointer",
-      transition: "border-color 0.2s, background-color 0.2s"
-    };
-    if (hotspot.shape === "rect") {
-      style.left = `${hotspot.coords[0]}px`;
-      style.top = `${hotspot.coords[1]}px`;
-      style.width = `${hotspot.coords[2]}px`;
-      style.height = `${hotspot.coords[3]}px`;
-    } else if (hotspot.shape === "circle") {
-      style.left = `${hotspot.coords[0] - hotspot.coords[2]}px`;
-      style.top = `${hotspot.coords[1] - hotspot.coords[2]}px`;
-      style.width = `${hotspot.coords[2] * 2}px`;
-      style.height = `${hotspot.coords[2] * 2}px`;
-      style.borderRadius = "50%";
-    }
-    const isSelected = selectedIds.includes(hotspot.id);
-    const safeCorrectAnswerIds = correctAnswerIds || [];
-    const isCorrect = safeCorrectAnswerIds.includes(hotspot.id);
-    if (showCorrectAnswer) {
-      if (isCorrect && isSelected) {
-        style.borderColor = "hsl(var(--success-foreground, 142.1 70.6% 45.3%))";
-        style.backgroundColor = "hsla(var(--success-foreground, 142.1 70.6% 45.3%), 0.2)";
-      } else if (!isCorrect && isSelected) {
-        style.borderColor = "hsl(var(--destructive))";
-        style.backgroundColor = "hsla(var(--destructive), 0.2)";
-      } else if (isCorrect && !isSelected) {
-        style.borderColor = "hsl(var(--primary))";
-        style.borderStyle = "solid";
-      }
-    } else if (isSelected) {
-      style.borderColor = "hsl(var(--primary))";
-      style.backgroundColor = "hsla(var(--primary), 0.1)";
-    } else {
-      style.borderColor = "hsla(var(--muted-foreground), 0.7)";
-    }
-    return style;
-  };
-  const getPlainText = (htmlString) => {
-    if (!htmlString) return "";
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = htmlString;
-    return tempDiv.textContent || tempDiv.innerText || "";
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: prompt }) }),
-      points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0 space-y-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative w-full border border-muted rounded-md overflow-hidden", style: { maxWidth: "100%", maxHeight: "500px" }, children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: imageUrl,
-            alt: imageAltText || "Hotspot image",
-            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__ */ jsx(
-          "div",
-          {
-            title: getPlainText(hotspot.description) || `Hotspot ${hotspot.id}`,
-            style: getHotspotStyle(hotspot),
-            onClick: () => handleHotspotClick(hotspot.id),
-            "aria-pressed": selectedIds.includes(hotspot.id),
-            role: "button",
-            tabIndex: showCorrectAnswer ? -1 : 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") handleHotspotClick(hotspot.id);
-            }
-          },
-          hotspot.id
-        ))
-      ] }),
-      showCorrectAnswer && explanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
-      ] }),
-      showCorrectAnswer && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-semibold text-md", children: "Correct Hotspots:" }),
-        /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1 text-sm", children: (correctAnswerIds || []).map((id) => {
-          const hotspot = hotspots.find((h) => h.id === id);
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: hotspot?.description || hotspot?.id || "N/A", className: "inline" }) }, id);
-        }) })
-      ] })
-    ] })
-  ] });
-};
-var loadScript = (src, async = true) => {
-  return new Promise((resolve, reject) => {
-    const existingScript = document.querySelector(`script[src="${src}"]`);
-    if (existingScript) {
-      const readyState = existingScript.readyState;
-      if (readyState && readyState !== "loaded" && readyState !== "complete") {
-        existingScript.addEventListener("load", () => resolve());
-        existingScript.addEventListener("error", () => reject(new Error(`Error event for existing script: ${src}`)));
-      } else if (window.Blockly && src.includes("blockly.min.js") && window.Blockly.Blocks && window.Blockly.JavaScript) {
-        resolve();
-      } else if (window.Blockly && src.includes("blockly.min.js") && !window.Blockly.Blocks && src.includes("blocks.min.js")) {
-        existingScript.addEventListener("load", () => resolve());
-        existingScript.addEventListener("error", () => reject(new Error(`Error event for existing script (blocks): ${src}`)));
-      } else if (window.Blockly && src.includes("blockly.min.js") && !window.Blockly.JavaScript && src.includes("javascript.min.js")) {
-        existingScript.addEventListener("load", () => resolve());
-        existingScript.addEventListener("error", () => reject(new Error(`Error event for existing script (JS gen): ${src}`)));
-      } else {
-        resolve();
-      }
-      return;
-    }
-    const script = document.createElement("script");
-    script.src = src;
-    script.async = async;
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error(`Failed to load new script: ${src}`));
-    document.head.appendChild(script);
-  });
-};
-var loadBlocklyScript = () => {
-  return new Promise((resolve, reject) => {
-    if (typeof window.Blockly?.Blocks !== "undefined" && typeof window.Blockly?.JavaScript !== "undefined") {
-      resolve();
-      return;
-    }
-    const cdnOptions = [
-      {
-        name: "cdnjs",
-        mainSrc: "https://cdnjs.cloudflare.com/ajax/libs/blockly/9.0.0/blockly.min.js",
-        blocksSrc: "https://cdnjs.cloudflare.com/ajax/libs/blockly/9.0.0/blocks.min.js",
-        generatorSrc: "https://cdnjs.cloudflare.com/ajax/libs/blockly/9.0.0/javascript.min.js",
-        mediaPath: "https://cdnjs.cloudflare.com/ajax/libs/blockly/9.0.0/media/"
-      },
-      {
-        name: "unpkg",
-        mainSrc: "https://unpkg.com/blockly@9.0.0/blockly.min.js",
-        blocksSrc: "https://unpkg.com/blockly@9.0.0/blocks.min.js",
-        generatorSrc: "https://unpkg.com/blockly@9.0.0/javascript.min.js",
-        mediaPath: "https://unpkg.com/blockly@9.0.0/media/"
-      },
-      {
-        name: "jsdelivr",
-        mainSrc: "https://cdn.jsdelivr.net/npm/blockly@9.0.0/blockly.min.js",
-        blocksSrc: "https://cdn.jsdelivr.net/npm/blockly@9.0.0/blocks.min.js",
-        generatorSrc: "https://cdn.jsdelivr.net/npm/blockly@9.0.0/javascript.min.js",
-        mediaPath: "https://cdn.jsdelivr.net/npm/blockly@9.0.0/media/"
-      }
-    ];
-    const tryLoadFromCDN = async (cdnIndex) => {
-      if (cdnIndex >= cdnOptions.length) {
-        throw new Error("All Blockly CDN loading options failed");
-      }
-      const cdn = cdnOptions[cdnIndex];
-      try {
-        await loadScript(cdn.mainSrc);
-        const BlocklyGlobal = window.Blockly;
-        if (typeof BlocklyGlobal === "undefined") throw new Error(`Blockly global not found from ${cdn.name}.`);
-        if (BlocklyGlobal.utils?.global?.setPaths) {
-          BlocklyGlobal.utils.global.setPaths(cdn.mediaPath);
-        } else if (BlocklyGlobal.utils?.global) {
-          BlocklyGlobal.utils.global.blocklyPath = cdn.mediaPath;
-          BlocklyGlobal.MEDIA = cdn.mediaPath;
-        } else {
-          BlocklyGlobal.MEDIA = cdn.mediaPath;
-        }
-        await Promise.all([loadScript(cdn.blocksSrc), loadScript(cdn.generatorSrc)]);
-        if (typeof BlocklyGlobal.Blocks === "undefined") throw new Error(`Blockly.Blocks not found from ${cdn.name}.`);
-        if (typeof BlocklyGlobal.JavaScript === "undefined") throw new Error(`Blockly.JavaScript not found from ${cdn.name}.`);
-        resolve();
-      } catch (error) {
-        await tryLoadFromCDN(cdnIndex + 1);
-      }
-    };
-    tryLoadFromCDN(0).catch(reject);
-  });
-};
-var useBlocklyLoader = () => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [loadError, setLoadError] = useState(null);
-  const [isReady, setIsReady] = useState(false);
-  const attemptLoad = useCallback(() => {
-    setLoadError(null);
-    setIsReady(false);
-    loadBlocklyScript().then(() => {
-      setIsReady(true);
-      setIsLoading(false);
-      setLoadError(null);
-    }).catch((error) => {
-      setLoadError(error.message || "Unknown error loading Blockly.");
-      setIsLoading(false);
-      setIsReady(false);
-    });
-  }, []);
-  useEffect(() => {
-    if (isLoading && !isReady && !loadError) attemptLoad();
-  }, [isLoading, isReady, loadError, attemptLoad]);
-  const retry = useCallback(() => {
-    setLoadError(null);
-    setIsReady(false);
-    setIsLoading(true);
-  }, []);
-  return { isLoading, loadError, isReady, retry };
-};
-var BlocklyProgrammingQuestionUI = React9__default.forwardRef(({
-  question,
-  userAnswer,
-  showCorrectAnswer = false
-}, ref) => {
-  const blocklyDivRef = useRef(null);
-  const workspaceRef = useRef(null);
-  const [isInitializingComponent, setIsInitializingComponent] = useState(false);
-  const [componentError, setComponentError] = useState(null);
-  const { isLoading: blocklyLoading, loadError: blocklyLoadError, isReady: blocklyReady, retry } = useBlocklyLoader();
-  useImperativeHandle(ref, () => ({
-    getWorkspaceXml: () => {
-      if (workspaceRef.current && blocklyReady) {
-        const LocalBlockly = window.Blockly;
-        if (!LocalBlockly?.Xml?.workspaceToDom || !LocalBlockly?.Xml?.domToText) {
-          console.warn("Blockly.Xml methods not available for XML serialization in getWorkspaceXml.");
-          return null;
-        }
-        try {
-          const xml = LocalBlockly.Xml.workspaceToDom(workspaceRef.current);
-          return LocalBlockly.Xml.domToText(xml);
-        } catch (e) {
-          console.error("Error serializing Blockly workspace to XML in getWorkspaceXml:", e);
-          return null;
-        }
-      }
-      return null;
-    }
-  }));
-  const initializeBlocklyWorkspace = useCallback(() => {
-    if (!blocklyReady || !blocklyDivRef.current) return;
-    const LocalBlockly = window.Blockly;
-    if (!LocalBlockly?.inject || !LocalBlockly?.Xml || !LocalBlockly?.Events || !LocalBlockly?.Themes) {
-      setComponentError("Blockly library not fully loaded.");
-      setIsInitializingComponent(false);
-      return;
-    }
-    setComponentError(null);
-    let newXmlToLoad = null;
-    if (showCorrectAnswer && question.solutionWorkspaceXML) {
-      newXmlToLoad = question.solutionWorkspaceXML;
-    } else if (typeof userAnswer === "string" && userAnswer.trim().startsWith("<xml")) {
-      newXmlToLoad = userAnswer;
-    } else if (question.initialWorkspace) {
-      newXmlToLoad = question.initialWorkspace;
-    }
-    if (workspaceRef.current) {
-      let currentWorkspaceXML = "";
-      try {
-        currentWorkspaceXML = LocalBlockly.Xml.domToText(LocalBlockly.Xml.workspaceToDom(workspaceRef.current));
-      } catch (e) {
-      }
-      const readOnlyStateMatches = workspaceRef.current.options.readOnly === showCorrectAnswer;
-      if (currentWorkspaceXML === newXmlToLoad && readOnlyStateMatches) {
-        setIsInitializingComponent(false);
-        return;
-      }
-      if (currentWorkspaceXML === newXmlToLoad && !readOnlyStateMatches) {
-        workspaceRef.current.updateOptions({ readOnly: showCorrectAnswer, trashcan: !showCorrectAnswer });
-        setIsInitializingComponent(false);
-        return;
-      }
-    }
-    setIsInitializingComponent(true);
-    if (workspaceRef.current?.dispose) {
-      try {
-        workspaceRef.current.dispose();
-      } catch (e) {
-        console.error("Error disposing previous workspace:", e);
-      }
-      workspaceRef.current = null;
-    }
-    try {
-      const toolbox = question.toolboxDefinition || `<xml><category name="Logic" colour="210"><block type="controls_if"></block></category></xml>`;
-      const workspace = LocalBlockly.inject(blocklyDivRef.current, {
-        toolbox,
-        scrollbars: true,
-        trashcan: !showCorrectAnswer,
-        readOnly: showCorrectAnswer,
-        zoom: {
-          controls: true,
-          wheel: true,
-          startScale: 0.9,
-          maxScale: 3,
-          minScale: 0.3,
-          scaleSpeed: 1.2
-        },
-        grid: {
-          spacing: 20,
-          length: 3,
-          colour: "#374151",
-          snap: true
-        },
-        theme: LocalBlockly.Themes.Classic || void 0,
-        move: {
-          scrollbars: {
-            horizontal: true,
-            vertical: true
-          },
-          drag: true,
-          wheel: true
-        },
-        renderer: "geras"
-      });
-      workspaceRef.current = workspace;
-      if (newXmlToLoad) {
-        try {
-          const dom = LocalBlockly.Xml.textToDom(newXmlToLoad);
-          LocalBlockly.Xml.domToWorkspace(dom, workspace);
-        } catch (e) {
-          console.error("Error loading XML to workspace:", e, "XML:", newXmlToLoad);
-          setComponentError("Error loading blocks.");
-        }
-      }
-      if (workspace.scrollCenter) workspace.scrollCenter();
-      if (LocalBlockly.svgResize) LocalBlockly.svgResize(workspace);
-      setTimeout(() => {
-        if (workspace && LocalBlockly.svgResize) {
-          LocalBlockly.svgResize(workspace);
-        }
-      }, 100);
-    } catch (e) {
-      console.error("Error initializing Blockly workspace:", e);
-      setComponentError(`Init failed: ${e instanceof Error ? e.message : String(e)}`);
-    } finally {
-      setIsInitializingComponent(false);
-    }
-  }, [
-    blocklyReady,
-    question.id,
-    question.toolboxDefinition,
-    question.initialWorkspace,
-    question.solutionWorkspaceXML,
-    showCorrectAnswer,
-    userAnswer
-  ]);
-  useEffect(() => {
-    if (blocklyReady && blocklyDivRef.current) {
-      initializeBlocklyWorkspace();
-    }
-    return () => {
-      if (workspaceRef.current?.dispose) {
-        try {
-          workspaceRef.current.dispose();
-        } catch (disposeError) {
-          console.error("Error during Blockly workspace disposal on unmount:", disposeError);
-        }
-        workspaceRef.current = null;
-      }
-    };
-  }, [blocklyReady, question.id, initializeBlocklyWorkspace]);
-  useEffect(() => {
-    let resizeTimeout;
-    const handleResize = () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        if (workspaceRef.current && blocklyReady) {
-          const LocalBlockly = window.Blockly;
-          if (LocalBlockly?.svgResize) {
-            LocalBlockly.svgResize(workspaceRef.current);
-          }
-        }
-      }, 150);
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      clearTimeout(resizeTimeout);
-    };
-  }, [blocklyReady]);
-  const workspaceHeight = showCorrectAnswer ? "300px" : "450px";
-  const workspaceContainerId = `blockly-workspace-container-${question.id}`;
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: question.prompt }) }),
-      question.points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        question.points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      blocklyLoading && /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            height: workspaceHeight,
-            width: "100%",
-            borderRadius: "0.375rem",
-            border: "1px solid hsl(var(--border))",
-            backgroundColor: "hsl(var(--background))"
-          },
-          className: "flex items-center justify-center",
-          children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground animate-pulse mb-2", children: "Loading Blockly Environment..." }),
-            /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto" })
-          ] })
-        }
-      ),
-      blocklyLoadError && !blocklyLoading && /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            height: workspaceHeight,
-            width: "100%",
-            borderRadius: "0.375rem",
-            border: "1px solid hsl(var(--destructive))",
-            backgroundColor: "hsl(var(--card))"
-          },
-          className: "flex items-center justify-center p-4",
-          children: /* @__PURE__ */ jsxs("div", { className: "text-destructive text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "font-semibold text-lg", children: "Failed to load Blockly" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm mt-2 mb-3", children: blocklyLoadError }),
-            /* @__PURE__ */ jsxs("div", { className: "space-x-2", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: retry,
-                  className: "px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors text-sm",
-                  children: "Try Again"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => window.location.reload(),
-                  className: "px-4 py-2 bg-destructive text-destructive-foreground rounded hover:bg-destructive/90 transition-colors text-sm",
-                  children: "Refresh Page"
-                }
-              )
-            ] })
-          ] })
-        }
-      ),
-      !blocklyLoading && !blocklyLoadError && /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: workspaceContainerId,
-          ref: blocklyDivRef,
-          style: {
-            height: workspaceHeight,
-            width: "100%",
-            borderRadius: "0.375rem",
-            border: `1px solid ${componentError ? "hsl(var(--destructive))" : "hsl(var(--border))"}`,
-            backgroundColor: "hsl(var(--card))",
-            position: "relative",
-            userSelect: "none",
-            overflow: "hidden"
-          },
-          "aria-label": `Blockly programming workspace for question: ${question.prompt}`
-        }
-      ),
-      showCorrectAnswer && question.explanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
-        /* @__PURE__ */ jsx(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";
-var SCRATCH_JS_BLOCK_DEFINITIONS_PATH = "/static/scratch-blocks/js/blocks_compressed_vertical.js";
-var SCRATCH_JS_MSG_EN_PATH = "/static/scratch-blocks/msg/js/en.js";
-var SCRATCH_MEDIA_PATH = "/static/scratch-blocks/media/";
-var loadedScriptPromises = /* @__PURE__ */ new Map();
-var loadScript2 = (src) => {
-  const fullSrc = src.startsWith("/") ? src : `/${src}`;
-  if (loadedScriptPromises.has(fullSrc)) {
-    const promise2 = loadedScriptPromises.get(fullSrc);
-    return promise2;
-  }
-  const promise = new Promise((resolve, reject) => {
-    const existingScript = document.querySelector(`script[src="${fullSrc}"]`);
-    if (existingScript) {
-      const status = existingScript.getAttribute("data-load-status");
-      if (status === "loaded") {
-        resolve();
-        return;
-      } else if (status === "loading") {
-        const onLoad2 = () => {
-          existingScript.setAttribute("data-load-status", "loaded");
-          existingScript.removeEventListener("load", onLoad2);
-          existingScript.removeEventListener("error", onError2);
-          resolve();
-        };
-        const onError2 = (ev) => {
-          existingScript.setAttribute("data-load-status", "error");
-          existingScript.removeEventListener("load", onLoad2);
-          existingScript.removeEventListener("error", onError2);
-          loadedScriptPromises.delete(fullSrc);
-          const errorMsg = `Error event for existing script tag ${src}. Full URL: ${existingScript.src}. Event: ${ev.type}.`;
-          console.error("ScratchUI: loadScript error (existing) -", errorMsg);
-          reject(new Error(errorMsg));
-        };
-        existingScript.addEventListener("load", onLoad2);
-        existingScript.addEventListener("error", onError2);
-        return;
-      } else if (status === "error") {
-        existingScript.remove();
-      }
-    }
-    const script = document.createElement("script");
-    script.src = fullSrc;
-    script.async = false;
-    script.setAttribute("data-load-status", "loading");
-    const onLoad = () => {
-      script.setAttribute("data-load-status", "loaded");
-      script.removeEventListener("load", onLoad);
-      script.removeEventListener("error", onError);
-      resolve();
-    };
-    const onError = (ev) => {
-      const errorMsg = `Failed to load new script: ${script.src}. Event: ${typeof ev === "string" ? ev : ev.type}. Check browser network tab for 404 or other errors. Ensure file exists in public folder and path is correct.`;
-      console.error("ScratchUI: loadScript error (new) -", errorMsg, "Full URL attempted:", script.src);
-      script.setAttribute("data-load-status", "error");
-      script.removeEventListener("load", onLoad);
-      script.removeEventListener("error", onError);
-      loadedScriptPromises.delete(fullSrc);
-      reject(new Error(errorMsg));
-    };
-    script.addEventListener("load", onLoad);
-    script.addEventListener("error", onError);
-    document.body.appendChild(script);
-  });
-  loadedScriptPromises.set(fullSrc, promise);
-  return promise;
-};
-var ScratchProgrammingQuestionUI = forwardRef(({
-  question,
-  userAnswer,
-  showCorrectAnswer = false
-}, ref) => {
-  const blocklyDivRef = useRef(null);
-  const workspaceRef = useRef(null);
-  const [isBlocklyReady, setIsBlocklyReady] = useState(false);
-  const [componentError, setComponentError] = useState(null);
-  const [isLoadingScripts, setIsLoadingScripts] = useState(true);
-  const attemptLoadScripts = useCallback(async () => {
-    setIsLoadingScripts(true);
-    setComponentError(null);
-    console.log("ScratchUI: Starting script loading sequence...");
-    try {
-      console.log("ScratchUI: Attempting to load Scratch Engine/Layout:", SCRATCH_JS_ENGINE_LAYOUT_PATH);
-      await loadScript2(SCRATCH_JS_ENGINE_LAYOUT_PATH);
-      const BlocklyGlobalEngine = window.Blockly;
-      if (typeof BlocklyGlobalEngine === "undefined") {
-        throw new Error(`Blockly global object (window.Blockly) not found after loading engine script: ${SCRATCH_JS_ENGINE_LAYOUT_PATH}.`);
-      }
-      console.log(`ScratchUI: After engine/layout load: Blockly defined: ${!!BlocklyGlobalEngine}, Blockly.Blocks defined: ${!!BlocklyGlobalEngine?.Blocks}, Blockly.Msg defined: ${!!BlocklyGlobalEngine?.Msg}, Blockly.ScratchMsgs defined: ${!!BlocklyGlobalEngine?.ScratchMsgs}`);
-      console.log("ScratchUI: Attempting to load Messages:", SCRATCH_JS_MSG_EN_PATH);
-      await loadScript2(SCRATCH_JS_MSG_EN_PATH);
-      let BlocklyGlobalAfterMsg = window.Blockly;
-      if (!BlocklyGlobalAfterMsg) throw new Error("Blockly global disappeared after loading message script.");
-      console.log(`ScratchUI: After en.js load: Blockly defined: ${!!BlocklyGlobalAfterMsg}, Blockly.Msg defined: ${!!BlocklyGlobalAfterMsg?.Msg}, Keys in Blockly.Msg: ${BlocklyGlobalAfterMsg?.Msg ? Object.keys(BlocklyGlobalAfterMsg.Msg).length : "N/A"}. Sample Blockly.Msg.LOGIC_HUE: ${BlocklyGlobalAfterMsg?.Msg?.LOGIC_HUE}`);
-      if (!BlocklyGlobalAfterMsg.Msg || Object.keys(BlocklyGlobalAfterMsg.Msg).length === 0) {
-        console.warn("ScratchUI: Blockly.Msg appears unpopulated or empty. Checking if Blockly.ScratchMsgs.addLocaleData can be used...");
-        if (BlocklyGlobalAfterMsg.ScratchMsgs && typeof BlocklyGlobalAfterMsg.ScratchMsgs.addLocaleData === "function") {
-          console.log("ScratchUI: Blockly.ScratchMsgs.addLocaleData is available. Attempting to call Blockly.ScratchMsgs.addLocaleData('en').");
-          BlocklyGlobalAfterMsg.ScratchMsgs.addLocaleData("en");
-          BlocklyGlobalAfterMsg = window.Blockly;
-          console.log(`ScratchUI: After attempting addLocaleData('en'): Keys in Blockly.Msg: ${BlocklyGlobalAfterMsg?.Msg ? Object.keys(BlocklyGlobalAfterMsg.Msg).length : "N/A"}. Sample Blockly.Msg.LOGIC_HUE: ${BlocklyGlobalAfterMsg?.Msg?.LOGIC_HUE}`);
-          if (!BlocklyGlobalAfterMsg.Msg || Object.keys(BlocklyGlobalAfterMsg.Msg).length === 0) {
-            throw new Error("Blockly.Msg still empty after calling addLocaleData. Message loading failed critically.");
-          }
-        } else {
-          throw new Error("Blockly.Msg is empty, and Blockly.ScratchMsgs.addLocaleData is not available. Message loading failed.");
-        }
-      }
-      console.log("ScratchUI: Attempting to load Scratch Block Definitions:", SCRATCH_JS_BLOCK_DEFINITIONS_PATH);
-      await loadScript2(SCRATCH_JS_BLOCK_DEFINITIONS_PATH);
-      const BlocklyGlobalBlocks = window.Blockly;
-      if (!BlocklyGlobalBlocks || !BlocklyGlobalBlocks.Blocks) {
-        throw new Error(`Blockly.Blocks not defined after loading ${SCRATCH_JS_BLOCK_DEFINITIONS_PATH}.`);
-      }
-      console.log(`ScratchUI: After block definitions load: Blockly.Blocks defined: ${!!BlocklyGlobalBlocks.Blocks}. Keys: ${BlocklyGlobalBlocks.Blocks ? Object.keys(BlocklyGlobalBlocks.Blocks).slice(0, 10).join(", ") + "..." : "N/A"}. Essential block motion_movesteps defined: ${!!BlocklyGlobalBlocks.Blocks?.motion_movesteps}`);
-      if (typeof BlocklyGlobalBlocks.Blocks?.motion_movesteps === "undefined") {
-        throw new Error(`Essential Scratch blocks (e.g., motion_movesteps) not found after loading block definitions. Available blocks: ${Object.keys(BlocklyGlobalBlocks.Blocks || {}).join(", ")}`);
-      }
-      setIsBlocklyReady(true);
-      console.log("ScratchUI: All Scratch scripts loaded and essential checks passed. Blockly is ready for injection.");
-    } catch (error) {
-      console.error("ScratchUI: Error during Scratch/Blockly script loading sequence:", error);
-      setComponentError(error.message || "Failed to load critical Scratch/Blockly scripts.");
-      setIsBlocklyReady(false);
-    } finally {
-      setIsLoadingScripts(false);
-    }
-  }, []);
-  useEffect(() => {
-    attemptLoadScripts();
-  }, [attemptLoadScripts]);
-  useImperativeHandle(ref, () => ({
-    getWorkspaceXml: () => {
-      const LocalBlockly = window.Blockly;
-      if (workspaceRef.current && LocalBlockly?.Xml) {
-        try {
-          const xml = LocalBlockly.Xml.workspaceToDom(workspaceRef.current);
-          return LocalBlockly.Xml.domToText(xml);
-        } catch (e) {
-          console.error("ScratchUI: Error serializing Scratch workspace to XML:", e);
-          return null;
-        }
-      }
-      return null;
-    }
-  }));
-  const initializeWorkspace = useCallback(() => {
-    const LocalBlockly = window.Blockly;
-    if (!isBlocklyReady || !blocklyDivRef.current || !LocalBlockly) {
-      console.warn("ScratchUI: Conditions not met for workspace initialization. isBlocklyReady:", isBlocklyReady, "blocklyDivRef.current:", !!blocklyDivRef.current, "LocalBlockly:", !!LocalBlockly);
-      return;
-    }
-    if (!LocalBlockly.inject || !LocalBlockly.Xml || !LocalBlockly.Blocks || !LocalBlockly.Msg) {
-      setComponentError("ScratchUI: Essential Blockly library parts (inject, Xml, Blocks, Msg) are not available for injection.");
-      return;
-    }
-    if (Object.keys(LocalBlockly.Msg).length === 0 || !LocalBlockly.Msg.CATEGORY_MOTION) {
-      setComponentError("ScratchUI: Blockly.Msg is empty or essential messages (like CATEGORY_MOTION) are missing. Messages did not load correctly. Injection might fail.");
-      console.error("ScratchUI: Blockly.Msg is empty or missing common keys before injection. Current Msg keys count:", Object.keys(LocalBlockly.Msg).length, "CATEGORY_MOTION:", LocalBlockly.Msg.CATEGORY_MOTION);
-      return;
-    }
-    if (typeof LocalBlockly.Blocks?.motion_movesteps === "undefined" || typeof LocalBlockly.Blocks?.event_whenflagclicked === "undefined") {
-      const availableBlocks = Object.keys(LocalBlockly.Blocks || {}).join(", ");
-      setComponentError(`ScratchUI: Essential Scratch block definitions (e.g., motion_movesteps, event_whenflagclicked) are missing before injection. Available blocks: ${availableBlocks}`);
-      return;
-    }
-    setComponentError(null);
-    if (workspaceRef.current && typeof workspaceRef.current.dispose === "function") {
-      try {
-        workspaceRef.current.dispose();
-      } catch (e) {
-        console.warn("ScratchUI: Minor error disposing previous workspace instance:", e);
-      }
-      workspaceRef.current = null;
-    }
-    try {
-      console.log("ScratchUI: Attempting to inject Blockly workspace...");
-      const simplifiedToolbox = `
-        <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-simple-debug" style="display: none">
-          <category name="Events" colour="#FFD500" secondaryColour="#CCAA00">
-
-            <block type="event_whenflagclicked"></block>
-          </category>
-          <category name="Motion" colour="#4C97FF" secondaryColour="#3373CC">
-
-            <block type="motion_movesteps">
-              <value name="STEPS"><shadow type="math_number"><field name="NUM">10</field></shadow></value>
-            </block>
-            <block type="motion_turnright">
-              <value name="DEGREES"><shadow type="math_number"><field name="NUM">15</field></shadow></value>
-            </block>
-          </category>
-
-          <category name="Looks" colour="#9966FF" secondaryColour="#774DCB">
-             <block type="looks_sayforsecs">
-                <value name="MESSAGE"><shadow type="text"><field name="TEXT">Hello!</field></shadow></value>
-                <value name="SECS"><shadow type="math_number"><field name="NUM">2</field></shadow></value>
-             </block>
-          </category>
-        </xml>`;
-      const actualToolbox = question.toolboxDefinition || simplifiedToolbox;
-      console.log("ScratchUI: Using Toolbox Definition:", actualToolbox);
-      console.log("ScratchUI: Media path:", SCRATCH_MEDIA_PATH);
-      console.log("ScratchUI: Blockly.Msg.CATEGORY_MOTION at inject time:", LocalBlockly.Msg.CATEGORY_MOTION);
-      console.log("ScratchUI: Blockly.Colours available:", !!LocalBlockly.Colours);
-      const workspace = LocalBlockly.inject(blocklyDivRef.current, {
-        toolbox: actualToolbox,
-        // Use the simplified one for debugging first
-        media: SCRATCH_MEDIA_PATH,
-        scrollbars: true,
-        trashcan: !showCorrectAnswer,
-        readOnly: showCorrectAnswer,
-        renderer: "zelos",
-        zoom: { controls: true, wheel: true, startScale: 0.75, maxScale: 3, minScale: 0.3, scaleSpeed: 1.2 },
-        colours: LocalBlockly.Colours
-      });
-      workspaceRef.current = workspace;
-      console.log("ScratchUI: Workspace injected successfully.");
-      let xmlToLoad = null;
-      if (showCorrectAnswer && question.solutionWorkspaceXML) {
-        xmlToLoad = question.solutionWorkspaceXML;
-      } else if (typeof userAnswer === "string" && userAnswer.trim().startsWith("<xml")) {
-        xmlToLoad = userAnswer;
-      } else if (question.initialWorkspace) {
-        xmlToLoad = question.initialWorkspace;
-      }
-      if (xmlToLoad) {
-        try {
-          console.log("ScratchUI: Attempting to load XML to workspace:", xmlToLoad.substring(0, 100) + "...");
-          const dom = LocalBlockly.Xml.textToDom(xmlToLoad);
-          LocalBlockly.Xml.domToWorkspace(dom, workspace);
-          console.log("ScratchUI: XML loaded to workspace.");
-        } catch (xmlError) {
-          console.error("ScratchUI: Error loading XML to workspace:", xmlError);
-          setComponentError(`ScratchUI: Error loading blocks from XML: ${xmlError.message || String(xmlError)}`);
-        }
-      }
-      if (workspace && LocalBlockly.svgResize) {
-        LocalBlockly.svgResize(workspace);
-        setTimeout(() => {
-          if (workspaceRef.current && LocalBlockly.svgResize) LocalBlockly.svgResize(workspaceRef.current);
-        }, 100);
-      }
-    } catch (e) {
-      console.error("ScratchUI: Error during Blockly.inject or subsequent workspace setup:", e);
-      console.error("ScratchUI: Error Details - Name:", e.name, "Message:", e.message, "Stack:", e.stack);
-      setComponentError(`ScratchUI: Workspace initialization failed: ${e.message || String(e)}. Check console for details. Toolbox used: ${question.toolboxDefinition ? "Custom" : "Default Simplified"}.`);
-    }
-  }, [question, showCorrectAnswer, userAnswer, isBlocklyReady]);
-  useEffect(() => {
-    if (isBlocklyReady) {
-      initializeWorkspace();
-    }
-    const handleResize = () => {
-      const LocalBlocklyResize = window.Blockly;
-      if (workspaceRef.current && LocalBlocklyResize?.svgResize) {
-        LocalBlocklyResize.svgResize(workspaceRef.current);
-      }
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      if (workspaceRef.current && typeof workspaceRef.current.dispose === "function") {
-        if (window.Blockly) {
-          try {
-            workspaceRef.current.dispose();
-          } catch (e) {
-            console.warn("ScratchUI: Error disposing workspace on unmount:", e);
-          }
-        }
-        workspaceRef.current = null;
-      }
-    };
-  }, [isBlocklyReady, initializeWorkspace]);
-  const workspaceHeight = showCorrectAnswer ? "300px" : "450px";
-  if (isLoadingScripts) {
-    return /* @__PURE__ */ jsx("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))" }, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto mb-2" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Loading Scratch Assets..." })
-    ] }) });
-  }
-  if (componentError) {
-    return /* @__PURE__ */ jsxs("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))" }, children: [
-      /* @__PURE__ */ jsx("p", { className: "font-semibold text-lg mb-2", children: "Failed to load Scratch Workspace." }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3 text-center", children: componentError }),
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mb-4 text-center", children: [
-        "Please ensure all Scratch/Blockly JavaScript files are correctly copied to your",
-        /* @__PURE__ */ jsx("code", { children: "public/static/scratch-blocks/js" }),
-        " directory. Check browser console for more details.",
-        /* @__PURE__ */ jsx("br", {}),
-        /* @__PURE__ */ jsxs("strong", { children: [
-          "CRITICAL: Ensure you have copied the CSS files from ",
-          /* @__PURE__ */ jsx("code", { children: "node_modules/scratch-blocks/css/" }),
-          " (e.g., ",
-          /* @__PURE__ */ jsx("code", { children: "vertical.css" }),
-          ") to ",
-          /* @__PURE__ */ jsx("code", { children: "public/static/scratch-blocks/css/" }),
-          " and linked it in your main layout. Without CSS, blocks will not render correctly."
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Button, { onClick: attemptLoadScripts, variant: "outline", children: "Try Reloading Scripts" })
-    ] });
-  }
-  if (!isBlocklyReady && !isLoadingScripts) {
-    return /* @__PURE__ */ jsx("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))" }, children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Scratch environment did not initialize (Blockly not ready). Check console for script loading errors." }) });
-  }
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: question.prompt }),
-      question.points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        question.points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: blocklyDivRef,
-          style: {
-            height: workspaceHeight,
-            width: "100%",
-            borderRadius: "0.375rem",
-            backgroundColor: "hsl(var(--card))",
-            position: "relative",
-            userSelect: "none",
-            overflow: "hidden",
-            display: isLoadingScripts || componentError || !isBlocklyReady ? "none" : "block"
-          },
-          "aria-label": `Scratch programming workspace for question: ${question.prompt}`
-        }
-      ),
-      showCorrectAnswer && question.explanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-accent-foreground/80", children: question.explanation })
-      ] })
-    ] })
-  ] });
-});
-ScratchProgrammingQuestionUI.displayName = "ScratchProgrammingQuestionUI";
-var Tabs = TabsPrimitive.Root;
-var TabsList = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    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 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    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 = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    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 {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
-      };
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map(
-          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
-        )
-      };
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast2) => {
-          addToRemoveQueue(toast2.id);
-        });
-      }
-      return {
-        ...state,
-        toasts: state.toasts.map(
-          (t) => t.id === toastId || toastId === void 0 ? {
-            ...t,
-            open: false
-          } : t
-        )
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === void 0) {
-        return {
-          ...state,
-          toasts: []
-        };
-      }
-      return {
-        ...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({ ...props }) {
-  const id = genId();
-  const update = (props2) => dispatch({
-    type: "UPDATE_TOAST",
-    toast: { ...props2, id }
-  });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      }
-    }
-  });
-  return {
-    id,
-    dismiss,
-    update
-  };
-}
-function useToast() {
-  const [state, setState] = React9.useState(memoryState);
-  React9.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
-  };
-}
-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__ */ jsxs(Card, { className: "w-full border-none shadow-none", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: question.prompt }) }),
-      question.points && /* @__PURE__ */ jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
-        "Points: ",
-        question.points
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "p-0 space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "font-mono text-sm border rounded-md overflow-hidden", children: /* @__PURE__ */ jsx(
-        CodeMirror,
-        {
-          value: code,
-          height: "300px",
-          extensions: [langExtension],
-          onChange: handleCodeChange,
-          readOnly: showCorrectAnswer,
-          theme: "dark"
-        }
-      ) }),
-      !showCorrectAnswer && /* @__PURE__ */ jsxs(Button, { onClick: handleRunPublicTests, disabled: isRunningTests, children: [
-        isRunningTests ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "mr-2 h-4 w-4" }),
-        isRunningTests ? "Running..." : "Run Public Tests"
-      ] }),
-      /* @__PURE__ */ jsxs(Tabs, { defaultValue: "tests", className: "w-full", children: [
-        /* @__PURE__ */ jsxs(TabsList, { children: [
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "tests", children: "Test Cases" }),
-          showCorrectAnswer && /* @__PURE__ */ jsx(TabsTrigger, { value: "solution", children: "Solution" })
-        ] }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "tests", children: /* @__PURE__ */ jsx("div", { className: "space-y-2 p-2 border rounded-md min-h-[100px]", children: testResults.length > 0 ? testResults.map((result, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
-          result.passed ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-destructive mr-2" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Test Case #",
-            index + 1,
-            ": ",
-            result.passed ? "Passed" : "Failed"
-          ] }),
-          !result.passed && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground ml-2", children: [
-            "- ",
-            result.reasoning
-          ] })
-        ] }, result.testCaseId)) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: showCorrectAnswer ? "Final results are shown in the quiz summary." : "Click 'Run Public Tests' to see results." }) }) }),
-        showCorrectAnswer && /* @__PURE__ */ jsx(TabsContent, { value: "solution", children: /* @__PURE__ */ jsx("div", { className: "font-mono text-sm border rounded-md overflow-hidden", children: /* @__PURE__ */ jsx(
-          CodeMirror,
-          {
-            value: question.solutionCode,
-            height: "300px",
-            extensions: [langExtension],
-            readOnly: true,
-            theme: "dark"
-          }
-        ) }) })
-      ] }),
-      showCorrectAnswer && question.explanation && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
-        /* @__PURE__ */ jsx(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" })
-      ] })
-    ] })
-  ] });
-};
-var QuestionRenderer = React9__default.forwardRef(({
-  question,
-  onAnswerChange,
-  userAnswer,
-  showCorrectAnswer = false
-}, ref) => {
-  const { t } = useTranslation();
-  const commonProps = {
-    question,
-    onAnswerChange,
-    userAnswer,
-    showCorrectAnswer
-  };
-  switch (question.questionType) {
-    case "multiple_choice":
-      return /* @__PURE__ */ jsx(MultipleChoiceQuestionUI, { ...commonProps, question });
-    case "true_false":
-      return /* @__PURE__ */ jsx(TrueFalseQuestionUI, { ...commonProps, question });
-    case "multiple_response":
-      return /* @__PURE__ */ jsx(MultipleResponseQuestionUI, { ...commonProps, question });
-    case "short_answer":
-      return /* @__PURE__ */ jsx(ShortAnswerQuestionUI, { ...commonProps, question });
-    case "numeric":
-      return /* @__PURE__ */ jsx(NumericQuestionUI, { ...commonProps, question });
-    case "fill_in_the_blanks":
-      return /* @__PURE__ */ jsx(FillInTheBlanksQuestionUI, { ...commonProps, question });
-    case "sequence":
-      return /* @__PURE__ */ jsx(SequenceQuestionUI, { ...commonProps, question });
-    case "matching":
-      return /* @__PURE__ */ jsx(MatchingQuestionUI, { ...commonProps, question });
-    case "drag_and_drop":
-      return /* @__PURE__ */ jsx(DragAndDropQuestionUI, { ...commonProps, question });
-    case "hotspot":
-      return /* @__PURE__ */ jsx(HotspotQuestionUI, { ...commonProps, question });
-    case "blockly_programming":
-      return /* @__PURE__ */ jsx(BlocklyProgrammingQuestionUI, { ...commonProps, question, ref });
-    case "scratch_programming":
-      return /* @__PURE__ */ jsx(ScratchProgrammingQuestionUI, { ...commonProps, question, ref });
-    case "coding":
-      return /* @__PURE__ */ jsx(CodingQuestionUI, { ...commonProps, question });
-    default:
-      return /* @__PURE__ */ jsxs("div", { className: "p-4 border border-destructive bg-destructive/10 rounded-md", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-semibold text-destructive", children: t("unsupportedQuestionType") }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("unsupportedQuestionTypeDescription") }),
-        /* @__PURE__ */ jsx("pre", { className: "mt-2 p-2 bg-muted rounded text-xs font-code overflow-x-auto", children: JSON.stringify(question, null, 2) })
-      ] });
-  }
-});
-QuestionRenderer.displayName = "QuestionRenderer";
-var Progress = React9.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
-  ProgressPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      ProgressPrimitive.Indicator,
-      {
-        className: "h-full w-full flex-1 bg-primary transition-all",
-        style: { transform: `translateX(-${100 - (value || 0)}%)` }
-      }
-    )
-  }
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Item,
-  {
-    ref,
-    className: cn("border-b", className),
-    ...props
-  }
-));
-AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
-  AccordionPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
-    ]
-  }
-) }));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Content,
-  {
-    ref,
-    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-    ...props,
-    children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
-  }
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-var ScrollArea = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ScrollAreaPrimitive.Root,
-  {
-    ref,
-    className: cn("relative overflow-hidden", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ jsx(ScrollBar, {}),
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-    ]
-  }
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React9.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-var QuizResult = ({
-  result,
-  quizTitle,
-  onExitQuiz,
-  onGenerateReview,
-  showReviewButton = false,
-  isReviewLoading = false
-}) => {
-  const { t } = useTranslation();
-  const getAnswerDisplay = (answer) => {
-    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") {
-      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__ */ jsxs(Card, { className: "w-full max-w-3xl mx-auto shadow-xl", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-3xl font-headline text-center", children: t("practiceFlow.results.title", { quizTitle }) }),
-      /* @__PURE__ */ jsx(CardDescription, { className: "text-center text-lg", children: t("practiceFlow.results.description") })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxs(Card, { className: "bg-secondary/50", children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-xl flex items-center", children: [
-          /* @__PURE__ */ jsx(BarChart2, { className: "mr-2 h-5 w-5 text-primary" }),
-          t("practiceFlow.results.overallScore")
-        ] }) }),
-        /* @__PURE__ */ jsxs(CardContent, { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-3xl font-bold text-primary", children: [
-              result.score,
-              " / ",
-              result.maxScore
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("practiceFlow.results.points") })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-3xl font-bold text-primary", children: [
-              result.percentage.toFixed(2),
-              "%"
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("practiceFlow.results.percentage") })
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: result.passed !== void 0 && (result.passed ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-green-600", children: [
-            /* @__PURE__ */ jsx(CheckCircle, { className: "h-10 w-10" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold mt-1", children: t("practiceFlow.results.passed") })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-destructive", children: [
-            /* @__PURE__ */ jsx(XCircle, { className: "h-10 w-10" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold mt-1", children: t("practiceFlow.results.failed") })
-          ] })) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md", children: [
-          /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5 text-primary" }),
-          /* @__PURE__ */ jsx("span", { children: t("practiceFlow.results.timeSpent") }),
-          /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
-            result.totalTimeSpentSeconds?.toFixed(0) ?? "N/A",
-            " ",
-            t("practiceFlow.results.timeUnit")
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md", children: [
-          /* @__PURE__ */ jsx(Percent, { className: "h-5 w-5 text-primary" }),
-          /* @__PURE__ */ jsx("span", { children: t("practiceFlow.results.avgTimePerQuestion") }),
-          /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
-            result.averageTimePerQuestionSeconds?.toFixed(1) ?? "N/A",
-            " ",
-            t("practiceFlow.results.timeUnit")
-          ] })
-        ] })
-      ] }),
-      result.scormStatus && result.scormStatus !== "idle" && result.scormStatus !== "no_api" && /* @__PURE__ */ jsxs(Card, { children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "SCORM Sync Status" }) }),
-        /* @__PURE__ */ jsxs(CardContent, { children: [
-          /* @__PURE__ */ jsxs("p", { className: `flex items-center ${result.scormStatus === "error" ? "text-destructive" : "text-muted-foreground"}`, children: [
-            result.scormStatus === "error" && /* @__PURE__ */ jsx(AlertTriangle, { className: "mr-2 h-4 w-4" }),
-            "Status: ",
-            /* @__PURE__ */ jsx("span", { className: "font-semibold ml-1", children: result.scormStatus })
-          ] }),
-          result.scormError && /* @__PURE__ */ jsxs("p", { className: "text-xs text-destructive mt-1", children: [
-            "Details: ",
-            result.scormError
-          ] })
-        ] })
-      ] }),
-      result.webhookStatus && result.webhookStatus !== "idle" && /* @__PURE__ */ jsxs(Card, { children: [
-        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Webhook Sync Status" }) }),
-        /* @__PURE__ */ jsxs(CardContent, { children: [
-          /* @__PURE__ */ jsxs("p", { className: `flex items-center ${result.webhookStatus === "error" ? "text-destructive" : "text-muted-foreground"}`, children: [
-            result.webhookStatus === "error" && /* @__PURE__ */ jsx(AlertTriangle, { className: "mr-2 h-4 w-4" }),
-            "Status: ",
-            /* @__PURE__ */ jsx("span", { className: "font-semibold ml-1", children: result.webhookStatus })
-          ] }),
-          result.webhookError && /* @__PURE__ */ jsxs("p", { className: "text-xs text-destructive mt-1", children: [
-            "Details: ",
-            result.webhookError
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "question-breakdown", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-lg font-semibold", children: t("practiceFlow.results.questionBreakdown") }),
-        /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[300px] pr-4", children: /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: result.questionResults.map((qResult, index) => /* @__PURE__ */ jsxs("li", { className: "p-4 border rounded-md bg-background", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-2", children: [
-            /* @__PURE__ */ jsx("h4", { className: "font-semibold", children: t("common.questions", { count: index + 1 }) }),
-            qResult.isCorrect ? /* @__PURE__ */ jsxs("span", { className: "text-green-600 font-medium flex items-center", children: [
-              /* @__PURE__ */ jsx(CheckCircle, { className: "mr-1 h-4 w-4" }),
-              " ",
-              t("practiceFlow.results.passed")
-            ] }) : /* @__PURE__ */ jsxs("span", { className: "text-destructive font-medium flex items-center", children: [
-              /* @__PURE__ */ jsx(XCircle, { className: "mr-1 h-4 w-4" }),
-              " ",
-              t("practiceFlow.results.failed")
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: t("practiceFlow.results.yourAnswer") }),
-            " ",
-            getAnswerDisplay(qResult.userAnswer)
-          ] }),
-          !qResult.isCorrect && /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: t("practiceFlow.results.correctAnswer") }),
-            " ",
-            getAnswerDisplay(qResult.correctAnswer)
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: t("practiceFlow.results.pointsEarned") }),
-            " ",
-            qResult.pointsEarned
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: t("practiceFlow.results.timeSpent") }),
-            " ",
-            qResult.timeSpentSeconds?.toFixed(0) ?? "N/A",
-            t("practiceFlow.results.timeUnit")
-          ] })
-        ] }, qResult.questionId)) }) }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs(CardFooter, { className: "flex flex-col sm:flex-row justify-between gap-2", children: [
-      onExitQuiz && /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onExitQuiz, className: "w-full sm:w-auto", children: [
-        /* @__PURE__ */ jsx(LogOut, { className: "mr-2 h-4 w-4" }),
-        t("common.exit")
-      ] }),
-      showReviewButton && onGenerateReview && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          onClick: onGenerateReview,
-          disabled: isReviewLoading,
-          className: "w-full sm:w-auto",
-          children: [
-            isReviewLoading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Wand2, { className: "mr-2 h-4 w-4" }),
-            isReviewLoading ? t("practiceFlow.results.generatingReview") : t("practiceFlow.results.generateReview")
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
-  const [engine, setEngine] = useState(null);
-  const [currentQuestion, setCurrentQuestion] = useState(null);
-  const [currentQuestionNumber, setCurrentQuestionNumber] = useState(0);
-  const [totalQuestions, setTotalQuestions] = useState(0);
-  const [userAnswer, setUserAnswer] = useState(null);
-  const [quizFinished, setQuizFinished] = useState(false);
-  const [finalResult, setFinalResult] = useState(null);
-  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) => {
-      setCurrentQuestion(question);
-      setCurrentQuestionNumber(qNum);
-      setTotalQuestions(total);
-      const existingAnswer = engineRef.current?.getUserAnswer(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?.questionType !== "blockly_programming" && currentQuestion?.questionType !== "scratch_programming") {
-      setUserAnswer(answer);
-    }
-  }, [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 {
-      localQuizEngine = new QuizEngine({ config: quizConfig, callbacks });
-      engineRef.current = localQuizEngine;
-      setEngine(localQuizEngine);
-      const initialQ = localQuizEngine.getCurrentQuestion();
-      setCurrentQuestion(initialQ);
-      setCurrentQuestionNumber(localQuizEngine.getCurrentQuestionNumber());
-      setTotalQuestions(localQuizEngine.getTotalQuestions());
-      setTimeLeft(localQuizEngine.getTimeLeftInSeconds());
-      if (initialQ) {
-        const existingAnswer = localQuizEngine.getUserAnswer(initialQ.id);
-        setUserAnswer(existingAnswer !== void 0 ? existingAnswer : null);
-      }
-      setIsLoading(false);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to load quiz.");
-      setIsLoading(false);
-      isInitializedRef.current = false;
-    }
-    return () => {
-      if (localQuizEngine) localQuizEngine.destroy();
-      if (engineRef.current) engineRef.current = null;
-      isInitializedRef.current = false;
-    };
-  }, [quizConfigKey, callbacks, quizConfig]);
-  const handleSubmitAnswer = useCallback(() => {
-    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 {
-        answerToSubmit = currentEngine.getUserAnswer(currentQuestion.id) ?? null;
-      }
-    } else {
-      answerToSubmit = userAnswer;
-    }
-    if (answerToSubmit !== void 0) {
-      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__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-64", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "h-12 w-12 animate-spin text-primary" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-4 text-muted-foreground", children: t("common.loading") })
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-2xl mx-auto shadow-xl", children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-destructive flex items-center", children: [
-        /* @__PURE__ */ jsx(AlertCircle, { className: "mr-2 h-6 w-6" }),
-        "Quiz Error"
-      ] }) }),
-      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", { children: error }) }),
-      /* @__PURE__ */ jsx(CardFooter, { children: onExitQuiz && /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onExitQuiz, children: [
-        /* @__PURE__ */ jsx(LogOut, { className: "mr-2 h-4 w-4" }),
-        " ",
-        t("common.exit")
-      ] }) })
-    ] });
-  }
-  if (quizFinished && finalResult) {
-    return /* @__PURE__ */ jsx(QuizResult, { result: finalResult, onExitQuiz, quizTitle: quizConfig.title });
-  }
-  if (!currentQuestion) {
-    return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-2xl mx-auto shadow-xl", children: [
-      /* @__PURE__ */ jsxs(CardHeader, { children: [
-        /* @__PURE__ */ jsx(CardTitle, { children: "Quiz Ended" }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "No more questions, or quiz not loaded correctly." })
-      ] }),
-      /* @__PURE__ */ jsx(CardFooter, { children: onExitQuiz && /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onExitQuiz, children: [
-        /* @__PURE__ */ jsx(LogOut, { className: "mr-2 h-4 w-4" }),
-        " ",
-        t("common.exit")
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-3xl mx-auto shadow-xl", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
-        /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl font-headline", children: quizConfig.title }),
-        timeLeft !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(Clock, { className: "mr-1 h-4 w-4" }),
-          t("practiceFlow.player.timeLeft", { time: formatTime(timeLeft) })
-        ] })
-      ] }),
-      quizConfig.description && /* @__PURE__ */ jsx(CardDescription, { children: quizConfig.description }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-        /* @__PURE__ */ jsx(
-          Progress,
-          {
-            value: progressPercent,
-            "aria-label": `Quiz progress: ${currentQuestionNumber} of ${totalQuestions} questions`,
-            className: "w-full"
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1 text-right", children: t("practiceFlow.player.questionProgress", { current: currentQuestionNumber, total: totalQuestions }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { className: "min-h-[200px]", children: /* @__PURE__ */ jsx(
-      QuestionRenderer,
-      {
-        question: currentQuestion,
-        onAnswerChange: handleAnswerChange,
-        userAnswer,
-        showCorrectAnswer: quizConfig.settings?.showCorrectAnswers === "immediately",
-        ref: currentQuestion.questionType === "blockly_programming" || currentQuestion.questionType === "scratch_programming" ? programmingQuestionRef : null
-      },
-      currentQuestion.id
-    ) }),
-    /* @__PURE__ */ jsxs(CardFooter, { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          onClick: handlePrevious,
-          disabled: currentQuestionNumber <= 1,
-          children: [
-            /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
-            " ",
-            t("common.previous")
-          ]
-        }
-      ),
-      onExitQuiz && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          onClick: onExitQuiz,
-          className: "text-muted-foreground hover:text-destructive",
-          children: t("common.exit")
-        }
-      ),
-      /* @__PURE__ */ jsxs(Button, { onClick: handleNext, children: [
-        currentQuestionNumber === totalQuestions ? t("practiceFlow.player.finishQuiz") : t("common.next"),
-        currentQuestionNumber !== totalQuestions && /* @__PURE__ */ jsx(ChevronRight, { className: "ml-2 h-4 w-4" }),
-        currentQuestionNumber === totalQuestions && /* @__PURE__ */ jsx(CheckCircle, { className: "ml-2 h-4 w-4" })
-      ] })
-    ] })
-  ] });
-};
-
-// src/player.ts
-function mountQuizPlayer(targetElementId, quizConfig) {
-  const targetElement = document.getElementById(targetElementId);
-  if (!targetElement) {
-    console.error(`Quiz Player Mount Error: Element with ID "${targetElementId}" not found.`);
-    document.body.innerHTML = `<p style="color: red; text-align: center; padding: 20px;">Critical Error: Target render element #${targetElementId} not found.</p>`;
-    return;
-  }
-  const AppContainer = () => {
-    const [quizResult, setQuizResult] = useState(null);
-    const handleQuizComplete = (result) => {
-      console.log("Quiz Complete (captured inside React AppContainer):", result);
-      setQuizResult(result);
-    };
-    const handleExit = () => {
-      console.log("Quiz Exited");
-      const rootEl = document.getElementById(targetElementId);
-      if (rootEl) {
-        const root2 = rootEl._reactRootContainer;
-        if (root2) {
-          root2.unmount();
-        }
-        rootEl.innerHTML = '<p style="text-align: center; padding: 20px; color: #4b5563;">Quiz exited. You may now close this window.</p>';
-      }
-    };
-    if (quizResult) {
-      return React9__default.createElement(QuizResult, {
-        result: quizResult,
-        quizTitle: quizConfig.title,
-        onExitQuiz: handleExit
-      });
-    }
-    return React9__default.createElement(QuizPlayer, {
-      quizConfig,
-      onQuizComplete: handleQuizComplete,
-      onExitQuiz: handleExit
-    });
-  };
-  const root = ReactDOM.createRoot(targetElement);
-  root.render(React9__default.createElement(React9__default.StrictMode, null, React9__default.createElement(AppContainer)));
-}
-
-export { mountQuizPlayer };