From 1f1acbe4c9dd353a37a193d9b0a7d09ff5fe2f9d Mon Sep 17 00:00:00 2001
From: Riya Chauhan <96919050+Riyachauhan11@users.noreply.github.com>
Date: Sun, 10 Nov 2024 18:15:42 +0530
Subject: [PATCH] quizes styling updated

---
 assets/html/biographyq.html | 370 +++++++++++++++--------
 assets/html/classicq.html   | 585 +++++++++++++++++++++---------------
 assets/html/fantasyq.html   | 347 +++++++++++++--------
 assets/html/historyq.html   | 354 ++++++++++++++--------
 assets/html/horrorq.html    | 344 +++++++++++++--------
 assets/html/romanceq.html   | 355 ++++++++++++++--------
 assets/html/scienceq.html   | 350 +++++++++++++--------
 assets/html/selfq.html      | 360 ++++++++++++++--------
 assets/html/suspenseq.html  | 345 +++++++++++++--------
 9 files changed, 2164 insertions(+), 1246 deletions(-)
diff --git a/assets/html/biographyq.html b/assets/html/biographyq.html
index e9345bcd..2a0b61b4 100644
--- a/assets/html/biographyq.html
+++ b/assets/html/biographyq.html
@@ -1,191 +1,305 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Biography Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #ffd2d3;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #b00000;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #870000;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Biography Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Biography Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='biography.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='biography.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who is the author of 'The Diary of a Young Girl'?",
-            options: ["Anne Frank", "Helen Keller", "Malala Yousafzai", "Maya Angelou"],
-            answer: "Anne Frank"
+          question: "Who is the author of 'The Diary of a Young Girl'?",
+          options: [
+            "Anne Frank",
+            "Helen Keller",
+            "Malala Yousafzai",
+            "Maya Angelou",
+          ],
+          answer: "Anne Frank",
         },
         {
-            question: "Which autobiography describes Nelson Mandela’s life journey?",
-            options: ["Long Walk to Freedom", "Becoming", "I Am Malala", "Educated"],
-            answer: "Long Walk to Freedom"
+          question:
+            "Which autobiography describes Nelson Mandela’s life journey?",
+          options: [
+            "Long Walk to Freedom",
+            "Becoming",
+            "I Am Malala",
+            "Educated",
+          ],
+          answer: "Long Walk to Freedom",
         },
         {
-            question: "Whose autobiography is titled 'Becoming'?",
-            options: ["Michelle Obama", "Malala Yousafzai", "Oprah Winfrey", "Jane Goodall"],
-            answer: "Michelle Obama"
+          question: "Whose autobiography is titled 'Becoming'?",
+          options: [
+            "Michelle Obama",
+            "Malala Yousafzai",
+            "Oprah Winfrey",
+            "Jane Goodall",
+          ],
+          answer: "Michelle Obama",
         },
         {
-            question: "In 'I Am Malala,' what does Malala Yousafzai advocate for?",
-            options: ["Environmental protection", "Women's rights", "Education for girls", "Healthcare reform"],
-            answer: "Education for girls"
+          question:
+            "In 'I Am Malala,' what does Malala Yousafzai advocate for?",
+          options: [
+            "Environmental protection",
+            "Women's rights",
+            "Education for girls",
+            "Healthcare reform",
+          ],
+          answer: "Education for girls",
         },
         {
-            question: "Who wrote 'The Autobiography of Malcolm X'?",
-            options: ["Malcolm X and Alex Haley", "Martin Luther King Jr.", "Frederick Douglass", "James Baldwin"],
-            answer: "Malcolm X and Alex Haley"
+          question: "Who wrote 'The Autobiography of Malcolm X'?",
+          options: [
+            "Malcolm X and Alex Haley",
+            "Martin Luther King Jr.",
+            "Frederick Douglass",
+            "James Baldwin",
+          ],
+          answer: "Malcolm X and Alex Haley",
         },
         {
-            question: "Which memoir is by Tara Westover, focusing on her quest for education?",
-            options: ["Educated", "Becoming", "The Glass Castle", "Hillbilly Elegy"],
-            answer: "Educated"
-        }
-    ];
+          question:
+            "Which memoir is by Tara Westover, focusing on her quest for education?",
+          options: [
+            "Educated",
+            "Becoming",
+            "The Glass Castle",
+            "Hillbilly Elegy",
+          ],
+          answer: "Educated",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'index.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "index.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'biography.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "biography.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/classicq.html b/assets/html/classicq.html
index e062b85d..c7c674af 100644
--- a/assets/html/classicq.html
+++ b/assets/html/classicq.html
@@ -1,298 +1,401 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Classic Literature Quiz</title>
     <style>
