diff --git a/src/app/modules/question/question.component.html b/src/app/modules/question/question.component.html index f9ed0fbed28654f5ebcd3dda1dc8b8d444d0f6d4..c3a13e7119b6d5d950915145d8c6a797f9f9bc7f 100644 --- a/src/app/modules/question/question.component.html +++ b/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 diff --git a/src/app/modules/question/question.component.ts b/src/app/modules/question/question.component.ts index 5ffe8464ecf61562bd0f3cac4078fc729542642f..19ba7417da73530cb5ee9db5cbbee391cbbe969e 100644 --- a/src/app/modules/question/question.component.ts +++ b/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; + } }