Test UI connection with data

src/app/tabs/courses/test/question-sheet/question-sheet.component.html

@@ -5,7 +5,7 @@
         </div>
 
         <div class="duration">
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/information.svg"></svg-icon>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/clock.svg"></svg-icon>
             {{ timeCounter.hours }} : {{ timeCounter.minutes }} : {{ timeCounter.seconds }}
         </div>
 
@@ -21,4 +21,17 @@
             <app-question [question]="question" [index]="j + 1"></app-question>
         </li>
     </ul>
+
+    <section class="acknowledgement">
+        <div class="container" (click)="showFinishTest = !showFinishTest">
+            <div class="checkbox" [ngClass]="{'active' : showFinishTest }">
+                <span> &#10003; </span>
+            </div>
+
+            <p> Yes, I've finished the question paper and I would like to submit. </p>
+        </div>
+
+        <button [ngClass]="{'inactive' : !showFinishTest }" (click)="endTest()"> FINISHED </button>
+
+    </section>
 </section>

src/app/tabs/courses/test/question-sheet/question-sheet.component.scss

@@ -42,7 +42,7 @@
     .duration {
         color: var(--light-grey);
         width: calc(100% - 100px);
-        font-size: 18px;
+        font-size: 20px;
         font-weight: 500;
         letter-spacing: 1px;
         text-align: center;
@@ -50,6 +50,7 @@
         .icon {
             width: 14px;
             height: 14px;
+            margin-right: 5px;
             fill: var(--light-grey);
         }
     }
@@ -58,6 +59,8 @@
 .category-list {
     list-style: none;
     width: 100%;
+    position: relative;
+    z-index: 0;
 
     header {
         background-color: var(--dark-grey);
@@ -79,3 +82,62 @@
         }
     }
 }
+
+.acknowledgement {
+    background-color: var(--dark-grey);
+    color: white;
+    padding: 15px 5%;
+
+    .container {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: flex-start;
+    }
+
+    .checkbox {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--light-grey);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: white;
+        border-radius: 3px;
+        transition: background-color 0.2s, border-color 0.2s;
+
+        &.active {
+            background-color: var(--teal-green);
+            color: white;
+            border-color: var(--teal-green);
+        }
+
+        span {
+            font-size: 12px;
+        }
+    }
+
+    p {
+        width: calc(100% - 30px);
+        font-size: 14px;
+        line-height: 1.5;
+    }
+
+    button {
+        width: 100%;
+        display: block;
+        border-radius: 5px;
+        background-color: var(--teal-green);
+        font-size: 14px;
+        height: 40px;
+        color: white;
+        margin: 10px auto 0;
+        border: 0px;
+        transition: background-color 0.3s;
+
+        &.inactive {
+            pointer-events: none;
+            background-color: var(--light-grey);
+        }
+    }
+}

src/app/tabs/courses/test/question-sheet/question-sheet.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
 	selector: 'app-question-sheet',
@@ -7,12 +7,14 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class QuestionSheetComponent implements OnInit {
     @Input() testData: any;
-    questionCount = 0;    
+    questionCount = 0;
     timeCounter = {
         hours: 0,
         minutes: 0,
         seconds: 0
     };
+    showFinishTest: boolean = false;
+    @Output() testEvents = new EventEmitter();
 
 	constructor() { }
 
@@ -27,4 +29,8 @@ export class QuestionSheetComponent implements OnInit {
         }
 	}
 
+    endTest() {
+        this.testEvents.emit('end-test');
+    }
+
 }

src/app/tabs/courses/test/question-sheet/question/question.component.html

@@ -1,6 +1,6 @@
 <section class="container" [ngClass]="{'active' : showDetails }">
     <section class="question-text" (click)="showDetails = !showDetails">
-        <span class="index"> {{ index }} </span>
+        <span class="index" [ngClass]="{'active' : selectedAnswer || textAnswer }"> {{ index }} </span>
         <p> {{ question.heading }} </p>
         <button [ngClass]="{'active' : showDetails }"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon> </button>
     </section>
@@ -9,7 +9,7 @@
         <section class="text-input" *ngIf="question.type === 'TEXT'">
             <label> Answer : </label>
             <textarea [(ngModel)]="textAnswer"></textarea>
-            <button class="submit-button" [ngClass]="{'inactive' : !textAnswer }"> SUBMIT </button>
+            <button class="submit-button" (click)="showDetails = false" [ngClass]="{'inactive' : !textAnswer }"> SUBMIT </button>
         </section>
 
         <section class="single-select" *ngIf="question.type === 'SINGLE_SELECT'">
@@ -26,7 +26,7 @@
                 </li>
             </ol>
 
