How can I reset question for each new question in quiz?

I'm working on an Angular 8 quiz application. Question is presented with ng-content for flexibility. The explanation which is hidden below the correct answer moves in place of the question using replaceWith and the original explanation div is hidden using CSS. The next question should display when the next button is clicked and the subsequent questions should also have the same behavior - only when an option is chosen should the explanation move and the div below the correct answer should be hidden, resetting for each subsequent question. Currently the explanation from the previous question is in the place of where the question statement for the current question needs to be. Probably need a script to switch between question and explanation for each question.

Also I need to highlight the correct answer when a wrong answer is chosen. Score should only be incremented ONCE per question when the correct option is selected (not more) and also the ngb-progressbar's progress should only increase ONCE per question also when correct option is selected. Timer should restart for each new question.

Please see snippets of my code below.

<ng-content></ng-content>
<form #quizForm="ngForm" [formGroup]="formGroup" (ngSubmit)="onSubmit(quizForm.value)">
    <ol class="form-group">
      <mat-radio-group formControlName="answer" name="answer" (change)="radioChange($event.value)"
        (click)="question.selectedOption = option">

        <div *ngFor="let option of question.options">
         <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)}">
            <li></li>

            <mat-icon *ngIf="isCorrect(option.optionValue)">done</mat-icon>
            <mat-icon *ngIf="isIncorrect(option.optionValue)">clear</mat-icon>
          </mat-radio-button>

          <div class="align-message-buttons">
            <button mat-raised-button *ngIf="isCorrect(option.optionValue)" class="message correct-message" (click)="nextQuestion()">  
              <span>You&apos;re right! The correct answer is Option .</span>
              <span class="proceed" *ngIf="question && question.questionId !== numberOfQuestions">
                Proceed to the next question&hellip;
              </span>
            </button>

            <button mat-raised-button *ngIf="isIncorrect(option.optionValue)" class="message wrong-message" (click)="nextQuestion()">  
              <span>That&apos;s wrong. The correct answer is Option .</span>
              <span class="proceed" *ngIf="question && question.questionId !== numberOfQuestions">
                Proceed to the next question&hellip;
              </span>
            </button>
           </div> 

           <div [hidden]="!isCorrect(option.optionValue)">
             <div id="explanation">
               Option  was correct because .
             </div>
           </div>
        </div>
      </mat-radio-group>
    </ol>
</form>

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);
}

from How can I reset question for each new question in quiz?