From c027607b9fa82e0ec27b1eddb85779c16f488b48 Mon Sep 17 00:00:00 2001
From: Simarjit Singh <154678140+isimarjitsingh@users.noreply.github.com>
Date: Mon, 28 Oct 2024 10:59:21 +0530
Subject: [PATCH] Update quiz.html

---
 quiz.html | 219 ++++++++++++++++++++++++++----------------------------
 1 file changed, 104 insertions(+), 115 deletions(-)

diff --git a/quiz.html b/quiz.html
index 600ecf5b..546b2aa6 100644
--- a/quiz.html
+++ b/quiz.html
@@ -365,10 +365,10 @@ <h2 class="head-animate" style="font-size: 90px;">
       <div id="particles-1" class="particles"></div>
     </div>
   </header>
-  <div class="blog-content wow fadeInUp\" style="display: flex; flex-direction: column;flex-wrap: wrap;" data-wow-duration="1.3s" data-wow-delay="0.5s">
-    <h2 class="test">Test your knowledge</h2>
+    <div class="blog-content wow fadeInUp\" style="border: 10px solid white;display: flex; flex-direction: column;flex-wrap: wrap;background: linear-gradient(to right, rgb(74, 74, 74), rgb(235, 235, 239)); " data-wow-duration="1.3s" data-wow-delay="0.5s">
+    <h2 class="test" style="color:rgb(93, 10, 246);">Test your knowledge</h2>
     <div style="position: absolute;width: 100px;height: 100px;right: 100px;z-index: 10; margin-top: 50px;" id="quiz-pic"><img src="./assets/images/quiz-anime2.webp" alt="QUIZ"></div>
-    <div class="quiz-description wow fadeIn" data-wow-duration="1.3s" data-wow-delay="0.5s" style="width: 40%; margin: auto;">
+    <div class="quiz-description wow fadeIn" data-wow-duration="1.3s" data-wow-delay="0.5s" style="margin: auto;">
       <div class="quiztitle wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.5s">Welcome to the Quiz Challenge!</div>
       <div class="quizcontent wow fadeInUp" data-wow-duration="1.2s" data-wow-delay="0.6s">Get ready to test your knowledge and skill with our engaging quiz.</div>
       <div class="quizcontent wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.5s"> Here's what you need to know before you begin:</div>
@@ -376,7 +376,7 @@ <h2 class="test">Test your knowledge</h2>
       <div class="quizcontent wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.5s"> Points Per Question: 1</div>
       <div class="quizcontent2 wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.5s">Good Luck!</div>
     </div>
-    <div style="margin: auto;"><img src="assets/images/QUIZ.jpeg" alt="photo"></div>
+    <div style="margin: auto; position: absolute;mix-blend-mode: multiply;left:10px;top: 800px;"><img src="assets/images/QUIZ.jpeg" alt="photo"></div>
     <form id="financeQuizForm">
       <div id="quiz" class="wow fadeIn" data-wow-duration="1.3s" data-wow-delay="0.5s">
         <span id="completed-perc"></span>
@@ -504,173 +504,162 @@ <h2 id="question">Question goes here</h2>
     <div id="quizResult"></div>
   </div>
   
