@schoolio/player 1.2.2 → 1.3.0

package/dist/index.mjs

@@ -141,15 +141,15 @@ function formatTime(seconds) {
 }
 
 // src/QuizPlayer.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var defaultStyles = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
-    maxWidth: "800px",
-    margin: "0 auto",
+    width: "100%",
     padding: "20px",
     backgroundColor: "#ffffff",
-    borderRadius: "12px"
+    borderRadius: "12px",
+    boxSizing: "border-box"
   },
   header: {
     marginBottom: "20px",
@@ -179,7 +179,8 @@ var defaultStyles = {
     transition: "width 0.3s ease"
   },
   question: {
-    marginBottom: "24px"
+    marginBottom: "24px",
+    minHeight: "280px"
   },
   questionText: {
     fontSize: "18px",
@@ -196,7 +197,9 @@ var defaultStyles = {
     border: "2px solid #e5e7eb",
     borderRadius: "8px",
     cursor: "pointer",
-    transition: "all 0.2s ease"
+    transition: "all 0.2s ease",
+    outline: "none",
+    backgroundColor: "#ffffff"
   },
   optionSelected: {
     borderColor: "#6721b0",
@@ -215,7 +218,10 @@ var defaultStyles = {
     padding: "12px 16px",
     border: "2px solid #e5e7eb",
     borderRadius: "8px",
-    fontSize: "16px"
+    fontSize: "16px",
+    outline: "none",
+    boxSizing: "border-box",
+    backgroundColor: "#ffffff"
   },
   buttons: {
     display: "flex",
@@ -244,24 +250,90 @@ var defaultStyles = {
     color: "#9ca3af",
     cursor: "not-allowed"
   },
+  buttonAddMore: {
+    padding: "12px 24px",
+    borderRadius: "8px",
+    fontSize: "16px",
+    fontWeight: "500",
+    cursor: "pointer",
+    border: "2px solid #6721b0",
+    backgroundColor: "transparent",
+    color: "#6721b0",
+    transition: "all 0.2s ease",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
+  },
+  buttonAddMoreDisabled: {
+    border: "2px solid #e5e7eb",
+    color: "#9ca3af",
+    cursor: "not-allowed"
+  },
+  buttonsColumn: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    marginTop: "24px"
+  },
   timer: {
     fontSize: "14px",
     color: "#6b7280",
     marginLeft: "16px"
   },
   results: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 24px",
     textAlign: "center",
-    padding: "40px 20px"
+    minHeight: "400px",
+    position: "relative",
+    overflow: "hidden"
   },
-  resultScore: {
-    fontSize: "48px",
-    fontWeight: "700",
-    color: "#6721b0",
-    marginBottom: "8px"
+  resultsBackground: {
+    position: "absolute",
+    inset: "0",
+    borderRadius: "16px",
+    zIndex: 0
   },
-  resultLabel: {
+  resultsContent: {
+    position: "relative",
+    zIndex: 1,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  resultDetails: {
     fontSize: "18px",
-    color: "#6b7280"
+    color: "#6b7280",
+    marginBottom: "4px"
+  },
+  resultStars: {
+    display: "flex",
+    justifyContent: "center",
+    gap: "8px",
+    marginBottom: "20px"
+  },
+  resultStar: {
+    fontSize: "32px",
+    animation: "starPop 0.5s ease-out forwards",
+    opacity: 0
+  },
+  confettiContainer: {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    overflow: "hidden",
+    zIndex: 0
+  },
+  confettiPiece: {
+    position: "absolute",
+    width: "10px",
+    height: "10px",
+    top: "-10px",
+    animation: "confettiFall 3s ease-out forwards"
   },
   loading: {
     textAlign: "center",
@@ -272,6 +344,80 @@ var defaultStyles = {
     textAlign: "center",
     padding: "40px",
     color: "#ef4444"
+  },
+  intro: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 24px",
+    textAlign: "center",
+    background: "linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 50%, #fce7f3 100%)",
+    borderRadius: "16px",
+    minHeight: "320px"
+  },
+  introTitle: {
+    fontSize: "28px",
+    fontWeight: "700",
+    color: "#4c1d95",
+    marginBottom: "12px"
+  },
+  introSubtitle: {
+    fontSize: "16px",
+    color: "#6b7280",
+    marginBottom: "8px"
+  },
+  introQuestionCount: {
+    fontSize: "14px",
+    color: "#8b5cf6",
+    marginBottom: "32px",
+    fontWeight: "500"
+  },
+  startButton: {
+    padding: "16px 48px",
+    fontSize: "18px",
+    fontWeight: "600",
+    backgroundColor: "#7c3aed",
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "12px",
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    boxShadow: "0 4px 14px rgba(124, 58, 237, 0.4)"
+  },
+  feedback: {
+    marginTop: "16px",
+    padding: "16px",
+    borderRadius: "8px",
+    backgroundColor: "#f9fafb",
+    border: "1px solid #e5e7eb"
+  },
+  feedbackCorrect: {
+    backgroundColor: "#f0fdf4",
+    borderColor: "#22c55e"
+  },
+  feedbackIncorrect: {
+    backgroundColor: "#fef2f2",
+    borderColor: "#ef4444"
+  },
+  feedbackTitle: {
+    fontSize: "16px",
+    fontWeight: "600",
+    marginBottom: "8px",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  feedbackTitleCorrect: {
+    color: "#16a34a"
+  },
+  feedbackTitleIncorrect: {
+    color: "#dc2626"
+  },
+  feedbackExplanation: {
+    fontSize: "14px",
+    color: "#4b5563",
+    lineHeight: "1.5"
   }
 };
 function Spinner({ size = 16, color = "#ffffff" }) {
@@ -303,6 +449,7 @@ function QuizPlayer({
   onComplete,
   onError,
   onProgress,
+  onGenerateMoreQuestions,
   className
 }) {
   const [quiz, setQuiz] = useState(null);
@@ -317,9 +464,15 @@ function QuizPlayer({
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
+  const [showIntro, setShowIntro] = useState(true);
+  const [timerStarted, setTimerStarted] = useState(false);
+  const [showFeedback, setShowFeedback] = useState(false);
+  const [currentAnswerDetail, setCurrentAnswerDetail] = useState(null);
+  const [extraQuestions, setExtraQuestions] = useState([]);
+  const [isGeneratingExtra, setIsGeneratingExtra] = useState(false);
   const apiClient = useRef(null);
   const timerRef = useRef(null);
-  const startTimeRef = useRef(Date.now());
+  const startTimeRef = useRef(0);
   useEffect(() => {
     apiClient.current = new QuizApiClient({ baseUrl: apiBaseUrl, authToken });
   }, [apiBaseUrl, authToken]);
@@ -371,7 +524,7 @@ function QuizPlayer({
     initialize();
   }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, onError]);
   useEffect(() => {
-    if (!isLoading && !isCompleted && !error) {
+    if (timerStarted && !isCompleted && !error) {
       startTimeRef.current = Date.now();
       timerRef.current = setInterval(() => {
         setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1e3));
@@ -382,27 +535,39 @@ function QuizPlayer({
         clearInterval(timerRef.current);
       }
     };
-  }, [isLoading, isCompleted, error]);
+  }, [timerStarted, isCompleted, error]);
+  const handleStart = useCallback(() => {
+    setShowIntro(false);
+    setTimerStarted(true);
+  }, []);
+  useEffect(() => {
+    setShowFeedback(false);
+    setCurrentAnswerDetail(null);
+  }, [currentQuestionIndex]);
+  const allQuestions = quiz ? [...quiz.questions, ...extraQuestions] : [];
+  const totalQuestions = allQuestions.length;
+  const maxQuestions = 50;
   useEffect(() => {
     if (quiz && onProgress) {
       onProgress({
         currentQuestion: currentQuestionIndex + 1,
-        totalQuestions: quiz.questions.length,
+        totalQuestions,
         answeredQuestions: answers.size
       });
     }
-  }, [currentQuestionIndex, answers.size, quiz, onProgress]);
-  const currentQuestion = quiz?.questions[currentQuestionIndex];
+  }, [currentQuestionIndex, answers.size, quiz, onProgress, totalQuestions]);
+  const currentQuestion = allQuestions[currentQuestionIndex];
   const handleAnswerChange = useCallback((value) => {
     if (!currentQuestion) return;
     setAnswers((prev) => new Map(prev).set(currentQuestion.id, value));
   }, [currentQuestion]);
-  const handleNext = useCallback(async () => {
+  const handleCheckAnswer = useCallback(async () => {
     if (!quiz || !attempt || !currentQuestion || !apiClient.current) return;
     const selectedAnswer2 = answers.get(currentQuestion.id);
     if (selectedAnswer2 === void 0) return;
     setIsNavigating(true);
     const answerDetail = createAnswerDetail(currentQuestion, selectedAnswer2);
+    setCurrentAnswerDetail(answerDetail);
     const newAnswersDetail = [...answersDetail];
     const existingIdx = newAnswersDetail.findIndex((a) => a.questionId === currentQuestion.id);
     if (existingIdx >= 0) {
@@ -420,15 +585,39 @@ function QuizPlayer({
     } finally {
       setIsNavigating(false);
     }
-    if (currentQuestionIndex < quiz.questions.length - 1) {
+    setShowFeedback(true);
+  }, [quiz, attempt, currentQuestion, answers, answersDetail]);
+  const handleContinue = useCallback(() => {
+    if (!quiz) return;
+    setShowFeedback(false);
+    setCurrentAnswerDetail(null);
+    if (currentQuestionIndex < totalQuestions - 1) {
       setCurrentQuestionIndex((prev) => prev + 1);
     }
-  }, [quiz, attempt, currentQuestion, answers, answersDetail, currentQuestionIndex]);
-  const handlePrevious = useCallback(() => {
-    if (currentQuestionIndex > 0) {
-      setCurrentQuestionIndex((prev) => prev - 1);
+  }, [quiz, currentQuestionIndex, totalQuestions]);
+  const handleAddMoreQuestions = useCallback(async () => {
+    if (!attempt || !onGenerateMoreQuestions || isGeneratingExtra) return;
+    if (totalQuestions >= maxQuestions) return;
+    setIsGeneratingExtra(true);
+    try {
+      const result2 = await onGenerateMoreQuestions(attempt.id, totalQuestions);
+      if (result2.extraQuestions && result2.extraQuestions.length > 0) {
+        const slotsAvailable = maxQuestions - totalQuestions;
+        const questionsToAppend = result2.extraQuestions.slice(0, slotsAvailable);
+        if (questionsToAppend.length > 0) {
+          setExtraQuestions((prev) => [...prev, ...questionsToAppend]);
+          setCurrentQuestionIndex(totalQuestions);
+          setShowFeedback(false);
+          setCurrentAnswerDetail(null);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to generate extra questions:", err);
+      onError?.(err instanceof Error ? err : new Error("Failed to generate extra questions"));
+    } finally {
+      setIsGeneratingExtra(false);
     }
-  }, [currentQuestionIndex]);
+  }, [attempt, onGenerateMoreQuestions, isGeneratingExtra, totalQuestions, maxQuestions, onError]);
   const handleSubmit = useCallback(async () => {
     if (!quiz || !attempt || !apiClient.current) return;
     setIsSubmitting(true);
@@ -445,7 +634,7 @@ function QuizPlayer({
         }
       }
       const scoreData = calculateScore(finalAnswersDetail);
-      const timeSpent = Math.floor((Date.now() - startTimeRef.current) / 1e3);
+      const timeSpent = timerStarted && startTimeRef.current > 0 ? Math.floor((Date.now() - startTimeRef.current) / 1e3) : elapsedSeconds;
       const updatedAttempt = await apiClient.current.updateAttempt(attempt.id, {
         answers: finalAnswersDetail,
         status: "completed",
@@ -458,7 +647,7 @@ function QuizPlayer({
         attemptId: updatedAttempt.id,
         score: scoreData.score,
         correctAnswers: scoreData.correctAnswers,
-        totalQuestions: quiz.questions.length,
+        totalQuestions,
         answers: finalAnswersDetail,
         timeSpentSeconds: timeSpent
       };
@@ -474,7 +663,7 @@ function QuizPlayer({
     } finally {
       setIsSubmitting(false);
     }
-  }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError]);
+  }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError, totalQuestions, timerStarted, elapsedSeconds]);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsx("div", { style: defaultStyles.loading, children: "Loading quiz..." }) });
   }
@@ -485,67 +674,403 @@ function QuizPlayer({
     ] }) }) });
   }
   if (isCompleted && result) {
-    return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsxs("div", { style: defaultStyles.results, children: [
-      /* @__PURE__ */ jsxs("div", { style: defaultStyles.resultScore, children: [
-        result.score,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: defaultStyles.resultLabel, children: [
-        result.correctAnswers,
-        " of ",
-        result.totalQuestions,
-        " correct"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { ...defaultStyles.resultLabel, marginTop: "8px" }, children: [
-        "Time: ",
-        formatTime(result.timeSpentSeconds)
+    const percentage = Math.round(result.correctAnswers / result.totalQuestions * 100);
+    const getScoreTheme = (pct) => {
+      if (pct >= 80) {
+        return {
+          color: "#22c55e",
+          bgGradient: "linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%)",
+          badge: "Quiz Champion!",
+          badgeColor: "#fbbf24",
+          badgeBg: "linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)",
+          mascotMood: "celebrating",
+          stars: 3
+        };
+      } else if (pct >= 60) {
+        return {
+          color: "#f59e0b",
+          bgGradient: "linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%)",
+          badge: "Rising Star!",
+          badgeColor: "#f59e0b",
+          badgeBg: "linear-gradient(135deg, #fed7aa 0%, #fdba74 100%)",
+          mascotMood: "happy",
+          stars: 2
+        };
+      } else if (pct >= 40) {
+        return {
+          color: "#3b82f6",
+          bgGradient: "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%)",
+          badge: "Great Learner!",
+          badgeColor: "#3b82f6",
+          badgeBg: "linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%)",
+          mascotMood: "encouraging",
+          stars: 1
+        };
+      } else {
+        return {
+          color: "#8b5cf6",
+          bgGradient: "linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #d8b4fe 100%)",
+          badge: "Keep Growing!",
+          badgeColor: "#8b5cf6",
+          badgeBg: "linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%)",
+          mascotMood: "supportive",
+          stars: 0
+        };
+      }
+    };
+    const theme = getScoreTheme(percentage);
+    const confettiColors = ["#f43f5e", "#ec4899", "#8b5cf6", "#3b82f6", "#22c55e", "#f59e0b", "#ef4444"];
+    const confettiPieces = Array.from({ length: 50 }, (_, i) => ({
+      id: i,
+      left: `${Math.random() * 100}%`,
+      delay: `${Math.random() * 2}s`,
+      duration: `${2 + Math.random() * 2}s`,
+      color: confettiColors[Math.floor(Math.random() * confettiColors.length)],
+      rotation: Math.random() * 360,
+      size: 6 + Math.random() * 8
+    }));
+    const StarIcon = ({ filled, delay }) => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "36",
+        height: "36",
+        viewBox: "0 0 24 24",
+        style: {
+          animation: "starPop 0.5s ease-out forwards",
+          animationDelay: `${delay}s`,
+          opacity: 0
+        },
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+            fill: filled ? "#fbbf24" : "#e5e7eb",
+            stroke: filled ? "#f59e0b" : "#d1d5db",
+            strokeWidth: "1"
+          }
+        )
+      }
+    );
+    const MascotOwl = ({ mood }) => {
+      const getEyeExpression = () => {
+        switch (mood) {
+          case "celebrating":
+            return { leftEye: ">", rightEye: "<", pupilY: 42 };
+          // Squinting happy
+          case "happy":
+            return { leftEye: null, rightEye: null, pupilY: 42 };
+          // Normal happy
+          case "encouraging":
+            return { leftEye: null, rightEye: null, pupilY: 44 };
+          // Looking down warmly
+          default:
+            return { leftEye: null, rightEye: null, pupilY: 42 };
+        }
+      };
+      const eyeExpr = getEyeExpression();
+      return /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "120",
+          height: "120",
+          viewBox: "0 0 100 100",
+          style: {
+            animation: mood === "celebrating" ? "bounce 0.6s ease-in-out infinite" : "gentleBob 2s ease-in-out infinite"
+          },
+          children: [
+            /* @__PURE__ */ jsx("ellipse", { cx: "50", cy: "60", rx: "35", ry: "30", fill: "#8b5cf6" }),
+            /* @__PURE__ */ jsx("ellipse", { cx: "50", cy: "65", rx: "25", ry: "20", fill: "#c4b5fd" }),
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "35", r: "28", fill: "#a78bfa" }),
+            /* @__PURE__ */ jsx("polygon", { points: "28,15 35,30 22,28", fill: "#7c3aed" }),
+            /* @__PURE__ */ jsx("polygon", { points: "72,15 65,30 78,28", fill: "#7c3aed" }),
+            /* @__PURE__ */ jsx("ellipse", { cx: "38", cy: "38", rx: "10", ry: "12", fill: "white" }),
+            /* @__PURE__ */ jsx("ellipse", { cx: "62", cy: "38", rx: "10", ry: "12", fill: "white" }),
+            eyeExpr.leftEye ? /* @__PURE__ */ jsx("text", { x: "38", y: "44", textAnchor: "middle", fontSize: "16", fill: "#1f2937", children: eyeExpr.leftEye }) : /* @__PURE__ */ jsx("circle", { cx: "38", cy: eyeExpr.pupilY, r: "5", fill: "#1f2937" }),
+            eyeExpr.rightEye ? /* @__PURE__ */ jsx("text", { x: "62", y: "44", textAnchor: "middle", fontSize: "16", fill: "#1f2937", children: eyeExpr.rightEye }) : /* @__PURE__ */ jsx("circle", { cx: "62", cy: eyeExpr.pupilY, r: "5", fill: "#1f2937" }),
+            /* @__PURE__ */ jsx("polygon", { points: "50,45 45,52 55,52", fill: "#fbbf24" }),
+            (mood === "celebrating" || mood === "happy") && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("ellipse", { cx: "28", cy: "45", rx: "5", ry: "3", fill: "#fda4af", opacity: "0.6" }),
+              /* @__PURE__ */ jsx("ellipse", { cx: "72", cy: "45", rx: "5", ry: "3", fill: "#fda4af", opacity: "0.6" })
+            ] }),
+            mood === "celebrating" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("ellipse", { cx: "18", cy: "55", rx: "8", ry: "15", fill: "#7c3aed", transform: "rotate(-30 18 55)" }),
+              /* @__PURE__ */ jsx("ellipse", { cx: "82", cy: "55", rx: "8", ry: "15", fill: "#7c3aed", transform: "rotate(30 82 55)" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("ellipse", { cx: "20", cy: "60", rx: "8", ry: "15", fill: "#7c3aed" }),
+              /* @__PURE__ */ jsx("ellipse", { cx: "80", cy: "60", rx: "8", ry: "15", fill: "#7c3aed" })
+            ] }),
+            /* @__PURE__ */ jsx("ellipse", { cx: "40", cy: "88", rx: "8", ry: "4", fill: "#fbbf24" }),
+            /* @__PURE__ */ jsx("ellipse", { cx: "60", cy: "88", rx: "8", ry: "4", fill: "#fbbf24" })
+          ]
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxs("div", { className, style: defaultStyles.container, children: [
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes confettiFall {
+              0% {
+                transform: translateY(-10px) rotate(0deg);
+                opacity: 1;
+              }
+              100% {
+                transform: translateY(500px) rotate(720deg);
+                opacity: 0;
+              }
+            }
+            @keyframes starPop {
+              0% {
+                transform: scale(0);
+                opacity: 0;
+              }
+              50% {
+                transform: scale(1.3);
+              }
+              100% {
+                transform: scale(1);
+                opacity: 1;
+              }
+            }
+            @keyframes bounce {
+              0%, 100% {
+                transform: translateY(0);
+              }
+              50% {
+                transform: translateY(-10px);
+              }
+            }
+            @keyframes gentleBob {
+              0%, 100% {
+                transform: translateY(0);
+              }
+              50% {
+                transform: translateY(-5px);
+              }
+            }
+            @keyframes badgePop {
+              0% {
+                transform: scale(0) rotate(-10deg);
+                opacity: 0;
+              }
+              60% {
+                transform: scale(1.1) rotate(5deg);
+              }
+              100% {
+                transform: scale(1) rotate(0deg);
+                opacity: 1;
+              }
+            }
+            @keyframes scoreSlideIn {
+              0% {
+                transform: translateY(20px);
+                opacity: 0;
+              }
+              100% {
+                transform: translateY(0);
+                opacity: 1;
+              }
+            }
+          ` }),
+      /* @__PURE__ */ jsxs("div", { style: defaultStyles.results, children: [
+        percentage >= 60 && /* @__PURE__ */ jsx("div", { style: defaultStyles.confettiContainer, children: confettiPieces.map((piece) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...defaultStyles.confettiPiece,
+              left: piece.left,
+              width: `${piece.size}px`,
+              height: `${piece.size}px`,
+              backgroundColor: piece.color,
+              borderRadius: Math.random() > 0.5 ? "50%" : "2px",
+              animationDelay: piece.delay,
+              animationDuration: piece.duration,
+              transform: `rotate(${piece.rotation}deg)`
+            }
+          },
+          piece.id
+        )) }),
+        /* @__PURE__ */ jsx("div", { style: { ...defaultStyles.resultsBackground, background: theme.bgGradient } }),
+        /* @__PURE__ */ jsxs("div", { style: defaultStyles.resultsContent, children: [
+          /* @__PURE__ */ jsxs("div", { style: defaultStyles.resultStars, children: [
+            /* @__PURE__ */ jsx(StarIcon, { filled: theme.stars >= 1, delay: 0.3 }),
+            /* @__PURE__ */ jsx(StarIcon, { filled: theme.stars >= 2, delay: 0.5 }),
+            /* @__PURE__ */ jsx(StarIcon, { filled: theme.stars >= 3, delay: 0.7 })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsx(MascotOwl, { mood: theme.mascotMood }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                background: theme.badgeBg,
+                padding: "12px 28px",
+                borderRadius: "50px",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                marginBottom: "20px",
+                animation: "badgePop 0.6s ease-out 0.2s forwards",
+                opacity: 0,
+                border: `3px solid ${theme.badgeColor}`
+              },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "22px",
+                    fontWeight: "700",
+                    color: "#1f2937",
+                    textShadow: "0 1px 2px rgba(255,255,255,0.5)"
+                  },
+                  children: theme.badge
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                animation: "scoreSlideIn 0.5s ease-out 0.4s forwards",
+                opacity: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "48px",
+                      fontWeight: "800",
+                      color: theme.color,
+                      lineHeight: "1",
+                      marginBottom: "4px"
+                    },
+                    children: [
+                      result.correctAnswers,
+                      " of ",
+                      result.totalQuestions
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "20px",
+                      fontWeight: "600",
+                      color: "#6b7280",
+                      marginBottom: "12px"
+                    },
+                    children: "correct answers"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { ...defaultStyles.resultDetails, marginTop: "8px" }, children: [
+            "Time: ",
+            formatTime(result.timeSpentSeconds)
+          ] })
+        ] })
       ] })
+    ] });
+  }
+  if (quiz && showIntro) {
+    return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsxs("div", { style: defaultStyles.intro, children: [
+      /* @__PURE__ */ jsx("div", { style: defaultStyles.introTitle, children: quiz.title }),
+      /* @__PURE__ */ jsx("div", { style: defaultStyles.introSubtitle, children: "Ready to test your knowledge?" }),
+      /* @__PURE__ */ jsxs("div", { style: defaultStyles.introQuestionCount, children: [
+        quiz.questions.length,
+        " question",
+        quiz.questions.length !== 1 ? "s" : "",
+        " to answer"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: defaultStyles.startButton,
+          onClick: handleStart,
+          onMouseOver: (e) => {
+            e.currentTarget.style.transform = "translateY(-2px)";
+            e.currentTarget.style.boxShadow = "0 6px 20px rgba(124, 58, 237, 0.5)";
+          },
+          onMouseOut: (e) => {
+            e.currentTarget.style.transform = "translateY(0)";
+            e.currentTarget.style.boxShadow = "0 4px 14px rgba(124, 58, 237, 0.4)";
+          },
+          "data-testid": "button-start-quiz",
+          children: "Let's Start!"
+        }
+      )
     ] }) });
   }
   if (!quiz || !currentQuestion) {
     return /* @__PURE__ */ jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsx("div", { style: defaultStyles.error, children: "No quiz data available" }) });
   }
   const selectedAnswer = answers.get(currentQuestion.id);
-  const isLastQuestion = currentQuestionIndex === quiz.questions.length - 1;
-  const progressPercent = (currentQuestionIndex + 1) / quiz.questions.length * 100;
+  const isLastQuestion = currentQuestionIndex === totalQuestions - 1;
+  const progressPercent = (currentQuestionIndex + 1) / totalQuestions * 100;
+  const remainingSlots = maxQuestions - totalQuestions;
+  const questionsToAdd = Math.min(5, remainingSlots);
+  const canAddMore = onGenerateMoreQuestions && remainingSlots > 0;
   return /* @__PURE__ */ jsxs("div", { className, style: defaultStyles.container, children: [
     /* @__PURE__ */ jsxs("div", { style: defaultStyles.header, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx("div", { style: defaultStyles.title, children: quiz.title }),
-        /* @__PURE__ */ jsx("div", { style: defaultStyles.timer, children: formatTime(elapsedSeconds) })
-      ] }),
+      /* @__PURE__ */ jsx("div", { style: defaultStyles.title, children: quiz.title }),
       /* @__PURE__ */ jsxs("div", { style: defaultStyles.progress, children: [
         "Question ",
         currentQuestionIndex + 1,
         " of ",
-        quiz.questions.length
+        totalQuestions
       ] }),
       /* @__PURE__ */ jsx("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ jsx("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: defaultStyles.question, children: [
       /* @__PURE__ */ jsx("div", { style: defaultStyles.questionText, children: currentQuestion.question }),
-      (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ jsx("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            ...defaultStyles.option,
-            ...selectedAnswer === option ? defaultStyles.optionSelected : {}
+      (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            style: {
+              ...optionStyle,
+              cursor: showFeedback ? "default" : "pointer"
+            },
+            onClick: () => !showFeedback && handleAnswerChange(option),
+            children: option
           },
-          onClick: () => handleAnswerChange(option),
-          children: option
-        },
-        idx
-      )) }),
+          idx
+        );
+      }) }),
       currentQuestion.type === "multiple" && /* @__PURE__ */ 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__ */ jsx(
           "div",
           {
             style: {
-              ...defaultStyles.option,
-              ...selected ? defaultStyles.optionSelected : {}
+              ...optionStyle,
+              cursor: showFeedback ? "default" : "pointer"
             },
             onClick: () => {
+              if (showFeedback) return;
               const current = Array.isArray(selectedAnswer) ? selectedAnswer : [];
               if (selected) {
                 handleAnswerChange(current.filter((o) => o !== option));
@@ -564,7 +1089,8 @@ function QuizPlayer({
           style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
           value: selectedAnswer || "",
           onChange: (e) => handleAnswerChange(e.target.value),
-          placeholder: "Type your answer here..."
+          placeholder: "Type your answer here...",
+          disabled: showFeedback
         }
       ),
       currentQuestion.type === "fill" && /* @__PURE__ */ jsx("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ jsx(
@@ -577,47 +1103,86 @@ function QuizPlayer({
             current[idx] = e.target.value;
             handleAnswerChange(current);
           },
-          placeholder: `Blank ${idx + 1}`
+          placeholder: `Blank ${idx + 1}`,
+          disabled: showFeedback
         },
         idx
-      )) })
+      )) }),
+      showFeedback && currentAnswerDetail && /* @__PURE__ */ jsxs("div", { style: {
+        ...defaultStyles.feedback,
+        ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
+      }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          ...defaultStyles.feedbackTitle,
+          ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
+        }, children: currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
+        currentQuestion.explanation && /* @__PURE__ */ jsx("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: defaultStyles.buttons, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { style: defaultStyles.buttonsColumn, children: [
+      showFeedback && isLastQuestion && canAddMore && /* @__PURE__ */ jsx(
         "button",
         {
           style: {
-            ...defaultStyles.button,
-            ...currentQuestionIndex > 0 ? defaultStyles.buttonSecondary : defaultStyles.buttonDisabled
+            ...defaultStyles.buttonAddMore,
+            ...isGeneratingExtra ? defaultStyles.buttonAddMoreDisabled : {}
           },
-          onClick: handlePrevious,
-          disabled: currentQuestionIndex === 0,
-          children: "Previous"
+          onClick: handleAddMoreQuestions,
+          disabled: isGeneratingExtra,
+          "data-testid": "button-add-more-questions",
+          children: isGeneratingExtra ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Spinner, { size: 16, color: "#9ca3af" }),
+            "Generating Questions..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            "+ Add ",
+            questionsToAdd,
+            " More Question",
+            questionsToAdd !== 1 ? "s" : ""
+          ] })
         }
       ),
-      isLastQuestion ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          style: {
-            ...defaultStyles.button,
-            ...isSubmitting ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
-          },
-          onClick: handleSubmit,
-          disabled: isSubmitting || selectedAnswer === void 0,
-          children: isSubmitting ? /* @__PURE__ */ jsx(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
-        }
-      ) : /* @__PURE__ */ jsx(
-        "button",
-        {
-          style: {
-            ...defaultStyles.button,
-            ...isNavigating || selectedAnswer === void 0 ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
-          },
-          onClick: handleNext,
-          disabled: isNavigating || selectedAnswer === void 0,
-          children: isNavigating ? /* @__PURE__ */ jsx(Spinner, { size: 16, color: "#9ca3af" }) : "Next"
-        }
-      )
+      /* @__PURE__ */ jsx("div", { style: { ...defaultStyles.buttons, justifyContent: "flex-end" }, children: showFeedback ? (
+        // After viewing feedback
+        isLastQuestion ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: {
+              ...defaultStyles.button,
+              ...isSubmitting || isGeneratingExtra ? defaultStyles.buttonDisabled : defaultStyles.buttonPrimary
+            },
+            onClick: handleSubmit,
+            disabled: isSubmitting || isGeneratingExtra,
+            "data-testid": "button-submit-quiz",
+            children: isSubmitting ? /* @__PURE__ */ jsx(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: {
+              ...defaultStyles.button,
+              ...defaultStyles.buttonPrimary
+            },
+            onClick: handleContinue,
+            "data-testid": "button-continue",
+            children: "Continue"
+          }
+        )
+      ) : (
+        // Before checking answer
+        /* @__PURE__ */ 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__ */ jsx(Spinner, { size: 16, color: "#9ca3af" }) : "Check Answer"
+          }
+        )
+      ) })
     ] })
   ] });
 }