@schoolio/player 1.2.2 → 1.4.0

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,35 @@ 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}`
+    );
+  }
 };
 
 // src/utils.ts
@@ -172,16 +202,605 @@ 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"
+  },
+  userMessage: {
+    maxWidth: "85%",
+    marginLeft: "auto",
+    padding: "10px 14px",
+    borderRadius: "16px 16px 4px 16px",
+    backgroundColor: "#6721b0",
+    color: "#ffffff",
+    fontSize: "14px",
+    lineHeight: 1.4
+  },
+  assistantMessage: {
+    maxWidth: "85%",
+    marginRight: "auto",
+    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"
+  },
+  input: {
+    flex: 1,
+    padding: "10px 14px",
+    borderRadius: "20px",
+    border: "1px solid #e2e8f0",
+    fontSize: "14px",
+    outline: "none"
+  },
+  sendButton: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "50%",
+    border: "none",
+    backgroundColor: "#6721b0",
+    color: "#ffffff",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "16px",
+    transition: "all 0.2s ease"
+  },
+  sendButtonDisabled: {
+    backgroundColor: "#d1d5db",
+    cursor: "not-allowed"
+  },
+  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?" }
+];
+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 messagesContainerRef = (0, import_react2.useRef)(null);
+  const messagesEndRef = (0, import_react2.useRef)(null);
+  const scrollToBottom = (0, import_react2.useCallback)(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  }, []);
+  (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);
+        }
+      } catch (err) {
+        console.error("Failed to load chat history:", err);
+      }
+    };
+    loadHistory();
+  }, [question.id, childId, apiClient]);
+  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;
+    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
+      });
+      setMessages((prev) => [...prev, response.assistantMessage]);
+    } catch (err) {
+      console.error("Failed to send message:", err);
+      const errorMsg = {
+        role: "assistant",
+        content: "Sorry, I'm having trouble right now. Please try again!",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, errorMsg]);
+    } 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); }
+          }
+        ` }),
+    /* @__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: { 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.jsx)("div", { style: msg.role === "user" ? panelStyles.userMessage : panelStyles.assistantMessage, children: msg.content })
+        },
+        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: "Ask about this question...",
+          style: panelStyles.input,
+          disabled: isLoading,
+          "data-testid": "input-chat-message"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: () => sendMessage(inputValue),
+          disabled: isLoading || !inputValue.trim(),
+          style: {
+            ...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" })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/QuizPlayer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultStyles = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
-    maxWidth: "800px",
-    margin: "0 auto",
+    width: "100%",
     padding: "20px",
     backgroundColor: "#ffffff",
-    borderRadius: "12px"
+    borderRadius: "12px",
+    boxSizing: "border-box"
   },
   header: {
     marginBottom: "20px",
@@ -211,7 +830,8 @@ var defaultStyles = {
     transition: "width 0.3s ease"
   },
   question: {
-    marginBottom: "24px"
+    marginBottom: "24px",
+    minHeight: "280px"
   },
   questionText: {
     fontSize: "18px",
@@ -228,7 +848,12 @@ var defaultStyles = {
     border: "2px solid #e5e7eb",
     borderRadius: "8px",
     cursor: "pointer",
-    transition: "all 0.2s ease"
+    transition: "all 0.2s ease",
+    outline: "none",
+    boxShadow: "none",
+    backgroundColor: "#ffffff",
+    WebkitTapHighlightColor: "transparent",
+    userSelect: "none"
   },
   optionSelected: {
     borderColor: "#6721b0",
@@ -247,7 +872,10 @@ var defaultStyles = {
     padding: "12px 16px",
     border: "2px solid #e5e7eb",
     borderRadius: "8px",
-    fontSize: "16px"
+    fontSize: "16px",
+    outline: "none",
+    boxSizing: "border-box",
+    backgroundColor: "#ffffff"
   },
   buttons: {
     display: "flex",
@@ -276,24 +904,103 @@ var defaultStyles = {
     color: "#9ca3af",
     cursor: "not-allowed"
   },
+  buttonAddMore: {
+    padding: "12px 24px",
+    borderRadius: "8px",
+    fontSize: "16px",
+    fontWeight: "500",
+    cursor: "pointer",
+    border: "2px solid #6721b0",
+    backgroundColor: "transparent",
+    color: "#6721b0",
+    transition: "all 0.2s ease",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
+  },
+  buttonAddMoreDisabled: {
+    border: "2px solid #e5e7eb",
+    color: "#9ca3af",
+    cursor: "not-allowed"
+  },
+  buttonsColumn: {
+    display: "flex",
+    flexDirection: "column",
+    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",
     marginLeft: "16px"
   },
   results: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 24px",
     textAlign: "center",
-    padding: "40px 20px"
+    minHeight: "400px",
+    position: "relative",
+    overflow: "hidden"
   },
-  resultScore: {
-    fontSize: "48px",
-    fontWeight: "700",
-    color: "#6721b0",
-    marginBottom: "8px"
+  resultsBackground: {
+    position: "absolute",
+    inset: "0",
+    borderRadius: "16px",
+    zIndex: 0
+  },
+  resultsContent: {
+    position: "relative",
+    zIndex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
   },
-  resultLabel: {
+  resultDetails: {
     fontSize: "18px",
-    color: "#6b7280"
+    color: "#6b7280",
+    marginBottom: "4px"
+  },
+  resultStars: {
+    display: "flex",
+    justifyContent: "center",
+    gap: "8px",
+    marginBottom: "20px"
+  },
+  resultStar: {
+    fontSize: "32px",
+    animation: "starPop 0.5s ease-out forwards",
+    opacity: 0
+  },
+  confettiContainer: {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    overflow: "hidden",
+    zIndex: 0
+  },
+  confettiPiece: {
+    position: "absolute",
+    width: "10px",
+    height: "10px",
+    top: "-10px",
+    animation: "confettiFall 3s ease-out forwards"
   },
   loading: {
     textAlign: "center",
@@ -304,10 +1011,84 @@ var defaultStyles = {
     textAlign: "center",
     padding: "40px",
     color: "#ef4444"
+  },
+  intro: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 24px",
+    textAlign: "center",
+    background: "linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 50%, #fce7f3 100%)",
+    borderRadius: "16px",
+    minHeight: "320px"
+  },
+  introTitle: {
+    fontSize: "28px",
+    fontWeight: "700",
+    color: "#4c1d95",
+    marginBottom: "12px"
+  },
+  introSubtitle: {
+    fontSize: "16px",
+    color: "#6b7280",
+    marginBottom: "8px"
+  },
+  introQuestionCount: {
+    fontSize: "14px",
+    color: "#8b5cf6",
+    marginBottom: "32px",
+    fontWeight: "500"
+  },
+  startButton: {
+    padding: "16px 48px",
+    fontSize: "18px",
+    fontWeight: "600",
+    backgroundColor: "#7c3aed",
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "12px",
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    boxShadow: "0 4px 14px rgba(124, 58, 237, 0.4)"
+  },
+  feedback: {
+    marginTop: "16px",
+    padding: "16px",
+    borderRadius: "8px",
+    backgroundColor: "#f9fafb",
+    border: "1px solid #e5e7eb"
+  },
+  feedbackCorrect: {
+    backgroundColor: "#f0fdf4",
+    borderColor: "#22c55e"
+  },
+  feedbackIncorrect: {
+    backgroundColor: "#fef2f2",
+    borderColor: "#ef4444"
+  },
+  feedbackTitle: {
+    fontSize: "16px",
+    fontWeight: "600",
+    marginBottom: "8px",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  feedbackTitleCorrect: {
+    color: "#16a34a"
+  },
+  feedbackTitleIncorrect: {
+    color: "#dc2626"
+  },
+  feedbackExplanation: {
+    fontSize: "14px",
+    color: "#4b5563",
+    lineHeight: "1.5"
   }
 };
 function Spinner({ size = 16, color = "#ffffff" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       style: {
@@ -319,7 +1100,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); } }` })
     }
   );
 }
@@ -335,27 +1116,43 @@ function QuizPlayer({
   onComplete,
   onError,
   onProgress,
-  className
+  onGenerateMoreQuestions,
+  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 apiClient = (0, import_react.useRef)(null);
-  const timerRef = (0, import_react.useRef)(null);
-  const startTimeRef = (0, import_react.useRef)(Date.now());
-  (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 {
@@ -369,10 +1166,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) => {
@@ -401,9 +1199,9 @@ function QuizPlayer({
       }
     }
     initialize();
-  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, onError]);
-  (0, import_react.useEffect)(() => {
-    if (!isLoading && !isCompleted && !error) {
+  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt, onError]);
+  (0, import_react3.useEffect)(() => {
+    if (timerStarted && !isCompleted && !error) {
       startTimeRef.current = Date.now();
       timerRef.current = setInterval(() => {
         setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1e3));
@@ -414,27 +1212,39 @@ function QuizPlayer({
         clearInterval(timerRef.current);
       }
     };
-  }, [isLoading, isCompleted, error]);
-  (0, import_react.useEffect)(() => {
+  }, [timerStarted, isCompleted, error]);
+  const handleStart = (0, import_react3.useCallback)(() => {
+    setShowIntro(false);
+    setTimerStarted(true);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    setShowFeedback(false);
+    setCurrentAnswerDetail(null);
+  }, [currentQuestionIndex]);
+  const allQuestions = quiz ? [...quiz.questions, ...extraQuestions].filter((q) => !skippedQuestionIds.has(q.id)) : [];
+  const totalQuestions = allQuestions.length;
+  const maxQuestions = 50;
+  (0, import_react3.useEffect)(() => {
     if (quiz && onProgress) {
       onProgress({
         currentQuestion: currentQuestionIndex + 1,
-        totalQuestions: quiz.questions.length,
+        totalQuestions,
         answeredQuestions: answers.size
       });
     }
-  }, [currentQuestionIndex, answers.size, quiz, onProgress]);
-  const currentQuestion = quiz?.questions[currentQuestionIndex];
-  const handleAnswerChange = (0, import_react.useCallback)((value) => {
+  }, [currentQuestionIndex, answers.size, quiz, onProgress, totalQuestions]);
+  const currentQuestion = allQuestions[currentQuestionIndex];
+  const handleAnswerChange = (0, import_react3.useCallback)((value) => {
     if (!currentQuestion) return;
     setAnswers((prev) => new Map(prev).set(currentQuestion.id, value));
   }, [currentQuestion]);
-  const handleNext = (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;
     setIsNavigating(true);
     const answerDetail = createAnswerDetail(currentQuestion, selectedAnswer2);
+    setCurrentAnswerDetail(answerDetail);
     const newAnswersDetail = [...answersDetail];
     const existingIdx = newAnswersDetail.findIndex((a) => a.questionId === currentQuestion.id);
     if (existingIdx >= 0) {
@@ -452,16 +1262,40 @@ function QuizPlayer({
     } finally {
       setIsNavigating(false);
     }
-    if (currentQuestionIndex < quiz.questions.length - 1) {
+    setShowFeedback(true);
+  }, [quiz, attempt, currentQuestion, answers, answersDetail]);
+  const handleContinue = (0, import_react3.useCallback)(() => {
+    if (!quiz) return;
+    setShowFeedback(false);
+    setCurrentAnswerDetail(null);
+    if (currentQuestionIndex < totalQuestions - 1) {
       setCurrentQuestionIndex((prev) => prev + 1);
     }
-  }, [quiz, attempt, currentQuestion, answers, answersDetail, currentQuestionIndex]);
-  const handlePrevious = (0, import_react.useCallback)(() => {
-    if (currentQuestionIndex > 0) {
-      setCurrentQuestionIndex((prev) => prev - 1);
+  }, [quiz, currentQuestionIndex, totalQuestions]);
+  const handleAddMoreQuestions = (0, import_react3.useCallback)(async () => {
+    if (!attempt || !onGenerateMoreQuestions || isGeneratingExtra) return;
+    if (totalQuestions >= maxQuestions) return;
+    setIsGeneratingExtra(true);
+    try {
+      const result2 = await onGenerateMoreQuestions(attempt.id, totalQuestions);
+      if (result2.extraQuestions && result2.extraQuestions.length > 0) {
+        const slotsAvailable = maxQuestions - totalQuestions;
+        const questionsToAppend = result2.extraQuestions.slice(0, slotsAvailable);
+        if (questionsToAppend.length > 0) {
+          setExtraQuestions((prev) => [...prev, ...questionsToAppend]);
+          setCurrentQuestionIndex(totalQuestions);
+          setShowFeedback(false);
+          setCurrentAnswerDetail(null);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to generate extra questions:", err);
+      onError?.(err instanceof Error ? err : new Error("Failed to generate extra questions"));
+    } finally {
+      setIsGeneratingExtra(false);
     }
-  }, [currentQuestionIndex]);
-  const handleSubmit = (0, import_react.useCallback)(async () => {
+  }, [attempt, onGenerateMoreQuestions, isGeneratingExtra, totalQuestions, maxQuestions, onError]);
+  const handleSubmit = (0, import_react3.useCallback)(async () => {
     if (!quiz || !attempt || !apiClient.current) return;
     setIsSubmitting(true);
     try {
@@ -477,12 +1311,13 @@ function QuizPlayer({
         }
       }
       const scoreData = calculateScore(finalAnswersDetail);
-      const timeSpent = Math.floor((Date.now() - startTimeRef.current) / 1e3);
+      const timeSpent = timerStarted && startTimeRef.current > 0 ? Math.floor((Date.now() - startTimeRef.current) / 1e3) : elapsedSeconds;
       const updatedAttempt = await apiClient.current.updateAttempt(attempt.id, {
         answers: finalAnswersDetail,
         status: "completed",
         score: scoreData.score,
         correctAnswers: scoreData.correctAnswers,
+        totalQuestions,
         timeSpentSeconds: timeSpent
       });
       setIsCompleted(true);
@@ -490,7 +1325,7 @@ function QuizPlayer({
         attemptId: updatedAttempt.id,
         score: scoreData.score,
         correctAnswers: scoreData.correctAnswers,
-        totalQuestions: quiz.questions.length,
+        totalQuestions,
         answers: finalAnswersDetail,
         timeSpentSeconds: timeSpent
       };
@@ -506,157 +1341,956 @@ function QuizPlayer({
     } finally {
       setIsSubmitting(false);
     }
-  }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError]);
+  }, [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) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.results, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.resultScore, children: [
-        result.score,
-        "%"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.resultLabel, children: [
-        result.correctAnswers,
-        " of ",
-        result.totalQuestions,
-        " correct"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...defaultStyles.resultLabel, marginTop: "8px" }, children: [
-        "Time: ",
-        formatTime(result.timeSpentSeconds)
+    const percentage = result.totalQuestions > 0 ? Math.round(result.correctAnswers / result.totalQuestions * 100) : 0;
+    const getScoreTheme = (pct) => {
+      if (pct >= 80) {
+        return {
+          color: "#22c55e",
+          bgGradient: "linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%)",
+          badge: "Quiz Champion!",
+          badgeColor: "#fbbf24",
+          badgeBg: "linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)",
+          mascotMood: "celebrating",
+          stars: 3
+        };
+      } else if (pct >= 60) {
+        return {
+          color: "#f59e0b",
+          bgGradient: "linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%)",
+          badge: "Rising Star!",
+          badgeColor: "#f59e0b",
+          badgeBg: "linear-gradient(135deg, #fed7aa 0%, #fdba74 100%)",
+          mascotMood: "happy",
+          stars: 2
+        };
+      } else if (pct >= 40) {
+        return {
+          color: "#3b82f6",
+          bgGradient: "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%)",
+          badge: "Great Learner!",
+          badgeColor: "#3b82f6",
+          badgeBg: "linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%)",
+          mascotMood: "encouraging",
+          stars: 1
+        };
+      } else {
+        return {
+          color: "#8b5cf6",
+          bgGradient: "linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #d8b4fe 100%)",
+          badge: "Keep Growing!",
+          badgeColor: "#8b5cf6",
+          badgeBg: "linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%)",
+          mascotMood: "supportive",
+          stars: 0
+        };
+      }
+    };
+    const theme = getScoreTheme(percentage);
+    const confettiColors = ["#f43f5e", "#ec4899", "#8b5cf6", "#3b82f6", "#22c55e", "#f59e0b", "#ef4444"];
+    const confettiPieces = Array.from({ length: 50 }, (_, i) => ({
+      id: i,
+      left: `${Math.random() * 100}%`,
+      delay: `${Math.random() * 2}s`,
+      duration: `${2 + Math.random() * 2}s`,
+      color: confettiColors[Math.floor(Math.random() * confettiColors.length)],
+      rotation: Math.random() * 360,
+      size: 6 + Math.random() * 8
+    }));
+    const StarIcon = ({ filled, delay }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        width: "36",
+        height: "36",
+        viewBox: "0 0 24 24",
+        style: {
+          animation: "starPop 0.5s ease-out forwards",
+          animationDelay: `${delay}s`,
+          opacity: 0
+        },
+        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",
+            fill: filled ? "#fbbf24" : "#e5e7eb",
+            stroke: filled ? "#f59e0b" : "#d1d5db",
+            strokeWidth: "1"
+          }
+        )
+      }
+    );
+    const MascotOwl = ({ mood }) => {
+      const getEyeExpression = () => {
+        switch (mood) {
+          case "celebrating":
+            return { leftEye: ">", rightEye: "<", pupilY: 42 };
+          // Squinting happy
+          case "happy":
+            return { leftEye: null, rightEye: null, pupilY: 42 };
+          // Normal happy
+          case "encouraging":
+            return { leftEye: null, rightEye: null, pupilY: 44 };
+          // Looking down warmly
+          default:
+            return { leftEye: null, rightEye: null, pupilY: 42 };
+        }
+      };
+      const eyeExpr = getEyeExpression();
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "svg",
+        {
+          width: "120",
+          height: "120",
+          viewBox: "0 0 100 100",
+          style: {
+            animation: mood === "celebrating" ? "bounce 0.6s ease-in-out infinite" : "gentleBob 2s ease-in-out infinite"
+          },
+          children: [
+            /* @__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_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_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_runtime3.jsxs)("div", { className, style: defaultStyles.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+            @keyframes confettiFall {
+              0% {
+                transform: translateY(-10px) rotate(0deg);
+                opacity: 1;
+              }
+              100% {
+                transform: translateY(500px) rotate(720deg);
+                opacity: 0;
+              }
+            }
+            @keyframes starPop {
+              0% {
+                transform: scale(0);
+                opacity: 0;
+              }
+              50% {
+                transform: scale(1.3);
+              }
+              100% {
+                transform: scale(1);
+                opacity: 1;
+              }
+            }
+            @keyframes bounce {
+              0%, 100% {
+                transform: translateY(0);
+              }
+              50% {
+                transform: translateY(-10px);
+              }
+            }
+            @keyframes gentleBob {
+              0%, 100% {
+                transform: translateY(0);
+              }
+              50% {
+                transform: translateY(-5px);
+              }
+            }
+            @keyframes badgePop {
+              0% {
+                transform: scale(0) rotate(-10deg);
+                opacity: 0;
+              }
+              60% {
+                transform: scale(1.1) rotate(5deg);
+              }
+              100% {
+                transform: scale(1) rotate(0deg);
+                opacity: 1;
+              }
+            }
+            @keyframes scoreSlideIn {
+              0% {
+                transform: translateY(20px);
+                opacity: 0;
+              }
+              100% {
+                transform: translateY(0);
+                opacity: 1;
+              }
+            }
+          ` }),
+      /* @__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: {
+              ...defaultStyles.confettiPiece,
+              left: piece.left,
+              width: `${piece.size}px`,
+              height: `${piece.size}px`,
+              backgroundColor: piece.color,
+              borderRadius: Math.random() > 0.5 ? "50%" : "2px",
+              animationDelay: piece.delay,
+              animationDuration: piece.duration,
+              transform: `rotate(${piece.rotation}deg)`
+            }
+          },
+          piece.id
+        )) }),
+        /* @__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_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: {
+                background: theme.badgeBg,
+                padding: "12px 28px",
+                borderRadius: "50px",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                marginBottom: "20px",
+                animation: "badgePop 0.6s ease-out 0.2s forwards",
+                opacity: 0,
+                border: `3px solid ${theme.badgeColor}`
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: "22px",
+                    fontWeight: "700",
+                    color: "#1f2937",
+                    textShadow: "0 1px 2px rgba(255,255,255,0.5)"
+                  },
+                  children: theme.badge
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              style: {
+                animation: "scoreSlideIn 0.5s ease-out 0.4s forwards",
+                opacity: 0
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "48px",
+                      fontWeight: "800",
+                      color: theme.color,
+                      lineHeight: "1",
+                      marginBottom: "4px"
+                    },
+                    children: [
+                      result.correctAnswers,
+                      " of ",
+                      result.totalQuestions
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "20px",
+                      fontWeight: "600",
+                      color: "#6b7280",
+                      marginBottom: "12px"
+                    },
+                    children: "correct answers"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...defaultStyles.resultDetails, marginTop: "8px" }, children: [
+            "Time: ",
+            formatTime(result.timeSpentSeconds)
+          ] })
+        ] })
       ] })
+    ] });
+  }
+  if (quiz && showIntro) {
+    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_runtime3.jsx)(
+        "button",
+        {
+          style: defaultStyles.startButton,
+          onClick: handleStart,
+          onMouseOver: (e) => {
+            e.currentTarget.style.transform = "translateY(-2px)";
+            e.currentTarget.style.boxShadow = "0 6px 20px rgba(124, 58, 237, 0.5)";
+          },
+          onMouseOut: (e) => {
+            e.currentTarget.style.transform = "translateY(0)";
+            e.currentTarget.style.boxShadow = "0 4px 14px rgba(124, 58, 237, 0.4)";
+          },
+          "data-testid": "button-start-quiz",
+          children: "Let's Start!"
+        }
+      )
     ] }) });
   }
   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 === quiz.questions.length - 1;
-  const progressPercent = (currentQuestionIndex + 1) / quiz.questions.length * 100;
-  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.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.timer, children: formatTime(elapsedSeconds) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.progress, children: [
+  const isLastQuestion = currentQuestionIndex === totalQuestions - 1;
+  const progressPercent = (currentQuestionIndex + 1) / totalQuestions * 100;
+  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 ",
-        quiz.questions.length
+        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) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          style: {
-            ...defaultStyles.option,
-            ...selectedAnswer === option ? defaultStyles.optionSelected : {}
-          },
-          onClick: () => 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);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            style: {
-              ...defaultStyles.option,
-              ...selected ? defaultStyles.optionSelected : {}
-            },
-            onClick: () => {
-              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 && !showFeedback && /* @__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 && !showFeedback && /* @__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..."
-        }
-      ),
-      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}`
-        },
-        idx
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.buttons, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          style: {
-            ...defaultStyles.button,
-            ...currentQuestionIndex > 0 ? defaultStyles.buttonSecondary : defaultStyles.buttonDisabled
-          },
-          onClick: handlePrevious,
-          disabled: currentQuestionIndex === 0,
-          children: "Previous"
-        }
-      ),
-      isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          style: {
-            ...defaultStyles.button,
-            ...isSubmitting ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
-          },
-          onClick: handleSubmit,
-          disabled: isSubmitting || selectedAnswer === void 0,
-          children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
-        }
-      ) : /* @__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.button,
-            ...isNavigating || selectedAnswer === void 0 ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
+          apiClient: apiClient.current,
+          question: {
+            id: currentQuestion.id,
+            question: currentQuestion.question,
+            type: currentQuestion.type,
+            options: currentQuestion.options,
+            correctAnswer: currentQuestion.correctAnswer,
+            explanation: currentQuestion.explanation
           },
-          onClick: handleNext,
-          disabled: isNavigating || selectedAnswer === void 0,
-          children: isNavigating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Next"
+          quizId: quiz.id,
+          childId,
+          parentId,
+          lessonId,
+          courseId
         }
-      )
+      ) })
     ] })
   ] });
 }
 
 // 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",
@@ -836,10 +2470,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
@@ -872,49 +2506,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: {
@@ -922,12 +2556,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: {
@@ -938,23 +2572,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
           ] })
@@ -969,6 +2603,7 @@ function AttemptViewer({
   AttemptViewer,
   QuizApiClient,
   QuizPlayer,
+  TextToSpeech,
   calculateScore,
   checkAnswer,
   createAnswerDetail,