@pie-element/multiple-choice 6.2.5 → 6.3.0

package/module/configure.js

@@ -1,6 +1,6 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_lodash, _dll_pie_lib__render_ui, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.8/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.31/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.2.7/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_lodash, _dll_material_ui__icons, _dll_pie_lib__render_ui, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.13/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.2.0/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.5.0/module/index.js";
 var lib = {};
 Object.defineProperty(lib, "__esModule", {
   value: true
@@ -46,6 +46,13 @@ class InsertImageEvent extends CustomEvent {
 }
 InsertImageEvent.TYPE = 'insert.image';
 var InsertImageEvent_1 = lib.InsertImageEvent = InsertImageEvent;
+const generateValidationMessage = config => {
+  const {minAnswerChoices, maxAnswerChoices} = config;
+  const answerChoicesMessage = `\nThere should be at least ${minAnswerChoices} ` + (maxAnswerChoices ? `and at most ${maxAnswerChoices} ` : '') + 'answer choices defined.' + '\nEvery answer choice should be non-blank and unique.';
+  const correctAnswerMessage = '\nA correct answer must be defined.';
+  const message = 'Validation requirements:' + answerChoicesMessage + correctAnswerMessage;
+  return message;
+};
 const React$1 = _dll_react;
 const PropTypes = _dll_prop_types;
 const {color: color} = _dll_pie_lib__render_ui;
@@ -55,7 +62,9 @@ const {Tooltip: Tooltip} = _dll_material_ui__core;
 const {Dialog: Dialog} = _dll_material_ui__core;
 const {DialogTitle: DialogTitle} = _dll_material_ui__core;
 const {DialogActions: DialogActions} = _dll_material_ui__core;
+const {Typography: Typography} = _dll_material_ui__core;
 const {merge: merge} = _dll_lodash;
+const {Info: Info} = _dll_material_ui__icons;
 const EditableHtml = _dll_pie_lib__editable_html;
 const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
 const {ChoiceConfiguration: ChoiceConfiguration} = _dll_pie_lib__config_ui;
@@ -117,13 +126,36 @@ const styles = theme => ({
     '&:focus': {
       backgroundColor: color.disabled()
     }
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '5px'
+  },
+  titleText: {
+    fontFamily: 'Cerebri Sans',
+    fontSize: '18px',
+    lineHeight: '19px',
+    color: '#495B8F',
+    marginRight: '5px'
+  },
+  tooltip: {
+    fontSize: '12px',
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  },
+  errorText: {
+    fontSize: '12px',
+    color: 'red',
+    paddingTop: '5px'
   }
 });
 const Design = withStyles(styles)(props => {
   const {classes, model, configuration, onPromptChanged, onChoiceChanged, onRemoveChoice, onAddChoice, imageSupport, onChangeModel, onConfigurationChanged, onTeacherInstructionsChanged} = props;
   const {prompt = {}, addChoiceButton = {}, feedback = {}, deleteChoice = {}, choiceMode = {}, choicePrefix = {}, partialScoring = {}, lockChoiceOrder = {}, teacherInstructions = {}, studentInstructions = {}, rationale = {}, accessibility = {}, scoringType = {}, sequentialChoiceLabels = {}, settingsPanelDisabled, choicesLayout, spellCheck = {}, gridColumns} = configuration || ({});
   let {maxAnswerChoices} = configuration || ({});
-  const {limitChoicesNumber, teacherInstructionsEnabled, rationaleEnabled, accessibilityLabelsEnabled, feedbackEnabled, promptEnabled, spellCheckEnabled, choices} = model || ({});
+  const {limitChoicesNumber, teacherInstructionsEnabled, rationaleEnabled, accessibilityLabelsEnabled, feedbackEnabled, promptEnabled, spellCheckEnabled, choices, errors} = model || ({});
+  const {choicesErrors, correctResponseError, answerChoicesError} = errors || ({});
   const nrOfColumnsAvailable = choices && choices.length ? Array.from({
     length: choices.length
   }, (_, i) => `${i + 1}`) : [];
@@ -147,11 +179,12 @@ const Design = withStyles(styles)(props => {
   if (limitChoicesNumber) {
     maxAnswerChoices = MAX_CHOICES;
   }
+  const validationMessage = generateValidationMessage(configuration);
   const Content = React$1.createElement('div', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 152
+      lineNumber: 180
     }
   }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
     label: teacherInstructions.label,
@@ -159,7 +192,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 154
+      lineNumber: 182
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.prompt,
@@ -172,7 +205,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 158
+      lineNumber: 186
     }
   })), promptEnabled && React$1.createElement(InputContainer, {
     label: prompt.label,
@@ -180,7 +213,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 171
+      lineNumber: 199
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.prompt,
@@ -194,15 +227,64 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 172
+      lineNumber: 200
+    }
+  })), React$1.createElement('div', {
+    className: classes.flexContainer,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 212
+    }
+  }, React$1.createElement(Typography, {
+    className: classes.titleText,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 213
+    }
+  }, "Choices"), React$1.createElement(Tooltip, {
+    classes: {
+      tooltip: classes.tooltip
+    },
+    disableFocusListener: true,
+    disableTouchListener: true,
+    placement: 'right',
+    title: validationMessage,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 214
+    }
+  }, React$1.createElement(Info, {
+    fontSize: 'small',
+    color: 'primary',
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 221
+    }
+  }))), correctResponseError && React$1.createElement('div', {
+    className: classes.errorText,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 224
     }
-  })), model.choices.map((choice, index) => React$1.createElement('div', {
+  }, correctResponseError), answerChoicesError && React$1.createElement('div', {
+    className: classes.errorText,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 225
+    }
+  }, answerChoicesError), choices.map((choice, index) => React$1.createElement('div', {
     key: `choice-${index}`,
     className: classes.choiceConfigurationHolder,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 185
+      lineNumber: 227
     }
   }, React$1.createElement(ChoiceConfiguration, {
     key: index,
@@ -220,10 +302,12 @@ const Design = withStyles(styles)(props => {
     noLabels: true,
     toolbarOpts: toolbarOpts,
     spellCheck: spellCheckEnabled,
+    error: choicesErrors && choicesErrors[choice.value] ? choicesErrors[choice.value] : null,
+    noCorrectAnswerError: correctResponseError,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 189
+      lineNumber: 231
     }
   }), rationaleEnabled && React$1.createElement(InputContainer, {
     key: `rationale-${index}`,
@@ -232,7 +316,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 207
+      lineNumber: 251
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.rationale,
@@ -248,7 +332,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 212
+      lineNumber: 256
     }
   })), accessibilityLabelsEnabled && React$1.createElement(InputContainer, {
     key: `accessibility-${index}`,
@@ -257,7 +341,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 229
+      lineNumber: 273
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.accessibility,
@@ -272,13 +356,13 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 234
+      lineNumber: 278
     }
   })))), React$1.createElement('br', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 251
+      lineNumber: 295
     }
   }), addChoiceButton.settings && React$1.createElement(Tooltip, {
     title: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '',
@@ -288,11 +372,11 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 253
+      lineNumber: 297
     }
   }, React$1.createElement(Button, {
     classes: {
-      root: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? classes.disableButton : undefined
+      root: maxAnswerChoices && model.choices.length >= maxAnswerChoices && classes.disableButton
     },
     className: classes.addButton,
     variant: "contained",
@@ -301,7 +385,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 261
+      lineNumber: 305
     }
   }, addChoiceButton.label)));
   const settingsInPanel = {
@@ -319,7 +403,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 303
+      lineNumber: 342
     }
   }, settingsPanelDisabled ? Content : React$1.createElement(layout.ConfigLayout, {
     settings: React$1.createElement(Panel, {
@@ -342,13 +426,13 @@ const Design = withStyles(styles)(props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 309
+        lineNumber: 348
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 307
+      lineNumber: 346
     }
   }, Content));
 });
@@ -357,19 +441,19 @@ const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dial
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 346
+    lineNumber: 385
   }
 }, React$1.createElement(DialogTitle, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 347
+    lineNumber: 386
   }
 }, title), React$1.createElement(DialogActions, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 348
+    lineNumber: 387
   }
 }, onOk && React$1.createElement(Button, {
   onClick: onOk,
@@ -377,7 +461,7 @@ const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dial
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 350
+    lineNumber: 389
   }
 }, "OK"), onCancel && React$1.createElement(Button, {
   onClick: onCancel,
@@ -385,7 +469,7 @@ const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dial
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 355
+    lineNumber: 394
   }
 }, "Cancel")));
 InfoDialog.propTypes = {
@@ -441,12 +525,7 @@ class Main extends React$1.Component {
                   open: false
                 }
               });
-            },
-            onCancel: () => this.setState({
-              dialog: {
-                open: false
-              }
-            })
+            }
           }
         });
       } else {
@@ -463,35 +542,17 @@ class Main extends React$1.Component {
       if (limitChoicesNumber) {
         maxAnswerChoices = MAX_CHOICES;
       }
-      if (maxAnswerChoices && model.choices.length === maxAnswerChoices) {
-        this.setState({
-          dialog: {
-            open: true,
-            message: `There can't be more than ${maxAnswerChoices} choices.`,
-            onOk: () => {
-              this.setState({
-                dialog: {
-                  open: false
-                }
-              });
-            },
-            onCancel: () => this.setState({
-              dialog: {
-                open: false
-              }
-            })
-          }
-        });
-      } else {
-        model.choices.push({
-          label: '',
-          value: utils$1.firstAvailableIndex(model.choices.map(c => c.value), 0),
-          feedback: {
-            type: 'none'
-          }
-        });
-        this.props.onModelChanged(model);
+      if (maxAnswerChoices && model.choices.length >= maxAnswerChoices) {
+        return;
       }
+      model.choices.push({
+        label: '',
+        value: utils$1.firstAvailableIndex(model.choices.map(c => c.value), 0),
+        feedback: {
+          type: 'none'
+        }
+      });
+      this.props.onModelChanged(model);
     };
   }
   __init4() {
@@ -563,7 +624,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 529
+        lineNumber: 542
       }
     }), React$1.createElement(Design, {
       ...this.props,
@@ -576,7 +637,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 534
+        lineNumber: 548
       }
     }));
   }
