Merge pull request #562 from SrijaVuppala295/quiz

Enhance Quiz Layout with Fixed Sidebar and Centered Content
sakeel-103 · Nov 8, 2024 · 08721f7 · 08721f7
2 parents 1c53429 + 6271caa
commit 08721f7
Show file tree

Hide file tree

Showing 3 changed files with 215 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/quiz/quiz.component.css b/src/app/components/quiz/quiz.component.css
@@ -1,7 +1,8 @@
+/* Importing Google Font */
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
 
-body,
-button {
+/* Base font styles */
+body, button {
   font-family: Arial, sans-serif;
 }
 
@@ -10,21 +11,32 @@ button {
   font-weight: 500;
 }
 
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh; /* Full viewport height */
+  margin: 0;
+  background-color: #f0f0f0; /* Light background for contrast */
+}
+
+/* Quiz container layout */
 .quiz-container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 8rem auto;
-  max-width: 800px;
   padding: 2rem;
   background-color: #13eea9;
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%; /* Allow the container to take full width of the viewport */
+  max-width: 800px; /* Limit max-width to 800px */
+  box-sizing: border-box; /* Ensure padding doesn't overflow */
 }
 
 /* Scrollbar styling */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
@@ -52,29 +64,31 @@ header {
 }
 
 header h1 {
-  font-size: 1.8rem;
+  font-size: 2rem;
   color: #333;
   margin-bottom: 1rem;
 }
 
 .progress-bar {
   height: 6px;
-  background-color: #007bff;
+  background-color: #6b16a4;
   border-radius: 4px;
   margin-top: 8px;
 }
 
 /* Sidebar styling */
 .sidebar {
   margin-top: 100px;
-  width: 250px;
+  width: 400px; /* Reduced sidebar width */
   background-color: #333;
   color: #fff;
-  padding: 20px;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .sidebar h2 {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   margin-bottom: 1rem;
   color: #ff66b2;
 }
@@ -99,35 +113,38 @@ header h1 {
 .quiz-layout {
   display: flex;
   min-height: 100vh;
+
 }
 
 .quiz-content {
   flex: 1;
-  padding: 20px;
+  padding: 30px 20px; /* More padding on top and sides */
   background-color: #f9f9f9;
+  margin-left: 20px; /* Add space between sidebar and content */
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 
-.question-section,
-.results-section {
-  margin-top: 100px;
+/* Question Section */
+.question-section, .results-section {
+  margin-top: 40px; /* Reduced space between sections */
 }
 
 .question-text {
   font-size: 18px;
   margin-bottom: 20px;
+  line-height: 1.6;
 }
 
-/* Options styling */
 .options {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  margin: 20px;
 }
 
 button {
   width: 100%;
-  padding: 10px;
+  padding: 12px;
   border: none;
   border-radius: 5px;
   background-color: #007bff;
@@ -149,9 +166,8 @@ button:disabled {
   cursor: not-allowed;
 }
 
-/* Results section styling */
+/* Results Section */
 .results-section {
-  margin-top: 100px;
   padding: 20px;
   background-color: #ffffff;
   border: 1px solid #ccc;
@@ -195,8 +211,8 @@ button:disabled {
 }
 
 .results-action button {
-  padding: 10px 20px;
-  font-size: 1rem;
+  padding: 12px 25px;
+  font-size: 1.1rem;
   border-radius: 5px;
   background-color: #007bff;
   color: white;
@@ -219,4 +235,6 @@ button:disabled {
   height: 100%;
   justify-content: center;
   align-items: center;
-}
+  font-size: 1.2rem;
+  color: #555;
+}
diff --git a/src/app/components/quiz/quiz.component.html b/src/app/components/quiz/quiz.component.html
@@ -19,9 +19,9 @@ <h1>Ultimate Graph Theory Challenge</h1>
         </header>
 
         <!-- Quiz Questions -->
-        <section *ngIf="quizStarted && questions.length > 0 && !quizCompleted" class="question-section">
+        <section *ngIf="quizStarted && questions.length > 0 && !quizCompleted" class="question-section" >
             <h2 class="heading">Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h2>
-            <p>{{ currentQuestion.text }}</p>
+            <p class="question-text">{{ currentQuestion.text }}</p>
 
             <div class="options">
                 <button *ngFor="let option of currentQuestion.options; let i = index" (click)="selectAnswer(i)"
@@ -30,19 +30,187 @@ <h2 class="heading">Question {{ currentQuestionIndex + 1 }} of {{ questions.leng
                 </button>
             </div>
 
-            <button (click)="submitAnswer()" [disabled]="selectedAnswerIndex === null || answerSubmitted">Submit
-                Answer</button>
+            <button class="submit-btn" (click)="submitAnswer()" [disabled]="selectedAnswerIndex === null || answerSubmitted">Submit Answer</button>
         </section>
 
-        <section *ngIf="questions.length <= 0 " class="no-found">
+        <section *ngIf="questions.length <= 0" class="no-found">
             <h2>No Questions Available For This Level</h2>
         </section>
 
         <!-- 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>
+            <button class="restart-btn" (click)="restartQuiz()">Retake Quiz</button>
         </section>
     </main>
-</div>
+</div>
+
+<style>
+.quiz-layout {
+    display: flex;
+    justify-content: center; /* Centers the quiz content next to the sidebar */
+    padding: 20px;
+    background-color: #f4f4f9;
+    min-height: 100vh;
+    margin-left: 220px; /* Offsets main content to the right of the sidebar */
+}
+
+.sidebar {
+    position: fixed; /* Fixes the sidebar to the left */
+    top: 0;
+    left: 0;
+    width: 220px; /* Width of the sidebar */
+    height: 100vh; /* Full height of the viewport */
+    background-color: #2c3e50;
+    color: white;
+    padding: 20px;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); /* Adds a shadow for separation */
+}
+
+.sidebar h2 {
+    font-size: 24px;
+    margin-bottom: 25px;
+    color: #ecf0f1;
+    text-align: center;
+}
+
+.sidebar ul {
+    list-style: none;
+    padding: 0;
+}
+
+.sidebar ul li {
+    padding: 12px;
+    background-color: #34495e;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+    font-weight: bold;
+    color: #ecf0f1;
+    text-align: center;
+}
+
+.sidebar ul li:hover {
+    background-color: #1abc9c;
+    transform: scale(1.05);
+}
+
+.quiz-content {
+    flex: 1;
+    max-width: 700px;
+    background-color: #fff;
+    padding: 25px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    margin-top: 90px; /* Space between sidebar and quiz content */
+    text-align: center;
+}
+
+.quiz-content h1 {
+    text-align: center;
+    font-size: 32px; /* Reduced font size for the quiz title */
+    margin-bottom: 20px;
+    color: #333;
+}
+
+/* Progress Bar */
+.progress-bar {
+    height: 10px;
+    background-color: #4caf50;
+    border-radius: 5px;
+    margin: 10px 0;
+}
+
+/* Question Section */
+.question-section {
+    margin-top: 40px; /* Increased margin to push the quiz questions section down */
+}
+
+.question-text {
+    font-size: 18px;
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.options button {
+    width: 100%;
+    padding: 15px;
+    margin-bottom: 10px;
+    background-color: #7acfec;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.options button:hover {
+    background-color: #db1939;
+    color: white;
+    transform: scale(1.05);
+}
+
+.options button.selected {
+    background-color: #3e4a5a;
+    color: white;
+}
+
+.submit-btn {
+    width: 100%;
+    padding: 12px;
+    background-color: #4caf50;
+    border: none;
+    border-radius: 5px;
+    font-size: 18px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.submit-btn:disabled {
+    background-color: #9e9e9e;
+    cursor: not-allowed;
+}
+
+.submit-btn:hover:not(:disabled) {
+    background-color: #45a049;
+}
+
+/* Quiz Completed Results */
+.results-section {
+    text-align: center;
+    margin-top: 30px;
+}
+
+.results-section h2 {
+    font-size: 28px;
+    color: #4caf50;
+    margin-bottom: 20px;
+}
+
+.restart-btn {
+    padding: 15px 30px;
+    background-color: #db1939;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.restart-btn:hover {
+    background-color: #4a030f;
+}
+
+/* No Questions Available */
+.no-found {
+    text-align: center;
+    margin-top: 30px;
+    font-size: 20px;
+    color: #333;
+}
+
+</style>