在选择了错误答案(红色突出显示)的同时,我需要一些帮助以绿色突出显示正确的答案并带有选中标记。请在下面查看我的表单的代码:
<form #quizForm="ngForm" [formGroup]="formGroup" (ngSubmit)="onSubmit()">
<ol class="form-group">
<mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)"
(click)="question.selectedOption = option">
<div class="radio-options" *ngFor="let option of question.options">
<mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
[checked]="question.selectedOption == option"
[ngClass]="{'is-correct': isCorrect(option.optionValue),
'is-incorrect': isIncorrect(option.optionValue)}">
<li>{{ option.optionText }}</li>
<mat-icon class="feedback-icon" *ngIf="isCorrect(option.optionValue)">done</mat-icon>
<mat-icon class="feedback-icon" *ngIf="isIncorrect(option.optionValue)">clear</mat-icon>
</mat-radio-button>
private buildForm() {
this.formGroup = this.fb.group({
answer: ['', Validators.required]
});
}
radioChange(answer: number) {
this.selectedOption = answer;
// this.answer.emit(answer);
this.displayExplanation();
}
isCorrect(option: number): boolean {
return option === this.question.answer && this.selectedOption === option;
}
isIncorrect(option: number): boolean {
return option !== this.question.answer && this.selectedOption === option;
}
编辑:尝试做这样的事情,不确定如何将其链接到我的模板,因为我已经在DOM元素上使用了ngClass :) ...
checkAnswer() {
let radioElem = document.getElementById('mat-radio-btn');
if (this.question.selectedOption === this.question.answer) {
radioElem.classList.add('is-correct');
} else {
radioElem.classList.add('is-incorrect');
if (radioElem.innerHTML === this.question.answer) {
radioElem.classList.add('is-correct');
}
}
}
答案 0 :(得分:1)
您需要做的就是将方法更改为在选择一个选项之前不做任何事情:
isCorrect(option: number): boolean {
// mark the correct answer regardless of which option is selected once answered
return !!this.selectedOption && option === this.question.answer;
}
isIncorrect(option: number): boolean {
// mark incorrect answer if selected
return option !== this.question.answer && this.selectedOption === option;
}
答案 1 :(得分:0)
我不确定如何在方法中编写代码。但我认为理想情况下,您的代码看起来像-
<mat-radio-button class="option" [value]="option.optionValue" disableRipple="true"
[checked]="question.selectedOption == option"
[ngClass]="{'is-correct': isCorrect(option.optionValue),
'is-incorrect': !isCorrect(option.optionValue)}">
<li>{{ option.optionText }}</li>
<mat-icon class="feedback-icon" *ngIf="isCorrect(option.optionValue)">done</mat-icon>
<mat-icon class="feedback-icon" *ngIf="!isCorrect(option.optionValue)">clear</mat-icon>
</mat-radio-button>
并且您的方法应类似于-
isCorrect(option: number): boolean {
this.selectedOption = option;
return option === this.question.answer
}
PS:如果已经添加了change
事件,则无需添加点击处理程序。只需在变更处理程序中设置值,或者如果需要,也可以使用ngModel
使用模型绑定。