2

I try to create a quiz with various questions and each question has 4 answers, my logic is, the first ngFor is the number of questions and the second is your answers. My problem is that, when I type a text in letter A, every questions is affected. In the image, i wrote the responses in question_2, but every question get this answers

enter image description here

My code html:

<ion-slide *ngFor="let question of listQuestions; let indexQuestion = index ;">
 <div>
  <div>
    <div>{{question.numberQuestion}}</div>
  </div>
 </div>

 <div padding>
  <span></span>
  <ion-item>
    <ion-textarea rows="3" [(ngModel)]="questionClosed.statement"></ion-textarea>
  </ion-item>

  <ion-row *ngFor="let letter of listLetters; let index = index ;">
    <ion-col col-1 (click)="selectAnswer(letter)">
      <span >{{letter}}</span>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-textarea rows="2" [(ngModel)]='responses["question_" + (question.numberQuestion).toString()][letter]'></ion-textarea>
      </ion-item>
    </ion-col>
  </ion-row>
 </div>
</ion-slide>

My code ts:

public questionClosed: { statement?: string; A?: string; B?: string; C?: string; D?: string; } = {
  statement: null,
  A: null,
  B: null,
  C: null,
  D: null
};
public responses: any = {};

populatedListQuestions(numberQuestions) {
 for (let i = 0; i < numberQuestions; i++) {
  const data = {
    numberQuestion: i + 1,
    description: this.questionClosed
  };
  this.listQuestions.push(data);
  let name = 'question_' + (i+1).toString();
  this.responses[name] = this.questionClosed;
 }
} 
Bruno Inácio
  • 75
  • 1
  • 2
  • 8

0 Answers0