@@ -603,8 +664,8 @@ var sensibleDefaults = {
   },
   configuration: {
     spellCheck: {
-      label: "Spellcheck",
-      settings: true,
+      label: 'Spellcheck',
+      settings: false,
       enabled: true
     },
     choicesLayout: {

package/module/controller.js

@@ -20638,4 +20638,49 @@ const createCorrectResponseSession = (question, env) => {
   });
 };
 
-export { createCorrectResponseSession, createDefaultModel, getScore, model, normalize, outcome };
+const validate = (model = {}, config = {}) => {
+  const { choices } = model;
+  const { minAnswerChoices = 2, maxAnswerChoices } = config;
+  const reversedChoices = [...choices || []].reverse();
+  const choicesErrors = {};
+  let hasCorrectResponse = false;
+
+  reversedChoices.forEach((choice, index) => {
+    const { correct, value, label } = choice;
+
+    if (correct) {
+      hasCorrectResponse = true;
+    }
+
+    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.';
+      }
+    }
+  });
+
+  const errors = {};
+  const nbOfChoices = (choices || []).length;
+
+  if (nbOfChoices < minAnswerChoices) {
+    errors.answerChoicesError = `There should be at least ${minAnswerChoices} choices defined.`;
+  } else if (nbOfChoices > maxAnswerChoices) {
+    errors.answerChoicesError = `No more than ${maxAnswerChoices} choices should be defined.`;
+  }
+
+  if (!hasCorrectResponse) {
+    errors.correctResponseError = 'No correct response defined.';
+  }
+
+  if (!isEmpty_1(choicesErrors)) {
+    errors.choicesErrors = choicesErrors;
+  }
+
+  return errors;
+};
+
+export { createCorrectResponseSession, createDefaultModel, getScore, model, normalize, outcome, validate };

package/module/element.js

@@ -1,5 +1,5 @@
-import {_dll_prop_types, _dll_react_dom, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_material_ui__core, _dll_classnames, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.8/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.33/module/index.js";
+import {_dll_prop_types, _dll_react_dom, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_material_ui__core, _dll_classnames, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.13/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.1.1/module/index.js";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -34,8 +34,7 @@ var interopRequireDefault = {
       "default": obj
     };
   }
-  module.exports = _interopRequireDefault;
-  (module.exports["default"] = module.exports, module.exports.__esModule = true);
+  (module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports);
 })(interopRequireDefault);
 getDefaultExportFromCjs(interopRequireDefault.exports);
 var hasClass = {

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@6.2.4</title>
+      <title>@pie-element/multiple-choice@6.2.7</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/multiple-choice",
-  "version": "6.2.4",
+  "version": "6.2.7",
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.4.8"
+      "version": "^1.4.13"
     },
     {
       "name": "@pie-lib/math-rendering-module",
-      "version": "^1.0.33"
+      "version": "^1.1.1"
     }
   ]
 }

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@6.2.4</title>
+      <title>@pie-element/multiple-choice@6.2.7</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"

package/module/print.js

@@ -1,5 +1,5 @@
-import {_dll_prop_types, _dll_react_dom, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_material_ui__core, _dll_classnames, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.8/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.33/module/index.js";
+import {_dll_prop_types, _dll_react_dom, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_material_ui__core, _dll_classnames, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.13/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.1.1/module/index.js";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -34,8 +34,7 @@ var interopRequireDefault = {
       "default": obj
     };
   }
-  module.exports = _interopRequireDefault;
-  (module.exports["default"] = module.exports, module.exports.__esModule = true);
+  (module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports);
 })(interopRequireDefault);
 getDefaultExportFromCjs(interopRequireDefault.exports);
 var hasClass = {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "6.2.5",
+  "version": "6.3.0",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-lib/config-ui": "^10.10.24",
-    "@pie-lib/correct-answer-toggle": "^2.3.35",
-    "@pie-lib/math-rendering": "^2.3.13",
-    "@pie-lib/render-ui": "^4.12.5",
+    "@pie-lib/config-ui": "^10.12.1",
+    "@pie-lib/correct-answer-toggle": "^2.3.36",
+    "@pie-lib/math-rendering": "^2.4.0",
+    "@pie-lib/render-ui": "^4.12.6",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "enzyme-to-json": "^3.3.3",
@@ -21,7 +21,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "b32a90d35916de8f2b77d7b3428b02efbd145313",
+  "gitHead": "87c4247b2cca04380c8638f88e57bba47fb6c06a",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },