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

package/dist/player.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React28 = require('react');
+var React9 = require('react');
 var ReactDOM = require('react-dom/client');
 var reactI18next = require('react-i18next');
 var zod = require('zod');
@@ -10,6 +10,7 @@ var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
 var LabelPrimitive = require('@radix-ui/react-label');
 var classVarianceAuthority = require('class-variance-authority');
 var ReactMarkdown = require('react-markdown');
@@ -49,7 +50,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React28__namespace = /*#__PURE__*/_interopNamespace(React28);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
@@ -66,37 +67,7 @@ var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimit
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 
-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/player.ts
 
 // src/services/SCORMService.ts
 var SCORM_TRUE = "true";
@@ -117,11 +88,12 @@ var SCORMService = class {
     this.isInitialized = false;
     this.isTerminated = false;
     this.studentName = null;
-    this.settings = __spreadValues({
+    this.settings = {
       setCompletionOnFinish: true,
       setSuccessOnPass: true,
-      autoCommit: true
-    }, settings);
+      autoCommit: true,
+      ...settings
+    };
     if (typeof window !== "undefined") {
       this._findAPI();
     }
@@ -227,14 +199,13 @@ var SCORMService = class {
     }
   }
   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;
+    return value?.toString() ?? null;
   }
   commit() {
     if (!this.hasAPI() || !this.isInitialized) {
@@ -306,7 +277,6 @@ var SCORMService = class {
     }
   }
   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") {
@@ -316,8 +286,8 @@ var SCORMService = class {
     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
+      message: errorMessage?.toString() ?? "Unknown error.",
+      diagnostic: diagnostic?.toString() ?? void 0
     };
   }
   formatCMITime(totalSeconds) {
@@ -348,14 +318,13 @@ var SCORMService = class {
 // src/services/evaluators/multiple-choice-evaluator.ts
 var MultipleChoiceEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     const correctAnswerId = question.correctAnswerId;
     const isCorrect = answer === correctAnswerId;
     const correctOption = question.options.find((opt) => opt.id === correctAnswerId);
     const correctAnswerDetail = {
       id: correctAnswerId,
-      value: (correctOption == null ? void 0 : correctOption.text) || ""
+      value: correctOption?.text || ""
     };
     return Promise.resolve({
       isCorrect,
@@ -368,8 +337,7 @@ var MultipleChoiceEvaluator = class {
 // src/services/evaluators/multiple-response-evaluator.ts
 var MultipleResponseEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     const correctAnswerIds = question.correctAnswerIds;
     let isCorrect = false;
     if (Array.isArray(answer)) {
@@ -378,10 +346,7 @@ var MultipleResponseEvaluator = class {
       isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
     }
     const correctValues = correctAnswerIds.map(
-      (id) => {
-        var _a2;
-        return ((_a2 = question.options.find((opt) => opt.id === id)) == null ? void 0 : _a2.text) || "";
-      }
+      (id) => question.options.find((opt) => opt.id === id)?.text || ""
     );
     const correctAnswerDetail = {
       id: correctAnswerIds,
@@ -398,8 +363,7 @@ var MultipleResponseEvaluator = class {
 // src/services/evaluators/true-false-evaluator.ts
 var TrueFalseEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     const correctAnswer = question.correctAnswer;
     let userAnswer = answer;
     if (typeof answer === "string") {
@@ -421,12 +385,11 @@ var TrueFalseEvaluator = class {
 // src/services/evaluators/short-answer-evaluator.ts
 var ShortAnswerEvaluator = class {
   async evaluate(question, answer) {
-    var _a, _b;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (typeof answer === "string") {
       const userAnswerTrimmed = answer.trim();
-      const caseSensitive = (_b = question.isCaseSensitive) != null ? _b : false;
+      const caseSensitive = question.isCaseSensitive ?? false;
       isCorrect = question.acceptedAnswers.some(
         (accAns) => caseSensitive ? accAns.trim() === userAnswerTrimmed : accAns.trim().toLowerCase() === userAnswerTrimmed.toLowerCase()
       );
@@ -446,8 +409,7 @@ var ShortAnswerEvaluator = class {
 // src/services/evaluators/numeric-evaluator.ts
 var NumericEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (typeof answer === "string" || typeof answer === "number") {
       const userAnswerNum = parseFloat(String(answer));
@@ -470,17 +432,13 @@ var NumericEvaluator = class {
 // src/services/evaluators/sequence-evaluator.ts
 var SequenceEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (Array.isArray(answer) && answer.length === question.correctOrder.length) {
       isCorrect = answer.every((itemId, index) => itemId === question.correctOrder[index]);
     }
     const correctValues = question.correctOrder.map(
-      (id) => {
-        var _a2;
-        return ((_a2 = question.items.find((item) => item.id === id)) == null ? void 0 : _a2.content) || "";
-      }
+      (id) => question.items.find((item) => item.id === id)?.content || ""
     );
     const correctAnswerDetail = {
       id: question.correctOrder,
@@ -497,17 +455,15 @@ var SequenceEvaluator = class {
 // src/services/evaluators/matching-evaluator.ts
 var MatchingEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
       const userAnswerMap = answer;
       isCorrect = question.correctAnswerMap.length === Object.keys(userAnswerMap).length && question.correctAnswerMap.every((map) => userAnswerMap[map.promptId] === map.optionId);
     }
     const correctMap = question.correctAnswerMap.reduce((acc, curr) => {
-      var _a2, _b;
-      const promptText = ((_a2 = question.prompts.find((p) => p.id === curr.promptId)) == null ? void 0 : _a2.content) || "";
-      const optionText = ((_b = question.options.find((o) => o.id === curr.optionId)) == null ? void 0 : _b.content) || "";
+      const promptText = question.prompts.find((p) => p.id === curr.promptId)?.content || "";
+      const optionText = question.options.find((o) => o.id === curr.optionId)?.content || "";
       acc[promptText] = optionText;
       return acc;
     }, {});
@@ -526,16 +482,14 @@ var MatchingEvaluator = class {
 // src/services/evaluators/fill-in-the-blanks-evaluator.ts
 var FillInTheBlanksEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
       const userAnswerMap = answer;
       isCorrect = question.answers.length > 0 && question.answers.every((correctAnsDef) => {
-        var _a2, _b;
-        const userValForBlank = (_a2 = userAnswerMap[correctAnsDef.blankId]) == null ? void 0 : _a2.trim();
+        const userValForBlank = userAnswerMap[correctAnsDef.blankId]?.trim();
         if (userValForBlank === void 0) return false;
-        const caseSensitive = (_b = question.isCaseSensitive) != null ? _b : false;
+        const caseSensitive = question.isCaseSensitive ?? false;
         return correctAnsDef.acceptedValues.some(
           (accVal) => caseSensitive ? accVal.trim() === userValForBlank : accVal.trim().toLowerCase() === userValForBlank.toLowerCase()
         );
@@ -560,17 +514,15 @@ var FillInTheBlanksEvaluator = class {
 // src/services/evaluators/drag-and-drop-evaluator.ts
 var DragAndDropEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (typeof answer === "object" && answer !== null && !Array.isArray(answer)) {
       const userAnswerMap = answer;
       isCorrect = question.answerMap.length === Object.keys(userAnswerMap).length && question.answerMap.every((map) => userAnswerMap[map.draggableId] === map.dropZoneId);
     }
     const correctMap = question.answerMap.reduce((acc, curr) => {
-      var _a2, _b;
-      const draggableText = ((_a2 = question.draggableItems.find((d) => d.id === curr.draggableId)) == null ? void 0 : _a2.content) || "";
-      const dropZoneText = ((_b = question.dropZones.find((z3) => z3.id === curr.dropZoneId)) == null ? void 0 : _b.label) || "";
+      const draggableText = question.draggableItems.find((d) => d.id === curr.draggableId)?.content || "";
+      const dropZoneText = question.dropZones.find((z3) => z3.id === curr.dropZoneId)?.label || "";
       acc[draggableText] = dropZoneText;
       return acc;
     }, {});
@@ -589,8 +541,7 @@ var DragAndDropEvaluator = class {
 // src/services/evaluators/hotspot-evaluator.ts
 var HotspotEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (Array.isArray(answer)) {
       const userAnswerSet = new Set(answer);
@@ -598,10 +549,7 @@ var HotspotEvaluator = class {
       isCorrect = userAnswerSet.size === correctAnswerSet.size && [...userAnswerSet].every((id) => correctAnswerSet.has(id));
     }
     const correctValues = question.correctHotspotIds.map(
-      (id) => {
-        var _a2;
-        return ((_a2 = question.hotspots.find((h) => h.id === id)) == null ? void 0 : _a2.description) || id;
-      }
+      (id) => question.hotspots.find((h) => h.id === id)?.description || id
     );
     const correctAnswerDetail = {
       id: question.correctHotspotIds,
@@ -618,11 +566,10 @@ var HotspotEvaluator = class {
 // src/services/evaluators/programming-evaluator.ts
 var ProgrammingEvaluator = class {
   async evaluate(question, answer) {
-    var _a, _b;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     let isCorrect = false;
     if (typeof answer === "string" && typeof question.solutionGeneratedCode === "string") {
-      if (typeof window !== "undefined" && ((_b = window.Blockly) == null ? void 0 : _b.JavaScript)) {
+      if (typeof window !== "undefined" && window.Blockly?.JavaScript) {
         const LocalBlockly = window.Blockly;
         let generatedUserCode = "";
         try {
@@ -696,10 +643,10 @@ var JsonRepairEngine = class {
       if (breakIndex !== -1) {
         const stringContent = afterUnterminated.substring(0, breakIndex);
         const remainder = afterUnterminated.substring(breakIndex);
-        const escapedContent = stringContent.replace(new RegExp('(?<!\\\\)"', "g"), '\\"');
+        const escapedContent = stringContent.replace(/(?<!\\)"/g, '\\"');
         repaired = beforeUnterminated + escapedContent + '"' + remainder;
       } else {
-        const escapedContent = afterUnterminated.replace(new RegExp('(?<!\\\\)"', "g"), '\\"');
+        const escapedContent = afterUnterminated.replace(/(?<!\\)"/g, '\\"');
         repaired = beforeUnterminated + escapedContent + '"';
       }
     }
@@ -775,7 +722,6 @@ var JsonRepairEngine = class {
    * Main repair function that attempts multiple strategies.
    */
   static repairJson(jsonStr) {
-    var _a;
     let current = jsonStr.trim();
     const maxAttempts = 5;
     let lastError = "";
@@ -805,7 +751,7 @@ var JsonRepairEngine = class {
       }
       lastError = validation.error || "";
       lastPosition = validation.position;
-      if ((_a = validation.error) == null ? void 0 : _a.includes("Unterminated string")) {
+      if (validation.error?.includes("Unterminated string")) {
         current = this.repairUnterminatedStrings(current);
       } else {
         current = this.applyCommonFixes(current);
@@ -1100,9 +1046,10 @@ var CodeEvaluationService = class {
       userCode,
       testCase
     }, this.apiKey);
-    return __spreadValues({
-      testCaseId: testCase.id
-    }, aiResult);
+    return {
+      testCaseId: testCase.id,
+      ...aiResult
+    };
   }
   /**
    * Evaluates user's code against all test cases for a given question.
@@ -1139,8 +1086,7 @@ var CodeEvaluationService = class {
 // src/services/evaluators/coding-evaluator.ts
 var CodingEvaluator = class {
   async evaluate(question, answer) {
-    var _a;
-    const points = (_a = question.points) != null ? _a : 0;
+    const points = question.points ?? 0;
     if (typeof answer !== "string" || !answer.trim()) {
       return {
         isCorrect: false,
@@ -1197,17 +1143,16 @@ var QuizEngine = class {
     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.questions = this.config.settings?.shuffleQuestions ? [...this.config.questions].sort(() => Math.random() - 0.5) : this.config.questions;
     this.overallStartTime = Date.now();
     this.evaluators = /* @__PURE__ */ new Map();
     this.registerEvaluators();
-    if (((_b = this.config.settings) == null ? void 0 : _b.timeLimitMinutes) && this.config.settings.timeLimitMinutes > 0) {
+    if (this.config.settings?.timeLimitMinutes && this.config.settings.timeLimitMinutes > 0) {
       this.timeLeftInSeconds = this.config.settings.timeLimitMinutes * 60;
     }
-    if ((_c = this.config.settings) == null ? void 0 : _c.scorm) {
+    if (this.config.settings?.scorm) {
       this.quizResultState.scormStatus = "initializing";
       this.scormService = new SCORMService(this.config.settings.scorm);
       if (this.scormService.hasAPI()) {
@@ -1240,7 +1185,7 @@ var QuizEngine = class {
     if (this.timeLeftInSeconds !== null) {
       this.startTimer();
     }
-    (_e = (_d = this.callbacks).onQuestionChange) == null ? void 0 : _e.call(_d, initialQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
+    this.callbacks.onQuestionChange?.(initialQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
   }
   registerEvaluators() {
     this.evaluators.set("multiple_choice", new MultipleChoiceEvaluator());
@@ -1278,15 +1223,14 @@ var QuizEngine = class {
     }
   }
   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);
+      this.callbacks.onTimeTick?.(this.timeLeftInSeconds);
     }
     if (this.timeLeftInSeconds <= 0) {
       this.stopTimer();
-      (_d = (_c = this.callbacks).onQuizTimeUp) == null ? void 0 : _d.call(_c);
+      this.callbacks.onQuizTimeUp?.();
       this.calculateResults();
     }
   }
@@ -1309,43 +1253,39 @@ var QuizEngine = class {
     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);
+    if (question) this.callbacks.onAnswerSubmit?.(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());
+      this.callbacks.onQuestionChange?.(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());
+      this.callbacks.onQuestionChange?.(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());
+      this.callbacks.onQuestionChange?.(currentQ, this.getCurrentQuestionNumber(), this.getTotalQuestions());
       return currentQ;
     }
     return this.getCurrentQuestion();
@@ -1371,7 +1311,6 @@ var QuizEngine = class {
   }
   // (Tiếp theo từ Phần 1)
   async calculateResults() {
-    var _a, _b, _c, _d, _e;
     this.stopTimer();
     this._recordCurrentQuestionTime();
     let totalScore = 0;
@@ -1380,7 +1319,7 @@ var QuizEngine = class {
     let accumulatedTotalTimeSpent = 0;
     for (const question of this.questions) {
       const userAnswerRaw = this.userAnswers.get(question.id) || null;
-      maxScore += (_a = question.points) != null ? _a : 0;
+      maxScore += question.points ?? 0;
       const evaluator = this.evaluators.get(question.questionType);
       if (!evaluator) {
         console.warn(`No evaluator found for question type: ${question.questionType}`);
@@ -1420,13 +1359,13 @@ var QuizEngine = class {
     }
     const percentage = maxScore > 0 ? parseFloat((totalScore / maxScore * 100).toFixed(2)) : 0;
     let passed = void 0;
-    if (((_b = this.config.settings) == null ? void 0 : _b.passingScorePercent) != null) {
+    if (this.config.settings?.passingScorePercent != null) {
       passed = percentage >= this.config.settings.passingScorePercent;
     }
     const totalQuizTimeSpentSeconds = parseFloat(accumulatedTotalTimeSpent.toFixed(2));
     const averageTimePerQuestionSeconds = this.questions.length > 0 ? parseFloat((totalQuizTimeSpentSeconds / this.questions.length).toFixed(2)) : 0;
     const metadataPerformance = await this._calculateMetadataPerformance();
-    const finalResults = __spreadValues({
+    const finalResults = {
       score: totalScore,
       maxScore,
       percentage,
@@ -1438,39 +1377,33 @@ var QuizEngine = class {
       scormError: this.quizResultState.scormError,
       studentName: this.quizResultState.studentName,
       totalTimeSpentSeconds: totalQuizTimeSpentSeconds,
-      averageTimePerQuestionSeconds
-    }, metadataPerformance);
-    this.quizResultState = __spreadValues(__spreadValues({}, this.quizResultState), finalResults);
-    if ((_c = this.config.settings) == null ? void 0 : _c.scorm) this._sendResultsToSCORM(finalResults);
+      averageTimePerQuestionSeconds,
+      ...metadataPerformance
+    };
+    this.quizResultState = { ...this.quizResultState, ...finalResults };
+    if (this.config.settings?.scorm) this._sendResultsToSCORM(finalResults);
     await this._sendResultsToWebhook(finalResults);
-    (_e = (_d = this.callbacks).onQuizFinish) == null ? void 0 : _e.call(_d, finalResults);
+    this.callbacks.onQuizFinish?.(finalResults);
     return finalResults;
   }
   formatUserAnswerDetail(question, userAnswerRaw) {
-    var _a, _b, _c, _d, _e;
     if (userAnswerRaw === null) return null;
     switch (question.questionType) {
       case "multiple_choice": {
         const q = question;
         const id = userAnswerRaw;
-        return { id, value: ((_a = q.options.find((opt) => opt.id === id)) == null ? void 0 : _a.text) || "" };
+        return { id, value: q.options.find((opt) => opt.id === id)?.text || "" };
       }
       case "multiple_response": {
         const q = question;
         const ids = userAnswerRaw;
-        const values = ids.map((id) => {
-          var _a2;
-          return ((_a2 = q.options.find((opt) => opt.id === id)) == null ? void 0 : _a2.text) || "";
-        });
+        const values = ids.map((id) => q.options.find((opt) => opt.id === id)?.text || "");
         return { id: ids, value: values };
       }
       case "sequence": {
         const q = question;
         const ids = userAnswerRaw;
-        const values = ids.map((id) => {
-          var _a2;
-          return ((_a2 = q.items.find((item) => item.id === id)) == null ? void 0 : _a2.content) || "";
-        });
+        const values = ids.map((id) => q.items.find((item) => item.id === id)?.content || "");
         return { id: ids, value: values };
       }
       case "matching": {
@@ -1479,8 +1412,8 @@ var QuizEngine = class {
         const valueMap = {};
         for (const promptId in userAnswerMap) {
           const optionId = userAnswerMap[promptId];
-          const promptText = ((_b = q.prompts.find((p) => p.id === promptId)) == null ? void 0 : _b.content) || "";
-          const optionText = ((_c = q.options.find((o) => o.id === optionId)) == null ? void 0 : _c.content) || "";
+          const promptText = q.prompts.find((p) => p.id === promptId)?.content || "";
+          const optionText = q.options.find((o) => o.id === optionId)?.content || "";
           valueMap[promptText] = optionText;
         }
         return { id: null, value: valueMap };
@@ -1492,8 +1425,8 @@ var QuizEngine = class {
           const enrichedUserAnswerMap = {};
           for (const draggableId in userAnswerMapByIds) {
             const dropZoneId = userAnswerMapByIds[draggableId];
-            const draggableText = ((_d = q.draggableItems.find((d) => d.id === draggableId)) == null ? void 0 : _d.content) || `(ID: ${draggableId})`;
-            const dropZoneText = ((_e = q.dropZones.find((z3) => z3.id === dropZoneId)) == null ? void 0 : _e.label) || `(ID: ${dropZoneId})`;
+            const draggableText = q.draggableItems.find((d) => d.id === draggableId)?.content || `(ID: ${draggableId})`;
+            const dropZoneText = q.dropZones.find((z3) => z3.id === dropZoneId)?.label || `(ID: ${dropZoneId})`;
             enrichedUserAnswerMap[draggableText] = dropZoneText;
           }
           return { id: null, value: enrichedUserAnswerMap };
@@ -1505,7 +1438,6 @@ var QuizEngine = class {
     }
   }
   async _calculateMetadataPerformance() {
-    var _a;
     const loPerformanceMap = /* @__PURE__ */ new Map();
     const categoryPerformanceMap = /* @__PURE__ */ new Map();
     const topicPerformanceMap = /* @__PURE__ */ new Map();
@@ -1527,7 +1459,7 @@ var QuizEngine = class {
       const evaluator = this.evaluators.get(q.questionType);
       if (evaluator) {
         const { isCorrect } = await evaluator.evaluate(q, userAnswer);
-        const pointsForThisQuestion = (_a = q.points) != null ? _a : 0;
+        const pointsForThisQuestion = q.points ?? 0;
         updateMap(loPerformanceMap, q.learningObjective, pointsForThisQuestion, isCorrect);
         updateMap(categoryPerformanceMap, q.category, pointsForThisQuestion, isCorrect);
         updateMap(topicPerformanceMap, q.topic, pointsForThisQuestion, isCorrect);
@@ -1554,8 +1486,7 @@ var QuizEngine = class {
     };
   }
   async _sendResultsToWebhook(results) {
-    var _a;
-    if (!((_a = this.config.settings) == null ? void 0 : _a.webhookUrl)) {
+    if (!this.config.settings?.webhookUrl) {
       results.webhookStatus = "idle";
       return;
     }
@@ -1583,12 +1514,11 @@ var QuizEngine = class {
     }
   }
   _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"))) {
+    if (this.quizResultState.scormStatus === "error" && this.quizResultState.scormError?.includes("initialization failed")) {
       results.scormStatus = "error";
       results.scormError = this.quizResultState.scormError;
       return;
@@ -1597,15 +1527,15 @@ var QuizEngine = class {
     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) {
+      if (this.config.settings?.passingScorePercent !== void 0 && this.config.settings?.passingScorePercent !== null) {
         lessonStatusSetting = results.passed ? "passed" : "failed";
-      } else if ((_e = (_d = this.config.settings) == null ? void 0 : _d.scorm) == null ? void 0 : _e.setCompletionOnFinish) {
+      } else if (this.config.settings?.scorm?.setCompletionOnFinish) {
         lessonStatusSetting = "completed";
       }
       this.scormService.setLessonStatus(lessonStatusSetting, results.passed);
       if (results.totalTimeSpentSeconds !== void 0 && this.scormService.formatCMITime) {
         const cmiTime = this.scormService.formatCMITime(results.totalTimeSpentSeconds);
-        const sessionTimeVar = ((_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");
+        const sessionTimeVar = this.config.settings?.scorm?.sessionTimeVar || (this.scormService.getSCORMVersion() === "2004" ? "cmi.session_time" : "cmi.core.session_time");
         if (sessionTimeVar) this.scormService.setValue(sessionTimeVar, cmiTime);
       }
       const commitResult = this.scormService.commit();
@@ -1624,114 +1554,96 @@ var QuizEngine = class {
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-
-// src/react-ui/components/elements/radio-group.tsx
-var RadioGroup = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
+var RadioGroup = React9__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
-    __spreadProps(__spreadValues({
-      className: cn("grid gap-2", className)
-    }, props), {
+    {
+      className: cn("grid gap-2", className),
+      ...props,
       ref
-    })
+    }
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var RadioGroupItem = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
+var RadioGroupItem = React9__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.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__ */ React28__namespace.createElement(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center" }, /* @__PURE__ */ React28__namespace.createElement(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }))
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+    }
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    LabelPrimitive__namespace.Root,
-    __spreadValues({
-      ref,
-      className: cn(labelVariants(), className)
-    }, props)
-  );
-});
+var Label = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  LabelPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
-var Card = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      className: cn(
-        "rounded-lg border bg-card text-card-foreground shadow-sm",
-        className
-      )
-    }, props)
-  );
-});
+var Card = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
 Card.displayName = "Card";
-var CardHeader = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      className: cn("flex flex-col space-y-1.5 p-6", className)
-    }, props)
-  );
-});
+var CardHeader = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      className: cn(
-        "text-2xl font-semibold leading-none tracking-tight",
-        className
-      )
-    }, props)
-  );
-});
+var CardTitle = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      className: cn("text-sm text-muted-foreground", className)
-    }, props)
-  );
-});
+var CardDescription = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
 CardDescription.displayName = "CardDescription";
-var CardContent = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
-});
+var CardContent = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      className: cn("flex items-center p-6 pt-0", className)
-    }, props)
-  );
-});
+var CardFooter = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
 CardFooter.displayName = "CardFooter";
 var MarkdownRenderer = ({
   content,
@@ -1775,20 +1687,19 @@ var MarkdownRenderer = ({
   const processedContent = processContentForVideos(content);
   return (
     // Using Tailwind Typography for beautiful default styling of markdown content
-    /* @__PURE__ */ React28__namespace.default.createElement("div", { className: `prose dark:prose-invert max-w-none ${className}` }, /* @__PURE__ */ React28__namespace.default.createElement(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `prose dark:prose-invert max-w-none ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       ReactMarkdown__default.default,
       {
         remarkPlugins: [remarkGfm__default.default, remarkMath__default.default],
         rehypePlugins: [rehypeHighlight__default.default, rehypeKatex__default.default],
         components: {
           // Override the default image component to handle videos and responsive images
-          img: (_a) => {
-            var _b = _a, { node } = _b, props = __objRest(_b, ["node"]);
+          img: ({ node, ...props }) => {
             const src = props.src || "";
             const { platform, id } = getVideoId(src);
             if (platform && id) {
               const videoSrc = platform === "youtube" ? `https://www.youtube.com/embed/${id}` : `https://player.vimeo.com/video/${id}`;
-              return /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "aspect-w-16 aspect-h-9 my-4" }, /* @__PURE__ */ React28__namespace.default.createElement(
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-w-16 aspect-h-9 my-4", children: /* @__PURE__ */ jsxRuntime.jsx(
                 "iframe",
                 {
                   src: videoSrc,
@@ -1797,13 +1708,14 @@ var MarkdownRenderer = ({
                   allowFullScreen: true,
                   className: "w-full h-full rounded-md"
                 }
-              ));
+              ) });
             }
             return (
               // eslint-disable-next-line @next/next/no-img-element
-              /* @__PURE__ */ React28__namespace.default.createElement(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "img",
-                __spreadProps(__spreadValues({}, props), {
+                {
+                  ...props,
                   style: {
                     maxWidth: "100%",
                     height: "auto",
@@ -1811,33 +1723,26 @@ var MarkdownRenderer = ({
                     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__ */ React28__namespace.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React28__namespace.default.createElement("table", __spreadProps(__spreadValues({}, props), { className: "my-4 w-full text-sm" })));
-          },
+          table: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ...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__ */ React28__namespace.default.createElement(
-              "blockquote",
-              __spreadProps(__spreadValues({}, props), {
-                className: "border-l-4 border-primary bg-muted/50 p-4 my-4 italic"
-              })
-            );
-          }
-        }
-      },
-      processedContent
-    ))
+          blockquote: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+            "blockquote",
+            {
+              ...props,
+              className: "border-l-4 border-primary bg-muted/50 p-4 my-4 italic"
+            }
+          )
+        },
+        children: processedContent
+      }
+    ) })
   );
 };
-
-// src/react-ui/components/ui/MultipleChoiceQuestionUI.tsx
 var MultipleChoiceQuestionUI = ({
   question,
   onAnswerChange,
@@ -1848,40 +1753,58 @@ var MultipleChoiceQuestionUI = ({
   const handleSelection = (value) => {
     onAnswerChange(value);
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement(
-        Label,
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroup,
         {
-          key: option.id,
-          htmlFor: option.id,
-          className: itemClassName
-        },
-        /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(RadioGroupItem, { value: option.id, id: option.id, className: "mr-3" }), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: option.text })))
-      );
-    })
-  ), showCorrectAnswer && explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+          value: userAnswer || void 0,
+          onValueChange: handleSelection,
+          className: "space-y-3",
+          "aria-labelledby": `question-prompt-${questionId}`,
+          children: options.map((option) => {
+            const isSelected = userAnswer === option.id;
+            const isCorrect = option.id === correctAnswerId;
+            let itemClassName = "p-4 rounded-lg border-2 transition-all cursor-pointer hover:border-primary";
+            if (showCorrectAnswer) {
+              if (isCorrect) {
+                itemClassName += " border-green-500 bg-green-500/10";
+              } else if (isSelected && !isCorrect) {
+                itemClassName += " border-destructive bg-destructive/10";
+              } else {
+                itemClassName += " border-muted";
+              }
+            } else {
+              itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Label,
+              {
+                htmlFor: option.id,
+                className: itemClassName,
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: option.id, id: option.id, className: "mr-3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: option.text }) })
+                ] })
+              },
+              option.id
+            );
+          })
+        }
+      ),
+      showCorrectAnswer && explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
+      ] })
+    ] })
+  ] });
 };
 var TrueFalseQuestionUI = ({
   question,
@@ -1897,64 +1820,78 @@ var TrueFalseQuestionUI = ({
   const handleSelection = (value) => {
     onAnswerChange(value);
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement(
-        Label,
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RadioGroup,
         {
-          key: option.id,
-          htmlFor: option.id,
-          className: itemClassName
-        },
-        /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(RadioGroupItem, { value: option.value, id: option.id, className: "mr-3" }), /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "text-base" }, option.label))
-      );
-    })
-  ), showCorrectAnswer && explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+          value: userAnswer || void 0,
+          onValueChange: handleSelection,
+          className: "space-y-3",
+          "aria-labelledby": `question-prompt-${questionId}`,
+          children: options.map((option) => {
+            const isSelected = userAnswer === option.value;
+            const isOptionCorrect = option.value === "true" && correctAnswer === true || option.value === "false" && correctAnswer === false;
+            let itemClassName = "p-4 rounded-lg border-2 transition-all cursor-pointer hover:border-primary";
+            if (showCorrectAnswer) {
+              if (isOptionCorrect) {
+                itemClassName += " border-green-500 bg-green-500/10";
+              } else if (isSelected && !isOptionCorrect) {
+                itemClassName += " border-destructive bg-destructive/10";
+              } else {
+                itemClassName += " border-muted";
+              }
+            } else {
+              itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Label,
+              {
+                htmlFor: option.id,
+                className: itemClassName,
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: option.value, id: option.id, className: "mr-3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: option.label })
+                ] })
+              },
+              option.id
+            );
+          })
+        }
+      ),
+      showCorrectAnswer && explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
+      ] })
+    ] })
+  ] });
 };
