Backport AUT-3940 (#2633)

* fix: rename order attribute to data-order in order interaction

* fix: add legacy attr support

* fix: add legacy attr remove

* fix: rollback refactoring

* fix: typo fix

* fix: fix error on correct tab

* fix: fix correct tab error in case new empty item

* fix: runner-qti version bump

* chore: bundles update

---------

Co-authored-by: KirylHatalski <kirill.gatalsky@taotesting.com>

views/js/qtiCreator/model/interactions/OrderInteraction.js

@@ -18,7 +18,7 @@ define([
             };
         },
         afterCreate : function(){
-            this.attr('order', 'single')
+            this.attr('data-order', 'single');
             this.createChoice();
             this.createChoice();
             this.createChoice();

views/js/qtiCreator/widgets/interactions/orderInteraction/states/Correct.js

@@ -3,28 +3,27 @@ define([
     'taoQtiItem/qtiCreator/widgets/states/Correct',
     'taoQtiItem/qtiCommonRenderer/renderers/interactions/OrderInteraction',
     'taoQtiItem/qtiCommonRenderer/helpers/instructions/instructionManager',
-    'lodash',
     'i18n'
-], function(stateFactory, Correct, commonRenderer, instructionMgr, _, __){
-
-    var InlineChoiceInteractionStateCorrect = stateFactory.create(Correct, function(){
-
-        _createResponseWidget(this.widget);
-
-    }, function(){
-
-        _destroyResponseWidget(this.widget);
-
-    });
-    
-    var _createResponseWidget = function(widget){
-
-        var interaction = widget.element,
-            response = interaction.getResponseDeclaration(),
-            correctResponse = _.values(response.getCorrect());
+], function(stateFactory, Correct, commonRenderer, instructionMgr, __){
+
+    const InlineChoiceInteractionStateCorrect = stateFactory.create(
+        Correct,
+        function () {
+            _createResponseWidget(this.widget);
+        },
+        function () {
+            _destroyResponseWidget(this.widget);
+        }
+    );
+
+    const _createResponseWidget = widget => {
+
+        const interaction = widget.element;
+        const response = interaction.getResponseDeclaration();
+        const correctResponse = response.getCorrect() ? Object.values(response.getCorrect()) : [];
         instructionMgr.appendInstruction(
           widget.element,
-          interaction.attr('order') === 'single'
+          interaction.attr('data-order') === 'single'
             ? __('Please define the correct order.')
             : __('Please define the correct order in the box to the right.')
         );
@@ -36,27 +35,22 @@ define([
             response.setCorrect(_unformatResponse(data.response));
         });
     };
-
-    var _destroyResponseWidget = function(widget){
-
-        widget.$container.off('responseChange.qti-widget');
 
+    const _destroyResponseWidget = widget => {
+        widget.$container.off('responseChange.qti-widget');
         commonRenderer.resetResponse(widget.element);
-
         commonRenderer.destroy(widget.element);
     };
-
-    var _formatResponse = function(response){
-        return {list : {identifier : response}};
-    };
 
-    var _unformatResponse = function(formatedResponse){
-        var res = [];
+    const _formatResponse = response => ({ list : { identifier : response } });
+
+    const _unformatResponse = function(formatedResponse){
+        let res = [];
         if(formatedResponse.list && formatedResponse.list.identifier){
             res = formatedResponse.list.identifier;
         }
         return res;
     };
-    
+
     return InlineChoiceInteractionStateCorrect;
 });

views/js/qtiCreator/widgets/interactions/orderInteraction/states/Question.js

@@ -28,11 +28,11 @@ define([
     'services/features',
     'ui/liststyler'
 ], function (
-    _, 
-    stateFactory, 
-    Question, 
-    formElement, 
-    minMaxComponentFactory, 
+    _,
+    stateFactory,
+    Question,
+    formElement,
+    minMaxComponentFactory,
     formTpl,
     sizeAdapter,
     features
@@ -54,7 +54,11 @@ define([
         var $iconRemove = this.widget.$container.find('.icon-remove-from-selection');
         let minMaxComponent = null;
 
-        const order = interaction.attr('order');
+        const order = interaction.attr('data-order') || interaction.attr('order'); // legacy attr support
+        // legacy attr remove
+        if (interaction.attr('order')) {
+            interaction.removeAttr('order');
+        }
         const isSingleOrder = order === 'single';
         const minValue = interaction.attr('minChoices')
             ? _.parseInt(interaction.attr('minChoices'))
@@ -79,17 +83,17 @@ define([
                 });
             });
         };
-        
+
         const deleteMinMaxComponent = () => {
             $form.find('.min-max-panel').hide();
             if (minMaxComponent) {
                 minMaxComponent.destroy();
                 minMaxComponent = null;
             }
         };
-            
-        const makeSignleOrder = () => {
-            interaction.attr('order', 'single');
+
+        const makeSingleOrder = () => {
+            interaction.attr('data-order', 'single');
             interaction.attr('minChoices', 0);
             interaction.attr('maxChoices', 0);
             $interaction.addClass('qti-single');
@@ -103,7 +107,7 @@ define([
         }
 
         const makeSortOrder = () => {
-            interaction.attr('order', 'sort');
+            interaction.attr('data-order', 'sort');
             $interaction.removeClass('qti-single');
             createMinMaxComponent();
         }
@@ -117,7 +121,7 @@ define([
                 orientation: features.isVisible('taoQtiItem/creator/interaction/order/property/orientation')
             }
         }));
-        isSingleOrder ? makeSignleOrder() : makeSortOrder();
+        isSingleOrder ? makeSingleOrder() : makeSortOrder();
 
         formElement.initWidget($form);
 
@@ -151,7 +155,7 @@ define([
 
         // data change for order
         callbacks.order = function (interaction, value) {
-            value === 'sort' ? makeSortOrder() : makeSignleOrder();
+            value === 'sort' ? makeSortOrder() : makeSingleOrder();
         };
 
         formElement.setChangeCallbacks($form, interaction, callbacks);

views/package.json

@@ -9,6 +9,6 @@
     },
     "dependencies": {
         "@oat-sa/tao-item-runner": "^1.0.0",
-        "@oat-sa/tao-item-runner-qti": "^2.5.1"
+        "@oat-sa/tao-item-runner-qti": "^2.5.2"
     }
 }