@schoolio/player 1.4.1 → 1.4.2

package/dist/index.js

@@ -113,6 +113,12 @@ var QuizApiClient = class {
       `/api/external/question-chat/${questionId}/${childId}`
     );
   }
+  async getChatsByAttempt(attemptId) {
+    return this.request(
+      "GET",
+      `/api/external/quiz-attempts/${attemptId}/chats`
+    );
+  }
   async getTextToSpeech(text, voice = "nova") {
     const headers = {
       "Content-Type": "application/json"
@@ -695,7 +701,8 @@ function QuestionChatPanel({
   childId,
   parentId,
   lessonId,
-  courseId
+  courseId,
+  answerResult
 }) {
   const [messages, setMessages] = (0, import_react2.useState)([]);
   const [inputValue, setInputValue] = (0, import_react2.useState)("");
@@ -705,6 +712,7 @@ function QuestionChatPanel({
   const [isListening, setIsListening] = (0, import_react2.useState)(false);
   const [speakingIndex, setSpeakingIndex] = (0, import_react2.useState)(null);
   const [audioReadyMap, setAudioReadyMap] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
+  const [hasOfferedHelp, setHasOfferedHelp] = (0, import_react2.useState)(false);
   const messagesContainerRef = (0, import_react2.useRef)(null);
   const messagesEndRef = (0, import_react2.useRef)(null);
   const recognitionRef = (0, import_react2.useRef)(null);
@@ -824,6 +832,7 @@ function QuestionChatPanel({
     setMessages([]);
     setChatId(null);
     setInputValue("");
+    setHasOfferedHelp(false);
     const loadHistory = async () => {
       try {
         const history = await apiClient.getChatHistory(question.id, childId);
@@ -838,6 +847,20 @@ function QuestionChatPanel({
     };
     loadHistory();
   }, [question.id, childId, apiClient, preCacheAudio]);
+  (0, import_react2.useEffect)(() => {
+    if (answerResult?.wasIncorrect && !hasOfferedHelp) {
+      setHasOfferedHelp(true);
+      const selectedAnswerText = answerResult.selectedAnswer || "that answer";
+      const helpMessage = `Looks like you chose "${selectedAnswerText}" which was incorrect. Would you like me to help explain the correct answer?`;
+      const assistantMessage = {
+        role: "assistant",
+        content: helpMessage,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+      preCacheAudio(helpMessage);
+    }
+  }, [answerResult, hasOfferedHelp, preCacheAudio]);
   const initializeChat = async () => {
     if (chatId) return chatId;
     try {
@@ -1030,15 +1053,28 @@ var defaultStyles = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
     width: "100%",
+    height: "100%",
     padding: "20px",
     backgroundColor: "#ffffff",
     borderRadius: "12px",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column"
   },
   header: {
     marginBottom: "20px",
     borderBottom: "1px solid #e5e7eb",
-    paddingBottom: "16px"
+    paddingBottom: "16px",
+    display: "flex",
+    flexDirection: "column"
+  },
+  headerTop: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  },
+  headerLeft: {
+    flex: 1
   },
   title: {
     fontSize: "24px",
@@ -1050,7 +1086,8 @@ var defaultStyles = {
     color: "#6b7280"
   },
   progressBar: {
-    width: "100%",
+    width: "50%",
+    maxWidth: "300px",
     height: "8px",
     backgroundColor: "#e5e7eb",
     borderRadius: "4px",
@@ -1165,16 +1202,21 @@ var defaultStyles = {
   },
   mainLayout: {
     display: "flex",
-    gap: "24px"
+    gap: "24px",
+    flex: 1,
+    minHeight: 0,
+    alignItems: "stretch"
   },
   quizContent: {
     flex: 1,
-    minWidth: 0
+    minWidth: 0,
+    overflow: "auto"
   },
   chatPanel: {
     width: "320px",
     flexShrink: 0,
-    height: "460px"
+    display: "flex",
+    flexDirection: "column"
   },
   timer: {
     fontSize: "14px",
@@ -1382,6 +1424,16 @@ function QuizPlayer({
   const apiClient = (0, import_react3.useRef)(null);
   const timerRef = (0, import_react3.useRef)(null);
   const startTimeRef = (0, import_react3.useRef)(0);
+  const onCompleteRef = (0, import_react3.useRef)(onComplete);
+  const onErrorRef = (0, import_react3.useRef)(onError);
+  const onProgressRef = (0, import_react3.useRef)(onProgress);
+  const onGenerateMoreQuestionsRef = (0, import_react3.useRef)(onGenerateMoreQuestions);
+  (0, import_react3.useEffect)(() => {
+    onCompleteRef.current = onComplete;
+    onErrorRef.current = onError;
+    onProgressRef.current = onProgress;
+    onGenerateMoreQuestionsRef.current = onGenerateMoreQuestions;
+  });
   (0, import_react3.useEffect)(() => {
     apiClient.current = new QuizApiClient({ baseUrl: apiBaseUrl, authToken });
   }, [apiBaseUrl, authToken]);
@@ -1428,11 +1480,11 @@ function QuizPlayer({
         const message = err instanceof Error ? err.message : "Failed to load quiz";
         setError(message);
         setIsLoading(false);
-        onError?.(err instanceof Error ? err : new Error(message));
+        onErrorRef.current?.(err instanceof Error ? err : new Error(message));
       }
     }
     initialize();
-  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt, onError]);
+  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt]);
   (0, import_react3.useEffect)(() => {
     if (timerStarted && !isCompleted && !error) {
       startTimeRef.current = Date.now();
@@ -1458,14 +1510,14 @@ function QuizPlayer({
   const totalQuestions = allQuestions.length;
   const maxQuestions = 50;
   (0, import_react3.useEffect)(() => {
-    if (quiz && onProgress) {
-      onProgress({
+    if (quiz && onProgressRef.current) {
+      onProgressRef.current({
         currentQuestion: currentQuestionIndex + 1,
         totalQuestions,
         answeredQuestions: answers.size
       });
     }
-  }, [currentQuestionIndex, answers.size, quiz, onProgress, totalQuestions]);
+  }, [currentQuestionIndex, answers.size, quiz, totalQuestions]);
   const currentQuestion = allQuestions[currentQuestionIndex];
   const handleAnswerChange = (0, import_react3.useCallback)((value) => {
     if (!currentQuestion) return;
@@ -1510,7 +1562,7 @@ function QuizPlayer({
     if (totalQuestions >= maxQuestions) return;
     setIsGeneratingExtra(true);
     try {
-      const result2 = await onGenerateMoreQuestions(attempt.id, totalQuestions);
+      const result2 = await onGenerateMoreQuestionsRef.current(attempt.id, totalQuestions);
       if (result2.extraQuestions && result2.extraQuestions.length > 0) {
         const slotsAvailable = maxQuestions - totalQuestions;
         const questionsToAppend = result2.extraQuestions.slice(0, slotsAvailable);
@@ -1523,11 +1575,11 @@ function QuizPlayer({
       }
     } catch (err) {
       console.error("Failed to generate extra questions:", err);
-      onError?.(err instanceof Error ? err : new Error("Failed to generate extra questions"));
+      onErrorRef.current?.(err instanceof Error ? err : new Error("Failed to generate extra questions"));
     } finally {
       setIsGeneratingExtra(false);
     }
-  }, [attempt, onGenerateMoreQuestions, isGeneratingExtra, totalQuestions, maxQuestions, onError]);
+  }, [attempt, isGeneratingExtra, totalQuestions, maxQuestions]);
   const handleSubmit = (0, import_react3.useCallback)(async () => {
     if (!quiz || !attempt || !apiClient.current) return;
     setIsSubmitting(true);
@@ -1566,15 +1618,15 @@ function QuizPlayer({
       if (timerRef.current) {
         clearInterval(timerRef.current);
       }
-      onComplete?.(quizResult);
+      onCompleteRef.current?.(quizResult);
     } catch (err) {
       const message = err instanceof Error ? err.message : "Failed to submit quiz";
       setError(message);
-      onError?.(err instanceof Error ? err : new Error(message));
+      onErrorRef.current?.(err instanceof Error ? err : new Error(message));
     } finally {
       setIsSubmitting(false);
     }
-  }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError, totalQuestions, timerStarted, elapsedSeconds]);
+  }, [quiz, attempt, currentQuestion, answers, answersDetail, totalQuestions, timerStarted, elapsedSeconds]);
   const isExtraQuestion = currentQuestion && extraQuestions.some((q) => q.id === currentQuestion.id);
   const handleSkipQuestion = (0, import_react3.useCallback)(async (reason, comment) => {
     if (!currentQuestion || !apiClient.current || !attempt) return;
@@ -1610,7 +1662,7 @@ function QuizPlayer({
           timeSpentSeconds: elapsedSeconds
         };
         setResult(quizResult);
-        onComplete?.(quizResult);
+        onCompleteRef.current?.(quizResult);
       } else if (currentQuestionIndex >= newTotalQuestions) {
         setCurrentQuestionIndex(newTotalQuestions - 1);
       }
@@ -1622,7 +1674,7 @@ function QuizPlayer({
     } finally {
       setIsSkipping(false);
     }
-  }, [currentQuestion, apiClient, attempt, quiz, childId, parentId, lessonId, courseId, assignLessonId, skippedQuestionIds, extraQuestions, currentQuestionIndex, elapsedSeconds, onComplete]);
+  }, [currentQuestion, apiClient, attempt, quiz, childId, parentId, lessonId, courseId, assignLessonId, skippedQuestionIds, extraQuestions, currentQuestionIndex, elapsedSeconds]);
   const handleReportQuestion = (0, import_react3.useCallback)(async (comment) => {
     if (!currentQuestion || !apiClient.current || !attempt || !comment.trim()) return;
     setIsReporting(true);
@@ -1992,533 +2044,537 @@ function QuizPlayer({
   const remainingSlots = maxQuestions - totalQuestions;
   const questionsToAdd = Math.min(5, remainingSlots);
   const canAddMore = onGenerateMoreQuestions && remainingSlots > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, style: defaultStyles.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.progress, children: [
-        "Question ",
-        currentQuestionIndex + 1,
-        " of ",
-        totalQuestions
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.mainLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.quizContent, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.progress, children: [
+          "Question ",
+          currentQuestionIndex + 1,
+          " of ",
+          totalQuestions
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.mainLayout, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.quizContent, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...defaultStyles.question, position: "relative", paddingBottom: "40px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.questionText, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: currentQuestion.question, inline: true, size: "md" }) }),
-          isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "button",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...defaultStyles.question, position: "relative", paddingBottom: "40px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.questionText, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: currentQuestion.question, inline: true, size: "md" }) }),
+        isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            onClick: () => setShowSkipModal(true),
+            title: "Skip question",
+            style: {
+              position: "absolute",
+              bottom: "8px",
+              left: "0",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "6px 10px",
+              borderRadius: "6px",
+              color: "#9ca3af",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "4px",
+              fontSize: "12px",
+              opacity: 0.6,
+              transition: "opacity 0.2s, color 0.2s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.opacity = "1";
+              e.currentTarget.style.color = "#6b7280";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.opacity = "0.6";
+              e.currentTarget.style.color = "#9ca3af";
+            },
+            "data-testid": "button-skip-question",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "5 4 15 12 5 20 5 4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "19", y1: "5", x2: "19", y2: "19" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Skip" })
+            ]
+          }
+        ),
+        !isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            onClick: () => setShowReportModal(true),
+            title: "Report an issue with this question",
+            style: {
+              position: "absolute",
+              bottom: "8px",
+              left: "0",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "6px 10px",
+              borderRadius: "6px",
+              color: "#9ca3af",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "4px",
+              fontSize: "12px",
+              opacity: 0.6,
+              transition: "opacity 0.2s, color 0.2s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.opacity = "1";
+              e.currentTarget.style.color = "#ef4444";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.opacity = "0.6";
+              e.currentTarget.style.color = "#9ca3af";
+            },
+            "data-testid": "button-report-question",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Report" })
+            ]
+          }
+        ),
+        (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
+          const isSelected = selectedAnswer === option;
+          const isCorrectOption = currentQuestion.correctAnswer === option;
+          let optionStyle = { ...defaultStyles.option };
+          if (showFeedback) {
+            if (isCorrectOption) {
+              optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
+            } else if (isSelected && !isCorrectOption) {
+              optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
+            }
+          } else if (isSelected) {
+            optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
             {
-              onClick: () => setShowSkipModal(true),
-              title: "Skip question",
               style: {
-                position: "absolute",
-                bottom: "8px",
-                left: "0",
-                background: "transparent",
-                border: "none",
-                cursor: "pointer",
-                padding: "6px 10px",
-                borderRadius: "6px",
-                color: "#9ca3af",
+                ...optionStyle,
+                cursor: showFeedback ? "default" : "pointer",
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "center",
-                gap: "4px",
-                fontSize: "12px",
-                opacity: 0.6,
-                transition: "opacity 0.2s, color 0.2s"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.opacity = "1";
-                e.currentTarget.style.color = "#6b7280";
+                gap: "8px"
               },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.opacity = "0.6";
-                e.currentTarget.style.color = "#9ca3af";
-              },
-              "data-testid": "button-skip-question",
+              onClick: () => !showFeedback && handleAnswerChange(option),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "5 4 15 12 5 20 5 4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "19", y1: "5", x2: "19", y2: "19" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Skip" })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: option })
               ]
+            },
+            idx
+          );
+        }) }),
+        currentQuestion.type === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
+          const selected = Array.isArray(selectedAnswer) && selectedAnswer.includes(option);
+          const correctAnswers = Array.isArray(currentQuestion.correctAnswer) ? currentQuestion.correctAnswer : currentQuestion.correctAnswer ? [currentQuestion.correctAnswer] : [];
+          const isCorrectOption = correctAnswers.includes(option);
+          let optionStyle = { ...defaultStyles.option };
+          if (showFeedback) {
+            if (isCorrectOption) {
+              optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
+            } else if (selected && !isCorrectOption) {
+              optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
             }
-          ),
-          !isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "button",
+          } else if (selected) {
+            optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
             {
-              onClick: () => setShowReportModal(true),
-              title: "Report an issue with this question",
               style: {
-                position: "absolute",
-                bottom: "8px",
-                left: "0",
-                background: "transparent",
-                border: "none",
-                cursor: "pointer",
-                padding: "6px 10px",
-                borderRadius: "6px",
-                color: "#9ca3af",
+                ...optionStyle,
+                cursor: showFeedback ? "default" : "pointer",
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "center",
-                gap: "4px",
-                fontSize: "12px",
-                opacity: 0.6,
-                transition: "opacity 0.2s, color 0.2s"
+                gap: "8px"
               },
-              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";
+              onClick: () => {
+                if (showFeedback) return;
+                const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
+                if (selected) {
+                  handleAnswerChange(current.filter((o) => o !== option));
+                } else {
+                  handleAnswerChange([...current, option]);
+                }
               },
-              "data-testid": "button-report-question",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Report" })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: option })
               ]
+            },
+            idx
+          );
+        }) }),
+        (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "textarea",
+          {
+            style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
+            value: selectedAnswer || "",
+            onChange: (e) => handleAnswerChange(e.target.value),
+            placeholder: "Type your answer here...",
+            disabled: showFeedback
+          }
+        ),
+        currentQuestion.type === "fill" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "input",
+          {
+            style: defaultStyles.input,
+            value: (Array.isArray(selectedAnswer) ? selectedAnswer[idx] : "") || "",
+            onChange: (e) => {
+              const current = Array.isArray(selectedAnswer) ? [...selectedAnswer] : [];
+              current[idx] = e.target.value;
+              handleAnswerChange(current);
+            },
+            placeholder: `Blank ${idx + 1}`,
+            disabled: showFeedback
+          },
+          idx
+        )) }),
+        showFeedback && currentAnswerDetail && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+          ...defaultStyles.feedback,
+          ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+            ...defaultStyles.feedbackTitle,
+            ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
+          }, children: currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
+          currentQuestion.explanation && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
+        ] })
+      ] }),
+      showSkipModal && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+        backgroundColor: "#ffffff",
+        borderRadius: "12px",
+        padding: "24px",
+        maxWidth: "400px",
+        width: "90%",
+        boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Skip Question" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "Help us improve by telling us why you're skipping this question." }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", marginBottom: "16px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => setSelectedSkipReason("question_issue"),
+              disabled: isSkipping,
+              style: {
+                padding: "12px 16px",
+                borderRadius: "8px",
+                border: selectedSkipReason === "question_issue" ? "2px solid #8b5cf6" : "1px solid #e5e7eb",
+                backgroundColor: selectedSkipReason === "question_issue" ? "#f5f3ff" : "#f9fafb",
+                cursor: isSkipping ? "not-allowed" : "pointer",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#374151",
+                textAlign: "left",
+                opacity: isSkipping ? 0.6 : 1
+              },
+              "data-testid": "button-skip-reason-issue",
+              children: "Question has an issue"
             }
           ),
