Partial commit --- Quiz Reports UI

src/app/tabs/courses/quiz/quiz.component.html

@@ -1,5 +1,5 @@
 <section class="page" *ngIf="questionList.length > 0">
-    <header class="nav-header">
+    <header class="nav-header" *ngIf="quizSegment !== 'END_PAGE'">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
@@ -137,4 +137,26 @@
         </section>
     </div>
 
+
+    <div *ngIf="quizSegment === 'END_PAGE'">
+        <section class="end-upfold">
+            <div class="end-upfold-container">
+                <header class="subject"> <span> Chemistry - Oxidation &amp; Reduction </span> </header>
+
+                <div class="rank-holder">
+                    <label> Rank # </label>
+                    <span> 8 </span>
+                </div>
+
+                <p> You're Excellent, Dwayne!! </p>
+
+                <div class="calculated-progress">
+                    <span class="correct" [style.width.%]="getCorrectAnswersCount() * 100 / questionList.length"></span>
+                    <span class="wrong" [style.width.%]="getWrongAnswersCount() * 100 / questionList.length"></span>
+                    <span class="none" [style.width.%]="getUnAttendedAnswersCount() * 100 / questionList.length"></span>
+                </div>
+            </div>
+        </section>
+    </div>
+
 </section>

src/app/tabs/courses/quiz/quiz.component.scss

@@ -643,3 +643,142 @@ ngx-siema-slide {
         }
     }
 }
+
+.end-upfold {
+    background-image: url('https://mini.webtrigon.com/static-v1.1.0/home/images/png/pattern.png');
+    background-size: cover;
+    background-position: center;
+    background-color: var(--ash-black);
+    padding: 20px 0;
+}
+
+.end-upfold-container {
+    width: 100%;
+
+    .subject {
+        color: var(--teal-green);
+        letter-spacing: 1px;
+        width: 60%;
+        overflow: hidden;
+        text-align: center;
+        padding: 10px 20px;
+        border-radius: 40px;
+        position: relative;
+        z-index: 0;
+        margin: 0 auto 20px;
+        font-size: 16px;
+        font-weight: 400;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--black);
+            opacity: 0.6;
+        }
+
+        span {
+            z-index: 1;
+            position: relative;
+        }
+    }
+
+    .rank-holder {
+        width: 130px;
+        height: 130px;
+        margin: 25px auto 20px;
+        border-radius: 50%;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10%;
+            top: 10%;
+            width: 80%;
+            height: 80%;
+            background-color: var(--dark-grey);
+            opacity: 0.5;
+            z-index: 1;
+            border-radius: 50%;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--black);
+            opacity: 0.7;
+            z-index: 0;
+            border-radius: 50%;
+        }
+
+        label, span {
+            z-index: 2;
+        }
+
+        label {
+            color: white;
+            position: absolute;
+            top: -5px;
+            left: calc(50% - 50px);
+            width: 100px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 30px;
+            font-size: 14px;
+            text-align: center;
+            background-color: var(--teal-green);
+        }
+
+        span {
+            font-weight: 500;
+            color: white;
+            font-size: 60px;
+        }
+    }
+
+    p {
+        font-size: 16px;
+        color: white;
+        margin-bottom: 20px;
+        text-align: center;
+    }
+
+
+    .calculated-progress {
+        height: 15px;
+        width: 70%;
+        margin: 0 auto;
+        border-radius: 30px;
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        justify-content: flex-start;
+        background-color: white;
+
+        .correct {
+            background-color: var(--green);
+        }
+
+        .wrong {
+            background-color: var(--danger-dark);
+        }
+
+        .none {
+            background-color: rgba(orange, 0.8);
+        }
+    }
+}

src/app/tabs/courses/quiz/quiz.component.ts

@@ -25,7 +25,7 @@ export class QuizComponent implements OnInit {
 		},
 	};
 
-    quizSegment: string = 'QUESTIONS';
+    quizSegment: string = 'START_PAGE';
     showQuestionList: boolean = false;
 
     selectedQuestion: any;
@@ -102,114 +102,6 @@ export class QuizComponent implements OnInit {
             id: 4,
             text: 'Gambler',
         }]
-    }, {
-        id: 5,
-        question: 'Who is Newton ?',
-        userAnswer: 0,
-        correctAnswer: 3,
-        options: [{
-            id: 1,
-            text: 'Dancer',
-        }, {
-            id: 2,
-            text: 'Actor',
-        }, {
-            id: 3,
-            text: 'Scientist',
-        }, {
-            id: 4,
-            text: 'Gambler',
-        }]
-    }, {
-        id: 6,
-        question: 'Who is Newton ?',
-        userAnswer: 0,
-        correctAnswer: 3,
-        options: [{
-            id: 1,
-            text: 'Dancer',
-        }, {
-            id: 2,
-            text: 'Actor',
-        }, {
-            id: 3,
-            text: 'Scientist',
-        }, {
-            id: 4,
-            text: 'Gambler',
-        }]
-    }, {
-        id: 7,
-        question: 'Who is Newton ?',
-        userAnswer: 0,
-        correctAnswer: 3,
-        options: [{
-            id: 1,
-            text: 'Dancer',
-        }, {
-            id: 2,
-            text: 'Actor',
-        }, {
-            id: 3,
-            text: 'Scientist',
-        }, {
-            id: 4,
-            text: 'Gambler',
-        }]
-    }, {
-        id: 8,
-        question: 'Who is Newton ?',
-        userAnswer: 0,
-        correctAnswer: 3,
-        options: [{
-            id: 1,
-            text: 'Dancer',
-        }, {
-            id: 2,
-            text: 'Actor',
-        }, {
-            id: 3,
-            text: 'Scientist',
-        }, {
-            id: 4,
-            text: 'Gambler',
-        }]
-    }, {
-        id: 9,
-        question: 'Who is Newton ?',
-        userAnswer: 0,
-        correctAnswer: 3,
-        options: [{
-            id: 1,
-            text: 'Dancer',
-        }, {
-            id: 2,
-            text: 'Actor',
-        }, {
-            id: 3,
-            text: 'Scientist',
-        }, {
-            id: 4,
-            text: 'Gambler',
-        }]
-    }, {
-        id: 10,
-        question: 'Who is Newton ?',
-        userAnswer: 0,
-        correctAnswer: 3,
-        options: [{
-            id: 1,
-            text: 'Dancer',
-        }, {
-            id: 2,
-            text: 'Actor',
-        }, {
-            id: 3,
-            text: 'Scientist',
-        }, {
-            id: 4,
-            text: 'Gambler',
-        }]
     }];
 
 
@@ -258,4 +150,22 @@ export class QuizComponent implements OnInit {
         }
     }
 
+    getCorrectAnswersCount() {
+        return this.questionList.filter((question) => {
+            return question.correctAnswer === question.userAnswer;
+        }).length;
+    }
+
+    getWrongAnswersCount() {
+        return this.questionList.filter((question) => {
+            return question.correctAnswer !== question.userAnswer && question.userAnswer !== 0;
+        }).length;
+    }
+
+    getUnAttendedAnswersCount() {
+        return this.questionList.filter((question) => {
+            return question.userAnswer === 0;
+        }).length;
+    }
+
 }