[FEATURE]: Per-module quiz for COA

app/sem3/coa/[chapter]/page.tsx

@@ -10,12 +10,14 @@ import { Ch7Content } from "../content/chapter7";
 import { Ch8Content } from "../content/chapter8";
 import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
 import { Righteous } from "next/font/google";
+import { moduleQuizzes } from "@/lib/quizData";
+import ChapterQuizInline from "../components/ChapterQuizInline";
 
 const righteous = Righteous({
-      subsets: ['latin'], 
-      weight: '400', 
-      variable: '--font-righteous', 
-    });
+  subsets: ['latin'],
+  weight: '400',
+  variable: '--font-righteous',
+});
 
 // Chapter data
 const chapters = [
@@ -46,6 +48,19 @@ export default function ChapterPage({ params }: ChapterProps) {
   const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
   const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;
 
+  const chapterQuizSlugMap: Record<string, string> = {
+    ch1: "coa-ch1",
+    ch2: "coa-ch2",
+    ch3: "coa-ch3",
+    ch4: "coa-ch4",
+    ch5: "coa-ch5",
+    ch6: "coa-ch6",
+    ch7: "coa-ch7",
+    ch8: "coa-ch8"
+  };
+
+  const chapterQuiz = moduleQuizzes.find((quiz) => quiz.slug === chapterQuizSlugMap[params.chapter]);
+
   return (
     <div className="flex flex-col bg-[#1B0D00] min-h-full p-2 pt-6 text-[#e2d1c1]">
       {/* Content */}
@@ -84,6 +99,12 @@ export default function ChapterPage({ params }: ChapterProps) {
 
         <hr className="my-6 border-t-3" />
         <ChapterComponent />
+
+        {chapterQuiz ? (
+          <div className="mt-12">
+            <ChapterQuizInline quiz={chapterQuiz} />
+          </div>
+        ) : null}
       </div>
 
       {/* Navigation Buttons */}
@@ -106,7 +127,7 @@ export default function ChapterPage({ params }: ChapterProps) {
             className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
             style={{ fontFamily: 'Rockwell, Serif, serif' }}
           >
-            {nextChapter.title} <ArrowBigRight className="inline-block ml-1" /> 
+            {nextChapter.title} <ArrowBigRight className="inline-block ml-1" />
           </Link>
         ) : (
           <div />

app/sem3/coa/components/ChapterQuizInline.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import type { Quiz } from "@/lib/quizData";
+import QuizClient from "@/app/quiz/[slug]/QuizClient";
+
+interface Props {
+  quiz: Quiz;
+}
+
+export default function ChapterQuizInline({ quiz }: Props) {
+  const [showQuiz, setShowQuiz] = useState(false);
+
+  if (showQuiz) {
+    return <QuizClient quiz={quiz} inline autoStart onClose={() => setShowQuiz(false)} />;
+  }
+
+  return (
+    <div className="w-full">
+      <div className="w-full rounded-3xl border border-[#c7a669] bg-[#2a1b0f] p-8 shadow-xl text-left">
+        <p className="text-lg text-[#f5e7c3] mb-4" style={{ fontFamily: "Rockwell, serif" }}>
+          Ready to test your {quiz.moduleTitle} knowledge?
+        </p>
+        <h2 className="text-3xl font-bold text-[#f0d7a8] mb-3" style={{ fontFamily: "Rockwell, serif" }}>
+          {quiz.moduleTitle}
+        </h2>
+        <p className="text-base text-[#dcd2b8] mb-3" style={{ fontFamily: "Rockwell, serif" }}>
+          {quiz.description}
+        </p>
+        <div className="text-sm text-[#a07840] mb-6 flex flex-wrap gap-3" style={{ fontFamily: "Rockwell, serif" }}>
+          <span>{Math.min(5, quiz.questions.length)} questions</span>
+          <span>·</span>
+          <span>No time limit</span>
+          <span>·</span>
+          <span>Instant feedback</span>
+        </div>
+        <button
+          onClick={() => setShowQuiz(true)}
+          className="rounded-full cursor-pointer bg-[#e2d1c1] px-6 py-3 text-xl font-semibold text-[#1b0d00] hover:bg-[#f7e0b3] transition"
+          style={{ fontFamily: "Rockwell, serif" }}
+        >
+          Take Chapter Quiz
+        </button>
+      </div>
+    </div>
+  );
+}