issue #IQ-523 feat: Added QUML compliance changes for Hints and Instructions

projects/questionset-editor-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@project-sunbird/sunbird-questionset-editor",
-  "version": "6.1.0-beta.4",
+  "version": "6.1.0-beta.5",
   "dependencies": {
     "tslib": "^2.0.0"
   },

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

@@ -3787,9 +3787,7 @@ export const nodesModifiedData = {
           appIcon: '',
           name: 'questionset',
           description: 'questionset',
-          instructions: {
-              default: '<p>quuestionset</p>'
-          },
+          instructions: '<p>quuestionset</p>',
           primaryCategory: 'Practice Question Set',
           additionalCategories: [],
           board: 'CBSE',

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

@@ -423,9 +423,7 @@ export const mockData = {
                   },
                 shuffle: true,
                 board: 'CBSE',
-                instructions: {
-                    default: '<p>Chapter 1:&nbsp;<i><strong>माता का अँचल</strong></i></p><p>Chapter 2:&nbsp;<i><strong>जॉर्ज पंचम की नाक</strong></i></p><p>Chapter 3:&nbsp;<i><strong>साना – साना हाथ जोड़ि</strong></i></p><p>Chapter 4:&nbsp;<i><strong>एही ठैयाँ झुलनी हेरानी हो रामा!</strong></i></p><p>Chapter 5:&nbsp;<i><strong>मैं क्यों लिखता हूँ?</strong></i></p><p>Chapter 6:<i><strong>&nbsp;लेखक परिचय</strong></i></p><p>Chapter 7:<i><strong>&nbsp;लेखक परिचय</strong></i></p>'
-                },
+                instructions:'<p>Chapter 1:&nbsp;<i><strong>माता का अँचल</strong></i></p><p>Chapter 2:&nbsp;<i><strong>जॉर्ज पंचम की नाक</strong></i></p><p>Chapter 3:&nbsp;<i><strong>साना – साना हाथ जोड़ि</strong></i></p><p>Chapter 4:&nbsp;<i><strong>एही ठैयाँ झुलनी हेरानी हो रामा!</strong></i></p><p>Chapter 5:&nbsp;<i><strong>मैं क्यों लिखता हूँ?</strong></i></p><p>Chapter 6:<i><strong>&nbsp;लेखक परिचय</strong></i></p><p>Chapter 7:<i><strong>&nbsp;लेखक परिचय</strong></i></p>',
                 level: 1
             },
             root: true

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

