Match the following module completed for test

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",

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",

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 })

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 {
-        
+
 	}
 
 }

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

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

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

@@ -1,6 +1,6 @@
 <section class="container" [ngClass]="{'active' : showDetails }">
     <section class="question-text" (click)="showDetails = !showDetails">
-        <span class="index" [ngClass]="{'active' : selectedAnswer || textAnswer }"> {{ index }} </span>
+        <span class="index" [ngClass]="{'active' : isAnswered }"> {{ index }} </span>
         <p> {{ question.heading }} </p>
         <button [ngClass]="{'active' : showDetails }"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon> </button>
     </section>
@@ -8,8 +8,8 @@
     <div class="answer-holder" *ngIf="showDetails">
         <section class="text-input" *ngIf="question.type === 'TEXT'">
             <label> Answer : </label>
-            <textarea [(ngModel)]="textAnswer"></textarea>
-            <button class="submit-button" (click)="showDetails = false" [ngClass]="{'inactive' : !textAnswer }"> SUBMIT </button>
+            <textarea [(ngModel)]="textAnswer" (input)="isAnswered = true"></textarea>
+            <button class="submit-button" (click)="showDetails = false" [ngClass]="{'inactive' : !isAnswered }"> SUBMIT </button>
         </section>
 
         <section class="single-select" *ngIf="question.type === 'SINGLE_SELECT'">
@@ -18,7 +18,7 @@
             <ol class="option-list">
                 <li *ngFor="let option of question.options; let i = index"
                 [ngClass]="{'active' : selectedAnswer === i }"
-                (click)="selectedAnswer = i">
+                (click)="selectedAnswer = i; isAnswered = true">
                     <label> {{ i + 1 }}. {{ option.name }} </label>
                     <div class="icon-holder">
                         <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
@@ -26,7 +26,29 @@
                 </li>
             </ol>
 
-            <button class="submit-button" (click)="showDetails = false" [ngClass]="{'inactive' : selectedAnswer === null }"> SUBMIT </button>
+            <button class="submit-button" (click)="showDetails = false" [ngClass]="{'inactive' : !isAnswered }"> SUBMIT </button>
+        </section>
+
+        <section class="match-the-following" *ngIf="question.type === 'MATCH_THE_FOLLOWING'">
+            <label> Math the Following </label>
+
+            <div class="match-container">
+                <ul class="match-list left">
+                    <li *ngFor="let option of question.leftGroup; let i = index"
+                    [style.backgroundColor]="option.color">
+                        {{ option.name }}
+                    </li>
+                </ul>
+
+                <ul class="match-list right" cdkDropList (cdkDropListDropped)="drop($event)">
+                    <li *ngFor="let option of tempRightGroup; let i = index" cdkDrag
+                    [style.backgroundColor]="option.isMoved? question.leftGroup[i].color : '#cecece80'">
+                        {{ option.name }}
+                    </li>
+                </ul>
+            </div>
+
+            <button class="submit-button" (click)="showDetails = false" [ngClass]="{'inactive' : !isAnswered }"> SUBMIT </button>
         </section>
 
     </div>

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;
+    }
+}

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<any>, 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<number[]>) {
+        this.tempRightGroup = this.moveItemInArray(this.tempRightGroup, event.previousIndex, event.currentIndex);
+    }
+
 }

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,

tsconfig.json

@@ -10,7 +10,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es5",
     "lib": [
       "es2018",
       "dom"