@pie-element/explicit-constructed-response 3.13.0 → 3.13.3

package/module/configure.js

@@ -1,6 +1,6 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_lodash, _dll_material_ui__icons, _dll_react_dom, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.13/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.5.0/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.2.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_classnames, _dll_material_ui__core_styles, _dll_lodash, _dll_material_ui__icons, _dll_react_dom, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.19/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.5.6/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.3.1/module/index.js";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -384,6 +384,7 @@ const require$$8 = _dll_react;
 const require$$9$3 = _dll_prop_types;
 const require$$10$4 = _dll_material_ui__core_styles;
 const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
+const require$$12$4 = _dll_classnames;
 (function (exports) {
   var _interopRequireDefault = interopRequireDefault.exports;
   Object.defineProperty(exports, "__esModule", {
@@ -401,6 +402,7 @@ const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
   var _propTypes = _interopRequireDefault(require$$9$3);
   var _styles = require$$10$4;
   var _OutlinedInput = _interopRequireDefault(require$$11$4);
+  _interopRequireDefault(require$$12$4);
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
@@ -509,7 +511,8 @@ const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
     }, {
       key: "render",
       value: function render() {
-        var classes = this.props.classes;
+        var _this$props3 = this.props, classes = _this$props3.classes;
+        _this$props3.error;
         var _this$state = this.state, markup = _this$state.markup, toolbarStyle = _this$state.toolbarStyle;
         return _react["default"].createElement("div", {
           style: _objectSpread(_objectSpread({}, toolbarStyle), {}, {
@@ -554,6 +557,9 @@ const {OutlinedInput: require$$11$4} = _dll_material_ui__core;
     input: {
       backgroundColor: '#fff',
       padding: '10px 20px 10px 10px'
+    },
+    errorInput: {
+      border: '2px solid red'
     }
   })(ECRToolbar);
   var _default = StyledECRToolbar;
@@ -622,7 +628,7 @@ const require$$9$2 = _dll_react;
 const require$$10$3 = _dll_prop_types;
 const {debounce: require$$11$3} = _dll_lodash;
 const {isEqual: require$$12$3} = _dll_lodash;
-const {max: require$$21} = _dll_lodash;
+const {max: require$$21$1} = _dll_lodash;
 const {OutlinedInput: require$$13$3} = _dll_material_ui__core;
 const {Button: require$$14$2} = _dll_material_ui__core;
 const {IconButton: require$$16$1} = _dll_material_ui__core;
@@ -630,7 +636,8 @@ const {MenuItem: require$$17$1} = _dll_material_ui__core;
 const {Select: require$$18$1} = _dll_material_ui__core;
 const {TextField: require$$19$1} = _dll_material_ui__core;
 const {Delete: require$$15$1} = _dll_material_ui__icons;
-const require$$20 = _dll_material_ui__core_styles;
+const require$$20$1 = _dll_material_ui__core_styles;
+const require$$22 = _dll_classnames;
 (function (exports) {
   var _interopRequireDefault = interopRequireDefault.exports;
   Object.defineProperty(exports, "__esModule", {
@@ -656,8 +663,9 @@ const require$$20 = _dll_material_ui__core_styles;
   var _MenuItem = _interopRequireDefault(require$$17$1);
   var _Select = _interopRequireDefault(require$$18$1);
   var _TextField = _interopRequireDefault(require$$19$1);
-  var _styles = require$$20;
-  var _max = _interopRequireDefault(require$$21);
+  var _styles = require$$20$1;
+  var _max = _interopRequireDefault(require$$21$1);
+  var _classnames = _interopRequireDefault(require$$22);
   var _markupUtils = markupUtils;
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -736,6 +744,15 @@ const require$$20 = _dll_material_ui__core_styles;
       lengthField: {
         width: '230px',
         marginRight: '20px'
+      },
+      errorText: {
+        fontSize: '12px',
+        color: 'red',
+        paddingTop: '5px'
+      },
+      inputError: {
+        border: '2px solid red',
+        borderRadius: '6px'
       }
     };
   };
@@ -775,15 +792,15 @@ const require$$20 = _dll_material_ui__core_styles;
       key: "render",
       value: function render() {
         var value = this.state.value;
-        var _this$props = this.props, classes = _this$props.classes, onDelete = _this$props.onDelete, spellCheck = _this$props.spellCheck;
-        return _react["default"].createElement("div", {
+        var _this$props = this.props, classes = _this$props.classes, onDelete = _this$props.onDelete, spellCheck = _this$props.spellCheck, error = _this$props.error;
+        return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
           style: {
             alignItems: 'center',
             display: 'flex',
             justifyContent: 'space-between'
           }
         }, _react["default"].createElement(_OutlinedInput["default"], {
-          className: classes.choice,
+          className: (0, _classnames["default"])(classes.choice, error && classes.inputError),
           value: value,
           onChange: this.onChange,
           labelWidth: 0,
@@ -793,7 +810,9 @@ const require$$20 = _dll_material_ui__core_styles;
           "aria-label": "delete",
           className: classes.deleteBtn,
           onClick: onDelete
-        }, _react["default"].createElement(_Delete["default"], null)));
+        }, _react["default"].createElement(_Delete["default"], null))), error && _react["default"].createElement("div", {
+          className: classes.errorText
+        }, error));
       }
     }]);
     return Choice;
@@ -899,7 +918,7 @@ const require$$20 = _dll_material_ui__core_styles;
       key: "render",
       value: function render() {
         var _this3 = this;
-        var _this$props2 = this.props, classes = _this$props2.classes, selectChoices = _this$props2.selectChoices, maxLength = _this$props2.maxLength, showMaxLength = _this$props2.showMaxLength, value = _this$props2.value, spellCheck = _this$props2.spellCheck;
+        var _this$props2 = this.props, classes = _this$props2.classes, selectChoices = _this$props2.selectChoices, maxLength = _this$props2.maxLength, showMaxLength = _this$props2.showMaxLength, value = _this$props2.value, spellCheck = _this$props2.spellCheck, errors = _this$props2.errors;
         var choices = this.state.choices;
         var minLength = this.getChoicesMaxLength();
         return _react["default"].createElement("div", {
@@ -936,7 +955,9 @@ const require$$20 = _dll_material_ui__core_styles;
           variant: "contained",
           color: "primary",
           onClick: this.onAddChoice
-        }, "Add"))), _react["default"].createElement("div", {
+        }, "Add"))), errors && errors[0] && _react["default"].createElement("div", {
+          className: classes.errorText
+        }, errors[0]), _react["default"].createElement("div", {
           className: classes.altChoices
         }, choices && choices.map(function (c, index) {
           return index > 0 && _react["default"].createElement(Choice, {
@@ -949,7 +970,8 @@ const require$$20 = _dll_material_ui__core_styles;
             onDelete: function onDelete() {
               return _this3.onRemoveChoice(c);
             },
-            spellCheck: spellCheck
+            spellCheck: spellCheck,
+            error: errors && errors[index]
           });
         })));
       }
