From 023f01579150bb7bea84f366f851ad88c976074f Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 3 Jul 2020 22:27:22 +0530 Subject: [PATCH] Test UI connection with data --- .../question-sheet.component.html | 15 ++++- .../question-sheet.component.scss | 64 ++++++++++++++++++- .../question-sheet.component.ts | 10 ++- .../question/question.component.html | 6 +- .../question/question.component.scss | 6 ++ src/app/tabs/courses/test/test.component.html | 2 +- src/app/tabs/courses/test/test.component.ts | 62 ++++++++++++++++++ src/assets/custom-icons/clock.svg | 1 + 8 files changed, 158 insertions(+), 8 deletions(-) create mode 100644 src/assets/custom-icons/clock.svg 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 index 22c7815..0919efb 100644 --- a/src/app/tabs/courses/test/question-sheet/question-sheet.component.html +++ b/src/app/tabs/courses/test/question-sheet/question-sheet.component.html @@ -5,7 +5,7 @@
- + {{ timeCounter.hours }} : {{ timeCounter.minutes }} : {{ timeCounter.seconds }}
@@ -21,4 +21,17 @@ + +
+
+
+ ✓ +
+ +

Yes, I've finished the question paper and I would like to submit.

+
+ + + +
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 index be6c158..90c1a92 100644 --- a/src/app/tabs/courses/test/question-sheet/question-sheet.component.scss +++ b/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); + } + } +} 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 index 745ab3d..7126f5d 100644 --- a/src/app/tabs/courses/test/question-sheet/question-sheet.component.ts +++ b/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'); + } + } 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 index d559143..09063d1 100644 --- a/src/app/tabs/courses/test/question-sheet/question/question.component.html +++ b/src/app/tabs/courses/test/question-sheet/question/question.component.html @@ -1,6 +1,6 @@
- {{ index }} + {{ index }}

{{ question.heading }}

@@ -9,7 +9,7 @@
- +
@@ -26,7 +26,7 @@ - +
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 index e5b8ed9..b2d2a98 100644 --- a/src/app/tabs/courses/test/question-sheet/question/question.component.scss +++ b/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); } diff --git a/src/app/tabs/courses/test/test.component.html b/src/app/tabs/courses/test/test.component.html index 0205d57..44394b7 100644 --- a/src/app/tabs/courses/test/test.component.html +++ b/src/app/tabs/courses/test/test.component.html @@ -1,4 +1,4 @@
- +
diff --git a/src/app/tabs/courses/test/test.component.ts b/src/app/tabs/courses/test/test.component.ts index a0b8462..edf4b93 100644 --- a/src/app/tabs/courses/test/test.component.ts +++ b/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'; + } + } + } diff --git a/src/assets/custom-icons/clock.svg b/src/assets/custom-icons/clock.svg new file mode 100644 index 0000000..1709fac --- /dev/null +++ b/src/assets/custom-icons/clock.svg @@ -0,0 +1 @@ +