- 
-<STYLE>
-  /* Quiz container styling */
-.quiz-description {
-  background: linear-gradient(135deg, #3d10bd,#62bdff);
-  padding: 2rem;
-  border-radius: 10px;
-  color: white;
-  font-family: 'Arial', sans-serif;
+<style>
+  /* Basic Structure */
+.blog-content {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 20px;
+  background: #f3f8f2;
+  border-radius: 8px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
 }
 
-.quiztitle {
-  font-size: 2rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
+.blog-content:hover {
+  transform: scale(1.01);
 }
 
-.quizcontent {
-  font-size: 1.2rem;
-  margin-bottom: 1rem;
+#quiz-pic img {
+  width: 80px;
+  transition: transform 0.3s ease-in-out;
 }
 
-.quizcontent2 {
-  font-size: 1.5rem;
+#quiz-pic img:hover {
+  transform: rotate(15deg) scale(1.05);
+}
+
+.quiz-description {
+    background: linear-gradient(to right, rgb(146, 193, 246), blue);
+  border-radius: 5%;
+  border: 5px solid  grey ;
+  color: #2d3a32;
+  font-family: 'Arial', sans-serif;
+  text-align: center;
+  width: 1000px;
+  margin-bottom: 20px;
+}
+
+
+
+.quiztitle {
+  font-size: 1.8em;
   font-weight: bold;
-  margin-top: 1rem;
+  margin-bottom: 10px;
+  color: #72d472;
 }
 
-#quiz {
-  background: linear-gradient(120deg, #0f2027, #203a43, #2c5364);
-  padding: 2rem;
-  border-radius: 10px;
+.quizcontent {
+  font-size: 1.1em;
+  margin: 8px 0;
   color: white;
 }
 
-h2 {
+.quizcontent2 {
+  font-size: 1.1em;
   font-weight: bold;
-  font-size: 1.8rem;
+  color: #59ff59;
 }
 
-#answer-buttons .btn {
-  background: linear-gradient(45deg, #ff416c, #ff4b2b);
+/* Button Styling */
+.quiz #answer-buttons .btn {
+  padding: 10px 20px;
+  margin: 8px;
+  background-color: #6ade6a;
   color: white;
   border: none;
-  padding: 10px 20px;
-  margin: 5px;
+  
   border-radius: 5px;
-  font-weight: bold;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  font-size: 1em;
   cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-/* Hover effect for buttons */
-#answer-buttons .btn:hover {
+.quiz #answer-buttons .btn:hover {
+  background-color: #305a30;
   transform: scale(1.05);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
-.chosen {
-  background: linear-gradient(135deg, #3d10bd,#62bdff) !important; /* Rich purple tones */
-  /* Darker shades */
-  /* Softer, warmer tones */
 
-    color: white; /* Change text color if needed */
-}
-
-/* Click/focus effect for buttons */
-#answer-buttons .btn:focus {
-  background: #4caf50; /* Green when clicked */
-  outline: none; /* Removes default focus outline */
-  transform: scale(1.05);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+.quiz #answer-buttons .btn:active {
+  background-color: #204020;
 }
 
 #quiz-progress-bar {
   width: 100%;
-  background: white;
+  height: 10px;
+  background-color: #d3d3d3;
   border-radius: 5px;
-  margin-bottom: 10px;
+  margin: 20px 0;
+  overflow: hidden;
 }
 
 #quiz-progress {
-  background: #4caf50;
-  height: 20px;
+  width: 0;
+  height: 100%;
+  background-color: #407a40;
   border-radius: 5px;
-  width: 0%;
+  transition: width 0.5s ease;
 }
 
-#pass-btn, #next-btn, #submit-btn, #play-again-btn {
-  background: linear-gradient(45deg, #56ab2f, #a8e063);
-  color: white;
+#completed-perc {
+  font-size: 1em;
+  color: #2d3a32;
+  margin-top: 5px;
+}
+
+/* Bottom Buttons */
+.quiz-bottom-btns button {
+  padding: 8px 16px;
+  margin: 10px 5px;
   border: none;
-  padding: 10px 15px;
-  margin: 5px;
   border-radius: 5px;
-  font-weight: bold;
+  background-color: #407a40;
+  color: white;
   cursor: pointer;
-  transition: transform 0.2s ease, background 0.2s ease;
+  transition: background-color 0.3s ease;
 }
 
-/* Hover effect for bottom buttons */
-#pass-btn:hover, #next-btn:hover, #submit-btn:hover, #play-again-btn:hover {
-  background: linear-gradient(45deg, #43c6ac, #191654);
-  transform: scale(1.05);
-}
-
-/* Click/focus effect for bottom buttons */
-#pass-btn:focus, #next-btn:focus, #submit-btn:focus, #play-again-btn:focus {
-  background: #4caf50; /* Green when clicked */
-  outline: none; /* Removes default focus outline */
-  transform: scale(1.05);
+.quiz-bottom-btns button:hover {
+  background-color: #305a30;
 }
 
+/* Quiz Images */
 #congratulations-image img {
-  max-width: 100%;
-  border-radius: 10px;
+  width: 150px;
+  transition: opacity 0.3s;
 }
 
-#correct-span, #incorrect-span {
-  font-weight: bold;
-  display: block;
-  margin-top: 10px;
+#congratulations-image img[style*="display: none"] {
+  opacity: 0;
+  transition: opacity 0.3s;
 }
 
-#quizResult {
-  color: white;
-  font-weight: heavy;
+#quizimg1, #quizimg2, #quizimg3, #quizimg4, #quizimg5 {
+  animation: fadeIn 1s ease-in-out;
 }
 
-/* Input focus effect (turns green when clicked) */
-input[type="radio"]:focus {
-  outline: none;
-  box-shadow: 0 0 5px 2px #4caf50; /* Green shadow when clicked */
+/* Animations */
+@keyframes fadeIn {
+  0% { opacity: 0; transform: scale(0.8); }
+  100% { opacity: 1; transform: scale(1); }
 }
 
-/* Media queries for responsiveness */
+/* Media Queries */
 @media (max-width: 768px) {
-  .quiz-description, #quiz {
-    padding: 1rem;
+  .blog-content {
+    padding: 15px;
   }
-  .quiztitle {
-    font-size: 1.5rem;
+  .quizcontent {
+    font-size: 1em;
   }
-  h2 {
-    font-size: 1.5rem;
+  .quiz-bottom-btns button {
+    padding: 6px 14px;
   }
 }
-@media (max-width: 768px) {
-    .quiz-description {
-        width: 90% !important; 
-        margin: 0 auto 30px !important; 
-        padding: 10px; 
-        text-align: center; 
-    }
-
-    .quiztitle {
-        font-size: 22px; 
-        margin-bottom: 10px; 
-    }
-
-    .quizcontent {
-        font-size: 16px;
-        margin-bottom: 8px; 
-    }
-
-    
-}
-</STYLE>
+
+</style> 
 </body>