-                
-    /* Circle styles */
-    .circle {
-      height: 24px;
-      width: 24px;
-      border-radius: 50%;
-      background-color: black;
-      position: fixed;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      z-index: 99999999;
-      transition: transform 0.1s ease-out;
-    }
-    
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #ffd2d3;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
-
-        .quiz-container {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: center;
-        }
-
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #b00000;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      /* Circle styles */
+      .circle {
+        height: 24px;
+        width: 24px;
+        border-radius: 50%;
+        background-color: black;
+        position: fixed;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 99999999;
+        transition: transform 0.1s ease-out;
+      }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
+
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
+
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
+
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
+
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
+
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
+
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
+
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Circles -->
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <script>
+      // Coordinates for the cursor
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+
+      // Colors for the circles
+      const colors = [
+        "#ffb56b",
+        "#fdaf69",
+        "#f89d63",
+        "#f59761",
+        "#ef865e",
+        "#ec805d",
+        "#e36e5c",
+        "#df685c",
+        "#d5585c",
+        "#d1525c",
+        "#c5415d",
+        "#c03b5d",
+        "#b22c5e",
+        "#ac265e",
+        "#9c155f",
+        "#950f5f",
+        "#830060",
+        "#7c0060",
+        "#680060",
+        "#60005f",
+        "#48005f",
+        "#3d005e",
+      ];
+
+      // Assign colors and initial position to each circle
+      circles.forEach(function (circle, index) {
+        circle.x = 0;
+        circle.y = 0;
+        circle.style.backgroundColor = colors[index % colors.length];
+      });
+
+      // Update the coordinates when the mouse moves
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.clientX;
+        coords.y = e.clientY;
+      });
+
+      // Animation function to move the circles
+      function animateCircles() {
+        let x = coords.x;
+        let y = coords.y;
+
+        circles.forEach(function (circle, index) {
+          // Update the position and scale of each circle
+          circle.style.left = x - 12 + "px";
+          circle.style.top = y - 12 + "px";
+          circle.style.scale = (circles.length - index) / circles.length;
+
+          circle.x = x;
+          circle.y = y;
+
+          // Get the next circle in the sequence
+          const nextCircle = circles[index + 1] || circles[0];
+          x += (nextCircle.x - x) * 0.15;
+          y += (nextCircle.y - y) * 0.15;
+        });
 
-        button:hover {
-            background-color: #0056b3;
-        }
+        // Repeat the animation
+        requestAnimationFrame(animateCircles);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      // Start the animation
+      animateCircles();
+    </script>
 
-        .option {
-            margin: 5px 0;
-        }
-
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
-                     <!-- Circles -->
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div> 
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-      <div class="circle"></div>
-              <script>
-
-  // Coordinates for the cursor
-  const coords = { x: 0, y: 0 };
-  const circles = document.querySelectorAll(".circle");
-
-  // Colors for the circles
-  const colors = [
-    "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-    "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-    "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-    "#680060", "#60005f", "#48005f", "#3d005e"
-  ];
-
-  // Assign colors and initial position to each circle
-  circles.forEach(function (circle, index) {
-    circle.x = 0;
-    circle.y = 0;
-    circle.style.backgroundColor = colors[index % colors.length];
-  });
-
-  // Update the coordinates when the mouse moves
-  window.addEventListener("mousemove", function (e) {
-    coords.x = e.clientX;
-    coords.y = e.clientY;
-  });
-
-  // Animation function to move the circles
-  function animateCircles() {
-    let x = coords.x;
-    let y = coords.y;
-
-    circles.forEach(function (circle, index) {
-      // Update the position and scale of each circle
-      circle.style.left = x - 12 + "px";
-      circle.style.top = y - 12 + "px";
-      circle.style.scale = (circles.length - index) / circles.length;
-
-      circle.x = x;
-      circle.y = y;
-
-      // Get the next circle in the sequence
-      const nextCircle = circles[index + 1] || circles[0];
-      x += (nextCircle.x - x) * 0.15;
-      y += (nextCircle.y - y) * 0.15;
-    });
-
-    // Repeat the animation
-    requestAnimationFrame(animateCircles);
-  }
-
-  // Start the animation
-  animateCircles();
-
-</script>
-
-<div class="quiz-container">
-    <h1>Classic Literature Quiz</h1>
-    <div id="quiz-questions">
+    <div class="quiz-container">
+      <h1>Classic Literature Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='index.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who is the author of 'Pride and Prejudice'?",
-            options: ["Charles Dickens", "Jane Austen", "George Orwell", "Leo Tolstoy"],
-            answer: "Jane Austen"
+          question: "Who is the author of 'Pride and Prejudice'?",
+          options: [
+            "Charles Dickens",
+            "Jane Austen",
+            "George Orwell",
+            "Leo Tolstoy",
+          ],
+          answer: "Jane Austen",
         },
         {
-            question: "In 'Moby-Dick', what is the name of Captain Ahab’s ship?",
-            options: ["The Beagle", "The Pequod", "The Bounty", "The Adventure"],
-            answer: "The Pequod"
+          question: "In 'Moby-Dick', what is the name of Captain Ahab’s ship?",
+          options: ["The Beagle", "The Pequod", "The Bounty", "The Adventure"],
+          answer: "The Pequod",
         },
         {
-            question: "Which novel takes place in a dystopian world with surveillance by 'Big Brother'?",
-            options: ["Brave New World", "Fahrenheit 451", "1984", "Animal Farm"],
-            answer: "1984"
+          question:
+            "Which novel takes place in a dystopian world with surveillance by 'Big Brother'?",
+          options: ["Brave New World", "Fahrenheit 451", "1984", "Animal Farm"],
+          answer: "1984",
         },
         {
-            question: "Who is the main protagonist in 'To Kill a Mockingbird'?",
-            options: ["Scout Finch", "Huck Finn", "Elizabeth Bennet", "Pip"],
-            answer: "Scout Finch"
+          question: "Who is the main protagonist in 'To Kill a Mockingbird'?",
+          options: ["Scout Finch", "Huck Finn", "Elizabeth Bennet", "Pip"],
+          answer: "Scout Finch",
         },
         {
-            question: "Which character says 'It is a far, far better thing that I do, than I have ever done' in 'A Tale of Two Cities'?",
-            options: ["Charles Darnay", "Sydney Carton", "Pip", "Jay Gatsby"],
-            answer: "Sydney Carton"
-        }
-    ];
+          question:
+            "Which character says 'It is a far, far better thing that I do, than I have ever done' in 'A Tale of Two Cities'?",
+          options: ["Charles Darnay", "Sydney Carton", "Pip", "Jay Gatsby"],
+          answer: "Sydney Carton",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'classic.html';
-        homeButton.innerText = 'Return to home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "classic.html");
+        homeButton.innerText = "Return to home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'quizzes.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "quizzes.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/fantasyq.html b/assets/html/fantasyq.html
index 86a3d0be..d957ac90 100644
--- a/assets/html/fantasyq.html
+++ b/assets/html/fantasyq.html
@@ -1,186 +1,283 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fantasy Books Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #ffd2d3;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #b00000;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #870000;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Fantasy Books Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Fantasy Books Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='index.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who is the author of 'The Hobbit'?",
-            options: ["J.K. Rowling", "George R.R. Martin", "J.R.R. Tolkien", "Patrick Rothfuss"],
-            answer: "J.R.R. Tolkien"
+          question: "Who is the author of 'The Hobbit'?",
+          options: [
+            "J.K. Rowling",
+            "George R.R. Martin",
+            "J.R.R. Tolkien",
+            "Patrick Rothfuss",
+          ],
+          answer: "J.R.R. Tolkien",
         },
         {
-            question: "What is the first book in the 'Harry Potter' series?",
-            options: ["Harry Potter and the Chamber of Secrets", "Harry Potter and the Sorcerer's Stone", "Harry Potter and the Goblet of Fire", "Harry Potter and the Order of the Phoenix"],
-            answer: "Harry Potter and the Sorcerer's Stone"
+          question: "What is the first book in the 'Harry Potter' series?",
+          options: [
+            "Harry Potter and the Chamber of Secrets",
+            "Harry Potter and the Sorcerer's Stone",
+            "Harry Potter and the Goblet of Fire",
+            "Harry Potter and the Order of the Phoenix",
+          ],
+          answer: "Harry Potter and the Sorcerer's Stone",
         },
         {
-            question: "In 'A Game of Thrones', what is the motto of House Stark?",
-            options: ["Hear Me Roar!", "Winter is Coming", "Fire and Blood", "We Do Not Sow"],
-            answer: "Winter is Coming"
+          question: "In 'A Game of Thrones', what is the motto of House Stark?",
+          options: [
+            "Hear Me Roar!",
+            "Winter is Coming",
+            "Fire and Blood",
+            "We Do Not Sow",
+          ],
+          answer: "Winter is Coming",
         },
         {
-            question: "Who is the protagonist of 'The Name of the Wind'?",
-            options: ["Kvothe", "Rand al'Thor", "Harry Potter", "Frodo Baggins"],
-            answer: "Kvothe"
+          question: "Who is the protagonist of 'The Name of the Wind'?",
+          options: ["Kvothe", "Rand al'Thor", "Harry Potter", "Frodo Baggins"],
+          answer: "Kvothe",
         },
         {
-            question: "Which magical land is accessed through a wardrobe in 'The Chronicles of Narnia'?",
-            options: ["Middle-earth", "Narnia", "Westeros", "Hogwarts"],
-            answer: "Narnia"
-        }
-    ];
+          question:
+            "Which magical land is accessed through a wardrobe in 'The Chronicles of Narnia'?",
+          options: ["Middle-earth", "Narnia", "Westeros", "Hogwarts"],
+          answer: "Narnia",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'index.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "index.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'quizzes.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "quizzes.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/historyq.html b/assets/html/historyq.html
index 3f8f6fcb..ba9abb95 100644
--- a/assets/html/historyq.html
+++ b/assets/html/historyq.html
@@ -1,187 +1,289 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Historical Fiction Books Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f69ca1;
-            color: #090909;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: #ffe3e3;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #e73d3d;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #4d2b47;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Historical Fiction Books Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Historical Fiction Books Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='index.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who wrote 'The Nightingale'?",
-            options: ["Kristin Hannah", "J.K. Rowling", "John Green", "Paulo Coelho"],
-            answer: "Kristin Hannah"
+          question: "Who wrote 'The Nightingale'?",
+          options: [
+            "Kristin Hannah",
+            "J.K. Rowling",
+            "John Green",
+            "Paulo Coelho",
+          ],
+          answer: "Kristin Hannah",
         },
         {
-            question: "In 'All the Light We Cannot See', what is the main setting?",
-            options: ["Paris", "Berlin", "New York", "Saint-Malo"],
-            answer: "Saint-Malo"
+          question:
+            "In 'All the Light We Cannot See', what is the main setting?",
+          options: ["Paris", "Berlin", "New York", "Saint-Malo"],
+          answer: "Saint-Malo",
         },
         {
-            question: "Which novel features the story of a young girl named Liesel in Nazi Germany?",
-            options: ["The Book Thief", "The Tattooist of Auschwitz", "The Nightingale", "The Help"],
-            answer: "The Book Thief"
+          question:
+            "Which novel features the story of a young girl named Liesel in Nazi Germany?",
+          options: [
+            "The Book Thief",
+            "The Tattooist of Auschwitz",
+            "The Nightingale",
+            "The Help",
+          ],
+          answer: "The Book Thief",
         },
         {
-            question: "In 'Homegoing', what is the main theme?",
-            options: ["The impact of slavery on generations", "War and peace", "The French Revolution", "The American Dream"],
-            answer: "The impact of slavery on generations"
+          question: "In 'Homegoing', what is the main theme?",
+          options: [
+            "The impact of slavery on generations",
+            "War and peace",
+            "The French Revolution",
+            "The American Dream",
+          ],
+          answer: "The impact of slavery on generations",
         },
         {
-            question: "Who is the author of 'The Tattooist of Auschwitz'?",
-            options: ["Cheryl Strayed", "Heather Morris", "Margaret Atwood", "Sara Gruen"],
-            answer: "Heather Morris"
-        }
-    ];
+          question: "Who is the author of 'The Tattooist of Auschwitz'?",
+          options: [
+            "Cheryl Strayed",
+            "Heather Morris",
+            "Margaret Atwood",
+            "Sara Gruen",
+          ],
+          answer: "Heather Morris",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'index.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "index.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'index.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "index.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/horrorq.html b/assets/html/horrorq.html
index 825515d0..da51b17f 100644
--- a/assets/html/horrorq.html
+++ b/assets/html/horrorq.html
@@ -1,187 +1,279 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Horror Books Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #ffc8c8;
-            color: #f1f1f1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: #e2898c;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #800000;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #4d0000;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Horror Books Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Horror Books Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='index.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who is the author of 'Dracula'?",
-            options: ["Mary Shelley", "Edgar Allan Poe", "Bram Stoker", "Stephen King"],
-            answer: "Bram Stoker"
+          question: "Who is the author of 'Dracula'?",
+          options: [
+            "Mary Shelley",
+            "Edgar Allan Poe",
+            "Bram Stoker",
+            "Stephen King",
+          ],
+          answer: "Bram Stoker",
         },
         {
-            question: "In Stephen King's 'It', what form does the creature primarily take?",
-            options: ["A bat", "A clown", "A spider", "A wolf"],
-            answer: "A clown"
+          question:
+            "In Stephen King's 'It', what form does the creature primarily take?",
+          options: ["A bat", "A clown", "A spider", "A wolf"],
+          answer: "A clown",
         },
         {
-            question: "Which novel features the haunted Overlook Hotel?",
-            options: ["The Shining", "Pet Sematary", "Misery", "Carrie"],
-            answer: "The Shining"
+          question: "Which novel features the haunted Overlook Hotel?",
+          options: ["The Shining", "Pet Sematary", "Misery", "Carrie"],
+          answer: "The Shining",
         },
         {
-            question: "In 'Frankenstein', who is the creature's creator?",
-            options: ["Victor Frankenstein", "Henry Jekyll", "Abraham Van Helsing", "Jonathan Harker"],
-            answer: "Victor Frankenstein"
+          question: "In 'Frankenstein', who is the creature's creator?",
+          options: [
+            "Victor Frankenstein",
+            "Henry Jekyll",
+            "Abraham Van Helsing",
+            "Jonathan Harker",
+          ],
+          answer: "Victor Frankenstein",
         },
         {
-            question: "In 'The Haunting of Hill House' by Shirley Jackson, what is the main setting?",
-            options: ["A mansion", "An asylum", "A cabin", "A lighthouse"],
-            answer: "A mansion"
-        }
-    ];
+          question:
+            "In 'The Haunting of Hill House' by Shirley Jackson, what is the main setting?",
+          options: ["A mansion", "An asylum", "A cabin", "A lighthouse"],
+          answer: "A mansion",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'classic.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "classic.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'quizzes.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "quizzes.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/romanceq.html b/assets/html/romanceq.html
index a5672681..8b1526d3 100644
--- a/assets/html/romanceq.html
+++ b/assets/html/romanceq.html
@@ -1,186 +1,291 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Romance Books Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #ffd2d3;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #b00000;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #870000;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Romance Books Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Romance Books Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='index.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who wrote 'Pride and Prejudice'?",
-            options: ["Jane Austen", "Louisa May Alcott", "Diana Gabaldon", "Jojo Moyes"],
-            answer: "Jane Austen"
+          question: "Who wrote 'Pride and Prejudice'?",
+          options: [
+            "Jane Austen",
+            "Louisa May Alcott",
+            "Diana Gabaldon",
+            "Jojo Moyes",
+          ],
+          answer: "Jane Austen",
         },
         {
-            question: "In 'Outlander', which historical period does Claire time-travel to?",
-            options: ["18th-century Scotland", "Victorian England", "Medieval France", "Ancient Rome"],
-            answer: "18th-century Scotland"
+          question:
+            "In 'Outlander', which historical period does Claire time-travel to?",
+          options: [
+            "18th-century Scotland",
+            "Victorian England",
+            "Medieval France",
+            "Ancient Rome",
+          ],
+          answer: "18th-century Scotland",
         },
         {
-            question: "In 'Me Before You', who is the main male character with a life-changing injury?",
-            options: ["Will Traynor", "Jamie Fraser", "Mr. Darcy", "Christian Grey"],
-            answer: "Will Traynor"
+          question:
+            "In 'Me Before You', who is the main male character with a life-changing injury?",
+          options: [
+            "Will Traynor",
+            "Jamie Fraser",
+            "Mr. Darcy",
+            "Christian Grey",
+          ],
+          answer: "Will Traynor",
         },
         {
-            question: "Who are the two main characters in 'The Hating Game' by Sally Thorne?",
-            options: ["Lucy and Josh", "Emma and Dexter", "Hazel and Augustus", "Claire and Jamie"],
-            answer: "Lucy and Josh"
+          question:
+            "Who are the two main characters in 'The Hating Game' by Sally Thorne?",
+          options: [
+            "Lucy and Josh",
+            "Emma and Dexter",
+            "Hazel and Augustus",
+            "Claire and Jamie",
+          ],
+          answer: "Lucy and Josh",
         },
         {
-            question: "In 'The Kiss Quotient' by Helen Hoang, what does the main character, Stella, do for a living?",
-            options: ["Econometrician", "Artist", "Writer", "Doctor"],
-            answer: "Econometrician"
-        }
-    ];
+          question:
+            "In 'The Kiss Quotient' by Helen Hoang, what does the main character, Stella, do for a living?",
+          options: ["Econometrician", "Artist", "Writer", "Doctor"],
+          answer: "Econometrician",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'classic.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "classic.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'quizzes.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "quizzes.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/scienceq.html b/assets/html/scienceq.html
index a31e5015..9b8dc0be 100644
--- a/assets/html/scienceq.html
+++ b/assets/html/scienceq.html
@@ -1,186 +1,286 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Science Fiction Books Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #fcbfc0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #003366;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #001f4d;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Science Fiction Books Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Science Fiction Books Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='index.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who wrote 'Dune'?",
-            options: ["Isaac Asimov", "Philip K. Dick", "Frank Herbert", "Arthur C. Clarke"],
-            answer: "Frank Herbert"
+          question: "Who wrote 'Dune'?",
+          options: [
+            "Isaac Asimov",
+            "Philip K. Dick",
+            "Frank Herbert",
+            "Arthur C. Clarke",
+          ],
+          answer: "Frank Herbert",
         },
         {
-            question: "In 'Ender's Game', what is the protagonist Ender's full name?",
-            options: ["Andrew Wiggins", "Paul Atreides", "Luke Skywalker", "Rick Deckard"],
-            answer: "Andrew Wiggins"
+          question:
+            "In 'Ender's Game', what is the protagonist Ender's full name?",
+          options: [
+            "Andrew Wiggins",
+            "Paul Atreides",
+            "Luke Skywalker",
+            "Rick Deckard",
+          ],
+          answer: "Andrew Wiggins",
         },
         {
-            question: "In which dystopian novel is society divided into five factions?",
-            options: ["The Hunger Games", "Divergent", "Fahrenheit 451", "1984"],
-            answer: "Divergent"
+          question:
+            "In which dystopian novel is society divided into five factions?",
+          options: ["The Hunger Games", "Divergent", "Fahrenheit 451", "1984"],
+          answer: "Divergent",
         },
         {
-            question: "What is the name of the ship in 'The Hitchhiker's Guide to the Galaxy'?",
-            options: ["USS Enterprise", "Serenity", "Heart of Gold", "Millennium Falcon"],
-            answer: "Heart of Gold"
+          question:
+            "What is the name of the ship in 'The Hitchhiker's Guide to the Galaxy'?",
+          options: [
+            "USS Enterprise",
+            "Serenity",
+            "Heart of Gold",
+            "Millennium Falcon",
+          ],
+          answer: "Heart of Gold",
         },
         {
-            question: "In 'Neuromancer' by William Gibson, what is the protagonist Case's occupation?",
-            options: ["Pilot", "Hacker", "Detective", "Scientist"],
-            answer: "Hacker"
-        }
-    ];
+          question:
+            "In 'Neuromancer' by William Gibson, what is the protagonist Case's occupation?",
+          options: ["Pilot", "Hacker", "Detective", "Scientist"],
+          answer: "Hacker",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'classic.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "classic.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'quizzes.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "quizzes.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/selfq.html b/assets/html/selfq.html
index 2fe61e96..4b91f650 100644
--- a/assets/html/selfq.html
+++ b/assets/html/selfq.html
@@ -1,186 +1,296 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Self-Help Books Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #ffc7d2;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #8e0013;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #004d00;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Self-Help Books Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Self-Help Books Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='self-help.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='self-help.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who wrote 'Atomic Habits'?",
-            options: ["James Clear", "Robin Sharma", "Stephen Covey", "Tony Robbins"],
-            answer: "James Clear"
+          question: "Who wrote 'Atomic Habits'?",
+          options: [
+            "James Clear",
+            "Robin Sharma",
+            "Stephen Covey",
+            "Tony Robbins",
+          ],
+          answer: "James Clear",
         },
         {
-            question: "Which book emphasizes living in the present moment and letting go of the past?",
-            options: ["The Power of Now", "The 7 Habits of Highly Effective People", "Mindset: The Psychology of Success", "Atomic Habits"],
-            answer: "The Power of Now"
+          question:
+            "Which book emphasizes living in the present moment and letting go of the past?",
+          options: [
+            "The Power of Now",
+            "The 7 Habits of Highly Effective People",
+            "Mindset: The Psychology of Success",
+            "Atomic Habits",
+          ],
+          answer: "The Power of Now",
         },
         {
-            question: "In 'You Are a Badass', what does Jen Sincero encourage readers to trust?",
-            options: ["Their habits", "Their intuition", "Their financial skills", "Their external environment"],
-            answer: "Their intuition"
+          question:
+            "In 'You Are a Badass', what does Jen Sincero encourage readers to trust?",
+          options: [
+            "Their habits",
+            "Their intuition",
+            "Their financial skills",
+            "Their external environment",
+          ],
+          answer: "Their intuition",
         },
         {
-            question: "Who is the author of 'The 7 Habits of Highly Effective People'?",
-            options: ["James Clear", "Jen Sincero", "Stephen Covey", "Carol Dweck"],
-            answer: "Stephen Covey"
+          question:
+            "Who is the author of 'The 7 Habits of Highly Effective People'?",
+          options: [
+            "James Clear",
+            "Jen Sincero",
+            "Stephen Covey",
+            "Carol Dweck",
+          ],
+          answer: "Stephen Covey",
         },
         {
-            question: "What concept does Carol Dweck's book 'Mindset' primarily focus on?",
-            options: ["Fixed and growth mindsets", "Atomic habits", "Emotional intelligence", "Power of now"],
-            answer: "Fixed and growth mindsets"
-        }
-    ];
+          question:
+            "What concept does Carol Dweck's book 'Mindset' primarily focus on?",
+          options: [
+            "Fixed and growth mindsets",
+            "Atomic habits",
+            "Emotional intelligence",
+            "Power of now",
+          ],
+          answer: "Fixed and growth mindsets",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'self-help.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "self-help.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'self-help.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "self-help.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
diff --git a/assets/html/suspenseq.html b/assets/html/suspenseq.html
index 33a84d5a..0449199e 100644
--- a/assets/html/suspenseq.html
+++ b/assets/html/suspenseq.html
@@ -1,186 +1,281 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Suspense Thriller Books Quiz</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #fbcaca;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-        }
+      /* Body Styling */
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        transition: background-color 0.3s;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        background-attachment: fixed;
+        background-size: cover;
+        background-position: center;
+      }
 
