From a36dd4c3378855f89c6ae04e66c66023d811c8a2 Mon Sep 17 00:00:00 2001
From: Gayatri Padalia <gayatripadalia@gmail.com>
Date: Mon, 20 Jul 2026 18:43:45 +0530
Subject: [PATCH] feat: add quiz timer and improve quiz UI

Signed-off-by: Gayatri Padalia <gayatripadalia@gmail.com>
---
 app/quiz/[slug]/QuizClient.tsx | 63 ++++++++++++++++++++++++++++------
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/app/quiz/[slug]/QuizClient.tsx b/app/quiz/[slug]/QuizClient.tsx
index f467a04..bb72d1b 100644
--- a/app/quiz/[slug]/QuizClient.tsx
+++ b/app/quiz/[slug]/QuizClient.tsx
@@ -56,10 +56,16 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
     { question: string; chosen: number; correct: number }[]
   >([]);
   const [questionSet, setQuestionSet] = useState<QuizQuestion[]>([]);
+  
+  const QUIZ_TIME = 5 * 60; // 5 minutes
+
+  const [timeLeft, setTimeLeft] = useState(QUIZ_TIME);
+
   const [didAutoStart, setDidAutoStart] = useState(false);
+
   const isInline = inline ?? false;
 
-  const q = questionSet[current]!;
+  const q = questionSet[current];
   const total = Math.min(10, quiz.questions.length);
 
   function startQuiz() {
@@ -70,6 +76,7 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
     setAnswered(false);
     setScore(0);
     setResults([]);
+    setTimeLeft(QUIZ_TIME);
     setState("active");
     setDidAutoStart(true);
   }
@@ -107,10 +114,21 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
   }
 
   useEffect(() => {
-    if (isInline && autoStart && state === "idle" && !didAutoStart) {
-      startQuiz();
-    }
-  }, [autoStart, didAutoStart, isInline, state]);
+  if (state !== "active") return;
+
+  const timer = setInterval(() => {
+    setTimeLeft((prev) => {
+      if (prev <= 1) {
+        clearInterval(timer);
+        setState("finished");
+        return 0;
+      }
+      return prev - 1;
+    });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [state]);
 
   function getOptionClass(idx: number): string {
     const base =
@@ -126,6 +144,8 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
   }
 
   const pct = Math.round((score / total) * 100);
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = String(timeLeft % 60).padStart(2, "0");
 
   if (state === "idle") {
     return (
@@ -174,7 +194,7 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
                 <div className="mt-4 text-sm text-[#a07840] flex flex-wrap gap-2">
                   <span>{total} questions</span>
                   <span>·</span>
-                  <span>No time limit</span>
+                  <span>5 minute time limit</span>
                   <span>·</span>
                   <span>Instant feedback</span>
                 </div>
@@ -186,7 +206,7 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
                 <div className="flex justify-center flex-wrap gap-4 md:gap-6 mb-10 text-sm md:text-base text-[#a07840] font-medium" style={{ fontFamily: "Rockwell, serif" }}>
                   <span>{total} questions</span>
                   <span className="hidden sm:inline">·</span>
-                  <span>No time limit</span>
+                  <span>5 minute time limit</span>
                   <span className="hidden sm:inline">·</span>
                   <span>Instant feedback</span>
                 </div>
@@ -353,11 +373,32 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
               >
                 ← Back
               </button>
-              <span className="text-sm text-[#edd9a5] uppercase tracking-[0.2em]">Quiz</span>
+              <span className="text-sm text-[#8B5E3C] uppercase tracking-[0.2em]">Quiz</span>
             </div>
-            <div className="flex justify-between gap-4">
-              <span>Question {current + 1} of {total}</span>
-              <span>Score: {score}</span>
+            <div className="flex justify-between items-center gap-4">
+            <span className="font-semibold text-[#8B5E3C]">Question {current + 1} of {total}</span>
+
+            <span
+            className={`font-bold ${
+            timeLeft <= 10
+            ? "text-red-500 animate-pulse"
+            : timeLeft <= 60
+            ? "text-red-500"
+            : "text-emerald-300"
+        }`}
+        >
+        ⏳ {minutes}:{seconds}
+        </span>
+
+            <span className="font-semibold text-[#8B5E3C]">Score: {score}</span>
+            </div>
+            <div className="w-full h-2 bg-gray-700 rounded-full mt-3">
+            <div
+            className="h-2 rounded-full bg-[#d2b48c] transition-all duration-300"
+            style={{
+            width: `${((current + 1) / total) * 100}%`,
+            }}
+            />
             </div>
           </div>