How do I display explanation for Option 1 in Angular quiz app?

Question

I'm working on a quiz app using Angular and I need the explanation text to also display when the first option is selected (the explanation displays for all of the options but the first option). When Option 1 is selected, the explanation, even if there isn't any, changes back to the question. Also for question 1 (multiple choice), the incorrect sound plays when Option 1 is selected, but the answer is correct.

snippet of code in di-quiz.component.html where explanationText appears:

<mat-card-content>
  <scoreboard></scoreboard>

  <section id="question" [class.answered]="answer">
    <span *ngIf="!answer">{{ question?.questionText }}&nbsp;
      <span *ngIf="numberOfCorrectOptions > 1">
        <em>({{ numberOfCorrectOptions }} options are correct)</em>
      </span>
    </span>
    <span *ngIf="answer">{{ explanationText }}</span>
  </section>

  <quiz-question
    [question]="question"
    (answer)="selectedAnswer($event)">
  </quiz-question>
</mat-card-content>

Please see my StackBlitz here: https://stackblitz.com/edit/angular-9-quiz-app

I'd appreciate your help with fixing these bugs. Thank you.

Answer 1

The next question does not appear because you don't reset answer property and *ngIf="!answer" is always true.

Try to reset it once you move to the next/previous question:

nextQuestion() {
  this.answer = null;
  this.checkIfAnsweredCorrectly();
  this.quizService.nextQuestion();
}

prevQuestion() {
  this.answer = null;
  this.quizService.prevQuestion();
}

Forked Stackblitz