@schoolio/player 1.3.0 → 1.4.1

package/dist/index.js

@@ -23,6 +23,7 @@ __export(index_exports, {
   AttemptViewer: () => AttemptViewer,
   QuizApiClient: () => QuizApiClient,
   QuizPlayer: () => QuizPlayer,
+  TextToSpeech: () => TextToSpeech,
   calculateScore: () => calculateScore,
   checkAnswer: () => checkAnswer,
   createAnswerDetail: () => createAnswerDetail,
@@ -31,7 +32,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/QuizPlayer.tsx
-var import_react = require("react");
+var import_react3 = require("react");
 
 // src/api.ts
 var QuizApiClient = class {
@@ -83,6 +84,52 @@ var QuizApiClient = class {
       `/api/external/quiz-attempts?${queryParams.toString()}`
     );
   }
+  async skipQuestion(payload) {
+    return this.request(
+      "POST",
+      "/api/external/skip-question",
+      payload
+    );
+  }
+  async reportQuestion(payload) {
+    return this.request(
+      "POST",
+      "/api/external/report-question",
+      payload
+    );
+  }
+  async getStarterPrompts() {
+    return this.request("GET", "/api/external/question-chat/prompts");
+  }
+  async getOrCreateChatSession(params) {
+    return this.request("POST", "/api/external/question-chat/session", params);
+  }
+  async sendChatMessage(params) {
+    return this.request("POST", "/api/external/question-chat/message", params);
+  }
+  async getChatHistory(questionId, childId) {
+    return this.request(
+      "GET",
+      `/api/external/question-chat/${questionId}/${childId}`
+    );
+  }
+  async getTextToSpeech(text, voice = "nova") {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.authToken) {
+      headers["Authorization"] = `Bearer ${this.authToken}`;
+    }
+    const response = await fetch(`${this.baseUrl}/api/external/tts`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ text, voice })
+    });
+    if (!response.ok) {
+      throw new Error(`TTS request failed: HTTP ${response.status}`);
+    }
+    return response.blob();
+  }
 };
 
 // src/utils.ts
@@ -172,8 +219,813 @@ function formatTime(seconds) {
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 }
 
