Partial commit Quiz UI

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

@@ -1,3 +1,5 @@
-<p>
-  mcq works!
-</p>
+<section class="question">
+    <h3> {{ text }} </h3>
+    
+    
+</section>

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

@@ -0,0 +1,8 @@
+@import '../../colors';
+
+h3 {
+    color: white;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    line-height: 1.5;
+}

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

@@ -1,14 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-mcq',
-  templateUrl: './mcq.component.html',
-  styleUrls: ['./mcq.component.scss'],
+    selector: 'app-mcq',
+    templateUrl: './mcq.component.html',
+    styleUrls: ['./mcq.component.scss'],
 })
 export class McqComponent implements OnInit {
+    @Input() text: string = '';
+    @Input() choice: Array<{
+        value: string,
+        text: string,            
+    }>;
+    @Input() correctAnswer: number
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit() {}
+    ngOnInit() {}
 
 }

src/app/quiz/quiz.module.ts

@@ -7,6 +7,8 @@ import { IonicModule } from '@ionic/angular';
 import { QuizPageRoutingModule } from './quiz-routing.module';
 
 import { QuizPage } from './quiz.page';
+import { McqComponent } from './mcq/mcq.component';
+import { SwipeCardsComponent } from './swipe-cards/swipe-cards.component';
 
 @NgModule({
   imports: [
@@ -15,6 +17,6 @@ import { QuizPage } from './quiz.page';
     IonicModule,
     QuizPageRoutingModule
   ],
-  declarations: [QuizPage]
+  declarations: [QuizPage, McqComponent, SwipeCardsComponent]
 })
 export class QuizPageModule {}

src/app/quiz/quiz.page.html

@@ -1,3 +1,34 @@
 <ion-content>
+
+    <img class="dotted-bg" src="https://www.searchpng.com/wp-content/uploads/2019/02/Polka-dot-Color-Pattern-PNG-Image.png">
+
+    <section class="visual-timer">
+        <p class="time"> {{ secondsPerQuestion }} </p>
+        <ion-icon name="hourglass-outline"></ion-icon>
+
+        <div class="progress" [ngStyle]="{'width.%' : (secondsPerQuestion * 100 / 30)}"></div>
+    </section>
+
+    <div class="container">
+        <header class="question-counter">
+            <h2> Question {{ selectedQuestion + 1 }}/<span>{{ questions.length }}</span> </h2>
+        </header>
+
+        <ul class="questions">
+            <ng-container *ngFor="let question of questions; let i = index">
+                <ng-container *ngIf="selectedQuestion === i">
+                    <li *ngIf="question.type === 'MCQ'">
+                        <app-mcq [text]="question.question" 
+                        [choice]="question.choice"
+                        [correctAnswer]="question.correctAnswer"></app-mcq>
+                    </li>
     
+                    <li *ngIf="question.type === 'CARD'">
+                        <app-swipe-cards></app-swipe-cards>
+                    </li>
+                </ng-container>
+            </ng-container>                        
+        </ul>
+        
+    </div>
 </ion-content>

src/app/quiz/quiz.page.scss

@@ -0,0 +1,89 @@
+@import '../colors';
+
+.dotted-bg {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 0;
+    width: 100%;
+    object-fit: cover;
+    height: 10vh;
+    background-repeat: no-repeat;
+    background-position: top;
+}
+
+.visual-timer {
+    display: flex;
+    width: 80%;
+    margin: 40px auto;
+    position: relative;
+    background-color: transparent;
+    border: 4px solid rgba($blue-grey, 0.3);
+    border-radius: 30px;
+    height: 45px;
+    align-items: center;
+    justify-content: center;
+    z-index: 0;
+    overflow: hidden;
+
+    p {
+        flex-grow: 1;
+        margin: 0;
+        text-align: center;
+        color: white;
+        font-size: 1rem;
+        font-weight: 500;
+        letter-spacing: 1px;
+        position: relative;
+        z-index: 1;
+    }
+
+    ion-icon {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        font-size: 1rem;
+        color: white;
+        z-index: 1;
+    }
+
+    .progress {
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 30px;
+        background: linear-gradient(90deg, lighten($brand-red, 5%) 5%, lighten($dark-blue, 20%) 80%);
+        width: 100%;
+        height: 100%;
+        transition: width 1s linear;
+    }
+}
+
+.container {
+    width: 80%;
+    margin: 40px auto;
+}
+
+.question-counter {
+    border-bottom: 2px dotted rgba($blue-grey, 0.3);
+    padding-bottom: 10px;
+
+    h2 {
+        color: $blue-grey;
+        font-size: 1.3rem;
+        letter-spacing: 1px;
+        font-weight: 700;
+        margin: 0;
+
+        span {
+            font-size: 1.1rem;
+            font-weight: 300;
+        }
+    }
+}
+
+.questions {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}

src/app/quiz/quiz.page.ts

@@ -1,15 +1,59 @@
 import { Component, OnInit } from '@angular/core';
+import * as faker from 'faker';
 
 @Component({
-  selector: 'app-quiz',
-  templateUrl: './quiz.page.html',
-  styleUrls: ['./quiz.page.scss'],
+    selector: 'app-quiz',
+    templateUrl: './quiz.page.html',
+    styleUrls: ['./quiz.page.scss'],
 })
 export class QuizPage implements OnInit {
+    secondsPerQuestion: number = 30;
+    selectedQuestion: number = 0;
 
-  constructor() { }
+    questions: Array<{
+        type: 'MCQ' | 'CARD',
+        question: string,
+        choice?: Array<{
+            value: string,
+            text: string,            
+        }>,
+        correctAnswer?: string,
+        secondsAllotted?: number
+    }>;
 
-  ngOnInit() {
-  }
+    constructor() { }
+
+    ngOnInit() {
+
+        let timer = setInterval(() => {
+            if (this.secondsPerQuestion === 0) {
+                clearInterval(timer);
+            } else {
+                this.secondsPerQuestion -= 1;
+            }
+        }, 1000);
+
+        this.questions = [{
+            type: 'MCQ',
+            question: faker.lorem.sentence(),
+            choice: [{
+                value: 'A',
+                text: 'Choice 1'
+            }, {
+                value: 'B',
+                text: 'Choice 1'
+            }, {
+                value: 'B',
+                text: 'Choice 1'
+            }],
+            correctAnswer: 'A',
+            secondsAllotted: 50
+        }, {
+            type: 'CARD',
+            question: faker.lorem.sentence(),
+            secondsAllotted: 50
+        }];
+
+    }
 
 }