From 16d333adb933c9a23b9ce660dc5b0a95c6479355 Mon Sep 17 00:00:00 2001
From: samad13 <yusufabdulsamad93@gmail.com>
Date: Tue, 27 Jan 2026 14:55:57 +0100
Subject: [PATCH 1/2] Implement-Answer-Validation-and-Feedback-System

---
 frontend/app/quiz/page.tsx                | 61 +++++++++++++++++------
 frontend/components/quiz/AnswerOption.tsx |  8 +--
 frontend/lib/Quiz_data.ts                 |  6 ++-
 3 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/frontend/app/quiz/page.tsx b/frontend/app/quiz/page.tsx
index 1f78332..20d6e78 100644
--- a/frontend/app/quiz/page.tsx
+++ b/frontend/app/quiz/page.tsx
@@ -21,7 +21,8 @@ export default function QuizPage() {
 
   const actionBtnRef = useRef<HTMLButtonElement>(null);
 
-  const question = MOCK_QUIZ[step];
+  const QUIZ = MOCK_QUIZ.slice(0, 2);
+  const question = QUIZ[step];
 
   const handleSelectOption = (optionId: string) => {
     if (isSubmitted) return;
@@ -36,15 +37,17 @@ export default function QuizPage() {
 
   const handleAction = () => {
     if (!isSubmitted) {
-      setIsSubmitted(true);
-      const selectedOption = question.options.find(
-        (opt) => opt.id === selectedId,
-      );
-      if (selectedOption?.isCorrect) {
-        setScore((prev) => prev + 1);
-      }
+      setTimeout(() => {
+        setIsSubmitted(true);
+        const selectedOption = question.options.find(
+          (opt) => opt.id === selectedId,
+        );
+        if (selectedOption?.isCorrect) {
+          setScore((prev) => prev + 1);
+        }
+      }, 150);
     } else {
-      if (step < MOCK_QUIZ.length - 1) {
+      if (step < QUIZ.length - 1) {
         setStep(step + 1);
         setSelectedId(null);
         setIsSubmitted(false);
@@ -58,16 +61,14 @@ export default function QuizPage() {
     <div
       className={`${nunito.className} min-h-screen bg-[#050C16] text-white flex flex-col p-6`}
     >
-      {!isFinished && (
-        <QuizHeader current={step + 1} total={MOCK_QUIZ.length} />
-      )}
+      {!isFinished && <QuizHeader current={step + 1} total={QUIZ.length} />}
 
       <main className="flex-grow flex flex-col items-center justify-center max-w-[566px] mx-auto w-full">
         {isFinished ? (
           <LevelComplete
             totalPts={score * 10}
             correctAnswers={score}
-            totalQuestions={MOCK_QUIZ.length}
+            totalQuestions={QUIZ.length}
             timeTaken="3:10"
             onClaim={() => alert("Points Claimed!")}
           />
@@ -76,6 +77,9 @@ export default function QuizPage() {
             <h2 className="text-[28px] mt-10 font-semibold text-center">
               {question.question}
             </h2>
+            <p className="text-center text-sm text-[#E6E6E6]">
+              Points: {score * 10}
+            </p>
             <div className="space-y-7">
               {question.options.map((opt) => {
                 const isSelected = selectedId === opt.id;
@@ -83,9 +87,9 @@ export default function QuizPage() {
 
                 if (isSubmitted) {
                   if (isSelected) {
-                    state = opt.isCorrect ? "green" : "red";
+                    state = opt.isCorrect ? "teal" : "red";
                   } else if (opt.isCorrect) {
-                    state = "green";
+                    state = "teal";
                   }
                 } else if (isSelected) {
                   state = "teal";
@@ -102,6 +106,33 @@ export default function QuizPage() {
                 );
               })}
             </div>
+            {isSubmitted && (
+              <div className="mt-4 space-y-2">
+                {(() => {
+                  const selectedOption = question.options.find(
+                    (o) => o.id === selectedId,
+                  );
+                  const correctOption = question.options.find(
+                    (o) => o.isCorrect,
+                  );
+                  const wasCorrect = !!selectedOption?.isCorrect;
+                  return (
+                    <>
+                      {!wasCorrect && correctOption && (
+                        <div className="text-sm font-semibold text-[#14B8A6] text-center">
+                          Correct answer: {correctOption.text}
+                        </div>
+                      )}
+                      {question.explanation && (
+                        <p className="text-xs text-[#E6E6E6] text-center">
+                          {question.explanation}
+                        </p>
+                      )}
+                    </>
+                  );
+                })()}
+              </div>
+            )}
 
             <button
               ref={actionBtnRef}
diff --git a/frontend/components/quiz/AnswerOption.tsx b/frontend/components/quiz/AnswerOption.tsx
index 042f04e..9602ecd 100644
--- a/frontend/components/quiz/AnswerOption.tsx
+++ b/frontend/components/quiz/AnswerOption.tsx
@@ -27,10 +27,10 @@ export function AnswerOption({
     textClass = "text-rose-500";
     shadowColor = "#F43F5E";
   } else if (state === "teal") {
-    borderClass = "border-cyan-400";
-    bgClass = "bg-cyan-400/10";
-    textClass = "text-cyan-400";
-    shadowColor = "#22D3EE";
+    borderClass = "border-[#14B8A6]";
+    bgClass = "bg-[#D7FDF7]";
+    textClass = "text-[#14B8A6]";
+    shadowColor = "#14B8A6";
   }
 
   return (
diff --git a/frontend/lib/Quiz_data.ts b/frontend/lib/Quiz_data.ts
index 9757293..bc93739 100644
--- a/frontend/lib/Quiz_data.ts
+++ b/frontend/lib/Quiz_data.ts
@@ -2,6 +2,8 @@ export const MOCK_QUIZ = [
   {
     id: 1,
     question: "Which consensus mechanism does Bitcoin use?",
+    explanation:
+      "Bitcoin secures the network with Proof of Work, where miners solve computational puzzles to validate blocks.",
     options: [
       { id: "1a", text: "Proof of Authority", isCorrect: false },
       { id: "1b", text: "Proof of Work", isCorrect: true },
@@ -12,6 +14,8 @@ export const MOCK_QUIZ = [
   {
     id: 2,
     question: "What is the maximum supply of Bitcoin?",
+    explanation:
+      "Bitcoin’s supply is capped at 21 million coins by the protocol, preventing inflation beyond this limit.",
     options: [
       { id: "2a", text: "21 Million", isCorrect: true },
       { id: "2b", text: "100 Million", isCorrect: false },
@@ -49,4 +53,4 @@ export const MOCK_QUIZ = [
       { id: "5d", text: "Gwei", isCorrect: false },
     ],
   },
-];
\ No newline at end of file
+];

From 4029f9a956ba291434a46eb1a665d04cd368935b Mon Sep 17 00:00:00 2001
From: samad13 <yusufabdulsamad93@gmail.com>
Date: Wed, 28 Jan 2026 12:18:10 +0100
Subject: [PATCH 2/2] chore: update package-lock

---
 package-lock.json | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 662de9a..f5bdc45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -188,7 +188,7 @@
       "version": "1.13.5",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.13.5.tgz",
       "integrity": "sha512-WezcBo8a0Dg2rnR82zhwoR6aRNxeTGfK5QCD6TQ+kg3xx/zNT02s/0o+81h/3zhvFSB24NtqEr8FTw88O5W/JQ==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -4258,6 +4258,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4274,6 +4275,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4290,6 +4292,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -4306,6 +4309,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4322,6 +4326,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4338,6 +4343,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4354,6 +4360,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4370,6 +4377,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4386,6 +4394,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4402,6 +4411,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -4415,7 +4425,7 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
       "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/@swc/helpers": {
@@ -4431,7 +4441,7 @@
       "version": "0.1.24",
       "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.24.tgz",
       "integrity": "sha512-tjTMh3V4vAORHtdTprLlfoMptu1WfTZG9Rsca6yOKyNYsRr+MUXutKmliB17orgSZk5DpnDxs8GUdd/qwYxOng==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@swc/counter": "^0.1.3"