-          (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
-            const isSelected = selectedAnswer === option;
-            const isCorrectOption = currentQuestion.correctAnswer === option;
-            let optionStyle = { ...defaultStyles.option };
-            if (showFeedback) {
-              if (isCorrectOption) {
-                optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
-              } else if (isSelected && !isCorrectOption) {
-                optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
-              }
-            } else if (isSelected) {
-              optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-              "div",
-              {
-                style: {
-                  ...optionStyle,
-                  cursor: showFeedback ? "default" : "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px"
-                },
-                onClick: () => !showFeedback && handleAnswerChange(option),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: option })
-                ]
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => setSelectedSkipReason("dont_know"),
+              disabled: isSkipping,
+              style: {
+                padding: "12px 16px",
+                borderRadius: "8px",
+                border: selectedSkipReason === "dont_know" ? "2px solid #8b5cf6" : "1px solid #e5e7eb",
+                backgroundColor: selectedSkipReason === "dont_know" ? "#f5f3ff" : "#f9fafb",
+                cursor: isSkipping ? "not-allowed" : "pointer",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#374151",
+                textAlign: "left",
+                opacity: isSkipping ? 0.6 : 1
               },
-              idx
-            );
-          }) }),
-          currentQuestion.type === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
-            const selected = Array.isArray(selectedAnswer) && selectedAnswer.includes(option);
-            const correctAnswers = Array.isArray(currentQuestion.correctAnswer) ? currentQuestion.correctAnswer : currentQuestion.correctAnswer ? [currentQuestion.correctAnswer] : [];
-            const isCorrectOption = correctAnswers.includes(option);
-            let optionStyle = { ...defaultStyles.option };
-            if (showFeedback) {
-              if (isCorrectOption) {
-                optionStyle = { ...optionStyle, ...defaultStyles.optionCorrect };
-              } else if (selected && !isCorrectOption) {
-                optionStyle = { ...optionStyle, ...defaultStyles.optionIncorrect };
-              }
-            } else if (selected) {
-              optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+              "data-testid": "button-skip-reason-dont-know",
+              children: "I don't know the answer"
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-              "div",
-              {
-                style: {
-                  ...optionStyle,
-                  cursor: showFeedback ? "default" : "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px"
-                },
-                onClick: () => {
-                  if (showFeedback) return;
-                  const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
-                  if (selected) {
-                    handleAnswerChange(current.filter((o) => o !== option));
-                  } else {
-                    handleAnswerChange([...current, option]);
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1 }, children: option })
-                ]
-              },
-              idx
-            );
-          }) }),
-          (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" }, children: "Additional details (optional)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "textarea",
             {
-              style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
-              value: selectedAnswer || "",
-              onChange: (e) => handleAnswerChange(e.target.value),
-              placeholder: "Type your answer here...",
-              disabled: showFeedback
+              value: skipComment,
+              onChange: (e) => setSkipComment(e.target.value.slice(0, 200)),
+              placeholder: "Tell us more about the issue...",
+              disabled: isSkipping,
+              style: {
+                width: "100%",
+                minHeight: "80px",
+                padding: "10px 12px",
+                borderRadius: "8px",
+                border: "1px solid #e5e7eb",
+                fontSize: "14px",
+                resize: "vertical",
+                fontFamily: "inherit",
+                boxSizing: "border-box"
+              },
+              "data-testid": "input-skip-comment"
             }
           ),
-          currentQuestion.type === "fill" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "input",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
+            skipComment.length,
+            "/200"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
             {
-              style: defaultStyles.input,
-              value: (Array.isArray(selectedAnswer) ? selectedAnswer[idx] : "") || "",
-              onChange: (e) => {
-                const current = Array.isArray(selectedAnswer) ? [...selectedAnswer] : [];
-                current[idx] = e.target.value;
-                handleAnswerChange(current);
+              onClick: () => {
+                setShowSkipModal(false);
+                setSkipComment("");
+                setSelectedSkipReason(null);
               },
-              placeholder: `Blank ${idx + 1}`,
-              disabled: showFeedback
-            },
-            idx
-          )) }),
-          showFeedback && currentAnswerDetail && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
-            ...defaultStyles.feedback,
-            ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
-          }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
-              ...defaultStyles.feedbackTitle,
-              ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
-            }, children: currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
-            currentQuestion.explanation && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
+              style: {
+                flex: 1,
+                padding: "10px 16px",
+                borderRadius: "8px",
+                border: "1px solid #e5e7eb",
+                backgroundColor: "#ffffff",
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#6b7280"
+              },
+              "data-testid": "button-skip-cancel",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => selectedSkipReason && handleSkipQuestion(selectedSkipReason, skipComment),
+              disabled: isSkipping || !selectedSkipReason,
+              style: {
+                flex: 1,
+                padding: "10px 16px",
+                borderRadius: "8px",
+                border: "none",
+                backgroundColor: selectedSkipReason ? "#8b5cf6" : "#d1d5db",
+                cursor: isSkipping || !selectedSkipReason ? "not-allowed" : "pointer",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#ffffff",
+                opacity: isSkipping ? 0.6 : 1
+              },
+              "data-testid": "button-skip-submit",
+              children: isSkipping ? "Skipping..." : "Skip Question"
+            }
+          )
+        ] })
+      ] }) }),
+      showReportModal && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+        backgroundColor: "#ffffff",
+        borderRadius: "12px",
+        padding: "24px",
+        maxWidth: "400px",
+        width: "90%",
+        boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Report Question" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "What's wrong with this question?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "textarea",
+            {
+              value: reportComment,
+              onChange: (e) => setReportComment(e.target.value.slice(0, 300)),
+              placeholder: "Describe the issue with this question...",
+              disabled: isReporting,
+              style: {
+                width: "100%",
+                minHeight: "120px",
+                padding: "10px 12px",
+                borderRadius: "8px",
+                border: "1px solid #e5e7eb",
+                fontSize: "14px",
+                resize: "vertical",
+                fontFamily: "inherit",
+                boxSizing: "border-box"
+              },
+              "data-testid": "input-report-comment"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
+            reportComment.length,
+            "/300"
           ] })
         ] }),
