feat: User new routes for API to show good answer

src/app/modules/home/home.module.ts

@@ -9,6 +9,7 @@ import { MultipleChoiceComponent } from './play-quiz/multiple-choice/multiple-ch
 import { HomePageComponent } from './home-page/home-page.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormPlayQuizComponent } from './form-play-quiz/form-play-quiz.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
     declarations: [
@@ -21,6 +22,6 @@ import { FormPlayQuizComponent } from './form-play-quiz/form-play-quiz.component
         FormPlayQuizComponent,
     ],
     exports: [MultipleChoiceComponent],
-    imports: [CommonModule, ReactiveFormsModule, BrowserModule],
+    imports: [CommonModule, ReactiveFormsModule, BrowserModule, MatIconModule],
 })
 export class HomeModule {}

src/app/modules/home/play-quiz/multiple-choice/multiple-choice.component.ts

@@ -20,11 +20,14 @@ export class MultipleChoiceComponent implements OnInit {
     }
 
     ngOnInit(): void {}
+
     async handleClick(id_answer: number, position: number) {
-        this.answer_click = position;
         const right_answer = await this.getAnswer(id_answer);
+        console.log('right_answer : ', right_answer);
+        console.log('id_answer : ', id_answer);
         for (let index = 0; index < this.answers.length; index++) {
             this.good_answers[index] = this.answers[index].id == right_answer;
         }
+        this.answer_click = position;
     }
 }

src/app/modules/home/play-quiz/play-quiz.component.html

 <div *ngIf="!isLoading" class="main">
     <div class="header">
+        <mat-icon (click)="goHome()">home</mat-icon>
         <p>Category : {{ actualQuestion.category }}</p>
         <div class="title">
             <h4>Question {{ actualQuestionIndex + 1 }}/{{ quiz.questions.length }}</h4>
@@ -10,8 +11,8 @@
     <app-multiple-choice [answers]="actualQuestion.answers" [getAnswer]="getAnswerBound"></app-multiple-choice>
     <div class="next-question">
         <button *ngIf="showNextQuestion" (click)="nextQuestion()">
-            @if (actualQuestionIndex === this.quiz.questionIndex + this.quiz.questions.length - 1) { Finish quiz } @else
-            { Next question }
+            @if (actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) { Finish quiz }
+            @else { Next question }
         </button>
     </div>
 </div>

src/app/modules/home/play-quiz/play-quiz.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import Swal from 'sweetalert2';
 import { QuestionService } from '../../../services/question.service';
+import { lastValueFrom } from 'rxjs/internal/lastValueFrom';
 
 @Component({
     selector: 'app-play-quiz',
@@ -39,7 +40,7 @@ export class PlayQuizComponent implements OnInit {
     }
 
     nextQuestion() {
-        if (this.actualQuestionIndex === this.quiz.questionIndex + this.quiz.questions.length - 1) {
+        if (this.actualQuestionIndex === this.quiz.questionIndex - 1 + this.quiz.questions.length - 1) {
             Swal.fire({
                 title: 'Quiz finished !',
                 text: 'Want a rematch ?',
@@ -69,7 +70,35 @@ export class PlayQuizComponent implements OnInit {
     async getAnswer(id_tested_answer: number): Promise<number> {
         this.showNextQuestion = true;
         this.cdr.detectChanges();
-        return 0;
+        let good_answer = 0;
+
+        try {
+            const data: any = await lastValueFrom(
+                this.questionSerivce.getAnswer(this.quiz.id, this.actualQuestion.id, id_tested_answer)
+            );
+            console.log('data: ', data);
+            this.score = data.score;
+            good_answer = data.answers.find((answer: any) => answer.isCorrect).id;
+        } catch (error) {
+            console.error('Error fetching answer: ', error);
+        }
+
+        return good_answer;
+    }
+
+    goHome() {
+        Swal.fire({
+            title: 'Would you like to return to the menu ?',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'BACK TO MENU',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                this.router.navigate(['/']);
+            }
+        });
     }
 
     // randomArray(array: any[]): void {