Partial commit --- Swiper cards for quiz

src/app/quiz/quiz.page.html

@@ -24,7 +24,7 @@
                     </li>
     
                     <li *ngIf="question.type === 'CARD'">
-                        <app-swipe-cards></app-swipe-cards>
+                        <app-swipe-cards [questions]="question.question"></app-swipe-cards>
                     </li>
                 </ng-container>
             </ng-container>                        

src/app/quiz/quiz.page.ts

@@ -7,18 +7,18 @@ import * as faker from 'faker';
     styleUrls: ['./quiz.page.scss'],
 })
 export class QuizPage implements OnInit {
-    secondsPerQuestion: number = 30;
-    selectedQuestion: number = 0;
+    secondsPerQuestion: number;
+    selectedQuestion: number = 1;
 
     questions: Array<{
         type: 'MCQ' | 'CARD',
-        question: string,
+        question: string | Array<string>,
         choices?: Array<{
             value: string,
             text: string,            
         }>,
         correctAnswer?: string,
-        secondsAllotted?: number
+        secondsAllotted: number
     }>;
 
     constructor() { }
@@ -50,16 +50,19 @@ export class QuizPage implements OnInit {
             secondsAllotted: 50
         }, {
             type: 'CARD',
-            question: faker.lorem.sentence(),
+            question: [faker.lorem.sentence(), faker.lorem.sentence(), faker.lorem.sentence(), faker.lorem.sentence()],
             secondsAllotted: 50
         }];
 
+        this.secondsPerQuestion = this.questions[this.selectedQuestion].secondsAllotted;
+
     }
 
 
     nextQuestion() {
         if (this.selectedQuestion < this.questions.length - 1) {
             this.selectedQuestion += 1;
+            this.secondsPerQuestion = this.questions[this.selectedQuestion].secondsAllotted;
         }
     }
 

src/app/quiz/swipe-cards/swipe-cards.component.html

@@ -1,3 +1,13 @@
-<p>
-  swipe-cards works!
-</p>
+<div class="container">
+    <ion-card #tinderCard *ngFor="let question of questions; let i = index"
+    [ngStyle]="{ zIndex: questions.length - i, transform: 'scale(' + (20 - i) / 20 + ') translateY(-' + 20 * i + 'px)' }">
+        <p>
+            {{ question }}
+        </p>
+    
+        <div class="action-buttons">
+            <button> True </button>
+            <button> False </button>
+        </div>
+    </ion-card>
+</div>

src/app/quiz/swipe-cards/swipe-cards.component.scss

@@ -0,0 +1,30 @@
+@import '../../colors';
+
+.container {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60vh;
+}
+
+
+ion-card {
+    margin: 0;
+    padding: 15px;
+
+    display: inline-block;
+    width: 100%;
+    height: 300px;
+    background: #FFFFFF;
+    border-radius: 20px;
+    box-shadow: 0px 0px 15px -2px $dark-blue;
+    overflow: hidden;
+    position: absolute;
+    will-change: transform;
+    transition: all 0.3s ease-in-out;
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+}

src/app/quiz/swipe-cards/swipe-cards.component.ts

@@ -1,14 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, ViewChildren, QueryList, ElementRef } from '@angular/core';
 
 @Component({
-  selector: 'app-swipe-cards',
-  templateUrl: './swipe-cards.component.html',
-  styleUrls: ['./swipe-cards.component.scss'],
+    selector: 'app-swipe-cards',
+    templateUrl: './swipe-cards.component.html',
+    styleUrls: ['./swipe-cards.component.scss'],
 })
 export class SwipeCardsComponent implements OnInit {
+    @ViewChildren('tinderCard') tinderCards: QueryList<ElementRef>;
+    @Input() questions: Array<string>;
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit() {}
+    ngOnInit() {}
 
 }