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">
“{{ previousAnswer }}” was selected in your previous quiz.
</span>
</div>
</ng-container>