Partial commit --- softcoding

src/app/tabs/courses/course-details/course-details.component.html

@@ -56,7 +56,7 @@
                                     <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes:
                                 </span>
                                 <span class="type" *ngIf="topic.type === 'quiz'">
-                                    <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/question-mark.svg"></svg-icon> Notes:
+                                    <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/question-mark.svg"></svg-icon> Quiz:
                                 </span>
                                 <strong> {{ topic.heading }} - </strong> {{ topic.description }}
                             </p>

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

@@ -11,99 +11,23 @@
 
     <section class="question-status">
         <div class="container">
-            <div class="question-number correct">
+            <div class="question-number correct" *ngFor="let question of questionList; let i = index"
+            [ngClass]="{'current': selectedQuestionId && selectedQuestionId === question.id,
+            'correct' : question.userAnswer === question.correctAnswer,
+            'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer}">
                 <span>
-                    <label> 1 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-            <div class="question-number wrong">
-                <span>
-                    <label> 2 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                </span>
-            </div>
-            <div class="question-number correct">
-                <span>
-                    <label> 3 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-            <div class="question-number wrong">
-                <span>
-                    <label> 4 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                </span>
-            </div>
-            <div class="question-number correct">
-                <span>
-                    <label> 5 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-            <div class="question-number wrong">
-                <span>
-                    <label> 6 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                </span>
-            </div>
-            <div class="question-number current wrong">
-                <span>
-                    <label> 7 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                </span>
-            </div>
-
-            <div class="question-number current correct">
-                <span>
-                    <label> 8 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-
-            <div class="question-number">
-                <span>
-                    <label> 9 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-
-            <div class="question-number">
-                <span>
-                    <label> 10 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-
-
-            <div class="question-number">
-                <span>
-                    <label> 11 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-
-
-            <div class="question-number">
-                <span>
-                    <label> 12 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                </span>
-            </div>
-
-            <div class="question-number">
-                <span>
-                    <label> 13 </label>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <label> {{ i + 1 }} </label>
+                    <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 </span>
             </div>
         </div>
     </section>
 
     <ngx-siema [options]="options">
-        <ngx-siema-slide>
+        <ngx-siema-slide *ngFor="let question of questionList; let i = index">
             <p class="question">
-                Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ?
+                {{ question.question }}
             </p>
 
             <div class="timer-holder">
@@ -120,67 +44,18 @@
             <!-- 135.2 * (1 - 0.6) -->
 
             <ol class="option-list">
-                <li class="wrong">
-                    <label> 1. Option 1 </label>
-                    <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                    </div>
-                </li>
-                <li>
-                    <label> 2. Option 2 </label>
-                    <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    </div>
-                </li>
-                <li>
-                    <label> 3. Option 3 </label>
-                    <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    </div>
-                </li>
-                <li class="correct">
-                    <label> 4. Option 4 </label>
-                    <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    </div>
-                </li>
-            </ol>
-        </ngx-siema-slide>
-
-
-        <ngx-siema-slide>
-            <p class="question">
-                dis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ?
-            </p>
-
-            <div class="timer-holder">
-                <div class="timer">
-                    <span> 00:40 </span>
-                    <svg width="55" height="55" viewBox="0 0 55 55">
-                        <circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke="#cecece" stroke-width="3" />
-                        <circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke-width="3"
-                        stroke-dasharray="135.2" stroke-dashoffset="52.08" id="progress" />
-                    </svg>
-                </div>
-            </div>
-
-            <!-- 135.2 * (1 - 0.6) -->
-
-            <ol class="option-list">
-                <li class="wrong">
-                    <label> 1. Option 1 </label>
+                <li *ngFor="let option of question.options; let j = index"
+                [ngClass]="{'correct' : question.userAnswer === question.correctAnswer && question.userAnswer === option.id,
+                'wrong': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.userAnswer === option.id,
+                'show-correct': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.correctAnswer === option.id }"
+                (click)="question.userAnswer = option.id;">
+                    <label> {{ j + 1 }}. {{ option.text }} </label>
                     <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                    </div>
-                </li>
-                <li>
-                    <label> 2. Option 2 </label>
-                    <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                        <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                        <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
                     </div>
                 </li>
             </ol>
-
         </ngx-siema-slide>
     </ngx-siema>
 

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

