Quiz UI softcoding completed

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

@@ -1,4 +1,4 @@
-<div class="page">
+<div class="page" *ngIf="questionList.length > 0">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -12,7 +12,7 @@
     <section class="question-status">
         <div class="container">
             <div class="question-number correct" *ngFor="let question of questionList; let i = index"
-            [ngClass]="{'current': selectedQuestionId && selectedQuestionId === question.id,
+            [ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id,
             'correct' : question.userAnswer === question.correctAnswer,
             'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer}">
                 <span>
@@ -48,7 +48,7 @@
                 [ngClass]="{'correct' : question.userAnswer === question.correctAnswer && question.userAnswer === option.id,
                 'wrong': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.userAnswer === option.id,
                 'show-correct': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.correctAnswer === option.id }"
-                (click)="question.userAnswer = option.id;">
+                (click)="question.userAnswer = option.id">
                     <label> {{ j + 1 }}. {{ option.text }} </label>
                     <div class="icon-holder">
                         <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
@@ -59,6 +59,12 @@
         </ngx-siema-slide>
     </ngx-siema>
 
-    <button class="next-button" (click)="next()"> Next </button>
+    <div class="action-buttons">
+        <button class="prev-button" *ngIf="selectedQuestion.id !== questionList[0].id" (click)="prev()"> Previous </button>
+        <button class="next-button" (click)="next()">
+            <span *ngIf="selectedQuestion.userAnswer !== 0"> Next </span>
+            <span *ngIf="selectedQuestion.userAnswer === 0"> Skip </span>
+        </button>
+    </div>
 
 </div>

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

@@ -2,6 +2,7 @@
     background-color: var(--black);
     height: 100vh;
     overflow: auto;
+    padding-bottom: 60px;
 }
 
 .nav-header {
@@ -311,18 +312,36 @@ ngx-siema-slide {
     }
 }
 
-.next-button {
-    width: 100px;
-    height: 50px;
-    border-radius: 30px;
-    background-color: var(--teal-green);
-    color: white;
-    font-size: 14px;
-    border: 0px;
-    display: block;
-    position: sticky;
-    position: -webkit-sticky;
-    bottom: 20px;
-    margin: 10px auto 40px;
-    box-shadow: 0px 0px 10px var(--teal-green);
+.action-buttons {
+    display: flex;
+    width: 100%;
+    position: fixed;
+    align-items: stretch;
+    bottom: 0;
+    z-index: 1;
+    background-color: var(--ash-black);
+    padding: 10px;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+    overflow: hidden;
+
+    button {
+        width: 48%;
+        display: block;
+        border-radius: 7px;
+        border: 0px;
+        height: 40px;
+        background-color: transparent;
+
+        &.next-button {
+            background-color: var(--teal);
+            color: white;
+            margin-left: auto;
+        }
+
+        &.prev-button {
+            border: 2px solid var(--teal);
+            color: var(--teal);
+        }
+    }
 }

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

@@ -25,7 +25,7 @@ export class QuizComponent implements OnInit {
 		},
 	};
 
-    selectedQuestionId: number;
+    selectedQuestion: any;
 
     questionList = [{
         id: 1,
@@ -101,19 +101,27 @@ export class QuizComponent implements OnInit {
         }]
     }];
 
+
 	constructor(
         private location: Location,
         private ngxSiemaService: NgxSiemaService
     ) { }
 
 	ngOnInit(): void {
-        this.selectedQuestionId = this.questionList[0].id;
+        this.selectedQuestion = this.questionList[0];
 	}
 
     next() {
         this.ngxSiemaService.next(1);
         this.ngxSiemaService.currentSlide().subscribe((index) => {
-            this.selectedQuestionId = this.questionList[index.currentSlide].id;
+            this.selectedQuestion = this.questionList[index.currentSlide];
+        }).unsubscribe();
+    }
+
+    prev() {
+        this.ngxSiemaService.prev(1);
+        this.ngxSiemaService.currentSlide().subscribe((index) => {
+            this.selectedQuestion = this.questionList[index.currentSlide];
         }).unsubscribe();
     }