@schoolio/player 1.4.5 → 1.4.7

package/dist/index.js

@@ -1322,7 +1322,9 @@ var defaultStyles = {
   option: {
     width: "100%",
     padding: "12px 16px",
-    border: "2px solid #e5e7eb",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderColor: "#e5e7eb",
     borderRadius: "8px",
     cursor: "pointer",
     transition: "all 0.2s ease",
@@ -1745,7 +1747,9 @@ function MatchingDragDrop({ leftItems, rightItems, currentMatches, correctMatche
           alignItems: "center",
           gap: "12px",
           padding: "12px 16px",
-          border: "2px dashed #e5e7eb",
+          borderWidth: "2px",
+          borderStyle: "dashed",
+          borderColor: "#e5e7eb",
           borderRadius: "8px",
           backgroundColor: "#ffffff",
           minHeight: "56px",
@@ -1828,7 +1832,9 @@ function MatchingDragDrop({ leftItems, rightItems, currentMatches, correctMatche
           {
             style: {
               padding: "12px 16px",
-              border: "2px solid #e5e7eb",
+              borderWidth: "2px",
+              borderStyle: "solid",
+              borderColor: "#e5e7eb",
               borderRadius: "8px",
               backgroundColor: "#ffffff",
               cursor: showFeedback ? "default" : "grab",
@@ -1929,6 +1935,7 @@ function QuizPlayer({
   const [showReportModal, setShowReportModal] = (0, import_react3.useState)(false);
   const [isReporting, setIsReporting] = (0, import_react3.useState)(false);
   const [reportComment, setReportComment] = (0, import_react3.useState)("");
+  const [retryKey, setRetryKey] = (0, import_react3.useState)(0);
   const apiClient = (0, import_react3.useRef)(null);
   const timerRef = (0, import_react3.useRef)(null);
   const startTimeRef = (0, import_react3.useRef)(0);
@@ -2003,7 +2010,7 @@ function QuizPlayer({
       }
     }
     initialize();
-  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt]);
+  }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, forceNewAttempt, retryKey]);
   (0, import_react3.useEffect)(() => {
     if (timerStarted && !isCompleted && !errorCode) {
       startTimeRef.current = Date.now();
@@ -2277,6 +2284,38 @@ function QuizPlayer({
       setIsReporting(false);
     }
   }, [currentQuestion, apiClient, attempt, quiz, childId, parentId, lessonId, courseId, assignLessonId]);
+  const handleRetryQuiz = (0, import_react3.useCallback)(() => {
+    setCurrentQuestionIndex(0);
+    setAnswers(/* @__PURE__ */ new Map());
+    setAnswersDetail([]);
+    setIsCompleted(false);
+    setResult(null);
+    setErrorCode(null);
+    setShowIntro(true);
+    setShowFeedback(false);
+    setCurrentAnswerDetail(null);
+    setTimerStarted(false);
+    setElapsedSeconds(0);
+    startTimeRef.current = 0;
+    setExtraQuestions([]);
+    setSkippedQuestionIds(/* @__PURE__ */ new Set());
+    setAttempt(null);
+    setShowResumeChoice(false);
+    setHasExistingProgress(false);
+    setExistingProgressCount(0);
+    setIsSubmitting(false);
+    setIsNavigating(false);
+    setIsGeneratingExtra(false);
+    setIsStartingFresh(false);
+    setShowSkipModal(false);
+    setIsSkipping(false);
+    setSkipComment("");
+    setSelectedSkipReason(null);
+    setShowReportModal(false);
+    setIsReporting(false);
+    setReportComment("");
+    setRetryKey((prev) => prev + 1);
+  }, []);
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.loading, children: "Loading quiz..." }) });
   }
@@ -2440,6 +2479,16 @@ function QuizPlayer({
                 opacity: 1;
               }
             }
+            @keyframes buttonFadeIn {
+              0% {
+                opacity: 0;
+                transform: translateY(10px);
+              }
+              100% {
+                opacity: 1;
+                transform: translateY(0);
+              }
+            }
           ` }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.results, children: [
         percentage >= 60 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.confettiContainer, children: confettiPieces.map((piece) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2592,7 +2641,39 @@ function QuizPlayer({
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...defaultStyles.resultDetails, marginTop: "8px" }, children: [
             "Time: ",
             formatTime(result.timeSpentSeconds)
-          ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              style: {
+                marginTop: "24px",
+                padding: "14px 32px",
+                fontSize: "16px",
+                fontWeight: "600",
+                color: "#7c3aed",
+                background: "white",
+                border: "2px solid #7c3aed",
+                borderRadius: "12px",
+                cursor: "pointer",
+                transition: "all 0.2s ease",
+                animation: "buttonFadeIn 0.5s ease-out 0.8s forwards",
+                opacity: 0
+              },
+              onClick: handleRetryQuiz,
+              onMouseOver: (e) => {
+                e.currentTarget.style.background = "#7c3aed";
+                e.currentTarget.style.color = "white";
+                e.currentTarget.style.transform = "translateY(-2px)";
+              },
+              onMouseOut: (e) => {
+                e.currentTarget.style.background = "white";
+                e.currentTarget.style.color = "#7c3aed";
+                e.currentTarget.style.transform = "translateY(0)";
+              },
+              "data-testid": "button-retry-quiz",
+              children: "Try Again"
+            }
+          )
         ] }) })
       ] })
     ] });
@@ -2694,294 +2775,143 @@ function QuizPlayer({
   const remainingSlots = maxQuestions - totalQuestions;
   const questionsToAdd = Math.min(5, remainingSlots);
   const canAddMore = onGenerateMoreQuestions && remainingSlots > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.mainLayout, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.quizContent, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.header, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.progress, children: [
-          "Question ",
-          currentQuestionIndex + 1,
-          " of ",
-          totalQuestions
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...defaultStyles.question, position: "relative", paddingBottom: "40px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.questionText, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextToSpeech, { text: currentQuestion.question, inline: true, size: "md" }) }),
-        isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)("polygon", { points: "5 4 15 12 5 20 5 4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "19", y1: "5", x2: "19", y2: "19" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Skip" })
-            ]
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, style: defaultStyles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+          .quiz-option:focus,
+          .quiz-option:active,
+          .quiz-option:focus-visible,
+          .quiz-option:focus-within {
+            outline: none !important;
+            box-shadow: none !important;
           }
-        ),
-        !isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.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_runtime4.jsx)("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Report" })
-            ]
-          }
-        ),
-        (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ (0, import_jsx_runtime4.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 };
+          .quiz-option {
+            -webkit-tap-highlight-color: transparent;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "div",
+        ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.mainLayout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.quizContent, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.progress, children: [
+            "Question ",
+            currentQuestionIndex + 1,
+            " of ",
+            totalQuestions
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...defaultStyles.question, position: "relative", paddingBottom: "40px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.questionText, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextToSpeech, { text: currentQuestion.question, inline: true, size: "md" }) }),
+          currentQuestion.type === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+            marginTop: "8px",
+            marginBottom: "12px",
+            display: "inline-block",
+            padding: "4px 10px",
+            backgroundColor: "rgba(139, 92, 246, 0.1)",
+            color: "#7c3aed",
+            fontSize: "13px",
+            fontStyle: "italic",
+            borderRadius: "4px"
+          }, children: "Select all that apply" }),
+          isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
             {
+              onClick: () => setShowSkipModal(true),
+              title: "Skip question",
               style: {
-                ...optionStyle,
-                cursor: showFeedback ? "default" : "pointer",
+                position: "absolute",
+                bottom: "8px",
+                left: "0",
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                padding: "6px 10px",
+                borderRadius: "6px",
+                color: "#9ca3af",
                 display: "flex",
                 alignItems: "center",
-                gap: "8px"
+                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";
               },
-              onClick: () => !showFeedback && handleAnswerChange(option),
+              onMouseLeave: (e) => {
+                e.currentTarget.style.opacity = "0.6";
+                e.currentTarget.style.color = "#9ca3af";
+              },
+              "data-testid": "button-skip-question",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
+                /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("polygon", { points: "5 4 15 12 5 20 5 4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "19", y1: "5", x2: "19", y2: "19" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Skip" })
               ]
-            },
-            idx
-          );
-        }) }),
-        currentQuestion.type === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)(
-            "div",
+          ),
+          !isExtraQuestion && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
             {
+              onClick: () => setShowReportModal(true),
+              title: "Report an issue with this question",
               style: {
-                ...optionStyle,
-                cursor: showFeedback ? "default" : "pointer",
+                position: "absolute",
+                bottom: "8px",
+                left: "0",
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                padding: "6px 10px",
+                borderRadius: "6px",
+                color: "#9ca3af",
                 display: "flex",
                 alignItems: "center",
-                gap: "8px"
+                justifyContent: "center",
+                gap: "4px",
+                fontSize: "12px",
+                opacity: 0.6,
+                transition: "opacity 0.2s, color 0.2s"
               },
-              onClick: () => {
-                if (showFeedback) return;
-                const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
-                if (selected) {
-                  handleAnswerChange(current.filter((o) => o !== option));
-                } else {
-                  handleAnswerChange([...current, option]);
-                }
+              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_runtime4.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
+                /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Report" })
               ]
-            },
-            idx
-          );
-        }) }),
-        (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.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
-        )) }),
-        currentQuestion.type === "sorting" && currentQuestion.items && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          SortingDragDrop,
-          {
-            items: currentQuestion.items,
-            currentOrder: Array.isArray(selectedAnswer) ? selectedAnswer : currentQuestion.items.map((_, i) => i),
-            correctOrder: currentQuestion.correctOrder,
-            showFeedback,
-            onOrderChange: handleAnswerChange
-          }
-        ),
-        currentQuestion.type === "matrix" && currentQuestion.leftItems && currentQuestion.rightItems && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          MatchingDragDrop,
-          {
-            leftItems: currentQuestion.leftItems,
-            rightItems: currentQuestion.rightItems,
-            currentMatches: typeof selectedAnswer === "object" && selectedAnswer !== null && !Array.isArray(selectedAnswer) ? selectedAnswer : {},
-            correctMatches: currentQuestion.correctMatches,
-            showFeedback,
-            onMatchChange: handleAnswerChange
-          }
-        ),
-        currentQuestion.type === "assessment" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.options, children: (() => {
-          const scaleType = currentQuestion.scaleType || "likert";
-          if (scaleType === "yes-no") {
-            const options = ["Yes", "No"];
-            return options.map((option, idx) => {
-              const isSelected = selectedAnswer === option;
-              let optionStyle = { ...defaultStyles.option };
-              if (isSelected) {
-                optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "div",
-                {
-                  style: {
-                    ...optionStyle,
-                    cursor: showFeedback ? "default" : "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px"
-                  },
-                  onClick: () => !showFeedback && handleAnswerChange(option),
-                  "data-testid": `assessment-option-${option.toLowerCase()}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
-                },
-                idx
-              );
-            });
-          }
-          if (scaleType === "rating") {
-            const min = currentQuestion.scaleMin || 1;
-            const max = currentQuestion.scaleMax || 5;
-            const ratings = Array.from({ length: max - min + 1 }, (_, i) => min + i);
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap", justifyContent: "center" }, children: ratings.map((rating) => {
-              const isSelected = selectedAnswer === rating;
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "button",
-                {
-                  onClick: () => !showFeedback && handleAnswerChange(rating),
-                  disabled: showFeedback,
-                  style: {
-                    width: "48px",
-                    height: "48px",
-                    borderRadius: "50%",
-                    border: isSelected ? "2px solid #6721b0" : "2px solid #e5e7eb",
-                    backgroundColor: isSelected ? "#f3e8ff" : "#ffffff",
-                    cursor: showFeedback ? "not-allowed" : "pointer",
-                    fontSize: "18px",
-                    fontWeight: "600",
-                    color: isSelected ? "#6721b0" : "#374151"
-                  },
-                  "data-testid": `assessment-rating-${rating}`,
-                  children: rating
-                },
-                rating
-              );
-            }) });
-          }
-          const likertOptions = [
-            "Strongly Disagree",
-            "Disagree",
-            "Neutral",
-            "Agree",
-            "Strongly Agree"
-          ];
-          return likertOptions.map((option, idx) => {
+            }
+          ),
+          (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ (0, import_jsx_runtime4.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 (isSelected) {
+            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_runtime4.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
+                className: "quiz-option",
                 style: {
                   ...optionStyle,
                   cursor: showFeedback ? "default" : "pointer",
@@ -2990,350 +2920,532 @@ function QuizPlayer({
                   gap: "8px"
                 },
                 onClick: () => !showFeedback && handleAnswerChange(option),
-                "data-testid": `assessment-likert-${idx}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
+                ]
               },
               idx
             );
-          });
-        })() }),
-        showFeedback && currentAnswerDetail && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
-          ...defaultStyles.feedback,
-          ...currentQuestion.type === "assessment" ? defaultStyles.feedbackNeutral : currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
-            ...defaultStyles.feedbackTitle,
-            ...currentQuestion.type === "assessment" ? defaultStyles.feedbackTitleNeutral : currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
-          }, children: currentQuestion.type === "assessment" ? "\u2713 Response recorded" : currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
-          currentQuestion.explanation && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
-        ] })
-      ] }),
-      showSkipModal && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Skip Question" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", marginBottom: "16px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.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 === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime4.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 };
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.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
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                className: "quiz-option",
+                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_runtime4.jsx)("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextToSpeech, { text: option, size: "sm" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
+                ]
               },
-              "data-testid": "button-skip-reason-dont-know",
-              children: "I don't know the answer"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "16px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" }, children: "Additional details (optional)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              idx
+            );
+          }) }),
+          (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ (0, import_jsx_runtime4.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"
+              style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
+              value: selectedAnswer || "",
+              onChange: (e) => handleAnswerChange(e.target.value),
+              placeholder: "Type your answer here...",
+              disabled: showFeedback
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
-            skipComment.length,
-            "/200"
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
+          currentQuestion.type === "fill" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
             {
-              onClick: () => {
-                setShowSkipModal(false);
-                setSkipComment("");
-                setSelectedSkipReason(null);
+              style: defaultStyles.input,
+              value: (Array.isArray(selectedAnswer) ? selectedAnswer[idx] : "") || "",
+              onChange: (e) => {
+                const current = Array.isArray(selectedAnswer) ? [...selectedAnswer] : [];
+                current[idx] = e.target.value;
+                handleAnswerChange(current);
               },
-              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_runtime4.jsx)(
-            "button",
+              placeholder: `Blank ${idx + 1}`,
+              disabled: showFeedback
+            },
+            idx
+          )) }),
+          currentQuestion.type === "sorting" && currentQuestion.items && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            SortingDragDrop,
             {
-              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"
+              items: currentQuestion.items,
+              currentOrder: Array.isArray(selectedAnswer) ? selectedAnswer : currentQuestion.items.map((_, i) => i),
+              correctOrder: currentQuestion.correctOrder,
+              showFeedback,
+              onOrderChange: handleAnswerChange
             }
-          )
-        ] })
-      ] }) }),
-      showReportModal && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Report Question" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "What's wrong with this question?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "16px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "textarea",
+          ),
+          currentQuestion.type === "matrix" && currentQuestion.leftItems && currentQuestion.rightItems && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            MatchingDragDrop,
             {
-              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"
+              leftItems: currentQuestion.leftItems,
+              rightItems: currentQuestion.rightItems,
+              currentMatches: typeof selectedAnswer === "object" && selectedAnswer !== null && !Array.isArray(selectedAnswer) ? selectedAnswer : {},
+              correctMatches: currentQuestion.correctMatches,
+              showFeedback,
+              onMatchChange: handleAnswerChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
-            reportComment.length,
-            "/300"
+          currentQuestion.type === "assessment" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.options, children: (() => {
+            const scaleType = currentQuestion.scaleType || "likert";
+            if (scaleType === "yes-no") {
+              const options = ["Yes", "No"];
+              return options.map((option, idx) => {
+                const isSelected = selectedAnswer === option;
+                let optionStyle = { ...defaultStyles.option };
+                if (isSelected) {
+                  optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    className: "quiz-option",
+                    style: {
+                      ...optionStyle,
+                      cursor: showFeedback ? "default" : "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px"
+                    },
+                    onClick: () => !showFeedback && handleAnswerChange(option),
+                    "data-testid": `assessment-option-${option.toLowerCase()}`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
+                  },
+                  idx
+                );
+              });
+            }
+            if (scaleType === "rating") {
+              const min = currentQuestion.scaleMin || 1;
+              const max = currentQuestion.scaleMax || 5;
+              const ratings = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap", justifyContent: "center" }, children: ratings.map((rating) => {
+                const isSelected = selectedAnswer === rating;
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    className: "quiz-option",
+                    onClick: () => !showFeedback && handleAnswerChange(rating),
+                    disabled: showFeedback,
+                    style: {
+                      width: "48px",
+                      height: "48px",
+                      borderRadius: "50%",
+                      border: isSelected ? "2px solid #6721b0" : "2px solid #e5e7eb",
+                      backgroundColor: isSelected ? "#f3e8ff" : "#ffffff",
+                      cursor: showFeedback ? "not-allowed" : "pointer",
+                      fontSize: "18px",
+                      fontWeight: "600",
+                      color: isSelected ? "#6721b0" : "#374151",
+                      outline: "none"
+                    },
+                    "data-testid": `assessment-rating-${rating}`,
+                    children: rating
+                  },
+                  rating
+                );
+              }) });
+            }
+            const likertOptions = [
+              "Strongly Disagree",
+              "Disagree",
+              "Neutral",
+              "Agree",
+              "Strongly Agree"
+            ];
+            return likertOptions.map((option, idx) => {
+              const isSelected = selectedAnswer === option;
+              let optionStyle = { ...defaultStyles.option };
+              if (isSelected) {
+                optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  className: "quiz-option",
+                  style: {
+                    ...optionStyle,
+                    cursor: showFeedback ? "default" : "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  onClick: () => !showFeedback && handleAnswerChange(option),
+                  "data-testid": `assessment-likert-${idx}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1 }, children: option })
+                },
+                idx
+              );
+            });
+          })() }),
+          showFeedback && currentAnswerDetail && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+            ...defaultStyles.feedback,
+            ...currentQuestion.type === "assessment" ? defaultStyles.feedbackNeutral : currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+              ...defaultStyles.feedbackTitle,
+              ...currentQuestion.type === "assessment" ? defaultStyles.feedbackTitleNeutral : currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
+            }, children: currentQuestion.type === "assessment" ? "\u2713 Response recorded" : currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
+            currentQuestion.explanation && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        showSkipModal && /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Skip Question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", marginBottom: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { style: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" }, children: "Additional details (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
+              skipComment.length,
+              "/200"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.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_runtime4.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_runtime4.jsx)("h3", { style: { margin: "0 0 8px 0", fontSize: "18px", fontWeight: "600", color: "#1f2937" }, children: "Report Question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: "0 0 16px 0", fontSize: "14px", color: "#6b7280" }, children: "What's wrong with this question?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px", textAlign: "right" }, children: [
+              reportComment.length,
+              "/300"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsxs)("div", { style: defaultStyles.buttonsColumn, children: [
+          showFeedback && isLastQuestion && canAddMore && /* @__PURE__ */ (0, import_jsx_runtime4.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"
+                ...defaultStyles.buttonAddMore,
+                ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
               },
-              "data-testid": "button-report-cancel",
-              children: "Cancel"
+              onClick: handleAddMoreQuestions,
+              disabled: isGeneratingExtra,
+              "data-testid": "button-add-more-questions",
+              children: isGeneratingExtra ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: 16, color: "#9ca3af" }),
+                "Generating Questions..."
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                "+ Add ",
+                questionsToAdd,
+                " More Question",
+                questionsToAdd !== 1 ? "s" : ""
+              ] })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("div", { style: { ...defaultStyles.buttons, justifyContent: "flex-end" }, children: showFeedback ? (
+            // After viewing feedback
+            isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                style: {
+                  ...defaultStyles.button,
+                  ...defaultStyles.buttonPrimary
+                },
+                onClick: handleContinue,
+                "data-testid": "button-continue",
+                children: "Continue"
+              }
+            )
+          ) : (
+            // Before checking answer
+            /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Check Answer"
+              }
+            )
+          ) })
         ] })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: defaultStyles.buttonsColumn, children: [
-        showFeedback && isLastQuestion && canAddMore && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            style: {
-              ...defaultStyles.buttonAddMore,
-              ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
-            },
-            onClick: handleAddMoreQuestions,
-            disabled: isGeneratingExtra,
-            "data-testid": "button-add-more-questions",
-            children: isGeneratingExtra ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: 16, color: "#9ca3af" }),
-              "Generating Questions..."
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-              "+ Add ",
-              questionsToAdd,
-              " More Question",
-              questionsToAdd !== 1 ? "s" : ""
-            ] })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...defaultStyles.buttons, justifyContent: "flex-end" }, children: showFeedback ? (
-          // After viewing feedback
-          isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
-            {
-              style: {
-                ...defaultStyles.button,
-                ...defaultStyles.buttonPrimary
-              },
-              onClick: handleContinue,
-              "data-testid": "button-continue",
-              children: "Continue"
-            }
-          )
-        ) : (
-          // Before checking answer
-          /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Check Answer"
-            }
-          )
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.chatPanel, children: apiClient.current && /* @__PURE__ */ (0, import_jsx_runtime4.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: currentQuestion.type !== "assessment" && !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
-      }
-    ) })
-  ] }) });
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: defaultStyles.chatPanel, children: apiClient.current && /* @__PURE__ */ (0, import_jsx_runtime4.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: currentQuestion.type !== "assessment" && !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
@@ -3481,7 +3593,12 @@ var defaultStyles2 = {
     marginTop: "12px",
     display: "flex",
     flexDirection: "column",
-    gap: "8px"
+    gap: "8px",
+    backgroundColor: "#ffffff",
+    padding: "16px",
+    borderRadius: "8px",
+    border: "1px solid #e5e7eb",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.05)"
   },
   chatMessage: {
     padding: "8px 12px",