javascript — Angular 8 викторина приложение — сбросить форму для каждого нового вопроса

Angular 8 викторина — сброс настроек для каждого нового вопроса

Я работаю над приложением Angular 8. Объяснение перемещается вместо вопроса (используя replaceWith), а исходное объяснение div скрывается с помощью CSS. Последующие вопросы также должны иметь такое же поведение — только если выбран вариант, если объяснение перемещается, а разделение под правильным ответом следует удалять, сбрасывая для каждого последующего вопроса.

Также мне нужно выделить правильный ответ, если выбран неправильный ответ, и оценка должна увеличиваться ОДИН РАЗ за вопрос, когда выбран правильный вариант (не более).

Пожалуйста, смотрите мой код ниже.

 {amp}lt;div class="form-group"{amp}gt; {amp}lt;mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)" (click)="question.selectedOption = option"{amp}gt; {amp}lt;div *ngFor="let option of question.options"{amp}gt; {amp}lt;mat-radio-button class="option" [value]="option.optionValue" disableRipple="true" [checked]="question.selectedOption == option" [ngClass]="{'initial-state': initialState(), 'is-correct': isCorrect(option.optionValue), 'is-incorrect': isIncorrect(option.optionValue)}"{amp}gt; {{ option.optionValue }}) {{ option.optionText }} {amp}lt;mat-icon *ngIf="isCorrect(option.optionValue)"{amp}gt;done{amp}lt;/mat-icon{amp}gt; {amp}lt;mat-icon *ngIf="isIncorrect(option.optionValue)"{amp}gt;clear{amp}lt;/mat-icon{amp}gt; {amp}lt;/mat-radio-button{amp}gt; {amp}lt;div [hidden]="!isCorrect(option.optionValue)"{amp}gt; {amp}lt;div id="explanation"{amp}gt; Option {{ question.answer }} was correct because {{ question.explanation }}. {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/mat-radio-group{amp}gt; {amp}lt;/div{amp}gt; ngAfterViewInit() { let itemFrom = document.getElementById('explanation'); let itemTo = document.getElementById('question'); } radioChange(answer) { this.question.selectedOption = answer; this.answer.emit(answer); this.moveExplanation(this.itemFrom, this.itemTo); } moveExplanation(from, to) { to.replaceWith(from); } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector