From bd5b800c81003afe784f8ccd8502e6b69334b5c2 Mon Sep 17 00:00:00 2001
From: Shariq <shariqsd2003@gmail.com>
Date: Wed, 30 Oct 2024 05:45:38 +0530
Subject: [PATCH] Enhance the Quiz Page

---
 src/app/components/quiz/quiz.component.css  | 209 ++++++++++++++------
 src/app/components/quiz/quiz.component.html |  85 ++++----
 src/app/components/quiz/quiz.component.ts   | 107 ++++++++--
 3 files changed, 270 insertions(+), 131 deletions(-)

diff --git a/src/app/components/quiz/quiz.component.css b/src/app/components/quiz/quiz.component.css
index 1b2aca3..e8f3fc9 100644
--- a/src/app/components/quiz/quiz.component.css
+++ b/src/app/components/quiz/quiz.component.css
@@ -1,98 +1,115 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+
+body,
+button {
+  font-family: Arial, sans-serif;
+}
+
 .montserrat-unique {
   font-family: "Montserrat", sans-serif;
-  font-weight: 500; /* Medium weight for specific elements */
-  font-style: normal; /* Normal font style */
+  font-weight: 500;
 }
 
 .quiz-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 0 auto;
-
-  max-width: 800px; /* Maximum width for the quiz */
-  padding: 20px;
-  background-color: #f9f9f9; /* Light background color for the quiz */
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
-  position: relative; /* Ensure the container is positioned correctly */
-  margin-top: 100px; /* Move the quiz container down */
-
-  margin-top: 8rem;
+  margin: 8rem auto;
+  max-width: 800px;
   padding: 2rem;