-        showSkipModal && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          zIndex: 1e3
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
-          backgroundColor: "#ffffff",
-          borderRadius: "12px",
-          padding: "24px",
-          maxWidth: "400px",
-          width: "90%",
-          boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Skip Question" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "Help us improve by telling us why you're skipping this question." }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", marginBottom: "16px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                onClick: () => setSelectedSkipReason("question_issue"),
-                disabled: isSkipping,
-                style: {
-                  padding: "12px 16px",
-                  borderRadius: "8px",
-                  border: selectedSkipReason === "question_issue" ? "2px solid #8b5cf6" : "1px solid #e5e7eb",
-                  backgroundColor: selectedSkipReason === "question_issue" ? "#f5f3ff" : "#f9fafb",
-                  cursor: isSkipping ? "not-allowed" : "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  color: "#374151",
-                  textAlign: "left",
-                  opacity: isSkipping ? 0.6 : 1
-                },
-                "data-testid": "button-skip-reason-issue",
-                children: "Question has an issue"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                onClick: () => setSelectedSkipReason("dont_know"),
-                disabled: isSkipping,
-                style: {
-                  padding: "12px 16px",
-                  borderRadius: "8px",
-                  border: selectedSkipReason === "dont_know" ? "2px solid #8b5cf6" : "1px solid #e5e7eb",
-                  backgroundColor: selectedSkipReason === "dont_know" ? "#f5f3ff" : "#f9fafb",
-                  cursor: isSkipping ? "not-allowed" : "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  color: "#374151",
-                  textAlign: "left",
-                  opacity: isSkipping ? 0.6 : 1
-                },
-                "data-testid": "button-skip-reason-dont-know",
-                children: "I don't know the answer"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" }, children: "Additional details (optional)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "textarea",
-              {
-                value: skipComment,
-                onChange: (e) => setSkipComment(e.target.value.slice(0, 200)),
-                placeholder: "Tell us more about the issue...",
-                disabled: isSkipping,
-                style: {
-                  width: "100%",
-                  minHeight: "80px",
-                  padding: "10px 12px",
-                  borderRadius: "8px",
-                  border: "1px solid #e5e7eb",
-                  fontSize: "14px",
-                  resize: "vertical",
-                  fontFamily: "inherit",
-                  boxSizing: "border-box"
-                },
-                "data-testid": "input-skip-comment"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
-              skipComment.length,
-              "/200"
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                onClick: () => {
-                  setShowSkipModal(false);
-                  setSkipComment("");
-                  setSelectedSkipReason(null);
-                },
-                style: {
-                  flex: 1,
-                  padding: "10px 16px",
-                  borderRadius: "8px",
-                  border: "1px solid #e5e7eb",
-                  backgroundColor: "#ffffff",
-                  cursor: "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  color: "#6b7280"
-                },
-                "data-testid": "button-skip-cancel",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                onClick: () => selectedSkipReason && handleSkipQuestion(selectedSkipReason, skipComment),
-                disabled: isSkipping || !selectedSkipReason,
-                style: {
-                  flex: 1,
-                  padding: "10px 16px",
-                  borderRadius: "8px",
-                  border: "none",
-                  backgroundColor: selectedSkipReason ? "#8b5cf6" : "#d1d5db",
-                  cursor: isSkipping || !selectedSkipReason ? "not-allowed" : "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  color: "#ffffff",
-                  opacity: isSkipping ? 0.6 : 1
-                },
-                "data-testid": "button-skip-submit",
-                children: isSkipping ? "Skipping..." : "Skip Question"
-              }
-            )
-          ] })
-        ] }) }),
-        showReportModal && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
-          position: "fixed",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          zIndex: 1e3
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
-          backgroundColor: "#ffffff",
-          borderRadius: "12px",
-          padding: "24px",
-          maxWidth: "400px",
-          width: "90%",
-          boxShadow: "0 20px 40px rgba(0, 0, 0, 0.2)"
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Report Question" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "What's wrong with this question?" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "textarea",
-              {
-                value: reportComment,
-                onChange: (e) => setReportComment(e.target.value.slice(0, 300)),
-                placeholder: "Describe the issue with this question...",
-                disabled: isReporting,
-                style: {
-                  width: "100%",
-                  minHeight: "120px",
-                  padding: "10px 12px",
-                  borderRadius: "8px",
-                  border: "1px solid #e5e7eb",
-                  fontSize: "14px",
-                  resize: "vertical",
-                  fontFamily: "inherit",
-                  boxSizing: "border-box"
-                },
-                "data-testid": "input-report-comment"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
-              reportComment.length,
-              "/300"
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                onClick: () => {
-                  setShowReportModal(false);
-                  setReportComment("");
-                },
-                style: {
-                  flex: 1,
-                  padding: "10px 16px",
-                  borderRadius: "8px",
-                  border: "1px solid #e5e7eb",
-                  backgroundColor: "#ffffff",
-                  cursor: "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  color: "#6b7280"
-                },
-                "data-testid": "button-report-cancel",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                onClick: () => handleReportQuestion(reportComment),
-                disabled: isReporting || !reportComment.trim(),
-                style: {
-                  flex: 1,
-                  padding: "10px 16px",
-                  borderRadius: "8px",
-                  border: "none",
-                  backgroundColor: reportComment.trim() ? "#ef4444" : "#d1d5db",
-                  cursor: isReporting || !reportComment.trim() ? "not-allowed" : "pointer",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  color: "#ffffff",
-                  opacity: isReporting ? 0.6 : 1
-                },
-                "data-testid": "button-report-submit",
-                children: isReporting ? "Reporting..." : "Report"
-              }
-            )
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.buttonsColumn, children: [
-          showFeedback && isLastQuestion && canAddMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
+              onClick: () => {
+                setShowReportModal(false);
+                setReportComment("");
+              },
               style: {
-                ...defaultStyles.buttonAddMore,
-                ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
+                flex: 1,
+                padding: "10px 16px",
+                borderRadius: "8px",
+                border: "1px solid #e5e7eb",
+                backgroundColor: "#ffffff",
+                cursor: "pointer",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#6b7280"
               },
-              onClick: handleAddMoreQuestions,
-              disabled: isGeneratingExtra,
-              "data-testid": "button-add-more-questions",
-              children: isGeneratingExtra ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }),
-                "Generating Questions..."
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                "+ Add ",
-                questionsToAdd,
-                " More Question",
-                questionsToAdd !== 1 ? "s" : ""
-              ] })
+              "data-testid": "button-report-cancel",
+              children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...defaultStyles.buttons, justifyContent: "flex-end" }, children: showFeedback ? (
-            // After viewing feedback
-            isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                style: {
-                  ...defaultStyles.button,
-                  ...isSubmitting || isGeneratingExtra ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
-                },
-                onClick: handleSubmit,
-                disabled: isSubmitting || isGeneratingExtra,
-                "data-testid": "button-submit-quiz",
-                children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                style: {
-                  ...defaultStyles.button,
-                  ...defaultStyles.buttonPrimary
-                },
-                onClick: handleContinue,
-                "data-testid": "button-continue",
-                children: "Continue"
-              }
-            )
-          ) : (
-            // Before checking answer
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                style: {
-                  ...defaultStyles.button,
-                  ...isNavigating || selectedAnswer === void 0 ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
-                },
-                onClick: handleCheckAnswer,
-                disabled: isNavigating || selectedAnswer === void 0,
-                "data-testid": "button-check-answer",
-                children: isNavigating ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Check Answer"
-              }
-            )
-          ) })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => handleReportQuestion(reportComment),
+              disabled: isReporting || !reportComment.trim(),
+              style: {
+                flex: 1,
+                padding: "10px 16px",
+                borderRadius: "8px",
+                border: "none",
+                backgroundColor: reportComment.trim() ? "#ef4444" : "#d1d5db",
+                cursor: isReporting || !reportComment.trim() ? "not-allowed" : "pointer",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#ffffff",
+                opacity: isReporting ? 0.6 : 1
+              },
+              "data-testid": "button-report-submit",
+              children: isReporting ? "Reporting..." : "Report"
+            }
+          )
         ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.chatPanel, children: apiClient.current && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        QuestionChatPanel,
