diff --git a/src/app/modules/community/community.module.ts b/src/app/modules/community/community.module.ts
index 257fb5386bfb2b31dd4ffb1a7322abcbfd6a0eb4..e094099ae29dcc7e9cee81c5add5de6b9496ffa6 100644
--- a/src/app/modules/community/community.module.ts
+++ b/src/app/modules/community/community.module.ts
@@ -11,6 +11,7 @@ import { SharedModule } from '../../shared/shared.module';
@NgModule({
declarations: [ListQuizComponent, QuizDetailComponent, QuizListDetailComponent],
+ // exports: [ListQuizComponent, QuizDetailComponent, QuizListDetailComponent],
imports: [CommonModule, MatTableModule, MatPaginatorModule, MatFormField, FormsModule, SharedModule],
})
-export class CommunityModule {}
+export class CommunityModule { }
diff --git a/src/app/modules/community/list-quiz/list-quiz.component.html b/src/app/modules/community/list-quiz/list-quiz.component.html
index bc6f170b6c82fcbe828458a930ee647bb531f78e..9b95087050db2fed5d762b1d419805c20b650089 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.html
+++ b/src/app/modules/community/list-quiz/list-quiz.component.html
@@ -6,12 +6,12 @@
class="inputRecherche" />
<div class="container">
<div class="scrollable-list">
- <app-quiz-list [quizList]="quizList"></app-quiz-list>
+ <app-quiz-list (valueEmitter)="slectedQuiz($event)" [quizList]="quizList"></app-quiz-list>
</div>
</div>
</div>
<div class="containerRight">
- <app-quiz-list-detail />
+ <app-quiz-list-detail [selectedQuiz]="codeQuiz" />
</div>
</div>
</div>
diff --git a/src/app/modules/community/list-quiz/list-quiz.component.ts b/src/app/modules/community/list-quiz/list-quiz.component.ts
index 802eb44617b34cc7825e8d56e1d72182de01877f..25d83371edcca7fb08e897b8f3116196ce8fb6a4 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.ts
+++ b/src/app/modules/community/list-quiz/list-quiz.component.ts
@@ -12,8 +12,8 @@ import { filter } from 'rxjs';
export class ListQuizComponent implements OnInit {
//listQuizDataSource = new MatTableDataSource();
- quizzes: any[] = []
- quizList: any[] = [];
+ quizzes: any[] = [] //list from database
+ quizList: any[] = []; //list to display
//displayedColumns = ['Component'];
constructor(private communityService: CommunityService) { }
codeQuiz: string = '';
@@ -26,6 +26,10 @@ export class ListQuizComponent implements OnInit {
this.loadData();
}
+ slectedQuiz(codeQuiz: string) {
+ this.codeQuiz = codeQuiz;
+ }
+
onPageChange(event: any) {
this.skip = event.pageIndex;
this.loadData();
@@ -38,15 +42,15 @@ export class ListQuizComponent implements OnInit {
this.quizzes = data;
this.totalQuiz = data.length;
this.quizzes.map((quiz => {
-
- this.quizList.push({ title: !quiz.name ? 'Untitled' : quiz.name, content: `${quiz.questions.length} QUESTIONS | ${quiz.difficulty.name} | ${!quiz.author ? 'Anonymous' : quiz.author}` })
+ this.quizList.push({
+ title: !quiz.name ? 'Untitled' : quiz.name,
+ content: `${quiz.questions.length} QUESTIONS | ${quiz.difficulty.name} | ${!quiz.author ? 'Anonymous' : quiz.author}`,
+ id: quiz.id
+ })
}))
},
});
}
- clickOnQuiz(codeQuiz: string) {
- this.clickedQuiz = codeQuiz;
- }
filter() {
this.loadData();
}
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
index 67cde8ed0f2a0ada1d676b5bf08687545ee5c84d..47971230c02fa3be4f2e2e2e5e1679a157d44f62 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
@@ -1,7 +1,7 @@
<div class="container">
<div class="quiz-detail">
- <h1>{{ quiz.title }}</h1>
- <h2>{{ quiz.content }}</h2>
+ <h1>{{name}}</h1>
+ <h2>{{description}}</h2>
</div>
<div class="quiz-info">
@@ -10,9 +10,8 @@
<hr />
</div>
<div class="quiz-info-content">
- <p class="quiz-info-content-value">{{quiz.nbQuestions}} Questions, {{quiz.difficulty}}</p>
+ <p class="quiz-info-content-value">{{questionCount}} Questions, {{difficulty}}</p>
</div>
-
</div>
<div class="new-quiz">
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
index 4428c878f0e8e2d873d4737ac3e8c0f95a15aeb8..677df9925345a216547d34b5c6a19005c83a79af 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
@@ -1,4 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { QuestionService } from '../../../services/question.service';
+import { CommunityService } from '../../../services/community.service';
@Component({
selector: 'app-quiz-list-detail',
@@ -6,24 +9,49 @@ import { Component, Input } from '@angular/core';
styleUrls: ['./quiz-list-detail.component.css', '../../../../styles.css'],
})
export class QuizListDetailComponent {
- @Input() title: string = '';
- @Input() nbQuestions: number = 0;
- @Input() difficulty: string = '';
- @Input() creator: string = '';
+ @Input() selectedQuiz: string = '';
quiz: any
+ name: string = 'Untitled';
+ category: any;
+ description: any;
+ difficulty: any;
+ questionCount: any;
- ngOnInit(): void {
- this.quiz = {
- title: "Quiz de la mort qui tue",
- content: "un quiz de la mort qui tue",
- difficulty: "hard",
- creator: "Klebert",
- nbQuestions: 10
+
+ constructor(
+ private questionService: QuestionService,
+ private activatedRoute: ActivatedRoute,
+ private communityService: CommunityService,
+ private router: Router,
+ ) { }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['selectedQuiz'] && changes['selectedQuiz'].currentValue) {
+ const newQuizId = changes['selectedQuiz'].currentValue;
+ this.loadQuiz(newQuizId);
}
}
+ loadQuiz(idQuiz: string): void {
+ this.communityService.getQuizInformations(idQuiz).subscribe({
+ next: (data: any) => {
+ console.log('Quiz loaded:', data);
+ this.name = data.name;
+ // this.category = data.category.name;
+ this.description = data.description;
+ this.difficulty = data.difficulty.name;
+ this.questionCount = data.questionCount;
+
+ },
+ error: (err) => {
+ console.error('Error loading quiz:', err);
+ },
+ });
+ }
+
+
playQuiz() {
- console.log('play quiz');
+ this.router.navigate(['/play-quiz'], { queryParams: { idQuiz: this.selectedQuiz } });
}
}
diff --git a/src/app/shared/quiz-list/quiz-list.component.html b/src/app/shared/quiz-list/quiz-list.component.html
index dc41f2053cd4efa748ec1225bbd0c5479f4c83ac..50854f54ca5aa973679f2d344c5a7e7124a08bee 100644
--- a/src/app/shared/quiz-list/quiz-list.component.html
+++ b/src/app/shared/quiz-list/quiz-list.component.html
@@ -1,5 +1,5 @@
<div class="list">
- <button *ngFor="let quiz of quizList" class="btn-primary">
+ <button *ngFor="let quiz of quizList" class="btn-primary" (click)="selectQuiz(quiz.id)">
<h4>{{ quiz.title }}</h4>
<p>{{ quiz.content }}</p>
</button>
diff --git a/src/app/shared/quiz-list/quiz-list.component.ts b/src/app/shared/quiz-list/quiz-list.component.ts
index 0550182ecd67bf7974d3ecc055cf253f51604229..07b3f85e8be022b05e96d781710a92d235091068 100644
--- a/src/app/shared/quiz-list/quiz-list.component.ts
+++ b/src/app/shared/quiz-list/quiz-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common'; // Importez CommonModule
@Component({
@@ -11,4 +11,10 @@ import { CommonModule } from '@angular/common'; // Importez CommonModule
export class QuizListComponent {
@Input() quizList: any[] = []; // Quiz list : title: string, content: string
+ @Output() valueEmitter = new EventEmitter<string>();
+
+ selectQuiz(quizId: string) {
+ this.valueEmitter.emit(quizId);
+ console.log('Quiz selected: ', quizId);
+ }
}