-        .quiz-container {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: center;
-        }
+      /* Quiz Container Styling */
+      .quiz-container {
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
 
-        button {
-            padding: 10px 20px;
-            margin-top: 20px;
-            cursor: pointer;
-            background-color: #003366;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            display: block;
-            width: 100%;
-        }
+      .quiz-container h1 {
+        color: #3b0a45;
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        font-weight: 700;
+      }
 
-        button:hover {
-            background-color: #002244;
-        }
+      /* Button Styling */
+      button {
+        padding: 12px 0;
+        margin-top: 20px;
+        cursor: pointer;
+        background-color: #8e0013;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        display: block;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: 600;
+        transition: background-color 0.3s, transform 0.2s;
+        box-shadow: 0 5px 15px rgba(142, 0, 19, 0.2);
+      }
 
-        h4 {
-            margin: 10px 0;
-        }
+      button:hover {
+        background-color: #b30017;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(179, 0, 23, 0.3);
+      }
 
-        .option {
-            margin: 5px 0;
-        }
+      /* Question Styling */
+      h4 {
+        margin: 15px 0;
+        color: #333333;
+        font-size: 1.2rem;
+        font-weight: 600;
+      }
 
-        .solution {
-            margin-top: 10px;
-            text-align: left;
-        }
-    </style>
-</head>
-<body>
+      /* Option Button Styling */
+      .option {
+        margin: 8px 0;
+        background-color: #f9f9fb;
+        border: 2px solid #dedfe2;
+        color: #333;
+        border-radius: 6px;
+        padding: 12px;
+        cursor: pointer;
+        font-size: 1rem;
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+        text-align: left;
+        font-weight: 700;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      }
 
-<div class="quiz-container">
-    <h1>Suspense Thriller Books Quiz</h1>
-    <div id="quiz-questions">
+      .option:hover {
+        background-color: #f2e9e4;
+        color: #8e0013;
+        border-color: #8e0013;
+        font-weight: 600;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.1);
+      }
+
+      .option:active {
+        background-color: #f7d8e1;
+        color: #8e0013;
+        border-color: #8e0013;
+      }
+
+      /* Solution Display Styling */
+      .solution {
+        margin-top: 15px;
+        text-align: left;
+        font-size: 0.9rem;
+        color: #5a5a5a;
+        border-top: 1px solid #ddd;
+        padding-top: 10px;
+        font-weight: 500;
+      }
+
+      /* Result Display Styling */
+      #quiz-result {
+        font-size: 1.2rem;
+        font-weight: 700;
+        color: #8e0013;
+        margin-top: 20px;
+        padding: 10px;
+        border-radius: 8px;
+        background-color: #fbe3e7;
+        box-shadow: 0 4px 12px rgba(142, 0, 19, 0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="quiz-container">
+      <h1>Suspense Thriller Books Quiz</h1>
+      <div id="quiz-questions">
         <!-- Questions will be inserted here -->
+      </div>
+      <button id="submit-button" onclick="submitQuiz()">Submit</button>
+      <div id="quiz-result" style="display: none"></div>
+      <button
+        id="home-button"
+        style="display: none"
+        onclick="window.location.href='index.html';"
+      >
+        Return to Home
+      </button>
+      <button
+        id="solutions-button"
+        style="display: none"
+        onclick="showSolutions()"
+      >
+        See Solutions
+      </button>
     </div>
-    <button id="submit-button" onclick="submitQuiz()">Submit</button>
-    <div id="quiz-result" style="display: none;"></div>
-    <button id="home-button" style="display: none;" onclick="window.location.href='index.html';">Return to Home</button>
-    <button id="solutions-button" style="display: none;" onclick="showSolutions()">See Solutions</button>
-</div>
-
-<script>
-    const quizData = [
+
+    <script>
+      const quizData = [
         {
-            question: "Who is the author of 'Gone Girl'?",
-            options: ["Gillian Flynn", "Paula Hawkins", "Agatha Christie", "Stephen King"],
-            answer: "Gillian Flynn"
+          question: "Who is the author of 'Gone Girl'?",
+          options: [
+            "Gillian Flynn",
+            "Paula Hawkins",
+            "Agatha Christie",
+            "Stephen King",
+          ],
+          answer: "Gillian Flynn",
         },
         {
-            question: "In 'The Girl with the Dragon Tattoo', what is the name of the investigator?",
-            options: ["Mikael Blomkvist", "Harry Bosch", "Jack Reacher", "Robert Langdon"],
-            answer: "Mikael Blomkvist"
+          question:
+            "In 'The Girl with the Dragon Tattoo', what is the name of the investigator?",
+          options: [
+            "Mikael Blomkvist",
+            "Harry Bosch",
+            "Jack Reacher",
+            "Robert Langdon",
+          ],
+          answer: "Mikael Blomkvist",
         },
         {
-            question: "'The Woman in the Window' is inspired by which classic thriller?",
-            options: ["Rear Window", "Psycho", "Vertigo", "Dial M for Murder"],
-            answer: "Rear Window"
+          question:
+            "'The Woman in the Window' is inspired by which classic thriller?",
+          options: ["Rear Window", "Psycho", "Vertigo", "Dial M for Murder"],
+          answer: "Rear Window",
         },
         {
-            question: "Who is the main character in 'Big Little Lies' by Liane Moriarty?",
-            options: ["Madeline", "Emma", "Rachel", "Holly"],
-            answer: "Madeline"
+          question:
+            "Who is the main character in 'Big Little Lies' by Liane Moriarty?",
+          options: ["Madeline", "Emma", "Rachel", "Holly"],
+          answer: "Madeline",
         },
         {
-            question: "'The Silent Patient' by Alex Michaelides revolves around which profession?",
-            options: ["Therapist", "Detective", "Teacher", "Writer"],
-            answer: "Therapist"
-        }
-    ];
+          question:
+            "'The Silent Patient' by Alex Michaelides revolves around which profession?",
+          options: ["Therapist", "Detective", "Teacher", "Writer"],
+          answer: "Therapist",
+        },
+      ];
 