-var Checkbox = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    CheckboxPrimitive__namespace.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__ */ React28__namespace.createElement(
+var Checkbox = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
       CheckboxPrimitive__namespace.Indicator,
       {
-        className: cn("flex items-center justify-center text-current")
-      },
-      /* @__PURE__ */ React28__namespace.createElement(lucideReact.Check, { className: "h-4 w-4" })
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
+      }
     )
-  );
-});
+  }
+));
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
-
-// src/react-ui/components/ui/MultipleResponseQuestionUI.tsx
 var MultipleResponseQuestionUI = ({
   question,
   onAnswerChange,
@@ -1976,59 +1913,74 @@ var MultipleResponseQuestionUI = ({
     }
     onAnswerChange(newAnswers.length > 0 ? newAnswers : null);
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement(
-      Label,
-      {
-        key: option.id,
-        htmlFor: option.id,
-        className: itemClassName
-      },
-      /* @__PURE__ */ React28__namespace.default.createElement(
-        Checkbox,
-        {
-          id: option.id,
-          checked: isSelected,
-          onCheckedChange: (checked) => handleSelectionChange(option.id, !!checked),
-          className: "mr-3",
-          "aria-label": option.text.replace(/<[^>]*>?/gm, "")
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", role: "group", "aria-labelledby": `question-prompt-${questionId}`, children: options.map((option) => {
+        const isSelected = Array.isArray(userAnswer) && userAnswer.includes(option.id);
+        const isCorrectOption = correctAnswerIds.includes(option.id);
+        let itemClassName = "p-4 rounded-lg border-2 transition-all cursor-pointer hover:border-primary flex items-center";
+        if (showCorrectAnswer) {
+          if (isCorrectOption) {
+            itemClassName += isSelected ? " border-green-500 bg-green-500/10" : " border-green-500";
+          } else {
+            itemClassName += isSelected ? " border-destructive bg-destructive/10" : " border-muted";
+          }
+        } else {
+          itemClassName += isSelected ? " border-primary bg-primary/10" : " border-muted";
         }
-      ),
-      /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "text-base flex-1" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: option.text }))
-    );
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" }))));
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          Label,
+          {
+            htmlFor: option.id,
+            className: itemClassName,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox,
+                {
+                  id: option.id,
+                  checked: isSelected,
+                  onCheckedChange: (checked) => handleSelectionChange(option.id, !!checked),
+                  className: "mr-3",
+                  "aria-label": option.text.replace(/<[^>]*>?/gm, "")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: option.text }) })
+            ]
+          },
+          option.id
+        );
+      }) }),
+      showCorrectAnswer && explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
+      ] })
+    ] })
+  ] });
 };
-var Input = React28__namespace.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
-    return /* @__PURE__ */ React28__namespace.createElement(
+var Input = React9__namespace.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "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)
+        ref,
+        ...props
+      }
     );
   }
 );
 Input.displayName = "Input";
-
-// src/react-ui/components/ui/ShortAnswerQuestionUI.tsx
 var ShortAnswerQuestionUI = ({
   question,
   onAnswerChange,
@@ -2047,20 +1999,44 @@ var ShortAnswerQuestionUI = ({
       (accAns) => isCaseSensitive ? accAns.trim() === userAnswerTrimmed : accAns.trim().toLowerCase() === userAnswerTrimmed.toLowerCase()
     );
   }
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__namespace.default.createElement(Label, { htmlFor: `short-answer-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React28__namespace.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: `
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `short-answer-input-${questionId}`, className: "sr-only", children: "Your Answer" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: `short-answer-input-${questionId}`,
+          type: "text",
+          value: displayUserAnswer,
+          onChange: handleInputChange,
+          placeholder: "Type your answer here...",
+          "aria-describedby": explanation ? `explanation-${questionId}` : void 0,
+          className: `
             ${showCorrectAnswer && userAnswer ? isActuallyCorrect ? "border-green-500 focus-visible:ring-green-500" : "border-destructive focus-visible:ring-destructive" : "border-input"}
           `
-    }
-  ), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer && !isActuallyCorrect && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Accepted Answers:"), /* @__PURE__ */ React28__namespace.default.createElement("ul", { className: "list-disc list-inside text-sm text-accent-foreground/80" }, acceptedAnswers.map((ans, idx) => /* @__PURE__ */ React28__namespace.default.createElement("li", { key: idx }, ans))), isCaseSensitive && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "(Case-sensitive)")), explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+        }
+      ),
+      showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        userAnswer && !isActuallyCorrect && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: "Your answer was marked incorrect." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-accent/20 border border-accent rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Accepted Answers:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside text-sm text-accent-foreground/80", children: acceptedAnswers.map((ans, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: ans }, idx)) }),
+          isCaseSensitive && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "(Case-sensitive)" })
+        ] }),
+        explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: "Explanation:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })
+        ] })
+      ] })
+    ] })
+  ] });
 };
 var NumericQuestionUI = ({
   question,
@@ -2083,22 +2059,48 @@ var NumericQuestionUI = ({
       isActuallyCorrect = tolerance !== void 0 && tolerance !== null ? Math.abs(userAnswerNum - correctAnswerValue) <= tolerance : userAnswerNum === correctAnswerValue;
     }
   }
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__namespace.default.createElement(Label, { htmlFor: `numeric-input-${questionId}`, className: "sr-only" }, "Your Answer"), /* @__PURE__ */ React28__namespace.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: `
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `numeric-input-${questionId}`, className: "sr-only", children: "Your Answer" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: `numeric-input-${questionId}`,
+          type: "text",
+          inputMode: "numeric",
+          pattern: "[0-9]*\\.?[0-9]*",
+          value: displayUserAnswer,
+          onChange: handleInputChange,
+          placeholder: "Enter a number",
+          "aria-describedby": explanation ? `explanation-${questionId}` : void 0,
+          className: `
             ${showCorrectAnswer && userAnswer !== null && userAnswer !== "" ? isActuallyCorrect ? "border-green-500 focus-visible:ring-green-500" : "border-destructive focus-visible:ring-destructive" : "border-input"}
           `
-    }
-  ), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 space-y-2" }, userAnswer !== null && userAnswer !== "" && !isActuallyCorrect && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-destructive" }, "Your answer was marked incorrect."), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Correct Answer:"), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-accent-foreground/80" }, correctAnswerValue, tolerance !== void 0 && tolerance !== null && tolerance > 0 && ` (Tolerance: \xB1${tolerance}, Accepted range: ${correctAnswerValue - tolerance} to ${correctAnswerValue + tolerance})`)), explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+        }
+      ),
+      showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        userAnswer !== null && userAnswer !== "" && !isActuallyCorrect && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: "Your answer was marked incorrect." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-accent/20 border border-accent rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Correct Answer:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-accent-foreground/80", children: [
+            correctAnswerValue,
+            tolerance !== void 0 && tolerance !== null && tolerance > 0 && ` (Tolerance: \xB1${tolerance}, Accepted range: ${correctAnswerValue - tolerance} to ${correctAnswerValue + tolerance})`
+          ] })
+        ] }),
+        explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `explanation-${questionId}`, className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: "Explanation:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })
+        ] })
+      ] })
+    ] })
+  ] });
 };
 var FillInTheBlanksQuestionUI = ({
   question,
@@ -2107,8 +2109,8 @@ var FillInTheBlanksQuestionUI = ({
   showCorrectAnswer = false
 }) => {
   const { prompt, segments, answers: correctAnswersMap, points, explanation, id: questionId, isCaseSensitive } = question;
-  const [userInputs, setUserInputs] = React28.useState({});
-  React28.useEffect(() => {
+  const [userInputs, setUserInputs] = React9.useState({});
+  React9.useEffect(() => {
     if (userAnswer && typeof userAnswer === "object" && !Array.isArray(userAnswer)) {
       setUserInputs(userAnswer);
     } else {
@@ -2122,15 +2124,14 @@ var FillInTheBlanksQuestionUI = ({
     }
   }, [segments, userAnswer]);
   const handleInputChange = (blankId, value) => {
-    const newInputs = __spreadProps(__spreadValues({}, userInputs), { [blankId]: value });
+    const newInputs = { ...userInputs, [blankId]: value };
     setUserInputs(newInputs);
     const hasValue = Object.values(newInputs).some((val) => val.trim() !== "");
     onAnswerChange(hasValue ? newInputs : null);
   };
   const getCorrectnessForBlank = (blankId) => {
-    var _a;
     if (!showCorrectAnswer || !userInputs[blankId]) return null;
-    const userAnswerForBlank = (_a = userInputs[blankId]) == null ? void 0 : _a.trim();
+    const userAnswerForBlank = userInputs[blankId]?.trim();
     const correctAnswerDef = correctAnswersMap.find((a) => a.blankId === blankId);
     if (!correctAnswerDef || !userAnswerForBlank) return false;
     const caseSensitive = isCaseSensitive === void 0 ? false : isCaseSensitive;
@@ -2138,49 +2139,78 @@ var FillInTheBlanksQuestionUI = ({
       (accVal) => caseSensitive ? accVal.trim() === userAnswerForBlank : accVal.trim().toLowerCase() === userAnswerForBlank.toLowerCase()
     );
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement(
-        MarkdownRenderer,
-        {
-          key: `text-${index}`,
-          content: segment.content || "",
-          className: "inline"
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base leading-relaxed flex flex-wrap items-center gap-x-1", "aria-labelledby": `question-prompt-${questionId}`, children: segments.map((segment, index) => {
+        if (segment.type === "text") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            MarkdownRenderer,
+            {
+              content: segment.content || "",
+              className: "inline"
+            },
+            `text-${index}`
+          );
         }
-      );
-    }
-    if (segment.type === "blank" && segment.id) {
-      const blankId = segment.id;
-      const isCorrect = getCorrectnessForBlank(blankId);
-      let inputClassName = "inline-block w-auto min-w-[100px] max-w-[200px] h-8 mx-1 align-baseline text-base";
-      if (showCorrectAnswer && ((_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__ */ React28__namespace.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
+        if (segment.type === "blank" && segment.id) {
+          const blankId = segment.id;
+          const isCorrect = getCorrectnessForBlank(blankId);
+          let inputClassName = "inline-block w-auto min-w-[100px] max-w-[200px] h-8 mx-1 align-baseline text-base";
+          if (showCorrectAnswer && userInputs[blankId]?.trim()) {
+            inputClassName += isCorrect ? " border-green-500 focus-visible:ring-green-500" : " border-destructive focus-visible:ring-destructive";
+          } else {
+            inputClassName += " border-input";
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: blankId,
+              type: "text",
+              value: userInputs[blankId] || "",
+              onChange: (e) => handleInputChange(blankId, e.target.value),
+              placeholder: "\u0110i\u1EC1n...",
+              className: inputClassName,
+              "aria-label": `Blank ${index + 1}`,
+              disabled: showCorrectAnswer
+            },
+            blankId
+          );
         }
-      );
-    }
-    return null;
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch chung:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { key: `feedback-${ansDef.blankId}`, className: `p-2 border rounded-md ${isBlankCorrect ? "border-green-500/50 bg-green-500/10" : "border-destructive/50 bg-destructive/10"}` }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-semibold" }, "\xD4 tr\u1ED1ng '", ((_a = segments.find((s) => s.id === ansDef.blankId && s.type === "blank")) == null ? void 0 : _a.id) || ansDef.blankId, "':"), ' B\u1EA1n \u0111\xE3 \u0111i\u1EC1n: "', userAnswerDisplay, '".'), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs" }, "\u0110\xE1p \xE1n ch\u1EA5p nh\u1EADn: ", ansDef.acceptedValues.join(", ")));
-  }))));
+        return null;
+      }) }),
+      showCorrectAnswer && explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Gi\u1EA3i th\xEDch chung:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
+      ] }),
+      showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 space-y-3", children: correctAnswersMap.map((ansDef) => {
+        const isBlankCorrect = getCorrectnessForBlank(ansDef.blankId);
+        const userAnswerDisplay = userInputs[ansDef.blankId] || "Ch\u01B0a tr\u1EA3 l\u1EDDi";
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-2 border rounded-md ${isBlankCorrect ? "border-green-500/50 bg-green-500/10" : "border-destructive/50 bg-destructive/10"}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+              "\xD4 tr\u1ED1ng '",
+              segments.find((s) => s.id === ansDef.blankId && s.type === "blank")?.id || ansDef.blankId,
+              "':"
+            ] }),
+            ' B\u1EA1n \u0111\xE3 \u0111i\u1EC1n: "',
+            userAnswerDisplay,
+            '".'
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs", children: [
+            "\u0110\xE1p \xE1n ch\u1EA5p nh\u1EADn: ",
+            ansDef.acceptedValues.join(", ")
+          ] })
+        ] }, `feedback-${ansDef.blankId}`);
+      }) })
+    ] })
+  ] });
 };
 var buttonVariants = classVarianceAuthority.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",
@@ -2207,16 +2237,16 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React28__namespace.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+var Button = React9__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ React28__namespace.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
-      __spreadValues({
+      {
         className: cn(buttonVariants({ variant, size, className })),
-        ref
-      }, props)
+        ref,
+        ...props
+      }
     );
   }
 );
@@ -2228,9 +2258,9 @@ var SequenceQuestionUI = ({
   showCorrectAnswer = false
 }) => {
   const { prompt, items, points, explanation, id: questionId, correctOrder } = question;
-  const [selectedSequence, setSelectedSequence] = React28.useState([]);
-  const [availableItems, setAvailableItems] = React28.useState([]);
-  React28.useEffect(() => {
+  const [selectedSequence, setSelectedSequence] = React9.useState([]);
+  const [availableItems, setAvailableItems] = React9.useState([]);
+  React9.useEffect(() => {
     const initialUserOrder = Array.isArray(userAnswer) ? userAnswer : [];
     const initialSelected = [];
     const initialAvailable = [...items];
@@ -2271,145 +2301,180 @@ var SequenceQuestionUI = ({
     if (!showCorrectAnswer || !Array.isArray(userAnswer) || userAnswer.length <= index) return null;
     const userItemId = userAnswer[index];
     const correctItemId = correctOrder[index];
-    return userItemId === correctItemId ? /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.CheckCircle, { className: "h-4 w-4 text-green-500 ml-2 flex-shrink-0" }) : /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.XCircle, { className: "h-4 w-4 text-destructive ml-2 flex-shrink-0" });
+    return userItemId === correctItemId ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4 text-green-500 ml-2 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4 text-destructive ml-2 flex-shrink-0" });
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0 space-y-6" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React28__namespace.default.createElement(Label, { className: "font-semibold" }, "S\u1EAFp x\u1EBFp c\xE1c m\u1EE5c sau theo \u0111\xFAng th\u1EE9 t\u1EF1:"), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2" }, availableItems.map((item) => /* @__PURE__ */ React28__namespace.default.createElement(
-    Button,
-    {
-      key: item.id,
-      variant: "outline",
-      onClick: () => handleSelectItem(item),
-      className: "justify-start text-left h-auto py-2 px-3 whitespace-normal",
-      disabled: showCorrectAnswer
-    },
-    /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: item.content })
-  ))), availableItems.length === 0 && selectedSequence.length > 0 && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground" }, 'T\u1EA5t c\u1EA3 c\xE1c m\u1EE5c \u0111\xE3 \u0111\u01B0\u1EE3c ch\u1ECDn. Nh\u1EA5p v\xE0o m\u1EE5c trong "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn" \u0111\u1EC3 b\u1ECF ch\u1ECDn.')), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(Label, { className: "font-semibold" }, "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn:"), /* @__PURE__ */ React28__namespace.default.createElement(Button, { variant: "ghost", size: "sm", onClick: handleResetSequence, disabled: showCorrectAnswer || selectedSequence.length === 0 }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.RotateCcw, { className: "mr-2 h-3.5 w-3.5" }), " \u0110\u1EB7t l\u1EA1i")), selectedSequence.length === 0 ? /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground p-3 border border-dashed rounded-md" }, "Ch\u01B0a ch\u1ECDn m\u1EE5c n\xE0o. Nh\u1EA5p v\xE0o c\xE1c m\u1EE5c \u1EDF tr\xEAn \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u.") : /* @__PURE__ */ React28__namespace.default.createElement("ul", { className: "space-y-2" }, selectedSequence.map((item, index) => /* @__PURE__ */ React28__namespace.default.createElement(
-    "li",
-    {
-      key: item.id,
-      onClick: () => handleRemoveFromSequence(item, index),
-      className: `flex items-center justify-between p-3 border rounded-md whitespace-normal ${showCorrectAnswer ? (userAnswer == null ? void 0 : userAnswer[index]) === correctOrder[index] ? "border-green-500 bg-green-500/10" : "border-destructive bg-destructive/10" : "bg-muted/30 cursor-pointer hover:border-destructive/50"} transition-colors`
-    },
-    /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex-grow flex items-center" }, /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-semibold mr-2" }, index + 1, "."), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: item.content })),
-    showCorrectAnswer ? getFeedbackIcon(index) : /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.XCircle, { className: "h-4 w-4 text-muted-foreground hover:text-destructive flex-shrink-0" })
-  )))), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Th\u1EE9 t\u1EF1 \u0111\xFAng:"), /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("li", { key: itemId }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: item ? item.content : "Kh\xF4ng t\xECm th\u1EA5y m\u1EE5c" }));
-  }))), explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0 space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "font-semibold", children: "S\u1EAFp x\u1EBFp c\xE1c m\u1EE5c sau theo \u0111\xFAng th\u1EE9 t\u1EF1:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2", children: availableItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => handleSelectItem(item),
+            className: "justify-start text-left h-auto py-2 px-3 whitespace-normal",
+            disabled: showCorrectAnswer,
+            children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: item.content })
+          },
+          item.id
+        )) }),
+        availableItems.length === 0 && selectedSequence.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: 'T\u1EA5t c\u1EA3 c\xE1c m\u1EE5c \u0111\xE3 \u0111\u01B0\u1EE3c ch\u1ECDn. Nh\u1EA5p v\xE0o m\u1EE5c trong "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn" \u0111\u1EC3 b\u1ECF ch\u1ECDn.' })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "font-semibold", children: "Th\u1EE9 t\u1EF1 b\u1EA1n \u0111\xE3 ch\u1ECDn:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: handleResetSequence, disabled: showCorrectAnswer || selectedSequence.length === 0, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "mr-2 h-3.5 w-3.5" }),
+            " \u0110\u1EB7t l\u1EA1i"
+          ] })
+        ] }),
+        selectedSequence.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground p-3 border border-dashed rounded-md", children: "Ch\u01B0a ch\u1ECDn m\u1EE5c n\xE0o. Nh\u1EA5p v\xE0o c\xE1c m\u1EE5c \u1EDF tr\xEAn \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: selectedSequence.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            onClick: () => handleRemoveFromSequence(item, index),
+            className: `flex items-center justify-between p-3 border rounded-md whitespace-normal ${showCorrectAnswer ? userAnswer?.[index] === correctOrder[index] ? "border-green-500 bg-green-500/10" : "border-destructive bg-destructive/10" : "bg-muted/30 cursor-pointer hover:border-destructive/50"} transition-colors`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold mr-2", children: [
+                  index + 1,
+                  "."
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: item.content })
+              ] }),
+              showCorrectAnswer ? getFeedbackIcon(index) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4 text-muted-foreground hover:text-destructive flex-shrink-0" })
+            ]
+          },
+          item.id
+        )) })
+      ] }),
+      showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-accent/20 border border-accent rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Th\u1EE9 t\u1EF1 \u0111\xFAng:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-decimal list-inside text-sm text-accent-foreground/80 space-y-1 mt-1", children: correctOrder.map((itemId) => {
+            const item = items.find((i) => i.id === itemId);
+            return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: item ? item.content : "Kh\xF4ng t\xECm th\u1EA5y m\u1EE5c" }) }, itemId);
+          }) })
+        ] }),
+        explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 p-3 bg-muted/30 border border-muted rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: "Gi\u1EA3i th\xEDch:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-muted-foreground" })
+        ] })
+      ] })
+    ] })
+  ] });
 };
 var Select = SelectPrimitive__namespace.Root;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    SelectPrimitive__namespace.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__ */ React28__namespace.createElement(SelectPrimitive__namespace.Icon, { asChild: true }, /* @__PURE__ */ React28__namespace.createElement(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }))
-  );
-});
+var SelectTrigger = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    SelectPrimitive__namespace.ScrollUpButton,
-    __spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React28__namespace.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" })
-  );
-});
+var SelectScrollUpButton = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
+  }
+));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    SelectPrimitive__namespace.ScrollDownButton,
-    __spreadValues({
-      ref,
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React28__namespace.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
-  );
-});
+var SelectScrollDownButton = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  }
+));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
-  return /* @__PURE__ */ React28__namespace.createElement(SelectPrimitive__namespace.Portal, null, /* @__PURE__ */ React28__namespace.createElement(
-    SelectPrimitive__namespace.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__ */ React28__namespace.createElement(SelectScrollUpButton, null),
-    /* @__PURE__ */ React28__namespace.createElement(
-      SelectPrimitive__namespace.Viewport,
-      {
-        className: cn(
-          "p-1",
-          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )
-      },
-      children
+var SelectContent = React9__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
     ),
-    /* @__PURE__ */ React28__namespace.createElement(SelectScrollDownButton, null)
-  ));
-});
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    SelectPrimitive__namespace.Label,
-    __spreadValues({
-      ref,
-      className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)
-    }, props)
-  );
-});
+var SelectLabel = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ...props
+  }
+));
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    SelectPrimitive__namespace.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__ */ React28__namespace.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, /* @__PURE__ */ React28__namespace.createElement(SelectPrimitive__namespace.ItemIndicator, null, /* @__PURE__ */ React28__namespace.createElement(lucideReact.Check, { className: "h-4 w-4" }))),
-    /* @__PURE__ */ React28__namespace.createElement(SelectPrimitive__namespace.ItemText, null, children)
-  );
-});
+var SelectItem = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+    ]
+  }
+));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    SelectPrimitive__namespace.Separator,
-    __spreadValues({
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-muted", className)
-    }, props)
-  );
-});
+var SelectSeparator = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var MatchingQuestionUI = ({
   question,
@@ -2418,16 +2483,16 @@ var MatchingQuestionUI = ({
   showCorrectAnswer = false
 }) => {
   const { prompt, prompts, options: initialOptions, points, explanation, correctAnswerMap, id: questionId } = question;
-  const [currentAnswers, setCurrentAnswers] = React28.useState({});
-  const [shuffledOptions, setShuffledOptions] = React28.useState(initialOptions);
-  React28.useEffect(() => {
+  const [currentAnswers, setCurrentAnswers] = React9.useState({});
+  const [shuffledOptions, setShuffledOptions] = React9.useState(initialOptions);
+  React9.useEffect(() => {
     if (question.shuffleOptions) {
       setShuffledOptions([...initialOptions].sort(() => Math.random() - 0.5));
     } else {
       setShuffledOptions(initialOptions);
     }
   }, [initialOptions, question.shuffleOptions]);
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     if (userAnswer && typeof userAnswer === "object" && !Array.isArray(userAnswer)) {
       setCurrentAnswers(userAnswer);
     } else {
@@ -2437,14 +2502,13 @@ var MatchingQuestionUI = ({
     }
   }, [userAnswer, prompts]);
   const handleSelectChange = (promptId, optionId) => {
-    const newAnswers = __spreadProps(__spreadValues({}, currentAnswers), { [promptId]: optionId });
+    const newAnswers = { ...currentAnswers, [promptId]: optionId };
     setCurrentAnswers(newAnswers);
     const hasSelection = Object.values(newAnswers).some((val) => val && val !== "");
     onAnswerChange(hasSelection ? newAnswers : null);
   };
   const getCorrectOptionIdForPrompt = (promptId) => {
-    var _a;
-    return (_a = correctAnswerMap.find((map) => map.promptId === promptId)) == null ? void 0 : _a.optionId;
+    return correctAnswerMap.find((map) => map.promptId === promptId)?.optionId;
   };
   const getPlainText = (htmlString) => {
     if (!htmlString) return "";
@@ -2455,31 +2519,58 @@ var MatchingQuestionUI = ({
     }
     return htmlString.replace(/<[^>]*>?/gm, "");
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { key: promptItem.id, className: `p-3 border rounded-md ${borderColor} transition-colors bg-background` }, /* @__PURE__ */ React28__namespace.default.createElement(Label, { htmlFor: `select-prompt-${promptItem.id}`, className: "font-medium text-base block mb-2 whitespace-normal" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: promptItem.content })), /* @__PURE__ */ React28__namespace.default.createElement(
-      Select,
-      {
-        value: selectedOptionId,
-        onValueChange: (value) => handleSelectChange(promptItem.id, value),
-        disabled: showCorrectAnswer
-      },
-      /* @__PURE__ */ React28__namespace.default.createElement(SelectTrigger, { id: `select-prompt-${promptItem.id}` }, /* @__PURE__ */ React28__namespace.default.createElement(SelectValue, { placeholder: "Ch\u1ECDn \u0111\xE1p \xE1n..." })),
-      /* @__PURE__ */ React28__namespace.default.createElement(SelectContent, null, shuffledOptions.map((option) => /* @__PURE__ */ React28__namespace.default.createElement(SelectItem, { key: option.id, value: option.id, className: "whitespace-normal" }, getPlainText(option.content))))
-    ), showCorrectAnswer && selectedOptionId && (isSelectionCorrect ? /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.CheckCircle, { className: "h-5 w-5 text-green-500 mt-2 inline-block" }) : /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.XCircle, { className: "h-5 w-5 text-destructive mt-2 inline-block" })), showCorrectAnswer && !selectedOptionId && correctOptionId && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-muted-foreground mt-1" }, "Ch\u01B0a ch\u1ECDn. \u0110\xE1p \xE1n \u0111\xFAng: ", getPlainText((_a = shuffledOptions.find((o) => o.id === correctOptionId)) == null ? void 0 : _a.content)));
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("li", { key: map.promptId }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: `<strong>${getPlainText(promptText) || "N/A"}</strong> gh\xE9p v\u1EDBi <strong>${getPlainText(optionText) || "N/A"}</strong>` }));
-  })))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4", children: prompts.map((promptItem) => {
+        const selectedOptionId = currentAnswers[promptItem.id] || "";
+        const correctOptionId = getCorrectOptionIdForPrompt(promptItem.id);
+        const isSelectionCorrect = showCorrectAnswer && selectedOptionId ? selectedOptionId === correctOptionId : null;
+        let borderColor = "border-muted";
+        if (showCorrectAnswer && selectedOptionId) {
+          borderColor = isSelectionCorrect ? "border-green-500" : "border-destructive";
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-3 border rounded-md ${borderColor} transition-colors bg-background`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `select-prompt-${promptItem.id}`, className: "font-medium text-base block mb-2 whitespace-normal", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: promptItem.content }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Select,
+            {
+              value: selectedOptionId,
+              onValueChange: (value) => handleSelectChange(promptItem.id, value),
+              disabled: showCorrectAnswer,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: `select-prompt-${promptItem.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Ch\u1ECDn \u0111\xE1p \xE1n..." }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: shuffledOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.id, className: "whitespace-normal", children: getPlainText(option.content) }, option.id)) })
+              ]
+            }
+          ),
+          showCorrectAnswer && selectedOptionId && (isSelectionCorrect ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-5 w-5 text-green-500 mt-2 inline-block" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-5 w-5 text-destructive mt-2 inline-block" })),
+          showCorrectAnswer && !selectedOptionId && correctOptionId && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
+            "Ch\u01B0a ch\u1ECDn. \u0110\xE1p \xE1n \u0111\xFAng: ",
+            getPlainText(shuffledOptions.find((o) => o.id === correctOptionId)?.content)
+          ] })
+        ] }, promptItem.id);
+      }) }),
+      showCorrectAnswer && explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Gi\u1EA3i th\xEDch:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
+      ] }),
+      showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-md", children: "\u0110\xE1p \xE1n \u0111\xFAng:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside space-y-1 text-sm", children: correctAnswerMap.map((map) => {
+          const promptText = prompts.find((p) => p.id === map.promptId)?.content;
+          const optionText = initialOptions.find((o) => o.id === map.optionId)?.content;
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: `<strong>${getPlainText(promptText) || "N/A"}</strong> gh\xE9p v\u1EDBi <strong>${getPlainText(optionText) || "N/A"}</strong>` }) }, map.promptId);
+        }) })
+      ] })
+    ] })
+  ] });
 };
 var DragAndDropQuestionUI = ({
   question,
@@ -2488,8 +2579,8 @@ var DragAndDropQuestionUI = ({
   showCorrectAnswer = false
 }) => {
   const { prompt, draggableItems, dropZones, points, explanation, answerMap, id: questionId, backgroundImageUrl } = question;
-  const [currentAnswers, setCurrentAnswers] = React28.useState({});
-  React28.useEffect(() => {
+  const [currentAnswers, setCurrentAnswers] = React9.useState({});
+  React9.useEffect(() => {
     if (userAnswer && typeof userAnswer === "object" && !Array.isArray(userAnswer)) {
       setCurrentAnswers(userAnswer);
     } else {
@@ -2499,41 +2590,70 @@ var DragAndDropQuestionUI = ({
     }
   }, [userAnswer, draggableItems]);
   const handleSelectChange = (draggableItemId, dropZoneId) => {
-    const newAnswers = __spreadProps(__spreadValues({}, currentAnswers), { [draggableItemId]: dropZoneId });
+    const newAnswers = { ...currentAnswers, [draggableItemId]: dropZoneId };
     setCurrentAnswers(newAnswers);
     const hasSelection = Object.values(newAnswers).some((val) => val && val !== "");
     onAnswerChange(hasSelection ? newAnswers : null);
   };
   const getCorrectDropZoneIdForDraggable = (draggableItemId) => {
-    var _a;
-    return (_a = answerMap.find((map) => map.draggableId === draggableItemId)) == null ? void 0 : _a.dropZoneId;
+    return answerMap.find((map) => map.draggableId === draggableItemId)?.dropZoneId;
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0 space-y-4" }, backgroundImageUrl && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mb-4 overflow-hidden rounded-md border" }, /* @__PURE__ */ React28__namespace.default.createElement("img", { src: backgroundImageUrl, alt: question.imageAltText || "Drag and drop background", className: "w-full h-auto object-contain max-h-[300px]", "data-ai-hint": "abstract pattern" })), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { key: item.id, className: itemStyle }, /* @__PURE__ */ React28__namespace.default.createElement(Label, { htmlFor: `select-draggable-${item.id}`, className: "font-medium text-base mb-2 sm:mb-0 sm:mr-4 flex-1" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: item.content })), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex items-center space-x-2 w-full sm:w-auto" }, /* @__PURE__ */ React28__namespace.default.createElement(
-      Select,
-      {
-        value: selectedDropZoneId,
-        onValueChange: (value) => handleSelectChange(item.id, value),
-        disabled: showCorrectAnswer
-      },
-      /* @__PURE__ */ React28__namespace.default.createElement(SelectTrigger, { id: `select-draggable-${item.id}`, className: "w-full sm:min-w-[200px]" }, /* @__PURE__ */ React28__namespace.default.createElement(SelectValue, { placeholder: "Ch\u1ECDn v\u1ECB tr\xED..." })),
-      /* @__PURE__ */ React28__namespace.default.createElement(SelectContent, null, dropZones.map((zone) => /* @__PURE__ */ React28__namespace.default.createElement(SelectItem, { key: zone.id, value: zone.id }, zone.label.replace(/<[^>]*>?/gm, ""))))
-    ), showCorrectAnswer && selectedDropZoneId && (isSelectionCorrect ? /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.CheckCircle, { className: "h-5 w-5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.XCircle, { className: "h-5 w-5 text-destructive flex-shrink-0" }))));
-  })), showCorrectAnswer && explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Gi\u1EA3i th\xEDch:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "font-semibold text-md" }, "\u0110\xE1p \xE1n \u0111\xFAng:"), /* @__PURE__ */ React28__namespace.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((z3) => z3.id === map.dropZoneId)) == null ? void 0 : _b.label;
-    return /* @__PURE__ */ React28__namespace.default.createElement("li", { key: map.draggableId }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: `<strong>${draggableText || "N/A"}</strong> v\xE0o <strong>${dropZoneText || "N/A"}</strong>` }));
-  })))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0 space-y-4", children: [
+      backgroundImageUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: backgroundImageUrl, alt: question.imageAltText || "Drag and drop background", className: "w-full h-auto object-contain max-h-[300px]", "data-ai-hint": "abstract pattern" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "font-semibold", children: "Gh\xE9p c\xE1c m\u1EE5c sau v\xE0o \u0111\xFAng v\u1ECB tr\xED:" }),
+        draggableItems.map((item) => {
+          const selectedDropZoneId = currentAnswers[item.id] || "";
+          const correctDropZoneId = getCorrectDropZoneIdForDraggable(item.id);
+          const isSelectionCorrect = showCorrectAnswer && selectedDropZoneId ? selectedDropZoneId === correctDropZoneId : null;
+          let itemStyle = "flex flex-col sm:flex-row items-start sm:items-center justify-between p-3 border rounded-md transition-colors bg-background";
+          if (showCorrectAnswer && selectedDropZoneId) {
+            itemStyle += isSelectionCorrect ? " border-green-500" : " border-destructive";
+          } else {
+            itemStyle += " border-muted";
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `select-draggable-${item.id}`, className: "font-medium text-base mb-2 sm:mb-0 sm:mr-4 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: item.content }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 w-full sm:w-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Select,
+                {
+                  value: selectedDropZoneId,
+                  onValueChange: (value) => handleSelectChange(item.id, value),
+                  disabled: showCorrectAnswer,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: `select-draggable-${item.id}`, className: "w-full sm:min-w-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Ch\u1ECDn v\u1ECB tr\xED..." }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: dropZones.map((zone) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: zone.id, children: zone.label.replace(/<[^>]*>?/gm, "") }, zone.id)) })
+                  ]
+                }
+              ),
+              showCorrectAnswer && selectedDropZoneId && (isSelectionCorrect ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-5 w-5 text-green-500 flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-5 w-5 text-destructive flex-shrink-0" }))
+            ] })
+          ] }, item.id);
+        })
+      ] }),
+      showCorrectAnswer && explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Gi\u1EA3i th\xEDch:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
+      ] }),
+      showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-md", children: "\u0110\xE1p \xE1n \u0111\xFAng:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside space-y-1 text-sm", children: answerMap.map((map) => {
+          const draggableText = draggableItems.find((d) => d.id === map.draggableId)?.content;
+          const dropZoneText = dropZones.find((z3) => z3.id === map.dropZoneId)?.label;
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: `<strong>${draggableText || "N/A"}</strong> v\xE0o <strong>${dropZoneText || "N/A"}</strong>` }) }, map.draggableId);
+        }) })
+      ] })
+    ] })
+  ] });
 };
 var HotspotQuestionUI = ({
   question,
@@ -2542,8 +2662,8 @@ var HotspotQuestionUI = ({
   showCorrectAnswer = false
 }) => {
   const { prompt, imageUrl, imageAltText, hotspots, points, explanation, correctAnswerIds, id: questionId } = question;
-  const [selectedIds, setSelectedIds] = React28.useState([]);
-  React28.useEffect(() => {
+  const [selectedIds, setSelectedIds] = React9.useState([]);
+  React9.useEffect(() => {
     if (Array.isArray(userAnswer)) {
       setSelectedIds(userAnswer);
     } else {
@@ -2603,32 +2723,54 @@ var HotspotQuestionUI = ({
     tempDiv.innerHTML = htmlString;
     return tempDiv.textContent || tempDiv.innerText || "";
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: prompt })), points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "relative w-full border border-muted rounded-md overflow-hidden", style: { maxWidth: "100%", maxHeight: "500px" } }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 space-y-2" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "font-semibold text-md" }, "Correct Hotspots:"), /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("li", { key: id }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: (hotspot == null ? void 0 : hotspot.description) || (hotspot == null ? void 0 : hotspot.id) || "N/A", className: "inline" }));
-  })))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: prompt }) }),
+      points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full border border-muted rounded-md overflow-hidden", style: { maxWidth: "100%", maxHeight: "500px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: imageAltText || "Hotspot image",
+            className: "block max-w-full max-h-full object-contain",
+            "data-ai-hint": question.imageAltText ? question.imageAltText.split(" ").slice(0, 2).join(" ") : "diagram illustration"
+          }
+        ),
+        hotspots.map((hotspot) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            title: getPlainText(hotspot.description) || `Hotspot ${hotspot.id}`,
+            style: getHotspotStyle(hotspot),
+            onClick: () => handleHotspotClick(hotspot.id),
+            "aria-pressed": selectedIds.includes(hotspot.id),
+            role: "button",
+            tabIndex: showCorrectAnswer ? -1 : 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") handleHotspotClick(hotspot.id);
+            }
+          },
+          hotspot.id
+        ))
+      ] }),
+      showCorrectAnswer && explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: explanation, className: "text-sm text-accent-foreground/80" })
+      ] }),
+      showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-md", children: "Correct Hotspots:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside space-y-1 text-sm", children: (correctAnswerIds || []).map((id) => {
+          const hotspot = hotspots.find((h) => h.id === id);
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: hotspot?.description || hotspot?.id || "N/A", className: "inline" }) }, id);
+        }) })
+      ] })
+    ] })
+  ] });
 };
 var loadScript = (src, async = true) => {
   return new Promise((resolve, reject) => {
@@ -2661,8 +2803,7 @@ var loadScript = (src, async = true) => {
 };
 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") {
+    if (typeof window.Blockly?.Blocks !== "undefined" && typeof window.Blockly?.JavaScript !== "undefined") {
       resolve();
       return;
     }
@@ -2690,7 +2831,6 @@ var loadBlocklyScript = () => {
       }
     ];
     const tryLoadFromCDN = async (cdnIndex) => {
-      var _a2, _b2, _c;
       if (cdnIndex >= cdnOptions.length) {
         throw new Error("All Blockly CDN loading options failed");
       }
@@ -2699,9 +2839,9 @@ var loadBlocklyScript = () => {
         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) {
+        if (BlocklyGlobal.utils?.global?.setPaths) {
           BlocklyGlobal.utils.global.setPaths(cdn.mediaPath);
-        } else if ((_c = BlocklyGlobal.utils) == null ? void 0 : _c.global) {
+        } else if (BlocklyGlobal.utils?.global) {
           BlocklyGlobal.utils.global.blocklyPath = cdn.mediaPath;
           BlocklyGlobal.MEDIA = cdn.mediaPath;
         } else {
@@ -2719,10 +2859,10 @@ var loadBlocklyScript = () => {
   });
 };
 var useBlocklyLoader = () => {
-  const [isLoading, setIsLoading] = React28.useState(true);
-  const [loadError, setLoadError] = React28.useState(null);
-  const [isReady, setIsReady] = React28.useState(false);
-  const attemptLoad = React28.useCallback(() => {
+  const [isLoading, setIsLoading] = React9.useState(true);
+  const [loadError, setLoadError] = React9.useState(null);
+  const [isReady, setIsReady] = React9.useState(false);
+  const attemptLoad = React9.useCallback(() => {
     setLoadError(null);
     setIsReady(false);
     loadBlocklyScript().then(() => {
@@ -2735,32 +2875,31 @@ var useBlocklyLoader = () => {
       setIsReady(false);
     });
   }, []);
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     if (isLoading && !isReady && !loadError) attemptLoad();
   }, [isLoading, isReady, loadError, attemptLoad]);
-  const retry = React28.useCallback(() => {
+  const retry = React9.useCallback(() => {
     setLoadError(null);
     setIsReady(false);
     setIsLoading(true);
   }, []);
   return { isLoading, loadError, isReady, retry };
 };
-var BlocklyProgrammingQuestionUI = React28__namespace.default.forwardRef(({
+var BlocklyProgrammingQuestionUI = React9__namespace.default.forwardRef(({
   question,
   userAnswer,
   showCorrectAnswer = false
 }, ref) => {
-  const blocklyDivRef = React28.useRef(null);
-  const workspaceRef = React28.useRef(null);
-  const [isInitializingComponent, setIsInitializingComponent] = React28.useState(false);
-  const [componentError, setComponentError] = React28.useState(null);
+  const blocklyDivRef = React9.useRef(null);
+  const workspaceRef = React9.useRef(null);
+  const [isInitializingComponent, setIsInitializingComponent] = React9.useState(false);
+  const [componentError, setComponentError] = React9.useState(null);
   const { isLoading: blocklyLoading, loadError: blocklyLoadError, isReady: blocklyReady, retry } = useBlocklyLoader();
-  React28.useImperativeHandle(ref, () => ({
+  React9.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)) {
+        if (!LocalBlockly?.Xml?.workspaceToDom || !LocalBlockly?.Xml?.domToText) {
           console.warn("Blockly.Xml methods not available for XML serialization in getWorkspaceXml.");
           return null;
         }
@@ -2775,11 +2914,10 @@ var BlocklyProgrammingQuestionUI = React28__namespace.default.forwardRef(({
       return null;
     }
   }));
-  const initializeBlocklyWorkspace = React28.useCallback(() => {
-    var _a;
+  const initializeBlocklyWorkspace = React9.useCallback(() => {
     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)) {
+    if (!LocalBlockly?.inject || !LocalBlockly?.Xml || !LocalBlockly?.Events || !LocalBlockly?.Themes) {
       setComponentError("Blockly library not fully loaded.");
       setIsInitializingComponent(false);
       return;
@@ -2811,7 +2949,7 @@ var BlocklyProgrammingQuestionUI = React28__namespace.default.forwardRef(({
       }
     }
     setIsInitializingComponent(true);
-    if ((_a = workspaceRef.current) == null ? void 0 : _a.dispose) {
+    if (workspaceRef.current?.dispose) {
       try {
         workspaceRef.current.dispose();
       } catch (e) {
@@ -2883,13 +3021,12 @@ var BlocklyProgrammingQuestionUI = React28__namespace.default.forwardRef(({
     showCorrectAnswer,
     userAnswer
   ]);
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     if (blocklyReady && blocklyDivRef.current) {
       initializeBlocklyWorkspace();
     }
     return () => {
-      var _a;
-      if ((_a = workspaceRef.current) == null ? void 0 : _a.dispose) {
+      if (workspaceRef.current?.dispose) {
         try {
           workspaceRef.current.dispose();
         } catch (disposeError) {
@@ -2899,14 +3036,14 @@ var BlocklyProgrammingQuestionUI = React28__namespace.default.forwardRef(({
       }
     };
   }, [blocklyReady, question.id, initializeBlocklyWorkspace]);
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     let resizeTimeout;
     const handleResize = () => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
         if (workspaceRef.current && blocklyReady) {
           const LocalBlockly = window.Blockly;
-          if (LocalBlockly == null ? void 0 : LocalBlockly.svgResize) {
+          if (LocalBlockly?.svgResize) {
             LocalBlockly.svgResize(workspaceRef.current);
           }
         }
@@ -2920,64 +3057,91 @@ var BlocklyProgrammingQuestionUI = React28__namespace.default.forwardRef(({
   }, [blocklyReady]);
   const workspaceHeight = showCorrectAnswer ? "300px" : "450px";
   const workspaceContainerId = `blockly-workspace-container-${question.id}`;
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: question.prompt })), question.points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, blocklyLoading && /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-muted-foreground animate-pulse mb-2" }, "Loading Blockly Environment..."), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto" }))
-  ), blocklyLoadError && !blocklyLoading && /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { className: "text-destructive text-center" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "font-semibold text-lg" }, "Failed to load Blockly"), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm mt-2 mb-3" }, blocklyLoadError), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "space-x-2" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.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__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" }))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: question.prompt }) }),
+      question.points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        question.points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      blocklyLoading && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            height: workspaceHeight,
+            width: "100%",
+            borderRadius: "0.375rem",
+            border: "1px solid hsl(var(--border))",
+            backgroundColor: "hsl(var(--background))"
+          },
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground animate-pulse mb-2", children: "Loading Blockly Environment..." }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto" })
+          ] })
+        }
+      ),
+      blocklyLoadError && !blocklyLoading && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            height: workspaceHeight,
+            width: "100%",
+            borderRadius: "0.375rem",
+            border: "1px solid hsl(var(--destructive))",
+            backgroundColor: "hsl(var(--card))"
+          },
+          className: "flex items-center justify-center p-4",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-destructive text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-lg", children: "Failed to load Blockly" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2 mb-3", children: blocklyLoadError }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-x-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: retry,
+                  className: "px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors text-sm",
+                  children: "Try Again"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => window.location.reload(),
+                  className: "px-4 py-2 bg-destructive text-destructive-foreground rounded hover:bg-destructive/90 transition-colors text-sm",
+                  children: "Refresh Page"
+                }
+              )
+            ] })
+          ] })
+        }
+      ),
+      !blocklyLoading && !blocklyLoadError && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: workspaceContainerId,
+          ref: blocklyDivRef,
+          style: {
+            height: workspaceHeight,
+            width: "100%",
+            borderRadius: "0.375rem",
+            border: `1px solid ${componentError ? "hsl(var(--destructive))" : "hsl(var(--border))"}`,
+            backgroundColor: "hsl(var(--card))",
+            position: "relative",
+            userSelect: "none",
+            overflow: "hidden"
+          },
+          "aria-label": `Blockly programming workspace for question: ${question.prompt}`
+        }
+      ),
+      showCorrectAnswer && question.explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" })
+      ] })
+    ] })
+  ] });
 });
 BlocklyProgrammingQuestionUI.displayName = "BlocklyProgrammingQuestionUI";
 var SCRATCH_JS_ENGINE_LAYOUT_PATH = "/static/scratch-blocks/js/blockly_compressed_vertical.js";
@@ -3047,18 +3211,17 @@ var loadScript2 = (src) => {
   loadedScriptPromises.set(fullSrc, promise);
   return promise;
 };
-var ScratchProgrammingQuestionUI = React28.forwardRef(({
+var ScratchProgrammingQuestionUI = React9.forwardRef(({
   question,
   userAnswer,
   showCorrectAnswer = false
 }, ref) => {
-  const blocklyDivRef = React28.useRef(null);
-  const workspaceRef = React28.useRef(null);
-  const [isBlocklyReady, setIsBlocklyReady] = React28.useState(false);
-  const [componentError, setComponentError] = React28.useState(null);
-  const [isLoadingScripts, setIsLoadingScripts] = React28.useState(true);
-  const attemptLoadScripts = React28.useCallback(async () => {
-    var _a, _b, _c, _d;
+  const blocklyDivRef = React9.useRef(null);
+  const workspaceRef = React9.useRef(null);
+  const [isBlocklyReady, setIsBlocklyReady] = React9.useState(false);
+  const [componentError, setComponentError] = React9.useState(null);
+  const [isLoadingScripts, setIsLoadingScripts] = React9.useState(true);
+  const attemptLoadScripts = React9.useCallback(async () => {
     setIsLoadingScripts(true);
     setComponentError(null);
     console.log("ScratchUI: Starting script loading sequence...");
@@ -3069,19 +3232,19 @@ var ScratchProgrammingQuestionUI = React28.forwardRef(({
       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: After engine/layout load: Blockly defined: ${!!BlocklyGlobalEngine}, Blockly.Blocks defined: ${!!BlocklyGlobalEngine?.Blocks}, Blockly.Msg defined: ${!!BlocklyGlobalEngine?.Msg}, Blockly.ScratchMsgs defined: ${!!BlocklyGlobalEngine?.ScratchMsgs}`);
       console.log("ScratchUI: Attempting to load Messages:", SCRATCH_JS_MSG_EN_PATH);
       await loadScript2(SCRATCH_JS_MSG_EN_PATH);
       let BlocklyGlobalAfterMsg = window.Blockly;
       if (!BlocklyGlobalAfterMsg) throw new Error("Blockly global disappeared after loading message script.");
-      console.log(`ScratchUI: After en.js load: Blockly defined: ${!!BlocklyGlobalAfterMsg}, Blockly.Msg defined: ${!!(BlocklyGlobalAfterMsg == 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}`);
+      console.log(`ScratchUI: After en.js load: Blockly defined: ${!!BlocklyGlobalAfterMsg}, Blockly.Msg defined: ${!!BlocklyGlobalAfterMsg?.Msg}, Keys in Blockly.Msg: ${BlocklyGlobalAfterMsg?.Msg ? Object.keys(BlocklyGlobalAfterMsg.Msg).length : "N/A"}. Sample Blockly.Msg.LOGIC_HUE: ${BlocklyGlobalAfterMsg?.Msg?.LOGIC_HUE}`);
       if (!BlocklyGlobalAfterMsg.Msg || Object.keys(BlocklyGlobalAfterMsg.Msg).length === 0) {
         console.warn("ScratchUI: Blockly.Msg appears unpopulated or empty. Checking if Blockly.ScratchMsgs.addLocaleData can be used...");
         if (BlocklyGlobalAfterMsg.ScratchMsgs && typeof BlocklyGlobalAfterMsg.ScratchMsgs.addLocaleData === "function") {
           console.log("ScratchUI: Blockly.ScratchMsgs.addLocaleData is available. Attempting to call Blockly.ScratchMsgs.addLocaleData('en').");
           BlocklyGlobalAfterMsg.ScratchMsgs.addLocaleData("en");
           BlocklyGlobalAfterMsg = window.Blockly;
-          console.log(`ScratchUI: After attempting addLocaleData('en'): Keys in Blockly.Msg: ${(BlocklyGlobalAfterMsg == 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}`);
+          console.log(`ScratchUI: After attempting addLocaleData('en'): Keys in Blockly.Msg: ${BlocklyGlobalAfterMsg?.Msg ? Object.keys(BlocklyGlobalAfterMsg.Msg).length : "N/A"}. Sample Blockly.Msg.LOGIC_HUE: ${BlocklyGlobalAfterMsg?.Msg?.LOGIC_HUE}`);
           if (!BlocklyGlobalAfterMsg.Msg || Object.keys(BlocklyGlobalAfterMsg.Msg).length === 0) {
             throw new Error("Blockly.Msg still empty after calling addLocaleData. Message loading failed critically.");
           }
@@ -3095,8 +3258,8 @@ var ScratchProgrammingQuestionUI = React28.forwardRef(({
       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") {
+      console.log(`ScratchUI: After block definitions load: Blockly.Blocks defined: ${!!BlocklyGlobalBlocks.Blocks}. Keys: ${BlocklyGlobalBlocks.Blocks ? Object.keys(BlocklyGlobalBlocks.Blocks).slice(0, 10).join(", ") + "..." : "N/A"}. Essential block motion_movesteps defined: ${!!BlocklyGlobalBlocks.Blocks?.motion_movesteps}`);
+      if (typeof BlocklyGlobalBlocks.Blocks?.motion_movesteps === "undefined") {
         throw new Error(`Essential Scratch blocks (e.g., motion_movesteps) not found after loading block definitions. Available blocks: ${Object.keys(BlocklyGlobalBlocks.Blocks || {}).join(", ")}`);
       }
       setIsBlocklyReady(true);
@@ -3109,13 +3272,13 @@ var ScratchProgrammingQuestionUI = React28.forwardRef(({
       setIsLoadingScripts(false);
     }
   }, []);
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     attemptLoadScripts();
   }, [attemptLoadScripts]);
-  React28.useImperativeHandle(ref, () => ({
+  React9.useImperativeHandle(ref, () => ({
     getWorkspaceXml: () => {
       const LocalBlockly = window.Blockly;
-      if (workspaceRef.current && (LocalBlockly == null ? void 0 : LocalBlockly.Xml)) {
+      if (workspaceRef.current && LocalBlockly?.Xml) {
         try {
           const xml = LocalBlockly.Xml.workspaceToDom(workspaceRef.current);
           return LocalBlockly.Xml.domToText(xml);
@@ -3127,8 +3290,7 @@ var ScratchProgrammingQuestionUI = React28.forwardRef(({
       return null;
     }
   }));
-  const initializeWorkspace = React28.useCallback(() => {
-    var _a, _b;
+  const initializeWorkspace = React9.useCallback(() => {
     const LocalBlockly = window.Blockly;
     if (!isBlocklyReady || !blocklyDivRef.current || !LocalBlockly) {
       console.warn("ScratchUI: Conditions not met for workspace initialization. isBlocklyReady:", isBlocklyReady, "blocklyDivRef.current:", !!blocklyDivRef.current, "LocalBlockly:", !!LocalBlockly);
@@ -3143,7 +3305,7 @@ var ScratchProgrammingQuestionUI = React28.forwardRef(({
       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") {
+    if (typeof LocalBlockly.Blocks?.motion_movesteps === "undefined" || typeof LocalBlockly.Blocks?.event_whenflagclicked === "undefined") {
       const availableBlocks = Object.keys(LocalBlockly.Blocks || {}).join(", ");
       setComponentError(`ScratchUI: Essential Scratch block definitions (e.g., motion_movesteps, event_whenflagclicked) are missing before injection. Available blocks: ${availableBlocks}`);
       return;
@@ -3231,13 +3393,13 @@ var ScratchProgrammingQuestionUI = React28.forwardRef(({
       setComponentError(`ScratchUI: Workspace initialization failed: ${e.message || String(e)}. Check console for details. Toolbox used: ${question.toolboxDefinition ? "Custom" : "Default Simplified"}.`);
     }
   }, [question, showCorrectAnswer, userAnswer, isBlocklyReady]);
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     if (isBlocklyReady) {
       initializeWorkspace();
     }
     const handleResize = () => {
       const LocalBlocklyResize = window.Blockly;
-      if (workspaceRef.current && (LocalBlocklyResize == null ? void 0 : LocalBlocklyResize.svgResize)) {
+      if (workspaceRef.current && LocalBlocklyResize?.svgResize) {
         LocalBlocklyResize.svgResize(workspaceRef.current);
       }
     };
@@ -3258,75 +3420,106 @@ var ScratchProgrammingQuestionUI = React28.forwardRef(({
   }, [isBlocklyReady, initializeWorkspace]);
   const workspaceHeight = showCorrectAnswer ? "300px" : "450px";
   if (isLoadingScripts) {
-    return /* @__PURE__ */ React28__namespace.default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto mb-2" }), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-muted-foreground" }, "Loading Scratch Assets...")));
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-4 border-muted border-t-primary rounded-full animate-spin mx-auto mb-2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Loading Scratch Assets..." })
+    ] }) });
   }
   if (componentError) {
-    return /* @__PURE__ */ React28__namespace.default.createElement("div", { style: { height: workspaceHeight, width: "100%", color: "hsl(var(--destructive))", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--destructive))", borderRadius: "0.375rem", padding: "1rem", backgroundColor: "hsl(var(--card))" } }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "font-semibold text-lg mb-2" }, "Failed to load Scratch Workspace."), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground mb-3 text-center" }, componentError), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-muted-foreground mb-4 text-center" }, "Please ensure all Scratch/Blockly JavaScript files are correctly copied to your", /* @__PURE__ */ React28__namespace.default.createElement("code", null, "public/static/scratch-blocks/js"), " directory. Check browser console for more details.", /* @__PURE__ */ React28__namespace.default.createElement("br", null), /* @__PURE__ */ React28__namespace.default.createElement("strong", null, "CRITICAL: Ensure you have copied the CSS files from ", /* @__PURE__ */ React28__namespace.default.createElement("code", null, "node_modules/scratch-blocks/css/"), " (e.g., ", /* @__PURE__ */ React28__namespace.default.createElement("code", null, "vertical.css"), ") to ", /* @__PURE__ */ React28__namespace.default.createElement("code", null, "public/static/scratch-blocks/css/"), " and linked it in your main layout. Without CSS, blocks will not render correctly.")), /* @__PURE__ */ React28__namespace.default.createElement(Button, { onClick: attemptLoadScripts, variant: "outline" }, "Try Reloading Scripts"));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: workspaceHeight, width: "100%", color: "hsl(var(--destructive))", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--destructive))", borderRadius: "0.375rem", padding: "1rem", backgroundColor: "hsl(var(--card))" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-lg mb-2", children: "Failed to load Scratch Workspace." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-3 text-center", children: componentError }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mb-4 text-center", children: [
+        "Please ensure all Scratch/Blockly JavaScript files are correctly copied to your",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "public/static/scratch-blocks/js" }),
+        " directory. Check browser console for more details.",
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+          "CRITICAL: Ensure you have copied the CSS files from ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { children: "node_modules/scratch-blocks/css/" }),
+          " (e.g., ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { children: "vertical.css" }),
+          ") to ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { children: "public/static/scratch-blocks/css/" }),
+          " and linked it in your main layout. Without CSS, blocks will not render correctly."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: attemptLoadScripts, variant: "outline", children: "Try Reloading Scripts" })
+    ] });
   }
   if (!isBlocklyReady && !isLoadingScripts) {
-    return /* @__PURE__ */ React28__namespace.default.createElement("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" } }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-muted-foreground" }, "Scratch environment did not initialize (Blockly not ready). Check console for script loading errors."));
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: workspaceHeight, width: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid hsl(var(--border))", borderRadius: "0.375rem", backgroundColor: "hsl(var(--background))" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Scratch environment did not initialize (Blockly not ready). Check console for script loading errors." }) });
   }
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, question.prompt), question.points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-accent-foreground/80" }, question.explanation))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: question.prompt }),
+      question.points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        question.points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: blocklyDivRef,
+          style: {
+            height: workspaceHeight,
+            width: "100%",
+            borderRadius: "0.375rem",
+            backgroundColor: "hsl(var(--card))",
+            position: "relative",
+            userSelect: "none",
+            overflow: "hidden",
+            display: isLoadingScripts || componentError || !isBlocklyReady ? "none" : "block"
+          },
+          "aria-label": `Scratch programming workspace for question: ${question.prompt}`
+        }
+      ),
+      showCorrectAnswer && question.explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-accent-foreground/80", children: question.explanation })
+      ] })
+    ] })
+  ] });
 });
 ScratchProgrammingQuestionUI.displayName = "ScratchProgrammingQuestionUI";
 var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    TabsPrimitive__namespace.List,
