@schoolio/player 1.4.0 → 1.4.2

package/dist/index.js

@@ -113,6 +113,29 @@ var QuizApiClient = class {
       `/api/external/question-chat/${questionId}/${childId}`
     );
   }
+  async getChatsByAttempt(attemptId) {
+    return this.request(
+      "GET",
+      `/api/external/quiz-attempts/${attemptId}/chats`
+    );
+  }
+  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
@@ -515,9 +538,13 @@ var panelStyles = {
   messageRow: {
     display: "flex"
   },
+  messageContent: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: "4px",
+    maxWidth: "85%"
+  },
   userMessage: {
-    maxWidth: "85%",
-    marginLeft: "auto",
     padding: "10px 14px",
     borderRadius: "16px 16px 4px 16px",
     backgroundColor: "#6721b0",
@@ -526,8 +553,6 @@ var panelStyles = {
     lineHeight: 1.4
   },
   assistantMessage: {
-    maxWidth: "85%",
-    marginRight: "auto",
     padding: "10px 14px",
     borderRadius: "16px 16px 16px 4px",
     backgroundColor: "#ffffff",
@@ -541,7 +566,8 @@ var panelStyles = {
     borderTop: "1px solid #e2e8f0",
     backgroundColor: "#ffffff",
     display: "flex",
-    gap: "8px"
+    gap: "8px",
+    alignItems: "center"
   },
   input: {
     flex: 1,
@@ -551,13 +577,11 @@ var panelStyles = {
     fontSize: "14px",
     outline: "none"
   },
-  sendButton: {
+  buttonBase: {
     width: "40px",
     height: "40px",
     borderRadius: "50%",
     border: "none",
-    backgroundColor: "#6721b0",
-    color: "#ffffff",
     cursor: "pointer",
     display: "flex",
     alignItems: "center",
@@ -565,10 +589,47 @@ var panelStyles = {
     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",
@@ -606,6 +667,33 @@ var STARTER_PROMPTS = [
   { 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,
@@ -613,20 +701,130 @@ function QuestionChatPanel({
   childId,
   parentId,
   lessonId,
-  courseId
+  courseId,
+  answerResult
 }) {
   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 [hasOfferedHelp, setHasOfferedHelp] = (0, import_react2.useState)(false);
   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]);
@@ -634,19 +832,35 @@ function QuestionChatPanel({
     setMessages([]);
     setChatId(null);
     setInputValue("");
+    setHasOfferedHelp(false);
     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]);
+  }, [question.id, childId, apiClient, preCacheAudio]);
+  (0, import_react2.useEffect)(() => {
+    if (answerResult?.wasIncorrect && !hasOfferedHelp) {
+      setHasOfferedHelp(true);
+      const selectedAnswerText = answerResult.selectedAnswer || "that answer";
+      const helpMessage = `Looks like you chose "${selectedAnswerText}" which was incorrect. Would you like me to help explain the correct answer?`;
+      const assistantMessage = {
+        role: "assistant",
+        content: helpMessage,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+      preCacheAudio(helpMessage);
+    }
+  }, [answerResult, hasOfferedHelp, preCacheAudio]);
   const initializeChat = async () => {
     if (chatId) return chatId;
     try {
@@ -668,6 +882,9 @@ function QuestionChatPanel({
   };
   const sendMessage = async (messageText) => {
     if (!messageText.trim() || isLoading) return;
+    if (isListening) {
+      stopListening();
+    }
     setIsLoading(true);
     const userMsg = {
       role: "user",
@@ -687,15 +904,23 @@ function QuestionChatPanel({
         questionContext: question,
         childId
       });
-      setMessages((prev) => [...prev, response.assistantMessage]);
+      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: "Sorry, I'm having trouble right now. Please try again!",
+        content,
         timestamp: (/* @__PURE__ */ new Date()).toISOString()
       };
       setMessages((prev) => [...prev, errorMsg]);
+      preCacheAudio(content);
     } finally {
       setIsLoading(false);
     }
@@ -712,14 +937,14 @@ function QuestionChatPanel({
             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.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" })
-      ] }) }),
+      /* @__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)(
@@ -746,7 +971,26 @@ function QuestionChatPanel({
             ...panelStyles.messageRow,
             justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: msg.role === "user" ? panelStyles.userMessage : panelStyles.assistantMessage, children: msg.content })
+          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
       )),
@@ -765,26 +1009,38 @@ function QuestionChatPanel({
           value: inputValue,
           onChange: (e) => setInputValue(e.target.value),
           onKeyPress: handleKeyPress,
-          placeholder: "Ask about this question...",
+          placeholder: isListening ? "Listening..." : "Ask about this question...",
           style: panelStyles.input,
-          disabled: isLoading,
+          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.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" })
-          ] })
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SendIcon, {})
         }
       )
     ] })
@@ -797,15 +1053,28 @@ var defaultStyles = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
     width: "100%",
+    height: "100%",
     padding: "20px",
     backgroundColor: "#ffffff",
     borderRadius: "12px",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column"
   },
   header: {
     marginBottom: "20px",
     borderBottom: "1px solid #e5e7eb",
-    paddingBottom: "16px"
+    paddingBottom: "16px",
+    display: "flex",
+    flexDirection: "column"
+  },
+  headerTop: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  },
+  headerLeft: {
+    flex: 1
   },
   title: {
     fontSize: "24px",
@@ -817,7 +1086,8 @@ var defaultStyles = {
     color: "#6b7280"
   },
   progressBar: {
-    width: "100%",
+    width: "50%",
+    maxWidth: "300px",
     height: "8px",
     backgroundColor: "#e5e7eb",
     borderRadius: "4px",
@@ -932,16 +1202,21 @@ var defaultStyles = {
   },
   mainLayout: {
     display: "flex",
-    gap: "24px"
+    gap: "24px",
+    flex: 1,
+    minHeight: 0,
+    alignItems: "stretch"
   },
   quizContent: {
     flex: 1,
-    minWidth: 0
+    minWidth: 0,
+    overflow: "auto"
   },
   chatPanel: {
     width: "320px",
     flexShrink: 0,
-    height: "460px"
+    display: "flex",
+    flexDirection: "column"
   },
   timer: {
     fontSize: "14px",
@@ -1149,6 +1424,16 @@ function QuizPlayer({
   const apiClient = (0, import_react3.useRef)(null);
   const timerRef = (0, import_react3.useRef)(null);
   const startTimeRef = (0, import_react3.useRef)(0);
+  const onCompleteRef = (0, import_react3.useRef)(onComplete);
+  const onErrorRef = (0, import_react3.useRef)(onError);
+  const onProgressRef = (0, import_react3.useRef)(onProgress);
+  const onGenerateMoreQuestionsRef = (0, import_react3.useRef)(onGenerateMoreQuestions);
+  (0, import_react3.useEffect)(() => {
+    onCompleteRef.current = onComplete;
+    onErrorRef.current = onError;
+    onProgressRef.current = onProgress;
+    onGenerateMoreQuestionsRef.current = onGenerateMoreQuestions;
+  });
   (0, import_react3.useEffect)(() => {
     apiClient.current = new QuizApiClient({ baseUrl: apiBaseUrl, authToken });
   }, [apiBaseUrl, authToken]);
@@ -1195,11 +1480,11 @@ function QuizPlayer({
         const message = err instanceof Error ? err.message : "Failed to load quiz";
         setError(message);
         setIsLoading(false);
-        onError?.(err instanceof Error ? err : new Error(message));
+        onErrorRef.current?.(err instanceof Error ? err : new Error(message));
       }
     }
     initialize();
-  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt, onError]);
+  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt]);
   (0, import_react3.useEffect)(() => {
     if (timerStarted && !isCompleted && !error) {
       startTimeRef.current = Date.now();
@@ -1225,14 +1510,14 @@ function QuizPlayer({
   const totalQuestions = allQuestions.length;
   const maxQuestions = 50;
   (0, import_react3.useEffect)(() => {
-    if (quiz && onProgress) {
-      onProgress({
+    if (quiz && onProgressRef.current) {
+      onProgressRef.current({
         currentQuestion: currentQuestionIndex + 1,
         totalQuestions,
         answeredQuestions: answers.size
       });
     }
-  }, [currentQuestionIndex, answers.size, quiz, onProgress, totalQuestions]);
+  }, [currentQuestionIndex, answers.size, quiz, totalQuestions]);
   const currentQuestion = allQuestions[currentQuestionIndex];
   const handleAnswerChange = (0, import_react3.useCallback)((value) => {
     if (!currentQuestion) return;
@@ -1277,7 +1562,7 @@ function QuizPlayer({
     if (totalQuestions >= maxQuestions) return;
     setIsGeneratingExtra(true);
     try {
-      const result2 = await onGenerateMoreQuestions(attempt.id, totalQuestions);
+      const result2 = await onGenerateMoreQuestionsRef.current(attempt.id, totalQuestions);
       if (result2.extraQuestions && result2.extraQuestions.length > 0) {
         const slotsAvailable = maxQuestions - totalQuestions;
         const questionsToAppend = result2.extraQuestions.slice(0, slotsAvailable);
@@ -1290,11 +1575,11 @@ function QuizPlayer({
       }
     } catch (err) {
       console.error("Failed to generate extra questions:", err);
-      onError?.(err instanceof Error ? err : new Error("Failed to generate extra questions"));
+      onErrorRef.current?.(err instanceof Error ? err : new Error("Failed to generate extra questions"));
     } finally {
       setIsGeneratingExtra(false);
     }
-  }, [attempt, onGenerateMoreQuestions, isGeneratingExtra, totalQuestions, maxQuestions, onError]);
+  }, [attempt, isGeneratingExtra, totalQuestions, maxQuestions]);
   const handleSubmit = (0, import_react3.useCallback)(async () => {
     if (!quiz || !attempt || !apiClient.current) return;
     setIsSubmitting(true);
@@ -1333,15 +1618,15 @@ function QuizPlayer({
       if (timerRef.current) {
         clearInterval(timerRef.current);
       }
-      onComplete?.(quizResult);
+      onCompleteRef.current?.(quizResult);
     } catch (err) {
       const message = err instanceof Error ? err.message : "Failed to submit quiz";
       setError(message);
-      onError?.(err instanceof Error ? err : new Error(message));
+      onErrorRef.current?.(err instanceof Error ? err : new Error(message));
     } finally {
       setIsSubmitting(false);
     }
-  }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError, totalQuestions, timerStarted, elapsedSeconds]);
+  }, [quiz, attempt, currentQuestion, answers, answersDetail, 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;
@@ -1377,7 +1662,7 @@ function QuizPlayer({
           timeSpentSeconds: elapsedSeconds
         };
         setResult(quizResult);
-        onComplete?.(quizResult);
+        onCompleteRef.current?.(quizResult);
       } else if (currentQuestionIndex >= newTotalQuestions) {
         setCurrentQuestionIndex(newTotalQuestions - 1);
       }
@@ -1389,7 +1674,7 @@ function QuizPlayer({
     } finally {
       setIsSkipping(false);
     }
-  }, [currentQuestion, apiClient, attempt, quiz, childId, parentId, lessonId, courseId, assignLessonId, skippedQuestionIds, extraQuestions, currentQuestionIndex, elapsedSeconds, onComplete]);
+  }, [currentQuestion, apiClient, attempt, quiz, childId, parentId, lessonId, courseId, assignLessonId, skippedQuestionIds, extraQuestions, currentQuestionIndex, elapsedSeconds]);
   const handleReportQuestion = (0, import_react3.useCallback)(async (comment) => {
     if (!currentQuestion || !apiClient.current || !attempt || !comment.trim()) return;
     setIsReporting(true);
@@ -1759,533 +2044,537 @@ function QuizPlayer({
   const remainingSlots = maxQuestions - totalQuestions;
   const questionsToAdd = Math.min(5, remainingSlots);
   const canAddMore = onGenerateMoreQuestions && remainingSlots > 0;
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: defaultStyles.container, children: /* @__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.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_runtime3.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_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 && !showFeedback && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "button",
+      /* @__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",
             {
-              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",
+                ...optionStyle,
+                cursor: showFeedback ? "default" : "pointer",
                 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";
+                gap: "8px"
               },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.opacity = "0.6";
-                e.currentTarget.style.color = "#9ca3af";
-              },
-              "data-testid": "button-skip-question",
+              onClick: () => !showFeedback && handleAnswerChange(option),
               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" })
+                /* @__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 };
             }
-          ),
-          !isExtraQuestion && !showFeedback && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "button",
+          } else if (selected) {
+            optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
             {
-              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",
+                ...optionStyle,
+                cursor: showFeedback ? "default" : "pointer",
                 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";
+                gap: "8px"
               },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.opacity = "0.6";
-                e.currentTarget.style.color = "#9ca3af";
+              onClick: () => {
+                if (showFeedback) return;
+                const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
+                if (selected) {
+                  handleAnswerChange(current.filter((o) => o !== option));
+                } else {
+                  handleAnswerChange([...current, option]);
+                }
               },
-              "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" })
+                /* @__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
+          },
+          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"
             }
           ),
-          (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 })
-                ]
+          /* @__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
               },
-              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 };
+              "data-testid": "button-skip-reason-dont-know",
+              children: "I don't know the answer"
             }
-            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)(
+          )
+        ] }),
+        /* @__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",
             {
-              style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
-              value: selectedAnswer || "",
-              onChange: (e) => handleAnswerChange(e.target.value),
-              placeholder: "Type your answer here...",
-              disabled: showFeedback
+              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"
             }
           ),
-          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",
+          /* @__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",
             {
-              style: defaultStyles.input,
-              value: (Array.isArray(selectedAnswer) ? selectedAnswer[idx] : "") || "",
-              onChange: (e) => {
-                const current = Array.isArray(selectedAnswer) ? [...selectedAnswer] : [];
-                current[idx] = e.target.value;
-                handleAnswerChange(current);
+              onClick: () => {
+                setShowSkipModal(false);
+                setSkipComment("");
+                setSelectedSkipReason(null);
               },
-              placeholder: `Blank ${idx + 1}`,
-              disabled: showFeedback
-            },
-            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 })
+              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"
           ] })
         ] }),
-        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)(
+        /* @__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: {
-                ...defaultStyles.buttonAddMore,
-                ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
+                flex: 1,
+                padding: "10px 16px",
+                borderRadius: "8px",
+                border: "1px solid #e5e7eb",
+                backgroundColor: "#ffffff",
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#6b7280"
               },
-              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" : ""
-              ] })
+              "data-testid": "button-report-cancel",
+              children: "Cancel"
             }
           ),
-          /* @__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)(
+            "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.jsx)("div", { style: defaultStyles.chatPanel, children: apiClient.current && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        QuestionChatPanel,
-        {
-          apiClient: apiClient.current,
-          question: {
-            id: currentQuestion.id,
-            question: currentQuestion.question,
-            type: currentQuestion.type,
-            options: currentQuestion.options,
-            correctAnswer: currentQuestion.correctAnswer,
-            explanation: currentQuestion.explanation
-          },
-          quizId: quiz.id,
-          childId,
-          parentId,
-          lessonId,
-          courseId
-        }
-      ) })
-    ] })
-  ] });
+      ] }) }),
+      /* @__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,
+      {
+        apiClient: apiClient.current,
+        question: {
+          id: currentQuestion.id,
+          question: currentQuestion.question,
+          type: currentQuestion.type,
+          options: currentQuestion.options,
+          correctAnswer: currentQuestion.correctAnswer,
+          explanation: currentQuestion.explanation
+        },
+        quizId: quiz.id,
+        childId,
+        parentId,
+        lessonId,
+        courseId,
+        answerResult: showFeedback && currentAnswerDetail ? {
+          wasIncorrect: !currentAnswerDetail.isCorrect,
+          selectedAnswer: typeof selectedAnswer === "string" ? selectedAnswer : Array.isArray(selectedAnswer) ? selectedAnswer.join(", ") : void 0,
+          correctAnswer: typeof currentQuestion.correctAnswer === "string" ? currentQuestion.correctAnswer : Array.isArray(currentQuestion.correctAnswer) ? currentQuestion.correctAnswer.join(", ") : void 0,
+          explanation: currentQuestion.explanation
+        } : void 0
+      }
+    ) })
+  ] }) });
 }
 
 // src/AttemptViewer.tsx
@@ -2411,6 +2700,46 @@ var defaultStyles2 = {
     fontSize: "14px",
     color: "#581c87"
   },
+  chatHistorySection: {
+    marginTop: "12px",
+    borderTop: "1px solid #e5e7eb",
+    paddingTop: "12px"
+  },
+  chatToggleButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 12px",
+    backgroundColor: "#f3f4f6",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "13px",
+    color: "#6b7280",
+    cursor: "pointer",
+    fontWeight: "500"
+  },
+  chatMessages: {
+    marginTop: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  chatMessage: {
+    padding: "8px 12px",
+    borderRadius: "8px",
+    fontSize: "13px",
+    maxWidth: "85%"
+  },
+  chatMessageUser: {
+    backgroundColor: "#6721b0",
+    color: "#ffffff",
+    alignSelf: "flex-end"
+  },
+  chatMessageAssistant: {
+    backgroundColor: "#f3f4f6",
+    color: "#111827",
+    alignSelf: "flex-start"
+  },
   loading: {
     textAlign: "center",
     padding: "40px 20px"
@@ -2468,11 +2797,14 @@ function AttemptViewer({
   onError,
   className,
   showExplanations = true,
+  showConversation = false,
   title
 }) {
   const [attempt, setAttempt] = (0, import_react4.useState)(null);
   const [loading, setLoading] = (0, import_react4.useState)(true);
   const [error, setError] = (0, import_react4.useState)(null);
+  const [chatHistories, setChatHistories] = (0, import_react4.useState)({});
+  const [expandedChats, setExpandedChats] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
   (0, import_react4.useEffect)(() => {
     const apiClient = new QuizApiClient({
       baseUrl: apiBaseUrl,
@@ -2490,6 +2822,14 @@ function AttemptViewer({
         }
         const data = await response.json();
         setAttempt(data);
+        if (showConversation) {
+          try {
+            const chats = await apiClient.getChatsByAttempt(attemptId);
+            setChatHistories(chats);
+          } catch (chatErr) {
+            console.error("Failed to load chat histories:", chatErr);
+          }
+        }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Failed to load attempt";
         setError(errorMessage);
@@ -2499,7 +2839,18 @@ function AttemptViewer({
       }
     }
     fetchAttempt();
-  }, [attemptId, apiBaseUrl, authToken, onError]);
+  }, [attemptId, apiBaseUrl, authToken, onError, showConversation]);
+  const toggleChatExpanded = (questionId) => {
+    setExpandedChats((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(questionId)) {
+        newSet.delete(questionId);
+      } else {
+        newSet.add(questionId);
+      }
+      return newSet;
+    });
+  };
   const handleRetry = () => {
     setLoading(true);
     setError(null);
@@ -2591,6 +2942,34 @@ function AttemptViewer({
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Explanation:" }),
             " ",
             answer.explanation
+          ] }),
+          showConversation && chatHistories[answer.questionId] && chatHistories[answer.questionId].messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.chatHistorySection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "button",
+              {
+                style: defaultStyles2.chatToggleButton,
+                onClick: () => toggleChatExpanded(answer.questionId),
+                "data-testid": `button-toggle-chat-${answer.questionId}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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_runtime4.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
+                  expandedChats.has(answer.questionId) ? "Hide" : "View",
+                  " Chat History (",
+                  chatHistories[answer.questionId].messages.length,
+                  " messages)"
+                ]
+              }
+            ),
+            expandedChats.has(answer.questionId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.chatMessages, children: chatHistories[answer.questionId].messages.map((msg, msgIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                style: {
+                  ...defaultStyles2.chatMessage,
+                  ...msg.role === "user" ? defaultStyles2.chatMessageUser : defaultStyles2.chatMessageAssistant
+                },
+                children: msg.content
+              },
+              msgIndex
+            )) })
           ] })
         ]
       },