-        {
-          apiClient: apiClient.current,
-          question: {
-            id: currentQuestion.id,
-            question: currentQuestion.question,
-            type: currentQuestion.type,
-            options: currentQuestion.options,
-            correctAnswer: currentQuestion.correctAnswer,
-            explanation: currentQuestion.explanation
-          },
-          quizId: quiz.id,
-          childId,
-          parentId,
-          lessonId,
-          courseId
-        }
-      ) })
-    ] })
-  ] });
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: defaultStyles.buttonsColumn, children: [
+        showFeedback && isLastQuestion && canAddMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            style: {
+              ...defaultStyles.buttonAddMore,
+              ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
+            },
+            onClick: handleAddMoreQuestions,
+            disabled: isGeneratingExtra,
+            "data-testid": "button-add-more-questions",
+            children: isGeneratingExtra ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }),
+              "Generating Questions..."
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              "+ Add ",
+              questionsToAdd,
+              " More Question",
+              questionsToAdd !== 1 ? "s" : ""
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...defaultStyles.buttons, justifyContent: "flex-end" }, children: showFeedback ? (
+          // After viewing feedback
+          isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              style: {
+                ...defaultStyles.button,
+                ...isSubmitting || isGeneratingExtra ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
+              },
+              onClick: handleSubmit,
+              disabled: isSubmitting || isGeneratingExtra,
+              "data-testid": "button-submit-quiz",
+              children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              style: {
+                ...defaultStyles.button,
+                ...defaultStyles.buttonPrimary
+              },
+              onClick: handleContinue,
+              "data-testid": "button-continue",
+              children: "Continue"
+            }
+          )
+        ) : (
+          // Before checking answer
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              style: {
+                ...defaultStyles.button,
+                ...isNavigating || selectedAnswer === void 0 ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
+              },
+              onClick: handleCheckAnswer,
+              disabled: isNavigating || selectedAnswer === void 0,
+              "data-testid": "button-check-answer",
+              children: isNavigating ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Check Answer"
+            }
+          )
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: defaultStyles.chatPanel, children: apiClient.current && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      QuestionChatPanel,
+      {
+        apiClient: apiClient.current,
+        question: {
+          id: currentQuestion.id,
+          question: currentQuestion.question,
+          type: currentQuestion.type,
+          options: currentQuestion.options,
+          correctAnswer: currentQuestion.correctAnswer,
+          explanation: currentQuestion.explanation
+        },
+        quizId: quiz.id,
+        childId,
+        parentId,
+        lessonId,
+        courseId,
+        answerResult: showFeedback && currentAnswerDetail ? {
+          wasIncorrect: !currentAnswerDetail.isCorrect,
+          selectedAnswer: typeof selectedAnswer === "string" ? selectedAnswer : Array.isArray(selectedAnswer) ? selectedAnswer.join(", ") : void 0,
+          correctAnswer: typeof currentQuestion.correctAnswer === "string" ? currentQuestion.correctAnswer : Array.isArray(currentQuestion.correctAnswer) ? currentQuestion.correctAnswer.join(", ") : void 0,
+          explanation: currentQuestion.explanation
+        } : void 0
+      }
+    ) })
+  ] }) });
 }
 
 // src/AttemptViewer.tsx