-    __spreadValues({
-      ref,
-      className: cn(
-        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-        className
-      )
-    }, props)
-  );
-});
+var TabsList = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    TabsPrimitive__namespace.Trigger,
-    __spreadValues({
-      ref,
-      className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-        className
-      )
-    }, props)
-  );
-});
+var TabsTrigger = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    TabsPrimitive__namespace.Content,
-    __spreadValues({
-      ref,
-      className: cn(
-        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        className
-      )
-    }, props)
-  );
-});
+var TabsContent = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
 var TOAST_LIMIT = 1;
 var TOAST_REMOVE_DELAY = 1e6;
@@ -3352,15 +3545,17 @@ var addToRemoveQueue = (toastId) => {
 var reducer = (state, action) => {
   switch (action.type) {
     case "ADD_TOAST":
-      return __spreadProps(__spreadValues({}, state), {
+      return {
+        ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
-      });
+      };
     case "UPDATE_TOAST":
-      return __spreadProps(__spreadValues({}, state), {
+      return {
+        ...state,
         toasts: state.toasts.map(
-          (t) => t.id === action.toast.id ? __spreadValues(__spreadValues({}, t), action.toast) : t
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
         )
-      });
+      };
     case "DISMISS_TOAST": {
       const { toastId } = action;
       if (toastId) {
@@ -3370,23 +3565,27 @@ var reducer = (state, action) => {
           addToRemoveQueue(toast2.id);
         });
       }
-      return __spreadProps(__spreadValues({}, state), {
+      return {
+        ...state,
         toasts: state.toasts.map(
-          (t) => t.id === toastId || toastId === void 0 ? __spreadProps(__spreadValues({}, t), {
+          (t) => t.id === toastId || toastId === void 0 ? {
+            ...t,
             open: false
-          }) : t
+          } : t
         )
-      });
+      };
     }
     case "REMOVE_TOAST":
       if (action.toastId === void 0) {
-        return __spreadProps(__spreadValues({}, state), {
+        return {
+          ...state,
           toasts: []
-        });
+        };
       }
-      return __spreadProps(__spreadValues({}, state), {
+      return {
+        ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId)
-      });
+      };
   }
 };
 var listeners = [];