-            <button class="submit-button" [ngClass]="{'inactive' : selectedAnswer === null }"> SUBMIT </button>
+            <button class="submit-button" (click)="showDetails = false" [ngClass]="{'inactive' : selectedAnswer === null }"> SUBMIT </button>
         </section>
 
     </div>

src/app/tabs/courses/test/question-sheet/question/question.component.scss

@@ -34,6 +34,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: background-color 0.3s;
+
+        &.active {
+            background-color: var(--teal-green);
+        }
     }
 
     p {
@@ -91,6 +96,7 @@
         transition: box-shadow 0.3s, background-color 0.3s;
 
         &.inactive {
+            pointer-events: none;
             box-shadow: 0px 0px 0px transparent;
             background-color: var(--light-grey);
         }

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

@@ -1,4 +1,4 @@
 <section class="page-container full-bg" color="black">
     <app-start *ngIf="testStatus === 'START'" [testData]="testData" (startPageEvent)="getStartPageEvents($event)"></app-start>
-    <app-question-sheet [testData]="testData" *ngIf="testStatus === 'PROGRESS'"></app-question-sheet>
+    <app-question-sheet [testData]="testData" (testEvents)="getTestPageEvents($event)" *ngIf="testStatus === 'PROGRESS'"></app-question-sheet>
 </section>

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

@@ -73,6 +73,62 @@ export class TestComponent implements OnInit {
                 heading: 'Explain How Molases is Synthesized',
                 type: 'TEXT'
             }]
+        }, {
+            heading: '1 Mark Questions',
+            unitValue: 1,
+            questions: [{
+                heading: 'What is Chemistry?',
+                type: 'TEXT',
+            }, {
+                heading: 'What are Acids & Bases?',
+                type: 'TEXT',
+            }, {
+                heading: 'Who is father of Modern Chemistry?',
+                type: 'SINGLE_SELECT',
+                options: [{
+                    id: 1,
+                    name: 'Charles Babbage'
+                }, {
+                    id: 2,
+                    name: 'Antoine Lavoisier',
+                }, {
+                    id: 3,
+                    name: 'Dmitri Mendeleev',
+                }, {
+                    id: 4,
+                    name: 'NOTA'
+                }]
+            }]
+        }, {
+            heading: '5 Mark Questions',
+            unitValue: 5,
+            questions: [{
+                heading: 'Match the Following People with their related work',
+                type: 'MATCH_THE_FOLLOWING',
+                leftGroup: [{
+                    id: 1,
+                    name: 'Dmitri Mendeleev',
+                }, {
+                    id: 2,
+                    name: 'Madam curie'
+                }, {
+                    id: 3,
+                    name: 'Carl Alexander Neuberg'
+                }],
+                rightGroup: [{
+                    id: 1,
+                    name: 'Radium'
+                }, {
+                    id: 2,
+                    name: 'Bio Chemistry'
+                }, {
+                    id: 3,
+                    name: 'Periodic Table'
+                }]
+            }, {
+                heading: 'Explain How Molases is Synthesized',
+                type: 'TEXT'
+            }]
         }]
     };
 
@@ -88,4 +144,10 @@ export class TestComponent implements OnInit {
         }
     }
 
+    getTestPageEvents(e: string) {
+        if (e === 'end-test') {
+            this.testStatus = 'END';
+        }
+    }
+
 }

src/assets/custom-icons/clock.svg

@@ -0,0 +1 @@
+<svg height="384pt" viewBox="0 0 384 384" width="384pt" xmlns="http://www.w3.org/2000/svg"><path d="m343.59375 101.039062c-7.953125 3.847657-11.28125 13.417969-7.433594 21.367188 10.511719 21.714844 15.839844 45.121094 15.839844 69.59375 0 88.222656-71.777344 160-160 160s-160-71.777344-160-160 71.777344-160 160-160c36.558594 0 70.902344 11.9375 99.328125 34.519531 6.894531 5.503907 16.976563 4.351563 22.480469-2.566406 5.503906-6.914063 4.351562-16.984375-2.570313-22.480469-33.652343-26.746094-76-41.472656-119.238281-41.472656-105.863281 0-192 86.136719-192 192s86.136719 192 192 192 192-86.136719 192-192c0-29.335938-6.40625-57.449219-19.039062-83.527344-3.839844-7.96875-13.441407-11.289062-21.367188-7.433594zm0 0"/><path d="m192 64c-8.832031 0-16 7.167969-16 16v112c0 8.832031 7.167969 16 16 16h80c8.832031 0 16-7.167969 16-16s-7.167969-16-16-16h-64v-96c0-8.832031-7.167969-16-16-16zm0 0"/></svg>