-// src/QuizPlayer.tsx
+// src/TextToSpeech.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var styles = {
+  container: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    flexShrink: 0
+  },
+  buttonSm: {
+    width: "28px",
+    height: "28px",
+    padding: "4px",
+    backgroundColor: "transparent"
+  },
+  buttonMd: {
+    width: "32px",
+    height: "32px",
+    padding: "6px",
+    backgroundColor: "rgba(103, 33, 176, 0.1)"
+  },
+  buttonPlaying: {
+    backgroundColor: "rgba(103, 33, 176, 0.2)"
+  },
+  buttonDisabled: {
+    opacity: 0.4,
+    cursor: "not-allowed"
+  },
+  icon: {
+    width: "16px",
+    height: "16px",
+    color: "#6721b0"
+  },
+  textContainer: {
+    flex: 1
+  },
+  highlightedWord: {
+    backgroundColor: "rgba(103, 33, 176, 0.25)",
+    borderRadius: "3px",
+    padding: "0 2px",
+    transition: "background-color 0.15s ease",
+    fontWeight: 500
+  }
+};
+function VolumeIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      style: styles.icon,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+      ]
+    }
+  );
+}
+function StopIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      style: styles.icon,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "9", y: "9", width: "6", height: "6" })
+      ]
+    }
+  );
+}
+function TextToSpeech({ text, inline = false, size = "sm" }) {
+  const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
+  const [currentWordIndex, setCurrentWordIndex] = (0, import_react.useState)(-1);
+  const [isSupported, setIsSupported] = (0, import_react.useState)(true);
+  const [bestVoice, setBestVoice] = (0, import_react.useState)(null);
+  const utteranceRef = (0, import_react.useRef)(null);
+  const wordsRef = (0, import_react.useRef)([]);
+  (0, import_react.useEffect)(() => {
+    wordsRef.current = text.split(/\s+/).filter((word) => word.length > 0);
+  }, [text]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" || !("speechSynthesis" in window)) {
+      setIsSupported(false);
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!isSupported || typeof window === "undefined") return;
+    const loadVoices = () => {
+      const voices = window.speechSynthesis.getVoices();
+      if (voices.length === 0) return;
+      const premiumVoices = [
+        "samantha",
+        "victoria",
+        "karen",
+        "serena",
+        "jenny",
+        "aria",
+        "emma",
+        "moira",
+        "fiona",
+        "alice"
+      ];
+      const englishVoices = voices.filter(
+        (voice) => voice.lang.startsWith("en-")
+      );
+      const scoredVoices = englishVoices.map((voice) => {
+        let score = 0;
+        const nameLower = voice.name.toLowerCase();
+        premiumVoices.forEach((premiumName, index) => {
+          if (nameLower.includes(premiumName)) {
+            score += (premiumVoices.length - index) * 10;
+          }
+        });
+        if (voice.localService) score += 8;
+        if (!nameLower.includes("male")) score += 6;
+        if (voice.lang === "en-US") score += 3;
+        if (nameLower.includes("google us english") || nameLower.includes("microsoft david")) {
+          score -= 20;
+        }
+        return { voice, score };
+      });
+      scoredVoices.sort((a, b) => b.score - a.score);
+      if (scoredVoices.length > 0) {
+        setBestVoice(scoredVoices[0].voice);
+      }
+    };
+    loadVoices();
+    if (window.speechSynthesis.onvoiceschanged !== void 0) {
+      window.speechSynthesis.onvoiceschanged = loadVoices;
+    }
+    return () => {
+      if (window.speechSynthesis.onvoiceschanged !== void 0) {
+        window.speechSynthesis.onvoiceschanged = null;
+      }
+    };
+  }, [isSupported]);
+  const handlePlay = () => {
+    if (!isSupported || typeof window === "undefined") return;
+    try {
+      if (isPlaying) {
+        window.speechSynthesis.cancel();
+        setIsPlaying(false);
+        setCurrentWordIndex(-1);
+        return;
+      }
+      const utterance = new SpeechSynthesisUtterance(text);
+      utteranceRef.current = utterance;
+      if (bestVoice) {
+        utterance.voice = bestVoice;
+      }
+      utterance.rate = 1;
+      utterance.pitch = 1;
+      utterance.volume = 1;
+      let wordIndex = 0;
+      utterance.onboundary = (event) => {
+        if (event.name === "word") {
+          setCurrentWordIndex(wordIndex);
+          wordIndex++;
+        }
+      };
+      utterance.onstart = () => {
+        setIsPlaying(true);
+        setCurrentWordIndex(0);
+      };
+      utterance.onend = () => {
+        setIsPlaying(false);
+        setCurrentWordIndex(-1);
+      };
+      utterance.onerror = (event) => {
+        console.error("Speech error:", event);
+        setIsPlaying(false);
+        setCurrentWordIndex(-1);
+      };
+      window.speechSynthesis.speak(utterance);
+    } catch (error) {
+      console.error("TTS error:", error);
+      setIsPlaying(false);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (typeof window !== "undefined" && "speechSynthesis" in window) {
+        try {
+          window.speechSynthesis.cancel();
+        } catch (error) {
+        }
+      }
+    };
+  }, []);
+  const buttonStyle = {
+    ...styles.button,
+    ...size === "sm" ? styles.buttonSm : styles.buttonMd,
+    ...isPlaying ? styles.buttonPlaying : {},
+    ...!isSupported ? styles.buttonDisabled : {}
+  };
+  if (inline) {
+    const words = text.split(/\s+/);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          style: buttonStyle,
+          onClick: handlePlay,
+          disabled: !isSupported,
+          "aria-label": isPlaying ? "Stop reading" : "Read aloud",
+          title: isPlaying ? "Stop" : "Read aloud",
+          "data-testid": "button-tts",
+          children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.textContainer, children: words.map((word, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "span",
+        {
+          style: index === currentWordIndex ? styles.highlightedWord : void 0,
+          children: [
+            word,
+            index < words.length - 1 ? " " : ""
+          ]
+        },
+        index
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      style: buttonStyle,
+      onClick: handlePlay,
+      disabled: !isSupported,
+      "aria-label": isPlaying ? "Stop reading" : "Read aloud",
+      title: isPlaying ? "Stop" : "Read aloud",
+      "data-testid": "button-tts",
+      children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {})
+    }
+  );
+}
+
+// src/QuestionChatPanel.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var panelStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    backgroundColor: "#f8fafc",
+    borderRadius: "12px",
+    border: "1px solid #e2e8f0",
+    overflow: "hidden"
+  },
+  header: {
+    padding: "12px 16px",
+    backgroundColor: "#6721b0",
+    color: "#ffffff",
+    fontWeight: "600",
+    fontSize: "14px",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  messagesContainer: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  starterPrompts: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "16px"
+  },
+  starterButton: {
+    padding: "10px 14px",
+    borderRadius: "20px",
+    border: "1px solid #e2e8f0",
+    backgroundColor: "#ffffff",
+    color: "#374151",
+    fontSize: "13px",
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "all 0.2s ease"
+  },
+  starterButtonHover: {
+    backgroundColor: "#f3e8ff",
+    borderColor: "#6721b0"
+  },
+  messageRow: {
+    display: "flex"
+  },
+  messageContent: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "4px",
+    maxWidth: "85%"
+  },
+  userMessage: {
+    padding: "10px 14px",
+    borderRadius: "16px 16px 4px 16px",
+    backgroundColor: "#6721b0",
+    color: "#ffffff",
+    fontSize: "14px",
+    lineHeight: 1.4
+  },
+  assistantMessage: {
+    padding: "10px 14px",
+    borderRadius: "16px 16px 16px 4px",
+    backgroundColor: "#ffffff",
+    color: "#1f2937",
+    fontSize: "14px",
+    lineHeight: 1.4,
+    border: "1px solid #e2e8f0"
+  },
+  inputContainer: {
+    padding: "12px",
+    borderTop: "1px solid #e2e8f0",
+    backgroundColor: "#ffffff",
+    display: "flex",
+    gap: "8px",
+    alignItems: "center"
+  },
+  input: {
+    flex: 1,
+    padding: "10px 14px",
+    borderRadius: "20px",
+    border: "1px solid #e2e8f0",
+    fontSize: "14px",
+    outline: "none"
+  },
+  buttonBase: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "50%",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "16px",
+    transition: "all 0.2s ease"
+  },
+  sendButton: {
+    backgroundColor: "#6721b0",
+    color: "#ffffff"
+  },
+  sendButtonDisabled: {
+    backgroundColor: "#d1d5db",
+    cursor: "not-allowed"
+  },
+  micButton: {
+    backgroundColor: "#ffffff",
+    border: "1px solid #e2e8f0",
+    color: "#374151"
+  },
+  micButtonActive: {
+    backgroundColor: "#ef4444",
+    color: "#ffffff",
+    border: "none"
+  },
+  speakButton: {
+    width: "28px",
+    height: "28px",
+    borderRadius: "50%",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "#9ca3af",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s ease",
+    flexShrink: 0
+  },
+  speakButtonReady: {
+    color: "#22c55e"
+  },
+  speakButtonPlaying: {
+    color: "#6721b0"
+  },
+  speakButtonLoading: {
+    color: "#f97316"
+  },
+  loadingDots: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "10px 14px",
+    maxWidth: "85%",
+    marginRight: "auto"
+  },
+  dot: {
+    width: "8px",
+    height: "8px",
+    backgroundColor: "#9ca3af",
+    borderRadius: "50%",
+    animation: "bounce 1.4s ease-in-out infinite"
+  },
+  emptyState: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "20px",
+    color: "#6b7280",
+    textAlign: "center"
+  },
+  helperIcon: {
+    width: "48px",
+    height: "48px",
+    marginBottom: "12px",
+    fontSize: "32px"
+  }
+};
+var STARTER_PROMPTS = [
+  { id: "dont_understand", label: "I don't understand this question", message: "I don't understand this question. Can you help me?" },
+  { id: "word_help", label: "I don't understand a word", message: "I don't understand a word in this question. Can you help?" },
+  { id: "explain_again", label: "Explain this again", message: "Can you explain this question to me again in a different way?" }
+];
+var MicIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+] });
+var MicOffIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "2", x2: "22", y1: "2", y2: "22" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 10v2a7 7 0 0 0 12 5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+] });
+var VolumeIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+] });
+var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+] });
+var HelpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "#6721b0", strokeWidth: "2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+] });
+function QuestionChatPanel({
+  apiClient,
+  question,
+  quizId,
+  childId,
+  parentId,
+  lessonId,
+  courseId
+}) {
+  const [messages, setMessages] = (0, import_react2.useState)([]);
+  const [inputValue, setInputValue] = (0, import_react2.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [chatId, setChatId] = (0, import_react2.useState)(null);
+  const [hoveredButton, setHoveredButton] = (0, import_react2.useState)(null);
+  const [isListening, setIsListening] = (0, import_react2.useState)(false);
+  const [speakingIndex, setSpeakingIndex] = (0, import_react2.useState)(null);
+  const [audioReadyMap, setAudioReadyMap] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
+  const messagesContainerRef = (0, import_react2.useRef)(null);
+  const messagesEndRef = (0, import_react2.useRef)(null);
+  const recognitionRef = (0, import_react2.useRef)(null);
+  const audioRef = (0, import_react2.useRef)(null);
+  const audioCacheRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const isSpeechSupported = typeof window !== "undefined" && (window.SpeechRecognition || window.webkitSpeechRecognition);
+  const scrollToBottom = (0, import_react2.useCallback)(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  }, []);
+  const preCacheAudio = (0, import_react2.useCallback)(async (text) => {
+    if (audioCacheRef.current.has(text)) {
+      setAudioReadyMap((prev) => new Map(prev).set(text, true));
+      return;
+    }
+    setAudioReadyMap((prev) => new Map(prev).set(text, false));
+    try {
+      const audioBlob = await apiClient.getTextToSpeech(text, "nova");
+      audioCacheRef.current.set(text, audioBlob);
+      setAudioReadyMap((prev) => new Map(prev).set(text, true));
+    } catch (error) {
+      console.error("Pre-cache TTS error:", error);
+    }
+  }, [apiClient]);
+  const startListening = (0, import_react2.useCallback)(() => {
+    const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognitionAPI) {
+      console.log("Speech recognition not supported");
+      return;
+    }
+    const recognition = new SpeechRecognitionAPI();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.lang = "en-US";
+    recognition.onstart = () => {
+      console.log("Speech recognition started");
+      setIsListening(true);
+    };
+    recognition.onresult = (event) => {
+      let finalTranscript = "";
+      for (let i = 0; i < Object.keys(event.results).length; i++) {
+        const result = event.results[i];
+        if (result && result[0]) {
+          finalTranscript += result[0].transcript;
+        }
+      }
+      if (finalTranscript) {
+        setInputValue(finalTranscript);
+      }
+    };
+    recognition.onerror = (event) => {
+      console.log("Speech recognition error:", event.error);
+      if (event.error === "not-allowed") {
+        alert("Microphone access was denied. Please allow microphone access and try again.");
+      }
+      setIsListening(false);
+    };
+    recognition.onend = () => {
+      console.log("Speech recognition ended");
+      setIsListening(false);
+    };
+    recognitionRef.current = recognition;
+    try {
+      recognition.start();
+    } catch (e) {
+      console.log("Failed to start recognition:", e);
+      setIsListening(false);
+    }
+  }, []);
+  const stopListening = (0, import_react2.useCallback)(() => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+      setIsListening(false);
+    }
+  }, []);
+  const speakMessage = (0, import_react2.useCallback)(async (text, index) => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    if (speakingIndex === index) {
+      setSpeakingIndex(null);
+      return;
+    }
+    setSpeakingIndex(index);
+    try {
+      let audioBlob;
+      const cachedBlob = audioCacheRef.current.get(text);
+      if (cachedBlob) {
+        audioBlob = cachedBlob;
+      } else {
+        audioBlob = await apiClient.getTextToSpeech(text, "nova");
+        audioCacheRef.current.set(text, audioBlob);
+      }
+      const audioUrl = URL.createObjectURL(audioBlob);
+      const audio = new Audio(audioUrl);
+      audioRef.current = audio;
+      audio.onended = () => {
+        setSpeakingIndex(null);
+        URL.revokeObjectURL(audioUrl);
+      };
+      audio.onerror = () => {
+        setSpeakingIndex(null);
+        URL.revokeObjectURL(audioUrl);
+      };
+      await audio.play();
+    } catch (error) {
+      console.error("TTS error:", error);
+      setSpeakingIndex(null);
+    }
+  }, [speakingIndex, apiClient]);
+  (0, import_react2.useEffect)(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+  (0, import_react2.useEffect)(() => {
+    setMessages([]);
+    setChatId(null);
+    setInputValue("");
+    const loadHistory = async () => {
+      try {
+        const history = await apiClient.getChatHistory(question.id, childId);
+        if (history.chatId && history.messages.length > 0) {
+          setChatId(history.chatId);
+          setMessages(history.messages);
+          history.messages.filter((m) => m.role === "assistant").forEach((m) => preCacheAudio(m.content));
+        }
+      } catch (err) {
+        console.error("Failed to load chat history:", err);
+      }
+    };
+    loadHistory();
+  }, [question.id, childId, apiClient, preCacheAudio]);
+  const initializeChat = async () => {
+    if (chatId) return chatId;
+    try {
+      const session = await apiClient.getOrCreateChatSession({
+        questionId: question.id,
+        questionContent: question,
+        quizId,
+        childId,
+        parentId,
+        lessonId,
+        courseId
+      });
+      setChatId(session.chatId);
+      return session.chatId;
+    } catch (err) {
+      console.error("Failed to create chat session:", err);
+      return null;
+    }
+  };
+  const sendMessage = async (messageText) => {
+    if (!messageText.trim() || isLoading) return;
+    if (isListening) {
+      stopListening();
+    }
+    setIsLoading(true);
+    const userMsg = {
+      role: "user",
+      content: messageText,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setInputValue("");
+    try {
+      const currentChatId = await initializeChat();
+      if (!currentChatId) {
+        throw new Error("Failed to initialize chat");
+      }
+      const response = await apiClient.sendChatMessage({
+        chatId: currentChatId,
+        message: messageText,
+        questionContext: question,
+        childId
+      });
+      const assistantMessage = response.assistantMessage || {
+        role: "assistant",
+        content: "I'm here to help!",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+      preCacheAudio(assistantMessage.content);
+    } catch (err) {
+      console.error("Failed to send message:", err);
+      const content = "Sorry, I'm having trouble right now. Please try again!";
+      const errorMsg = {
+        role: "assistant",
+        content,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, errorMsg]);
+      preCacheAudio(content);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage(inputValue);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: panelStyles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+          @keyframes bounce {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-4px); }
+          }
+          @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+          }
+        ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: panelStyles.header, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Need Help?" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: messagesContainerRef, style: panelStyles.messagesContainer, children: messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: panelStyles.emptyState, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: panelStyles.helperIcon, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "14px", fontWeight: "500", marginBottom: "8px" }, children: "Hi! I'm your question helper" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "13px", color: "#9ca3af" }, children: "Ask me if you need help understanding this question" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...panelStyles.starterPrompts, marginTop: "16px" }, children: STARTER_PROMPTS.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          style: {
+            ...panelStyles.starterButton,
+            ...hoveredButton === prompt.id ? panelStyles.starterButtonHover : {}
+          },
+          onMouseEnter: () => setHoveredButton(prompt.id),
+          onMouseLeave: () => setHoveredButton(null),
+          onClick: () => sendMessage(prompt.message),
+          disabled: isLoading,
+          "data-testid": `button-chat-starter-${prompt.id}`,
+          children: prompt.label
+        },
+        prompt.id
+      )) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          style: {
+            ...panelStyles.messageRow,
+            justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: {
+            ...panelStyles.messageContent,
+            flexDirection: msg.role === "user" ? "row-reverse" : "row"
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: msg.role === "user" ? panelStyles.userMessage : panelStyles.assistantMessage, children: msg.content }),
+            msg.role === "assistant" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                style: {
+                  ...panelStyles.speakButton,
+                  ...speakingIndex === idx ? panelStyles.speakButtonPlaying : audioReadyMap.get(msg.content) === true ? panelStyles.speakButtonReady : audioReadyMap.get(msg.content) === false ? panelStyles.speakButtonLoading : {},
+                  ...audioReadyMap.get(msg.content) === false ? { animation: "pulse 1.5s ease-in-out infinite" } : {}
+                },
+                onClick: () => speakMessage(msg.content, idx),
+                "data-testid": `button-speak-${idx}`,
+                title: "Listen to this message",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VolumeIcon2, {})
+              }
+            )
+          ] })
+        },
+        idx
+      )),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: panelStyles.loadingDots, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...panelStyles.dot, animationDelay: "0s" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...panelStyles.dot, animationDelay: "0.2s" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { ...panelStyles.dot, animationDelay: "0.4s" } })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: messagesEndRef })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: panelStyles.inputContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "text",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyPress: handleKeyPress,
+          placeholder: isListening ? "Listening..." : "Ask about this question...",
+          style: panelStyles.input,
+          disabled: isLoading || isListening,
+          "data-testid": "input-chat-message"
+        }
+      ),
+      isSpeechSupported && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: isListening ? stopListening : startListening,
+          disabled: isLoading,
+          style: {
+            ...panelStyles.buttonBase,
+            ...isListening ? panelStyles.micButtonActive : panelStyles.micButton
+          },
+          "data-testid": "button-voice-input",
+          title: isListening ? "Stop listening" : "Speak your question",
+          children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MicOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MicIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: () => sendMessage(inputValue),
+          disabled: isLoading || !inputValue.trim(),
+          style: {
+            ...panelStyles.buttonBase,
+            ...panelStyles.sendButton,
+            ...isLoading || !inputValue.trim() ? panelStyles.sendButtonDisabled : {}
+          },
+          "data-testid": "button-send-chat",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SendIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/QuizPlayer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultStyles = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
@@ -231,7 +1083,10 @@ var defaultStyles = {
     cursor: "pointer",
     transition: "all 0.2s ease",
     outline: "none",
-    backgroundColor: "#ffffff"
+    boxShadow: "none",
+    backgroundColor: "#ffffff",
+    WebkitTapHighlightColor: "transparent",
+    userSelect: "none"
   },
   optionSelected: {
     borderColor: "#6721b0",
@@ -308,6 +1163,19 @@ var defaultStyles = {
     gap: "12px",
     marginTop: "24px"
   },
+  mainLayout: {
+    display: "flex",
+    gap: "24px"
+  },
+  quizContent: {
+    flex: 1,
+    minWidth: 0
+  },
+  chatPanel: {
+    width: "320px",
+    flexShrink: 0,
+    height: "460px"
+  },
   timer: {
     fontSize: "14px",
     color: "#6b7280",
@@ -453,7 +1321,7 @@ var defaultStyles = {
   }
 };
 function Spinner({ size = 16, color = "#ffffff" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       style: {
@@ -465,7 +1333,7 @@ function Spinner({ size = 16, color = "#ffffff" }) {
         borderRadius: "50%",
         animation: "spin 0.8s linear infinite"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
     }
   );
 }
@@ -482,33 +1350,42 @@ function QuizPlayer({
   onError,
   onProgress,
   onGenerateMoreQuestions,
-  className
+  className,
+  forceNewAttempt = true
 }) {
-  const [quiz, setQuiz] = (0, import_react.useState)(null);
-  const [attempt, setAttempt] = (0, import_react.useState)(null);
-  const [currentQuestionIndex, setCurrentQuestionIndex] = (0, import_react.useState)(0);
-  const [answers, setAnswers] = (0, import_react.useState)(/* @__PURE__ */ new Map());
-  const [answersDetail, setAnswersDetail] = (0, import_react.useState)([]);
-  const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
-  const [isNavigating, setIsNavigating] = (0, import_react.useState)(false);
-  const [isCompleted, setIsCompleted] = (0, import_react.useState)(false);
-  const [result, setResult] = (0, import_react.useState)(null);
-  const [error, setError] = (0, import_react.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
-  const [elapsedSeconds, setElapsedSeconds] = (0, import_react.useState)(0);
-  const [showIntro, setShowIntro] = (0, import_react.useState)(true);
-  const [timerStarted, setTimerStarted] = (0, import_react.useState)(false);
-  const [showFeedback, setShowFeedback] = (0, import_react.useState)(false);
-  const [currentAnswerDetail, setCurrentAnswerDetail] = (0, import_react.useState)(null);
-  const [extraQuestions, setExtraQuestions] = (0, import_react.useState)([]);
-  const [isGeneratingExtra, setIsGeneratingExtra] = (0, import_react.useState)(false);
-  const apiClient = (0, import_react.useRef)(null);
-  const timerRef = (0, import_react.useRef)(null);
-  const startTimeRef = (0, import_react.useRef)(0);
-  (0, import_react.useEffect)(() => {
+  const [quiz, setQuiz] = (0, import_react3.useState)(null);
+  const [attempt, setAttempt] = (0, import_react3.useState)(null);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = (0, import_react3.useState)(0);
+  const [answers, setAnswers] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
+  const [answersDetail, setAnswersDetail] = (0, import_react3.useState)([]);
+  const [isSubmitting, setIsSubmitting] = (0, import_react3.useState)(false);
+  const [isNavigating, setIsNavigating] = (0, import_react3.useState)(false);
+  const [isCompleted, setIsCompleted] = (0, import_react3.useState)(false);
+  const [result, setResult] = (0, import_react3.useState)(null);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [elapsedSeconds, setElapsedSeconds] = (0, import_react3.useState)(0);
+  const [showIntro, setShowIntro] = (0, import_react3.useState)(true);
+  const [timerStarted, setTimerStarted] = (0, import_react3.useState)(false);
+  const [showFeedback, setShowFeedback] = (0, import_react3.useState)(false);
+  const [currentAnswerDetail, setCurrentAnswerDetail] = (0, import_react3.useState)(null);
+  const [extraQuestions, setExtraQuestions] = (0, import_react3.useState)([]);
+  const [isGeneratingExtra, setIsGeneratingExtra] = (0, import_react3.useState)(false);
+  const [showSkipModal, setShowSkipModal] = (0, import_react3.useState)(false);
+  const [skippedQuestionIds, setSkippedQuestionIds] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
+  const [isSkipping, setIsSkipping] = (0, import_react3.useState)(false);
+  const [skipComment, setSkipComment] = (0, import_react3.useState)("");
+  const [selectedSkipReason, setSelectedSkipReason] = (0, import_react3.useState)(null);
+  const [showReportModal, setShowReportModal] = (0, import_react3.useState)(false);
+  const [isReporting, setIsReporting] = (0, import_react3.useState)(false);
+  const [reportComment, setReportComment] = (0, import_react3.useState)("");
+  const apiClient = (0, import_react3.useRef)(null);
+  const timerRef = (0, import_react3.useRef)(null);
+  const startTimeRef = (0, import_react3.useRef)(0);
+  (0, import_react3.useEffect)(() => {
     apiClient.current = new QuizApiClient({ baseUrl: apiBaseUrl, authToken });
   }, [apiBaseUrl, authToken]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     async function initialize() {
       if (!apiClient.current) return;
       try {
@@ -522,10 +1399,11 @@ function QuizPlayer({
           assignLessonId,
           courseId,
           childId,
-          parentId
+          parentId,
+          forceNew: forceNewAttempt
         });
         setAttempt(attemptData);
-        if (attemptData.answers && attemptData.answers.length > 0) {
+        if (!forceNewAttempt && attemptData.answers && attemptData.answers.length > 0) {
           setAnswersDetail(attemptData.answers);
           const answersMap = /* @__PURE__ */ new Map();
           attemptData.answers.forEach((a) => {
@@ -554,8 +1432,8 @@ function QuizPlayer({
       }
     }
     initialize();
-  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, onError]);
-  (0, import_react.useEffect)(() => {
+  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt, onError]);
+  (0, import_react3.useEffect)(() => {
     if (timerStarted && !isCompleted && !error) {
       startTimeRef.current = Date.now();
       timerRef.current = setInterval(() => {
@@ -568,18 +1446,18 @@ function QuizPlayer({
       }
     };
   }, [timerStarted, isCompleted, error]);
-  const handleStart = (0, import_react.useCallback)(() => {
+  const handleStart = (0, import_react3.useCallback)(() => {
     setShowIntro(false);
     setTimerStarted(true);
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     setShowFeedback(false);
     setCurrentAnswerDetail(null);
   }, [currentQuestionIndex]);
-  const allQuestions = quiz ? [...quiz.questions, ...extraQuestions] : [];
+  const allQuestions = quiz ? [...quiz.questions, ...extraQuestions].filter((q) => !skippedQuestionIds.has(q.id)) : [];
   const totalQuestions = allQuestions.length;
   const maxQuestions = 50;
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (quiz && onProgress) {
       onProgress({
         currentQuestion: currentQuestionIndex + 1,
@@ -589,11 +1467,11 @@ function QuizPlayer({
     }
   }, [currentQuestionIndex, answers.size, quiz, onProgress, totalQuestions]);
   const currentQuestion = allQuestions[currentQuestionIndex];
-  const handleAnswerChange = (0, import_react.useCallback)((value) => {
+  const handleAnswerChange = (0, import_react3.useCallback)((value) => {
     if (!currentQuestion) return;
     setAnswers((prev) => new Map(prev).set(currentQuestion.id, value));
   }, [currentQuestion]);
-  const handleCheckAnswer = (0, import_react.useCallback)(async () => {
+  const handleCheckAnswer = (0, import_react3.useCallback)(async () => {
     if (!quiz || !attempt || !currentQuestion || !apiClient.current) return;
     const selectedAnswer2 = answers.get(currentQuestion.id);
     if (selectedAnswer2 === void 0) return;
@@ -619,7 +1497,7 @@ function QuizPlayer({
     }
     setShowFeedback(true);
   }, [quiz, attempt, currentQuestion, answers, answersDetail]);
-  const handleContinue = (0, import_react.useCallback)(() => {
+  const handleContinue = (0, import_react3.useCallback)(() => {
     if (!quiz) return;
     setShowFeedback(false);
     setCurrentAnswerDetail(null);
@@ -627,7 +1505,7 @@ function QuizPlayer({
       setCurrentQuestionIndex((prev) => prev + 1);
     }
   }, [quiz, currentQuestionIndex, totalQuestions]);
-  const handleAddMoreQuestions = (0, import_react.useCallback)(async () => {
+  const handleAddMoreQuestions = (0, import_react3.useCallback)(async () => {
     if (!attempt || !onGenerateMoreQuestions || isGeneratingExtra) return;
     if (totalQuestions >= maxQuestions) return;
     setIsGeneratingExtra(true);
@@ -650,7 +1528,7 @@ function QuizPlayer({
       setIsGeneratingExtra(false);
     }
   }, [attempt, onGenerateMoreQuestions, isGeneratingExtra, totalQuestions, maxQuestions, onError]);
-  const handleSubmit = (0, import_react.useCallback)(async () => {
+  const handleSubmit = (0, import_react3.useCallback)(async () => {
     if (!quiz || !attempt || !apiClient.current) return;
     setIsSubmitting(true);
     try {
@@ -672,6 +1550,7 @@ function QuizPlayer({
         status: "completed",
         score: scoreData.score,
         correctAnswers: scoreData.correctAnswers,
+        totalQuestions,
         timeSpentSeconds: timeSpent
       });
       setIsCompleted(true);
@@ -696,17 +1575,89 @@ function QuizPlayer({
       setIsSubmitting(false);
     }
   }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError, totalQuestions, timerStarted, elapsedSeconds]);
+  const isExtraQuestion = currentQuestion && extraQuestions.some((q) => q.id === currentQuestion.id);
+  const handleSkipQuestion = (0, import_react3.useCallback)(async (reason, comment) => {
+    if (!currentQuestion || !apiClient.current || !attempt) return;
+    setIsSkipping(true);
+    try {
+      await apiClient.current.skipQuestion({
+        questionId: currentQuestion.id,
+        questionContent: currentQuestion,
+        skipReason: reason,
+        skipComment: comment?.trim() || void 0,
+        quizId: quiz?.id,
+        attemptId: attempt.id,
+        childId,
+        parentId,
+        lessonId,
+        courseId,
+        assignLessonId
+      });
+      const newSkippedIds = new Set(skippedQuestionIds).add(currentQuestion.id);
+      setSkippedQuestionIds(newSkippedIds);
+      const newExtraQuestions = extraQuestions.filter((q) => q.id !== currentQuestion.id);
+      setExtraQuestions(newExtraQuestions);
+      const newAllQuestions = quiz ? [...quiz.questions, ...newExtraQuestions].filter((q) => !newSkippedIds.has(q.id)) : [];
+      const newTotalQuestions = newAllQuestions.length;
+      if (newTotalQuestions === 0) {
+        setIsCompleted(true);
+        const quizResult = {
+          attemptId: attempt.id,
+          score: 0,
+          correctAnswers: 0,
+          totalQuestions: 0,
+          answers: [],
+          timeSpentSeconds: elapsedSeconds
+        };
+        setResult(quizResult);
+        onComplete?.(quizResult);
+      } else if (currentQuestionIndex >= newTotalQuestions) {
+        setCurrentQuestionIndex(newTotalQuestions - 1);
+      }
+      setShowSkipModal(false);
+      setSkipComment("");
+      setSelectedSkipReason(null);
+    } catch (err) {
+      console.error("Failed to skip question:", err);
+    } finally {
+      setIsSkipping(false);
+    }
+  }, [currentQuestion, apiClient, attempt, quiz, childId, parentId, lessonId, courseId, assignLessonId, skippedQuestionIds, extraQuestions, currentQuestionIndex, elapsedSeconds, onComplete]);
+  const handleReportQuestion = (0, import_react3.useCallback)(async (comment) => {
+    if (!currentQuestion || !apiClient.current || !attempt || !comment.trim()) return;
+    setIsReporting(true);
+    try {
+      await apiClient.current.reportQuestion({
+        questionId: currentQuestion.id,
+        questionContent: currentQuestion,
+        reportComment: comment.trim(),
+        quizId: quiz?.id,
+        attemptId: attempt.id,
+        childId,
+        parentId,
+        lessonId,
+        courseId,
+        assignLessonId
+      });
+      setShowReportModal(false);
+      setReportComment("");
+    } catch (err) {
+      console.error("Failed to report question:", err);
+    } finally {
+      setIsReporting(false);
+    }
+  }, [currentQuestion, apiClient, attempt, quiz, childId, parentId, lessonId, courseId, assignLessonId]);
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.loading, children: "Loading quiz..." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.loading, children: "Loading quiz..." }) });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.error, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.error, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
       "Error: ",
       error
     ] }) }) });
   }
   if (isCompleted && result) {
-    const percentage = Math.round(result.correctAnswers / result.totalQuestions * 100);
+    const percentage = result.totalQuestions > 0 ? Math.round(result.correctAnswers / result.totalQuestions * 100) : 0;
     const getScoreTheme = (pct) => {
       if (pct >= 80) {
         return {
@@ -761,7 +1712,7 @@ function QuizPlayer({
       rotation: Math.random() * 360,
       size: 6 + Math.random() * 8
     }));
-    const StarIcon = ({ filled, delay }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    const StarIcon = ({ filled, delay }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "svg",
       {
         width: "36",
@@ -772,7 +1723,7 @@ function QuizPlayer({
           animationDelay: `${delay}s`,
           opacity: 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
             d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
@@ -800,7 +1751,7 @@ function QuizPlayer({
         }
       };
       const eyeExpr = getEyeExpression();
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "svg",
         {
           width: "120",
@@ -810,35 +1761,35 @@ function QuizPlayer({
             animation: mood === "celebrating" ? "bounce 0.6s ease-in-out infinite" : "gentleBob 2s ease-in-out infinite"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "50", cy: "60", rx: "35", ry: "30", fill: "#8b5cf6" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "50", cy: "65", rx: "25", ry: "20", fill: "#c4b5fd" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "50", cy: "35", r: "28", fill: "#a78bfa" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "28,15 35,30 22,28", fill: "#7c3aed" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "72,15 65,30 78,28", fill: "#7c3aed" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "38", cy: "38", rx: "10", ry: "12", fill: "white" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "62", cy: "38", rx: "10", ry: "12", fill: "white" }),
-            eyeExpr.leftEye ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "38", y: "44", textAnchor: "middle", fontSize: "16", fill: "#1f2937", children: eyeExpr.leftEye }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "38", cy: eyeExpr.pupilY, r: "5", fill: "#1f2937" }),
-            eyeExpr.rightEye ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "62", y: "44", textAnchor: "middle", fontSize: "16", fill: "#1f2937", children: eyeExpr.rightEye }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "62", cy: eyeExpr.pupilY, r: "5", fill: "#1f2937" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "50,45 45,52 55,52", fill: "#fbbf24" }),
-            (mood === "celebrating" || mood === "happy") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "28", cy: "45", rx: "5", ry: "3", fill: "#fda4af", opacity: "0.6" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "72", cy: "45", rx: "5", ry: "3", fill: "#fda4af", opacity: "0.6" })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "50", cy: "60", rx: "35", ry: "30", fill: "#8b5cf6" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "50", cy: "65", rx: "25", ry: "20", fill: "#c4b5fd" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "50", cy: "35", r: "28", fill: "#a78bfa" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "28,15 35,30 22,28", fill: "#7c3aed" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "72,15 65,30 78,28", fill: "#7c3aed" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "38", cy: "38", rx: "10", ry: "12", fill: "white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "62", cy: "38", rx: "10", ry: "12", fill: "white" }),
+            eyeExpr.leftEye ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: "38", y: "44", textAnchor: "middle", fontSize: "16", fill: "#1f2937", children: eyeExpr.leftEye }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "38", cy: eyeExpr.pupilY, r: "5", fill: "#1f2937" }),
+            eyeExpr.rightEye ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: "62", y: "44", textAnchor: "middle", fontSize: "16", fill: "#1f2937", children: eyeExpr.rightEye }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "62", cy: eyeExpr.pupilY, r: "5", fill: "#1f2937" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "50,45 45,52 55,52", fill: "#fbbf24" }),
+            (mood === "celebrating" || mood === "happy") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "28", cy: "45", rx: "5", ry: "3", fill: "#fda4af", opacity: "0.6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "72", cy: "45", rx: "5", ry: "3", fill: "#fda4af", opacity: "0.6" })
             ] }),
-            mood === "celebrating" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "18", cy: "55", rx: "8", ry: "15", fill: "#7c3aed", transform: "rotate(-30 18 55)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "82", cy: "55", rx: "8", ry: "15", fill: "#7c3aed", transform: "rotate(30 82 55)" })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "20", cy: "60", rx: "8", ry: "15", fill: "#7c3aed" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "80", cy: "60", rx: "8", ry: "15", fill: "#7c3aed" })
+            mood === "celebrating" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "18", cy: "55", rx: "8", ry: "15", fill: "#7c3aed", transform: "rotate(-30 18 55)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "82", cy: "55", rx: "8", ry: "15", fill: "#7c3aed", transform: "rotate(30 82 55)" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "20", cy: "60", rx: "8", ry: "15", fill: "#7c3aed" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "80", cy: "60", rx: "8", ry: "15", fill: "#7c3aed" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "40", cy: "88", rx: "8", ry: "4", fill: "#fbbf24" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ellipse", { cx: "60", cy: "88", rx: "8", ry: "4", fill: "#fbbf24" })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "40", cy: "88", rx: "8", ry: "4", fill: "#fbbf24" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: "60", cy: "88", rx: "8", ry: "4", fill: "#fbbf24" })
           ]
         }
       );
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: defaultStyles.container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, style: defaultStyles.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
             @keyframes confettiFall {
               0% {
                 transform: translateY(-10px) rotate(0deg);
@@ -902,8 +1853,8 @@ function QuizPlayer({
               }
             }
           ` }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.results, children: [
-        percentage >= 60 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.confettiContainer, children: confettiPieces.map((piece) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.results, children: [
+        percentage >= 60 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.confettiContainer, children: confettiPieces.map((piece) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
             style: {
@@ -920,15 +1871,15 @@ function QuizPlayer({
           },
           piece.id
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...defaultStyles.resultsBackground, background: theme.bgGradient } }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.resultsContent, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.resultStars, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StarIcon, { filled: theme.stars >= 1, delay: 0.3 }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StarIcon, { filled: theme.stars >= 2, delay: 0.5 }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StarIcon, { filled: theme.stars >= 3, delay: 0.7 })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...defaultStyles.resultsBackground, background: theme.bgGradient } }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.resultsContent, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.resultStars, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StarIcon, { filled: theme.stars >= 1, delay: 0.3 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StarIcon, { filled: theme.stars >= 2, delay: 0.5 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StarIcon, { filled: theme.stars >= 3, delay: 0.7 })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MascotOwl, { mood: theme.mascotMood }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MascotOwl, { mood: theme.mascotMood }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "div",
             {
               style: {
@@ -941,7 +1892,7 @@ function QuizPlayer({
                 opacity: 0,
                 border: `3px solid ${theme.badgeColor}`
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "span",
                 {
                   style: {
@@ -955,7 +1906,7 @@ function QuizPlayer({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "div",
             {
               style: {
@@ -963,7 +1914,7 @@ function QuizPlayer({
                 opacity: 0
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                   "div",
                   {
                     style: {
@@ -980,7 +1931,7 @@ function QuizPlayer({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "div",
                   {
                     style: {
@@ -995,7 +1946,7 @@ function QuizPlayer({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...defaultStyles.resultDetails, marginTop: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...defaultStyles.resultDetails, marginTop: "8px" }, children: [
             "Time: ",
             formatTime(result.timeSpentSeconds)
           ] })
@@ -1004,16 +1955,16 @@ function QuizPlayer({
     ] });
   }
   if (quiz && showIntro) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.intro, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.introTitle, children: quiz.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.introSubtitle, children: "Ready to test your knowledge?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.introQuestionCount, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.intro, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.introTitle, children: quiz.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.introSubtitle, children: "Ready to test your knowledge?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.introQuestionCount, children: [
         quiz.questions.length,
         " question",
         quiz.questions.length !== 1 ? "s" : "",
         " to answer"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           style: defaultStyles.startButton,
@@ -1033,7 +1984,7 @@ function QuizPlayer({
     ] }) });
   }
   if (!quiz || !currentQuestion) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.error, children: "No quiz data available" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.error, children: "No quiz data available" }) });
   }
   const selectedAnswer = answers.get(currentQuestion.id);
   const isLastQuestion = currentQuestionIndex === totalQuestions - 1;
@@ -1041,187 +1992,538 @@ function QuizPlayer({
   const remainingSlots = maxQuestions - totalQuestions;
   const questionsToAdd = Math.min(5, remainingSlots);
   const canAddMore = onGenerateMoreQuestions && remainingSlots > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: defaultStyles.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.progress, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, style: defaultStyles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.progress, children: [
         "Question ",
         currentQuestionIndex + 1,
         " of ",
         totalQuestions
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.question, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.questionText, children: currentQuestion.question }),
-      (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
-        const isSelected = selectedAnswer === option;
-        const isCorrectOption = currentQuestion.correctAnswer === option;
-        let optionStyle = { ...defaultStyles.option };
-        if (showFeedback) {
-          if (isCorrectOption) {
-            optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
-          } else if (isSelected && !isCorrectOption) {
-            optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
-          }
-        } else if (isSelected) {
-          optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            style: {
-              ...optionStyle,
-              cursor: showFeedback ? "default" : "pointer"
-            },
-            onClick: () => !showFeedback && handleAnswerChange(option),
-            children: option
-          },
-          idx
-        );
-      }) }),
-      currentQuestion.type === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
-        const selected = Array.isArray(selectedAnswer) && selectedAnswer.includes(option);
-        const correctAnswers = Array.isArray(currentQuestion.correctAnswer) ? currentQuestion.correctAnswer : currentQuestion.correctAnswer ? [currentQuestion.correctAnswer] : [];
-        const isCorrectOption = correctAnswers.includes(option);
-        let optionStyle = { ...defaultStyles.option };
-        if (showFeedback) {
-          if (isCorrectOption) {
-            optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
-          } else if (selected && !isCorrectOption) {
-            optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
-          }
-        } else if (selected) {
-          optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            style: {
-              ...optionStyle,
-              cursor: showFeedback ? "default" : "pointer"
-            },
-            onClick: () => {
-              if (showFeedback) return;
-              const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
-              if (selected) {
-                handleAnswerChange(current.filter((o) => o !== option));
-              } else {
-                handleAnswerChange([...current, option]);
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.mainLayout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.quizContent, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...defaultStyles.question, position: "relative", paddingBottom: "40px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.questionText, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: currentQuestion.question, inline: true, size: "md" }) }),
+          isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              onClick: () => setShowSkipModal(true),
+              title: "Skip question",
+              style: {
+                position: "absolute",
+                bottom: "8px",
+                left: "0",
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                padding: "6px 10px",
+                borderRadius: "6px",
+                color: "#9ca3af",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "4px",
+                fontSize: "12px",
+                opacity: 0.6,
+                transition: "opacity 0.2s, color 0.2s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.opacity = "1";
+                e.currentTarget.style.color = "#6b7280";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.opacity = "0.6";
+                e.currentTarget.style.color = "#9ca3af";
+              },
+              "data-testid": "button-skip-question",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "5 4 15 12 5 20 5 4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "19", y1: "5", x2: "19", y2: "19" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Skip" })
+              ]
+            }
+          ),
+          !isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "button",
+            {
+              onClick: () => setShowReportModal(true),
+              title: "Report an issue with this question",
+              style: {
+                position: "absolute",
+                bottom: "8px",
+                left: "0",
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                padding: "6px 10px",
+                borderRadius: "6px",
+                color: "#9ca3af",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "4px",
+                fontSize: "12px",
+                opacity: 0.6,
+                transition: "opacity 0.2s, color 0.2s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.opacity = "1";
+                e.currentTarget.style.color = "#ef4444";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.opacity = "0.6";
+                e.currentTarget.style.color = "#9ca3af";
+              },
+              "data-testid": "button-report-question",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Report" })
+              ]
+            }
+          ),
+          (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
+            const isSelected = selectedAnswer === option;
+            const isCorrectOption = currentQuestion.correctAnswer === option;
+            let optionStyle = { ...defaultStyles.option };
+            if (showFeedback) {
+              if (isCorrectOption) {
+                optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
+              } else if (isSelected && !isCorrectOption) {
+                optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
+              }
+            } else if (isSelected) {
+              optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                style: {
+                  ...optionStyle,
+                  cursor: showFeedback ? "default" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px"
+                },
+                onClick: () => !showFeedback && handleAnswerChange(option),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: option })
+                ]
+              },
+              idx
+            );
+          }) }),
+          currentQuestion.type === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
+            const selected = Array.isArray(selectedAnswer) && selectedAnswer.includes(option);
+            const correctAnswers = Array.isArray(currentQuestion.correctAnswer) ? currentQuestion.correctAnswer : currentQuestion.correctAnswer ? [currentQuestion.correctAnswer] : [];
+            const isCorrectOption = correctAnswers.includes(option);
+            let optionStyle = { ...defaultStyles.option };
+            if (showFeedback) {
+              if (isCorrectOption) {
+                optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
+              } else if (selected && !isCorrectOption) {
+                optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
               }
+            } else if (selected) {
+              optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                style: {
+                  ...optionStyle,
+                  cursor: showFeedback ? "default" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px"
+                },
+                onClick: () => {
+                  if (showFeedback) return;
+                  const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
+                  if (selected) {
+                    handleAnswerChange(current.filter((o) => o !== option));
+                  } else {
+                    handleAnswerChange([...current, option]);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: option })
+                ]
+              },
+              idx
+            );
+          }) }),
+          (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "textarea",
+            {
+              style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
+              value: selectedAnswer || "",
+              onChange: (e) => handleAnswerChange(e.target.value),
+              placeholder: "Type your answer here...",
+              disabled: showFeedback
+            }
+          ),
+          currentQuestion.type === "fill" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              style: defaultStyles.input,
+              value: (Array.isArray(selectedAnswer) ? selectedAnswer[idx] : "") || "",
+              onChange: (e) => {
+                const current = Array.isArray(selectedAnswer) ? [...selectedAnswer] : [];
+                current[idx] = e.target.value;
+                handleAnswerChange(current);
+              },
+              placeholder: `Blank ${idx + 1}`,
+              disabled: showFeedback
             },
-            children: option
-          },
-          idx
-        );
-      }) }),
-      (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "textarea",
-        {
-          style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
-          value: selectedAnswer || "",
-          onChange: (e) => handleAnswerChange(e.target.value),
-          placeholder: "Type your answer here...",
-          disabled: showFeedback
-        }
-      ),
-      currentQuestion.type === "fill" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
-        {
-          style: defaultStyles.input,
-          value: (Array.isArray(selectedAnswer) ? selectedAnswer[idx] : "") || "",
-          onChange: (e) => {
-            const current = Array.isArray(selectedAnswer) ? [...selectedAnswer] : [];
-            current[idx] = e.target.value;
-            handleAnswerChange(current);
-          },
-          placeholder: `Blank ${idx + 1}`,
-          disabled: showFeedback
-        },
-        idx
-      )) }),
-      showFeedback && currentAnswerDetail && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
-        ...defaultStyles.feedback,
-        ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
-      }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-          ...defaultStyles.feedbackTitle,
-          ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
-        }, children: currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
-        currentQuestion.explanation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.buttonsColumn, children: [
-      showFeedback && isLastQuestion && canAddMore && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+            idx
+          )) }),
+          showFeedback && currentAnswerDetail && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+            ...defaultStyles.feedback,
+            ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+              ...defaultStyles.feedbackTitle,
+              ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
+            }, children: currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
+            currentQuestion.explanation && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
+          ] })
+        ] }),
+        showSkipModal && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1e3
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+          backgroundColor: "#ffffff",
+          borderRadius: "12px",
+          padding: "24px",
+          maxWidth: "400px",
+          width: "90%",
+          boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Skip Question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "Help us improve by telling us why you're skipping this question." }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", marginBottom: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => setSelectedSkipReason("question_issue"),
+                disabled: isSkipping,
+                style: {
+                  padding: "12px 16px",
+                  borderRadius: "8px",
+                  border: selectedSkipReason === "question_issue" ? "2px solid #8b5cf6" : "1px solid #e5e7eb",
+                  backgroundColor: selectedSkipReason === "question_issue" ? "#f5f3ff" : "#f9fafb",
+                  cursor: isSkipping ? "not-allowed" : "pointer",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                  color: "#374151",
+                  textAlign: "left",
+                  opacity: isSkipping ? 0.6 : 1
+                },
+                "data-testid": "button-skip-reason-issue",
+                children: "Question has an issue"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => setSelectedSkipReason("dont_know"),
+                disabled: isSkipping,
+                style: {
+                  padding: "12px 16px",
+                  borderRadius: "8px",
+                  border: selectedSkipReason === "dont_know" ? "2px solid #8b5cf6" : "1px solid #e5e7eb",
+                  backgroundColor: selectedSkipReason === "dont_know" ? "#f5f3ff" : "#f9fafb",
+                  cursor: isSkipping ? "not-allowed" : "pointer",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                  color: "#374151",
+                  textAlign: "left",
+                  opacity: isSkipping ? 0.6 : 1
+                },
+                "data-testid": "button-skip-reason-dont-know",
+                children: "I don't know the answer"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" }, children: "Additional details (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "textarea",
+              {
+                value: skipComment,
+                onChange: (e) => setSkipComment(e.target.value.slice(0, 200)),
+                placeholder: "Tell us more about the issue...",
+                disabled: isSkipping,
+                style: {
+                  width: "100%",
+                  minHeight: "80px",
+                  padding: "10px 12px",
+                  borderRadius: "8px",
+                  border: "1px solid #e5e7eb",
+                  fontSize: "14px",
+                  resize: "vertical",
+                  fontFamily: "inherit",
+                  boxSizing: "border-box"
+                },
+                "data-testid": "input-skip-comment"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
+              skipComment.length,
+              "/200"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  setShowSkipModal(false);
+                  setSkipComment("");
+                  setSelectedSkipReason(null);
+                },
+                style: {
+                  flex: 1,
+                  padding: "10px 16px",
+                  borderRadius: "8px",
+                  border: "1px solid #e5e7eb",
+                  backgroundColor: "#ffffff",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                  color: "#6b7280"
+                },
+                "data-testid": "button-skip-cancel",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => selectedSkipReason && handleSkipQuestion(selectedSkipReason, skipComment),
+                disabled: isSkipping || !selectedSkipReason,
+                style: {
+                  flex: 1,
+                  padding: "10px 16px",
+                  borderRadius: "8px",
+                  border: "none",
+                  backgroundColor: selectedSkipReason ? "#8b5cf6" : "#d1d5db",
+                  cursor: isSkipping || !selectedSkipReason ? "not-allowed" : "pointer",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                  color: "#ffffff",
+                  opacity: isSkipping ? 0.6 : 1
+                },
+                "data-testid": "button-skip-submit",
+                children: isSkipping ? "Skipping..." : "Skip Question"
+              }
+            )
+          ] })
+        ] }) }),
+        showReportModal && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1e3
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+          backgroundColor: "#ffffff",
+          borderRadius: "12px",
+          padding: "24px",
+          maxWidth: "400px",
+          width: "90%",
+          boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Report Question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "What's wrong with this question?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "textarea",
+              {
+                value: reportComment,
+                onChange: (e) => setReportComment(e.target.value.slice(0, 300)),
+                placeholder: "Describe the issue with this question...",
+                disabled: isReporting,
+                style: {
+                  width: "100%",
+                  minHeight: "120px",
+                  padding: "10px 12px",
+                  borderRadius: "8px",
+                  border: "1px solid #e5e7eb",
+                  fontSize: "14px",
+                  resize: "vertical",
+                  fontFamily: "inherit",
+                  boxSizing: "border-box"
+                },
+                "data-testid": "input-report-comment"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
+              reportComment.length,
+              "/300"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  setShowReportModal(false);
+                  setReportComment("");
+                },
+                style: {
+                  flex: 1,
+                  padding: "10px 16px",
+                  borderRadius: "8px",
+                  border: "1px solid #e5e7eb",
+                  backgroundColor: "#ffffff",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                  color: "#6b7280"
+                },
+                "data-testid": "button-report-cancel",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => handleReportQuestion(reportComment),
+                disabled: isReporting || !reportComment.trim(),
+                style: {
+                  flex: 1,
+                  padding: "10px 16px",
+                  borderRadius: "8px",
+                  border: "none",
+                  backgroundColor: reportComment.trim() ? "#ef4444" : "#d1d5db",
+                  cursor: isReporting || !reportComment.trim() ? "not-allowed" : "pointer",
+                  fontSize: "14px",
+                  fontWeight: "500",
+                  color: "#ffffff",
+                  opacity: isReporting ? 0.6 : 1
+                },
+                "data-testid": "button-report-submit",
+                children: isReporting ? "Reporting..." : "Report"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.buttonsColumn, children: [
+          showFeedback && isLastQuestion && canAddMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              style: {
+                ...defaultStyles.buttonAddMore,
+                ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
+              },
+              onClick: handleAddMoreQuestions,
+              disabled: isGeneratingExtra,
+              "data-testid": "button-add-more-questions",
+              children: isGeneratingExtra ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }),
+                "Generating Questions..."
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                "+ Add ",
+                questionsToAdd,
+                " More Question",
+                questionsToAdd !== 1 ? "s" : ""
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...defaultStyles.buttons, justifyContent: "flex-end" }, children: showFeedback ? (
+            // After viewing feedback
+            isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                style: {
+                  ...defaultStyles.button,
+                  ...isSubmitting || isGeneratingExtra ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
+                },
+                onClick: handleSubmit,
+                disabled: isSubmitting || isGeneratingExtra,
+                "data-testid": "button-submit-quiz",
+                children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                style: {
+                  ...defaultStyles.button,
+                  ...defaultStyles.buttonPrimary
+                },
+                onClick: handleContinue,
+                "data-testid": "button-continue",
+                children: "Continue"
+              }
+            )
+          ) : (
+            // Before checking answer
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                style: {
+                  ...defaultStyles.button,
+                  ...isNavigating || selectedAnswer === void 0 ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
+                },
+                onClick: handleCheckAnswer,
+                disabled: isNavigating || selectedAnswer === void 0,
+                "data-testid": "button-check-answer",
+                children: isNavigating ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Check Answer"
+              }
+            )
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.chatPanel, children: apiClient.current && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        QuestionChatPanel,
         {
-          style: {
-            ...defaultStyles.buttonAddMore,
-            ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
+          apiClient: apiClient.current,
+          question: {
+            id: currentQuestion.id,
+            question: currentQuestion.question,
+            type: currentQuestion.type,
+            options: currentQuestion.options,
+            correctAnswer: currentQuestion.correctAnswer,
+            explanation: currentQuestion.explanation
           },
-          onClick: handleAddMoreQuestions,
-          disabled: isGeneratingExtra,
-          "data-testid": "button-add-more-questions",
-          children: isGeneratingExtra ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: 16, color: "#9ca3af" }),
-            "Generating Questions..."
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            "+ Add ",
-            questionsToAdd,
-            " More Question",
-            questionsToAdd !== 1 ? "s" : ""
-          ] })
+          quizId: quiz.id,
+          childId,
+          parentId,
+          lessonId,
+          courseId
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...defaultStyles.buttons, justifyContent: "flex-end" }, children: showFeedback ? (
-        // After viewing feedback
-        isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            style: {
-              ...defaultStyles.button,
-              ...isSubmitting || isGeneratingExtra ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
-            },
-            onClick: handleSubmit,
-            disabled: isSubmitting || isGeneratingExtra,
-            "data-testid": "button-submit-quiz",
-            children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            style: {
-              ...defaultStyles.button,
-              ...defaultStyles.buttonPrimary
-            },
-            onClick: handleContinue,
-            "data-testid": "button-continue",
-            children: "Continue"
-          }
-        )
-      ) : (
-        // Before checking answer
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            style: {
-              ...defaultStyles.button,
-              ...isNavigating || selectedAnswer === void 0 ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
-            },
-            onClick: handleCheckAnswer,
-            disabled: isNavigating || selectedAnswer === void 0,
-            "data-testid": "button-check-answer",
-            children: isNavigating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Check Answer"
-          }
-        )
       ) })
     ] })
   ] });
 }
 
 // src/AttemptViewer.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultStyles2 = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
@@ -1401,10 +2703,10 @@ function AttemptViewer({
   showExplanations = true,
   title
 }) {
-  const [attempt, setAttempt] = (0, import_react2.useState)(null);
-  const [loading, setLoading] = (0, import_react2.useState)(true);
-  const [error, setError] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
+  const [attempt, setAttempt] = (0, import_react4.useState)(null);
+  const [loading, setLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
     const apiClient = new QuizApiClient({
       baseUrl: apiBaseUrl,
       authToken
@@ -1437,49 +2739,49 @@ function AttemptViewer({
     window.location.reload();
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.container, className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: spinnerKeyframes }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.loading, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.spinner }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginTop: "16px", color: "#6b7280" }, children: "Loading attempt..." })
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.container, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: spinnerKeyframes }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.loading, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.spinner }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { marginTop: "16px", color: "#6b7280" }, children: "Loading attempt..." })
       ] })
     ] });
   }
   if (error || !attempt) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.container, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.error, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: "18px", fontWeight: "500" }, children: "Failed to load attempt" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginTop: "8px", color: "#6b7280" }, children: error }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: defaultStyles2.retryButton, onClick: handleRetry, children: "Try Again" })
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.container, className, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.error, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { fontSize: "18px", fontWeight: "500" }, children: "Failed to load attempt" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { marginTop: "8px", color: "#6b7280" }, children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { style: defaultStyles2.retryButton, onClick: handleRetry, children: "Try Again" })
     ] }) });
   }
   const scorePercentage = attempt.score ?? 0;
   const correctCount = attempt.correctAnswers ?? 0;
   const totalQuestions = attempt.totalQuestions;
   const timeSpent = attempt.timeSpentSeconds ?? 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.container, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: spinnerKeyframes }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.header, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryGrid, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.container, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: spinnerKeyframes }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.header, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.summaryGrid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.summaryValue, children: [
           scorePercentage,
           "%"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Score" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Score" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryValue, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.summaryValue, children: [
           correctCount,
           "/",
           totalQuestions
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Correct" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Correct" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryValue, children: formatTime(timeSpent) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Time" })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.summaryValue, children: formatTime(timeSpent) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Time" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.questionsList, children: attempt.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.questionsList, children: attempt.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         style: {
@@ -1487,12 +2789,12 @@ function AttemptViewer({
           ...answer.isCorrect ? defaultStyles2.questionCardCorrect : defaultStyles2.questionCardIncorrect
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.questionHeader, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: defaultStyles2.questionNumber, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.questionHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: defaultStyles2.questionNumber, children: [
               "Question ",
               index + 1
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "span",
               {
                 style: {
@@ -1503,23 +2805,23 @@ function AttemptViewer({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.questionText, children: answer.questionText }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.answerSection, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.answerLabel, children: "Your answer:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.studentAnswer, children: formatAnswer(answer.selectedAnswer) })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.questionText, children: answer.questionText }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.answerSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: defaultStyles2.answerLabel, children: "Your answer:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: defaultStyles2.studentAnswer, children: formatAnswer(answer.selectedAnswer) })
           ] }),
-          !answer.isCorrect && answer.correctAnswer && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.answerSection, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.answerLabel, children: "Correct answer:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.correctAnswer, children: formatAnswer(answer.correctAnswer) })
+          !answer.isCorrect && answer.correctAnswer && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.answerSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: defaultStyles2.answerLabel, children: "Correct answer:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: defaultStyles2.correctAnswer, children: formatAnswer(answer.correctAnswer) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.points, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.points, children: [
             answer.pointsEarned,
             " / ",
             answer.points,
             " points"
           ] }),
-          showExplanations && answer.explanation && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.explanation, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Explanation:" }),
+          showExplanations && answer.explanation && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.explanation, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Explanation:" }),
             " ",
             answer.explanation
           ] })
@@ -1534,6 +2836,7 @@ function AttemptViewer({
   AttemptViewer,
   QuizApiClient,
   QuizPlayer,
+  TextToSpeech,
   calculateScore,
   checkAnswer,
   createAnswerDetail,