-    let currentQuestionIndex = 0;
-    let score = 0;
+      let currentQuestionIndex = 0;
+      let score = 0;
 
-    function loadQuestion() {
-        const questionElement = document.getElementById('quiz-questions');
-        questionElement.innerHTML = '';
+      function loadQuestion() {
+        const questionElement = document.getElementById("quiz-questions");
+        questionElement.innerHTML = "";
 
         const currentQuestion = quizData[currentQuestionIndex];
-        const questionText = document.createElement('h4');
+        const questionText = document.createElement("h4");
         questionText.innerText = currentQuestion.question;
         questionElement.appendChild(questionText);
 
-        currentQuestion.options.forEach(option => {
-            const optionButton = document.createElement('button');
-            optionButton.classList.add('option');
-            optionButton.innerText = option;
-            optionButton.onclick = () => selectAnswer(option);
-            questionElement.appendChild(optionButton);
+        currentQuestion.options.forEach((option) => {
+          const optionButton = document.createElement("button");
+          optionButton.classList.add("option");
+          optionButton.innerText = option;
+          optionButton.onclick = () => selectAnswer(option);
+          questionElement.appendChild(optionButton);
         });
-    }
+      }
 
-    function selectAnswer(selectedOption) {
+      function selectAnswer(selectedOption) {
         const currentQuestion = quizData[currentQuestionIndex];
         if (selectedOption === currentQuestion.answer) {
-            score++;
+          score++;
         }
         currentQuestionIndex++;
 
         if (currentQuestionIndex < quizData.length) {
-            loadQuestion();
+          loadQuestion();
         } else {
-            showResult();
+          showResult();
         }
-    }
+      }
 
-    function showResult() {
-        const quizContainer = document.querySelector('.quiz-container');
+      function showResult() {
+        const quizContainer = document.querySelector(".quiz-container");
         quizContainer.innerHTML = `<h2>Your Score: ${score}/${quizData.length}</h2>`;
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'suspense.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "suspense.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
 
-        const solutionsButton = document.createElement('button');
+        const solutionsButton = document.createElement("button");
         solutionsButton.onclick = showSolutions;
-        solutionsButton.innerText = 'See Solutions';
+        solutionsButton.innerText = "See Solutions";
         quizContainer.appendChild(solutionsButton);
-    }
+      }
 
-    function showSolutions() {
-        const quizContainer = document.querySelector('.quiz-container');
-        quizContainer.innerHTML = '<h2>Quiz Solutions</h2>';
+      function showSolutions() {
+        const quizContainer = document.querySelector(".quiz-container");
+        quizContainer.innerHTML = "<h2>Quiz Solutions</h2>";
 
         quizData.forEach((question, index) => {
-            const solutionElement = document.createElement('div');
-            solutionElement.classList.add('solution');
+          const solutionElement = document.createElement("div");
+          solutionElement.classList.add("solution");
 
-            const questionText = document.createElement('h4');
-            questionText.innerText = `${index + 1}. ${question.question}`;
-            solutionElement.appendChild(questionText);
+          const questionText = document.createElement("h4");
+          questionText.innerText = `${index + 1}. ${question.question}`;
+          solutionElement.appendChild(questionText);
 
-            const correctAnswer = document.createElement('p');
-            correctAnswer.innerText = `Correct Answer: ${question.answer}`;
-            solutionElement.appendChild(correctAnswer);
+          const correctAnswer = document.createElement("p");
+          correctAnswer.innerText = `Correct Answer: ${question.answer}`;
+          solutionElement.appendChild(correctAnswer);
 
-            quizContainer.appendChild(solutionElement);
+          quizContainer.appendChild(solutionElement);
         });
 
-        const homeButton = document.createElement('button');
-        homeButton.onclick = () => window.location.href = 'quizzes.html';
-        homeButton.innerText = 'Return to Home';
+        const homeButton = document.createElement("button");
+        homeButton.onclick = () => (window.location.href = "quizzes.html");
+        homeButton.innerText = "Return to Home";
         quizContainer.appendChild(homeButton);
-    }
+      }
 
-    function submitQuiz() {
+      function submitQuiz() {
         if (currentQuestionIndex < quizData.length) {
-            alert("Please answer all questions before submitting!");
+          alert("Please answer all questions before submitting!");
         } else {
-            showResult();
+          showResult();
         }
-    }
-
-    document.addEventListener('DOMContentLoaded', loadQuestion);
-</script>
+      }
 
-</body>
+      document.addEventListener("DOMContentLoaded", loadQuestion);
+    </script>
+  </body>
 </html>