-  font-family: "Roboto", sans-serif;
   background-color: #13eea9;
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
-/* For WebKit browsers (Chrome, Safari) */
+
+/* Scrollbar styling */
 ::-webkit-scrollbar {
-  width: 10px; /* Width of the scrollbar */
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #f0f0f0; /* Background of the track */
+  background: #f0f0f0;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #ff66b2, #8a2be2); /* Pink to Violet gradient */
-  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
+  background: linear-gradient(180deg, #ff66b2, #8a2be2);
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, #ff99cc, #9b59b6); /* Lighter gradient on hover */
+  background: linear-gradient(180deg, #ff99cc, #9b59b6);
 }
 
-/* For Firefox */
 html {
-  scrollbar-width: thin; /* Makes the scrollbar thin */
-  scrollbar-color: #ff66b2 #f0f0f0; /* Color of the thumb and track */
+  scrollbar-width: thin;
+  scrollbar-color: #ff66b2 #f0f0f0;
 }
 
+/* Header styling */
 header {
   text-align: center;
   margin-bottom: 2rem;
+}
 
+header h1 {
+  font-size: 1.8rem;
+  color: #333;
+  margin-bottom: 1rem;
 }
 
-.header {
-  margin-bottom: 20px; /* Space below the header */
+.progress-bar {
+  height: 6px;
+  background-color: #007bff;
+  border-radius: 4px;
+  margin-top: 8px;
 }
 
-.difficulty-container {
-  text-align: center; /* Center text in difficulty section */
-  margin-bottom: 20px; /* Space below difficulty section */
+/* Sidebar styling */
+.sidebar {
+  margin-top: 100px;
+  width: 250px;
+  background-color: #333;
+  color: #fff;
+  padding: 20px;
 }
 
-.difficulty-cards {
-  display: flex;
-  justify-content: space-around; /* Space between cards */
+.sidebar h2 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: #ff66b2;
 }
 
-.difficulty-card {
-  width: 200px; /* Fixed width for each card */
-  background-color: #ffffff; /* White background for difficulty cards */
-  border: 1px solid #ccc; /* Border around the card */
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for cards */
-  cursor: pointer; /* Pointer cursor on hover */
-  transition: transform 0.2s; /* Transition effect for hover */
+.sidebar ul {
+  list-style: none;
+  padding: 0;
 }
 
-.difficulty-card:hover {
-  transform: scale(1.05); /* Slightly scale card on hover */
+.sidebar li {
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  border-radius: 4px;
 }
 
-.question-card {
-  width: 100%; /* Full width for the question card */
-  background-color: #ffffff; /* White background for the question card */
-  border: 1px solid #ccc; /* Border around the card */
-  border-radius: 8px;
+.sidebar li:hover {
+  background-color: #555;
+}
+
+/* Main content styling */
+.quiz-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.quiz-content {
+  flex: 1;
   padding: 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px; /* Space below the question card */
+  background-color: #f9f9f9;
+}
+
+.question-section,
+.results-section {
+  margin-top: 100px;
 }
 
 .question-text {
@@ -100,42 +117,106 @@ header {
   margin-bottom: 20px;
 }
 
+/* Options styling */
 .options {
   display: flex;
-  flex-direction: column; /* Stack options vertically */
-  gap: 10px; /* Space between options */
+  flex-direction: column;
+  gap: 10px;
+  margin: 20px;
 }
 
 button {
-  width: 100%; /* Make buttons full width of option card */
+  width: 100%;
   padding: 10px;
   border: none;
   border-radius: 5px;
-  background-color: #007bff; /* Blue button color */
+  background-color: #007bff;
   color: white;
   cursor: pointer;
-  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+  transition: background-color 0.3s ease;
 }
 
 button:hover {
-  background-color: #0056b3; /* Darker blue on hover */
+  background-color: #0056b3;
 }
 
 button.selected {
-  background-color: #28a745; /* Green color for selected option */
+  background-color: #28a745;
 }
 
 button:disabled {
-  background-color: #ccc; /* Gray for disabled buttons */
-  cursor: not-allowed; /* Change cursor style for disabled buttons */
+  background-color: #ccc;
+  cursor: not-allowed;
 }
 
-.action-buttons {
-  margin-top: 20px; /* Space above action buttons */
+/* Results section styling */
+.results-section {
+  margin-top: 100px;
+  padding: 20px;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.results-section h2 {
+  font-size: 1.8rem;
+  color: #333;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.results-summary {
+  margin-top: 20px;
+  font-size: 1.2rem;
+  color: #555;
+  text-align: center;
 }
 
-.score-bar {
-  height: 10px; /* Height of the score bar */
-  background-color: #007bff; /* Color of the score bar */
-  border-radius: 5px; /* Rounded corners for the score bar */
+.score {
+  font-size: 2rem;
+  color: #28a745;
+  margin: 10px 0;
+}
+
+.feedback {
+  font-size: 1.2rem;
+  color: #007bff;
+  text-align: center;
+  margin: 10px 0;
+}
+
+/* Action buttons */
+.results-action {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
 }
+
+.results-action button {
+  padding: 10px 20px;
+  font-size: 1rem;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.results-action button:hover {
+  background-color: #0056b3;
+}
+
+.results-action button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+/* No content found styling */
+.no-found {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/app/components/quiz/quiz.component.html b/src/app/components/quiz/quiz.component.html
index 8dcf9b0..9653ea5 100644
--- a/src/app/components/quiz/quiz.component.html
+++ b/src/app/components/quiz/quiz.component.html
@@ -1,61 +1,48 @@
 <app-navbar></app-navbar>
 
-<div class="quiz-container">
-    <header>
-        <h1>Ultimate Graph Theory Challenge</h1>
-        <div class="progress-bar" [style.width.%]="progressPercentage"></div>
-    </header>
+<div class="quiz-layout">
+    <!-- Sidebar for Difficulty Levels -->
+    <aside class="sidebar">
+        <h2>Quiz Levels</h2>
+        <ul>
+            <li (click)="startQuiz('easy')">Easy</li>
+            <li (click)="startQuiz('medium')">Medium</li>
+            <li (click)="startQuiz('difficult')">Difficult</li>
+        </ul>
+    </aside>
 
-    <!-- Difficulty Selection Section -->
-    <div *ngIf="!quizStarted" class="difficulty-container">
-        <h2>Select Difficulty Level</h2>
-        <div class="difficulty-cards">
-            <div class="difficulty-card" (click)="startQuiz('easy')">
-                <h3>Easy</h3>
-                <button>Start Quiz</button>
-            </div>
-            <div class="difficulty-card" (click)="startQuiz('medium')">
-                <h3>Medium</h3>
-                <button>Start Quiz</button>
-            </div>
-            <div class="difficulty-card" (click)="startQuiz('difficult')">
-                <h3>Difficult</h3>
-                <button>Start Quiz</button>
-            </div>
-        </div>
-    </div>
+    <!-- Main Quiz Content -->
+    <main class="quiz-content">
+        <header *ngIf="quizStarted">
+            <h1>Ultimate Graph Theory Challenge</h1>
+            <div class="progress-bar" [style.width.%]="progressPercentage"></div>
+        </header>
 
-    <!-- Quiz Questions Section -->
-    <main *ngIf="quizStarted && !quizCompleted" class="question-container">
-        <div class="question-card" [@cardAnimation]="animationState">
-            <h2>Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h2>
-            <p class="question-text">{{ currentQuestion.text }}</p>
+        <!-- Quiz Questions -->
+        <section *ngIf="quizStarted && questions.length > 0 && !quizCompleted" class="question-section">
+            <h2 class="heading">Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h2>
+            <p>{{ currentQuestion.text }}</p>
 
             <div class="options">
-                <button *ngFor="let option of currentQuestion.options; let i = index" 
-                        (click)="selectAnswer(i)" 
-                        [class.selected]="selectedAnswerIndex === i" 
-                        [disabled]="answerSubmitted">
+                <button *ngFor="let option of currentQuestion.options; let i = index" (click)="selectAnswer(i)"
+                    [class.selected]="selectedAnswerIndex === i" [disabled]="answerSubmitted">
                     {{ option }}
                 </button>
             </div>
 
-            <div class="action-buttons">
-                <button (click)="submitAnswer()" [disabled]="selectedAnswerIndex === null || answerSubmitted">Submit Answer</button>
-            </div>
-        </div>
-    </main>
+            <button (click)="submitAnswer()" [disabled]="selectedAnswerIndex === null || answerSubmitted">Submit
+                Answer</button>
+        </section>
 
-    <div *ngIf="quizCompleted" class="results-container" [@fadeInAnimation]>
-        <h2>Quiz Completed!</h2>
-        <p>Your score: {{ score }} out of {{ questions.length }}</p>
-        <div class="score-breakdown">
-            <div class="score-bar" [style.width.%]="(score / questions.length) * 100"></div>
-        </div>
-        <button (click)="restartQuiz()">Retake Quiz</button>
-    </div>
+        <section *ngIf="questions.length <= 0 " class="no-found">
+            <h2>No Questions Available For This Level</h2>
+        </section>
 
-    <footer>
-        <p>Created by Graph Theory Enthusiasts</p>
-    </footer>
-</div>
+        <!-- Quiz Results -->
+        <section *ngIf="quizCompleted" class="results-section">
+            <h2>Quiz Completed!</h2>
+            <p>Your score: {{ score }} out of {{ questions.length }}</p>
+            <button (click)="restartQuiz()">Retake Quiz</button>
+        </section>
+    </main>
+</div>
\ No newline at end of file
diff --git a/src/app/components/quiz/quiz.component.ts b/src/app/components/quiz/quiz.component.ts
index 020e178..35a1469 100644
--- a/src/app/components/quiz/quiz.component.ts
+++ b/src/app/components/quiz/quiz.component.ts
@@ -1,6 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { trigger, state, style, animate, transition } from '@angular/animations';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+} from '@angular/animations';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { AuthService } from '../../services/auth.service';
 import { Title } from '@angular/platform-browser';
@@ -33,25 +39,83 @@ interface Question {
   ],
 })
 export class QuizComponent implements OnInit {
-
-
-  constructor(private authService: AuthService,private titleService: Title) {}
+  constructor(private authService: AuthService, private titleService: Title) {}
 
   ngOnInit(): void {
     this.titleService.setTitle('GraphExplorer Pro | Quiz');
     this.shuffleQuestions();
   }
   questions: Question[] = [
-    { text: "In a complete graph with n vertices, how many edges are there?", options: ["n", "n-1", "n(n-1)/2", "2^n"], correctAnswer: 2, difficulty: "easy" },
-    { text: "What is the chromatic number of a planar graph?", options: ["2", "3", "4", "5"], correctAnswer: 2, difficulty: "easy" },
-    { text: "In which type of graph is every vertex connected to every other vertex?", options: ["Tree", "Bipartite", "Complete", "Cyclic"], correctAnswer: 2, difficulty: "easy" },
-    { text: "What is the time complexity of depth-first search (DFS)?", options: ["O(V)", "O(E)", "O(V + E)", "O(V * E)"], correctAnswer: 0, difficulty: "easy" },
-    { text: "What is the time complexity of breadth-first search (BFS)?", options: ["O(V)", "O(E)", "O(V + E)", "O(V * E)"], correctAnswer: 1, difficulty: "easy" },
-    { text: "What is the minimum number of colors needed to color the vertices of a bipartite graph?", options: ["1", "2", "3", "4"], correctAnswer: 1, difficulty: "easy" },
-    { text: "Which of the following is true about trees?", options: ["They are cyclic", "They have exactly V-1 edges", "They have multiple paths between nodes", "They can have more than one root"], correctAnswer: 1, difficulty: "easy" },
-    { text: "What is a complete graph?", options: ["A graph with no edges", "A graph where every pair of vertices is connected", "A graph with a single cycle", "A disconnected graph"], correctAnswer: 1, difficulty: "easy" },
-    { text: "Which algorithm can be used to check if a graph is connected?", options: ["Dijkstra's", "DFS", "BFS", "Prim's"], correctAnswer: 1, difficulty: "easy" },
-    { text: "How many edges does a tree with n vertices have?", options: ["n-1", "n", "n+1", "2n"], correctAnswer: 0, difficulty: "easy" },
+    {
+      text: 'In a complete graph with n vertices, how many edges are there?',
+      options: ['n', 'n-1', 'n(n-1)/2', '2^n'],
+      correctAnswer: 2,
+      difficulty: 'easy',
+    },
+    {
+      text: 'What is the chromatic number of a planar graph?',
+      options: ['2', '3', '4', '5'],
+      correctAnswer: 2,
+      difficulty: 'easy',
+    },
+    {
+      text: 'In which type of graph is every vertex connected to every other vertex?',
+      options: ['Tree', 'Bipartite', 'Complete', 'Cyclic'],
+      correctAnswer: 2,
+      difficulty: 'easy',
+    },
+    {
+      text: 'What is the time complexity of depth-first search (DFS)?',
+      options: ['O(V)', 'O(E)', 'O(V + E)', 'O(V * E)'],
+      correctAnswer: 0,
+      difficulty: 'easy',
+    },
+    {
+      text: 'What is the time complexity of breadth-first search (BFS)?',
+      options: ['O(V)', 'O(E)', 'O(V + E)', 'O(V * E)'],
+      correctAnswer: 1,
+      difficulty: 'easy',
+    },
+    {
+      text: 'What is the minimum number of colors needed to color the vertices of a bipartite graph?',
+      options: ['1', '2', '3', '4'],
+      correctAnswer: 1,
+      difficulty: 'easy',
+    },
+    {
+      text: 'Which of the following is true about trees?',
+      options: [
+        'They are cyclic',
+        'They have exactly V-1 edges',
+        'They have multiple paths between nodes',
+        'They can have more than one root',
+      ],
+      correctAnswer: 1,
+      difficulty: 'easy',
+    },
+    {
+      text: 'What is a complete graph?',
+      options: [
+        'A graph with no edges',
+        'A graph where every pair of vertices is connected',
+        'A graph with a single cycle',
+        'A disconnected graph',
+      ],
+      correctAnswer: 1,
+      difficulty: 'easy',
+    },
+    {
+      text: 'Which algorithm can be used to check if a graph is connected?',
+      options: ["Dijkstra's", 'DFS', 'BFS', "Prim's"],
+      correctAnswer: 1,
+      difficulty: 'easy',
+    },
+    {
+      text: 'How many edges does a tree with n vertices have?',
+      options: ['n-1', 'n', 'n+1', '2n'],
+      correctAnswer: 0,
+      difficulty: 'easy',
+    },
   ];
 
   currentQuestionIndex: number = 0;
@@ -62,8 +126,6 @@ export class QuizComponent implements OnInit {
   quizStarted: boolean = false; // Track whether the quiz has started
   animationState: string = 'normal';
 
-  
-
   get currentQuestion(): Question {
     return this.questions[this.currentQuestionIndex];
   }
@@ -75,13 +137,20 @@ export class QuizComponent implements OnInit {
   shuffleQuestions() {
     for (let i = this.questions.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
-      [this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]];
+      [this.questions[i], this.questions[j]] = [
+        this.questions[j],
+        this.questions[i],
+      ];
     }
   }
 
+  allQuestions: Question[] = [...this.questions];
+
   startQuiz(difficulty: string) {
     this.quizStarted = true;
-    this.questions = this.questions.filter(q => q.difficulty === difficulty);
+    this.questions = this.allQuestions.filter(
+      (q) => q.difficulty === difficulty
+    );
     this.currentQuestionIndex = 0;
     this.selectedAnswerIndex = null;
     this.answerSubmitted = false;
@@ -119,11 +188,13 @@ export class QuizComponent implements OnInit {
   }
 
   restartQuiz() {
+    this.quizStarted = false;
     this.currentQuestionIndex = 0;
     this.selectedAnswerIndex = null;
     this.answerSubmitted = false;
     this.score = 0;
     this.quizCompleted = false;
+    this.questions = [...this.allQuestions];
     this.shuffleQuestions();
   }
 }