Merge pull request #329 from sunbird-cb/dev-portal

quiz related UI updated #6
sunbird-cb · Mar 23, 2022 · 5376196 · 5376196
2 parents efc1c4b + c37b837
commit 5376196
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 47 deletions.
diff --git a/library/ws-widget/collection/src/lib/_services/widget-content.service.ts b/library/ws-widget/collection/src/lib/_services/widget-content.service.ts
@@ -276,7 +276,8 @@ export class WidgetContentService {
     if (
       content.primaryCategory === NsContent.EPrimaryCategory.RESOURCE ||
       content.primaryCategory === NsContent.EPrimaryCategory.KNOWLEDGE_ARTIFACT ||
-      content.primaryCategory === NsContent.EPrimaryCategory.PROGRAM
+      content.primaryCategory === NsContent.EPrimaryCategory.PROGRAM ||
+      content.primaryCategory === NsContent.EPrimaryCategory.PRACTICE_RESOURCE
     ) {
       return content
     }

diff --git a/library/ws-widget/utils/src/lib/services/widget-content.service.ts b/library/ws-widget/utils/src/lib/services/widget-content.service.ts
@@ -213,7 +213,8 @@ export class WidgetContentService {
     if (
       content.primaryCategory === NsContent.EPrimaryCategory.RESOURCE ||
       content.primaryCategory === NsContent.EPrimaryCategory.KNOWLEDGE_ARTIFACT ||
-      content.primaryCategory === NsContent.EPrimaryCategory.PROGRAM
+      content.primaryCategory === NsContent.EPrimaryCategory.PROGRAM ||
+      content.primaryCategory === NsContent.EPrimaryCategory.PRACTICE_RESOURCE
     ) {
       return content
     }

diff --git a/...ect/ws/viewer/src/lib/plugins/practice/components/question/mcq-sca/mcq-sca.component.html b/...ect/ws/viewer/src/lib/plugins/practice/components/question/mcq-sca/mcq-sca.component.html
@@ -1,44 +1,44 @@
 <mat-radio-group class="flex flex-1 flex-column quiz-radio-group">
     <div *ngFor="let option of question?.options">
-      <mat-radio-button #btn class="flex flex-1 padding-s quiz-radio-button margin-top-s b-r" [ngClass]="{
+        <mat-radio-button #btn class="flex flex-1 padding-s quiz-radio-button margin-top-s b-r" [ngClass]="{
     'correct-answer':
       (viewState === 'review' && option?.isCorrect && isSelected(option)) ||
       (viewState === 'answer' && option?.isCorrect),
     'incorrect-answer': viewState === 'review' && !option?.isCorrect && isSelected(option),
     'ws-mat-accent-border': !(btn.checked),
     'ws-mat-accent-border-active ': (btn.checked)
   }" [value]="option.optionId" (change)="updateParent(option.optionId)" [checked]="isSelected(option)">
-        <span class="wrap-mat-radio-label">
-          <mat-error *ngIf="viewState === 'review' && !option?.isCorrect && isSelected(option)">
-            {{ option?.text }}
-          </mat-error>
-          <div [ngClass]="{
+            <span class="wrap-mat-radio-label">
+                <mat-error *ngIf="viewState === 'review' && !option?.isCorrect && isSelected(option)">
+                    {{ option?.text }}
+                </mat-error>
+                <div [ngClass]="{
         'correct-option':
           (viewState === 'review' && option?.isCorrect && isSelected(option)) ||
           (viewState === 'answer' && option?.isCorrect)
       }" [hidden]="viewState === 'review' && !option?.isCorrect && isSelected(option)">
-            <span class="mat-body-2"></span> {{ option?.text }}
-          </div>
-        </span>
-      </mat-radio-button>
-      <div class="background-well padding-left-m padding-xs"
-        *ngIf="viewState === 'review' && isSelected(option) && option?.hint">
-        <mat-error *ngIf="viewState === 'review' && !option?.isCorrect && isSelected(option)">
-          <p class="margin-remove mat-body-2" i18n="option explanation label">
-            Explanation:
-          </p>
-          <p class="margin-remove mat-body-1" [innerHTML]="option?.hint"></p>
-        </mat-error>
-        <div [ngClass]="{
+                    <span class="mat-body-2"></span> {{ option?.text }}
+                </div>
+            </span>
+        </mat-radio-button>
+        <div class="background-well padding-left-m padding-xs"
+            *ngIf="viewState === 'review' && isSelected(option) && option?.hint">
+            <mat-error *ngIf="viewState === 'review' && !option?.isCorrect && isSelected(option)">
+                <p class="margin-remove mat-body-2" i18n="option explanation label">
+                    Explanation:
+                </p>
+                <p class="margin-remove mat-body-1" [innerHTML]="option?.hint"></p>
+            </mat-error>
+            <div [ngClass]="{
       'correct-option':
         (viewState === 'review' && option?.isCorrect && isSelected(option)) ||
         (viewState === 'answer' && option?.isCorrect)
     }" [hidden]="viewState === 'review' && !option?.isCorrect && isSelected(option)">
