From 3987028a3c6fc4948c5b7bd6b99e757fd2e9962e Mon Sep 17 00:00:00 2001 From: kj1352 Date: Mon, 18 Jan 2021 10:01:11 +0530 Subject: [PATCH] Partial commit Quiz UI --- src/app/quiz/mcq/mcq.component.html | 8 ++- src/app/quiz/mcq/mcq.component.scss | 8 +++ src/app/quiz/mcq/mcq.component.ts | 18 ++++-- src/app/quiz/quiz.module.ts | 4 +- src/app/quiz/quiz.page.html | 31 ++++++++++ src/app/quiz/quiz.page.scss | 89 +++++++++++++++++++++++++++++ src/app/quiz/quiz.page.ts | 56 ++++++++++++++++-- 7 files changed, 198 insertions(+), 16 deletions(-) diff --git a/src/app/quiz/mcq/mcq.component.html b/src/app/quiz/mcq/mcq.component.html index fa2982b..48cf05e 100644 --- a/src/app/quiz/mcq/mcq.component.html +++ b/src/app/quiz/mcq/mcq.component.html @@ -1,3 +1,5 @@ -

- mcq works! -

+
+

{{ text }}

+ + +
\ No newline at end of file diff --git a/src/app/quiz/mcq/mcq.component.scss b/src/app/quiz/mcq/mcq.component.scss index e69de29..45853f4 100644 --- a/src/app/quiz/mcq/mcq.component.scss +++ b/src/app/quiz/mcq/mcq.component.scss @@ -0,0 +1,8 @@ +@import '../../colors'; + +h3 { + color: white; + font-weight: 500; + letter-spacing: 0.5px; + line-height: 1.5; +} \ No newline at end of file diff --git a/src/app/quiz/mcq/mcq.component.ts b/src/app/quiz/mcq/mcq.component.ts index de1f0b2..6b770a0 100644 --- a/src/app/quiz/mcq/mcq.component.ts +++ b/src/app/quiz/mcq/mcq.component.ts @@ -1,14 +1,20 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; @Component({ - selector: 'app-mcq', - templateUrl: './mcq.component.html', - styleUrls: ['./mcq.component.scss'], + selector: 'app-mcq', + templateUrl: './mcq.component.html', + styleUrls: ['./mcq.component.scss'], }) export class McqComponent implements OnInit { + @Input() text: string = ''; + @Input() choice: Array<{ + value: string, + text: string, + }>; + @Input() correctAnswer: number - constructor() { } + constructor() { } - ngOnInit() {} + ngOnInit() {} } diff --git a/src/app/quiz/quiz.module.ts b/src/app/quiz/quiz.module.ts index a05e492..3dcf297 100644 --- a/src/app/quiz/quiz.module.ts +++ b/src/app/quiz/quiz.module.ts @@ -7,6 +7,8 @@ import { IonicModule } from '@ionic/angular'; import { QuizPageRoutingModule } from './quiz-routing.module'; import { QuizPage } from './quiz.page'; +import { McqComponent } from './mcq/mcq.component'; +import { SwipeCardsComponent } from './swipe-cards/swipe-cards.component'; @NgModule({ imports: [ @@ -15,6 +17,6 @@ import { QuizPage } from './quiz.page'; IonicModule, QuizPageRoutingModule ], - declarations: [QuizPage] + declarations: [QuizPage, McqComponent, SwipeCardsComponent] }) export class QuizPageModule {} diff --git a/src/app/quiz/quiz.page.html b/src/app/quiz/quiz.page.html index 2c76488..810a06f 100644 --- a/src/app/quiz/quiz.page.html +++ b/src/app/quiz/quiz.page.html @@ -1,3 +1,34 @@ + + + +
+

{{ secondsPerQuestion }}

+ + +
+
+ +
+
+

Question {{ selectedQuestion + 1 }}/{{ questions.length }}

+
+ +
    + + +
  • + +
    • +
  • + +
    • +     +     +
+ +
diff --git a/src/app/quiz/quiz.page.scss b/src/app/quiz/quiz.page.scss index e69de29..2d52063 100644 --- a/src/app/quiz/quiz.page.scss +++ b/src/app/quiz/quiz.page.scss @@ -0,0 +1,89 @@ +@import '../colors'; + +.dotted-bg { + position: fixed; + left: 0; + bottom: 0; + z-index: 0; + width: 100%; + object-fit: cover; + height: 10vh; + background-repeat: no-repeat; + background-position: top; +} + +.visual-timer { + display: flex; + width: 80%; + margin: 40px auto; + position: relative; + background-color: transparent; + border: 4px solid rgba($blue-grey, 0.3); + border-radius: 30px; + height: 45px; + align-items: center; + justify-content: center; + z-index: 0; + overflow: hidden; + + p { + flex-grow: 1; + margin: 0; + text-align: center; + color: white; + font-size: 1rem; + font-weight: 500; + letter-spacing: 1px; + position: relative; + z-index: 1; + } + + ion-icon { + position: absolute; + right: 10px; + top: 10px; + font-size: 1rem; + color: white; + z-index: 1; + } + + .progress { + position: absolute; + left: 0; + top: 0; + border-radius: 30px; + background: linear-gradient(90deg, lighten($brand-red, 5%) 5%, lighten($dark-blue, 20%) 80%); + width: 100%; + height: 100%; + transition: width 1s linear; + } +} + +.container { + width: 80%; + margin: 40px auto; +} + +.question-counter { + border-bottom: 2px dotted rgba($blue-grey, 0.3); + padding-bottom: 10px; + + h2 { + color: $blue-grey; + font-size: 1.3rem; + letter-spacing: 1px; + font-weight: 700; + margin: 0; + + span { + font-size: 1.1rem; + font-weight: 300; + } + } +} + +.questions { + list-style: none; + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/src/app/quiz/quiz.page.ts b/src/app/quiz/quiz.page.ts index e9ef63d..6b9af02 100644 --- a/src/app/quiz/quiz.page.ts +++ b/src/app/quiz/quiz.page.ts @@ -1,15 +1,59 @@ import { Component, OnInit } from '@angular/core'; +import * as faker from 'faker'; @Component({ - selector: 'app-quiz', - templateUrl: './quiz.page.html', - styleUrls: ['./quiz.page.scss'], + selector: 'app-quiz', + templateUrl: './quiz.page.html', + styleUrls: ['./quiz.page.scss'], }) export class QuizPage implements OnInit { + secondsPerQuestion: number = 30; + selectedQuestion: number = 0; - constructor() { } + questions: Array<{ + type: 'MCQ' | 'CARD', + question: string, + choice?: Array<{ + value: string, + text: string, + }>, + correctAnswer?: string, + secondsAllotted?: number + }>; - ngOnInit() { - } + constructor() { } + + ngOnInit() { + + let timer = setInterval(() => { + if (this.secondsPerQuestion === 0) { + clearInterval(timer); + } else { + this.secondsPerQuestion -= 1; + } + }, 1000); + + this.questions = [{ + type: 'MCQ', + question: faker.lorem.sentence(), + choice: [{ + value: 'A', + text: 'Choice 1' + }, { + value: 'B', + text: 'Choice 1' + }, { + value: 'B', + text: 'Choice 1' + }], + correctAnswer: 'A', + secondsAllotted: 50 + }, { + type: 'CARD', + question: faker.lorem.sentence(), + secondsAllotted: 50 + }]; + + } }