Merge pull request sakeel-103#432 from KapuluruBhuvaneswariVspdbct/bhu

solved sakeel-103#376 Added 3 categories of quizess (esay,med,difficult)
SrijaVuppala295 · Oct 28, 2024 · 75c71a2 · 75c71a2
2 parents ba0f5c2 + 60b2439
commit 75c71a2
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 164 deletions.
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -18,6 +18,11 @@ import { CodeEditorComponent } from './components/code-editor/code-editor.compon
 import { ReviewComponent } from './components/reviews/reviews.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 
+
+import { AlgorithmComparisonComponent } from './components/algocompare/algocompare.component';
+
+import { ProfileDashboardPageComponent } from './components/profile/profile.component';
+
 export const routes: Routes = [
   {
     path: '',

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<html lang="en">
 
 <head>
   <meta charset="UTF-8">
@@ -110,8 +109,6 @@
   </style>
 </head>
 
-<body>
-
   <header>
     <nav style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; background-color: #1a1a2e;">
       <div class="logo" style="display: flex; align-items: center;">
@@ -1111,4 +1108,3 @@ <h2 data-i18n="contact-us-title">Contact Us</h2>
 
 
 
-
diff --git a/src/app/components/quiz/quiz.component.css b/src/app/components/quiz/quiz.component.css
@@ -1,6 +1,17 @@
 .quiz-container {
-  max-width: 800px;
+  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;
   padding: 2rem;
   font-family: "Roboto", sans-serif;
@@ -35,138 +46,89 @@ html {
 header {
   text-align: center;
   margin-bottom: 2rem;
+
 }
 
-h1 {
-  color: #2c3e50;
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
+.header {
+  margin-bottom: 20px; /* Space below the header */
 }
 
-.progress-bar {
-  height: 6px;
-  background-color: #3498db;
-  border-radius: 3px;
-  transition: width 0.3s ease-in-out;
+.difficulty-container {
+  text-align: center; /* Center text in difficulty section */
+  margin-bottom: 20px; /* Space below difficulty section */
 }
 
-.question-container {
+.difficulty-cards {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
+  justify-content: space-around; /* Space between cards */
 }
 
-.question-card {
-  background-color: white;
+.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: 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  max-width: 600px;
+  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 */
 }
 
-h2 {
-  color: #34495e;
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-  text-align: center;
+.difficulty-card:hover {
+  transform: scale(1.05); /* Slightly scale card on hover */
 }
 
-.question-text {
-  font-size: 1.2rem;
-  color: #2c3e50;
-  margin-bottom: 1.5rem;
-  text-align: center;
-}
-
-.question-image {
-  text-align: center;
-  margin-bottom: 1.5rem;
+.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;
+  padding: 20px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px; /* Space below the question card */
 }
 
-.question-image img {
-  max-width: 100%;
-  border-radius: 4px;
+.question-text {
+  font-size: 18px;
+  margin-bottom: 20px;
 }
 
 .options {
-  display: grid;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column; /* Stack options vertically */
+  gap: 10px; /* Space between options */
 }
 
 button {
-  background-color: #ecf0f1;
-  border: 2px solid #bdc3c7;
-  border-radius: 4px;
-  padding: 0.8rem 1rem;
-  font-size: 1rem;
-  color: #34495e;
-  transition: all 0.3s ease;
+  width: 100%; /* Make buttons full width of option card */
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff; /* Blue button color */
+  color: white;
   cursor: pointer;
+  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
 }
 
-button:hover:not(:disabled) {
-  background-color: #3498db;
-  border-color: #3498db;
-  color: white;
+button:hover {
+  background-color: #0056b3; /* Darker blue on hover */
 }
 
 button.selected {
-  background-color: #2980b9;
-  border-color: #2980b9;
-  color: white;
+  background-color: #28a745; /* Green color for selected option */
 }
 
 button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+  background-color: #ccc; /* Gray for disabled buttons */
+  cursor: not-allowed; /* Change cursor style for disabled buttons */
 }
 
 .action-buttons {
-  display: flex;
-  justify-content: center;
-}
-
-.results-container {
-  text-align: center;
-}
-
-.score-breakdown {
-  background-color: #ecf0f1;
-  height: 20px;
-  border-radius: 10px;
-  margin: 1rem 0;
-  overflow: hidden;
+  margin-top: 20px; /* Space above action buttons */
 }
 
 .score-bar {
-  height: 100%;
-  background-color: #2ecc71;
-  transition: width 0.5s ease-in-out;
-}
-
-footer {
-  margin-top: 2rem;
-  text-align: center;
-  color: #7f8c8d;
-}
-
-@media (max-width: 600px) {
-  .quiz-container {
-    padding: 1rem;
-  }
-
-  h1 {
-    font-size: 2rem;
-  }
-
-  .question-card {
-    padding: 1.5rem;
-  }
-
-  .options {
-    grid-template-columns: 1fr;
-  }
+  height: 10px; /* Height of the score bar */
+  background-color: #007bff; /* Color of the score bar */
+  border-radius: 5px; /* Rounded corners for the score bar */
 }
diff --git a/src/app/components/quiz/quiz.component.html b/src/app/components/quiz/quiz.component.html
@@ -1,25 +1,47 @@
 <app-navbar></app-navbar>
+
 <div class="quiz-container">
     <header>
         <h1>Ultimate Graph Theory Challenge</h1>
         <div class="progress-bar" [style.width.%]="progressPercentage"></div>
     </header>
 
-    <main *ngIf="!quizCompleted" class="question-container">
+    <!-- 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>
+
+    <!-- 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>
 
             <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>
+                <button (click)="submitAnswer()" [disabled]="selectedAnswerIndex === null || answerSubmitted">Submit Answer</button>
             </div>
         </div>
     </main>
@@ -36,4 +58,4 @@ <h2>Quiz Completed!</h2>
     <footer>
         <p>Created by Graph Theory Enthusiasts</p>
     </footer>
-</div>
+</div>