@@ -1157,13 +1179,14 @@ const {cloneDeep: require$$14$1} = _dll_lodash;
       value: function render() {
         var _this2 = this;
         var choices = this.state.choices;
-        var _this$props2 = this.props, _this$props2$model = _this$props2.model, maxLengthPerChoice = _this$props2$model.maxLengthPerChoice, maxLengthPerChoiceEnabled = _this$props2$model.maxLengthPerChoiceEnabled, spellCheck = _this$props2.spellCheck;
+        var _this$props2 = this.props, _this$props2$model = _this$props2.model, maxLengthPerChoice = _this$props2$model.maxLengthPerChoice, maxLengthPerChoiceEnabled = _this$props2$model.maxLengthPerChoiceEnabled, spellCheck = _this$props2.spellCheck, choicesErrors = _this$props2.choicesErrors;
         return _react["default"].createElement("div", null, (0, _map["default"])(choices, function (c, key) {
           if (c && (maxLengthPerChoiceEnabled || c.length > 1)) {
             var selected = _this2.state.values[key];
             return _react["default"].createElement(_alternateSection["default"], {
               key: key,
               value: selected && selected.value,
+              errors: choicesErrors && choicesErrors[key],
               onSelect: function onSelect(choice) {
                 return _this2.onSectionSelect(choice, key);
               },
@@ -1212,6 +1235,17 @@ const {cloneDeep: require$$14$1} = _dll_lodash;
   exports["default"] = _default;
 })(alternateResponses);
 getDefaultExportFromCjs(alternateResponses);
+var utils = {};
+Object.defineProperty(utils, "__esModule", {
+  value: true
+});
+utils.generateValidationMessage = void 0;
+var generateValidationMessage = function generateValidationMessage(config) {
+  var maxResponseAreas = config.maxResponseAreas;
+  var responseAreasMessage = '\nThe response area content should ' + 'not be empty and should be unique.\nThere should be at least 1 ' + (maxResponseAreas ? ("and at most ").concat(maxResponseAreas, " ") : '') + 'response area' + (maxResponseAreas ? 's' : '') + ' defined.';
+  return 'Validation requirements:' + responseAreasMessage;
+};
+utils.generateValidationMessage = generateValidationMessage;
 const require$$10$1 = _dll_react;
 const require$$11$1 = _dll_prop_types;
 const {cloneDeep: require$$12$1} = _dll_lodash;
@@ -1220,6 +1254,8 @@ const {pick: require$$14} = _dll_lodash;
 const {throttle: require$$15} = _dll_lodash;
 const require$$18 = _dll_material_ui__core_styles;
 const {Typography: require$$19} = _dll_material_ui__core;
+const {Tooltip: require$$21} = _dll_material_ui__core;
+const {Info: require$$20} = _dll_material_ui__icons;
 const require$$16 = _dll_pie_lib__editable_html;
 const require$$17 = _dll_pie_lib__config_ui;
 (function (exports) {
@@ -1247,9 +1283,12 @@ const require$$17 = _dll_pie_lib__config_ui;
   var _configUi = require$$17;
   var _styles = require$$18;
   var _Typography = _interopRequireDefault(require$$19);
+  var _Info = _interopRequireDefault(require$$20);
+  var _Tooltip = _interopRequireDefault(require$$21);
   var _ecrToolbar = _interopRequireDefault(ecrToolbar);
   var _alternateResponses = _interopRequireDefault(alternateResponses);
   var _markupUtils = markupUtils;
+  var _utils = utils;
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -1374,6 +1413,20 @@ const require$$17 = _dll_pie_lib__config_ui;
         fontSize: '16px',
         lineHeight: '19px',
         marginTop: theme.spacing.unit * 4
+      },
+      tooltip: {
+        fontSize: '12px',
+        whiteSpace: 'pre',
+        maxWidth: '500px'
+      },
+      errorText: {
+        fontSize: '12px',
+        color: 'red',
+        padding: '5px 0'
+      },
+      flexContainer: {
+        display: 'flex',
+        alignItems: 'end'
       }
     };
   };
@@ -1543,9 +1596,11 @@ const require$$17 = _dll_pie_lib__config_ui;
       value: function render() {
         var _this2 = this;
         var _this$props7 = this.props, classes = _this$props7.classes, model = _this$props7.model, configuration = _this$props7.configuration, onConfigurationChanged = _this$props7.onConfigurationChanged, imageSupport = _this$props7.imageSupport;
-        var _ref = configuration || ({}), _ref$prompt = _ref.prompt, prompt = _ref$prompt === void 0 ? {} : _ref$prompt, _ref$partialScoring = _ref.partialScoring, partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring, _ref$rationale = _ref.rationale, rationale = _ref$rationale === void 0 ? {} : _ref$rationale, _ref$teacherInstructi = _ref.teacherInstructions, teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi, _ref$maxLengthPerChoi = _ref.maxLengthPerChoice, maxLengthPerChoice = _ref$maxLengthPerChoi === void 0 ? {} : _ref$maxLengthPerChoi, _ref$spellCheck = _ref.spellCheck, spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck, _ref$playerSpellCheck = _ref.playerSpellCheck, playerSpellCheck = _ref$playerSpellCheck === void 0 ? {} : _ref$playerSpellCheck;
-        var _ref2 = model || ({}), teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled, promptEnabled = _ref2.promptEnabled, rationaleEnabled = _ref2.rationaleEnabled, maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled, spellCheckEnabled = _ref2.spellCheckEnabled;
+        var _ref = configuration || ({}), _ref$prompt = _ref.prompt, prompt = _ref$prompt === void 0 ? {} : _ref$prompt, _ref$partialScoring = _ref.partialScoring, partialScoring = _ref$partialScoring === void 0 ? {} : _ref$partialScoring, _ref$rationale = _ref.rationale, rationale = _ref$rationale === void 0 ? {} : _ref$rationale, _ref$teacherInstructi = _ref.teacherInstructions, teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi, _ref$maxLengthPerChoi = _ref.maxLengthPerChoice, maxLengthPerChoice = _ref$maxLengthPerChoi === void 0 ? {} : _ref$maxLengthPerChoi, _ref$spellCheck = _ref.spellCheck, spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck, _ref$playerSpellCheck = _ref.playerSpellCheck, playerSpellCheck = _ref$playerSpellCheck === void 0 ? {} : _ref$playerSpellCheck, maxResponseAreas = _ref.maxResponseAreas;
+        var _ref2 = model || ({}), teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled, promptEnabled = _ref2.promptEnabled, rationaleEnabled = _ref2.rationaleEnabled, maxLengthPerChoiceEnabled = _ref2.maxLengthPerChoiceEnabled, spellCheckEnabled = _ref2.spellCheckEnabled, errors = _ref2.errors;
         var toolbarOpts = {};
+        var _ref3 = errors || ({}), responseAreasError = _ref3.responseAreasError, _ref3$choicesErrors = _ref3.choicesErrors, choicesErrors = _ref3$choicesErrors === void 0 ? {} : _ref3$choicesErrors;
+        var validationMessage = (0, _utils.generateValidationMessage)(configuration);
         switch (model.toolbarEditorPosition) {
           case 'top':
             toolbarOpts.position = 'top';
@@ -1603,9 +1658,27 @@ const require$$17 = _dll_pie_lib__config_ui;
           disableUnderline: true,
           toolbarOpts: toolbarOpts,
           spellCheck: spellCheckEnabled
-        })), _react["default"].createElement(_Typography["default"], {
+        })), _react["default"].createElement("div", {
+          className: classes.flexContainer
+        }, _react["default"].createElement(_Typography["default"], {
           className: classes.text
-        }, "Define Template, Choices, and Correct Responses"), _react["default"].createElement(_editableHtml["default"], {
+        }, "Define Template, Choices, and Correct Responses"), _react["default"].createElement(_Tooltip["default"], {
+          classes: {
+            tooltip: classes.tooltip
+          },
+          disableFocusListener: true,
+          disableTouchListener: true,
+          placement: 'right',
+          title: validationMessage
+        }, _react["default"].createElement(_Info["default"], {
+          fontSize: 'small',
+          color: 'primary',
+          style: {
+            marginLeft: '5px'
+          }
+        }))), responseAreasError && _react["default"].createElement("div", {
+          className: classes.errorText
+        }, responseAreasError), _react["default"].createElement(_editableHtml["default"], {
           activePlugins: _editableHtml.ALL_PLUGINS,
           toolbarOpts: {
             position: 'top'
@@ -1616,6 +1689,7 @@ const require$$17 = _dll_pie_lib__config_ui;
             options: {
               duplicates: true
             },
+            maxResponseAreas: maxResponseAreas,
             respAreaToolbar: function respAreaToolbar(node, value, onToolbarDone) {
               var model = _this2.props.model;
               var correctChoice = (model.choices[node.data.get('index')] || [])[0];
@@ -1631,6 +1705,9 @@ const require$$17 = _dll_pie_lib__config_ui;
                 });
               };
             },
+            error: function error() {
+              return choicesErrors;
+            },
             onHandleAreaChange: this.onHandleAreaChange
           },
           className: classes.markup,
@@ -1639,7 +1716,8 @@ const require$$17 = _dll_pie_lib__config_ui;
           imageSupport: imageSupport,
           onBlur: this.onBlur,
           disabled: false,
-          highlightShape: false
+          highlightShape: false,
+          error: responseAreasError
         }), !(0, _isEmpty["default"])(model.choices) && _react["default"].createElement(_Typography["default"], {
           className: classes.text
         }, ("Define Alternates ").concat(maxLengthPerChoiceEnabled ? 'and Character Limits' : '')), _react["default"].createElement(_alternateResponses["default"], {
@@ -1647,7 +1725,8 @@ const require$$17 = _dll_pie_lib__config_ui;
           onChange: this.onResponsesChanged,
           onLengthChange: this.onLengthChanged,
           maxLengthPerChoiceEnabled: maxLengthPerChoiceEnabled,
-          spellCheck: spellCheckEnabled
+          spellCheck: spellCheckEnabled,
+          choicesErrors: choicesErrors
         }), rationaleEnabled && _react["default"].createElement(_configUi.InputContainer, {
           label: rationale.label,
           className: classes.promptHolder
@@ -1767,7 +1846,8 @@ var defaults = {};
       maxLengthPerChoice: {
         settings: true,
         label: 'Maximum Length Per Choice'
-      }
+      },
+      maxResponseAreas: 10
     }
   };
   exports["default"] = _default;

