MCQ UI

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

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

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

@@ -5,4 +5,35 @@ h3 {
     font-weight: 500;
     letter-spacing: 0.5px;
     line-height: 1.5;
+}
+
+.options {
+    margin: 30px auto;
+
+    button {
+        border: 3px solid rgba($sea-blue, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 50px;
+        color: white;
+        font-size: 1.1rem;
+        border-radius: 10px;
+        background-color: transparent;
+        margin: 15px 0;
+        width: 100%;
+        padding: 0 15px;
+    }
+
+    ion-checkbox {
+        --background: transparent;
+        --border-color: #2ea9f586;
+        --border-width: 2px;
+        --border-color-checked: var(--ion-color-primary);
+        --background-checked: var(--ion-color-primary);
+        --size: 25px;
+        --checkmark-width: 2px;
+        --checkmark-color: white;
+        pointer-events: none;
+    }
 }

src/app/quiz/mcq/mcq.component.ts

@@ -7,11 +7,13 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class McqComponent implements OnInit {
     @Input() text: string = '';
-    @Input() choice: Array<{
+    @Input() choices: Array<{
         value: string,
         text: string,            
     }>;
-    @Input() correctAnswer: number
+    @Input() correctAnswer: number;
+
+    selectedChoice: string = '';
 
     constructor() { }
 

src/app/quiz/quiz.page.html

@@ -19,7 +19,7 @@
                 <ng-container *ngIf="selectedQuestion === i">
                     <li *ngIf="question.type === 'MCQ'">
                         <app-mcq [text]="question.question" 
-                        [choice]="question.choice"
+                        [choices]="question.choices"
                         [correctAnswer]="question.correctAnswer"></app-mcq>
                     </li>
     
@@ -31,4 +31,11 @@
         </ul>
         
     </div>
+
+
+    <button class="next-button" (click)="nextQuestion()">
+        <span class="text"> Next </span>
+
+        <span class="dot"></span>
+    </button>
 </ion-content>

src/app/quiz/quiz.page.scss

@@ -86,4 +86,63 @@
     list-style: none;
     padding: 0;
     margin: 0;
+}
+
+.next-button {
+    display: block;
+    width: 150px;
+    border-radius: 30px;
+    height: 60px;
+    background-color: darken($sea-blue, 15%);
+    color: white;
+    font-size: 1.2rem;
+    font-weight: 500;
+    position: fixed;
+    z-index: 1;
+    bottom: 10vh;
+    left: calc(50% - 75px);
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 30px;
+        top: 0;
+        width: 30px;
+        height: 30px;
+        background-color: darken($sea-blue, 10%);
+        border-radius: 50%;
+        display: block;
+        transform: scale(1.5)translateY(-5px);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        right: 30px;
+        bottom: 0;
+        width: 30px;
+        height: 30px;
+        background-color: darken($sea-blue, 10%);
+        border-radius: 50%;
+        display: block;
+        transform: scale(2.5)translateY(5px);
+    }
+
+    .text {
+        position: relative;
+        z-index: 1;
+    }
+
+    .dot {
+        position: absolute;
+        left: 30px;
+        bottom: 0px;
+        width: 30px;
+        height: 30px;
+        background-color: darken($sea-blue, 10%);
+        border-radius: 50%;
+        display: block;
+        transform: scale(0.3);
+    }
 }

src/app/quiz/quiz.page.ts

@@ -13,7 +13,7 @@ export class QuizPage implements OnInit {
     questions: Array<{
         type: 'MCQ' | 'CARD',
         question: string,
-        choice?: Array<{
+        choices?: Array<{
             value: string,
             text: string,            
         }>,
@@ -36,15 +36,15 @@ export class QuizPage implements OnInit {
         this.questions = [{
             type: 'MCQ',
             question: faker.lorem.sentence(),
-            choice: [{
+            choices: [{
                 value: 'A',
                 text: 'Choice 1'
             }, {
                 value: 'B',
-                text: 'Choice 1'
+                text: 'Choice 2'
             }, {
-                value: 'B',
-                text: 'Choice 1'
+                value: 'C',
+                text: 'Choice 3'
             }],
             correctAnswer: 'A',
             secondsAllotted: 50
@@ -56,4 +56,11 @@ export class QuizPage implements OnInit {
 
     }
 
+
+    nextQuestion() {
+        if (this.selectedQuestion < this.questions.length - 1) {
+            this.selectedQuestion += 1;
+        }
+    }
+
 }