Quiz end page

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

@@ -157,6 +157,75 @@
                 </div>
             </div>
         </section>
+
+        <div class="answers-report-container">
+            <section class="answers-report">
+                <ul>
+                    <li class="correct" (click)="reportListState = 'correct'">
+                        <div class="content">
+                            <label> Correct Answers </label>
+                            <div class="count"> {{ getCorrectAnswersCount() }}
+                                <span *ngIf="getCorrectAnswersCount() >= 0"> ({{ getCorrectAnswersCount() * 100 / questionList.length }}%) </span>
+                            </div>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+                        </div>
+                    </li>
+
+                    <li class="wrong" (click)="reportListState = 'wrong'">
+                        <div class="content">
+                            <label> Wrong Answers </label>
+                            <div class="count"> {{ getWrongAnswersCount() }}
+                                <span *ngIf="getWrongAnswersCount() >= 0"> ({{ getWrongAnswersCount() * 100 / questionList.length }}%) </span>
+                            </div>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+                        </div>
+                    </li>
+
+                    <li class="skipped" (click)="reportListState = 'skipped'">
+                        <div class="content">
+                            <label> Skipped Answers </label>
+                            <div class="count"> {{ getUnAttendedAnswersCount() }}
+                                <span *ngIf="getUnAttendedAnswersCount() >= 0"> ({{ getUnAttendedAnswersCount() * 100 / questionList.length }}%) </span>
+                            </div>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+                        </div>
+                    </li>
+                </ul>
+
+                <div class="answer-action-buttons">
+                    <button> Leaderboard </button>
+                    <button (click)="back()"> Back to home </button>
+                </div>
+            </section>
+        </div>
+
+
+        <section class="quiz-list-slideup" [ngClass]="{'active' : reportListState }">
+            <header>
+                Question List
+                <button class="close-button" (click)="reportListState = ''">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </button>
+            </header>
+            <ul>
+                <li *ngFor="let question of getSortedQuestionList(reportListState);let i = index"
+                [ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id && selectedQuestion.userAnswer === 0,
+                'correct' : question.userAnswer === question.correctAnswer,
+                'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer,
+                'none' : question.userAnswer === 0}">
+                <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon progress-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                    <div class="content-holder" (click)="goToSlide(i)">
+                        <section class="content">
+                            <label>
+                                {{ i + 1 }}. {{ question.question }}
+                            </label>
+                        </section>
+                    </div>
+                </li>
+            </ul>
+        </section>
     </div>
 
 </section>

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

@@ -509,6 +509,23 @@ ngx-siema-slide {
         font-weight: 700;
         margin: 40px auto 10px;
         padding: 0 5%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        button {
+            border: 0px;
+            background-color: var(--light-grey);
+            border-radius: 5px;
+            width: 30px;
+            height: 30px;
+
+            .icon {
+                width: 10px;
+                height: 10px;
+                fill: white;
+            }
+        }
     }
 
     ul {
@@ -615,9 +632,11 @@ ngx-siema-slide {
             box-shadow: 1px 1px 5px var(--light-grey);
             border-radius: 7px;
             margin-left: auto;
+            overflow: hidden;
 
             .content {
                 flex-grow: 1;
+                max-width: 100%;
             }
 
             .status {
@@ -632,6 +651,9 @@ ngx-siema-slide {
             font-size: 14px;
             color: var(--dark-grey);
             overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: 100%;
         }
 
         p {
@@ -649,7 +671,10 @@ ngx-siema-slide {
     background-size: cover;
     background-position: center;
     background-color: var(--ash-black);
-    padding: 20px 0;
+    height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .end-upfold-container {
@@ -658,15 +683,18 @@ ngx-siema-slide {
     .subject {
         color: var(--teal-green);
         letter-spacing: 1px;
-        width: 60%;
+        width: 90%;
         overflow: hidden;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         text-align: center;
         padding: 10px 20px;
         border-radius: 40px;
         position: relative;
         z-index: 0;
         margin: 0 auto 20px;
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 400;
 
         &::before {
@@ -782,3 +810,105 @@ ngx-siema-slide {
         }
     }
 }
+
+.answers-report-container {
+    background-color: var(--ash-black);
+    height: 50vh;
+}
+
+.answers-report {
+    background-color: white;
+    border-top-right-radius: 30px;
+    border-top-left-radius: 30px;
+    height: 100%;
+    padding: 10px 0 20px;
+    position: relative;
+
+    ul {
+        list-style: none;
+        width: 100%;
+        padding: 0 5%;
+        margin: 0 auto;
+    }
+
+    li {
+        border: 1px solid #cecece;
+        border-radius: 5px;
+        margin: 15px auto;
+
+        &.correct {
+            .count {
+                color: var(--green);
+            }
+        }
+
+        &.wrong {
+            .count {
+                color: var(--danger-dark);
+            }
+        }
+
+        &.skipped {
+            .count {
+                color: rgba(orange, 0.8);
+            }
+        }
+    }
+
+    .content {
+        display: flex;
+        width: 100%;
+        height: 40px;
+        align-items: center;
+        padding: 0 5%;
+        justify-content: space-between;
+    }
+
+    label {
+        font-size: 14px;
+        color: var(--dark-grey);
+        font-weight: 500;
+    }
+
+    .count {
+        font-weight: 600;
+        font-size: 16px;
+        margin-left: auto;
+
+        span {
+            font-size: 13px;
+        }
+    }
+
+    .icon {
+        width: 12px;
+        height: 12px;
+        fill: var(--light-grey);
+        transform: rotate(-45deg);
+    }
+
+    .answer-action-buttons {
+        position: absolute;
+        width: 100%;
+        bottom: 20px;
+        left: 0;
+        padding: 0 5%;
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+
+        button {
+            width: 48%;
+            border: 0px;
+            background-color: var(--light-grey);
+            color: white;
+            font-size: 14px;
+            height: 40px;
+            border-radius: 5px;
+
+            &:last-child {
+                background-color: var(--teal-green);
+            }
+        }
+    }
+}

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

@@ -27,6 +27,7 @@ export class QuizComponent implements OnInit {
 
     quizSegment: string = 'START_PAGE';
     showQuestionList: boolean = false;
+    reportListState: string = '';
 
     selectedQuestion: any;
 
@@ -168,4 +169,34 @@ export class QuizComponent implements OnInit {
         }).length;
     }
 
+    getSortedQuestionList(type: string) {
+        this.reportListState = type;
+        this.selectedQuestion = null;
+
+        if (type === 'correct') {
+            return this.questionList.sort((a,b) => {
+                let exp1 = (a.correctAnswer === a.userAnswer);
+                let exp2 = (b.correctAnswer === b.userAnswer);
+                return  (exp1 === exp2) ? 0 : exp1 ? -1: 1;
+            });
+        }
+
+        if (type === 'wrong') {
+            return this.questionList.sort((a,b) => {
+                let exp1 = (a.correctAnswer !== a.userAnswer);
+                let exp2 = (b.correctAnswer !== b.userAnswer);
+                return  (exp1 === exp2) ? 0 : exp1 ? -1: 1;
+            });
+        }
+
+        if (type === 'skipped') {
+            return this.questionList.sort((a,b) => {
+                let exp1 = (a.userAnswer === 0);
+                let exp2 = (b.userAnswer === 0);
+                return  (exp1 === exp2) ? 0 : exp1 ? -1: 1;
+            });
+        }
+
+    }
+
 }