@@ -47,18 +47,19 @@
 
 .question-status {
     background-color: var(--ash-black);
-    padding: 10px 0% 5px;
+    padding: 10px 0;
     display: block;
     width: 100%;
     overflow: auto;
-    margin-bottom: -10px;
     position: relative;
 
     .container {
         width: 100%;
         padding: 0 5%;
         white-space: nowrap;
-        display: inline-block;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
         overflow: auto;
     }
 
@@ -91,10 +92,7 @@
         height: 17px;
         background-color: var(--dark-grey);
         color: white;
-        align-items: center;
-        justify-content: center;
-        display: inline-block;
-        margin-right: 10px;
+        margin-right: 7px;
         border-radius: 50%;
         overflow: hidden;
         border: 1px solid var(--dark-grey);
@@ -123,20 +121,25 @@
             border-color: var(--light-grey);
             background-color: var(--black);
 
-            &.wrong {
-                background-color: var(--danger-dark);
-                .icon {
-                    fill: var(--black) !important;
+            &.correct {
+                background-color: var(--green);
+
+                .correct-icon {
+                    fill: var(--black);
                 }
             }
 
-            &.correct {
-                background-color: var(--green);
+            &.wrong {
+                background-color: var(--danger-dark);
 
-                .icon {
-                    fill: var(--black) !important;
+                .wrong-icon {
+                    fill: var(--black);
                 }
             }
+
+            .icon {
+                fill: white;
+            }
         }
 
         &.correct {
@@ -147,7 +150,7 @@
                 display: none;
             }
 
-            .icon {
+            .correct-icon {
                 fill: var(--green);
                 display: block;
             }
@@ -155,16 +158,14 @@
 
         &.wrong {
             border-color: var(--danger-dark);
-            background-color: var(--danger-dark);
+            background-color: white;
 
             label {
                 display: none;
             }
 
-            .icon {
-                fill: white;
-                width: 7px;
-                height: 7px;
+            .wrong-icon {
+                fill: var(--danger-dark);
                 display: block;
             }
         }
@@ -179,7 +180,7 @@ ngx-siema-slide {
         color: white;
         font-size: 13px;
         background-color: var(--ash-black);
-        padding: 15px 5%;
+        padding: 0 5% 15px 5%;
     }
 
     .timer-holder {
@@ -270,7 +271,7 @@ ngx-siema-slide {
             }
         }
 
-        &.correct {
+        &.correct, &.show-correct {
             box-shadow: 0px 0px 5px var(--green);
             border-color: var(--green);
 
@@ -282,7 +283,7 @@ ngx-siema-slide {
                 border-color: var(--green);
                 background-color: white;
 
-                .icon {
+                .correct-icon {
                     fill: var(--green);
                     display: block;
                 }
@@ -299,12 +300,10 @@ ngx-siema-slide {
 
             .icon-holder {
                 border-color: var(--danger-dark);
-                background-color: var(--danger-dark);
+                background-color: white;
 
-                .icon {
-                    fill: white;
-                    width: 10px;
-                    height: 10px;
+                .wrong-icon {
+                    fill: var(--danger-dark);
                     display: block;
                 }
             }

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

@@ -25,16 +25,96 @@ export class QuizComponent implements OnInit {
 		},
 	};
 
+    selectedQuestionId: number;
+
+    questionList = [{
+        id: 1,
+        question: 'Which sentence is corrent? "1. Ramu went to School \n 2. School went Ramu"',
+        userAnswer: 0,
+        correctAnswer: 1,
+        options: [{
+            id: 1,
+            text: '1 is correct',
+        }, {
+            id: 2,
+            text: '2 is correct',
+        }, {
+            id: 3,
+            text: 'Both are correct',
+        }, {
+            id: 4,
+            text: 'Both are wrong',
+        }]
+    }, {
+        id: 2,
+        question: 'How much is 16x16 ?',
+        userAnswer: 0,
+        correctAnswer: 4,
+        options: [{
+            id: 1,
+            text: '30000',
+        }, {
+            id: 2,
+            text: '540',
+        }, {
+            id: 3,
+            text: '156',
+        }, {
+            id: 4,
+            text: '256',
+        }]
+    }, {
+        id: 3,
+        question: 'Who is Jackie Chan ?',
+        userAnswer: 0,
+        correctAnswer: 2,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Singer',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
+    }, {
+        id: 4,
+        question: 'Who is Newton ?',
+        userAnswer: 0,
+        correctAnswer: 3,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Scientist',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
+    }];
+
 	constructor(
         private location: Location,
         private ngxSiemaService: NgxSiemaService
     ) { }
 
 	ngOnInit(): void {
+        this.selectedQuestionId = this.questionList[0].id;
 	}
 
     next() {
         this.ngxSiemaService.next(1);
+        this.ngxSiemaService.currentSlide().subscribe((index) => {
+            this.selectedQuestionId = this.questionList[index.currentSlide].id;
+        }).unsubscribe();
     }
 
     back() {