how to display previous answer for single-answer questions in quiz

Viewed 282

In my Angular quiz app, I'm adding a "previous answers" feature and I'm having some difficulty with displaying the previous answers for single-answer questions.

Here below are the 1) TypeScript function in my QuizService, 2) the snippet for multiple-answer questions that displays the previous answers, and 3) my attempt at the single-answer questions template that I need help with.

The single-answer questions should show one corresponding previous answer per question.

Please could you help to resolve this issue. Thank you!

QuizService code:

setPreviousUserAnswersText(questions: QuizQuestion[], previousAnswers): void {
  for (let i = 0; i < previousAnswers.length; i++) {
    if (previousAnswers[i].length === 1) {
      const previousAnswersSingleText = questions[i].options[previousAnswers[i] - 1].text;
      this.previousAnswers.push(previousAnswersSingleText);
    }
    if (previousAnswers[i].length > 1) {
      const previousAnswerMultiple = previousAnswers[i].slice();
      for (let j = 0; j < previousAnswerMultiple.length; j++) {
        const previousAnswersMultipleText = questions[i].options[previousAnswerMultiple[j] - 1].text;          
        this.previousAnswersMultipleTextArray.push(previousAnswersMultipleText);
      }
      this.previousAnswers.push(this.previousAnswersMultipleTextArray);
    }
  }
}

Multiple-Answer HTML template:

<ng-container *ngIf="option.selected">
  ...
  <div *ngFor="let previousAnswer of previousAnswers; index as j" class="previous-answer-text">
    <span *ngIf="previousAnswers[j].length > 1">
        {{ previousAnswer | join }} were selected in your previous quiz.
    </span>
  </div>
</ng-container>

Single-Answer HTML template (need help with this):

<ng-container *ngIf="option.selected">
  ...  
  <!-- TODO: get this working -->
  <div *ngFor="let previousAnswer of previousAnswers; index as j" class="previous-answer-text">
    <span *ngIf="previousAnswers[j].length === 1">
      &ldquo;{{ previousAnswer }}&rdquo; was selected in your previous quiz.
    </span>
  </div>
</ng-container>
0 Answers
Related