From 1a9a06612308857e1c4d096d3a6d54b79f920984 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 3 Jul 2020 17:30:11 +0530 Subject: [PATCH] Test page init + start page UI + connection to test page --- src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 16 +- .../course-details.component.html | 2 +- .../tabs/courses/test/end/end.component.html | 1 + .../tabs/courses/test/end/end.component.scss | 0 .../courses/test/end/end.component.spec.ts | 25 +++ .../tabs/courses/test/end/end.component.ts | 15 ++ .../question-sheet.component.html | 1 + .../question-sheet.component.scss | 0 .../question-sheet.component.spec.ts | 25 +++ .../question-sheet.component.ts | 15 ++ .../question/question.component.html | 1 + .../question/question.component.scss | 0 .../question/question.component.spec.ts | 25 +++ .../question/question.component.ts | 15 ++ .../courses/test/start/start.component.html | 80 ++++++++ .../courses/test/start/start.component.scss | 174 ++++++++++++++++++ .../test/start/start.component.spec.ts | 25 +++ .../courses/test/start/start.component.ts | 37 ++++ src/app/tabs/courses/test/test.component.html | 3 + src/app/tabs/courses/test/test.component.scss | 3 + .../tabs/courses/test/test.component.spec.ts | 25 +++ src/app/tabs/courses/test/test.component.ts | 22 +++ 23 files changed, 508 insertions(+), 4 deletions(-) create mode 100644 src/app/tabs/courses/test/end/end.component.html create mode 100644 src/app/tabs/courses/test/end/end.component.scss create mode 100644 src/app/tabs/courses/test/end/end.component.spec.ts create mode 100644 src/app/tabs/courses/test/end/end.component.ts create mode 100644 src/app/tabs/courses/test/question-sheet/question-sheet.component.html create mode 100644 src/app/tabs/courses/test/question-sheet/question-sheet.component.scss create mode 100644 src/app/tabs/courses/test/question-sheet/question-sheet.component.spec.ts create mode 100644 src/app/tabs/courses/test/question-sheet/question-sheet.component.ts create mode 100644 src/app/tabs/courses/test/question-sheet/question/question.component.html create mode 100644 src/app/tabs/courses/test/question-sheet/question/question.component.scss create mode 100644 src/app/tabs/courses/test/question-sheet/question/question.component.spec.ts create mode 100644 src/app/tabs/courses/test/question-sheet/question/question.component.ts create mode 100644 src/app/tabs/courses/test/start/start.component.html create mode 100644 src/app/tabs/courses/test/start/start.component.scss create mode 100644 src/app/tabs/courses/test/start/start.component.spec.ts create mode 100644 src/app/tabs/courses/test/start/start.component.ts create mode 100644 src/app/tabs/courses/test/test.component.html create mode 100644 src/app/tabs/courses/test/test.component.scss create mode 100644 src/app/tabs/courses/test/test.component.spec.ts create mode 100644 src/app/tabs/courses/test/test.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 726f4f1..9e3f80d 100644 --- a/src/app/app-routing.module.ts +++ b/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'}, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c25558b..40bc25a 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/tabs/courses/course-details/course-details.component.html b/src/app/tabs/courses/course-details/course-details.component.html index 6693204..1db35cd 100644 --- a/src/app/tabs/courses/course-details/course-details.component.html +++ b/src/app/tabs/courses/course-details/course-details.component.html @@ -31,7 +31,7 @@

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.

- + diff --git a/src/app/tabs/courses/test/end/end.component.html b/src/app/tabs/courses/test/end/end.component.html new file mode 100644 index 0000000..e6f76d9 --- /dev/null +++ b/src/app/tabs/courses/test/end/end.component.html @@ -0,0 +1 @@ +

end works!

diff --git a/src/app/tabs/courses/test/end/end.component.scss b/src/app/tabs/courses/test/end/end.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/tabs/courses/test/end/end.component.spec.ts b/src/app/tabs/courses/test/end/end.component.spec.ts new file mode 100644 index 0000000..3876bb1 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EndComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EndComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/courses/test/end/end.component.ts b/src/app/tabs/courses/test/end/end.component.ts new file mode 100644 index 0000000..a69eef5 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/tabs/courses/test/question-sheet/question-sheet.component.html b/src/app/tabs/courses/test/question-sheet/question-sheet.component.html new file mode 100644 index 0000000..0c80937 --- /dev/null +++ b/src/app/tabs/courses/test/question-sheet/question-sheet.component.html @@ -0,0 +1 @@ +