@@ -19,6 +19,22 @@ export const mockOptionData = {
     templateId: 'mcq-split-grid',
     answer: 0,
     numberOfOptions: 4,
+    interactions:{
+      response1:{
+        options:[
+          {
+              "label": "<p>Option1</p>",
+              "value": 'first',
+              "hint": "82baa452-62dc-4906-b63c-48e459f4589d"
+          },
+          {
+              "label": "<p>Option 222</p>",
+              "value": 'second',
+              "hint": "dce993df-3b74-48ad-b3b1-0cd7d739af2b"
+          }
+      ]
+      }
+    }
   },
   prepareMcqBody: {
     templateId: 'mcq-vertical',
@@ -101,13 +117,17 @@ export const mockOptionData = {
     [{
       id: 'addHint',
       name: 'Add Hint',
-      value: 'test',
+      value: 'first',
       enabled: false,
       type: 'input',
       label: 'label',
       show:true
     }]
-  ]
+  ],
+  hints:{
+    '82baa452-62dc-4906-b63c-48e459f4589d':{en:'first'},
+    'dce993df-3b74-48ad-b3b1-0cd7d739af2b':{en:'second'}
+  }
 };
 
 export const sourcingSettingsMock = {

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

@@ -250,9 +250,10 @@ describe('OptionsComponent', () => {
 
   it('#subMenuChange() should set the sub-menu value ', () => {
     component.subMenus =  mockOptionData.subMenus;
+    component.hints = mockOptionData.hints;
     spyOn(component, 'subMenuChange').and.callThrough();
-    component.subMenuChange({index:1,value:'test'},1)
-    expect(component.subMenus[0][0].value).toBe('test');
+    component.subMenuChange({index:1,value:'first'},1)
+    expect(component.subMenus[0][0].value).toBe('first');
   })
 
   it('#subMenuConfig() should set on initialize', () => {

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

@@ -5,6 +5,7 @@ import { ConfigService } from '../../services/config/config.service';
 import { SubMenu } from '../question-option-sub-menu/question-option-sub-menu.component';
 import { TreeService } from '../../services/tree/tree.service';
 import { EditorService } from '../../services/editor/editor.service';
+import { v4 as uuidv4 } from 'uuid';
 @Component({
   selector: 'lib-options',
   templateUrl: './options.component.html',
@@ -23,7 +24,7 @@ export class OptionsComponent implements OnInit, OnChanges {
   public setImageLimit = 1;
   public templateType = 'mcq-vertical';
   subMenus: SubMenu[][];
-  hints = [];
+  hints:any = {};
   showSubMenu:boolean=false;
   parentMeta: any;
   selectedOptions = [];
@@ -35,6 +36,7 @@ export class OptionsComponent implements OnInit, OnChanges {
   ) {}
 
   ngOnInit() {
+    this.hints = this.editorState.hints ? this.editorState.hints : {};
     if(!_.isUndefined(this.editorState.answer)) {
       this.addSelectedOptions();
     }
@@ -110,12 +112,14 @@ export class OptionsComponent implements OnInit, OnChanges {
       outcomeDeclaration: this.getOutcomeDeclaration(),
       interactionTypes: ['choice'],
       interactions: this.getInteractions(editorState.options),
+      hints:this.hints,
       editorState: {
         options,
       },
       qType: 'MCQ',
       primaryCategory: this.questionPrimaryCategory || 'Multiple Choice Question',
     };
+    this.subMenuConfig(editorState.options);
     return metadata;
   }
 
@@ -172,10 +176,8 @@ export class OptionsComponent implements OnInit, OnChanges {
     let index;
     const interactOptions = _.map(options, (opt, key) => {
       index = Number(key);
-      const hints  = _.get(this.editorState, `interactions.response1.options[${index}].hints`)
-      return { label: opt.body, value: index, hints };
+      return { label: opt.body, value: index,  hint: this.hints[this.editorState?.interactions?.response1?.options[index]?.hint] ? Object.keys(this.hints).find(element => element == this.editorState?.interactions?.response1?.options[index]?.hint) : '' };
     });
-    this.subMenuConfig(options);
     const interactions = {
       response1: {
         type: 'choice',
@@ -191,20 +193,34 @@ export class OptionsComponent implements OnInit, OnChanges {
   }
 
   subMenuChange({ index, value }, optionIndex) {
-    _.set(this.editorState, `interactions.response1.options[${optionIndex}].hints.en`, value)
+    if(value.length && Object.keys(this.hints).length < this.editorState.interactions.response1.options.length ) {
+      const hint = {[uuidv4()] : {en:value}}
+      this.hints = {...this.hints, ...hint}
+      this.editorState.interactions.response1.options[optionIndex].hint = Object.keys(hint)[0]
+    }
+    else if (value.length) {
+      this.hints[this.editorState.interactions.response1.options[optionIndex].hint].en = value;
+    }
   }
 
   subMenuConfig(options) {
     this.subMenus = []
     options.map((opt, index) => {
-      const value  = _.get(this.editorState, `interactions.response1.options[${index}].hints.en`)
+      const uuid  = _.get(this.editorState, `interactions.response1.options[${index}].hint`)
       this.subMenus[index] = [
         {
           id: 'addHint',
           name: 'Add Hint',
-          value,
+          value: (():any => {
+            if(this.hints[uuid]) {
+              return this.hints[uuid].en
+            }
+            else {
+              return this.editorState?.hints?.[uuid] ? this.editorState.hints[uuid].en : ''
+            }
+          })(),
           label: 'Hint',
-          enabled: value ? true : false,
+          enabled: _.get(this.editorState, `interactions.response1.options[${index}].hint`) ? true : false,
           type: 'input',
           show: _.get(this.sourcingSettings, 'showAddHints'),
         },