@pie-element/multiple-choice 8.0.0-beta → 8.0.0

package/docs/config-schema.json

@@ -370,6 +370,82 @@
         }
       }
     },
+    "mathMlOptions": {
+      "title": "ConfigureMathMLProp",
+      "type": "object",
+      "properties": {
+        "mmlOutput": {
+          "description": "Indicates if model should have mathML output instead of latex",
+          "type": "number",
+          "title": "mmlOutput"
+        },
+        "mmlEditing": {
+          "description": "Indicates if mathML that's already in model should be editable",
+          "type": "number",
+          "title": "mmlEditing"
+        }
+      }
+    },
+    "language": {
+      "title": "ConfigurePropWithEnabled",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        },
+        "enabled": {
+          "description": "Indicates the value of the item if it affects config-ui\n(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)",
+          "type": "boolean",
+          "title": "enabled"
+        }
+      }
+    },
+    "languageChoices": {
+      "description": "Language choices configuration\nOnly available if language is enabled",
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "title": "label"
+        },
+        "options": {
+          "type": "array",
+          "items": {
+            "title": "ConfigureLanguageOptionsProp",
+            "type": "object",
+            "properties": {
+              "value": {
+                "description": "Value of the language option",
+                "type": "string",
+                "title": "value"
+              },
+              "label": {
+                "description": "Label of the language option",
+                "type": "string",
+                "title": "label"
+              }
+            },
+            "required": [
+              "label",
+              "value"
+            ]
+          },
+          "title": "options"
+        }
+      },
+      "required": [
+        "label",
+        "options"
+      ],
+      "title": "languageChoices"
+    },
     "showPrompt": {
       "description": "Determines whether prompt field will be displayed or not",
       "default": true,
@@ -381,6 +457,56 @@
       "default": "Item Stemm",
       "type": "string",
       "title": "promptLabel"
+    },
+    "contentDimensions": {
+      "description": "Indicates the dimensions configuration for the authoring container\nNote: Some items have a default minimum width because of their content, but if\nthe minWidth is lower than this, the overflow behavior will take care of that",
+      "default": ": {}",
+      "type": "object",
+      "properties": {
+        "maxHeight": {
+          "description": "Indicates the max height of the authoring container",
+          "default": "undefined",
+          "type": [
+            "string",
+            "number"
+          ],
+          "title": "maxHeight"
+        },
+        "maxWidth": {
+          "description": "Indicates the max width of the authoring container",
+          "default": "undefined",
+          "type": [
+            "string",
+            "number"
+          ],
+          "title": "maxWidth"
+        },
+        "minHeight": {
+          "description": "Indicates the min height of the authoring container",
+          "default": "undefined",
+          "type": [
+            "string",
+            "number"
+          ],
+          "title": "minHeight"
+        },
+        "minWidth": {
+          "description": "Indicates the min width of the authoring container",
+          "default": "undefined",
+          "type": [
+            "string",
+            "number"
+          ],
+          "title": "minWidth"
+        }
+      },
+      "title": "contentDimensions"
+    },
+    "settingsPartialScoring": {
+      "description": "Indicates whether the settings panel wil allow the author to modify settings for partial scoring",
+      "default": true,
+      "type": "boolean",
+      "title": "settingsPartialScoring"
     }
   },
   "definitions": {
@@ -446,6 +572,42 @@
           "title": "choices"
         }
       }
