MCQ Questions made realistic

src/app/live/live.page.html

@@ -91,6 +91,7 @@
 
                 <section class="card">
                     <ion-slides  #slides [options]="slideOpts" (ionSlideDidChange)="selectIndex()">
+                        
                         <ion-slide *ngFor="let matchDay of bookingSeatsData"
                         (click)="showBookingDetails(matchDay)">
                             <div class="image-holder">

src/app/quiz/mcq/mcq.component.html

@@ -1,10 +1,10 @@
 <section class="question">
     <h3> {{ text }} </h3>
     
-    <div class="options">
+    <div class="options" [ngClass]="{'inactive' : selectedChoice }">
         <button *ngFor="let choice of choices"
         (click)="selectedChoice = choice.value"
-        [ngClass]="{'active': selectedChoice === choice.value }">
+        [ngClass]="{'correct': selectedChoice === choice.value && selectedChoice === correctAnswer, 'wrong': selectedChoice === choice.value && selectedChoice !== correctAnswer }">
             {{ choice.text }}
 
             <ion-checkbox mode="ios" [checked]="selectedChoice === choice.value"></ion-checkbox>

src/app/quiz/mcq/mcq.component.scss

@@ -10,6 +10,10 @@ h3 {
 .options {
     margin: 30px auto;
 
+    &.inactive {
+        pointer-events: none;
+    }
+
     button {
         border: 3px solid rgba($sea-blue, 0.3);
         display: flex;
@@ -23,14 +27,26 @@ h3 {
         margin: 15px 0;
         width: 100%;
         padding: 0 15px;
+
+        &.correct {
+            background-color: $green;
+            border-color: darken($green, 10%);
+            font-weight: 500;
+        }
+
+        &.wrong {
+            background-color: rgba(orange, 0.8);
+            border-color: orange;
+            font-weight: 500;
+        }
     }
 
     ion-checkbox {
         --background: transparent;
         --border-color: #2ea9f586;
         --border-width: 2px;
-        --border-color-checked: var(--ion-color-primary);
-        --background-checked: var(--ion-color-primary);
+        --border-color-checked: white;
+        --background-checked: transparent;
         --size: 25px;
         --checkmark-width: 2px;
         --checkmark-color: white;

src/app/quiz/quiz.page.ts

@@ -66,19 +66,40 @@ export class QuizPage implements OnInit {
 
         this.questions = [{
             type: 'MCQ',
-            question: faker.lorem.sentence(),
+            question: 'Who has highest S/R in KXIP history?',
             choices: [{
                 value: 'A',
-                text: 'Choice 1'
+                text: 'Rahul K L'
             }, {
                 value: 'B',
-                text: 'Choice 2'
+                text: 'Glen Maxwell'
             }, {
                 value: 'C',
-                text: 'Choice 3'
+                text: 'V Sehwag'
+            }, {
+                value: 'D',
+                text: 'R Ashwin'
             }],
             correctAnswer: 'A',
-            secondsAllotted: 50
+            secondsAllotted: 20
+        }, {
+            type: 'MCQ',
+            question: 'Who Scored highest runs in KXIP History?',
+            choices: [{
+                value: 'A',
+                text: 'Rahul K L'
+            }, {
+                value: 'B',
+                text: 'Glen Maxwell'
+            }, {
+                value: 'C',
+                text: 'V Sehwag'
+            }, {
+                value: 'D',
+                text: 'N Pooran'
+            }],
+            correctAnswer: 'C',
+            secondsAllotted: 20
         }, {
             type: 'CARD',
             question: cardQuestions,