Test End page completed

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

@@ -1 +1,24 @@
-<p>end works!</p>
+<section class="page-container full-bg" color="ash-black">
+
+    <div class="container">
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+
+        <h2> You have completed the question paper </h2>
+
+
+        <div class="count-holder">
+            <div class="count"> <span> 20 </span> / 25 </div>
+
+            <svg width="100" height="100" viewBox="0 0 100 100">
+                <circle cx="50" cy="50" r="48.5" fill="none" stroke="#cecece" stroke-width="3" />
+                <circle cx="50" cy="50" r="48.5" fill="none" stroke-width="3"
+                stroke-dasharray="307" stroke-dashoffset="30.7" id="progress"/>
+            </svg>
+        </div>
+
+        <p> Questions attended </p>
+    </div>
+
+    <button class="home-button" (click)="back()"> DONE </button>
+
+</section>

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

@@ -0,0 +1,80 @@
+.page-container {
+    padding-bottom: 0;
+    text-align: center;
+}
+
+.container {
+    width: 80%;
+    margin: 25vh auto 0;
+
+    .icon {
+        width: 60px;
+        height: 60px;
+        fill: var(--green);
+        display: block;
+        margin: 20px auto;
+        background-color: white;
+        border-radius: 50%;
+    }
+
+    h2 {
+        color: white;
+        font-size: 20px;
+        line-height: 1.5;
+        margin: 10px auto 50px;
+        font-weight: 400;
+    }
+
+    p {
+        font-size: 14px;
+        color: var(--light-grey);
+        margin: 10px auto;
+    }
+
+    .count-holder {
+        width: 100px;
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--light-grey);
+        margin: 10px auto;
+        font-size: 20px;
+        position: relative;
+        overflow: visible;
+
+        span {
+            color: var(--teal-green);
+        }
+
+        .count {
+            max-width: 90%;
+        }
+
+        svg {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #progress {
+            stroke: var(--teal-green);
+        }
+    }
+}
+
+.home-button {
+    position: fixed;
+    bottom: 0;
+    z-index: 1;
+    left: 0;
+    background-color: var(--teal-green);
+    color: white;
+    font-size: 14px;
+    height: 50px;
+    border: 0px;
+    width: 100%;
+    border-radius: 0px;
+}

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

@@ -1,15 +1,22 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 
 @Component({
-  selector: 'app-end',
-  templateUrl: './end.component.html',
-  styleUrls: ['./end.component.scss']
+	selector: 'app-end',
+	templateUrl: './end.component.html',
+	styleUrls: ['./end.component.scss']
 })
 export class EndComponent implements OnInit {
 
-  constructor() { }
+	constructor(
+		private location: Location
+	) { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
+
+    back() {
+        this.location.back();
+    }
 
 }

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

@@ -1,4 +1,5 @@
 <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" (testEvents)="getTestPageEvents($event)" *ngIf="testStatus === 'PROGRESS'"></app-question-sheet>
+    <app-end *ngIf="testStatus === 'END'"></app-end>
 </section>