question-sheet works!

diff --git a/src/app/tabs/courses/test/question-sheet/question-sheet.component.scss b/src/app/tabs/courses/test/question-sheet/question-sheet.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/tabs/courses/test/question-sheet/question-sheet.component.spec.ts b/src/app/tabs/courses/test/question-sheet/question-sheet.component.spec.ts new file mode 100644 index 0000000..b4944f7 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ QuestionSheetComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(QuestionSheetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/courses/test/question-sheet/question-sheet.component.ts b/src/app/tabs/courses/test/question-sheet/question-sheet.component.ts new file mode 100644 index 0000000..abc3398 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/tabs/courses/test/question-sheet/question/question.component.html b/src/app/tabs/courses/test/question-sheet/question/question.component.html new file mode 100644 index 0000000..92d051f --- /dev/null +++ b/src/app/tabs/courses/test/question-sheet/question/question.component.html @@ -0,0 +1 @@ +

question works!

diff --git a/src/app/tabs/courses/test/question-sheet/question/question.component.scss b/src/app/tabs/courses/test/question-sheet/question/question.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/tabs/courses/test/question-sheet/question/question.component.spec.ts b/src/app/tabs/courses/test/question-sheet/question/question.component.spec.ts new file mode 100644 index 0000000..0a695f5 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ QuestionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(QuestionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/courses/test/question-sheet/question/question.component.ts b/src/app/tabs/courses/test/question-sheet/question/question.component.ts new file mode 100644 index 0000000..556cf51 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/tabs/courses/test/start/start.component.html b/src/app/tabs/courses/test/start/start.component.html new file mode 100644 index 0000000..f3dae45 --- /dev/null +++ b/src/app/tabs/courses/test/start/start.component.html @@ -0,0 +1,80 @@ +
+
+ +
+ +
+
+ +

CHEMISTRY

+

PREPERATORY EXAM

+

Total Marks: 100

+ +
+

Exam Start in:

+
00:00:0{{ secondsCounter }}
+
+ +
+
+ + + + +
+
+
+ + Information +
+ + +
+ +

Exam Rules & Technologies

+ +

+ 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. +

+

+ 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! +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+ +

List of item to use

+ +
    +
  1. + 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. +
    2. +
  2. + 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. +
    3. +
  3. + 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! +
    4. +
+ +

+ 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. +

+
+
diff --git a/src/app/tabs/courses/test/start/start.component.scss b/src/app/tabs/courses/test/start/start.component.scss new file mode 100644 index 0000000..860caa6 --- /dev/null +++ b/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; + } +} diff --git a/src/app/tabs/courses/test/start/start.component.spec.ts b/src/app/tabs/courses/test/start/start.component.spec.ts new file mode 100644 index 0000000..01270a2 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ StartComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/courses/test/start/start.component.ts b/src/app/tabs/courses/test/start/start.component.ts new file mode 100644 index 0000000..a9ff9fe --- /dev/null +++ b/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'); + } + +} diff --git a/src/app/tabs/courses/test/test.component.html b/src/app/tabs/courses/test/test.component.html new file mode 100644 index 0000000..64a780d --- /dev/null +++ b/src/app/tabs/courses/test/test.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/tabs/courses/test/test.component.scss b/src/app/tabs/courses/test/test.component.scss new file mode 100644 index 0000000..a179d46 --- /dev/null +++ b/src/app/tabs/courses/test/test.component.scss @@ -0,0 +1,3 @@ +.page-container { + padding-bottom: 0; +} diff --git a/src/app/tabs/courses/test/test.component.spec.ts b/src/app/tabs/courses/test/test.component.spec.ts new file mode 100644 index 0000000..ef4e38c --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TestComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/courses/test/test.component.ts b/src/app/tabs/courses/test/test.component.ts new file mode 100644 index 0000000..656a7c0 --- /dev/null +++ b/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'; + } + } + +}