-          <p class="margin-remove mat-body-2" i18n="option explanation label">
-            Explanation :
-          </p>
-          <p class="margin-remove mat-body-1" [innerHTML]="option?.hint"></p>
+                <p class="margin-remove mat-body-2" i18n="option explanation label">
+                    Explanation :
+                </p>
+                <p class="margin-remove mat-body-1" [innerHTML]="option?.hint"></p>
+            </div>
         </div>
-      </div>
     </div>
-  </mat-radio-group>
+</mat-radio-group>
diff --git a/project/ws/viewer/src/lib/plugins/practice/components/question/mcq-sca/mcq-sca.component.ts b/project/ws/viewer/src/lib/plugins/practice/components/question/mcq-sca/mcq-sca.component.ts
@@ -1,23 +1,26 @@
 import {
-    AfterViewInit, Component,
+    Component,
     EventEmitter,
     // HostListener,
     Input,
-    OnChanges, OnInit,
+    OnInit,
     Output,
-    SimpleChanges, ViewEncapsulation,
+    ViewEncapsulation,
 } from '@angular/core'
 import { NSPractice } from '../../../practice.model'
 // import { PracticeService } from '../../../practice.service'
-
+// tslint:disable-next-line
+import _ from 'lodash'
+import { Subscription } from 'rxjs'
 @Component({
     selector: 'viewer-mcq-sca-question',
     templateUrl: './mcq-sca.component.html',
     styleUrls: ['./mcq-sca.component.scss'],
     // tslint:disable-next-line
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    // changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SingleChoiseQuesComponent implements OnInit, OnChanges, AfterViewInit {
+export class SingleChoiseQuesComponent implements OnInit {
     @Input() question: NSPractice.IQuestion = {
         multiSelection: false,
         section: '',
@@ -33,6 +36,7 @@ export class SingleChoiseQuesComponent implements OnInit, OnChanges, AfterViewIn
     }
     @Input() itemSelectedList: string[] = []
     @Output() update = new EventEmitter<string | Object>()
+    subscription!: Subscription
     localQuestion: string = this.question.question
     constructor(
         // private practiceSvc: PracticeService,
@@ -41,17 +45,41 @@ export class SingleChoiseQuesComponent implements OnInit, OnChanges, AfterViewIn
     }
     ngOnInit() {
         this.localQuestion = this.question.question
+        // this.subscription = this.practiceSvc.questionAnswerHash.subscribe((val) => {
+        //     this.itemSelectedList = val[this.question.questionId]
+        // })
     }
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes) {
-
-        }
-    }
-    ngAfterViewInit(): void { }
+    // ngOnChanges(changes: SimpleChanges): void {
+    //     // if (changes) {
+    //     //     for (const change in changes) {
+    //     //         if (change === 'questionNumber') {
+    //     //             // this.ngOnInit() //question.currentValue
+    //     //             this.question = changes.question.currentValue
+    //     //         } else if (change === 'itemSelectedList') {
+    //     //             this.itemSelectedList = changes.itemSelectedList.currentValue
+    //     //         }
+    //     //         // else if(change === 'question'){`
+    //     //         //     // this.ngOnDestroy()
+    //     //         // }
+    //     //     }
+    //     // }
+    // }
     isSelected(option: NSPractice.IOption) {
+        // let isSelected = false
+        // const store = this.practiceSvc.questionAnswerHash.getValue()
+        // if (store && store[this.question.questionId]) {
+        //     isSelected = store[this.question.questionId].indexOf(option.optionId) !== -1
+        // }
+        // return isSelected
         return this.itemSelectedList && this.itemSelectedList.indexOf(option.optionId) !== -1
     }
     updateParent($event: any) {
         this.update.emit($event)
     }
+    // ngOnDestroy(): void {
+    //     if (this.subscription) {
+    //         this.subscription.unsubscribe()
+    //         // this.question.options = []
+    //     }
+    // }
 }
diff --git a/project/ws/viewer/src/lib/plugins/practice/components/question/question.component.html b/project/ws/viewer/src/lib/plugins/practice/components/question/question.component.html
@@ -31,13 +31,13 @@ <h3 class="mat-subheading-2 ws-mat-black60-text margin-remove-bottom">
       <div class="flex flex-1 padding-l">
         <!-- {{log(question)}} -->
         <ng-container *ngIf="question.questionType === 'mcq-mca'">
-          <viewer-mcq-mca-question class="flex-1" [question]="question" [itemSelectedList]="itemSelectedList"
+          <viewer-mcq-mca-question class="flex-1" [question]="question" [itemSelectedList]="itemSelectedList1"
             (update)="update($event)">
           </viewer-mcq-mca-question>
         </ng-container>
 
         <ng-container *ngIf="question.questionType === 'mcq-sca'">
