From 51e97cc026f79de621b7c3689673342b537483a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20HUSS?= <theophile.huss@etu.unistra.fr>
Date: Fri, 6 Dec 2024 15:41:52 +0100
Subject: [PATCH] fix: Show right informations of the quiz in join quiz page
---
.../form-start-quiz.component.html | 24 +++++++++++++------
.../form-start-quiz.component.ts | 23 +++++++++++-------
2 files changed, 32 insertions(+), 15 deletions(-)
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
index 46d2adb..cd0c2c2 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.html
+++ b/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>
diff --git a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
index f5325dd..1ff920d 100644
--- a/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
+++ b/src/app/modules/home/form-quiz/form-start-quiz/form-start-quiz.component.ts
@@ -1,30 +1,37 @@
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);
+ }
}
--
GitLab