@pie-element/multiple-choice 6.2.7 → 6.3.2

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.10/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.0.33/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.2.9/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.17/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.2.4/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.5.4/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;
@@ -120,15 +129,15 @@ const styles = theme => ({
   },
   flexContainer: {
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginBottom: '5px'
   },
   titleText: {
     fontFamily: 'Cerebri Sans',
     fontSize: '18px',
     lineHeight: '19px',
     color: '#495B8F',
-    marginRight: '5px',
-    marginBottom: '5px'
+    marginRight: '5px'
   },
   tooltip: {
     fontSize: '12px',
@@ -145,7 +154,8 @@ 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}`) : [];
@@ -169,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: 178
+      lineNumber: 180
     }
   }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
     label: teacherInstructions.label,
@@ -181,7 +192,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 180
+      lineNumber: 182
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.prompt,
@@ -194,7 +205,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 184
+      lineNumber: 186
     }
   })), promptEnabled && React$1.createElement(InputContainer, {
     label: prompt.label,
@@ -202,7 +213,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 197
+      lineNumber: 199
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.prompt,
@@ -216,15 +227,64 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 198
+      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
+    }
+  }, correctResponseError), answerChoicesError && React$1.createElement('div', {
+    className: classes.errorText,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 225
     }
-  })), choices.map((choice, index) => React$1.createElement('div', {
+  }, answerChoicesError), choices.map((choice, index) => React$1.createElement('div', {
     key: `choice-${index}`,
     className: classes.choiceConfigurationHolder,
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 225
+      lineNumber: 227
     }
   }, React$1.createElement(ChoiceConfiguration, {
     key: index,
@@ -242,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: 229
+      lineNumber: 231
     }
   }), rationaleEnabled && React$1.createElement(InputContainer, {
     key: `rationale-${index}`,
@@ -254,7 +316,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 249
+      lineNumber: 251
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.rationale,
@@ -270,7 +332,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 254
+      lineNumber: 256
     }
   })), accessibilityLabelsEnabled && React$1.createElement(InputContainer, {
     key: `accessibility-${index}`,
@@ -279,7 +341,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 271
+      lineNumber: 273
     }
   }, React$1.createElement(EditableHtml, {
     className: classes.accessibility,
@@ -294,13 +356,13 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 276
+      lineNumber: 278
     }
   })))), React$1.createElement('br', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 293
+      lineNumber: 295
     }
   }), addChoiceButton.settings && React$1.createElement(Tooltip, {
     title: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '',
@@ -310,11 +372,11 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 295
+      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",
@@ -323,7 +385,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 303
+      lineNumber: 305
     }
   }, addChoiceButton.label)));
   const settingsInPanel = {
@@ -341,7 +403,7 @@ const Design = withStyles(styles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 345
+      lineNumber: 342
     }
   }, settingsPanelDisabled ? Content : React$1.createElement(layout.ConfigLayout, {
     settings: React$1.createElement(Panel, {
@@ -364,13 +426,13 @@ const Design = withStyles(styles)(props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 351
+        lineNumber: 348
       }
     }),
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 349
+      lineNumber: 346
     }
   }, Content));
 });
@@ -379,19 +441,19 @@ const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dial
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 388
+    lineNumber: 385
   }
 }, React$1.createElement(DialogTitle, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 389
+    lineNumber: 386
   }
 }, title), React$1.createElement(DialogActions, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 390
+    lineNumber: 387
   }
 }, onOk && React$1.createElement(Button, {
   onClick: onOk,
@@ -399,7 +461,7 @@ const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dial
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 392
+    lineNumber: 389
   }
 }, "OK"), onCancel && React$1.createElement(Button, {
   onClick: onCancel,
@@ -407,7 +469,7 @@ const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dial
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 397
+    lineNumber: 394
   }
 }, "Cancel")));
 InfoDialog.propTypes = {
@@ -463,12 +525,7 @@ class Main extends React$1.Component {
                   open: false
                 }
               });
-            },
-            onCancel: () => this.setState({
-              dialog: {
-                open: false
-              }
-            })
+            }
           }
         });
       } else {
@@ -485,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() {
@@ -585,7 +624,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 571
+        lineNumber: 542
       }
     }), React$1.createElement(Design, {
       ...this.props,
@@ -598,7 +637,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 577
+        lineNumber: 548
       }
     }));
   }

package/module/controller.js

@@ -20667,7 +20667,7 @@ const validate = (model = {}, config = {}) => {
   const nbOfChoices = (choices || []).length;
 
   if (nbOfChoices < minAnswerChoices) {
-    errors.answerChoicesError = `Should be defined at least ${minAnswerChoices} choices.`;
+    errors.answerChoicesError = `There should be at least ${minAnswerChoices} choices defined.`;
   } else if (nbOfChoices > maxAnswerChoices) {
     errors.answerChoicesError = `No more than ${maxAnswerChoices} choices should be defined.`;
   }

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.10/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.35/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.17/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.1.5/module/index.js";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -1259,6 +1259,7 @@ const {color: color$1} = _dll_pie_lib__render_ui;
 const {PreviewPrompt: PreviewPrompt$1} = _dll_pie_lib__render_ui;
 const classNames$3 = _dll_classnames;
 const _jsxFileName$3 = "/home/circleci/repo/packages/multiple-choice/src/choice-input.jsx";
+const CLASS_NAME = 'multiple-choice-component';
 const styleSheet = () => ({
   row: {
     display: 'flex',
@@ -1273,6 +1274,11 @@ const styleSheet = () => ({
     '& label': {
       color: color$1.text()
     }
+  },
+  horizontalLayout: {
+    [`& .${CLASS_NAME}`]: {
+      paddingRight: '8px'
+    }
   }
 });
 const formStyleSheet = {
@@ -1291,10 +1297,9 @@ const StyledFormControlLabel = withStyles$3(formStyleSheet, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$3,
-    lineNumber: 39
+    lineNumber: 46
   }
 }));
-const CLASS_NAME = 'multiple-choice-component';
 const colorStyle = (varName, fallback) => ({
   [`&.${CLASS_NAME}`]: {
     color: `var(--choice-input-${varName}, ${fallback}) !important`
@@ -1346,7 +1351,7 @@ const StyledCheckbox = withStyles$3(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 92
+      lineNumber: 97
     }
   });
 });
@@ -1375,7 +1380,7 @@ const StyledRadio = withStyles$3(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 125
+      lineNumber: 130
     }
   });
 });
@@ -1396,7 +1401,8 @@ class ChoiceInput extends React$4.Component {
       classes: PropTypes$3.object,
       className: PropTypes$3.string,
       hideTick: PropTypes$3.bool,
-      isEvaluateMode: PropTypes$3.bool
+      isEvaluateMode: PropTypes$3.bool,
+      choicesLayout: PropTypes$3.oneOf(['vertical', 'grid', 'horizontal'])
     };
   }
   static __initStatic2() {
@@ -1418,36 +1424,39 @@ class ChoiceInput extends React$4.Component {
     });
   }
   render() {
-    const {choiceMode, disabled, displayKey, feedback, label, checked, correctness, classes, className, rationale, accessibility, hideTick, isEvaluateMode} = this.props;
+    const {choiceMode, disabled, displayKey, feedback, label, checked, correctness, classes, className, rationale, accessibility, hideTick, isEvaluateMode, choicesLayout} = this.props;
     const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
     const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
+    const holderClassNames = classNames$3(classes.checkboxHolder, {
+      [classes.horizontalLayout]: choicesLayout === 'horizontal'
+    });
     return React$4.createElement('div', {
       className: classNames$3(className, 'corespring-' + classSuffix, 'choice-input'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 197
+        lineNumber: 208
       }
     }, React$4.createElement('div', {
       className: classes.row,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 198
+        lineNumber: 209
       }
     }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
       correctness: correctness,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 199
+        lineNumber: 210
       }
     }), React$4.createElement('div', {
-      className: classNames$3(classes.checkboxHolder, 'checkbox-holder'),
+      className: classNames$3(holderClassNames, 'checkbox-holder'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 200
+        lineNumber: 211
       }
     }, React$4.createElement(StyledFormControlLabel, {
       disabled: disabled,
@@ -1460,13 +1469,13 @@ class ChoiceInput extends React$4.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$3,
-          lineNumber: 205
+          lineNumber: 216
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 201
+        lineNumber: 212
       }
     }), React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -1476,7 +1485,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 213
+        lineNumber: 224
       }
     }))), rationale && React$4.createElement(PreviewPrompt$1, {
       className: "rationale",
@@ -1485,7 +1494,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 222
+        lineNumber: 233
       }
     }), React$4.createElement(Feedback, {
       feedback: feedback,
@@ -1493,7 +1502,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 224
+        lineNumber: 235
       }
     }));
   }
@@ -1537,7 +1546,8 @@ class Choice extends React$3.Component {
       isEvaluateMode
     };
     const names = classNames$2(classes.choice, {
-      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical'
+      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',
+      [classes.horizontalLayout]: choicesLayout === 'horizontal'
     });
     return React$3.createElement('div', {
       className: choiceClass,
@@ -1545,7 +1555,7 @@ class Choice extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 56
+        lineNumber: 57
       }
     }, React$3.createElement(ChoiceInput$1, {
       ...choiceProps,
@@ -1553,7 +1563,7 @@ class Choice extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 57
+        lineNumber: 58
       }
     }));
   }
@@ -1582,6 +1592,12 @@ var StyledChoice = withStyles$2({
   },
   noBorder: {
     borderBottom: 'none'
+  },
+  horizontalLayout: {
+    paddingRight: '20px',
+    '& label': {
+      marginRight: '8px'
+    }
   }
 })(Choice);
 const React$2 = _dll_react;

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@6.2.6</title>
+      <title>@pie-element/multiple-choice@6.3.1</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.6",
+  "version": "6.3.1",
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.4.10"
+      "version": "^1.4.17"
     },
     {
       "name": "@pie-lib/math-rendering-module",
-      "version": "^1.0.35"
+      "version": "^1.1.5"
     }
   ]
 }

package/module/print.html

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