From ffb4a50bf798b47b7ad1147225ebd896a83ccf79 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Mon, 18 Jan 2021 17:51:12 +0530
Subject: [PATCH] MCQ UI

---
 src/app/quiz/mcq/mcq.component.html | 10 ++++-
 src/app/quiz/mcq/mcq.component.scss | 31 +++++++++++++++
 src/app/quiz/mcq/mcq.component.ts   |  6 ++-
 src/app/quiz/quiz.page.html         |  9 ++++-
 src/app/quiz/quiz.page.scss         | 59 +++++++++++++++++++++++++++++
 src/app/quiz/quiz.page.ts           | 17 ++++++---
 6 files changed, 123 insertions(+), 9 deletions(-)

diff --git a/src/app/quiz/mcq/mcq.component.html b/src/app/quiz/mcq/mcq.component.html
index 48cf05e..7727a5d 100644
--- a/src/app/quiz/mcq/mcq.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/quiz/mcq/mcq.component.scss b/src/app/quiz/mcq/mcq.component.scss
index 45853f4..c81a6f4 100644
--- a/src/app/quiz/mcq/mcq.component.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/app/quiz/mcq/mcq.component.ts b/src/app/quiz/mcq/mcq.component.ts
index 6b770a0..ae50cf2 100644
--- a/src/app/quiz/mcq/mcq.component.ts
+++ b/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() { }
 
diff --git a/src/app/quiz/quiz.page.html b/src/app/quiz/quiz.page.html
index 810a06f..2d256e0 100644
--- a/src/app/quiz/quiz.page.html
+++ b/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>
diff --git a/src/app/quiz/quiz.page.scss b/src/app/quiz/quiz.page.scss
index 2d52063..af7afca 100644
--- a/src/app/quiz/quiz.page.scss
+++ b/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);
+    }
 }
\ No newline at end of file
diff --git a/src/app/quiz/quiz.page.ts b/src/app/quiz/quiz.page.ts
index 6b9af02..ee12e0a 100644
--- a/src/app/quiz/quiz.page.ts
+++ b/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;
+        }
+    }
+
 }