@thanh01.pmt/interactive-quiz-kit 1.0.12 → 1.0.13

package/dist/player.js

@@ -0,0 +1,2906 @@
+import * as React25 from 'react';
+import React25__default, { useRef, useState, useImperativeHandle, useCallback, useEffect, forwardRef, useMemo } from 'react';
+import ReactDOM from 'react-dom/client';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle, Check, ChevronDown, ChevronUp, CheckCircle, XCircle, RotateCcw, BarChart2, Clock, Percent, AlertTriangle, LogOut, Loader2, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+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 * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// 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 = __spreadValues({
+      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) {
+    var _a;
+    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 (_a = value == null ? void 0 : value.toString()) != null ? _a : 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() {
+    var _a, _b;
+    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: (_a = errorMessage == null ? void 0 : errorMessage.toString()) != null ? _a : "Unknown error.",
+      diagnostic: (_b = diagnostic == null ? void 0 : diagnostic.toString()) != null ? _b : 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/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();
+    var _a, _b, _c, _d, _e;
+    this.config = options.config;
+    this.callbacks = options.callbacks || {};
+    this.questions = ((_a = this.config.settings) == null ? void 0 : _a.shuffleQuestions) ? [...this.config.questions].sort(() => Math.random() - 0.5) : this.config.questions;
+    this.overallStartTime = Date.now();
+    if (((_b = this.config.settings) == null ? void 0 : _b.timeLimitMinutes) && this.config.settings.timeLimitMinutes > 0) {
+      this.timeLeftInSeconds = this.config.settings.timeLimitMinutes * 60;
+    }
+    if ((_c = this.config.settings) == null ? void 0 : _c.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();
+    }
+    (_e = (_d = this.callbacks).onQuestionChange) == null ? void 0 : _e.call(_d, initialQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
+  }
+  _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() {
+    var _a, _b, _c, _d;
+    if (this.timeLeftInSeconds === null) return;
+    if (this.timeLeftInSeconds > 0) {
+      this.timeLeftInSeconds--;
+      (_b = (_a = this.callbacks).onTimeTick) == null ? void 0 : _b.call(_a, this.timeLeftInSeconds);
+    }
+    if (this.timeLeftInSeconds <= 0) {
+      this.stopTimer();
+      (_d = (_c = this.callbacks).onQuizTimeUp) == null ? void 0 : _d.call(_c);
+      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) {
+    var _a, _b;
+    this.userAnswers.set(questionId, answer);
+    const question = this.questions.find((q) => q.id === questionId);
+    if (question) (_b = (_a = this.callbacks).onAnswerSubmit) == null ? void 0 : _b.call(_a, question, answer);
+  }
+  nextQuestion() {
+    var _a, _b;
+    this._recordCurrentQuestionTime();
+    if (this.currentQuestionIndex < this.questions.length - 1) {
+      this.currentQuestionIndex++;
+      const currentQ = this.getCurrentQuestion();
+      this.questionStartTime = Date.now();
+      (_b = (_a = this.callbacks).onQuestionChange) == null ? void 0 : _b.call(_a, currentQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
+      return currentQ;
+    }
+    return null;
+  }
+  previousQuestion() {
+    var _a, _b;
+    this._recordCurrentQuestionTime();
+    if (this.currentQuestionIndex > 0) {
+      this.currentQuestionIndex--;
+      const currentQ = this.getCurrentQuestion();
+      this.questionStartTime = Date.now();
+      (_b = (_a = this.callbacks).onQuestionChange) == null ? void 0 : _b.call(_a, currentQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
+      return currentQ;
+    }
+    return null;
+  }
+  goToQuestion(index) {
+    var _a, _b;
+    if (index >= 0 && index < this.questions.length && index !== this.currentQuestionIndex) {
+      this._recordCurrentQuestionTime();
+      this.currentQuestionIndex = index;
+      const currentQ = this.getCurrentQuestion();
+      this.questionStartTime = Date.now();
+      (_b = (_a = this.callbacks).onQuestionChange) == null ? void 0 : _b.call(_a, currentQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
+      return currentQ;
+    }
+    return this.getCurrentQuestion();
+  }
+  evaluateQuestion(question, answer) {
+    var _a, _b, _c;
+    let isCorrect = false;
+    let correctAnswerDetail = null;
+    const points = (_a = question.points) != null ? _a : 0;
+    const findOptionText = (q, id) => {
+      var _a2;
+      return ((_a2 = q.options.find((opt) => opt.id === id)) == null ? void 0 : _a2.text) || "";
+    };
+    switch (question.questionType) {
+      case "multiple_choice": {
+        const q = question;
+        const correctAnswerId = q.correctAnswerId;
+        const correctValue = findOptionText(q, correctAnswerId);
+        correctAnswerDetail = { id: correctAnswerId, value: correctValue };
+        isCorrect = answer === correctAnswerId;
+        break;
+      }
+      case "multiple_response": {
+        const q = question;
+        const correctAnswerIds = q.correctAnswerIds;
+        const correctValues = correctAnswerIds.map((id) => findOptionText(q, id));
+        correctAnswerDetail = { id: correctAnswerIds, value: correctValues };
+        if (Array.isArray(answer)) {
+          const userAnswerSet = new Set(answer);
+          const correctAnswerSet = new Set(correctAnswerIds);
+          isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
+        }
+        break;
+      }
+      case "true_false": {
+        const q = question;
+        correctAnswerDetail = { id: null, value: q.correctAnswer };
+        let tfAnswer = answer;
+        if (typeof answer === "string") tfAnswer = answer.toLowerCase() === "true";
+        isCorrect = typeof tfAnswer === "boolean" && tfAnswer === q.correctAnswer;
+        break;
+      }
+      case "short_answer": {
+        const q = question;
+        correctAnswerDetail = { id: null, value: q.acceptedAnswers };
+        if (typeof answer === "string") {
+          const userAnswerTrimmed = answer.trim();
+          const caseSensitive = (_b = q.isCaseSensitive) != null ? _b : false;
+          isCorrect = q.acceptedAnswers.some((accAns) => caseSensitive ? accAns.trim() === userAnswerTrimmed : accAns.trim().toLowerCase() === userAnswerTrimmed.toLowerCase());
+        }
+        break;
+      }
+      case "numeric": {
+        const q = question;
+        correctAnswerDetail = { id: null, value: q.answer };
+        if (typeof answer === "string" || typeof answer === "number") {
+          const userAnswerNum = parseFloat(String(answer));
+          if (!isNaN(userAnswerNum)) {
+            isCorrect = q.tolerance != null ? Math.abs(userAnswerNum - q.answer) <= q.tolerance : userAnswerNum === q.answer;
+          }
+        }
+        break;
+      }
+      case "sequence": {
+        const q = question;
+        const correctValues = q.correctOrder.map((id) => {
+          var _a2;
+          return ((_a2 = q.items.find((item) => item.id === id)) == null ? void 0 : _a2.content) || "";
+        });
+        correctAnswerDetail = { id: q.correctOrder, value: correctValues };
+        if (Array.isArray(answer) && answer.length === q.correctOrder.length) {
+          isCorrect = answer.every((itemId, index) => itemId === q.correctOrder[index]);
+        }
+        break;
+      }
+      case "matching": {
+        const q = question;
+        const correctMap = q.correctAnswerMap.reduce((acc, curr) => {
+          var _a2, _b2;
+          const promptText = ((_a2 = q.prompts.find((p) => p.id === curr.promptId)) == null ? void 0 : _a2.content) || "";
+          const optionText = ((_b2 = q.options.find((o) => o.id === curr.optionId)) == null ? void 0 : _b2.content) || "";
+          acc[promptText] = optionText;
+          return acc;
+        }, {});
+        correctAnswerDetail = { id: null, value: correctMap };
+        if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
+          const userAnswerMap = answer;
+          isCorrect = q.correctAnswerMap.length === Object.keys(userAnswerMap).length && q.correctAnswerMap.every((map) => userAnswerMap[map.promptId] === map.optionId);
+        }
+        break;
+      }
+      case "fill_in_the_blanks": {
+        const q = question;
+        const correctMap = q.answers.reduce((acc, curr) => {
+          acc[curr.blankId] = curr.acceptedValues.join(" | ");
+          return acc;
+        }, {});
+        correctAnswerDetail = { id: null, value: correctMap };
+        if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
+          const userAnswerMap = answer;
+          isCorrect = q.answers.every((correctAnsDef) => {
+            var _a2, _b2;
+            const userValForBlank = (_a2 = userAnswerMap[correctAnsDef.blankId]) == null ? void 0 : _a2.trim();
+            if (userValForBlank === void 0) return false;
+            const caseSensitive = (_b2 = q.isCaseSensitive) != null ? _b2 : false;
+            return correctAnsDef.acceptedValues.some((accVal) => caseSensitive ? accVal.trim() === userValForBlank : accVal.trim().toLowerCase() === userValForBlank.toLowerCase());
+          });
+        }
+        break;
+      }
+      case "drag_and_drop": {
+        const q = question;
+        const correctMap = q.answerMap.reduce((acc, curr) => {
+          var _a2, _b2;
+          const draggableText = ((_a2 = q.draggableItems.find((d) => d.id === curr.draggableId)) == null ? void 0 : _a2.content) || "";
+          const dropZoneText = ((_b2 = q.dropZones.find((z) => z.id === curr.dropZoneId)) == null ? void 0 : _b2.label) || "";
+          acc[draggableText] = dropZoneText;
+          return acc;
+        }, {});
+        correctAnswerDetail = { id: null, value: correctMap };
+        if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
+          const userAnswerMap = answer;
+          isCorrect = q.answerMap.length === Object.keys(userAnswerMap).length && q.answerMap.every((map) => userAnswerMap[map.draggableId] === map.dropZoneId);
+        }
+        break;
+      }
+      case "hotspot": {
+        const q = question;
+        const correctValues = q.correctHotspotIds.map((id) => {
+          var _a2;
+          return ((_a2 = q.hotspots.find((h) => h.id === id)) == null ? void 0 : _a2.description) || id;
+        });
+        correctAnswerDetail = { id: q.correctHotspotIds, value: correctValues };
+        if (Array.isArray(answer)) {
+          const userAnswerSet = new Set(answer);
+          const correctAnswerSet = new Set(q.correctHotspotIds);
+          isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
+        }
+        break;
+      }
+      case "blockly_programming":
+      case "scratch_programming": {
+        const q = question;
+        correctAnswerDetail = { id: null, value: q.solutionGeneratedCode || "" };
+        if (typeof answer === "string" && typeof q.solutionGeneratedCode === "string") {
+          if (typeof window !== "undefined" && ((_c = window.Blockly) == null ? void 0 : _c.JavaScript)) {
+            const LocalBlockly = window.Blockly;
+            let generatedUserCode = "";
+            try {
+              const tempWorkspace = new LocalBlockly.Workspace();
+              const dom = LocalBlockly.Xml.textToDom(answer);
+              LocalBlockly.Xml.domToWorkspace(dom, tempWorkspace);
+              generatedUserCode = LocalBlockly.JavaScript.workspaceToCode(tempWorkspace) || "";
+              const normalize = (code) => code.replace(/\s+/g, " ").trim();
+              isCorrect = normalize(generatedUserCode) === normalize(q.solutionGeneratedCode);
+              tempWorkspace.dispose();
+            } catch (e) {
+              console.error(`Error generating code from user's ${q.questionType} XML for evaluation:`, e);
+              isCorrect = false;
+            }
+          } else {
+            console.warn(`Blockly library not available in QuizEngine for ${q.questionType} code generation during evaluation. Skipping code comparison.`);
+            isCorrect = false;
+          }
+        }
+        break;
+      }
+      default: {
+        const _exhaustiveCheck = question;
+        console.warn("Unsupported question type in QuizEngine evaluation:", _exhaustiveCheck);
+        isCorrect = false;
+        correctAnswerDetail = { id: null, value: "Evaluation not implemented." };
+      }
+    }
+    return { isCorrect, correctAnswer: correctAnswerDetail, pointsEarned: isCorrect ? points : 0 };
+  }
+  async calculateResults() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    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 += (_a = question.points) != null ? _a : 0;
+      const { isCorrect, correctAnswer: correctAnswerDetail, pointsEarned } = this.evaluateQuestion(question, userAnswerRaw);
+      totalScore += pointsEarned;
+      const timeSpentOnThisQuestion = parseFloat((this.questionTimings.get(question.id) || 0).toFixed(2));
+      accumulatedTotalTimeSpent += timeSpentOnThisQuestion;
+      let userAnswerDetail = null;
+      let allOptions = void 0;
+      if (userAnswerRaw !== null) {
+        switch (question.questionType) {
+          case "multiple_choice": {
+            const q = question;
+            allOptions = q.options.map((opt) => ({ id: opt.id, value: opt.text }));
+            const id = userAnswerRaw;
+            userAnswerDetail = { id, value: ((_b = allOptions.find((opt) => opt.id === id)) == null ? void 0 : _b.value) || "" };
+            break;
+          }
+          case "multiple_response": {
+            const q = question;
+            allOptions = q.options.map((opt) => ({ id: opt.id, value: opt.text }));
+            const ids = userAnswerRaw;
+            const values = ids.map((id) => {
+              var _a2;
+              return ((_a2 = allOptions == null ? void 0 : allOptions.find((opt) => opt.id === id)) == null ? void 0 : _a2.value) || "";
+            });
+            userAnswerDetail = { id: ids, value: values };
+            break;
+          }
+          case "true_false":
+          case "short_answer":
+          case "numeric":
+            userAnswerDetail = { id: null, value: userAnswerRaw };
+            break;
+          case "sequence": {
+            const q = question;
+            allOptions = q.items.map((item) => ({ id: item.id, value: item.content }));
+            const ids = userAnswerRaw;
+            const values = ids.map((id) => {
+              var _a2;
+              return ((_a2 = allOptions == null ? void 0 : allOptions.find((opt) => opt.id === id)) == null ? void 0 : _a2.value) || "";
+            });
+            userAnswerDetail = { id: ids, value: values };
+            break;
+          }
+          case "matching": {
+            const q = question;
+            const userAnswerMap = userAnswerRaw;
+            const valueMap = {};
+            for (const promptId in userAnswerMap) {
+              const optionId = userAnswerMap[promptId];
+              const promptText = ((_c = q.prompts.find((p) => p.id === promptId)) == null ? void 0 : _c.content) || "";
+              const optionText = ((_d = q.options.find((o) => o.id === optionId)) == null ? void 0 : _d.content) || "";
+              valueMap[promptText] = optionText;
+            }
+            userAnswerDetail = { id: null, value: valueMap };
+            break;
+          }
+          // --- LOGIC MỚI ĐƯỢC THÊM VÀO ---
+          case "fill_in_the_blanks": {
+            if (typeof userAnswerRaw === "object" && userAnswerRaw !== null && !Array.isArray(userAnswerRaw)) {
+              userAnswerDetail = { id: null, value: userAnswerRaw };
+            }
+            break;
+          }
+          case "drag_and_drop": {
+            const q = question;
+            if (typeof userAnswerRaw === "object" && userAnswerRaw !== null && !Array.isArray(userAnswerRaw)) {
+              const userAnswerMapByIds = userAnswerRaw;
+              const enrichedUserAnswerMap = {};
+              for (const draggableId in userAnswerMapByIds) {
+                const dropZoneId = userAnswerMapByIds[draggableId];
+                const draggableText = ((_e = q.draggableItems.find((d) => d.id === draggableId)) == null ? void 0 : _e.content) || `(ID: ${draggableId})`;
+                const dropZoneText = ((_f = q.dropZones.find((z) => z.id === dropZoneId)) == null ? void 0 : _f.label) || `(ID: ${dropZoneId})`;
+                enrichedUserAnswerMap[draggableText] = dropZoneText;
+              }
+              userAnswerDetail = { id: null, value: enrichedUserAnswerMap };
+            }
+            break;
+          }
+          // ------------------------------------
+          // Các loại câu hỏi còn lại vẫn giữ fallback
+          case "hotspot":
+          case "blockly_programming":
+          case "scratch_programming":
+            userAnswerDetail = { id: null, value: userAnswerRaw };
+            break;
+        }
+      }
+      questionResultsArray.push({
+        questionId: question.id,
+        questionType: question.questionType,
+        prompt: question.prompt,
+        isCorrect,
+        pointsEarned,
+        userAnswer: userAnswerDetail,
+        correctAnswer: correctAnswerDetail,
+        allOptions,
+        timeSpentSeconds: timeSpentOnThisQuestion
+      });
+    }
+    const percentage = maxScore > 0 ? parseFloat((totalScore / maxScore * 100).toFixed(2)) : 0;
+    let passed = void 0;
+    if (((_g = this.config.settings) == null ? void 0 : _g.passingScorePercent) != null) {
+      passed = percentage >= this.config.settings.passingScorePercent;
+    }
+    const totalQuizTimeSpentSeconds = parseFloat(accumulatedTotalTimeSpent.toFixed(2));
+    const averageTimePerQuestionSeconds = this.questions.length > 0 ? parseFloat((totalQuizTimeSpentSeconds / this.questions.length).toFixed(2)) : 0;
+    const metadataPerformance = this._calculateMetadataPerformance();
+    const finalResults = __spreadValues({
+      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 = __spreadValues(__spreadValues({}, this.quizResultState), finalResults);
+    if ((_h = this.config.settings) == null ? void 0 : _h.scorm) this._sendResultsToSCORM(finalResults);
+    await this._sendResultsToWebhook(finalResults);
+    (_j = (_i = this.callbacks).onQuizFinish) == null ? void 0 : _j.call(_i, finalResults);
+    return finalResults;
+  }
+  async _sendResultsToWebhook(results) {
+    var _a;
+    if (!((_a = this.config.settings) == null ? void 0 : _a.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) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (!this.scormService || !this.scormService.hasAPI() || this.quizResultState.scormStatus === "no_api") {
+      results.scormStatus = this.quizResultState.scormStatus || "idle";
+      return;
+    }
+    if (this.quizResultState.scormStatus === "error" && ((_a = this.quizResultState.scormError) == null ? void 0 : _a.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 (((_b = this.config.settings) == null ? void 0 : _b.passingScorePercent) !== void 0 && ((_c = this.config.settings) == null ? void 0 : _c.passingScorePercent) !== null) {
+        lessonStatusSetting = results.passed ? "passed" : "failed";
+      } else if ((_e = (_d = this.config.settings) == null ? void 0 : _d.scorm) == null ? void 0 : _e.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 = ((_g = (_f = this.config.settings) == null ? void 0 : _f.scorm) == null ? void 0 : _g.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.";
+    }
+  }
+  _calculateMetadataPerformance() {
+    const loPerformanceMap = /* @__PURE__ */ new Map();
+    const categoryPerformanceMap = /* @__PURE__ */ new Map();
+    const topicPerformanceMap = /* @__PURE__ */ new Map();
+    const difficultyPerformanceMap = /* @__PURE__ */ new Map();
+    const bloomLevelPerformanceMap = /* @__PURE__ */ new Map();
+    const updateMap = (map, key, points, isCorrect) => {
+      if (!key) return;
+      const current = map.get(key) || { totalQuestions: 0, correctQuestions: 0, pointsEarned: 0, maxPoints: 0 };
+      current.totalQuestions++;
+      current.maxPoints += points;
+      if (isCorrect) {
+        current.correctQuestions++;
+        current.pointsEarned += points;
+      }
+      map.set(key, current);
+    };
+    this.questions.forEach((q) => {
+      var _a;
+      const qResult = this.userAnswers.get(q.id);
+      const { isCorrect } = this.evaluateQuestion(q, qResult || null);
+      const pointsForThisQuestion = (_a = q.points) != null ? _a : 0;
+      updateMap(loPerformanceMap, q.learningObjective, pointsForThisQuestion, isCorrect);
+      updateMap(categoryPerformanceMap, q.category, pointsForThisQuestion, isCorrect);
+      updateMap(topicPerformanceMap, q.topic, pointsForThisQuestion, isCorrect);
+      updateMap(difficultyPerformanceMap, q.difficulty, pointsForThisQuestion, isCorrect);
+      updateMap(bloomLevelPerformanceMap, q.bloomLevel, pointsForThisQuestion, isCorrect);
+    });
+    const formatPerformanceArray = (map, keyName) => {
+      return Array.from(map.entries()).map(([key, data]) => ({
+        [keyName]: key,
+        totalQuestions: data.totalQuestions,
+        correctQuestions: data.correctQuestions,
+        pointsEarned: data.pointsEarned,
+        maxPoints: data.maxPoints,
+        percentage: data.maxPoints > 0 ? parseFloat((data.pointsEarned / data.maxPoints * 100).toFixed(2)) : 0
+      }));
+    };
+    return {
+      performanceByLearningObjective: formatPerformanceArray(loPerformanceMap, "learningObjective"),
+      performanceByCategory: formatPerformanceArray(categoryPerformanceMap, "category"),
+      performanceByTopic: formatPerformanceArray(topicPerformanceMap, "topic"),
+      performanceByDifficulty: formatPerformanceArray(difficultyPerformanceMap, "difficulty"),
+      performanceByBloomLevel: formatPerformanceArray(bloomLevelPerformanceMap, "bloomLevel")
+    };
+  }
+  getElapsedTime() {
+    return Date.now() - this.overallStartTime;
+  }
+  destroy() {
+    this.stopTimer();
+    this._recordCurrentQuestionTime();
+    if (this.scormService && this.scormService.hasAPI()) {
+      if (["initialized", "committed", "sending_data"].includes(this.quizResultState.scormStatus || "")) {
+        const termResult = this.scormService.terminate();
+        if (termResult.success) {
+          this.quizResultState.scormStatus = "terminated";
+        } else {
+          this.quizResultState.scormStatus = "error";
+          this.quizResultState.scormError = termResult.error || "SCORM termination failed on destroy.";
+        }
+      }
+    }
+    this.scormService = null;
+  }
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/react-ui/components/elements/radio-group.tsx
+var RadioGroup = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    RadioGroupPrimitive.Root,
+    __spreadProps(__spreadValues({
+      className: cn("grid gap-2", className)
+    }, props), {
+      ref
+    })
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    RadioGroupPrimitive.Item,
+    __spreadValues({
+      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),
+    /* @__PURE__ */ React25.createElement(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center" }, /* @__PURE__ */ React25.createElement(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }))
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    LabelPrimitive.Root,
+    __spreadValues({
+      ref,
+      className: cn(labelVariants(), className)
+    }, props)
+  );
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+var Card = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "rounded-lg border bg-card text-card-foreground shadow-sm",
+        className
+      )
+    }, props)
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-6", className)
+    }, props)
+  );
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "text-2xl font-semibold leading-none tracking-tight",
+        className
+      )
+    }, props)
+  );
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("text-sm text-muted-foreground", className)
+    }, props)
+  );
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
+});
+CardContent.displayName = "CardContent";
+var CardFooter = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    "div",
+    __spreadValues({
+      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__ */ React25__default.createElement("div", { className: `prose dark:prose-invert max-w-none ${className}` }, /* @__PURE__ */ React25__default.createElement(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm, remarkMath],
+        rehypePlugins: [rehypeHighlight, rehypeKatex],
+        components: {
+          // Override the default image component to handle videos and responsive images
+          img: (_a) => {
+            var _b = _a, { node } = _b, props = __objRest(_b, ["node"]);
+            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__ */ React25__default.createElement("div", { className: "aspect-w-16 aspect-h-9 my-4" }, /* @__PURE__ */ React25__default.createElement(
+                "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__ */ React25__default.createElement(
+                "img",
+                __spreadProps(__spreadValues({}, props), {
+                  style: {
+                    maxWidth: "100%",
+                    height: "auto",
+                    borderRadius: "0.5rem",
+                    margin: "1rem 0"
+                  },
+                  alt: props.alt || ""
+                })
+              )
+            );
+          },
+          // Override the default table to add responsive wrapper
+          table: (_c) => {
+            var _d = _c, { node } = _d, props = __objRest(_d, ["node"]);
+            return /* @__PURE__ */ React25__default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React25__default.createElement("table", __spreadProps(__spreadValues({}, props), { className: "my-4 w-full text-sm" })));
+          },
+          // Override default blockquote for better styling
+          blockquote: (_e) => {
+            var _f = _e, { node } = _f, props = __objRest(_f, ["node"]);
+            return /* @__PURE__ */ React25__default.createElement(
+              "blockquote",
+              __spreadProps(__spreadValues({}, props), {
+                className: "border-l-4 border-primary bg-muted/50 p-4 my-4 italic"
+              })
+            );
+          }
+        }
+      },
+      processedContent
+    ))
+  );
+};
+
+// src/react-ui/components/ui/MultipleChoiceQuestionUI.tsx
+var MultipleChoiceQuestionUI = ({
+  question,
+  onAnswerChange,
+  userAnswer,
+  showCorrectAnswer = false
+}) => {
+  const { prompt, options, points, explanation, correctAnswerId, id: questionId } = question;
+  const handleSelection = (value) => {
+    onAnswerChange(value);
+  };
+  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(
+    RadioGroup,
+    {
+      value: userAnswer || void 0,
+      onValueChange: handleSelection,
+      className: "space-y-3",
+      "aria-labelledby": `question-prompt-${questionId}`
+    },
+    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__ */ React25__default.createElement(
+        Label,
+        {
+          key: option.id,
+          htmlFor: option.id,
+          className: itemClassName
+        },
+        /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React25__default.createElement(RadioGroupItem, { value: option.id, id: option.id, className: "mr-3" }), /* @__PURE__ */ React25__default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: option.text })))
+      );
+    })
+  ), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+};
+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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(
+    RadioGroup,
+    {
+      value: userAnswer || void 0,
+      onValueChange: handleSelection,
+      className: "space-y-3",
+      "aria-labelledby": `question-prompt-${questionId}`
+    },
+    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__ */ React25__default.createElement(
+        Label,
+        {
+          key: option.id,
+          htmlFor: option.id,
+          className: itemClassName
+        },
+        /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React25__default.createElement(RadioGroupItem, { value: option.value, id: option.id, className: "mr-3" }), /* @__PURE__ */ React25__default.createElement("span", { className: "text-base" }, option.label))
+      );
+    })
+  ), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+};
+var Checkbox = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    CheckboxPrimitive.Root,
+    __spreadValues({
+      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),
+    /* @__PURE__ */ React25.createElement(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current")
+      },
+      /* @__PURE__ */ React25.createElement(Check, { className: "h-4 w-4" })
+    )
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/react-ui/components/ui/MultipleResponseQuestionUI.tsx
+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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-3", role: "group", "aria-labelledby": `question-prompt-${questionId}` }, options.map((option) => {
+    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__ */ React25__default.createElement(
+      Label,
+      {
+        key: option.id,
+        htmlFor: option.id,
+        className: itemClassName
+      },
+      /* @__PURE__ */ React25__default.createElement(
+        Checkbox,
+        {
+          id: option.id,
+          checked: isSelected,
+          onCheckedChange: (checked) => handleSelectionChange(option.id, !!checked),
+          className: "mr-3",
+          "aria-label": option.text.replace(/<[^>]*>?/gm, "")
+        }
+      ),
+      /* @__PURE__ */ React25__default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: option.text }))
+    );
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+};
+var Input = React25.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+    return /* @__PURE__ */ React25.createElement(
+      "input",
+      __spreadValues({
+        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";
+
+// src/react-ui/components/ui/ShortAnswerQuestionUI.tsx
+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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `short-answer-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React25__default.createElement(
+    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__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer && !isActuallyCorrect && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React25__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Accepted Answers:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside text-sm text-accent-foreground/80" }, acceptedAnswers.map((ans, idx) => /* @__PURE__ */ React25__default.createElement("li", { key: idx }, ans))), isCaseSensitive && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "(Case-sensitive)")), explanation && /* @__PURE__ */ React25__default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+};
+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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `numeric-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React25__default.createElement(
+    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__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer !== null && userAnswer !== "" && !isActuallyCorrect && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React25__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Correct Answer:"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-accent-foreground/80" }, correctAnswerValue, tolerance !== void 0 && tolerance !== null && tolerance > 0 && ` (Tolerance: \xB1${tolerance}, Accepted range: ${correctAnswerValue - tolerance} to ${correctAnswerValue + tolerance})`)), explanation && /* @__PURE__ */ React25__default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+};
+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 = __spreadProps(__spreadValues({}, userInputs), { [blankId]: value });
+    setUserInputs(newInputs);
+    const hasValue = Object.values(newInputs).some((val) => val.trim() !== "");
+    onAnswerChange(hasValue ? newInputs : null);
+  };
+  const getCorrectnessForBlank = (blankId) => {
+    var _a;
+    if (!showCorrectAnswer || !userInputs[blankId]) return null;
+    const userAnswerForBlank = (_a = userInputs[blankId]) == null ? void 0 : _a.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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement("div", { className: "text-base leading-relaxed flex flex-wrap items-center gap-x-1", "aria-labelledby": `question-prompt-${questionId}` }, segments.map((segment, index) => {
+    var _a;
+    if (segment.type === "text") {
+      return /* @__PURE__ */ React25__default.createElement(
+        MarkdownRenderer,
+        {
+          key: `text-${index}`,
+          content: segment.content || "",
+          className: "inline"
+        }
+      );
+    }
+    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 && ((_a = userInputs[blankId]) == null ? void 0 : _a.trim())) {
+        inputClassName += isCorrect ? " border-green-500 focus-visible:ring-green-500" : " border-destructive focus-visible:ring-destructive";
+      } else {
+        inputClassName += " border-input";
+      }
+      return /* @__PURE__ */ React25__default.createElement(
+        Input,
+        {
+          key: blankId,
+          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
+        }
+      );
+    }
+    return null;
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch chung:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-3" }, correctAnswersMap.map((ansDef) => {
+    var _a;
+    const isBlankCorrect = getCorrectnessForBlank(ansDef.blankId);
+    const userAnswerDisplay = userInputs[ansDef.blankId] || "Ch\u01B0a tr\u1EA3 l\u1EDDi";
+    return /* @__PURE__ */ React25__default.createElement("div", { key: `feedback-${ansDef.blankId}`, className: `p-2 border rounded-md ${isBlankCorrect ? "border-green-500/50 bg-green-500/10" : "border-destructive/50 bg-destructive/10"}` }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold" }, "\xD4 tr\u1ED1ng '", ((_a = segments.find((s) => s.id === ansDef.blankId && s.type === "blank")) == null ? void 0 : _a.id) || ansDef.blankId, "':"), ' B\u1EA1n \u0111\xE3 \u0111i\u1EC1n: "', userAnswerDisplay, '".'), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs" }, "\u0110\xE1p \xE1n ch\u1EA5p nh\u1EADn: ", ansDef.acceptedValues.join(", ")));
+  }))));
+};
+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 = React25.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ React25.createElement(
+      Comp,
+      __spreadValues({
+        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__ */ React25__default.createElement(CheckCircle, { className: "h-4 w-4 text-green-500 ml-2 flex-shrink-0" }) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-4 w-4 text-destructive ml-2 flex-shrink-0" });
+  };
+  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-6" }, /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React25__default.createElement(Label, { className: "font-semibold" }, "S\u1EAFp x\u1EBFp c\xE1c m\u1EE5c sau theo \u0111\xFAng th\u1EE9 t\u1EF1:"), /* @__PURE__ */ React25__default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2" }, availableItems.map((item) => /* @__PURE__ */ React25__default.createElement(
+    Button,
+    {
+      key: item.id,
+      variant: "outline",
+      onClick: () => handleSelectItem(item),
+      className: "justify-start text-left h-auto py-2 px-3",
+      disabled: showCorrectAnswer
+    },
+    /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item.content })
+  ))), availableItems.length === 0 && selectedSequence.length > 0 && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, 'T\u1EA5t c\u1EA3 c\xE1c m\u1EE5c \u0111\xE3 \u0111\u01B0\u1EE3c ch\u1ECDn. Nh\u1EA5p v\xE0o m\u1EE5c trong "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn" \u0111\u1EC3 b\u1ECF ch\u1ECDn.')), /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React25__default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React25__default.createElement(Label, { className: "font-semibold" }, "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn:"), /* @__PURE__ */ React25__default.createElement(Button, { variant: "ghost", size: "sm", onClick: handleResetSequence, disabled: showCorrectAnswer || selectedSequence.length === 0 }, /* @__PURE__ */ React25__default.createElement(RotateCcw, { className: "mr-2 h-3.5 w-3.5" }), " \u0110\u1EB7t l\u1EA1i")), selectedSequence.length === 0 ? /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground p-3 border border-dashed rounded-md" }, "Ch\u01B0a ch\u1ECDn m\u1EE5c n\xE0o. Nh\u1EA5p v\xE0o c\xE1c m\u1EE5c \u1EDF tr\xEAn \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u.") : /* @__PURE__ */ React25__default.createElement("ul", { className: "space-y-2" }, selectedSequence.map((item, index) => /* @__PURE__ */ React25__default.createElement(
+    "li",
+    {
+      key: item.id,
+      onClick: () => handleRemoveFromSequence(item, index),
+      className: `flex items-center justify-between p-3 border rounded-md ${showCorrectAnswer ? (userAnswer == null ? void 0 : userAnswer[index]) === correctOrder[index] ? "border-green-500 bg-green-500/10" : "border-destructive bg-destructive/10" : "bg-muted/30 cursor-pointer hover:border-destructive/50"} transition-colors`
+    },
+    /* @__PURE__ */ React25__default.createElement("div", { className: "flex-grow flex items-center" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold mr-2" }, index + 1, "."), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item.content })),
+    showCorrectAnswer ? getFeedbackIcon(index) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-4 w-4 text-muted-foreground hover:text-destructive flex-shrink-0" })
+  )))), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Th\u1EE9 t\u1EF1 \u0111\xFAng:"), /* @__PURE__ */ React25__default.createElement("ol", { className: "list-decimal list-inside text-sm text-accent-foreground/80 space-y-1 mt-1" }, correctOrder.map((itemId) => {
+    const item = items.find((i) => i.id === itemId);
+    return /* @__PURE__ */ React25__default.createElement("li", { key: itemId }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item ? item.content : "Kh\xF4ng t\xECm th\u1EA5y m\u1EE5c" }));
+  }))), explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+};
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React25.createElement(
+    SelectPrimitive.Trigger,
+    __spreadValues({
+      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,
+    /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, { asChild: true }, /* @__PURE__ */ React25.createElement(ChevronDown, { className: "h-4 w-4 opacity-50" }))
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    SelectPrimitive.ScrollUpButton,
+    __spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props),
+    /* @__PURE__ */ React25.createElement(ChevronUp, { className: "h-4 w-4" })
+  );
+});
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    SelectPrimitive.ScrollDownButton,
+    __spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props),
+    /* @__PURE__ */ React25.createElement(ChevronDown, { className: "h-4 w-4" })
+  );
+});
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Portal, null, /* @__PURE__ */ React25.createElement(
+    SelectPrimitive.Content,
+    __spreadValues({
+      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),
+    /* @__PURE__ */ React25.createElement(SelectScrollUpButton, null),
+    /* @__PURE__ */ React25.createElement(
+      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__ */ React25.createElement(SelectScrollDownButton, null)
+  ));
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    SelectPrimitive.Label,
+    __spreadValues({
+      ref,
+      className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)
+    }, props)
+  );
+});
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React25.createElement(
+    SelectPrimitive.Item,
+    __spreadValues({
+      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),
+    /* @__PURE__ */ React25.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, null, /* @__PURE__ */ React25.createElement(Check, { className: "h-4 w-4" }))),
+    /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children)
+  );
+});
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    SelectPrimitive.Separator,
+    __spreadValues({
+      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 = __spreadProps(__spreadValues({}, currentAnswers), { [promptId]: optionId });
+    setCurrentAnswers(newAnswers);
+    const hasSelection = Object.values(newAnswers).some((val) => val && val !== "");
+    onAnswerChange(hasSelection ? newAnswers : null);
+  };
+  const getCorrectOptionIdForPrompt = (promptId) => {
+    var _a;
+    return (_a = correctAnswerMap.find((map) => map.promptId === promptId)) == null ? void 0 : _a.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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React25__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4" }, prompts.map((promptItem) => {
+    var _a;
+    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__ */ React25__default.createElement("div", { key: promptItem.id, className: `p-3 border rounded-md ${borderColor} transition-colors bg-background` }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `select-prompt-${promptItem.id}`, className: "font-medium text-base block mb-2" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: promptItem.content })), /* @__PURE__ */ React25__default.createElement(
+      Select,
+      {
+        value: selectedOptionId,
+        onValueChange: (value) => handleSelectChange(promptItem.id, value),
+        disabled: showCorrectAnswer
+      },
+      /* @__PURE__ */ React25__default.createElement(SelectTrigger, { id: `select-prompt-${promptItem.id}` }, /* @__PURE__ */ React25__default.createElement(SelectValue, { placeholder: "Ch\u1ECDn \u0111\xE1p \xE1n..." })),
+      /* @__PURE__ */ React25__default.createElement(SelectContent, null, shuffledOptions.map((option) => /* @__PURE__ */ React25__default.createElement(SelectItem, { key: option.id, value: option.id }, getPlainText(option.content))))
+    ), showCorrectAnswer && selectedOptionId && (isSelectionCorrect ? /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "h-5 w-5 text-green-500 mt-2 inline-block" }) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-5 w-5 text-destructive mt-2 inline-block" })), showCorrectAnswer && !selectedOptionId && correctOptionId && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "Ch\u01B0a ch\u1ECDn. \u0110\xE1p \xE1n \u0111\xFAng: ", getPlainText((_a = shuffledOptions.find((o) => o.id === correctOptionId)) == null ? void 0 : _a.content)));
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, correctAnswerMap.map((map) => {
+    var _a, _b;
+    const promptText = (_a = prompts.find((p) => p.id === map.promptId)) == null ? void 0 : _a.content;
+    const optionText = (_b = initialOptions.find((o) => o.id === map.optionId)) == null ? void 0 : _b.content;
+    return /* @__PURE__ */ React25__default.createElement("li", { key: map.promptId }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: `<strong>${getPlainText(promptText) || "N/A"}</strong> gh\xE9p v\u1EDBi <strong>${getPlainText(optionText) || "N/A"}</strong>` }));
+  })))));
+};
+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 = __spreadProps(__spreadValues({}, currentAnswers), { [draggableItemId]: dropZoneId });
+    setCurrentAnswers(newAnswers);
+    const hasSelection = Object.values(newAnswers).some((val) => val && val !== "");
+    onAnswerChange(hasSelection ? newAnswers : null);
+  };
+  const getCorrectDropZoneIdForDraggable = (draggableItemId) => {
+    var _a;
+    return (_a = answerMap.find((map) => map.draggableId === draggableItemId)) == null ? void 0 : _a.dropZoneId;
+  };
+  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-4" }, backgroundImageUrl && /* @__PURE__ */ React25__default.createElement("div", { className: "mb-4 overflow-hidden rounded-md border" }, /* @__PURE__ */ React25__default.createElement("img", { src: backgroundImageUrl, alt: question.imageAltText || "Drag and drop background", className: "w-full h-auto object-contain max-h-[300px]", "data-ai-hint": "abstract pattern" })), /* @__PURE__ */ React25__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React25__default.createElement(Label, { className: "font-semibold" }, "Gh\xE9p c\xE1c m\u1EE5c sau v\xE0o \u0111\xFAng v\u1ECB tr\xED:"), draggableItems.map((item) => {
+    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__ */ React25__default.createElement("div", { key: item.id, className: itemStyle }, /* @__PURE__ */ React25__default.createElement(Label, { htmlFor: `select-draggable-${item.id}`, className: "font-medium text-base mb-2 sm:mb-0 sm:mr-4 flex-1" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: item.content })), /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center space-x-2 w-full sm:w-auto" }, /* @__PURE__ */ React25__default.createElement(
+      Select,
+      {
+        value: selectedDropZoneId,
+        onValueChange: (value) => handleSelectChange(item.id, value),
+        disabled: showCorrectAnswer
+      },
+      /* @__PURE__ */ React25__default.createElement(SelectTrigger, { id: `select-draggable-${item.id}`, className: "w-full sm:min-w-[200px]" }, /* @__PURE__ */ React25__default.createElement(SelectValue, { placeholder: "Ch\u1ECDn v\u1ECB tr\xED..." })),
+      /* @__PURE__ */ React25__default.createElement(SelectContent, null, dropZones.map((zone) => /* @__PURE__ */ React25__default.createElement(SelectItem, { key: zone.id, value: zone.id }, zone.label.replace(/<[^>]*>?/gm, ""))))
+    ), showCorrectAnswer && selectedDropZoneId && (isSelectionCorrect ? /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "h-5 w-5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-5 w-5 text-destructive flex-shrink-0" }))));
+  })), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, answerMap.map((map) => {
+    var _a, _b;
+    const draggableText = (_a = draggableItems.find((d) => d.id === map.draggableId)) == null ? void 0 : _a.content;
+    const dropZoneText = (_b = dropZones.find((z) => z.id === map.dropZoneId)) == null ? void 0 : _b.label;
+    return /* @__PURE__ */ React25__default.createElement("li", { key: map.draggableId }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: `<strong>${draggableText || "N/A"}</strong> v\xE0o <strong>${dropZoneText || "N/A"}</strong>` }));
+  })))));
+};
+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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React25__default.createElement("div", { className: "relative w-full border border-muted rounded-md overflow-hidden", style: { maxWidth: "100%", maxHeight: "500px" } }, /* @__PURE__ */ React25__default.createElement(
+    "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__ */ React25__default.createElement(
+    "div",
+    {
+      key: hotspot.id,
+      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);
+      }
+    }
+  ))), showCorrectAnswer && explanation && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React25__default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-md" }, "Correct Hotspots:"), /* @__PURE__ */ React25__default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" }, (correctAnswerIds || []).map((id) => {
+    const hotspot = hotspots.find((h) => h.id === id);
+    return /* @__PURE__ */ React25__default.createElement("li", { key: id }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: (hotspot == null ? void 0 : hotspot.description) || (hotspot == null ? void 0 : hotspot.id) || "N/A", className: "inline" }));
+  })))));
+};
+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) => {
+    var _a, _b;
+    if (typeof ((_a = window.Blockly) == null ? void 0 : _a.Blocks) !== "undefined" && typeof ((_b = window.Blockly) == null ? void 0 : _b.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) => {
+      var _a2, _b2, _c;
+      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 ((_b2 = (_a2 = BlocklyGlobal.utils) == null ? void 0 : _a2.global) == null ? void 0 : _b2.setPaths) {
+          BlocklyGlobal.utils.global.setPaths(cdn.mediaPath);
+        } else if ((_c = BlocklyGlobal.utils) == null ? void 0 : _c.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 = React25__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: () => {
+      var _a, _b;
+      if (workspaceRef.current && blocklyReady) {
+        const LocalBlockly = window.Blockly;
+        if (!((_a = LocalBlockly == null ? void 0 : LocalBlockly.Xml) == null ? void 0 : _a.workspaceToDom) || !((_b = LocalBlockly == null ? void 0 : LocalBlockly.Xml) == null ? void 0 : _b.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(() => {
+    var _a;
+    if (!blocklyReady || !blocklyDivRef.current) return;
+    const LocalBlockly = window.Blockly;
+    if (!(LocalBlockly == null ? void 0 : LocalBlockly.inject) || !(LocalBlockly == null ? void 0 : LocalBlockly.Xml) || !(LocalBlockly == null ? void 0 : LocalBlockly.Events) || !(LocalBlockly == null ? void 0 : 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 ((_a = workspaceRef.current) == null ? void 0 : _a.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 () => {
+      var _a;
+      if ((_a = workspaceRef.current) == null ? void 0 : _a.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 == null ? void 0 : 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__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: question.prompt })), question.points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, blocklyLoading && /* @__PURE__ */ React25__default.createElement(
+    "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"
+    },
+    /* @__PURE__ */ React25__default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-muted-foreground animate-pulse mb-2" }, "Loading Blockly Environment..."), /* @__PURE__ */ React25__default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto" }))
+  ), blocklyLoadError && !blocklyLoading && /* @__PURE__ */ React25__default.createElement(
+    "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"
+    },
+    /* @__PURE__ */ React25__default.createElement("div", { className: "text-destructive text-center" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-lg" }, "Failed to load Blockly"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm mt-2 mb-3" }, blocklyLoadError), /* @__PURE__ */ React25__default.createElement("div", { className: "space-x-2" }, /* @__PURE__ */ React25__default.createElement(
+      "button",
+      {
+        onClick: retry,
+        className: "px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors text-sm"
+      },
+      "Try Again"
+    ), /* @__PURE__ */ React25__default.createElement(
+      "button",
+      {
+        onClick: () => window.location.reload(),
+        className: "px-4 py-2 bg-destructive text-destructive-foreground rounded hover:bg-destructive/90 transition-colors text-sm"
+      },
+      "Refresh Page"
+    )))
+  ), !blocklyLoading && !blocklyLoadError && /* @__PURE__ */ React25__default.createElement(
+    "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__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" }))));
+});
+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 () => {
+    var _a, _b, _c, _d;
+    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 == null ? void 0 : BlocklyGlobalEngine.Blocks)}, Blockly.Msg defined: ${!!(BlocklyGlobalEngine == null ? void 0 : BlocklyGlobalEngine.Msg)}, Blockly.ScratchMsgs defined: ${!!(BlocklyGlobalEngine == null ? void 0 : 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 == null ? void 0 : BlocklyGlobalAfterMsg.Msg)}, Keys in Blockly.Msg: ${(BlocklyGlobalAfterMsg == null ? void 0 : BlocklyGlobalAfterMsg.Msg) ? Object.keys(BlocklyGlobalAfterMsg.Msg).length : "N/A"}. Sample Blockly.Msg.LOGIC_HUE: ${(_a = BlocklyGlobalAfterMsg == null ? void 0 : BlocklyGlobalAfterMsg.Msg) == null ? void 0 : _a.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 == null ? void 0 : BlocklyGlobalAfterMsg.Msg) ? Object.keys(BlocklyGlobalAfterMsg.Msg).length : "N/A"}. Sample Blockly.Msg.LOGIC_HUE: ${(_b = BlocklyGlobalAfterMsg == null ? void 0 : BlocklyGlobalAfterMsg.Msg) == null ? void 0 : _b.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: ${!!((_c = BlocklyGlobalBlocks.Blocks) == null ? void 0 : _c.motion_movesteps)}`);
+      if (typeof ((_d = BlocklyGlobalBlocks.Blocks) == null ? void 0 : _d.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 == null ? void 0 : 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(() => {
+    var _a, _b;
+    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 ((_a = LocalBlockly.Blocks) == null ? void 0 : _a.motion_movesteps) === "undefined" || typeof ((_b = LocalBlockly.Blocks) == null ? void 0 : _b.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 == null ? void 0 : 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__ */ React25__default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React25__default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React25__default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto mb-2" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-muted-foreground" }, "Loading Scratch Assets...")));
+  }
+  if (componentError) {
+    return /* @__PURE__ */ React25__default.createElement("div", { style: { height: workspaceHeight, width: "100%", color: "hsl(var(--destructive))", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--destructive))", borderRadius: "0.375rem", padding: "1rem", backgroundColor: "hsl(var(--card))" } }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-lg mb-2" }, "Failed to load Scratch Workspace."), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground mb-3 text-center" }, componentError), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground mb-4 text-center" }, "Please ensure all Scratch/Blockly JavaScript files are correctly copied to your", /* @__PURE__ */ React25__default.createElement("code", null, "public/static/scratch-blocks/js"), " directory. Check browser console for more details.", /* @__PURE__ */ React25__default.createElement("br", null), /* @__PURE__ */ React25__default.createElement("strong", null, "CRITICAL: Ensure you have copied the CSS files from ", /* @__PURE__ */ React25__default.createElement("code", null, "node_modules/scratch-blocks/css/"), " (e.g., ", /* @__PURE__ */ React25__default.createElement("code", null, "vertical.css"), ") to ", /* @__PURE__ */ React25__default.createElement("code", null, "public/static/scratch-blocks/css/"), " and linked it in your main layout. Without CSS, blocks will not render correctly.")), /* @__PURE__ */ React25__default.createElement(Button, { onClick: attemptLoadScripts, variant: "outline" }, "Try Reloading Scripts"));
+  }
+  if (!isBlocklyReady && !isLoadingScripts) {
+    return /* @__PURE__ */ React25__default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-muted-foreground" }, "Scratch environment did not initialize (Blockly not ready). Check console for script loading errors."));
+  }
+  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React25__default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, question.prompt), question.points && /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React25__default.createElement(
+    "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__ */ React25__default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-accent-foreground/80" }, question.explanation))));
+});
+ScratchProgrammingQuestionUI.displayName = "ScratchProgrammingQuestionUI";
+
+// src/react-ui/components/ui/QuestionRenderer.tsx
+var QuestionRenderer = React25__default.forwardRef(({
+  question,
+  onAnswerChange,
+  userAnswer,
+  showCorrectAnswer = false
+}, ref) => {
+  const commonProps = {
+    question,
+    onAnswerChange,
+    userAnswer,
+    showCorrectAnswer
+  };
+  switch (question.questionType) {
+    case "multiple_choice":
+      return /* @__PURE__ */ React25__default.createElement(MultipleChoiceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "true_false":
+      return /* @__PURE__ */ React25__default.createElement(TrueFalseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "multiple_response":
+      return /* @__PURE__ */ React25__default.createElement(MultipleResponseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "short_answer":
+      return /* @__PURE__ */ React25__default.createElement(ShortAnswerQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "numeric":
+      return /* @__PURE__ */ React25__default.createElement(NumericQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "fill_in_the_blanks":
+      return /* @__PURE__ */ React25__default.createElement(FillInTheBlanksQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "sequence":
+      return /* @__PURE__ */ React25__default.createElement(SequenceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "matching":
+      return /* @__PURE__ */ React25__default.createElement(MatchingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "drag_and_drop":
+      return /* @__PURE__ */ React25__default.createElement(DragAndDropQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "hotspot":
+      return /* @__PURE__ */ React25__default.createElement(HotspotQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+    case "blockly_programming":
+      return /* @__PURE__ */ React25__default.createElement(BlocklyProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
+    case "scratch_programming":
+      return /* @__PURE__ */ React25__default.createElement(ScratchProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
+    default:
+      return /* @__PURE__ */ React25__default.createElement("div", { className: "p-4 border border-destructive bg-destructive/10 rounded-md" }, /* @__PURE__ */ React25__default.createElement("p", { className: "font-semibold text-destructive" }, "Unsupported Question Type"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, "The question type is not currently supported by the renderer."), /* @__PURE__ */ React25__default.createElement("pre", { className: "mt-2 p-2 bg-muted rounded text-xs font-code overflow-x-auto" }, JSON.stringify(question, null, 2)));
+  }
+});
+QuestionRenderer.displayName = "QuestionRenderer";
+var Progress = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
+  return /* @__PURE__ */ React25.createElement(
+    ProgressPrimitive.Root,
+    __spreadValues({
+      ref,
+      className: cn(
+        "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+        className
+      )
+    }, props),
+    /* @__PURE__ */ React25.createElement(
+      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 = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React25.createElement(
+    AccordionPrimitive.Item,
+    __spreadValues({
+      ref,
+      className: cn("border-b", className)
+    }, props)
+  );
+});
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React25.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React25.createElement(
+    AccordionPrimitive.Trigger,
+    __spreadValues({
+      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,
+    /* @__PURE__ */ React25.createElement(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+  ));
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React25.createElement(
+    AccordionPrimitive.Content,
+    __spreadValues({
+      ref,
+      className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    }, props),
+    /* @__PURE__ */ React25.createElement("div", { className: cn("pb-4 pt-0", className) }, children)
+  );
+});
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var ScrollArea = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React25.createElement(
+    ScrollAreaPrimitive.Root,
+    __spreadValues({
+      ref,
+      className: cn("relative overflow-hidden", className)
+    }, props),
+    /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]" }, children),
+    /* @__PURE__ */ React25.createElement(ScrollBar, null),
+    /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.Corner, null)
+  );
+});
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React25.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ React25.createElement(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    __spreadValues({
+      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),
+    /* @__PURE__ */ React25.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  );
+});
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/react-ui/components/ui/QuizResult.tsx
+var QuizResult = ({ result, quizTitle, onExitQuiz }) => {
+  var _a, _b, _c, _d;
+  const getAnswerDisplay = (answer) => {
+    if (answer === null || answer === void 0) return "Not Answered";
+    if (typeof answer === "boolean") return answer ? "True" : "False";
+    if (Array.isArray(answer)) return answer.join(", ");
+    if (typeof answer === "object") return JSON.stringify(answer);
+    return String(answer);
+  };
+  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-3xl font-headline text-center" }, "Quiz Results: ", quizTitle), /* @__PURE__ */ React25__default.createElement(CardDescription, { className: "text-center text-lg" }, "Here's how you performed!")), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "space-y-6" }, /* @__PURE__ */ React25__default.createElement(Card, { className: "bg-secondary/50" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-xl flex items-center" }, /* @__PURE__ */ React25__default.createElement(BarChart2, { className: "mr-2 h-5 w-5 text-primary" }), "Overall Score")), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center" }, /* @__PURE__ */ React25__default.createElement("div", null, /* @__PURE__ */ React25__default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.score, " / ", result.maxScore), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, "Points")), /* @__PURE__ */ React25__default.createElement("div", null, /* @__PURE__ */ React25__default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.percentage.toFixed(2), "%"), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground" }, "Percentage")), /* @__PURE__ */ React25__default.createElement("div", null, result.passed !== void 0 && (result.passed ? /* @__PURE__ */ React25__default.createElement("div", { className: "flex flex-col items-center text-green-600" }, /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xl font-semibold mt-1" }, "Passed")) : /* @__PURE__ */ React25__default.createElement("div", { className: "flex flex-col items-center text-destructive" }, /* @__PURE__ */ React25__default.createElement(XCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xl font-semibold mt-1" }, "Failed")))))), /* @__PURE__ */ React25__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm" }, /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement(Clock, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React25__default.createElement("span", null, "Total time spent:"), /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold" }, (_b = (_a = result.totalTimeSpentSeconds) == null ? void 0 : _a.toFixed(0)) != null ? _b : "N/A", " seconds")), /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React25__default.createElement(Percent, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React25__default.createElement("span", null, "Average time per question:"), /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold" }, (_d = (_c = result.averageTimePerQuestionSeconds) == null ? void 0 : _c.toFixed(1)) != null ? _d : "N/A", " seconds"))), result.scormStatus && result.scormStatus !== "idle" && result.scormStatus !== "no_api" && /* @__PURE__ */ React25__default.createElement(Card, null, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-lg" }, "SCORM Sync Status")), /* @__PURE__ */ React25__default.createElement(CardContent, null, /* @__PURE__ */ React25__default.createElement("p", { className: `flex items-center ${result.scormStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.scormStatus === "error" && /* @__PURE__ */ React25__default.createElement(AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold ml-1" }, result.scormStatus)), result.scormError && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.scormError))), result.webhookStatus && result.webhookStatus !== "idle" && /* @__PURE__ */ React25__default.createElement(Card, null, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-lg" }, "Webhook Sync Status")), /* @__PURE__ */ React25__default.createElement(CardContent, null, /* @__PURE__ */ React25__default.createElement("p", { className: `flex items-center ${result.webhookStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.webhookStatus === "error" && /* @__PURE__ */ React25__default.createElement(AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React25__default.createElement("span", { className: "font-semibold ml-1" }, result.webhookStatus)), result.webhookError && /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.webhookError))), /* @__PURE__ */ React25__default.createElement(Accordion, { type: "single", collapsible: true, className: "w-full" }, /* @__PURE__ */ React25__default.createElement(AccordionItem, { value: "question-breakdown" }, /* @__PURE__ */ React25__default.createElement(AccordionTrigger, { className: "text-lg font-semibold" }, "Detailed Question Breakdown"), /* @__PURE__ */ React25__default.createElement(AccordionContent, null, /* @__PURE__ */ React25__default.createElement(ScrollArea, { className: "h-[300px] pr-4" }, /* @__PURE__ */ React25__default.createElement("ul", { className: "space-y-4" }, result.questionResults.map((qResult, index) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ React25__default.createElement("li", { key: qResult.questionId, className: "p-4 border rounded-md bg-background" }, /* @__PURE__ */ React25__default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React25__default.createElement("h4", { className: "font-semibold" }, "Question ", index + 1), qResult.isCorrect ? /* @__PURE__ */ React25__default.createElement("span", { className: "text-green-600 font-medium flex items-center" }, /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "mr-1 h-4 w-4" }), " Correct") : /* @__PURE__ */ React25__default.createElement("span", { className: "text-destructive font-medium flex items-center" }, /* @__PURE__ */ React25__default.createElement(XCircle, { className: "mr-1 h-4 w-4" }), " Incorrect")), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Your Answer:"), " ", getAnswerDisplay(qResult.userAnswer)), !qResult.isCorrect && /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Correct Answer:"), " ", getAnswerDisplay(qResult.correctAnswer)), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Points Earned:"), " ", qResult.pointsEarned), /* @__PURE__ */ React25__default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React25__default.createElement("span", { className: "font-medium" }, "Time Spent:"), " ", (_b2 = (_a2 = qResult.timeSpentSeconds) == null ? void 0 : _a2.toFixed(0)) != null ? _b2 : "N/A", "s"));
+  }))))))), /* @__PURE__ */ React25__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: onExitQuiz, className: "w-full" }, /* @__PURE__ */ React25__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), "Exit Results")));
+};
+
+// src/react-ui/components/ui/QuizPlayer.tsx
+var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
+  var _a;
+  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 programmingQuestionRef = useRef(null);
+  const handleAnswerChange = useCallback((answer) => {
+    if ((currentQuestion == null ? void 0 : currentQuestion.questionType) !== "blockly_programming" && (currentQuestion == null ? void 0 : currentQuestion.questionType) !== "scratch_programming") {
+      setUserAnswer(answer);
+    }
+  }, [currentQuestion]);
+  useEffect(() => {
+    setIsLoading(true);
+    setError(null);
+    setQuizFinished(false);
+    setFinalResult(null);
+    setUserAnswer(null);
+    let localQuizEngine = null;
+    try {
+      const callbacks = {
+        onQuizStart: (initialData) => {
+          setCurrentQuestion(initialData.initialQuestion);
+          setCurrentQuestionNumber(initialData.currentQuestionNumber);
+          setTotalQuestions(initialData.totalQuestions);
+          setTimeLeft(initialData.timeLimitInSeconds);
+          setIsLoading(false);
+        },
+        onQuestionChange: (question, qNum, total) => {
+          setCurrentQuestion(question);
+          setCurrentQuestionNumber(qNum);
+          setTotalQuestions(total);
+          const existingAnswer = engine == null ? void 0 : engine.getUserAnswer((question == null ? void 0 : question.id) || "");
+          setUserAnswer(existingAnswer !== void 0 ? existingAnswer : null);
+        },
+        onQuizFinish: (results) => {
+          setFinalResult(results);
+          setQuizFinished(true);
+          onQuizComplete(results);
+          setIsLoading(false);
+        },
+        onTimeTick: (timeLeftInSeconds) => {
+          setTimeLeft(timeLeftInSeconds);
+        },
+        onQuizTimeUp: () => {
+          setError("Time's up! Your quiz has been submitted automatically.");
+        }
+      };
+      localQuizEngine = new QuizEngine({ config: quizConfig, callbacks });
+      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);
+      return () => {
+        if (localQuizEngine) {
+          localQuizEngine.destroy();
+        }
+      };
+    } catch (e) {
+      console.error("Error initializing QuizEngine:", e);
+      setError(e instanceof Error ? e.message : "Failed to load quiz.");
+      setIsLoading(false);
+      if (localQuizEngine) {
+        localQuizEngine.destroy();
+      }
+    }
+  }, [quizConfig, onQuizComplete]);
+  const handleSubmitAnswer = () => {
+    var _a2;
+    if (!engine || !currentQuestion) return;
+    let answerToSubmit = null;
+    if (currentQuestion.questionType === "blockly_programming" || currentQuestion.questionType === "scratch_programming") {
+      if (programmingQuestionRef.current && typeof programmingQuestionRef.current.getWorkspaceXml === "function") {
+        answerToSubmit = programmingQuestionRef.current.getWorkspaceXml();
+      } else {
+        console.warn(`${currentQuestion.questionType} ref not available for submission. Submitting last known answer from engine if any.`);
+        answerToSubmit = (_a2 = engine.getUserAnswer(currentQuestion.id)) != null ? _a2 : null;
+      }
+    } else {
+      answerToSubmit = userAnswer;
+    }
+    if (answerToSubmit !== void 0) {
+      engine.submitAnswer(currentQuestion.id, answerToSubmit);
+    }
+  };
+  const handleNext = () => {
+    if (engine) {
+      handleSubmitAnswer();
+      if (engine.getCurrentQuestionNumber() < engine.getTotalQuestions()) {
+        engine.nextQuestion();
+      } else {
+        handleFinishQuiz();
+      }
+    }
+  };
+  const handlePrevious = () => {
+    if (engine && engine.getCurrentQuestionNumber() > 1) {
+      handleSubmitAnswer();
+      engine.previousQuestion();
+    }
+  };
+  const handleFinishQuiz = async () => {
+    if (engine) {
+      setIsLoading(true);
+      handleSubmitAnswer();
+      await engine.calculateResults();
+    }
+  };
+  const progressPercent = useMemo(() => {
+    if (totalQuestions === 0) return 0;
+    return quizFinished ? 100 : Math.max(0, Math.min(100, (currentQuestionNumber - 1) / totalQuestions * 100));
+  }, [currentQuestionNumber, totalQuestions, quizFinished]);
+  if (isLoading) {
+    return /* @__PURE__ */ React25__default.createElement("div", { className: "flex flex-col items-center justify-center h-64" }, /* @__PURE__ */ React25__default.createElement(Loader2, { className: "h-12 w-12 animate-spin text-primary" }), /* @__PURE__ */ React25__default.createElement("p", { className: "mt-4 text-muted-foreground" }, "Loading Quiz..."));
+  }
+  if (error) {
+    return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-destructive flex items-center" }, /* @__PURE__ */ React25__default.createElement(AlertCircle, { className: "mr-2 h-6 w-6" }), "Quiz Error")), /* @__PURE__ */ React25__default.createElement(CardContent, null, /* @__PURE__ */ React25__default.createElement("p", null, error)), /* @__PURE__ */ React25__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React25__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), " Exit Quiz")));
+  }
+  if (quizFinished && finalResult) {
+    return /* @__PURE__ */ React25__default.createElement(QuizResult, { result: finalResult, onExitQuiz, quizTitle: quizConfig.title });
+  }
+  if (!currentQuestion) {
+    return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement(CardTitle, null, "Quiz Ended"), /* @__PURE__ */ React25__default.createElement(CardDescription, null, "No more questions, or quiz not loaded correctly.")), /* @__PURE__ */ React25__default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React25__default.createElement(LogOut, { className: "mr-2 h-4 w-4" }), " Exit Quiz")));
+  }
+  const formatTime = (seconds) => {
+    if (seconds === null) return "-:--";
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs < 10 ? "0" : ""}${secs}`;
+  };
+  return /* @__PURE__ */ React25__default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React25__default.createElement(CardHeader, null, /* @__PURE__ */ React25__default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React25__default.createElement(CardTitle, { className: "text-2xl font-headline" }, quizConfig.title), timeLeft !== null && /* @__PURE__ */ React25__default.createElement("div", { className: "flex items-center text-sm text-muted-foreground" }, /* @__PURE__ */ React25__default.createElement(Clock, { className: "mr-1 h-4 w-4" }), "Time Left: ", formatTime(timeLeft))), quizConfig.description && /* @__PURE__ */ React25__default.createElement(CardDescription, null, quizConfig.description), /* @__PURE__ */ React25__default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React25__default.createElement(Progress, { value: progressPercent, "aria-label": `Quiz progress: ${currentQuestionNumber} of ${totalQuestions} questions`, className: "w-full" }), /* @__PURE__ */ React25__default.createElement("p", { className: "text-sm text-muted-foreground mt-1 text-right" }, "Question ", currentQuestionNumber, " of ", totalQuestions))), /* @__PURE__ */ React25__default.createElement(CardContent, { className: "min-h-[200px]" }, /* @__PURE__ */ React25__default.createElement(
+    QuestionRenderer,
+    {
+      question: currentQuestion,
+      onAnswerChange: handleAnswerChange,
+      userAnswer,
+      showCorrectAnswer: ((_a = quizConfig.settings) == null ? void 0 : _a.showCorrectAnswers) === "immediately",
+      key: currentQuestion.id,
+      ref: currentQuestion.questionType === "blockly_programming" || currentQuestion.questionType === "scratch_programming" ? programmingQuestionRef : null
+    }
+  )), /* @__PURE__ */ React25__default.createElement(CardFooter, { className: "flex justify-between items-center" }, /* @__PURE__ */ React25__default.createElement(Button, { variant: "outline", onClick: handlePrevious, disabled: currentQuestionNumber <= 1 }, /* @__PURE__ */ React25__default.createElement(ChevronLeft, { className: "mr-2 h-4 w-4" }), " Previous"), onExitQuiz && /* @__PURE__ */ React25__default.createElement(Button, { variant: "ghost", onClick: onExitQuiz, className: "text-muted-foreground hover:text-destructive" }, "Exit Quiz"), /* @__PURE__ */ React25__default.createElement(Button, { onClick: handleNext }, currentQuestionNumber === totalQuestions ? "Finish Quiz" : "Next", currentQuestionNumber !== totalQuestions && /* @__PURE__ */ React25__default.createElement(ChevronRight, { className: "ml-2 h-4 w-4" }), currentQuestionNumber === totalQuestions && /* @__PURE__ */ React25__default.createElement(CheckCircle, { className: "ml-2 h-4 w-4" }))));
+};
+
+// 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 React25__default.createElement(QuizResult, {
+        result: quizResult,
+        quizTitle: quizConfig.title,
+        onExitQuiz: handleExit
+      });
+    }
+    return React25__default.createElement(QuizPlayer, {
+      quizConfig,
+      onQuizComplete: handleQuizComplete,
+      onExitQuiz: handleExit
+    });
+  };
+  const root = ReactDOM.createRoot(targetElement);
+  root.render(React25__default.createElement(React25__default.StrictMode, null, React25__default.createElement(AppContainer)));
+}
+
+export { mountQuizPlayer };