Issue #220602 feat: MTF Question in QuML Editor

projects/questionset-editor-library-wc/src/styles.scss

@@ -18,4 +18,5 @@
 @import "./../../questionset-editor-library/src/lib/components/slider/slider.component.scss";
 @import "./../../questionset-editor-library/src/lib/components/template/template.component.scss";
 @import "./../../questionset-editor-library/src/lib/components/translations/translations.component.scss";
+@import "./../../questionset-editor-library/src/lib/components/match/match.component.scss";
 

projects/questionset-editor-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekdi/sunbird-questionset-editor",
-  "version": "8.0.0",
+  "version": "9.0.0-beta.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },

projects/questionset-editor-library/src/lib/components/ckeditor-tool/ckeditor-tool.component.html

@@ -1,5 +1,5 @@
 <div class="editorWrapper" [ngClass]="{'hasError': limitExceeded}">
-  <button type="button" data-tooltip="Add image" data-position="bottom center" data-variation="mini" data-inverted=""
+  <button *ngIf="imageIconPosition === 'default'" type="button" data-tooltip="Add image" data-position="bottom center" data-variation="mini" data-inverted=""
     title="Add image" [disabled]="isAssetBrowserReadOnly || isEditorFocused" (click)="initializeImagePicker('question')"
     class="ui icon button insert-image-btn">
     <i class="image outline icon" aria-hidden="true"></i>
@@ -9,6 +9,13 @@
     <div class="characterCount">
       {{configService.labelConfig?.lbl?.charactersLeft}} {{charactersLeft}}
     </div>
+    <div *ngIf="imageIconPosition === 'bottom'">
+      <button type="button" data-tooltip="Add image" data-position="bottom center"
+      data-variation="mini" data-inverted="" title="Add image" [disabled]="isAssetBrowserReadOnly || isEditorFocused"
+      (click)="initializeImagePicker('question')" class="ui icon button bottomImage">
+      <i class="image outline icon" aria-hidden="true"></i>
+      </button>
+    </div>
   </div>
 </div>
 

projects/questionset-editor-library/src/lib/components/ckeditor-tool/ckeditor-tool.component.scss

@@ -16,7 +16,14 @@
   font-size: 11px;
   font-weight: bold;
   margin-top: -16px;
