Question DS connected to start page + partial commit for question sheet page

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

@@ -1 +1,14 @@
-<p>question-sheet works!</p>
+<section class="page-container">
+    <header class="main-header">
+        <div class="counter">
+            <span> {{ answers.length }}</span>/{{ questionCount }}
+        </div>
+
+        <div class="duration">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/information.svg"></svg-icon>
+            {{ timeCounter.hours }} : {{ timeCounter.minutes }} : {{ timeCounter.seconds }}
+        </div>
+
+        <button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/information.svg"></svg-icon> </button>
+    </header>
+</section>

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

@@ -0,0 +1,52 @@
+.page-container {
+    padding-bottom: 0;
+}
+
+.main-header {
+    display: flex;
+    width: 100%;
+    height: 50px;
+    background-color: var(--ash-black);
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5%;
+
+    .counter {
+        font-size: 14px;
+        color: var(--light-grey);
+        width: 50px;
+
+        span {
+            color: var(--teal-green);
+        }
+    }
+
+    button {
+        width: 50px;
+        height: 50px;
+        text-align: right;
+        background-color: transparent;
+        border: 0px;
+
+        .icon {
+            width: 18px;
+            height: 18px;
+            fill: var(--light-grey);
+        }
+    }
+
+    .duration {
+        color: var(--light-grey);
+        width: calc(100% - 100px);
+        font-size: 18px;
+        font-weight: 500;
+        letter-spacing: 1px;
+        text-align: center;
+
+        .icon {
+            width: 14px;
+            height: 14px;
+            fill: var(--light-grey);
+        }
+    }
+}

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

@@ -1,15 +1,31 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-question-sheet',
-  templateUrl: './question-sheet.component.html',
-  styleUrls: ['./question-sheet.component.scss']
+	selector: 'app-question-sheet',
+	templateUrl: './question-sheet.component.html',
+	styleUrls: ['./question-sheet.component.scss']
 })
 export class QuestionSheetComponent implements OnInit {
+    @Input() testData: any;
+    answers = [];
+    questionCount = 0;
+    timeCounter = {
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+    };
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+        this.timeCounter.hours = Number((this.testData.durationInMinutes / 60).toFixed(0));
+        this.timeCounter.minutes = Number((((this.testData.durationInMinutes / 60) - this.timeCounter.hours) * 60).toFixed(0));
+
+        for (let i = 0; i < this.testData.categoryList.length; i += 1) {
+            for (let j = 0; j < this.testData.categoryList[i].questions.length; j += 1) {
+                this.questionCount += 1;
+            }
+        }
+	}
 
 }

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

@@ -1,4 +1,4 @@
-<section class="page-container">
+<section class="page-container" *ngIf="testData">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -7,10 +7,10 @@
 
     <div class="container">
         <section class="subject-details">
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/beaker.svg"></svg-icon>
-            <h2> CHEMISTRY </h2>
-            <h4> PREPERATORY EXAM </h4>
-            <p> Total Marks: 100 </p>
+            <svg-icon [applyClass]="true" class="icon" src="{{ testData.iconSrc }}"></svg-icon>
+            <h2> {{ testData.name }} </h2>
+            <h4> {{ testData.type }} </h4>
+            <p> Total Marks: {{ testData.totalMarks }} </p>
 
             <div class="timer">
                 <p> Exam Start in: </p>

src/app/tabs/courses/test/start/start.component.scss

@@ -75,7 +75,7 @@
         .count {
             font-size: 30px;
             font-weight: 500;
-            color: var(--green);
+            color: var(--danger-dark);
         }
     }
 
@@ -89,6 +89,16 @@
         width: 150px;
         display: block;
         margin: 20px auto 0;
+        animation: ripple 1.3s infinite;
+
+        @keyframes ripple {
+            50% {
+                box-shadow: 0px 0px 1px 20px transparent;
+            }
+            0% {
+                box-shadow: 0px 0px 1px 0px var(--teal);
+            }
+        }
     }
 }
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input} from '@angular/core';
 import { Location } from '@angular/common';
 
 @Component({
@@ -12,6 +12,8 @@ export class StartComponent implements OnInit {
     showRules: boolean = false;
     @Output() startPageEvent = new EventEmitter();
 
+    @Input() testData: any;
+
 	constructor(
         private location: Location
     ) { }

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

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

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

@@ -6,7 +6,76 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./test.component.scss']
 })
 export class TestComponent implements OnInit {
-    testStatus: string = 'START';
+    testStatus: string = 'PROGRESS';
+
+    testData = {
+        name: 'CHEMISTRY',
+        code: 'CHEM',
+        iconSrc: 'assets/custom-icons/beaker.svg',
+        totalMarks: 100,
+        durationInMinutes: 200,
+        startTime: '',
+        rules: '',
+        type: 'PREPERATORY EXAM',
+        categoryList : [{
+            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'
+            }]
+        }]
+    };
+
 
 	constructor() { }