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