-  position: relative
+  position: relative;
+}
+
+.bottomImage {
+  background-color: transparent;
+  z-index: 1;
+  font-size: 12px;
+  float:right;
 }
 
 .custom-image img {

projects/questionset-editor-library/src/lib/components/ckeditor-tool/ckeditor-tool.component.ts

@@ -21,6 +21,7 @@ export class CkeditorToolComponent implements OnInit, AfterViewInit, OnChanges {
   @Output() videoDataOutput = new EventEmitter<any>();
   @Input() videoShow;
   @Input() setCharacterLimit: number;
+  @Input() imageIconPosition = 'default';
   @Input() setImageLimit: any;
   public editorConfig: any;
   public imageUploadLoader = false;

projects/questionset-editor-library/src/lib/components/match/match.component.html

@@ -0,0 +1,82 @@
+<ng-container *ngIf="!isReadOnlyMode">
+  <div class="pt-10 fs-0-92 sb-w-85">
+    <label class="fs-0-92 font-weight-bold">
+      {{configService.labelConfig?.lbl?.setAnswers}}
+      <span class="sb-required">*</span>
+    </label>
+    <label class="fs-0-92 d-inline-block">
+      {{configService.labelConfig?.lbl?.selectLayout}}
+    </label>
+    <i class="icon info circle ml-8" suiPopup popupDelay="500"
+      popupText={{configService.labelConfig?.lbl?.optionsPopupText}}></i>
+    <span class="divider mr-8"></span>
+    <span>
+      <button class="sb-btn sb-btn-xs sb-btn-outline-gray mr-5 q-sb-layout-two"
+        [ngClass]="{active: 'mtf-vertical' === templateType}" (click)="setTemplate('mtf-vertical')">
+        <i class="mr-10 h-7 w-20"></i>
+        {{configService.labelConfig?.lbl?.vertical}}
+      </button>
+    </span>
+    <span>
+      <button class="sb-btn sb-btn-xs sb-btn-outline-gray mr-5 q-sb-layout-single"
+        [ngClass]="{active: 'mtf-horizontal' === templateType}" (click)="setTemplate('mtf-horizontal')">
+        <i class="mr-10 h-7"></i>
+        {{configService.labelConfig?.lbl?.horizontal}}
+      </button>
+    </span>
+  </div>
+  <div class="d-flex pt-10 flex-dc sb-mcq-form">
+    <div class="d-flex flex-w-wrap" *ngFor="let option of editorState.options; let i = index">
+      <div class="w-100 mb-24">
+        <div class="d-flex flex-w-wrap flex-jc-space-between w-100">
+          <div class="w-49">
+            <lib-ckeditor-tool [setCharacterLimit]="setCharacterLimit"
+              (editorDataOutput)="option.left = $event.body; option.leftLength = $event.length; editorDataHandler($event);"
+              [editorDataInput]="option.left" class="ckeditor-tool__option mb-10" [imageIconPosition]="'bottom'"
+              [class.mb-5]="showFormError && ([undefined, ''].includes(option.left.body) || option.left.length > setCharacterLimit)">
+            </lib-ckeditor-tool>
+            <label class="ui basic red error label pt-1" *ngIf="option.leftLength > setCharacterLimit">
+              {{configService.labelConfig?.lbl?.reduceSize}}
+            </label>
+            <label class="sb-color-error fs-0-785"
+              *ngIf="showFormError && (option.left === undefined || option.left === '')">
+              {{configService.labelConfig?.lbl?.fillThisOption}}
+            </label>
+          </div>
+          <div class="w-49">
+            <lib-ckeditor-tool [setCharacterLimit]="setCharacterLimit"
+              (editorDataOutput)="option.right = $event.body; option.rightLength = $event.length; editorDataHandler($event);"
+              [editorDataInput]="option.right" class="ckeditor-tool__option mb-10" [imageIconPosition]="'bottom'"
+              [class.mb-5]="showFormError && ([undefined, ''].includes(option.right.body) || option.right.length > setCharacterLimit)">
+            </lib-ckeditor-tool>
+            <label class="ui basic red error label pt-1" *ngIf="option.rightLength > setCharacterLimit">
+              {{configService.labelConfig?.lbl?.reduceSize}}
+            </label>
+            <label class="sb-color-error fs-0-785"
+              *ngIf="showFormError && (option.right === undefined || option.right === '')">
+              {{configService.labelConfig?.lbl?.fillThisOption}}
+            </label>
+          </div>
+        </div>
+        <div>
+          <button class="sb-btn sb-btn-xs sb-left-icon-btn text-inherit b-0 bg-none no-hover p-0 mb-10 mt-10 right"
+            [disabled]="editorState.options.length < 3"
+            (click)="editorState.deleteOptions(i);editorDataHandler($event);" libTelemetryInteract
+            [telemetryInteractEdata]="telemetryService.getTelemetryInteractEdata('delete_option','click','submit',telemetryService.telemetryPageId)">
+            <i class="icon trash outline fs-1-286 pull-left mr-0"></i>
+            <span class="sb-line-height-24">{{configService.labelConfig?.button_labels?.delete_pair_btn_label}}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex">
+      <button *ngIf="editorState.options.length < editorState.maximumOptions"
+        class="sb-btn sb-btn-outline-primary sb-btn-xs sb-left-icon-btn text-inherit b-0 bg-none no-hover p-0 mb-10 mt-10"
+        (click)="editorState.addOptions();editorDataHandler($event);" libTelemetryInteract
+        [telemetryInteractEdata]="telemetryService.getTelemetryInteractEdata('add_option','click','submit',telemetryService.telemetryPageId)">
+        <i class="plus circle icon fs-1-286 pull-left mr-0" aria-hidden="true"></i>
+        <span class="sb-line-height-24">{{configService.labelConfig?.lbl?.addPair}}</span>
+      </button>
+    </div>
+  </div>
+</ng-container>

projects/questionset-editor-library/src/lib/components/match/match.component.scss

@@ -0,0 +1,56 @@
+.q-sb-layout-single{
+  &:before{
+    content: url("/assets/images/layoutoneicon.svg");
+  }
+  &.active,
+  &:hover
+  {
+    border-color: var(--primary-400);
+    background-color: #ffffff;
+    color: var(--primary-400);
+    &:before{
+      content: url("/assets/images/layoutoneicon_blue.svg");
+    } 
+  }
+}
+.q-sb-layout-two{
+  &:before{
+    content: url("/assets/images/layouttwoicon.svg");
+  }
+  &.active,
+  &:hover
+  {
+    border-color: var(--primary-400);
+    background-color: #ffffff;
+    color: var(--primary-400);
+    &:before{
+      content: url("/assets/images/layouttwoicon_blue.svg");
+    } 
+  }
+}
+
+.b-0{
+    border: 0 !important;
+}
+
+.bg-none{
+    background-color: transparent !important;
+
+    &:hover,
+    &:focus {
+        background-color: transparent !important;
+    }
+}
+
+.w-49{
+    width: 49%;
+    max-width: 49%;
+}
+
+.sb-line-height-24 {
+  line-height: 24px;
+}
+
+.right{
+    float: right;
+}

projects/questionset-editor-library/src/lib/components/match/match.component.spec.data.ts

@@ -0,0 +1,131 @@
+export const mockOptionData = {
+  editorOptionData: {
+    question: "<p>Match the pairs?</p>",
+    options: [
+      {
+        left: "<p>2</p>",
+        right: "<p>even</p>",
+      },
+      {
+        left: "<p>3</p>",
+        right: "<p>odd</p>",
+      },
+    ],
+    templateId: "mtf-vertical",
+    correctMatchPair: [
+      {
+          "left": 0,
+          "right": [0]
+      },
+      {
+          "left": 1,
+          "right": [1]
+      }
+    ],
+    numberOfOptions: 4,
+  },
+  prepareMtfBody: {
+    templateId: "mtf-horizontal",
+    name: "Match The Following Question",
+    responseDeclaration: {
+      "response1": {
+          "cardinality": "ordered",
+          "type": "map",
+          "correctResponse": {
+              "value": [
+                  {
+                      "left": 0,
+                      "right": [0]
+                  },
+                  {
+                      "left": 1,
+                      "right": [1]
+                  }
+              ]
+          },
+          "mapping": [
+              {
+                  "value": {
+                      "left": 0,
+                      "right": 0
+                  },
+                  "score": 0.5
+              },
+              {
+                  "value": {
+                      "left": 1,
+                      "right": 1
+                  },
+                  "score": 0.5
+              }
+          ]
+      }
+    },
+    interactionTypes: ["match"],
+    interactions: {
+      "response1": {
+          "type": "match",
+          "options": {
+              "left": [
+                  {
+                      "label": "<p>2</p>",
+                      "value": 0
+                  },
+                  {
+                      "label": "<p>3</p>",
+                      "value": 1
+                  }
+              ],
+              "right": [
+                  {
+                      "label": "<p>even</p>",
+                      "value": 0
+                  },
+                  {
+                      "label": "<p>odd</p>",
+                      "value": 1
+                  }
+              ]
+          },
+          "validation": {
+              "required": "Yes"
+          }
+      }
+    },
+    editorState: {
+      "options": {
+          "left": [
+              {
+                  "value": {
+                      "body": "<p>2</p>",
+                      "value": 0
+                  }
+              },
+              {
+                  "value": {
+                      "body": "<p>3</p>",
+                      "value": 1
+                  }
+              }
+          ],
+          "right": [
+              {
+                  "value": {
+                      "body": "<p>even</p>",
+                      "value": 0
+                  }
+              },
+              {
+                  "value": {
+                      "body": "<p>odd</p>",
+                      "value": 1
+                  }
+              }
+          ]
+      },
+      "question": "<p>Match the pairs</p>"
+    },
+    qType: "MTF",
+    primaryCategory: "Match The Following Question",
+  },
+};