merge Develop

Merge branch 'develop' into 'main'

src/app/modules/question/question.component.html

@@ -3,72 +3,54 @@
         <p>Category : {{ decodeHtml(actualQuestion.category) }}</p>
         <div class="title">
             <h4>Question {{ actualQuestionIndex + 1 }}/{{ questions.length }}</h4>
-            <br />
+            <h4>Score : {{ score }}</h4>
             <h2>{{ decodeHtml(actualQuestion.question) }}</h2>
         </div>
     </div>
     <div>
         <div *ngIf="actualQuestion.type === 'boolean'" class="button-container">
-            <button
-                (click)="showResult = true"
-                [ngClass]="{
-                    'button-selection': !showResult,
-                    'wrong-answer': actualQuestion?.correct_answer === 'False' && showResult,
-                    'good-answer': actualQuestion?.correct_answer === 'True' && showResult
-                }"
-            >
+            <button (click)="handleClick('True', 0)" [ngClass]="{
+                    'button-selection': !showResults[0],
+                    'wrong-answer': actualQuestion?.correct_answer === 'False' && showResults[0],
+                    'good-answer': actualQuestion?.correct_answer === 'True' && showResults[0]
+                }">
                 TRUE
             </button>
-            <button
-                (click)="showResult = true"
-                [ngClass]="{
-                    'button-selection': !showResult,
-                    'wrong-answer': actualQuestion?.correct_answer === 'True' && showResult,
-                    'good-answer': actualQuestion?.correct_answer === 'False' && showResult
-                }"
-            >
+            <button (click)="handleClick('False', 1)" [ngClass]="{
+                    'button-selection': !showResults[1],
+                    'wrong-answer': actualQuestion?.correct_answer === 'True' && showResults[1],
+                    'good-answer': actualQuestion?.correct_answer === 'False' && showResults[1]
+                }">
                 FALSE
             </button>
         </div>
         <div *ngIf="actualQuestion.type === 'multiple'" class="button-container">
-            <button
-                (click)="showResult = true"
-                [ngClass]="{
-                    'button-selection': !showResult,
-                    'wrong-answer': actualQuestion.correct_answer !== answers[0] && showResult,
-                    'good-answer': actualQuestion.correct_answer === answers[0] && showResult
-                }"
-            >
+            <button (click)="handleClick(answers[0], 0)" [ngClass]="{
+                    'button-selection': !showResults[0],
+                    'wrong-answer': actualQuestion.correct_answer !== answers[0] && showResults[0],
+                    'good-answer': actualQuestion.correct_answer === answers[0] && showResults[0]
+                }">
                 {{ decodeHtml(answers[0]) }}
             </button>
-            <button
-                (click)="showResult = true"
-                [ngClass]="{
-                    'button-selection': !showResult,
-                    'wrong-answer': actualQuestion.correct_answer !== answers[1] && showResult,
-                    'good-answer': actualQuestion.correct_answer === answers[1] && showResult
-                }"
-            >
+            <button (click)="handleClick(answers[1], 1)" [ngClass]="{
+                    'button-selection': !showResults[1],
+                    'wrong-answer': actualQuestion.correct_answer !== answers[1] && showResults[1],
+                    'good-answer': actualQuestion.correct_answer === answers[1] && showResults[1]
+                }">
                 {{ decodeHtml(answers[1]) }}
             </button>
-            <button
-                (click)="showResult = true"
-                [ngClass]="{
-                    'button-selection': !showResult,
-                    'wrong-answer': actualQuestion.correct_answer !== answers[2] && showResult,
-                    'good-answer': actualQuestion.correct_answer === answers[2] && showResult
-                }"
-            >
+            <button (click)="handleClick(answers[2], 2)" [ngClass]="{
+                    'button-selection': !showResults[2],
+                    'wrong-answer': actualQuestion.correct_answer !== answers[2] && showResults[2],
+                    'good-answer': actualQuestion.correct_answer === answers[2] && showResults[2]
+                }">
                 {{ decodeHtml(answers[2]) }}
             </button>
-            <button
-                (click)="showResult = true"
-                [ngClass]="{
-                    'button-selection': !showResult,
-                    'wrong-answer': actualQuestion.correct_answer !== answers[3] && showResult,
-                    'good-answer': actualQuestion.correct_answer === answers[3] && showResult
-                }"
-            >
+            <button (click)="handleClick(answers[3], 3)" [ngClass]="{
+                    'button-selection': !showResults[3],
+                    'wrong-answer': actualQuestion.correct_answer !== answers[3] && showResults[3],
+                    'good-answer': actualQuestion.correct_answer === answers[3] && showResults[3]
+                }">
                 {{ decodeHtml(answers[3]) }}
             </button>
         </div>
@@ -78,4 +60,4 @@
             @if (actualQuestionIndex === questions.length - 1) { Finish quiz } @else { Next question }
         </button>
     </div>
-</div>
+</div>
\ No newline at end of file

src/app/modules/question/question.component.ts

@@ -12,13 +12,15 @@ export class QuestionComponent implements OnInit {
         private questionSerivce: QuestionService,
         private activatedRoute: ActivatedRoute,
         private router: Router
-    ) {}
+    ) { }
     isLoading: boolean = false;
     questions: any = [];
     actualQuestion: any;
     actualQuestionIndex: number = -1;
+    showResults: boolean[] = [false, false, false, false];
     showResult: boolean = false;
     answers: string[] = [];
+    score: number = 0;
     ngOnInit(): void {
         this.isLoading = true;
         this.activatedRoute.queryParams.subscribe((params) => {
@@ -57,6 +59,7 @@ export class QuestionComponent implements OnInit {
         } else {
             this.actualQuestionIndex++;
             this.actualQuestion = this.questions[this.actualQuestionIndex];
+            this.showResults = [false, false, false, false];
             this.showResult = false;
             if (this.actualQuestion.type === 'multiple') {
                 this.answers = [...this.actualQuestion.incorrect_answers, this.actualQuestion.correct_answer];
@@ -77,4 +80,20 @@ export class QuestionComponent implements OnInit {
             [array[i], array[j]] = [array[j], array[i]];
         }
     }
+
+    handleClick(res: string, index: number) {
+        if (this.showResult) return;
+        console.log(res);
+        if (res === this.actualQuestion.correct_answer) {
+            this.score++;
+        } else {
+            this.answers.forEach((answer, index) => {
+                if (answer === this.actualQuestion.correct_answer) {
+                    this.showResults[index] = true;
+                }
+            });
+        }
+        this.showResults[index] = true;
+        this.showResult = true;
+    }
 }