Swipe card UI

src/app/quiz/quiz.page.html

@@ -1,41 +1,60 @@
 <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" 
-                        [choices]="question.choices"
-                        [correctAnswer]="question.correctAnswer"></app-mcq>
-                    </li>
-    
-                    <li *ngIf="question.type === 'CARD'">
-                        <app-swipe-cards [questions]="question.question"></app-swipe-cards>
-                    </li>
-                </ng-container>
-            </ng-container>                        
-        </ul>
+    <ng-container *ngIf="!showReport">
+        <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" 
+                            [choices]="question.choices"
+                            [correctAnswer]="question.correctAnswer"></app-mcq>
+                        </li>
         
-    </div>
-
-
-    <button class="next-button" *ngIf="questionType === 'MCQ'" (click)="nextQuestion()">
-        <span class="text"> Next </span>
-
-        <span class="dot"></span>
-    </button>
+                        <li *ngIf="question.type === 'CARD'">
+                            <app-swipe-cards (cardEvent)="getCardEvent($event)" [questions]="question.question"></app-swipe-cards>
+                        </li>
+                    </ng-container>
+                </ng-container>                        
+            </ul>
+            
+        </div>
+
+
+        <button class="next-button" *ngIf="questionType === 'MCQ'" (click)="nextQuestion()">
+            <span class="text"> Next </span>
+
+            <span class="dot"></span>
+        </button>
+    </ng-container>
+
+    <ng-container *ngIf="showReport">
+        <section class="report-card">
+            <div>
+                <h2> Yay! </h2>
+                <p>
+                    You've completed all the fan Quiz questions!
+                </p>
+            </div>
+        </section>
+
+
+        <button class="next-button" (click)="startQuiz()">
+            <span class="text"> Restart </span>
+
+            <span class="dot"></span>
+        </button>
+    </ng-container>
 </ion-content>

src/app/quiz/quiz.page.scss

@@ -145,4 +145,32 @@
         display: block;
         transform: scale(0.3);
     }
+}
+
+.report-card {
+    background-color: white;
+    padding: 20px;
+    height: 250px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80%;
+    margin: 20vh auto;
+    border-radius: 10px;
+    text-align: center;
+    background-color: lighten($blue-grey, 35%);
+    box-shadow: 0px 3px 5px $dark-blue;
+
+    h2 {
+        color: $green;
+        font-size: 1.5rem;
+        margin: 10px 0;
+    }
+
+    p {
+        margin: 10px 0;
+        color: darken($blue-grey, 20%);
+        font-size: 1.2rem;
+        line-height: 1.5;
+    }
 }

src/app/quiz/quiz.page.ts

@@ -22,10 +22,18 @@ export class QuizPage implements OnInit {
         correctAnswer?: string,
         secondsAllotted: number
     }>;
+    showReport: boolean = true;
 
     constructor() { }
 
     ngOnInit() {
+        this.startQuiz();
+    }
+
+
+    startQuiz() {
+        this.selectedQuestion = 0;
+        this.showReport = false;
 
         let timer = setInterval(() => {
             if (this.secondsPerQuestion === 0) {
@@ -75,6 +83,16 @@ export class QuizPage implements OnInit {
             this.selectedQuestion += 1;
             this.secondsPerQuestion = this.questions[this.selectedQuestion].secondsAllotted;
             this.questionType = this.questions[this.selectedQuestion].type;
+        } else {
+            this.showReport = true;
+        }
+    }
+
+    getCardEvent(data) {
+        if (data) {
+            if (data.end) {
+                this.nextQuestion();
+            }
         }
     }
 

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

@@ -2,14 +2,14 @@
     <section class="card" #tinderCard *ngFor="let question of questions; let i = index"
     [ngStyle]="{ zIndex: questions.length - i, transform: 'scale(' + (20 - i) / 20 + ') translateY(-' + 20 * i + 'px)' }"
     (pan)="handlePan($event)" (panend)="handlePanEnd($event)">
+        <img [src]="question.image" alt="">
         <p>
             {{ question.text }}
         </p>
     </section>
 
-
     <div class="action-buttons">
         <button (click)="userClickedButton($event, false)"> <ion-icon name="close-outline"></ion-icon> </button>
-        <button (click)="userClickedButton($event, True)"> <ion-icon name="checkmark"></ion-icon> </button>
+        <button (click)="userClickedButton($event, true)"> <ion-icon name="checkmark"></ion-icon> </button>
     </div>
 </div>

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

@@ -13,10 +13,8 @@
 .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;
@@ -27,6 +25,24 @@
     cursor: -webkit-grab;
     cursor: -moz-grab;
     cursor: grab;
+
+
+    img {
+        width: 100%;
+        object-fit: cover;
+        display: block;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        height: 230px;
+    }
+
+    p {
+        text-align: center;
+        margin: 0;
+        font-size: 1.2rem;
+        color: darken($blue-grey, 20%);
+        font-weight: 500;
+    }
 }
 
 
@@ -35,8 +51,8 @@
     position: fixed;
     z-index: 1;
     bottom: 10vh;
-    width: 120px;
-    left: calc(50% - 60px);
+    width: 100px;
+    left: calc(50% - 50px);
     overflow: visible;    
     align-items: center;
     justify-content: space-between;
@@ -54,6 +70,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        margin: 0;
 
         &:first-child {
             margin-left: -30px;

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

@@ -31,6 +31,11 @@ export class SwipeCardsComponent implements OnInit {
         this.tinderCardsArray = this.tinderCards.toArray();
         this.tinderCards.changes.subscribe(()=>{
             this.tinderCardsArray = this.tinderCards.toArray();
+            if(this.tinderCardsArray.length === 0) {
+                this.cardEvent.emit({ end: true });
+            } else {
+                this.cardEvent.emit({ end: false });
+            }
         });
     }