+    },
+    "ConfigureMathMLProp": {
+      "title": "ConfigureMathMLProp",
+      "type": "object",
+      "properties": {
+        "mmlOutput": {
+          "description": "Indicates if model should have mathML output instead of latex",
+          "type": "number",
+          "title": "mmlOutput"
+        },
+        "mmlEditing": {
+          "description": "Indicates if mathML that's already in model should be editable",
+          "type": "number",
+          "title": "mmlEditing"
+        }
+      }
+    },
+    "ConfigureLanguageOptionsProp": {
+      "title": "ConfigureLanguageOptionsProp",
+      "type": "object",
+      "properties": {
+        "value": {
+          "description": "Value of the language option",
+          "type": "string",
+          "title": "value"
+        },
+        "label": {
+          "description": "Label of the language option",
+          "type": "string",
+          "title": "label"
+        }
+      },
+      "required": [
+        "label",
+        "value"
+      ]
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/docs/config-schema.json.md

@@ -285,6 +285,58 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `mathMlOptions` (object)
+
+Properties of the `mathMlOptions` object:
+
+## `mmlOutput` (number)
+
+Indicates if model should have mathML output instead of latex
+
+## `mmlEditing` (number)
+
+Indicates if mathML that's already in model should be editable
+
+# `language` (object)
+
+Properties of the `language` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+## `enabled` (boolean)
+
+Indicates the value of the item if it affects config-ui
+(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
+
+# `languageChoices` (object)
+
+Language choices configuration
+Only available if language is enabled
+
+Properties of the `languageChoices` object:
+
+## `label` (string, required)
+
+## `options` (array, required)
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+### `value` (string, required)
+
+Value of the language option
+
+### `label` (string, required)
+
+Label of the language option
+
 # `showPrompt` (boolean)
 
 Determines whether prompt field will be displayed or not
@@ -297,6 +349,46 @@ The label for the item stem/prompt field
 
 Default: `"Item Stemm"`
 
+# `contentDimensions` (object)
+
+Indicates the dimensions configuration for the authoring container
+Note: Some items have a default minimum width because of their content, but if
+the minWidth is lower than this, the overflow behavior will take care of that
+
+Properties of the `contentDimensions` object:
+
+## `maxHeight` (string,number)
+
+Indicates the max height of the authoring container
+
+Default: `"undefined"`
+
+## `maxWidth` (string,number)
+
+Indicates the max width of the authoring container
+
+Default: `"undefined"`
+
+## `minHeight` (string,number)
+
+Indicates the min height of the authoring container
+
+Default: `"undefined"`
+
+## `minWidth` (string,number)
+
+Indicates the min width of the authoring container
+
+Default: `"undefined"`
+
+Default: `": {}"`
+
+# `settingsPartialScoring` (boolean)
+
+Indicates whether the settings panel wil allow the author to modify settings for partial scoring
+
+Default: `true`
+
 ---
 
 # Sub Schemas
@@ -350,4 +442,28 @@ Indicates the max dimension for images in rationale
 
 ### `choices` (number)
 
-Indicates the max dimension for images in choices
+Indicates the max dimension for images in choices
+
+## `ConfigureMathMLProp` (object)
+
+Properties of the `ConfigureMathMLProp` object:
+
+### `mmlOutput` (number)
+
+Indicates if model should have mathML output instead of latex
+
+### `mmlEditing` (number)
+
+Indicates if mathML that's already in model should be editable
+
+## `ConfigureLanguageOptionsProp` (object)
+
+Properties of the `ConfigureLanguageOptionsProp` object:
+
+### `value` (string, required)
+
+Value of the language option
+
+### `label` (string, required)
+
+Label of the language option

package/docs/demo/generate.js

@@ -46,8 +46,7 @@ exports.model = (id, element) => ({
       accessibility: 'finland',
     },
   ],
-  prompt:
-    'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+  prompt: "",
   promptEnabled: true,
   toolbarEditorPosition: 'bottom',
   rubricEnabled: false,

package/docs/pie-schema.json

@@ -188,6 +188,11 @@
       "type": "boolean",
       "title": "rubricEnabled"
     },
+    "language": {
+      "description": "Indicates the language of the component\nSupported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX",
+      "type": "string",
+      "title": "language"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -275,6 +280,42 @@
         }
       }
     },
