Added timers

Author: akshat-chd

src/pages/games/Gk_quiz.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import "../../styles/pages/games/Gk_quiz.css";
 
 const ALL_QUESTIONS = [
@@ -24,6 +24,8 @@ const ALL_QUESTIONS = [
   { q: "Which is the hardest natural substance?", options: ["Gold", "Iron", "Diamond", "Silver"], ans: 2 }
 ];
 
+const QUESTION_TIME = 15; // seconds
+
 function shuffleArray(arr) {
   const copy = [...arr];
   for (let i = copy.length - 1; i > 0; i--) {
@@ -41,11 +43,48 @@ export default function GKQuiz() {
   const [answered, setAnswered] = useState(false);
   const [chosenIndex, setChosenIndex] = useState(null);
   const [showResult, setShowResult] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(QUESTION_TIME);
+
+  // to clear interval when question changes or component unmounts
+  const timerRef = useRef(null);
 
   useEffect(() => {
     startQuiz();
   }, []);
 
+  // start timer whenever question changes
+  useEffect(() => {
+    if (questions.length === 0) return;
+    startTimer();
+    return () => {
+      clearInterval(timerRef.current);
+    };
+  }, [current, questions]);
+
+  function startTimer() {
+    clearInterval(timerRef.current);
+    setTimeLeft(QUESTION_TIME);
+    timerRef.current = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current);
+          if (!answered) {
+            handleTimeUp();
+          }
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  }
+
+  function handleTimeUp() {
+    const qObj = questions[current];
+    setAnswered(true);
+    setChosenIndex(null);
+    setWrong((w) => w + 1);
+  }
+
   function startQuiz() {
     const shuffled = shuffleArray(ALL_QUESTIONS).slice(0, 5);
     setQuestions(shuffled);
@@ -55,20 +94,23 @@ export default function GKQuiz() {
     setAnswered(false);
     setChosenIndex(null);
     setShowResult(false);
+    setTimeLeft(QUESTION_TIME);
   }
 
   function handleOptionClick(index) {
     if (answered) return;
     const qObj = questions[current];
     setChosenIndex(index);
     setAnswered(true);
+    clearInterval(timerRef.current);
     if (index === qObj.ans) setCorrect((c) => c + 1);
     else setWrong((w) => w + 1);
   }
 
   function handleNext() {
     if (current === questions.length - 1) {
       setShowResult(true);
+      clearInterval(timerRef.current);
       return;
     }
     setCurrent((c) => c + 1);
@@ -101,6 +143,7 @@ export default function GKQuiz() {
   }
 
   const qObj = questions[current];
+  const pct = Math.round((timeLeft / QUESTION_TIME) * 100);
 
   return (
     <div className="gk-quiz-wrapper">
@@ -110,7 +153,13 @@ export default function GKQuiz() {
           <p className="gk-quiz-subtitle">Answer the questions and check instantly</p>
         </div>
         <div className="gk-quiz-body">
-          <p className="gk-quiz-progress">Question {current + 1} of {questions.length}</p>
+          <div className="gk-top-row">
+            <p className="gk-quiz-progress">Question {current + 1} of {questions.length}</p>
+            <div className={`gk-timer ${timeLeft <= 5 ? "low" : ""}`}>
+              <div className="gk-timer-bar" style={{ width: pct + "%" }}></div>
+              <span className="gk-timer-text">{timeLeft}s</span>
+            </div>
+          </div>
           <h3 className="gk-quiz-question">{qObj.q}</h3>
           <div className="gk-quiz-options">
             {qObj.options.map((opt, idx) => {
@@ -137,7 +186,7 @@ export default function GKQuiz() {
             <div className="gk-quiz-feedback">
               {chosenIndex === qObj.ans
                 ? <>✅ Correct! The right answer is: {qObj.options[qObj.ans]}</>
-                : <>❌ Wrong! The correct answer is: {qObj.options[qObj.ans]}</>}
+                : <>❌ Time up / wrong! The correct answer is: {qObj.options[qObj.ans]}</>}
             </div>
           )}
           {answered && (

src/styles/pages/games/Gk_quiz.css

@@ -37,12 +37,53 @@
   padding: 20px;
 }
 
+.gk-top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
 .gk-quiz-progress {
   color: #64748b;
-  margin-bottom: 12px;
   font-size: 0.82rem;
 }
 
+.gk-timer {
+  position: relative;
+  width: 120px;
+  height: 26px;
+  background: #e2e8f0;
+  border-radius: 9999px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.gk-timer-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #22c55e;
+  transition: width 0.25s linear;
+}
+
+.gk-timer-text {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.gk-timer.low .gk-timer-bar {
+  background: #ef4444;
+}
+
 .gk-quiz-question {
   font-size: 1.05rem;
   font-weight: 600;
@@ -71,14 +112,6 @@
   gap: 10px;
 }
 
-.gk-quiz-option::before {
-  content: "";
-  width: 8px;
-  height: 8px;
-  border-radius: 9999px;
-  background: rgba(37, 99, 235, 0.12);
-}
-
 .gk-quiz-option:hover:not(:disabled) {
   background: #ecf2ff;
   border-color: rgba(37, 99, 235, 0.28);
@@ -94,19 +127,11 @@
   border-color: rgba(34, 197, 94, 0.4);
 }
 
-.gk-quiz-option.gk-correct::before {
-  background: #22c55e;
-}
-
 .gk-quiz-option.gk-wrong {
   background: #fee2e2;
   border-color: rgba(239, 68, 68, 0.4);
 }
 
-.gk-quiz-option.gk-wrong::before {
-  background: #ef4444;
-}
-
 .gk-quiz-feedback {
   margin-top: 14px;
   font-weight: 600;
@@ -159,10 +184,11 @@
   .gk-quiz-body {
     padding: 18px 14px 24px;
   }
-  .gk-quiz-question {
-    font-size: 1rem;
+  .gk-top-row {
+    flex-direction: column;
+    align-items: flex-start;
   }
-  .gk-quiz-option {
-    font-size: 0.9rem;
+  .gk-timer {
+    width: 100%;
   }
 }