Implement-Answer-Validation-and-Feedback-System

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,16 +77,19 @@ 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;
                 let state: "default" | "red" | "green" | "teal" = "default";
 
                 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}

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 (

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 },
     ],
   },
-];
+];