How to dynamic model name?

I have below array

[[‘Question1’,‘option-1’,‘option-2’,‘option-3’,‘option-4’],
[‘Question2’,‘option-1’,‘option-2’,‘option-3’,‘option-4’],
[‘Question3’,‘option-1’,‘option-2’,‘option-3’,‘option-4’],
[‘Question4’,‘option-1’,‘option-2’,‘option-3’,‘option-4’]]

Now I want to create 04 radio question with 04 options and radio model name will be dynamic. plz help me

optional requirement : when click on option it will check whether ans is correct or not. If correct then green the radio. if not then red the radio and green the correct answer

Hi, if you ever want to make an app using ionic you really have to read up and learn how to.
There are no short-cuts to make an app :slight_smile:

1 Like

Hi Arctushar,

I had created Demo App for this.

Refer belowe Code, I Hope this may help you
quiz.html

 <ion-list *ngFor="#q of qus" radio-group [ngClass]="{view: q.show}">

    <ion-list-header>
        {{q.ask}}
    </ion-list-header>

    <ion-item *ngFor="#opt of q.options" [ngClass]="{incorrect: opt == q.given, correct: q.ans == opt}">
        <ion-radio [value]="opt" item-left (click)="answerIt(q,opt)"></ion-radio>
        <ion-label>{{opt}}</ion-label>
    </ion-item>
</ion-list>       

quiz.ts

 import {Page} from 'ionic-angular';

@Page({
   templateUrl: 'build/pages/quiz/quiz.html'
})
export class ListPage {
    qus: Array<any> = [];
    points: number = 0;

   constructor() {
      this.qus = [
        {'ask' : 'Question1', 'ans' : 'option-1' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""},
        {'ask' : 'Question2', 'ans' : 'option-3' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""},
        {'ask' : 'Question3', 'ans' : 'option-4' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""},
        {'ask' : 'Question4', 'ans' : 'option-2' , options :['option-1', 'option-2', 'option-3', 'option-4'], show: false, given: ""}
     ];
}

answerIt(q, ans) {
    q.show = true;
    q.given = ans;
    
    if(q.ans == ans) {
        this.points ++;            
    }else {
        //alert("incorrect");
    }
 }
}

Sass Css Code

.view .incorrect , .view .correct {
     color: #fff !important;

   .radio-icon {
       border-color: #fff !important;    
   }

  .radio-inner {
     background: #fff;
  }

  ion-label {
     color: #fff;
  }
}  
.view .correct { background: #2E7D32 !important; } 
.view .incorrect { background: #E53935; }
1 Like

thank you so much. You are great. It works really owe-some. Can you suggest me some links related to this codes where I can learn.

Or Can u explain in details

here little bit problem @itsmemyk if I click on correct option multiple time, then points add. But I want that if click on correct, it will increase point only once or after selecting any radio, it will disable.

Thank you for compliment.@arctushar

Well i just given the demo code to get rid of such multi choice kind of things like quiz app.

Yes, Little bit problem in code ( because i just demostrated the app ).

If you want it then i will resolved that issue and post it soon in reply.

Thank you so much. I m a civil engineer and trying to make some engineering quiz apps. Your help is highly appriciated.

1 Like

I have done it with [disabled]=“q.given!=’’” in the radio :slight_smile:

you can also do it with [disabled]=“q.show”, good attempt.

1 Like