Skip to content
Snippets Groups Projects
Commit 3012d40a authored by MEKHININI ELIES's avatar MEKHININI ELIES :speech_balloon:
Browse files

:twisted_rightwards_arrows: merge feat: score and improve feedback 

Merge branch 'feature/15-count-score' into 'develop'
parents 4f31e32b de4540ce
Branches
2 merge requests!23Develop,!22feat: score and improve feedback
Hide whitespace changes
Inline Side-by-side
src/app/modules/question/question.component.html
+ 32
− 50
View file @ 3012d40a
......@@ -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
src/app/modules/question/question.component.ts
+ 20
− 1
View file @ 3012d40a
......@@ -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;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment