Dyn. number of RadioButtons

@MrChance wrote:

I have a list of 10 questions . Every question has 6 options. I can click an option and go to the next question. All options are unchecked if it is a new question. When i go back - the selected option is checked. All is fine. But if i change the number of options from question to question, it’s not working correct: the selected option is unchecked or at a new question not all options are unchecked.

Question.ts :
export class Question {
    id : number;  //ID and Index of question in the array
    qtext : string; // Text of Question
    options : string[]; // Answer Option
    selected : number; // Selected Option (the index of the option) from User, default = -1
}

m_questions.ts **(YOU HAVE TO DELETE SOME OPTIONS TO GET INCORRECT CHECKED OPTIONS):** 

import { Question } from './Question';

export const QUESTIONS: Question[] = [
    { id: 0, qtext: 'Question 1', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 1, qtext: 'Question 2', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 2, qtext: 'Question 3', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 3, qtext: 'Question 4', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 4, qtext: 'Question 5', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 5, qtext: 'Question 6', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 6, qtext: 'Question 7', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 7, qtext: 'Question 8', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 8, qtext: 'Question 9', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
    { id: 9, qtext: 'Question 10', options: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6'], selected: -1 },
]

app.component.ts

import { Component, AfterContentChecked } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { Question } from './Question';
import { QUESTIONS } from './m_questions';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  questions: Question[];  // array of questions
  question: Question;  // current question
  questionIndex = 0; // index of current question in the array

  ngOnInit() {
    this.questions = QUESTIONS;
    this.question = this.questions[0];
  }

  setAnswer(selectedOption: number) { // set "selected" to the index of the selected option
    this.questions[this.questionIndex].selected = selectedOption;
  }


  nextPage() {
    if (this.questionIndex < this.questions.length - 1) {
      this.questionIndex++;
      this.question = this.questions[this.questionIndex];
    }
  }

  prevPage() {
    if (this.questionIndex > 0) {
      this.questionIndex--;
      this.question = this.questions[this.questionIndex];
    }
  }



  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

}

and app.component.html

<ion-app>

  <ion-radio-group>
    <ion-label> {{question.qtext}} </ion-label>
    <ion-list *ngFor="let option of question.options; let i = index">
      <ion-item>
        <label> {{ option }}
        </label>
        [Index = {{i}} Selected = {{question.selected}}]
        <ion-radio [id]="i" [checked]="i === question.selected" (click)="setAnswer(i)"></ion-radio>
      </ion-item>
    </ion-list>
  </ion-radio-group>

  <ion-button (click)="prevPage()"> Prev. Page</ion-button>
  <ion-button (click)='nextPage()'> Next Page </ion-button>

</ion-app>

Posts: 1

Participants: 1

Read full topic