Fitb for dropdown

sb-cb-ui-assessment/library/sunbird-cb/assessment/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunbird-cb/assessment",
-  "version": "0.0.6",
+  "version": "0.0.12",
   "main": "./src/public-api.ts",
    "peerDependencies": {
     "@angular/animations": "~8.2.1",

sb-cb-ui-assessment/library/sunbird-cb/assessment/src/lib/common-assessment-viewer.component.html

@@ -1,22 +1,36 @@
 <!-- <router-outlet (activate)="getContentData($event)"></router-outlet> -->
-<div class="assessment-preview-dialog">
+<div [ngClass]="questionPreview ? 'assessment-preview-dialog-question-preview' : 'assessment-preview-dialog'">
   <button mat-icon-button class="close-button cursor-pointer" [mat-dialog-close]="true">
     <mat-icon class="close-icon">close</mat-icon>
   </button>
-  <div class="margin-m" *ngIf="!isFetchingDataComplete || !testData">
-    <div class="flex flex-center">
-      <mat-spinner></mat-spinner>
+  <ng-container *ngIf="!questionPreview">
+    <div class="margin-m" *ngIf="!isFetchingDataComplete || !testData">
+      <div class="flex flex-center">
+        <mat-spinner></mat-spinner>
+      </div>
     </div>
-  </div>
-  <ng-container *ngIf="testData && isFetchingDataComplete">
-    <!-- <viewer-practice-container *ngIf="isFetchingDataComplete" [isFetchingDataComplete]="isFetchingDataComplete"
-      [isErrorOccured]="isErrorOccured" [quizData]="testData" [forPreview]="forPreview" [quizJson]="quizJson"
-      [fromCreation]="true">
-    </viewer-practice-container> -->
-    <viewer-plugin-practice [identifier]="testData?.identifier" [artifactUrl]="testData?.artifactUrl"
-      [name]="testData?.name" [learningObjective]="testData?.name" [primaryCategory]="testData?.primaryCategory"
-      [complexityLevel]="testData?.difficultyLevel" [duration]="testData?.expectedDuration || 1" [quizJson]="quizJson"
-      [collectionId]="collectionId" [fromCreation]="fromCreation" [quizData]="testData">
-    </viewer-plugin-practice>
+    <ng-container *ngIf="testData && isFetchingDataComplete">
+      <!-- <viewer-practice-container *ngIf="isFetchingDataComplete" [isFetchingDataComplete]="isFetchingDataComplete"
+        [isErrorOccured]="isErrorOccured" [quizData]="testData" [forPreview]="forPreview" [quizJson]="quizJson"
+        [fromCreation]="true">
+      </viewer-practice-container> -->
+      <viewer-plugin-practice [identifier]="testData?.identifier" [artifactUrl]="testData?.artifactUrl"
+        [name]="testData?.name" [learningObjective]="testData?.name" [primaryCategory]="testData?.primaryCategory"
+        [complexityLevel]="testData?.difficultyLevel" [duration]="testData?.expectedDuration || 1" [quizJson]="quizJson"
+        [collectionId]="collectionId" [fromCreation]="fromCreation" [quizData]="testData">
+      </viewer-plugin-practice>
+    </ng-container>
+  </ng-container>
+  <ng-container *ngIf="questionPreview">
+    <viewer-question [showQuestionMarks]="data.assesment.marks ? 'Yes':'No'"
+      [selectedAssessmentCompatibilityLevel]="data.assesment.compatibilityLevel"
+      [questionNumber]="data.assesment.questionNumber" class="flex-1" [showOnlyQuestion]="true"
+      [questionPreview]="questionPreview" [assessmentType]="data.assesment.assessmentType"
+      [question]="data.assesment.question"></viewer-question>
+    <viewer-question [showQuestionMarks]="data.assesment.marks ? 'Yes':'No'"
+      [selectedAssessmentCompatibilityLevel]="data.assesment.compatibilityLevel"
+      [questionNumber]="data.assesment.questionNumber" [assessmentType]="data.assesment.assessmentType" class="flex-1"
+      [questionPreview]="questionPreview" [showOnlyQuestion]="false"
+      [question]="data.assesment.question"></viewer-question>
   </ng-container>
 </div>

sb-cb-ui-assessment/library/sunbird-cb/assessment/src/lib/common-assessment-viewer.component.scss

@@ -3,6 +3,11 @@
   overflow: visible
 }
 
+::ng-deep .assessment-preview-dialog-question-preview  .mat-dialog-container {
+  padding: 10px !important;
+  overflow: visible
+}
+
 ::ng-deep .assessment-preview-dialog {
   position: relative;
 
@@ -33,4 +38,38 @@
     }
   }
 
+}
+
+::ng-deep .assessment-preview-dialog-question-preview {
+    height: 98%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-top: 15px;
+
+  .close-button {
+    border-radius: 50%;
+    border: 0.5px solid #6a6868;
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 19%;
+    right: 19%;
+    background-color: white;
+
+    .close-icon {
+      font-size: 20px;
+      // margin-bottom: 12px;
+      // margin-left: 1px;
+      color: #7c7b7b;
+    }
+
+    .mat-icon {
+      height: 16px;
+      width: 16px;
+    }
+
+    .cursor-pointer {
+      cursor: pointer;
+    }
+  }
 }

sb-cb-ui-assessment/library/sunbird-cb/assessment/src/lib/common-assessment-viewer.component.ts

@@ -19,8 +19,12 @@ export class CommonAssessmentViewerComponent implements OnInit {
   quizJson: any
   fromCreation = true
   collectionId = ''
+  questionPreview = false
   ngOnInit() {
     if (this.data) {
+      // tslint:disable-next-line
+      console.log('this.data', this.data)
+      this.questionPreview = this.data.questionPreview
       this.isFetchingDataComplete = this.data.isFetchingDataComplete
       this.testData = this.data.testData
       this.isErrorOccured = this.data.isErrorOccured

sb-cb-ui-assessment/library/sunbird-cb/assessment/src/lib/practice/components/question/fitb/fitb.component.html

@@ -1,16 +1,19 @@
 <mat-card class="flex flex-1 flex-column padding-xl ws-mat-accent-border no-shadow fitb-questions">
-  <span class="mat-subheading-2" i18n>Instruction</span>
-  <span class="mat-body-2 margin-bottom-l" i18n>{{ question?.instructions || 'Fill in the blank with the best
-    word'}}</span>
+  <ng-container *ngIf="selectedAssessmentCompatibilityLevel < 7">
+    <span class="mat-subheading-2" i18n>Instruction</span>
+    <span class="mat-body-2 margin-bottom-l" i18n>{{
+      question?.instructions || 'Fill in the blank with the best
+      word'}}</span>
+  </ng-container>
   <h2 *ngIf="question.questionType === 'ftb'" class="mat-h2" [innerHTML]="safeQuestion" class="quiz-question">
   </h2>
 
-  <div *ngIf="question.questionType === 'ftb'">
+  <div *ngIf="question.questionType === 'ftb' && !questionPreview">
     <div *ngFor="let option of question?.options; let i = index">
       <div class="html-option" [ngClass]="{
     'correct-option': viewState === 'answer' && option?.isCorrect
   }" *ngIf="viewState === 'answer' && option?.isCorrect" [innerHtml]="getSanitizeString(option?.text) ">
-        
+
       </div>
       <div class="background-well padding-left-m padding-xs" *ngIf="showAns && option?.hint && !unTouchedBlank[i]"
         [ngClass]="{