diff --git a/package-lock.json b/package-lock.json index 96734ba..39a683d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -201,9 +201,25 @@ } }, "@angular/animations": { - "version": "9.1.9", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.9.tgz", - "integrity": "sha512-qWVi0TxmU6HeXAgEsfpQvFFygh+a0kH2kGe6bWij4XvG6dWfV3xZjlaFwSIYGk+yK4yL0+9+PAXH+ENfxNw+Cw==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.11.tgz", + "integrity": "sha512-VKAExUnEJfo1PDQKagpx2pn+QMZCsPLRiADzTdl4U0VPylK3ALbn4ZNY9UbdwyE2plitz++LkH7sEGGfh+PNrQ==" + }, + "@angular/cdk": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.4.tgz", + "integrity": "sha512-iw2+qHMXHYVC6K/fttHeNHIieSKiTEodVutZoOEcBu9rmRTGbLB26V/CRsfIRmA1RBk+uFYWc6UQZnMC3RdnJQ==", + "requires": { + "parse5": "^5.0.0" + }, + "dependencies": { + "parse5": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", + "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", + "optional": true + } + } }, "@angular/cli": { "version": "9.1.7", diff --git a/package.json b/package.json index edcd798..e518fa7 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "private": true, "dependencies": { - "@angular/animations": "~9.1.1", + "@angular/animations": "^9.1.11", + "@angular/cdk": "^9.2.4", "@angular/common": "~9.1.1", "@angular/compiler": "~9.1.1", "@angular/core": "~9.1.1", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 40bc25a..727adbf 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,7 @@ import { ScrollEventModule } from 'ngx-scroll-event'; import { NgxSiemaModule } from 'ngx-siema'; import { AppRoutingModule } from './app-routing.module'; import { FormsModule } from '@angular/forms'; +import { DragDropModule } from '@angular/cdk/drag-drop'; // Import services import { DemoService } from './services/demo.service'; @@ -78,6 +79,7 @@ import { QuestionComponent } from './tabs/courses/test/question-sheet/question/q HttpClientModule, ScrollEventModule, FormsModule, + DragDropModule, NgxSiemaModule.forRoot(), AngularSvgIconModule.forRoot(), ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) diff --git a/src/app/reusable-components/class-card-list/class-card-list.component.ts b/src/app/reusable-components/class-card-list/class-card-list.component.ts index 595a2b0..35a7add 100644 --- a/src/app/reusable-components/class-card-list/class-card-list.component.ts +++ b/src/app/reusable-components/class-card-list/class-card-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, Output } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-class-card-list', @@ -11,7 +11,7 @@ export class ClassCardListComponent implements OnInit { constructor() { } ngOnInit(): void { - + } } diff --git a/src/app/tabs/courses/quiz/quiz.component.scss b/src/app/tabs/courses/quiz/quiz.component.scss index 7cf671f..2e96e7d 100644 --- a/src/app/tabs/courses/quiz/quiz.component.scss +++ b/src/app/tabs/courses/quiz/quiz.component.scss @@ -1,4 +1,4 @@ -.page-container { +.page-container { padding-bottom: 0; } 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 09063d1..e380680 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 }}

@@ -8,8 +8,8 @@
- - + +
@@ -18,7 +18,7 @@
  1. + (click)="selectedAnswer = i; isAnswered = true">
    @@ -26,7 +26,29 @@
- + +
+ +
+ + +
+
    +
  • + {{ option.name }} +
    • +
+ +
    +
  • + {{ option.name }} +
    • +
+
+ +
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 b2d2a98..e3e414e 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 @@ -2,6 +2,7 @@ background-color: var(--ash-black); padding: 15px; border-bottom: 1px solid var(--dark-grey); + transition: background-color 0.3s; &.active { background-color: white; @@ -184,3 +185,34 @@ } } } + +.match-the-following { + .match-container { + display: flex; + width: 100%; + justify-content: space-between; + align-items: flex-start; + } + + .match-list { + width: 48%; + list-style: none; + + &.right li { + background-color: rgba(#cecece, 0.5); + transition: background-color 0.5s; + } + } + + li { + text-align: center; + width: 100%; + margin: 10px auto; + border-radius: 10px; + color: var(--dark-grey); + font-weight: 500; + font-size: 14px; + padding: 10px; + overflow: visible; + } +} 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 index 3112b02..09836f3 100644 --- a/src/app/tabs/courses/test/question-sheet/question/question.component.ts +++ b/src/app/tabs/courses/test/question-sheet/question/question.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input } from '@angular/core'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; @Component({ selector: 'app-question', @@ -11,10 +12,39 @@ export class QuestionComponent implements OnInit { showDetails: boolean = false; selectedAnswer: number = null; textAnswer: string = ''; + isAnswered: boolean = false; + + tempRightGroup = []; constructor() { } ngOnInit(): void { + if (this.question.rightGroup) { + this.tempRightGroup = this.question.rightGroup; + } } + moveItemInArray(array: Array, previousIndex: number, currentIndex: number) { + let temp1 = array[previousIndex], + temp2 = array[currentIndex]; + + array[currentIndex] = temp1; + array[previousIndex] = temp2; + + array[currentIndex].isMoved = true; + + if (array.filter((item) => item.isMoved).length === array.length - 1) { + let index = array.findIndex((item) => !item.isMoved); + array[index].isMoved = true; + } + + this.isAnswered = true; + + return array; + } + + drop(event: CdkDragDrop) { + this.tempRightGroup = this.moveItemInArray(this.tempRightGroup, event.previousIndex, event.currentIndex); + } + } diff --git a/src/app/tabs/courses/test/test.component.ts b/src/app/tabs/courses/test/test.component.ts index 455f048..1d7dc7f 100644 --- a/src/app/tabs/courses/test/test.component.ts +++ b/src/app/tabs/courses/test/test.component.ts @@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./test.component.scss'] }) export class TestComponent implements OnInit { - testStatus: string = 'START'; + testStatus: string = 'PROGRESS'; testData = { name: 'CHEMISTRY', @@ -52,12 +52,15 @@ export class TestComponent implements OnInit { leftGroup: [{ id: 1, name: 'Dmitri Mendeleev', + color: '#fcd3c0' }, { id: 2, - name: 'Madam curie' + name: 'Madam curie', + color: '#f9f7c0' }, { id: 3, - name: 'Carl Alexander Neuberg' + name: 'Carl Alexander Neuberg', + color: '#c0f9e7' }], rightGroup: [{ id: 1, @@ -108,12 +111,15 @@ export class TestComponent implements OnInit { leftGroup: [{ id: 1, name: 'Dmitri Mendeleev', + color: '#fcd3c0' }, { id: 2, - name: 'Madam curie' + name: 'Madam curie', + color: '#f9f7c0' }, { id: 3, - name: 'Carl Alexander Neuberg' + name: 'Carl Alexander Neuberg', + color: '#c0f9e7' }], rightGroup: [{ id: 1, diff --git a/tsconfig.json b/tsconfig.json index 8c4ef3b..39608d9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,7 @@ "module": "esnext", "moduleResolution": "node", "importHelpers": true, - "target": "es2015", + "target": "es5", "lib": [ "es2018", "dom"