Question component UI --- Partial commit

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

@@ -1,7 +1,7 @@
 <section class="page-container">
     <header class="main-header">
         <div class="counter">
-            <span> {{ answers.length }}</span>/{{ questionCount }}
+            <span> 0 </span>/{{ questionCount }}
         </div>
 
         <div class="duration">
@@ -11,4 +11,14 @@
 
         <button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/information.svg"></svg-icon> </button>
     </header>
+
+    <ul class="category-list" *ngFor="let category of testData.categoryList; let i = index;">
+        <header>
+            <h5> {{ category.heading }} </h5>
+            <span class="count"> {{ category.unitValue }} x {{ category.questions.length }} = {{ category.unitValue * category.questions.length }} </span>
+        </header>
+        <li *ngFor="let question of category.questions; let j = index;">
+            <app-question [question]="question" [index]="j + 1"></app-question>
+        </li>
+    </ul>
 </section>

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

@@ -10,6 +10,10 @@
     justify-content: space-between;
     align-items: center;
     padding: 0 5%;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    position: -webkit-sticky;
 
     .counter {
         font-size: 14px;
@@ -50,3 +54,28 @@
         }
     }
 }
+
+.category-list {
+    list-style: none;
+    width: 100%;
+
+    header {
+        background-color: var(--dark-grey);
+        color: white;
+        display: flex;
+        width: 100%;
+        padding: 0 5%;
+        align-items: center;
+        justify-content: space-between;
+        position: sticky;
+        top: 50px;
+        position: -webkit-sticky;
+        z-index: 1;
+        height: 50px;
+
+        h5 {
+            font-weight: 400;
+            font-size: 14px;
+        }
+    }
+}

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

@@ -7,8 +7,7 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class QuestionSheetComponent implements OnInit {
     @Input() testData: any;
-    answers = [];
-    questionCount = 0;
+    questionCount = 0;    
     timeCounter = {
         hours: 0,
         minutes: 0,

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

@@ -1 +1,33 @@
-<p>question works!</p>
+<section class="container" [ngClass]="{'active' : showDetails }">
+    <section class="question-text" (click)="showDetails = !showDetails">
+        <span class="index"> {{ 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>
+
+    <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" [ngClass]="{'inactive' : !textAnswer }"> SUBMIT </button>
+        </section>
+
+        <section class="single-select" *ngIf="question.type === 'SINGLE_SELECT'">
+            <label> Multiple Choice Question </label>
+
+            <ol class="option-list">
+                <li *ngFor="let option of question.options; let i = index"
+                [ngClass]="{'active' : selectedAnswer === i }"
+                (click)="selectedAnswer = i">
+                    <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>
+                    </div>
+                </li>
+            </ol>
+
+            <button class="submit-button" [ngClass]="{'inactive' : selectedAnswer === null }"> SUBMIT </button>
+        </section>
+
+    </div>
+</section>

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

@@ -0,0 +1,180 @@
+.container {
+    background-color: var(--ash-black);
+    padding: 15px;
+    border-bottom: 1px solid var(--dark-grey);
+
+    &.active {
+        background-color: white;
+
+        .question-text {
+            p {
+                color: var(--dark-grey);
+            }
+
+            button .icon {
+                fill: var(--ash-black);
+            }
+        }
+    }
+}
+
+.question-text {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    .index {
+        width: 25px;
+        height: 25px;
+        border-radius: 5px;
+        background-color: var(--dark-grey);
+        color: white;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    p {
+        width: calc(100% - 60px);
+        padding: 0 10px 0;
+        color: white;
+        min-height: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        font-weight: 500;
+        line-height: 1.5;
+        font-size: 15px;
+    }
+
+    button {
+        background-color: transparent;
+        border: 0px;
+        width: 30px;
+        height: 30px;
+        transition: transform 0.3s;
+
+        &.active {
+            transform: rotate(180deg);
+        }
+
+        .icon {
+            width: 14px;
+            height: 14px;
+            fill: var(--light-grey);
+        }
+    }
+}
+
+.answer-holder {
+    margin-top: 10px;
+
+    label {
+        display: block;
+        font-size: 13px;
+        color: var(--dark-grey);
+    }
+
+    .submit-button {
+        width: 100%;
+        margin: 20px auto 10px;
+        background-color: var(--teal-green);
+        color: white;
+        font-size: 13px;
+        height: 40px;
+        border-radius: 5px;
+        border: 0px;
+        display: block;
+        box-shadow: 0px 0px 5px var(--teal-green);
+        transition: box-shadow 0.3s, background-color 0.3s;
+
+        &.inactive {
+            box-shadow: 0px 0px 0px transparent;
+            background-color: var(--light-grey);
+        }
+    }
+}
+
+.text-input {
+    textarea {
+        width: 100%;
+        display: block;
+        margin: 10px auto;
+        font-size: 16px;
+        padding: 10px;
+        color: var(--ash-black);
+        background-color: transparent;
+        border: 1px solid var(--dark-grey);
+        border-radius: 2px;
+        line-height: 1.5;
+        min-height: 150px;
+        resize: none;
+    }
+}
+
+.option-list {
+    list-style: none;
+    margin-top: 10px;
+
+    li {
+        display: flex;
+        width: 100%;
+        border: 1px solid transparent;
+        color: white;
+        border-radius: 30px;
+        align-items: center;
+        min-height: 50px;
+        margin: 0px auto 20px;
+        justify-content: space-between;
+        padding: 0 15px;
+        background-color: #cecece;
+        transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
+
+        label {
+            font-size: 14px;
+            color: var(--ash-black);
+            transition: color 0.3s;
+            font-weight: 500;
+        }
+
+        .icon-holder {
+            width: 23px;
+            height: 23px;
+            border: 1px solid var(--dark-grey);
+            border-radius: 50%;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .icon {
+                width: 100%;
+                height: 100%;
+                fill: white;
+                display: none;
+            }
+        }
+
+        &.active {
+            box-shadow: 0px 0px 5px var(--green);
+            border-color: var(--green);
+            background-color: var(--green);
+
+            label {
+                color: white;
+            }
+
+            .icon-holder {
+                border-color: white;
+                background-color: transparent;
+
+                .correct-icon {
+                    fill: white;
+                    display: block;
+                }
+            }
+        }
+    }
+}

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

@@ -1,15 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-question',
-  templateUrl: './question.component.html',
-  styleUrls: ['./question.component.scss']
+	selector: 'app-question',
+	templateUrl: './question.component.html',
+	styleUrls: ['./question.component.scss']
 })
 export class QuestionComponent implements OnInit {
+    @Input() question: any;
+    @Input() index: number;
+    showDetails: boolean = false;
+    selectedAnswer: number = null;
+    textAnswer: string = '';
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
 
 }