How to dynamic model name?


#1

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


#2

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:


#3

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; }

#4

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.


#5

Or Can u explain in details


#6

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.


#7

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.


#8

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


#9

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


#10

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