@@ -3397,23 +3596,23 @@ function dispatch(action) {
     listener(memoryState);
   });
 }
-function toast(_a) {
-  var props = __objRest(_a, []);
+function toast({ ...props }) {
   const id = genId();
   const update = (props2) => dispatch({
     type: "UPDATE_TOAST",
-    toast: __spreadProps(__spreadValues({}, props2), { id })
+    toast: { ...props2, id }
   });
   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
   dispatch({
     type: "ADD_TOAST",
-    toast: __spreadProps(__spreadValues({}, props), {
+    toast: {
+      ...props,
       id,
       open: true,
       onOpenChange: (open) => {
         if (!open) dismiss();
       }
-    })
+    }
   });
   return {
     id,
@@ -3422,8 +3621,8 @@ function toast(_a) {
   };
 }
 function useToast() {
-  const [state, setState] = React28__namespace.useState(memoryState);
-  React28__namespace.useEffect(() => {
+  const [state, setState] = React9__namespace.useState(memoryState);
+  React9__namespace.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -3432,13 +3631,12 @@ function useToast() {
       }
     };
   }, [state]);
-  return __spreadProps(__spreadValues({}, state), {
+  return {
+    ...state,
     toast,
     dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
-  });
+  };
 }
-
-// src/react-ui/components/ui/CodingQuestionUI.tsx
 var languageMap = {
   cpp: langCpp.cpp(),
   javascript: langJavascript.javascript({ typescript: true }),
@@ -3455,15 +3653,15 @@ var CodingQuestionUI = ({
   userAnswer,
   showCorrectAnswer = false
 }) => {
-  const [code, setCode] = React28.useState("");
-  const [isRunningTests, setIsRunningTests] = React28.useState(false);
-  const [testResults, setTestResults] = React28.useState([]);
+  const [code, setCode] = React9.useState("");
+  const [isRunningTests, setIsRunningTests] = React9.useState(false);
+  const [testResults, setTestResults] = React9.useState([]);
   const { toast: toast2 } = useToast();
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     const initialCode = typeof userAnswer === "string" ? userAnswer : question.functionSignature || "";
     setCode(initialCode);
   }, [question.id, userAnswer, question.functionSignature]);
-  const handleCodeChange = React28.useCallback((value) => {
+  const handleCodeChange = React9.useCallback((value) => {
     setCode(value);
     onAnswerChange(value);
   }, [onAnswerChange]);
@@ -3485,28 +3683,67 @@ var CodingQuestionUI = ({
     }
   };
   const langExtension = languageMap[question.codingLanguage];
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full border-none shadow-none" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, { className: "p-0 pb-4" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl mb-1 font-body" }, /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: question.prompt })), question.points && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-sm text-muted-foreground" }, "Points: ", question.points)), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "p-0 space-y-4" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "font-mono text-sm border rounded-md overflow-hidden" }, /* @__PURE__ */ React28__namespace.default.createElement(
-    CodeMirror__default.default,
-    {
-      value: code,
-      height: "300px",
-      extensions: [langExtension],
-      onChange: handleCodeChange,
-      readOnly: showCorrectAnswer,
-      theme: "dark"
-    }
-  )), !showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement(Button, { onClick: handleRunPublicTests, disabled: isRunningTests }, isRunningTests ? /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Play, { className: "mr-2 h-4 w-4" }), isRunningTests ? "Running..." : "Run Public Tests"), /* @__PURE__ */ React28__namespace.default.createElement(Tabs, { defaultValue: "tests", className: "w-full" }, /* @__PURE__ */ React28__namespace.default.createElement(TabsList, null, /* @__PURE__ */ React28__namespace.default.createElement(TabsTrigger, { value: "tests" }, "Test Cases"), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement(TabsTrigger, { value: "solution" }, "Solution")), /* @__PURE__ */ React28__namespace.default.createElement(TabsContent, { value: "tests" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "space-y-2 p-2 border rounded-md min-h-[100px]" }, testResults.length > 0 ? testResults.map((result, index) => /* @__PURE__ */ React28__namespace.default.createElement("div", { key: result.testCaseId, className: "flex items-center text-sm" }, result.passed ? /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }) : /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.XCircle, { className: "h-4 w-4 text-destructive mr-2" }), /* @__PURE__ */ React28__namespace.default.createElement("span", null, "Test Case #", index + 1, ": ", result.passed ? "Passed" : "Failed"), !result.passed && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-muted-foreground ml-2" }, "- ", result.reasoning))) : /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground" }, showCorrectAnswer ? "Final results are shown in the quiz summary." : "Click 'Run Public Tests' to see results."))), showCorrectAnswer && /* @__PURE__ */ React28__namespace.default.createElement(TabsContent, { value: "solution" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "font-mono text-sm border rounded-md overflow-hidden" }, /* @__PURE__ */ React28__namespace.default.createElement(
-    CodeMirror__default.default,
-    {
-      value: question.solutionCode,
-      height: "300px",
-      extensions: [langExtension],
-      readOnly: true,
-      theme: "dark"
-    }
-  )))), showCorrectAnswer && question.explanation && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm font-semibold text-accent-foreground" }, "Explanation:"), /* @__PURE__ */ React28__namespace.default.createElement(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" }))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full border-none shadow-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "p-0 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-xl mb-1 font-body", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: question.prompt }) }),
+      question.points && /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { className: "text-sm text-muted-foreground", children: [
+        "Points: ",
+        question.points
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-sm border rounded-md overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        CodeMirror__default.default,
+        {
+          value: code,
+          height: "300px",
+          extensions: [langExtension],
+          onChange: handleCodeChange,
+          readOnly: showCorrectAnswer,
+          theme: "dark"
+        }
+      ) }),
+      !showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleRunPublicTests, disabled: isRunningTests, children: [
+        isRunningTests ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "mr-2 h-4 w-4" }),
+        isRunningTests ? "Running..." : "Run Public Tests"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: "tests", className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tests", children: "Test Cases" }),
+          showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "solution", children: "Solution" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "tests", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 p-2 border rounded-md min-h-[100px]", children: testResults.length > 0 ? testResults.map((result, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
+          result.passed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4 text-green-500 mr-2" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4 text-destructive mr-2" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Test Case #",
+            index + 1,
+            ": ",
+            result.passed ? "Passed" : "Failed"
+          ] }),
+          !result.passed && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground ml-2", children: [
+            "- ",
+            result.reasoning
+          ] })
+        ] }, result.testCaseId)) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: showCorrectAnswer ? "Final results are shown in the quiz summary." : "Click 'Run Public Tests' to see results." }) }) }),
+        showCorrectAnswer && /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "solution", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-sm border rounded-md overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CodeMirror__default.default,
+          {
+            value: question.solutionCode,
+            height: "300px",
+            extensions: [langExtension],
+            readOnly: true,
+            theme: "dark"
+          }
+        ) }) })
+      ] }),
+      showCorrectAnswer && question.explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-accent/20 border border-accent rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-accent-foreground", children: "Explanation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownRenderer, { content: question.explanation, className: "text-sm text-accent-foreground/80" })
+      ] })
+    ] })
+  ] });
 };
-var QuestionRenderer = React28__namespace.default.forwardRef(({
+var QuestionRenderer = React9__namespace.default.forwardRef(({
   question,
   onAnswerChange,
   userAnswer,
@@ -3521,131 +3758,125 @@ var QuestionRenderer = React28__namespace.default.forwardRef(({
   };
   switch (question.questionType) {
     case "multiple_choice":
-      return /* @__PURE__ */ React28__namespace.default.createElement(MultipleChoiceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(MultipleChoiceQuestionUI, { ...commonProps, question });
     case "true_false":
-      return /* @__PURE__ */ React28__namespace.default.createElement(TrueFalseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(TrueFalseQuestionUI, { ...commonProps, question });
     case "multiple_response":
-      return /* @__PURE__ */ React28__namespace.default.createElement(MultipleResponseQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(MultipleResponseQuestionUI, { ...commonProps, question });
     case "short_answer":
-      return /* @__PURE__ */ React28__namespace.default.createElement(ShortAnswerQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(ShortAnswerQuestionUI, { ...commonProps, question });
     case "numeric":
-      return /* @__PURE__ */ React28__namespace.default.createElement(NumericQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(NumericQuestionUI, { ...commonProps, question });
     case "fill_in_the_blanks":
-      return /* @__PURE__ */ React28__namespace.default.createElement(FillInTheBlanksQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(FillInTheBlanksQuestionUI, { ...commonProps, question });
     case "sequence":
-      return /* @__PURE__ */ React28__namespace.default.createElement(SequenceQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(SequenceQuestionUI, { ...commonProps, question });
     case "matching":
-      return /* @__PURE__ */ React28__namespace.default.createElement(MatchingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(MatchingQuestionUI, { ...commonProps, question });
     case "drag_and_drop":
-      return /* @__PURE__ */ React28__namespace.default.createElement(DragAndDropQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(DragAndDropQuestionUI, { ...commonProps, question });
     case "hotspot":
-      return /* @__PURE__ */ React28__namespace.default.createElement(HotspotQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(HotspotQuestionUI, { ...commonProps, question });
     case "blockly_programming":
-      return /* @__PURE__ */ React28__namespace.default.createElement(BlocklyProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
+      return /* @__PURE__ */ jsxRuntime.jsx(BlocklyProgrammingQuestionUI, { ...commonProps, question, ref });
     case "scratch_programming":
-      return /* @__PURE__ */ React28__namespace.default.createElement(ScratchProgrammingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question, ref }));
+      return /* @__PURE__ */ jsxRuntime.jsx(ScratchProgrammingQuestionUI, { ...commonProps, question, ref });
     case "coding":
-      return /* @__PURE__ */ React28__namespace.default.createElement(CodingQuestionUI, __spreadProps(__spreadValues({}, commonProps), { question }));
+      return /* @__PURE__ */ jsxRuntime.jsx(CodingQuestionUI, { ...commonProps, question });
     default:
-      return /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "p-4 border border-destructive bg-destructive/10 rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "font-semibold text-destructive" }, t("unsupportedQuestionType")), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground" }, t("unsupportedQuestionTypeDescription")), /* @__PURE__ */ React28__namespace.default.createElement("pre", { className: "mt-2 p-2 bg-muted rounded text-xs font-code overflow-x-auto" }, JSON.stringify(question, null, 2)));
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border border-destructive bg-destructive/10 rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-destructive", children: t("unsupportedQuestionType") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t("unsupportedQuestionTypeDescription") }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 p-2 bg-muted rounded text-xs font-code overflow-x-auto", children: JSON.stringify(question, null, 2) })
+      ] });
   }
 });
 QuestionRenderer.displayName = "QuestionRenderer";
-var Progress = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    ProgressPrimitive__namespace.Root,
-    __spreadValues({
-      ref,
-      className: cn(
-        "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-        className
-      )
-    }, props),
-    /* @__PURE__ */ React28__namespace.createElement(
+var Progress = React9__namespace.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ProgressPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
       ProgressPrimitive__namespace.Indicator,
       {
         className: "h-full w-full flex-1 bg-primary transition-all",
         style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
     )
-  );
-});
+  }
+));
 Progress.displayName = ProgressPrimitive__namespace.Root.displayName;
 var Accordion = AccordionPrimitive__namespace.Root;
-var AccordionItem = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    AccordionPrimitive__namespace.Item,
-    __spreadValues({
-      ref,
-      className: cn("border-b", className)
-    }, props)
-  );
-});
+var AccordionItem = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn("border-b", className),
+    ...props
+  }
+));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React28__namespace.createElement(AccordionPrimitive__namespace.Header, { className: "flex" }, /* @__PURE__ */ React28__namespace.createElement(
-    AccordionPrimitive__namespace.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__ */ React28__namespace.createElement(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
-  ));
-});
+var AccordionTrigger = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  AccordionPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+    ]
+  }
+) }));
 AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
