fixes scienceUI

sumedhakoranga · Feb 13, 2024 · 4ecaac9 · 4ecaac9
1 parent 3aaf844
commit 4ecaac9
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 62 deletions.
diff --git a/src/app/mathematics/mathematics.component.ts b/src/app/mathematics/mathematics.component.ts
@@ -26,7 +26,6 @@ export class MathematicsComponent implements OnInit {
   startQuiz() {
     this.hasQuizStarted = true;
     this.loadQuestions();
-
   }
 
   getProgress(): string {
@@ -39,7 +38,7 @@ export class MathematicsComponent implements OnInit {
 
   ngOnInit(): void {
     this.getUserInfo();
-    this.loadQuestions();
+    // this.loadQuestions();
   }
 
   getUserInfo() {

diff --git a/src/app/science/science.component.css b/src/app/science/science.component.css
@@ -1,4 +1,4 @@
-.quiz-container {
+/* .quiz-container {
   max-width: 600px;
   margin: 20px auto;
   padding: 30px;
@@ -51,6 +51,97 @@
 }
 
 
+ */
+
+/* Container and Layout */
+.container {
+  max-width: 800px;
+  margin: auto;
+  padding: 20px;
+}
+
+.bg-light {
+  background-color: #f8f9fa !important;
+}
+
+.quiz-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Headers and Text */
+.display-5 {
+  font-size: 2.5rem;
+  font-weight: bold;
+}
+
+.fs-4 {
+  font-size: 1.25rem;
+}
+
+/* Progress Bar */
+.progress {
+  height: 20px;
+}
+
+.progress-bar {
+  transition: width 0.6s ease;
+}
+
+/* Questions and Choices */
+.quiz-question {
+  margin-bottom: 20px;
+}
+
+.quiz-header {
+  margin-bottom: 30px;
+}
+
+/* Buttons */
+.btn-primary {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.btn-lg {
+  padding: .5rem 1rem;
+  font-size: 1.25rem;
+  border-radius: .3rem;
+}
+
+.submit-btn {
+  margin-top: 20px;
+}
+
+/* Feedback */
+.feedback p {
+  color: #28a745;
+  /* Green for positive feedback */
+  font-weight: bold;
+}
+
+/* Util classes */
+.text-center {
+  text-align: center;
+}
+
+.btn-warning {
+  background-color: #ffc107;
+  border-color: #ffc107;
+  margin: 5px;
+}
+
+.multichoice input[type="radio"] {
+  margin-right: 10px;
+}
+
 .scoreTemp {
   padding: 20px;
   margin-top: 30px;
@@ -68,24 +159,4 @@
   font-size: 2.5rem;
   color: #4caf50;
   margin-bottom: 1rem;
-}
-
-.scoreTemp .btn-primary {
-  font-size: 1rem;
-  padding: 10px 30px;
-  border-radius: 5px;
-  background-color: #007bff;
-  color: white;
-  text-transform: uppercase;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  border: none;
-  transition: background-color 0.3s;
-}
-
-.scoreTemp .btn-primary:hover {
-  background-color: #0056b3;
-}
-
-.scoreTemp .btn-primary:hover {
-  background-color: #218838;
 }
diff --git a/src/app/science/science.component.html b/src/app/science/science.component.html
@@ -1,27 +1,55 @@
-<div class="container quiz-container" *ngIf="!showScore; else scoreTemplate">
-  <h2 class="quiz-header">Science Quiz</h2>
-  <form>
-    <div class="quiz-question" *ngIf="scienceQuestions.length > 0; else loading">
-      <h2>Question:</h2>
-      <p>{{ scienceQuestions[currentQuestionIndex].question }}</p>
-      <h2>Answer:</h2>
-      <div class="quiz-answer" *ngFor="let choice of scienceQuestions[currentQuestionIndex].choices; let i = index">
-        <input type="radio" [id]="'choice' + i" name="answer" [(ngModel)]="selectedAnswer" [value]="i">
-        <label [for]="'choice' + i">{{ choice }}</label>
-      </div>
-    </div>
+<!-- Introduction Section -->
+<div class="container bg-light py-5" *ngIf="!hasQuizStarted">
+  <h1 class="display-5 fw-bold">Welcome to Science</h1>
+  <p class="col-md-8 fs-4">This quiz will contain a total of 5 questions. Each Question holds 1 Point.</p>
+  <h4>Rules:</h4>
+  <ol>
+    <li>Correct Question gives you 1 point.</li>
+    <li>Refreshing the page will reset the Quiz.</li>
+  </ol>
+  <h1 style="font-family: cursive;text-align:center">All the best!!</h1>
+  <button class="btn btn-primary btn-lg" (click)="startQuiz()">Start the Quiz!!</button>
+</div>
 
-    <ng-template #loading>
-      <p>Loading questions...</p>
-    </ng-template>
+<!-- Quiz Section -->
+<div class="container quiz-container" *ngIf="hasQuizStarted">
+  <div *ngIf="!showScore; else scoreTemplate">
+    <div class="progress" style="margin-bottom: 20px;">
+      <div class="progress-bar bg-success" role="progressbar" [style.width]="getProgress()" aria-valuenow="25"
+        aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+    <h2 class="quiz-header">Science Quiz</h2>
+    <form>
+      <div *ngIf="scienceQuestions.length > 0; else loading">
+        <h2>Question:</h2>
+        <p>{{ scienceQuestions[currentQuestionIndex].question }}</p>
+        <h2>Answer:</h2>
+        <div class="multichoice" *ngFor="let choice of scienceQuestions[currentQuestionIndex].choices; let i = index">
+          <input type="radio" [id]="'choice' + i" name="answer" [(ngModel)]="selectedAnswer" [value]="i">
+          <label [for]="'choice' + i">{{ choice }}</label>
+        </div>
+        <div *ngIf="answerFeedback" class="feedback">
+          <p>{{ answerFeedback }}</p>
+          <button *ngIf="currentAnswerCorrect === false" type="button" class="btn btn-warning" (click)="tryAgain()">Try
+            Again</button>
+          <button *ngIf="currentQuestionIndex < scienceQuestions.length" type="button" class="btn btn-secondary"
+            (click)="moveToNextQuestion()">Next Question</button>
+        </div>
+      </div>
 
-    <button type="button" class="btn btn-primary submit-btn" (click)="checkAnswer()">
-      {{ currentQuestionIndex < scienceQuestions.length - 1 ? 'Next' : 'Submit' }} </button>
-  </form>
-</div>
-<ng-template #scoreTemplate>
-  <div class="scoreTemp">
-    <h2>Your Score: {{ score }}/{{ scienceQuestions.length }}</h2>
-    <button class="btn btn-primary" routerLink="/courses">Go to Course Page</button>
+      <ng-template #loading>
+        <p>Loading questions...</p>
+      </ng-template>
+      <button type="button" class="btn btn-primary submit-btn" (click)="checkAnswer()"
+        [disabled]="selectedAnswer === undefined || selectedAnswer === null || selectedAnswer === ''">
+        Submit Answer
+      </button>
+    </form>
   </div>
-</ng-template>
+  <ng-template #scoreTemplate>
+    <div class="scoreTemp">
+      <h2>Your Score: {{ score }}/{{ scienceQuestions.length }}</h2>
+      <button class="btn btn-primary" routerLink='/courses'>Go to Course Page</button>
+    </div>
+  </ng-template>
+</div>
diff --git a/src/app/science/science.component.ts b/src/app/science/science.component.ts
@@ -10,25 +10,33 @@ import { Router } from '@angular/router';
   styleUrl: './science.component.css'
 })
 export class ScienceComponent implements OnInit {
-
+  hasQuizStarted = false;
   scienceQuestions: any = {};
-  // question: string = 'Wait..';
-  // answer: string;
+  username: string;
   currentQuestionIndex: number = 0;
   score = 0;
-  selectedAnswer: string;
-  username: string;
   showScore = false;
   scoreTemplate:any;
+  currentAnswerCorrect: boolean | null = null;
+  answerFeedback: string = '';
+  selectedAnswer: string | null = null; 
 
   constructor(private router: Router) { }
 
+  startQuiz() {
+    this.hasQuizStarted = true;
+    this.loadQuestions();
+  }
 
+  getProgress(): string {
+    const progress = ((this.currentQuestionIndex + 1) / this.scienceQuestions.length) * 100;
+    return `${progress}%`;
+  }
   ngOnInit(): void {
     this.getUserInfo();
-    this.loadQuestions();
   }
 
+
   getUserInfo() {
     const auth = getAuth();
 
@@ -56,6 +64,8 @@ export class ScienceComponent implements OnInit {
       const allQuestions = snapshot.val();
       this.scienceQuestions = this.shuffleArray(allQuestions).slice(0, 5);
       this.currentQuestionIndex = 0;
+      this.showScore = false;
+      this.score = 0;
     }, {
       onlyOnce: true
     });
@@ -74,24 +84,44 @@ export class ScienceComponent implements OnInit {
       this.currentQuestionIndex++;
       this.selectedAnswer = '';
     } else {
-      console.log("End of questions");
+      this.showScore = true;
     }
   }
 
   checkAnswer() {
     const currentQuestion = this.scienceQuestions[this.currentQuestionIndex];
-    console.log(this.selectedAnswer);
-    console.log(currentQuestion.answer);
-    if (this.selectedAnswer === currentQuestion.answer) {
-      console.log("Correct answer!");
-      this.score++;
-    } else {
-      console.log("Incorrect answer!");
+    if (this.selectedAnswer !== undefined && currentQuestion.answer !== undefined) {
+      if (this.selectedAnswer === currentQuestion.answer) {
+        this.score++;
+        this.answerFeedback = 'Correct! Well done.';
+        this.currentAnswerCorrect = true;
+      } else {
+        this.answerFeedback = `Incorrect. Try again or move to the next question.`;
+        this.currentAnswerCorrect = false;
+      }
     }
+  }
+
+
+  tryAgain() {
+    this.selectedAnswer = '';
+    this.answerFeedback = '';
+    this.currentAnswerCorrect = null;
+  }
+
+  moveToNextQuestion() {
     if (this.currentQuestionIndex < this.scienceQuestions.length - 1) {
-      this.nextQuestion();
+      this.currentQuestionIndex++;
     } else {
       this.showScore = true;
     }
+    // Reset for the next question or the end of the quiz
+    this.selectedAnswer = '';
+    this.answerFeedback = '';
+    this.currentAnswerCorrect = null;
   }
+
+
+
+
 }