Variable (not constant) number of RadioButtons

Ionic Framework ionic-v3
1

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 Options
    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>
2

Can I ask you something? Why show prev page or next page buttons on first or last question? You could use *ngIf directive to show/hide them.

Also, your code looks fine to me. Can you do a console.log() to see what actual values you have in this.question?

3

It’s only a demo - i deleted unnecessary code. All variable values are OK.
You can see the incorrect behaviour when the questions have a different count of options.

4

I am unable to reproduce your view at my end. Can you share it using plunkr.https://embed.plnkr.co/iWUxpH/

5

During implementing it on the stackblitz i got some errors for the HTML file. I changed the HTML-Code and now it works for different numbers of options. Thank you for your interest! The working HTML is:

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

Good to hear that you solved it :slight_smile: