Merge pull request #1496 from rahulkhandait-sde/quit-btn

Add quit button styling to quiz page

quiz_page/quiz.css

@@ -379,4 +379,36 @@ footer button.show{
     border-radius: 50%;
     object-fit: cover;
   }
-
+
+
+  /* This CSS styles a "quit" button, including its position, size, color, and hover effect. */
+.quit_btn{
+    position: absolute;
+    left:30rem;
+    bottom: 1.3rem;
+}
+
+footer .quit_btn{
+    position: relative;
+    height: 40px;
+    padding: 0 13px;
+    margin-right: 15px;
+    font-size: 18px;
+    font-weight: 400;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    color: #fff;
+    border-radius: 5px;
+    background: #ff0000;
+    border: 1px solid #ff0000;
+    line-height: 10px;
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(0.95);
+    transition: all 0.3s ease;
+}
+
+footer .quit_btn:hover{
+    background: #ca0202 !important;
+}

quiz_page/quiz.html

@@ -67,6 +67,7 @@
             <div class="total_que"> 
 
             </div>
+            <button class="quit_btn">Quit Quiz</button>
             <button class="next_btn">Next Ques</button>
         </footer>
     </div>

quiz_page/quiz.js

@@ -58,6 +58,12 @@ restart_quiz.onclick = ()=>{
 quit_quiz.onclick = ()=>{
     window.location.reload(); 
 }
+
+const quit_btn = document.querySelector("footer .quit_btn");
+quit_btn.onclick = ()=>{
+    quiz_box.classList.remove("activeQuiz"); 
+}
+
 const next_btn = document.querySelector("footer .next_btn");
 const bottom_ques_counter = document.querySelector("footer .total_que");