@@ -2644,6 +2700,46 @@ var defaultStyles2 = {
     fontSize: "14px",
     color: "#581c87"
   },
+  chatHistorySection: {
+    marginTop: "12px",
+    borderTop: "1px solid #e5e7eb",
+    paddingTop: "12px"
+  },
+  chatToggleButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 12px",
+    backgroundColor: "#f3f4f6",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "13px",
+    color: "#6b7280",
+    cursor: "pointer",
+    fontWeight: "500"
+  },
+  chatMessages: {
+    marginTop: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  chatMessage: {
+    padding: "8px 12px",
+    borderRadius: "8px",
+    fontSize: "13px",
+    maxWidth: "85%"
+  },
+  chatMessageUser: {
+    backgroundColor: "#6721b0",
+    color: "#ffffff",
+    alignSelf: "flex-end"
+  },
+  chatMessageAssistant: {
+    backgroundColor: "#f3f4f6",
+    color: "#111827",
+    alignSelf: "flex-start"
+  },
   loading: {
     textAlign: "center",
     padding: "40px 20px"
@@ -2701,11 +2797,14 @@ function AttemptViewer({
   onError,
   className,
   showExplanations = true,
+  showConversation = false,
   title
 }) {
   const [attempt, setAttempt] = (0, import_react4.useState)(null);
   const [loading, setLoading] = (0, import_react4.useState)(true);
   const [error, setError] = (0, import_react4.useState)(null);
+  const [chatHistories, setChatHistories] = (0, import_react4.useState)({});
+  const [expandedChats, setExpandedChats] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
   (0, import_react4.useEffect)(() => {
     const apiClient = new QuizApiClient({
       baseUrl: apiBaseUrl,
@@ -2723,6 +2822,14 @@ function AttemptViewer({
         }
         const data = await response.json();
         setAttempt(data);
+        if (showConversation) {
+          try {
+            const chats = await apiClient.getChatsByAttempt(attemptId);
+            setChatHistories(chats);
+          } catch (chatErr) {
+            console.error("Failed to load chat histories:", chatErr);
+          }
+        }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Failed to load attempt";
         setError(errorMessage);
@@ -2732,7 +2839,18 @@ function AttemptViewer({
       }
     }
     fetchAttempt();
-  }, [attemptId, apiBaseUrl, authToken, onError]);
+  }, [attemptId, apiBaseUrl, authToken, onError, showConversation]);
+  const toggleChatExpanded = (questionId) => {
+    setExpandedChats((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(questionId)) {
+        newSet.delete(questionId);
+      } else {
+        newSet.add(questionId);
+      }
+      return newSet;
+    });
+  };
   const handleRetry = () => {
     setLoading(true);
     setError(null);
@@ -2824,6 +2942,34 @@ function AttemptViewer({
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Explanation:" }),
             " ",
             answer.explanation
+          ] }),
+          showConversation && chatHistories[answer.questionId] && chatHistories[answer.questionId].messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles2.chatHistorySection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "button",
+              {
+                style: defaultStyles2.chatToggleButton,
+                onClick: () => toggleChatExpanded(answer.questionId),
+                "data-testid": `button-toggle-chat-${answer.questionId}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
+                  expandedChats.has(answer.questionId) ? "Hide" : "View",
+                  " Chat History (",
+                  chatHistories[answer.questionId].messages.length,
+                  " messages)"
+                ]
+              }
+            ),
+            expandedChats.has(answer.questionId) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles2.chatMessages, children: chatHistories[answer.questionId].messages.map((msg, msgIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                style: {
+                  ...defaultStyles2.chatMessage,
+                  ...msg.role === "user" ? defaultStyles2.chatMessageUser : defaultStyles2.chatMessageAssistant
+                },
+                children: msg.content
+              },
+              msgIndex
+            )) })
           ] })
         ]
       },