-          <viewer-mcq-sca-question class="flex-1" [question]="question" [itemSelectedList]="itemSelectedList"
+          <viewer-mcq-sca-question class="flex-1" [question]="question" [itemSelectedList]="itemSelectedList1"
             (update)="update($event)"></viewer-mcq-sca-question>
         </ng-container>
         <ng-container *ngIf="question.questionType === 'mtf'">

diff --git a/project/ws/viewer/src/lib/plugins/practice/components/question/question.component.ts b/project/ws/viewer/src/lib/plugins/practice/components/question/question.component.ts
@@ -5,7 +5,7 @@ import {
 import { NSPractice } from '../../practice.model'
 import { SafeHtml } from '@angular/platform-browser'
 // import { jsPlumb, OnConnectionBindInfo } from 'jsplumb'
-// import { PracticeService } from '../../practice.service'
+import { PracticeService } from '../../practice.service'
 // tslint:disable-next-line
 import _ from 'lodash'
 
@@ -40,6 +40,7 @@ export class QuestionComponent implements OnInit, OnChanges, AfterViewInit {
   @Input()
   quizAnswerHash: { [questionId: string]: string[] } = {}
   title = 'match'
+  itemSelectedList1: any
   jsPlumbInstance: any
   safeQuestion: SafeHtml = ''
   correctOption: boolean[] = []
@@ -49,7 +50,7 @@ export class QuestionComponent implements OnInit, OnChanges, AfterViewInit {
   constructor(
     // private domSanitizer: DomSanitizer,
     // private elementRef: ElementRef,
-    // private practiceSvc: PracticeService,
+    private practiceSvc: PracticeService,
   ) { }
 
   ngOnInit() {
@@ -58,6 +59,7 @@ export class QuestionComponent implements OnInit, OnChanges, AfterViewInit {
   }
 
   ngAfterViewInit() {
+
   }
 
   init() {
@@ -74,11 +76,14 @@ export class QuestionComponent implements OnInit, OnChanges, AfterViewInit {
         this.question.question = this.question.question.replace(toBeReplaced, `src="${newUrl}"`)
       }
     }
+    this.practiceSvc.questionAnswerHash.subscribe(val => {
+      this.itemSelectedList1 = val[this.question.questionId]
+    })
   }
 
   ngOnChanges(changes: SimpleChanges) {
     for (const change in changes) {
-      if (change === 'questionNumber') {
+      if (change === 'questionNumber' || change === 'itemSelectedList') {
         this.init()
       }
     }
@@ -97,7 +102,9 @@ export class QuestionComponent implements OnInit, OnChanges, AfterViewInit {
   isSelected(option: NSPractice.IOption) {
     return this.itemSelectedList && this.itemSelectedList.indexOf(option.optionId) !== -1
   }
-
+  get selectedList() {
+    return this.itemSelectedList || []
+  }
   isQuestionMarked() {
     return this.markedQuestions.has(this.question.questionId)
   }

diff --git a/project/ws/viewer/src/lib/plugins/practice/practice.component.html b/project/ws/viewer/src/lib/plugins/practice/practice.component.html
@@ -137,7 +137,7 @@
             [question]="question" [itemSelectedList]="questionAnswerHash[(question?.questionId)]"
             (itemSelected)="fillSelectedItems(question, $event)" [hidden]="i !== currentQuestionIndex">
           </viewer-question> -->
-            <ng-container *ngIf="current_Question">
+            <ng-container *ngIf="current_Question && !process">
               <viewer-question #questionsReference [id]="'question' + (currentQuestionIndex + 1)"
                 [markedQuestions]="markedQuestions" [artifactUrl]="artifactUrl"
                 [questionNumber]="currentQuestionIndex + 1" [total]="secQuestions.length" [viewState]="viewState"

diff --git a/project/ws/viewer/src/lib/plugins/practice/practice.component.ts b/project/ws/viewer/src/lib/plugins/practice/practice.component.ts
@@ -89,6 +89,7 @@ export class PracticeComponent implements OnInit, OnChanges, OnDestroy {
   selectedSection: NSPractice.IPaperSection | null = null
   ePrimaryCategory = NsContent.EPrimaryCategory
   currentQuestion!: NSPractice.IQuestionV2 | any
+  process = false
   constructor(
     private events: EventService,
     public dialog: MatDialog,
@@ -318,11 +319,15 @@ export class PracticeComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
   getNextQuestion(idx: any) {
+    this.process = true
     if (idx !== this.currentQuestionIndex) {
       this.currentQuestionIndex = idx
     }
     const questions = _.get(this.quizJson, 'questions')
     this.currentQuestion = questions && questions[idx] ? questions[idx] : null
+    setTimeout(() => {
+      this.process = false
+    },         10)
   }
   get current_Question() {
     return this.currentQuestion
@@ -582,7 +587,7 @@ export class PracticeComponent implements OnInit, OnChanges, OnDestroy {
                 selectedAnswer: _.join(_.map(sq.options, (_o: NSPractice.IOption) => {
                   return _o.response
                 }),
-                // tslint:disable-next-line:align
+                  // tslint:disable-next-line:align
                   ','
                 ),
               },