+    "ConfigureMathMLProp": {
+      "title": "ConfigureMathMLProp",
+      "type": "object",
+      "properties": {
+        "mmlOutput": {
+          "description": "Indicates if model should have mathML output instead of latex",
+          "type": "number",
+          "title": "mmlOutput"
+        },
+        "mmlEditing": {
+          "description": "Indicates if mathML that's already in model should be editable",
+          "type": "number",
+          "title": "mmlEditing"
+        }
+      }
+    },
+    "ConfigureLanguageOptionsProp": {
+      "title": "ConfigureLanguageOptionsProp",
+      "type": "object",
+      "properties": {
+        "value": {
+          "description": "Value of the language option",
+          "type": "string",
+          "title": "value"
+        },
+        "label": {
+          "description": "Label of the language option",
+          "type": "string",
+          "title": "label"
+        }
+      },
+      "required": [
+        "label",
+        "value"
+      ]
+    },
     "Choice": {
       "title": "Choice",
       "type": "object",

package/docs/pie-schema.json.md

@@ -162,6 +162,11 @@ Indicates if Accessibility Labels are enabled
 
 Indicates if Rubric is enabled
 
+# `language` (string)
+
+Indicates the language of the component
+Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -225,6 +230,30 @@ Indicates the max dimension for images in rationale
 
 Indicates the max dimension for images in choices
 
+## `ConfigureMathMLProp` (object)
+
+Properties of the `ConfigureMathMLProp` object:
+
+### `mmlOutput` (number)
+
+Indicates if model should have mathML output instead of latex
+
+### `mmlEditing` (number)
+
+Indicates if mathML that's already in model should be editable
+
+## `ConfigureLanguageOptionsProp` (object)
+
+Properties of the `ConfigureLanguageOptionsProp` object:
+
+### `value` (string, required)
+
+Value of the language option
+
+### `label` (string, required)
+
+Label of the language option
+
 ## `Choice` (object)
 
 Properties of the `Choice` object:

package/lib/choice-input.js

@@ -33,7 +33,7 @@ var _styles = require("@material-ui/core/styles");
 
 var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
 
-var _renderUi = require("@pie-lib/render-ui");
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
 
 var _feedbackTick = _interopRequireDefault(require("./feedback-tick"));
 
@@ -51,7 +51,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var CLASS_NAME = 'multiple-choice-component';
 
-var styleSheet = function styleSheet() {
+var styleSheet = function styleSheet(theme) {
   return {
     row: {
       display: 'flex',
@@ -64,11 +64,14 @@ var styleSheet = function styleSheet() {
       backgroundColor: _renderUi.color.background(),
       flex: 1,
       '& label': {
-        color: _renderUi.color.text()
+        color: _renderUi.color.text(),
+        '& > span': {
+          fontSize: 'inherit'
+        }
       }
     },
     horizontalLayout: (0, _defineProperty2["default"])({}, "& .".concat(CLASS_NAME), {
-      paddingRight: '8px'
+      paddingRight: theme.spacing.unit
     })
   };
 };
@@ -125,7 +128,9 @@ var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
       checked = props.checked,
       onChange = props.onChange,
       disabled = props.disabled,
-      accessibility = props.accessibility;
+      accessibility = props.accessibility,
+      value = props.value,
+      id = props.id;
 
   var key = function key(k) {
     return correctness ? "".concat(correctness, "-").concat(k) : k;
@@ -139,10 +144,13 @@ var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
   var miniProps = {
     checked: checked,
     onChange: onChange,
-    disabled: disabled
+    disabled: disabled,
+    value: value
   };
   return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
-    "aria-label": accessibility
+    id: id,
+    "aria-label": accessibility,
+    "aria-checked": checked
   }, miniProps, {
     className: CLASS_NAME,
     classes: {
@@ -159,7 +167,9 @@ var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
       checked = props.checked,
       onChange = props.onChange,
       disabled = props.disabled,
-      accessibility = props.accessibility;
+      accessibility = props.accessibility,
+      value = props.value,
+      id = props.id;
 
   var key = function key(k) {
     return correctness ? "".concat(correctness, "-").concat(k) : k;
@@ -173,10 +183,13 @@ var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
   var miniProps = {
     checked: checked,
     onChange: onChange,
-    disabled: disabled
+    disabled: disabled,
+    value: value
   };
   return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({
-    "aria-label": accessibility
+    id: id,
+    "aria-label": accessibility,
+    "aria-checked": checked
   }, miniProps, {
     className: CLASS_NAME,
     classes: {
@@ -199,17 +212,24 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, ChoiceInput);
     _this = _super.call(this, props);
     _this.onToggleChoice = _this.onToggleChoice.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.choiceId = _this.generateChoiceId();
     return _this;
   }
 
   (0, _createClass2["default"])(ChoiceInput, [{
     key: "onToggleChoice",
-    value: function onToggleChoice() {
-      this.props.onChange({
+    value: function onToggleChoice(event) {
+      this.props.onChange(event);
+      this.props.updateSession({
         value: this.props.value,
         selected: !this.props.checked
       });
     }
+  }, {
+    key: "generateChoiceId",
+    value: function generateChoiceId() {
+      return 'choice-' + (Math.random() * 10000).toFixed();
+    }
   }, {
     key: "render",
     value: function render() {
@@ -219,7 +239,6 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
           displayKey = _this$props.displayKey,
           feedback = _this$props.feedback,
           label = _this$props.label,
-          checked = _this$props.checked,
           correctness = _this$props.correctness,
           classes = _this$props.classes,
           className = _this$props.className,
@@ -227,10 +246,25 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
           accessibility = _this$props.accessibility,
           hideTick = _this$props.hideTick,
           isEvaluateMode = _this$props.isEvaluateMode,
-          choicesLayout = _this$props.choicesLayout;
+          choicesLayout = _this$props.choicesLayout,
+          value = _this$props.value,
+          checked = _this$props.checked;
       var Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
       var classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
       var holderClassNames = (0, _classnames["default"])(classes.checkboxHolder, (0, _defineProperty2["default"])({}, classes.horizontalLayout, choicesLayout === 'horizontal'));
+
+      var choicelabel = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, displayKey ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.row
+      }, displayKey, ".", "\xA0", /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "label",
+        prompt: label,
+        tagName: "span"
+      })) : /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "label",
+        prompt: label,
+        tagName: "span"
+      }));
+
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(className, 'corespring-' + classSuffix, 'choice-input')
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -240,19 +274,18 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(holderClassNames, 'checkbox-holder')
       }, /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
-        disabled: disabled,
-        label: displayKey ? displayKey + '. ' : '',
+        label: choicelabel,
+        value: value,
+        htmlFor: this.choiceId,
         control: /*#__PURE__*/_react["default"].createElement(Tag, {
           accessibility: accessibility,
+          disabled: disabled,
           checked: checked,
           correctness: correctness,
+          value: value,
+          id: this.choiceId,
           onChange: this.onToggleChoice
         })
-      }), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: "label",
-        onClick: this.onToggleChoice,
-        prompt: label,
-        tagName: "span"
       }))), rationale && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         className: "rationale",
         defaultClassName: "rationale",
@@ -283,7 +316,8 @@ exports.ChoiceInput = ChoiceInput;
   className: _propTypes["default"].string,
   hideTick: _propTypes["default"].bool,
   isEvaluateMode: _propTypes["default"].bool,
-  choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal'])
+  choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal']),
+  updateSession: _propTypes["default"].func
 });
 (0, _defineProperty2["default"])(ChoiceInput, "defaultProps", {
   rationale: null,