package/module/controller.js

@@ -21343,4 +21343,48 @@ const createCorrectResponseSession = (question, env) => {
   });
 };
 
-export { createCorrectResponseSession, getScore, model, normalize, outcome, prepareChoice, prepareVal };
+const validate = (model = {}, config = {}) => {
+  const { choices, markup } = model;
+  const { maxResponseAreas } = config;
+  const allChoicesErrors = {};
+
+  Object.entries(choices || {}).forEach(([key, values]) => {
+    const reversedChoices = [...values || []].reverse();
+    const choicesErrors = {};
+
+    reversedChoices.forEach((choice, index) => {
+      const { value, label } = choice;
+
+      if (label === '' || label === '<div></div>') {
+        choicesErrors[value] = 'Content should not be empty.';
+      } else {
+        const identicalAnswer = reversedChoices.slice(index + 1).some(c => c.label === label);
+
+        if (identicalAnswer) {
+          choicesErrors[value] = 'Content should be unique.';
+        }
+      }
+    });
+
+    if (!isEmpty_1(choicesErrors)) {
+      allChoicesErrors[key] = choicesErrors;
+    }
+  });
+
+  const errors = {};
+  const nbOfResponseAreas = (markup.match(/\{\{(\d+)\}\}/g) || []).length;
+
+  if (nbOfResponseAreas > maxResponseAreas) {
+    errors.responseAreasError = `No more than ${maxResponseAreas} response areas should be defined.`;
+  } else if (nbOfResponseAreas < 1) {
+    errors.responseAreasError = 'There should be at least 1 response area defined.';
+  }
+
+  if (!isEmpty_1(allChoicesErrors)) {
+    errors.choicesErrors = allChoicesErrors;
+  }
+
+  return errors;
+};
+
+export { createCorrectResponseSession, getScore, model, normalize, outcome, prepareChoice, prepareVal, validate };