fix: Show right informations of the quiz in join quiz page

src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html

@@ -2,24 +2,34 @@
     <p class="title">Join a quiz</p>
     <form [formGroup]="formGroup">
         <div class="form-group">
-            <input type="text" formControlName="id" class="inputRecherche" placeholder="code..." />
+            <input
+                type="text"
+                formControlName="id"
+                class="inputRecherche"
+                placeholder="CODE QUIZ"
+                (input)="showQuizInfo()"
+            />
         </div>
     </form>
-    <div class="quiz-info">
+    <div class="quiz-info" *ngIf="quiz">
         <div class="quiz-title">
             <p class="quiz-info-title">Quiz information</p>
             <hr />
         </div>
         <div class="quiz-info-content">
-            <p class="quiz-info-content-value">{{ quiz.category }}</p>
+            <p class="quiz-info-content-value">{{ quiz.category.name }}</p>
         </div>
         <div class="quiz-info-content">
-            <p class="quiz-info-content-title">Difficulty</p>
-            <p class="quiz-info-content-value">{{ quiz.difficulty }}</p>
+            <p class="quiz-info-content-title">Difficulty :</p>
+            <p class="quiz-info-content-value">{{ quiz.difficulty.name }}</p>
         </div>
         <div class="quiz-info-content">
-            <p class="quiz-info-content-title">Nb. questions</p>
-            <p class="quiz-info-content-value">{{ quiz.nbQuestion }}</p>
+            <p class="quiz-info-content-title">Questions :</p>
+            <p class="quiz-info-content-value">{{ quiz.questionIndex }} / {{ quiz.questionCount }}</p>
+        </div>
+        <div class="quiz-info-content">
+            <p class="quiz-info-content-title">Score :</p>
+            <p class="quiz-info-content-value">{{ quiz.score }}</p>
         </div>
     </div>
 

src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
+import { QuestionService } from '../../../../services/question.service';
 
 @Component({
     selector: 'app-form-start-quiz',
     templateUrl: './form-start-quiz.component.html',
     styleUrl: './form-start-quiz.component.css',
 })
-
 export class FormStartQuizComponent implements OnInit {
     quiz: any;
 
-    constructor(private fb: FormBuilder, private router: Router) {}
+    constructor(private fb: FormBuilder, private router: Router, private questionService: QuestionService) {}
     formGroup: FormGroup = new FormGroup({});
     ngOnInit(): void {
         this.formGroup = new FormGroup({
             id: this.fb.control('', [Validators.required]),
         });
-
-        this.quiz = {
-          category: "Math",
-          nbQuestion: 10,
-          difficulty: "easy",
-        }
     }
     playQuiz() {
         this.router.navigate(['/play-quiz'], { queryParams: { idQuiz: this.formGroup.value.id } });
     }
+
+    showQuizInfo() {
+        const idQuiz = this.formGroup.get('id')?.value;
+        if (idQuiz.length == 6) {
+            this.questionService.getQuiz(idQuiz).subscribe({
+                next: (data: any) => {
+                    console.log('data', data);
+                    this.quiz = data;
+                },
+            });
+        }
+        console.log(this.formGroup.get('id')?.value);
+    }
 }