-var AccordionContent = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    AccordionPrimitive__namespace.Content,
-    __spreadValues({
-      ref,
-      className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    }, props),
-    /* @__PURE__ */ React28__namespace.createElement("div", { className: cn("pb-4 pt-0", className) }, children)
-  );
-});
+var AccordionContent = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pb-4 pt-0", className), children })
+  }
+));
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
-var ScrollArea = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    ScrollAreaPrimitive__namespace.Root,
-    __spreadValues({
-      ref,
-      className: cn("relative overflow-hidden", className)
-    }, props),
-    /* @__PURE__ */ React28__namespace.createElement(ScrollAreaPrimitive__namespace.Viewport, { className: "h-full w-full rounded-[inherit]" }, children),
-    /* @__PURE__ */ React28__namespace.createElement(ScrollBar, null),
-    /* @__PURE__ */ React28__namespace.createElement(ScrollAreaPrimitive__namespace.Corner, null)
-  );
-});
+var ScrollArea = React9__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ScrollAreaPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+    ]
+  }
+));
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React28__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
-  return /* @__PURE__ */ React28__namespace.createElement(
-    ScrollAreaPrimitive__namespace.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__ */ React28__namespace.createElement(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
-  );
-});
+var ScrollBar = React9__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
-
-// src/react-ui/components/ui/QuizResult.tsx
 var QuizResult = ({
   result,
   quizTitle,
@@ -3654,7 +3885,6 @@ var QuizResult = ({
   showReviewButton = false,
   isReviewLoading = false
 }) => {
-  var _a, _b, _c, _d;
   const { t } = reactI18next.useTranslation();
   const getAnswerDisplay = (answer) => {
     if (answer === null || answer === void 0) return t("practiceFlow.results.notAnswered");
@@ -3673,39 +3903,165 @@ var QuizResult = ({
     }
     return String(answer);
   };
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, null, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-3xl font-headline text-center" }, t("practiceFlow.results.title", { quizTitle })), /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, { className: "text-center text-lg" }, t("practiceFlow.results.description"))), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "space-y-6" }, /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "bg-secondary/50" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, null, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-xl flex items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.BarChart2, { className: "mr-2 h-5 w-5 text-primary" }), t("practiceFlow.results.overallScore"))), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center" }, /* @__PURE__ */ React28__namespace.default.createElement("div", null, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.score, " / ", result.maxScore), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground" }, t("practiceFlow.results.points"))), /* @__PURE__ */ React28__namespace.default.createElement("div", null, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-3xl font-bold text-primary" }, result.percentage.toFixed(2), "%"), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground" }, t("practiceFlow.results.percentage"))), /* @__PURE__ */ React28__namespace.default.createElement("div", null, result.passed !== void 0 && (result.passed ? /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex flex-col items-center text-green-600" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.CheckCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xl font-semibold mt-1" }, t("practiceFlow.results.passed"))) : /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex flex-col items-center text-destructive" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.XCircle, { className: "h-10 w-10" }), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xl font-semibold mt-1" }, t("practiceFlow.results.failed"))))))), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Clock, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React28__namespace.default.createElement("span", null, t("practiceFlow.results.timeSpent")), /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-semibold" }, (_b = (_a = result.totalTimeSpentSeconds) == null ? void 0 : _a.toFixed(0)) != null ? _b : "N/A", " ", t("practiceFlow.results.timeUnit"))), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Percent, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ React28__namespace.default.createElement("span", null, t("practiceFlow.results.avgTimePerQuestion")), /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-semibold" }, (_d = (_c = result.averageTimePerQuestionSeconds) == null ? void 0 : _c.toFixed(1)) != null ? _d : "N/A", " ", t("practiceFlow.results.timeUnit")))), result.scormStatus && result.scormStatus !== "idle" && result.scormStatus !== "no_api" && /* @__PURE__ */ React28__namespace.default.createElement(Card, null, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, null, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-lg" }, "SCORM Sync Status")), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, null, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: `flex items-center ${result.scormStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.scormStatus === "error" && /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-semibold ml-1" }, result.scormStatus)), result.scormError && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.scormError))), result.webhookStatus && result.webhookStatus !== "idle" && /* @__PURE__ */ React28__namespace.default.createElement(Card, null, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, null, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-lg" }, "Webhook Sync Status")), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, null, /* @__PURE__ */ React28__namespace.default.createElement("p", { className: `flex items-center ${result.webhookStatus === "error" ? "text-destructive" : "text-muted-foreground"}` }, result.webhookStatus === "error" && /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.AlertTriangle, { className: "mr-2 h-4 w-4" }), "Status: ", /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-semibold ml-1" }, result.webhookStatus)), result.webhookError && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-destructive mt-1" }, "Details: ", result.webhookError))), /* @__PURE__ */ React28__namespace.default.createElement(Accordion, { type: "single", collapsible: true, className: "w-full" }, /* @__PURE__ */ React28__namespace.default.createElement(AccordionItem, { value: "question-breakdown" }, /* @__PURE__ */ React28__namespace.default.createElement(AccordionTrigger, { className: "text-lg font-semibold" }, t("practiceFlow.results.questionBreakdown")), /* @__PURE__ */ React28__namespace.default.createElement(AccordionContent, null, /* @__PURE__ */ React28__namespace.default.createElement(ScrollArea, { className: "h-[300px] pr-4" }, /* @__PURE__ */ React28__namespace.default.createElement("ul", { className: "space-y-4" }, result.questionResults.map((qResult, index) => {
-    var _a2, _b2;
-    return /* @__PURE__ */ React28__namespace.default.createElement("li", { key: qResult.questionId, className: "p-4 border rounded-md bg-background" }, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex justify-between items-center mb-2" }, /* @__PURE__ */ React28__namespace.default.createElement("h4", { className: "font-semibold" }, t("common.questions", { count: index + 1 })), qResult.isCorrect ? /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "text-green-600 font-medium flex items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.CheckCircle, { className: "mr-1 h-4 w-4" }), " ", t("practiceFlow.results.passed")) : /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "text-destructive font-medium flex items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.XCircle, { className: "mr-1 h-4 w-4" }), " ", t("practiceFlow.results.failed"))), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.yourAnswer")), " ", getAnswerDisplay(qResult.userAnswer)), !qResult.isCorrect && /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm" }, /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.correctAnswer")), " ", getAnswerDisplay(qResult.correctAnswer)), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.pointsEarned")), " ", qResult.pointsEarned), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-xs text-muted-foreground" }, /* @__PURE__ */ React28__namespace.default.createElement("span", { className: "font-medium" }, t("practiceFlow.results.timeSpent")), " ", (_b2 = (_a2 = qResult.timeSpentSeconds) == null ? void 0 : _a2.toFixed(0)) != null ? _b2 : "N/A", t("practiceFlow.results.timeUnit")));
-  }))))))), /* @__PURE__ */ React28__namespace.default.createElement(CardFooter, { className: "flex flex-col sm:flex-row justify-between gap-2" }, onExitQuiz && /* @__PURE__ */ React28__namespace.default.createElement(Button, { variant: "outline", onClick: onExitQuiz, className: "w-full sm:w-auto" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }), t("common.exit")), showReviewButton && onGenerateReview && /* @__PURE__ */ React28__namespace.default.createElement(
-    Button,
-    {
-      onClick: onGenerateReview,
-      disabled: isReviewLoading,
-      className: "w-full sm:w-auto"
-    },
-    isReviewLoading ? /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Wand2, { className: "mr-2 h-4 w-4" }),
-    isReviewLoading ? t("practiceFlow.results.generatingReview") : t("practiceFlow.results.generateReview")
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full max-w-3xl mx-auto shadow-xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-3xl font-headline text-center", children: t("practiceFlow.results.title", { quizTitle }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { className: "text-center text-lg", children: t("practiceFlow.results.description") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "bg-secondary/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-xl flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart2, { className: "mr-2 h-5 w-5 text-primary" }),
+          t("practiceFlow.results.overallScore")
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "grid grid-cols-1 md:grid-cols-3 gap-4 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-3xl font-bold text-primary", children: [
+              result.score,
+              " / ",
+              result.maxScore
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t("practiceFlow.results.points") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-3xl font-bold text-primary", children: [
+              result.percentage.toFixed(2),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t("practiceFlow.results.percentage") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: result.passed !== void 0 && (result.passed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-green-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold mt-1", children: t("practiceFlow.results.passed") })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-destructive", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-10 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold mt-1", children: t("practiceFlow.results.failed") })
+          ] })) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-5 w-5 text-primary" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("practiceFlow.results.timeSpent") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+            result.totalTimeSpentSeconds?.toFixed(0) ?? "N/A",
+            " ",
+            t("practiceFlow.results.timeUnit")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 p-3 bg-muted rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Percent, { className: "h-5 w-5 text-primary" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("practiceFlow.results.avgTimePerQuestion") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+            result.averageTimePerQuestionSeconds?.toFixed(1) ?? "N/A",
+            " ",
+            t("practiceFlow.results.timeUnit")
+          ] })
+        ] })
+      ] }),
+      result.scormStatus && result.scormStatus !== "idle" && result.scormStatus !== "no_api" && /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: "SCORM Sync Status" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `flex items-center ${result.scormStatus === "error" ? "text-destructive" : "text-muted-foreground"}`, children: [
+            result.scormStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "mr-2 h-4 w-4" }),
+            "Status: ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold ml-1", children: result.scormStatus })
+          ] }),
+          result.scormError && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-destructive mt-1", children: [
+            "Details: ",
+            result.scormError
+          ] })
+        ] })
+      ] }),
+      result.webhookStatus && result.webhookStatus !== "idle" && /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: "Webhook Sync Status" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `flex items-center ${result.webhookStatus === "error" ? "text-destructive" : "text-muted-foreground"}`, children: [
+            result.webhookStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "mr-2 h-4 w-4" }),
+            "Status: ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold ml-1", children: result.webhookStatus })
+          ] }),
+          result.webhookError && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-destructive mt-1", children: [
+            "Details: ",
+            result.webhookError
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "question-breakdown", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "text-lg font-semibold", children: t("practiceFlow.results.questionBreakdown") }),
+        /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[300px] pr-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: result.questionResults.map((qResult, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "p-4 border rounded-md bg-background", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold", children: t("common.questions", { count: index + 1 }) }),
+            qResult.isCorrect ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-600 font-medium flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "mr-1 h-4 w-4" }),
+              " ",
+              t("practiceFlow.results.passed")
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-destructive font-medium flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "mr-1 h-4 w-4" }),
+              " ",
+              t("practiceFlow.results.failed")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: t("practiceFlow.results.yourAnswer") }),
+            " ",
+            getAnswerDisplay(qResult.userAnswer)
+          ] }),
+          !qResult.isCorrect && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: t("practiceFlow.results.correctAnswer") }),
+            " ",
+            getAnswerDisplay(qResult.correctAnswer)
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: t("practiceFlow.results.pointsEarned") }),
+            " ",
+            qResult.pointsEarned
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: t("practiceFlow.results.timeSpent") }),
+            " ",
+            qResult.timeSpentSeconds?.toFixed(0) ?? "N/A",
+            t("practiceFlow.results.timeUnit")
+          ] })
+        ] }, qResult.questionId)) }) }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardFooter, { className: "flex flex-col sm:flex-row justify-between gap-2", children: [
+      onExitQuiz && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: onExitQuiz, className: "w-full sm:w-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }),
+        t("common.exit")
+      ] }),
+      showReviewButton && onGenerateReview && /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          onClick: onGenerateReview,
+          disabled: isReviewLoading,
+          className: "w-full sm:w-auto",
+          children: [
+            isReviewLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wand2, { className: "mr-2 h-4 w-4" }),
+            isReviewLoading ? t("practiceFlow.results.generatingReview") : t("practiceFlow.results.generateReview")
+          ]
+        }
+      )
+    ] })
+  ] });
 };
-
-// src/react-ui/components/ui/QuizPlayer.tsx
 var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
-  var _a;
-  const [engine, setEngine] = React28.useState(null);
-  const [currentQuestion, setCurrentQuestion] = React28.useState(null);
-  const [currentQuestionNumber, setCurrentQuestionNumber] = React28.useState(0);
-  const [totalQuestions, setTotalQuestions] = React28.useState(0);
-  const [userAnswer, setUserAnswer] = React28.useState(null);
-  const [quizFinished, setQuizFinished] = React28.useState(false);
-  const [finalResult, setFinalResult] = React28.useState(null);
-  const [timeLeft, setTimeLeft] = React28.useState(null);
-  const [isLoading, setIsLoading] = React28.useState(true);
-  const [error, setError] = React28.useState(null);
+  const [engine, setEngine] = React9.useState(null);
+  const [currentQuestion, setCurrentQuestion] = React9.useState(null);
+  const [currentQuestionNumber, setCurrentQuestionNumber] = React9.useState(0);
+  const [totalQuestions, setTotalQuestions] = React9.useState(0);
+  const [userAnswer, setUserAnswer] = React9.useState(null);
+  const [quizFinished, setQuizFinished] = React9.useState(false);
+  const [finalResult, setFinalResult] = React9.useState(null);
+  const [timeLeft, setTimeLeft] = React9.useState(null);
+  const [isLoading, setIsLoading] = React9.useState(true);
+  const [error, setError] = React9.useState(null);
   const { t } = reactI18next.useTranslation();
-  const programmingQuestionRef = React28.useRef(null);
-  const engineRef = React28.useRef(null);
-  const isInitializedRef = React28.useRef(false);
-  const callbacks = React28.useMemo(() => ({
+  const programmingQuestionRef = React9.useRef(null);
+  const engineRef = React9.useRef(null);
+  const isInitializedRef = React9.useRef(false);
+  const callbacks = React9.useMemo(() => ({
     onQuizStart: (initialData) => {
       setCurrentQuestion(initialData.initialQuestion);
       setCurrentQuestionNumber(initialData.currentQuestionNumber);
@@ -3714,11 +4070,10 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
       setIsLoading(false);
     },
     onQuestionChange: (question, qNum, total) => {
-      var _a2;
       setCurrentQuestion(question);
       setCurrentQuestionNumber(qNum);
       setTotalQuestions(total);
-      const existingAnswer = (_a2 = engineRef.current) == null ? void 0 : _a2.getUserAnswer((question == null ? void 0 : question.id) || "");
+      const existingAnswer = engineRef.current?.getUserAnswer(question?.id || "");
       setUserAnswer(existingAnswer !== void 0 ? existingAnswer : null);
     },
     onQuizFinish: (results) => {
@@ -3734,19 +4089,19 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
       setError("Time's up! Your quiz has been submitted automatically.");
     }
   }), [onQuizComplete]);
-  const handleAnswerChange = React28.useCallback((answer) => {
-    if ((currentQuestion == null ? void 0 : currentQuestion.questionType) !== "blockly_programming" && (currentQuestion == null ? void 0 : currentQuestion.questionType) !== "scratch_programming") {
+  const handleAnswerChange = React9.useCallback((answer) => {
+    if (currentQuestion?.questionType !== "blockly_programming" && currentQuestion?.questionType !== "scratch_programming") {
       setUserAnswer(answer);
     }
-  }, [currentQuestion == null ? void 0 : currentQuestion.questionType]);
-  const quizConfigKey = React28.useMemo(() => {
+  }, [currentQuestion?.questionType]);
+  const quizConfigKey = React9.useMemo(() => {
     return JSON.stringify({
       id: quizConfig.id,
       version: quizConfig.version,
       title: quizConfig.title
     });
   }, [quizConfig.id, quizConfig.version, quizConfig.title]);
-  React28.useEffect(() => {
+  React9.useEffect(() => {
     if (isInitializedRef.current) {
       return;
     }
@@ -3782,8 +4137,7 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
       isInitializedRef.current = false;
     };
   }, [quizConfigKey, callbacks, quizConfig]);
-  const handleSubmitAnswer = React28.useCallback(() => {
-    var _a2;
+  const handleSubmitAnswer = React9.useCallback(() => {
     const currentEngine = engineRef.current;
     if (!currentEngine || !currentQuestion) return;
     let answerToSubmit = null;
@@ -3791,7 +4145,7 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
       if (programmingQuestionRef.current && typeof programmingQuestionRef.current.getWorkspaceXml === "function") {
         answerToSubmit = programmingQuestionRef.current.getWorkspaceXml();
       } else {
-        answerToSubmit = (_a2 = currentEngine.getUserAnswer(currentQuestion.id)) != null ? _a2 : null;
+        answerToSubmit = currentEngine.getUserAnswer(currentQuestion.id) ?? null;
       }
     } else {
       answerToSubmit = userAnswer;
@@ -3800,7 +4154,7 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
       currentEngine.submitAnswer(currentQuestion.id, answerToSubmit);
     }
   }, [currentQuestion, userAnswer]);
-  const handleNext = React28.useCallback(() => {
+  const handleNext = React9.useCallback(() => {
     const currentEngine = engineRef.current;
     if (!currentEngine) return;
     handleSubmitAnswer();
@@ -3810,77 +4164,128 @@ var QuizPlayer = ({ quizConfig, onQuizComplete, onExitQuiz }) => {
       handleFinishQuiz();
     }
   }, [handleSubmitAnswer]);
-  const handlePrevious = React28.useCallback(() => {
+  const handlePrevious = React9.useCallback(() => {
     const currentEngine = engineRef.current;
     if (!currentEngine || currentEngine.getCurrentQuestionNumber() <= 1) return;
     handleSubmitAnswer();
     currentEngine.previousQuestion();
   }, [handleSubmitAnswer]);
-  const handleFinishQuiz = React28.useCallback(async () => {
+  const handleFinishQuiz = React9.useCallback(async () => {
     const currentEngine = engineRef.current;
     if (!currentEngine) return;
     setIsLoading(true);
     handleSubmitAnswer();
     await currentEngine.calculateResults();
   }, [handleSubmitAnswer]);
-  const progressPercent = React28.useMemo(() => {
+  const progressPercent = React9.useMemo(() => {
     if (totalQuestions === 0) return 0;
     return quizFinished ? 100 : Math.max(0, Math.min(100, (currentQuestionNumber - 1) / totalQuestions * 100));
   }, [currentQuestionNumber, totalQuestions, quizFinished]);
-  const formatTime = React28.useCallback((seconds) => {
+  const formatTime = React9.useCallback((seconds) => {
     if (seconds === null) return "-:--";
     const mins = Math.floor(seconds / 60);
     const secs = seconds % 60;
     return `${mins}:${secs < 10 ? "0" : ""}${secs}`;
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex flex-col items-center justify-center h-64" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Loader2, { className: "h-12 w-12 animate-spin text-primary" }), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "mt-4 text-muted-foreground" }, t("common.loading")));
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-64", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-12 w-12 animate-spin text-primary" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-muted-foreground", children: t("common.loading") })
+    ] });
   }
   if (error) {
-    return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, null, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-destructive flex items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.AlertCircle, { className: "mr-2 h-6 w-6" }), "Quiz Error")), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, null, /* @__PURE__ */ React28__namespace.default.createElement("p", null, error)), /* @__PURE__ */ React28__namespace.default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React28__namespace.default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }), " ", t("common.exit"))));
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full max-w-2xl mx-auto shadow-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "text-destructive flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "mr-2 h-6 w-6" }),
+        "Quiz Error"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: onExitQuiz && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: onExitQuiz, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }),
+        " ",
+        t("common.exit")
+      ] }) })
+    ] });
   }
   if (quizFinished && finalResult) {
-    return /* @__PURE__ */ React28__namespace.default.createElement(QuizResult, { result: finalResult, onExitQuiz, quizTitle: quizConfig.title });
+    return /* @__PURE__ */ jsxRuntime.jsx(QuizResult, { result: finalResult, onExitQuiz, quizTitle: quizConfig.title });
   }
   if (!currentQuestion) {
-    return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full max-w-2xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, null, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, null, "Quiz Ended"), /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, null, "No more questions, or quiz not loaded correctly.")), /* @__PURE__ */ React28__namespace.default.createElement(CardFooter, null, onExitQuiz && /* @__PURE__ */ React28__namespace.default.createElement(Button, { variant: "outline", onClick: onExitQuiz }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }), " ", t("common.exit"))));
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full max-w-2xl mx-auto shadow-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Quiz Ended" }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: "No more questions, or quiz not loaded correctly." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: onExitQuiz && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: onExitQuiz, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }),
+        " ",
+        t("common.exit")
+      ] }) })
+    ] });
   }
-  return /* @__PURE__ */ React28__namespace.default.createElement(Card, { className: "w-full max-w-3xl mx-auto shadow-xl" }, /* @__PURE__ */ React28__namespace.default.createElement(CardHeader, null, /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(CardTitle, { className: "text-2xl font-headline" }, quizConfig.title), timeLeft !== null && /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "flex items-center text-sm text-muted-foreground" }, /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.Clock, { className: "mr-1 h-4 w-4" }), t("practiceFlow.player.timeLeft", { time: formatTime(timeLeft) }))), quizConfig.description && /* @__PURE__ */ React28__namespace.default.createElement(CardDescription, null, quizConfig.description), /* @__PURE__ */ React28__namespace.default.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React28__namespace.default.createElement(
-    Progress,
-    {
-      value: progressPercent,
-      "aria-label": `Quiz progress: ${currentQuestionNumber} of ${totalQuestions} questions`,
-      className: "w-full"
-    }
-  ), /* @__PURE__ */ React28__namespace.default.createElement("p", { className: "text-sm text-muted-foreground mt-1 text-right" }, t("practiceFlow.player.questionProgress", { current: currentQuestionNumber, total: totalQuestions })))), /* @__PURE__ */ React28__namespace.default.createElement(CardContent, { className: "min-h-[200px]" }, /* @__PURE__ */ React28__namespace.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__ */ React28__namespace.default.createElement(CardFooter, { className: "flex justify-between items-center" }, /* @__PURE__ */ React28__namespace.default.createElement(
-    Button,
-    {
-      variant: "outline",
-      onClick: handlePrevious,
-      disabled: currentQuestionNumber <= 1
-    },
-    /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.ChevronLeft, { className: "mr-2 h-4 w-4" }),
-    " ",
-    t("common.previous")
-  ), onExitQuiz && /* @__PURE__ */ React28__namespace.default.createElement(
-    Button,
-    {
-      variant: "ghost",
-      onClick: onExitQuiz,
-      className: "text-muted-foreground hover:text-destructive"
-    },
-    t("common.exit")
-  ), /* @__PURE__ */ React28__namespace.default.createElement(Button, { onClick: handleNext }, currentQuestionNumber === totalQuestions ? t("practiceFlow.player.finishQuiz") : t("common.next"), currentQuestionNumber !== totalQuestions && /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.ChevronRight, { className: "ml-2 h-4 w-4" }), currentQuestionNumber === totalQuestions && /* @__PURE__ */ React28__namespace.default.createElement(lucideReact.CheckCircle, { className: "ml-2 h-4 w-4" }))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "w-full max-w-3xl mx-auto shadow-xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-2xl font-headline", children: quizConfig.title }),
+        timeLeft !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "mr-1 h-4 w-4" }),
+          t("practiceFlow.player.timeLeft", { time: formatTime(timeLeft) })
+        ] })
+      ] }),
+      quizConfig.description && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: quizConfig.description }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Progress,
+          {
+            value: progressPercent,
+            "aria-label": `Quiz progress: ${currentQuestionNumber} of ${totalQuestions} questions`,
+            className: "w-full"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1 text-right", children: t("practiceFlow.player.questionProgress", { current: currentQuestionNumber, total: totalQuestions }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionRenderer,
+      {
+        question: currentQuestion,
+        onAnswerChange: handleAnswerChange,
+        userAnswer,
+        showCorrectAnswer: quizConfig.settings?.showCorrectAnswers === "immediately",
+        ref: currentQuestion.questionType === "blockly_programming" || currentQuestion.questionType === "scratch_programming" ? programmingQuestionRef : null
+      },
+      currentQuestion.id
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardFooter, { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "outline",
+          onClick: handlePrevious,
+          disabled: currentQuestionNumber <= 1,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "mr-2 h-4 w-4" }),
+            " ",
+            t("common.previous")
+          ]
+        }
+      ),
+      onExitQuiz && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "ghost",
+          onClick: onExitQuiz,
+          className: "text-muted-foreground hover:text-destructive",
+          children: t("common.exit")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleNext, children: [
+        currentQuestionNumber === totalQuestions ? t("practiceFlow.player.finishQuiz") : t("common.next"),
+        currentQuestionNumber !== totalQuestions && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-2 h-4 w-4" }),
+        currentQuestionNumber === totalQuestions && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "ml-2 h-4 w-4" })
+      ] })
+    ] })
+  ] });
 };
 
 // src/player.ts
@@ -3892,7 +4297,7 @@ function mountQuizPlayer(targetElementId, quizConfig) {
     return;
   }
   const AppContainer = () => {
-    const [quizResult, setQuizResult] = React28.useState(null);
+    const [quizResult, setQuizResult] = React9.useState(null);
     const handleQuizComplete = (result) => {
       console.log("Quiz Complete (captured inside React AppContainer):", result);
       setQuizResult(result);
@@ -3909,20 +4314,20 @@ function mountQuizPlayer(targetElementId, quizConfig) {
       }
     };
     if (quizResult) {
-      return React28__namespace.default.createElement(QuizResult, {
+      return React9__namespace.default.createElement(QuizResult, {
         result: quizResult,
         quizTitle: quizConfig.title,
         onExitQuiz: handleExit
       });
     }
-    return React28__namespace.default.createElement(QuizPlayer, {
+    return React9__namespace.default.createElement(QuizPlayer, {
       quizConfig,
       onQuizComplete: handleQuizComplete,
       onExitQuiz: handleExit
     });
   };
   const root = ReactDOM__default.default.createRoot(targetElement);
-  root.render(React28__namespace.default.createElement(React28__namespace.default.StrictMode, null, React28__namespace.default.createElement(AppContainer)));
+  root.render(React9__namespace.default.createElement(React9__namespace.default.StrictMode, null, React9__namespace.default.createElement(AppContainer)));
 }
 
 exports.mountQuizPlayer = mountQuizPlayer;