Test page init + start page UI + connection to test page

src/app/app-routing.module.ts

@@ -13,6 +13,7 @@ import { QuizComponent } from './tabs/courses/quiz/quiz.component';
 import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component';
 import { ChatPageComponent } from './chat-page/chat-page.component';
 import { SettingsComponent } from './settings/settings.component';
+import { TestComponent } from './tabs/courses/test/test.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
@@ -24,6 +25,7 @@ const routes: Routes = [
     { component: VideoChapterComponent, path: 'video-chapter/:heading' },
     { component: VideoNotesComponent, path: 'video-notes/:heading' },
     { component: QuizComponent, path: 'quiz' },
+    { component: TestComponent, path: 'test'},
     { component: CalendarComponent, path: 'calendar' },
     { component: AttendanceComponent, path: 'attendance'},
     { component: ForumPageComponent, path: 'forum'},

src/app/app.module.ts

@@ -8,6 +8,9 @@ import { NgxSiemaModule } from 'ngx-siema';
 import { AppRoutingModule } from './app-routing.module';
 import { FormsModule } from '@angular/forms';
 
+// Import services
+import { DemoService } from './services/demo.service';
+
 // Component imports
 import { AppComponent } from './app.component';
 import { WelcomeComponent } from './welcome/welcome.component';
@@ -33,9 +36,11 @@ import { ChatPageComponent } from './chat-page/chat-page.component';
 import { ChatWindowComponent } from './chat-page/chat-window/chat-window.component';
 import { SettingsComponent } from './settings/settings.component';
 import { ClassCardListComponent } from './reusable-components/class-card-list/class-card-list.component';
-
-// Import services
-import { DemoService } from './services/demo.service';
+import { TestComponent } from './tabs/courses/test/test.component';
+import { StartComponent } from './tabs/courses/test/start/start.component';
+import { EndComponent } from './tabs/courses/test/end/end.component';
+import { QuestionSheetComponent } from './tabs/courses/test/question-sheet/question-sheet.component';
+import { QuestionComponent } from './tabs/courses/test/question-sheet/question/question.component';
 
 @NgModule({
 	declarations: [
@@ -61,6 +66,11 @@ import { DemoService } from './services/demo.service';
 		ChatWindowComponent,
 		SettingsComponent,
 		ClassCardListComponent,
+		TestComponent,
+		StartComponent,
+		EndComponent,
+		QuestionSheetComponent,
+		QuestionComponent,
 	],
 	imports: [
 		BrowserModule,

src/app/tabs/courses/course-details/course-details.component.html

@@ -31,7 +31,7 @@
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
                     </p>
-                    <button> Take the test now! </button>
+                    <button [routerLink]="'/test'"> Take the test now! </button>
                 </section>
             </section>
 

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

@@ -0,0 +1 @@
+<p>end works!</p>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EndComponent } from './end.component';
+
+describe('EndComponent', () => {
+  let component: EndComponent;
+  let fixture: ComponentFixture<EndComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EndComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EndComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -0,0 +1 @@
+<p>question-sheet works!</p>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionSheetComponent } from './question-sheet.component';
+
+describe('QuestionSheetComponent', () => {
+  let component: QuestionSheetComponent;
+  let fixture: ComponentFixture<QuestionSheetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QuestionSheetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestionSheetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-question-sheet',
+  templateUrl: './question-sheet.component.html',
+  styleUrls: ['./question-sheet.component.scss']
+})
+export class QuestionSheetComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1 @@
+<p>question works!</p>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionComponent } from './question.component';
+
+describe('QuestionComponent', () => {
+  let component: QuestionComponent;
+  let fixture: ComponentFixture<QuestionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QuestionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuestionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-question',
+  templateUrl: './question.component.html',
+  styleUrls: ['./question.component.scss']
+})
+export class QuestionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,80 @@
+<section class="page-container">
+    <header class="nav-header">
+        <button class="close-button" (click)="back()">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+        </button>
+    </header>
+
+    <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>
+
+            <div class="timer">
+                <p> Exam Start in: </p>
+                <div class="count"> 00:00:0{{ secondsCounter }}  </div>
+            </div>
+            <button class="start-button" *ngIf="secondsCounter === 0"
+            (click)="startTest()">
+                START
+            </button>
+        </section>
+    </div>
+
+    <button class="rules-button" (click)="showRules = true">
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/information.svg"></svg-icon>
+        Examination Rules &amp; Technologies
+    </button>
+
+
+    <section class="rules" [ngClass]="{'active' : showRules }">
+        <header>
+            <h5>
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/information.svg"></svg-icon>
+                Information
+            </h5>
+
+            <button (click)="showRules = false">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+            </button>
+        </header>
+
+        <h2> Exam Rules &amp; Technologies </h2>
+
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat voluptate eligendi provident nulla reiciendis. Corporis nihil at incidunt voluptas repellat aliquam beatae minima nam voluptatum, quaerat, ullam dolor sunt repudiandae.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, laboriosam sapiente, ab optio, unde a suscipit expedita consequuntur modi repellendus eligendi obcaecati explicabo repellat voluptatem nihil earum! Quisquam asperiores, nemo!
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias architecto nostrum culpa aliquam vitae pariatur porro voluptatibus quisquam exercitationem sit voluptate tempore atque, natus quod rem voluptatem esse? Nostrum, voluptatibus.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente commodi labore saepe, temporibus cum deserunt voluptate minima dolorem doloremque dolores, libero vel voluptates expedita tempore quos incidunt recusandae dolor explicabo.
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia excepturi, corporis voluptatum illum autem dolore consequuntur cupiditate itaque facilis doloremque, ipsum voluptas perspiciatis quas eius commodi minima labore, omnis natus.
+        </p>
+
+        <h2> List of item to use </h2>
+
+        <ol>
+            <li>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum mollitia harum nisi repellendus possimus fugiat dolores debitis voluptatum. Ullam doloremque nemo porro numquam! Adipisci incidunt vitae consequatur sapiente eius cum.
+            </li>
+            <li>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero voluptatem magnam quidem, autem, dolorem pariatur? Rem libero doloremque ipsa, earum. Tempore aut ex voluptatem accusamus maxime, laudantium, atque harum blanditiis.
+            </li>
+            <li>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa consequatur, eveniet. Expedita, reprehenderit! Exercitationem repudiandae sapiente laboriosam laudantium doloribus velit totam dolorem eos dolores optio, labore blanditiis eveniet, sint maiores!
+            </li>
+        </ol>
+
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, voluptatibus facilis magnam, cum veritatis quis reiciendis unde, porro nihil sed! Quibusdam maxime voluptatum consequuntur neque ipsa incidunt, eos, quidem.
+        </p>
+    </section>
+</section>

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

@@ -0,0 +1,174 @@
+.page-container {
+    padding-bottom: 0;
+    position: relative;
+}
+
+.nav-header {
+    background-color: var(--black);
+}
+
+
+.rules-button {
+    background-color: var(--ash-black);
+    border: 0px;
+    width: 100%;
+    height: 40px;
+    color: var(--teal-green);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+        width: 14px;
+        height: 14px;
+        fill: var(--teal-green);
+        margin-right: 5px;
+    }
+}
+
+.container {
+    height: calc(100vh - 40px - 60px);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.subject-details {
+    text-align: center;
+
+    .icon {
+        width: 60px;
+        height: 60px;
+        display: block;
+        margin: 0 auto;
+    }
+
+    h2 {
+        font-size: 26px;
+        color: white;
+        font-weight: 500;
+        margin: 10px auto;
+    }
+
+    h4 {
+        font-size: 18px;
+        color: var(--teal-green);
+        font-weight: 500;
+        margin: 10px auto;
+    }
+
+    p {
+        margin: 10px auto;
+        font-size: 16px;
+        color: var(--light-grey);
+    }
+
+    .timer {
+        margin: 60px auto 10px;
+
+        p {
+            margin: 0;
+        }
+
+        .count {
+            font-size: 30px;
+            font-weight: 500;
+            color: var(--green);
+        }
+    }
+
+    .start-button {
+        font-size: 18px;
+        height: 45px;
+        border-radius: 30px;
+        background-color: var(--teal-green);
+        border: 0px;
+        color: white;
+        width: 150px;
+        display: block;
+        margin: 20px auto 0;
+    }
+}
+
+.rules {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    max-height: calc(100vh - 100px);
+    width: 100%;
+    background-color: white;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    padding: 0px 7% 30px;
+    overflow: auto;
+    transform: translateY(100vh);
+    transition: transform 0.5s;
+
+    &.active {
+        transform: translateY(0);
+    }
+
+    header {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        position: sticky;
+        position: -webkit-sticky;
+        z-index: 1;
+        top: 0;
+        background-color: white;
+        padding: 30px 0 10px;
+    }
+
+    h5 {
+        font-size: 16px;
+        font-weight: 400;
+        color: var(--dark-grey);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+            width: 15px;
+            height: 15px;
+            margin-right: 5px;
+            margin-top: -5px;
+            fill: var(--dark-grey);
+        }
+    }
+
+    button {
+        width: 30px;
+        height: 30px;
+        background-color: var(--light-grey);
+        border: 0px;
+        color: white;
+        border-radius: 50%;
+
+        .icon {
+            width: 12px;
+            height: 12px;
+            fill: white;
+        }
+    }
+
+    h2 {
+        font-size: 18px;
+        color: var(--ash-black);
+        margin-bottom: 10px;
+    }
+
+    p, li {
+        margin-bottom: 20px;
+        font-size: 16px;
+        color: var(--black);
+        line-height: 1.5;
+    }
+
+    ol {
+        margin-left: 30px;
+    }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StartComponent } from './start.component';
+
+describe('StartComponent', () => {
+  let component: StartComponent;
+  let fixture: ComponentFixture<StartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,37 @@
+import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+	selector: 'app-start',
+	templateUrl: './start.component.html',
+	styleUrls: ['./start.component.scss']
+})
+export class StartComponent implements OnInit {
+    secondsCounter: number = 3;
+    timerInterval: any;
+    showRules: boolean = false;
+    @Output() startPageEvent = new EventEmitter();
+
+	constructor(
+        private location: Location
+    ) { }
+
+	ngOnInit(): void {
+        this.timerInterval = setInterval(() => {
+            if (this.secondsCounter > 0) {
+                this.secondsCounter -= 1;
+            } else {
+                clearInterval(this.timerInterval);
+            }
+        }, 1000);
+	}
+
+    back() {
+        this.location.back();
+    }
+
+    startTest() {
+        this.startPageEvent.emit('start-test');
+    }
+
+}

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

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

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

@@ -0,0 +1,3 @@
+.page-container {
+    padding-bottom: 0;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-test',
+	templateUrl: './test.component.html',
+	styleUrls: ['./test.component.scss']
+})
+export class TestComponent implements OnInit {
+    testStatus: string = 'START';
+
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+    getStartPageEvents(e: string) {
+        if (e === 'start-test') {
+            this.testStatus = 'PROGRESS';
+        }
+    }
+
+}