@pie-element/multiple-choice 6.2.0 → 6.2.1-beta.1443

package/docs/config-schema.json.md

@@ -84,6 +84,18 @@ 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
 
+# `spellCheck` (object)
+
+Properties of the `spellCheck` 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
+
 # `choicesLayout` (object)
 
 Properties of the `choicesLayout` object:
@@ -156,6 +168,10 @@ 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
 
+# `settingsPanelDisabled` (boolean)
+
+Indicates if the settings panel is not available
+
 # `studentInstructions` (object)
 
 Properties of the `studentInstructions` object:
@@ -217,6 +233,58 @@ Minimum number of answer choices
 
 Maximum number of answer choices
 
+# `maxImageWidth` (object)
+
+Properties of the `maxImageWidth` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+## `choices` (number)
+
+Indicates the max dimension for images in choices
+
+# `maxImageHeight` (object)
+
+Properties of the `maxImageHeight` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+## `choices` (number)
+
+Indicates the max dimension for images in choices
+
+# `withRubric` (object)
+
+Properties of the `withRubric` 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
+
 # `showPrompt` (boolean)
 
 Determines whether prompt field will be displayed or not
@@ -262,4 +330,24 @@ 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)
+(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
+
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+### `choices` (number)
+
+Indicates the max dimension for images in choices

package/docs/demo/config.js

@@ -2,7 +2,7 @@ const { model } = require('./generate');
 
 module.exports = {
   elements: {
-    'multiple-choice': '../..'
+    'multiple-choice': '../..',
   },
-  models: [model('1', 'multiple-choice')]
+  models: [model('1', 'multiple-choice')],
 };

package/docs/demo/generate.js

@@ -10,29 +10,29 @@ exports.model = (id, element) => ({
       label: 'Sweden',
       feedback: {
         type: 'none',
-        value: ''
+        value: '',
       },
-      accessibility: 'sweden'
+      accessibility: 'sweden',
     },
     {
       value: 'iceland',
       label: 'Iceland',
       feedback: {
         type: 'none',
-        value: ''
+        value: '',
       },
       rationale: 'Rationale for Iceland',
-      accessibility: 'iceland'
+      accessibility: 'iceland',
     },
     {
       value: 'norway',
       label: 'Norway',
       feedback: {
         type: 'none',
-        value: ''
+        value: '',
       },
       rationale: 'Rationale for Norway',
-      accessibility: 'norway'
+      accessibility: 'norway',
     },
     {
       correct: true,
@@ -40,13 +40,15 @@ exports.model = (id, element) => ({
       label: 'Finland',
       feedback: {
         type: 'none',
-        value: ''
+        value: '',
       },
       rationale: 'Rationale for Finland',
-      accessibility: 'finland'
-    }
+      accessibility: 'finland',
+    },
   ],
-  prompt: 'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+  prompt:
+    'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
   promptEnabled: true,
-  toolbarEditorPosition: 'bottom'
+  toolbarEditorPosition: 'bottom',
+  rubricEnabled: false,
 });

package/docs/demo/index.html

@@ -1 +1 @@
-<multiple-choice pie-id="1"> </multiple-choice>
+<multiple-choice pie-id="1"> </multiple-choice>

package/docs/demo/session.js

@@ -3,5 +3,5 @@ module.exports = [
     id: '1',
     element: 'multiple-choice',
     // value: ['iceland', 'norway']
-  }
+  },
 ];

package/docs/pie-schema.json

@@ -163,6 +163,11 @@
       "type": "boolean",
       "title": "rationaleEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
     "studentInstructionsEnabled": {
       "description": "Indicates if Student Instructions are enabled",
       "type": "boolean",
@@ -178,6 +183,11 @@
       "type": "boolean",
       "title": "accessibilityLabelsEnabled"
     },
+    "rubricEnabled": {
+      "description": "Indicates if Rubric is enabled",
+      "type": "boolean",
+      "title": "rubricEnabled"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -196,6 +206,8 @@
     "feedbackEnabled",
     "id",
     "rationaleEnabled",
+    "rubricEnabled",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
@@ -237,6 +249,32 @@
         }
       }
     },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        },
+        "choices": {
+          "description": "Indicates the max dimension for images in choices",
+          "type": "number",
+          "title": "choices"
+        }
+      }
+    },
     "Choice": {
       "title": "Choice",
       "type": "object",

package/docs/pie-schema.json.md

@@ -142,6 +142,10 @@ Indicates if feedback is enabled
 
 Indicates if Rationale are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
 # `studentInstructionsEnabled` (boolean, required)
 
 Indicates if Student Instructions are enabled
@@ -154,6 +158,10 @@ Indicates if Teacher Instructions are enabled
 
 Indicates if Accessibility Labels are enabled
 
+# `rubricEnabled` (boolean, required)
+
+Indicates if Rubric is enabled
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -197,6 +205,26 @@ Indicates the label for the item that has to be displayed in the Settings Panel
 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)
 
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+### `choices` (number)
+
+Indicates the max dimension for images in choices
+
 ## `Choice` (object)
 
 Properties of the `Choice` object:

package/lib/choice-input.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ChoiceInput = exports.StyledRadio = exports.StyledCheckbox = exports.StyledFormControlLabel = void 0;
+exports["default"] = exports.StyledRadio = exports.StyledFormControlLabel = exports.StyledCheckbox = exports.ChoiceInput = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -19,10 +19,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -45,9 +45,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var CLASS_NAME = 'multiple-choice-component';
 
 var styleSheet = function styleSheet() {
   return {
@@ -64,7 +66,10 @@ var styleSheet = function styleSheet() {
       '& label': {
         color: _renderUi.color.text()
       }
-    }
+    },
+    horizontalLayout: (0, _defineProperty2["default"])({}, "& .".concat(CLASS_NAME), {
+      paddingRight: '8px'
+    })
   };
 };
 
@@ -85,7 +90,6 @@ var StyledFormControlLabel = (0, _styles.withStyles)(formStyleSheet, {
   }));
 });
 exports.StyledFormControlLabel = StyledFormControlLabel;
-var CLASS_NAME = 'multiple-choice-component';
 
 var colorStyle = function colorStyle(varName, fallback) {
   return (0, _defineProperty2["default"])({}, "&.".concat(CLASS_NAME), {
@@ -222,9 +226,11 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
           rationale = _this$props.rationale,
           accessibility = _this$props.accessibility,
           hideTick = _this$props.hideTick,
-          isEvaluateMode = _this$props.isEvaluateMode;
+          isEvaluateMode = _this$props.isEvaluateMode,
+          choicesLayout = _this$props.choicesLayout;
       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'));
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(className, 'corespring-' + classSuffix, 'choice-input')
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -232,7 +238,7 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
       }, !hideTick && isEvaluateMode && /*#__PURE__*/_react["default"].createElement(_feedbackTick["default"], {
         correctness: correctness
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.checkboxHolder, 'checkbox-holder')
+        className: (0, _classnames["default"])(holderClassNames, 'checkbox-holder')
       }, /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
         disabled: disabled,
         label: displayKey ? displayKey + '. ' : '',
@@ -276,7 +282,8 @@ exports.ChoiceInput = ChoiceInput;
   classes: _propTypes["default"].object,
   className: _propTypes["default"].string,
   hideTick: _propTypes["default"].bool,
-  isEvaluateMode: _propTypes["default"].bool
+  isEvaluateMode: _propTypes["default"].bool,
+  choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal'])
 });
 (0, _defineProperty2["default"])(ChoiceInput, "defaultProps", {
   rationale: null,

package/lib/choice-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/choice-input.jsx"],"names":["styleSheet","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","formStyleSheet","label","StyledFormControlLabel","name","props","classes","CLASS_NAME","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","value","selected","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","Tag","classSuffix","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst styleSheet = () => ({\n  row: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n  },\n  checkboxHolder: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n    flex: 1,\n    '& label': {\n      color: color.text(),\n    },\n  },\n});\n\nconst formStyleSheet = {\n  label: {\n    color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n    backgroundColor: color.background(),\n  },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n  name: 'FormControlLabel',\n})((props) => (\n  <FormControlLabel {...props} classes={{ label: props.classes.label }} />\n));\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst colorStyle = (varName, fallback) => ({\n  [`&.${CLASS_NAME}`]: {\n    color: `var(--choice-input-${varName}, ${fallback}) !important`,\n  },\n});\n\nconst inputStyles = {\n  'correct-root': colorStyle('correct-color', color.text()),\n  'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n  'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n  'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n  'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n  'incorrect-disabled': colorStyle(\n    'incorrect-disabled-color',\n    color.disabled()\n  ),\n  root: {\n    ...colorStyle('color', color.text()),\n    '&:hover': { color: `${color.primaryLight()} !important` },\n  },\n  checked: colorStyle('selected-color', color.primary()),\n  disabled: {\n    ...colorStyle('disabled-color', color.text()),\n    opacity: 0.6,\n    cursor: 'not-allowed !important',\n    pointerEvents: 'initial !important',\n  },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n  const {\n    correctness,\n    classes,\n    checked,\n    onChange,\n    disabled,\n    accessibility,\n  } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled };\n  return (\n    <Checkbox\n      aria-label={accessibility}\n      {...miniProps}\n      className={CLASS_NAME}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n  const {\n    correctness,\n    classes,\n    checked,\n    onChange,\n    disabled,\n    accessibility,\n  } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled };\n\n  return (\n    <Radio\n      aria-label={accessibility}\n      {...miniProps}\n      className={CLASS_NAME}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport class ChoiceInput extends React.Component {\n  static propTypes = {\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    displayKey: PropTypes.string.isRequired,\n    checked: PropTypes.bool.isRequired,\n    correctness: PropTypes.string,\n    disabled: PropTypes.bool.isRequired,\n    feedback: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    rationale: PropTypes.string,\n    accessibility: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    value: PropTypes.string.isRequired,\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    hideTick: PropTypes.bool,\n    isEvaluateMode: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    rationale: null,\n    accessibility: null,\n    checked: false,\n    isEvaluateMode: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.onToggleChoice = this.onToggleChoice.bind(this);\n  }\n\n  onToggleChoice() {\n    this.props.onChange({\n      value: this.props.value,\n      selected: !this.props.checked,\n    });\n  }\n\n  render() {\n    const {\n      choiceMode,\n      disabled,\n      displayKey,\n      feedback,\n      label,\n      checked,\n      correctness,\n      classes,\n      className,\n      rationale,\n      accessibility,\n      hideTick,\n      isEvaluateMode,\n    } = this.props;\n\n    const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n    const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n    return (\n      <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n        <div className={classes.row}>\n          {(!hideTick && isEvaluateMode) && <FeedbackTick correctness={correctness} />}\n          <div className={classNames(classes.checkboxHolder, 'checkbox-holder')}>\n            <StyledFormControlLabel\n              disabled={disabled}\n              label={displayKey ? displayKey + '. ' : ''}\n              control={\n                <Tag\n                  accessibility={accessibility}\n                  checked={checked}\n                  correctness={correctness}\n                  onChange={this.onToggleChoice}\n                />\n              }\n            />\n            <PreviewPrompt\n              className=\"label\"\n              onClick={this.onToggleChoice}\n              prompt={label}\n              tagName=\"span\"\n            />\n          </div>\n        </div>\n        {rationale && (\n          <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />\n        )}\n        <Feedback feedback={feedback} correctness={correctness} />\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
+{"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","horizontalLayout","paddingRight","formStyleSheet","label","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","value","selected","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","Tag","classSuffix","holderClassNames","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,2BAAnB;;AAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAO;AACxBC,IAAAA,GAAG,EAAE;AACHC,MAAAA,OAAO,EAAE,MADN;AAEHC,MAAAA,UAAU,EAAE,QAFT;AAGHC,MAAAA,eAAe,EAAEC,gBAAMC,UAAN;AAHd,KADmB;AAMxBC,IAAAA,cAAc,EAAE;AACdL,MAAAA,OAAO,EAAE,MADK;AAEdC,MAAAA,UAAU,EAAE,QAFE;AAGdC,MAAAA,eAAe,EAAEC,gBAAMC,UAAN,EAHH;AAIdE,MAAAA,IAAI,EAAE,CAJQ;AAKd,iBAAW;AACTH,QAAAA,KAAK,EAAEA,gBAAMI,IAAN;AADE;AALG,KANQ;AAexBC,IAAAA,gBAAgB,oDACPX,UADO,GACQ;AACpBY,MAAAA,YAAY,EAAE;AADM,KADR;AAfQ,GAAP;AAAA,CAAnB;;AAsBA,IAAMC,cAAc,GAAG;AACrBC,EAAAA,KAAK,EAAE;AACLR,IAAAA,KAAK,YAAKA,gBAAMI,IAAN,EAAL,gBADA;AACgC;AACrCL,IAAAA,eAAe,EAAEC,gBAAMC,UAAN;AAFZ;AADc,CAAvB;AAOO,IAAMQ,sBAAsB,GAAG,wBAAWF,cAAX,EAA2B;AAC/DG,EAAAA,IAAI,EAAE;AADyD,CAA3B,EAEnC,UAACC,KAAD;AAAA,sBAAW,gCAAC,4BAAD,gCAAsBA,KAAtB;AAA6B,IAAA,OAAO,EAAE;AAAEH,MAAAA,KAAK,EAAEG,KAAK,CAACC,OAAN,CAAcJ;AAAvB;AAAtC,KAAX;AAAA,CAFmC,CAA/B;;;AAIP,IAAMK,UAAU,GAAG,SAAbA,UAAa,CAACC,OAAD,EAAUC,QAAV;AAAA,0DACXrB,UADW,GACI;AACnBM,IAAAA,KAAK,+BAAwBc,OAAxB,eAAoCC,QAApC;AADc,GADJ;AAAA,CAAnB;;AAMA,IAAMC,WAAW,GAAG;AAClB,kBAAgBH,UAAU,CAAC,eAAD,EAAkBb,gBAAMI,IAAN,EAAlB,CADR;AAElB,qBAAmBS,UAAU,CAAC,wBAAD,EAA2Bb,gBAAMiB,OAAN,EAA3B,CAFX;AAEwD;AAC1E,sBAAoBJ,UAAU,CAAC,wBAAD,EAA2Bb,gBAAMkB,QAAN,EAA3B,CAHZ;AAG0D;AAC5E,oBAAkBL,UAAU,CAAC,iBAAD,EAAoBb,gBAAMmB,SAAN,EAApB,CAJV;AAKlB,uBAAqBN,UAAU,CAAC,mBAAD,EAAsBb,gBAAMmB,SAAN,EAAtB,CALb;AAKuD;AACzE,wBAAsBN,UAAU,CAAC,0BAAD,EAA6Bb,gBAAMkB,QAAN,EAA7B,CANd;AAOlBE,EAAAA,IAAI,kCACCP,UAAU,CAAC,OAAD,EAAUb,gBAAMI,IAAN,EAAV,CADX;AAEF,eAAW;AAAEJ,MAAAA,KAAK,YAAKA,gBAAMqB,YAAN,EAAL;AAAP;AAFT,IAPc;AAWlBC,EAAAA,OAAO,EAAET,UAAU,CAAC,gBAAD,EAAmBb,gBAAMuB,OAAN,EAAnB,CAXD;AAYlBL,EAAAA,QAAQ,kCACHL,UAAU,CAAC,gBAAD,EAAmBb,gBAAMI,IAAN,EAAnB,CADP;AAENoB,IAAAA,OAAO,EAAE,GAFH;AAGNC,IAAAA,MAAM,EAAE,wBAHF;AAINC,IAAAA,aAAa,EAAE;AAJT;AAZU,CAApB;AAoBO,IAAMC,cAAc,GAAG,wBAAWX,WAAX,EAAwB,UAACL,KAAD,EAAW;AAC/D,MAAQiB,WAAR,GAA6EjB,KAA7E,CAAQiB,WAAR;AAAA,MAAqBhB,OAArB,GAA6ED,KAA7E,CAAqBC,OAArB;AAAA,MAA8BU,OAA9B,GAA6EX,KAA7E,CAA8BW,OAA9B;AAAA,MAAuCO,QAAvC,GAA6ElB,KAA7E,CAAuCkB,QAAvC;AAAA,MAAiDX,QAAjD,GAA6EP,KAA7E,CAAiDO,QAAjD;AAAA,MAA2DY,aAA3D,GAA6EnB,KAA7E,CAA2DmB,aAA3D;;AACA,MAAMC,GAAG,GAAG,SAANA,GAAM,CAACC,CAAD;AAAA,WAAQJ,WAAW,aAAMA,WAAN,cAAqBI,CAArB,IAA2BA,CAA9C;AAAA,GAAZ;;AAEA,MAAMC,QAAQ,GAAG;AACfb,IAAAA,IAAI,EAAER,OAAO,CAACmB,GAAG,CAAC,MAAD,CAAJ,CADE;AAEfT,IAAAA,OAAO,EAAEV,OAAO,CAACmB,GAAG,CAAC,SAAD,CAAJ,CAFD;AAGfb,IAAAA,QAAQ,EAAEN,OAAO,CAACmB,GAAG,CAAC,UAAD,CAAJ;AAHF,GAAjB;AAMA,MAAMG,SAAS,GAAG;AAAEZ,IAAAA,OAAO,EAAPA,OAAF;AAAWO,IAAAA,QAAQ,EAARA,QAAX;AAAqBX,IAAAA,QAAQ,EAARA;AAArB,GAAlB;AACA,sBACE,gCAAC,oBAAD;AACE,kBAAYY;AADd,KAEMI,SAFN;AAGE,IAAA,SAAS,EAAExC,UAHb;AAIE,IAAA,OAAO,EAAE;AACP0B,MAAAA,IAAI,EAAEa,QAAQ,CAACb,IADR;AAEPE,MAAAA,OAAO,EAAEW,QAAQ,CAACX,OAFX;AAGPJ,MAAAA,QAAQ,YAAKU,WAAW,GAAG,EAAH,GAAQK,QAAQ,CAACf,QAAjC;AAHD;AAJX,KADF;AAYD,CAvB6B,CAAvB;;AAyBA,IAAMiB,WAAW,GAAG,wBAAWnB,WAAX,EAAwB,UAACL,KAAD,EAAW;AAC5D,MAAQiB,WAAR,GAA6EjB,KAA7E,CAAQiB,WAAR;AAAA,MAAqBhB,OAArB,GAA6ED,KAA7E,CAAqBC,OAArB;AAAA,MAA8BU,OAA9B,GAA6EX,KAA7E,CAA8BW,OAA9B;AAAA,MAAuCO,QAAvC,GAA6ElB,KAA7E,CAAuCkB,QAAvC;AAAA,MAAiDX,QAAjD,GAA6EP,KAA7E,CAAiDO,QAAjD;AAAA,MAA2DY,aAA3D,GAA6EnB,KAA7E,CAA2DmB,aAA3D;;AACA,MAAMC,GAAG,GAAG,SAANA,GAAM,CAACC,CAAD;AAAA,WAAQJ,WAAW,aAAMA,WAAN,cAAqBI,CAArB,IAA2BA,CAA9C;AAAA,GAAZ;;AAEA,MAAMC,QAAQ,GAAG;AACfb,IAAAA,IAAI,EAAER,OAAO,CAACmB,GAAG,CAAC,MAAD,CAAJ,CADE;AAEfT,IAAAA,OAAO,EAAEV,OAAO,CAACmB,GAAG,CAAC,SAAD,CAAJ,CAFD;AAGfb,IAAAA,QAAQ,EAAEN,OAAO,CAACmB,GAAG,CAAC,UAAD,CAAJ;AAHF,GAAjB;AAMA,MAAMG,SAAS,GAAG;AAAEZ,IAAAA,OAAO,EAAPA,OAAF;AAAWO,IAAAA,QAAQ,EAARA,QAAX;AAAqBX,IAAAA,QAAQ,EAARA;AAArB,GAAlB;AAEA,sBACE,gCAAC,iBAAD;AACE,kBAAYY;AADd,KAEMI,SAFN;AAGE,IAAA,SAAS,EAAExC,UAHb;AAIE,IAAA,OAAO,EAAE;AACP0B,MAAAA,IAAI,EAAEa,QAAQ,CAACb,IADR;AAEPE,MAAAA,OAAO,EAAEW,QAAQ,CAACX,OAFX;AAGPJ,MAAAA,QAAQ,YAAKU,WAAW,GAAG,EAAH,GAAQK,QAAQ,CAACf,QAAjC;AAHD;AAJX,KADF;AAYD,CAxB0B,CAApB;;;IA0BMkB,W;;;;;AA2BX,uBAAYzB,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AACA,UAAK0B,cAAL,GAAsB,MAAKA,cAAL,CAAoBC,IAApB,gDAAtB;AAFiB;AAGlB;;;;WAED,0BAAiB;AACf,WAAK3B,KAAL,CAAWkB,QAAX,CAAoB;AAClBU,QAAAA,KAAK,EAAE,KAAK5B,KAAL,CAAW4B,KADA;AAElBC,QAAAA,QAAQ,EAAE,CAAC,KAAK7B,KAAL,CAAWW;AAFJ,OAApB;AAID;;;WAED,kBAAS;AACP,wBAeI,KAAKX,KAfT;AAAA,UACE8B,UADF,eACEA,UADF;AAAA,UAEEvB,QAFF,eAEEA,QAFF;AAAA,UAGEwB,UAHF,eAGEA,UAHF;AAAA,UAIEC,QAJF,eAIEA,QAJF;AAAA,UAKEnC,KALF,eAKEA,KALF;AAAA,UAMEc,OANF,eAMEA,OANF;AAAA,UAOEM,WAPF,eAOEA,WAPF;AAAA,UAQEhB,OARF,eAQEA,OARF;AAAA,UASEgC,SATF,eASEA,SATF;AAAA,UAUEC,SAVF,eAUEA,SAVF;AAAA,UAWEf,aAXF,eAWEA,aAXF;AAAA,UAYEgB,QAZF,eAYEA,QAZF;AAAA,UAaEC,cAbF,eAaEA,cAbF;AAAA,UAcEC,aAdF,eAcEA,aAdF;AAiBA,UAAMC,GAAG,GAAGR,UAAU,KAAK,UAAf,GAA4Bd,cAA5B,GAA6CQ,WAAzD;AACA,UAAMe,WAAW,GAAGT,UAAU,KAAK,UAAf,GAA4B,UAA5B,GAAyC,cAA7D;AAEA,UAAMU,gBAAgB,GAAG,4BAAWvC,OAAO,CAACV,cAAnB,uCACtBU,OAAO,CAACP,gBADc,EACK2C,aAAa,KAAK,YADvB,EAAzB;AAIA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWJ,SAAX,EAAsB,gBAAgBM,WAAtC,EAAmD,cAAnD;AAAhB,sBACE;AAAK,QAAA,SAAS,EAAEtC,OAAO,CAAChB;AAAxB,SACG,CAACkD,QAAD,IAAaC,cAAb,iBAA+B,gCAAC,wBAAD;AAAc,QAAA,WAAW,EAAEnB;AAA3B,QADlC,eAEE;AAAK,QAAA,SAAS,EAAE,4BAAWuB,gBAAX,EAA6B,iBAA7B;AAAhB,sBACE,gCAAC,sBAAD;AACE,QAAA,QAAQ,EAAEjC,QADZ;AAEE,QAAA,KAAK,EAAEwB,UAAU,GAAGA,UAAU,GAAG,IAAhB,GAAuB,EAF1C;AAGE,QAAA,OAAO,eACL,gCAAC,GAAD;AACE,UAAA,aAAa,EAAEZ,aADjB;AAEE,UAAA,OAAO,EAAER,OAFX;AAGE,UAAA,WAAW,EAAEM,WAHf;AAIE,UAAA,QAAQ,EAAE,KAAKS;AAJjB;AAJJ,QADF,eAaE,gCAAC,uBAAD;AAAe,QAAA,SAAS,EAAC,OAAzB;AAAiC,QAAA,OAAO,EAAE,KAAKA,cAA/C;AAA+D,QAAA,MAAM,EAAE7B,KAAvE;AAA8E,QAAA,OAAO,EAAC;AAAtF,QAbF,CAFF,CADF,EAmBGqC,SAAS,iBAAI,gCAAC,uBAAD;AAAe,QAAA,SAAS,EAAC,WAAzB;AAAqC,QAAA,gBAAgB,EAAC,WAAtD;AAAkE,QAAA,MAAM,EAAEA;AAA1E,QAnBhB,eAoBE,gCAAC,kBAAD;AAAU,QAAA,QAAQ,EAAEF,QAApB;AAA8B,QAAA,WAAW,EAAEf;AAA3C,QApBF,CADF;AAwBD;;;EAxF8BwB,kBAAMC,S;;;iCAA1BjB,W,eACQ;AACjBK,EAAAA,UAAU,EAAEa,sBAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,UAAV,CAAhB,CADK;AAEjBb,EAAAA,UAAU,EAAEY,sBAAUE,MAAV,CAAiBC,UAFZ;AAGjBnC,EAAAA,OAAO,EAAEgC,sBAAUI,IAAV,CAAeD,UAHP;AAIjB7B,EAAAA,WAAW,EAAE0B,sBAAUE,MAJN;AAKjBtC,EAAAA,QAAQ,EAAEoC,sBAAUI,IAAV,CAAeD,UALR;AAMjBd,EAAAA,QAAQ,EAAEW,sBAAUE,MANH;AAOjBhD,EAAAA,KAAK,EAAE8C,sBAAUE,MAAV,CAAiBC,UAPP;AAQjBZ,EAAAA,SAAS,EAAES,sBAAUE,MARJ;AASjB1B,EAAAA,aAAa,EAAEwB,sBAAUE,MATR;AAUjB3B,EAAAA,QAAQ,EAAEyB,sBAAUK,IAAV,CAAeF,UAVR;AAWjBlB,EAAAA,KAAK,EAAEe,sBAAUE,MAAV,CAAiBC,UAXP;AAYjB7C,EAAAA,OAAO,EAAE0C,sBAAUM,MAZF;AAajBhB,EAAAA,SAAS,EAAEU,sBAAUE,MAbJ;AAcjBV,EAAAA,QAAQ,EAAEQ,sBAAUI,IAdH;AAejBX,EAAAA,cAAc,EAAEO,sBAAUI,IAfT;AAgBjBV,EAAAA,aAAa,EAAEM,sBAAUC,KAAV,CAAgB,CAAC,UAAD,EAAa,MAAb,EAAqB,YAArB,CAAhB;AAhBE,C;iCADRnB,W,kBAoBW;AACpBS,EAAAA,SAAS,EAAE,IADS;AAEpBf,EAAAA,aAAa,EAAE,IAFK;AAGpBR,EAAAA,OAAO,EAAE,KAHW;AAIpByB,EAAAA,cAAc,EAAE;AAJI,C;;eAuET,wBAAWpD,UAAX,EAAuByC,WAAvB,C","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = () => ({\n  row: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n  },\n  checkboxHolder: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n    flex: 1,\n    '& label': {\n      color: color.text(),\n    },\n  },\n  horizontalLayout: {\n    [`& .${CLASS_NAME}`]: {\n      paddingRight: '8px',\n    },\n  },\n});\n\nconst formStyleSheet = {\n  label: {\n    color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n    backgroundColor: color.background(),\n  },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n  name: 'FormControlLabel',\n})((props) => <FormControlLabel {...props} classes={{ label: props.classes.label }} />);\n\nconst colorStyle = (varName, fallback) => ({\n  [`&.${CLASS_NAME}`]: {\n    color: `var(--choice-input-${varName}, ${fallback}) !important`,\n  },\n});\n\nconst inputStyles = {\n  'correct-root': colorStyle('correct-color', color.text()),\n  'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n  'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n  'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n  'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n  'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n  root: {\n    ...colorStyle('color', color.text()),\n    '&:hover': { color: `${color.primaryLight()} !important` },\n  },\n  checked: colorStyle('selected-color', color.primary()),\n  disabled: {\n    ...colorStyle('disabled-color', color.text()),\n    opacity: 0.6,\n    cursor: 'not-allowed !important',\n    pointerEvents: 'initial !important',\n  },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n  const { correctness, classes, checked, onChange, disabled, accessibility } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled };\n  return (\n    <Checkbox\n      aria-label={accessibility}\n      {...miniProps}\n      className={CLASS_NAME}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n  const { correctness, classes, checked, onChange, disabled, accessibility } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled };\n\n  return (\n    <Radio\n      aria-label={accessibility}\n      {...miniProps}\n      className={CLASS_NAME}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport class ChoiceInput extends React.Component {\n  static propTypes = {\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    displayKey: PropTypes.string.isRequired,\n    checked: PropTypes.bool.isRequired,\n    correctness: PropTypes.string,\n    disabled: PropTypes.bool.isRequired,\n    feedback: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    rationale: PropTypes.string,\n    accessibility: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    value: PropTypes.string.isRequired,\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    hideTick: PropTypes.bool,\n    isEvaluateMode: PropTypes.bool,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n  };\n\n  static defaultProps = {\n    rationale: null,\n    accessibility: null,\n    checked: false,\n    isEvaluateMode: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.onToggleChoice = this.onToggleChoice.bind(this);\n  }\n\n  onToggleChoice() {\n    this.props.onChange({\n      value: this.props.value,\n      selected: !this.props.checked,\n    });\n  }\n\n  render() {\n    const {\n      choiceMode,\n      disabled,\n      displayKey,\n      feedback,\n      label,\n      checked,\n      correctness,\n      classes,\n      className,\n      rationale,\n      accessibility,\n      hideTick,\n      isEvaluateMode,\n      choicesLayout,\n    } = this.props;\n\n    const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n    const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n    const holderClassNames = classNames(classes.checkboxHolder, {\n      [classes.horizontalLayout]: choicesLayout === 'horizontal',\n    });\n\n    return (\n      <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n        <div className={classes.row}>\n          {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n          <div className={classNames(holderClassNames, 'checkbox-holder')}>\n            <StyledFormControlLabel\n              disabled={disabled}\n              label={displayKey ? displayKey + '. ' : ''}\n              control={\n                <Tag\n                  accessibility={accessibility}\n                  checked={checked}\n                  correctness={correctness}\n                  onChange={this.onToggleChoice}\n                />\n              }\n            />\n            <PreviewPrompt className=\"label\" onClick={this.onToggleChoice} prompt={label} tagName=\"span\" />\n          </div>\n        </div>\n        {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n        <Feedback feedback={feedback} correctness={correctness} />\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}

package/lib/choice.js

@@ -33,9 +33,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _choiceInput = _interopRequireDefault(require("./choice-input"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -71,6 +71,8 @@ var Choice = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(Choice, [{
     key: "render",
     value: function render() {
+      var _classNames;
+
       var _this$props2 = this.props,
           choice = _this$props2.choice,
           index = _this$props2.index,
@@ -101,7 +103,7 @@ var Choice = /*#__PURE__*/function (_React$Component) {
         isEvaluateMode: isEvaluateMode
       });
 
-      var names = (0, _classnames["default"])(classes.choice, (0, _defineProperty2["default"])({}, classes.noBorder, index === choicesLength - 1 || choicesLayout !== 'vertical'));
+      var names = (0, _classnames["default"])(classes.choice, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.noBorder, index === choicesLength - 1 || choicesLayout !== 'vertical'), (0, _defineProperty2["default"])(_classNames, classes.horizontalLayout, choicesLayout === 'horizontal'), _classNames));
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: choiceClass,
         key: index
@@ -139,6 +141,15 @@ var _default = (0, _styles.withStyles)({
   },
   noBorder: {
     borderBottom: 'none'
+  },
+  horizontalLayout: {
+    paddingRight: '20px',
+    '& label': {
+      marginRight: '8px' // '& span:first-child': {
+      //   paddingRight: 0
+      // }
+
+    }
   }
 })(Choice);
 

package/lib/choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","choiceClass","feedback","choiceProps","onChange","names","noBorder","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","paddingTop","paddingBottom","borderBottom"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n  onChange = (choice) => {\n    const { disabled, onChoiceChanged } = this.props;\n\n    if (!disabled) {\n      onChoiceChanged(choice);\n    }\n  };\n\n  render() {\n    const {\n      choice,\n      index,\n      choicesLength,\n      showCorrect,\n      isEvaluateMode,\n      choiceMode,\n      disabled,\n      checked,\n      correctness,\n      displayKey,\n      classes,\n      choicesLayout,\n      gridColumns,\n    } = this.props;\n    const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n    const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n    const choiceProps = {\n      ...choice,\n      checked,\n      choiceMode,\n      disabled,\n      feedback,\n      correctness,\n      displayKey,\n      choicesLayout,\n      gridColumns,\n      onChange: this.onChange,\n      isEvaluateMode,\n    };\n\n    const names = classNames(classes.choice, {\n      [classes.noBorder]:\n        index === choicesLength - 1 || choicesLayout !== 'vertical',\n    });\n\n    return (\n      <div className={choiceClass} key={index}>\n        <ChoiceInput {...choiceProps} className={names} />\n      </div>\n    );\n  }\n}\n\nChoice.propTypes = {\n  choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n  choice: PropTypes.object,\n  disabled: PropTypes.bool.isRequired,\n  onChoiceChanged: PropTypes.func,\n  classes: PropTypes.object.isRequired,\n  index: PropTypes.number,\n  choicesLength: PropTypes.number,\n  showCorrect: PropTypes.bool,\n  isEvaluateMode: PropTypes.bool,\n  checked: PropTypes.bool,\n  correctness: PropTypes.string,\n  displayKey: PropTypes.string,\n  choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n  gridColumns: PropTypes.string,\n};\n\nexport default withStyles({\n  choice: {\n    paddingTop: '20px',\n    paddingBottom: '10px',\n    borderBottom: '1px solid #E0DEE0',\n  },\n  noBorder: {\n    borderBottom: 'none',\n  },\n})(Choice);\n"],"file":"choice.js"}
+{"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","choiceClass","feedback","choiceProps","onChange","names","noBorder","horizontalLayout","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","paddingTop","paddingBottom","borderBottom","paddingRight","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n  onChange = (choice) => {\n    const { disabled, onChoiceChanged } = this.props;\n\n    if (!disabled) {\n      onChoiceChanged(choice);\n    }\n  };\n\n  render() {\n    const {\n      choice,\n      index,\n      choicesLength,\n      showCorrect,\n      isEvaluateMode,\n      choiceMode,\n      disabled,\n      checked,\n      correctness,\n      displayKey,\n      classes,\n      choicesLayout,\n      gridColumns,\n    } = this.props;\n    const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n    const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n    const choiceProps = {\n      ...choice,\n      checked,\n      choiceMode,\n      disabled,\n      feedback,\n      correctness,\n      displayKey,\n      choicesLayout,\n      gridColumns,\n      onChange: this.onChange,\n      isEvaluateMode,\n    };\n\n    const names = classNames(classes.choice, {\n      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',\n      [classes.horizontalLayout]: choicesLayout === 'horizontal',\n    });\n\n    return (\n      <div className={choiceClass} key={index}>\n        <ChoiceInput {...choiceProps} className={names} />\n      </div>\n    );\n  }\n}\n\nChoice.propTypes = {\n  choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n  choice: PropTypes.object,\n  disabled: PropTypes.bool.isRequired,\n  onChoiceChanged: PropTypes.func,\n  classes: PropTypes.object.isRequired,\n  index: PropTypes.number,\n  choicesLength: PropTypes.number,\n  showCorrect: PropTypes.bool,\n  isEvaluateMode: PropTypes.bool,\n  checked: PropTypes.bool,\n  correctness: PropTypes.string,\n  displayKey: PropTypes.string,\n  choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n  gridColumns: PropTypes.string,\n};\n\nexport default withStyles({\n  choice: {\n    paddingTop: '20px',\n    paddingBottom: '10px',\n    borderBottom: '1px solid #E0DEE0',\n  },\n  noBorder: {\n    borderBottom: 'none',\n  },\n  horizontalLayout: {\n    paddingRight: '20px',\n    '& label': {\n      marginRight: '8px',\n      // '& span:first-child': {\n      //   paddingRight: 0\n      // }\n    },\n  },\n})(Choice);\n"],"file":"choice.js"}

package/lib/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.isComplete = void 0;
+exports.isComplete = exports["default"] = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","value","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","model","onChoiceChanged","_onChange","bind","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","s","data","choiceMode","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = session => !!(session && session.value && session.value.length);\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this)\n          });\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true }\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      var event = new CustomEvent('session-changed', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          complete: isComplete(this._session),\n          component: this.tagName.toLowerCase()\n        }\n      });\n\n      this.dispatchEvent(event);\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new CustomEvent('model-set', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              complete: isComplete(this._session),\n              component: this.tagName.toLowerCase(),\n              hasModel: this._model !== undefined\n            }\n          })\n        );\n      },\n      50,\n      { leading: false, trailing: true }\n    );\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  connectedCallback() {\n    this._rerender();\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","value","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","model","onChoiceChanged","_onChange","bind","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","s","data","choiceMode","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,wBAAN,CAAZ;;AAEO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,OAAD;AAAA,SAAa,CAAC,EAAEA,OAAO,IAAIA,OAAO,CAACC,KAAnB,IAA4BD,OAAO,CAACC,KAAR,CAAcC,MAA5C,CAAd;AAAA,CAAnB;;;;IAEcC,c;;;;;AACnB,4BAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAEA,UAAKC,SAAL,GAAiB,0BACf,YAAM;AACJ,UAAI,MAAKF,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIE,OAAO,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACtCC,UAAAA,KAAK,EAAE,MAAKP,MAD0B;AAEtCJ,UAAAA,OAAO,EAAE,MAAKK,QAFwB;AAGtCO,UAAAA,eAAe,EAAE,MAAKC,SAAL,CAAeC,IAAf;AAHqB,SAA1B,CAAd;;AAMAC,6BAASC,MAAT,CAAgBT,OAAhB,kDAA+B,YAAM;AACnCT,UAAAA,GAAG,CAAC,+BAAD,CAAH;AACA;AACD,SAHD;AAID,OAXD,MAWO;AACLA,QAAAA,GAAG,CAAC,MAAD,CAAH;AACD;AACF,KAhBc,EAiBf,EAjBe,EAkBf;AAAEmB,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAlBe,CAAjB;AAqBA,UAAKC,wBAAL,GAAgC,0BAAS,YAAM;AAC7C,UAAIC,KAAK,GAAG,IAAIC,WAAJ,CAAgB,iBAAhB,EAAmC;AAC7CC,QAAAA,OAAO,EAAE,IADoC;AAE7CC,QAAAA,QAAQ,EAAE,IAFmC;AAG7CC,QAAAA,MAAM,EAAE;AACNC,UAAAA,QAAQ,EAAE1B,UAAU,CAAC,MAAKM,QAAN,CADd;AAENqB,UAAAA,SAAS,EAAE,MAAKC,OAAL,CAAaC,WAAb;AAFL;AAHqC,OAAnC,CAAZ;;AASA,YAAKC,aAAL,CAAmBT,KAAnB;AACD,KAX+B,CAAhC;AAaA,UAAKU,iBAAL,GAAyB,0BACvB,YAAM;AACJ,YAAKD,aAAL,CACE,IAAIR,WAAJ,CAAgB,WAAhB,EAA6B;AAC3BC,QAAAA,OAAO,EAAE,IADkB;AAE3BC,QAAAA,QAAQ,EAAE,IAFiB;AAG3BC,QAAAA,MAAM,EAAE;AACNC,UAAAA,QAAQ,EAAE1B,UAAU,CAAC,MAAKM,QAAN,CADd;AAENqB,UAAAA,SAAS,EAAE,MAAKC,OAAL,CAAaC,WAAb,EAFL;AAGNG,UAAAA,QAAQ,EAAE,MAAK3B,MAAL,KAAgB4B;AAHpB;AAHmB,OAA7B,CADF;AAWD,KAbsB,EAcvB,EAduB,EAevB;AAAEf,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAfuB,CAAzB;AAvCY;AAwDb;;;;SAED,aAAUe,CAAV,EAAa;AACX,WAAK7B,MAAL,GAAc6B,CAAd;;AACA,WAAK3B,SAAL;;AACA,WAAKwB,iBAAL;AACD;;;SAED,eAAc;AACZ,aAAO,KAAKzB,QAAZ;AACD,K;SAED,aAAY4B,CAAZ,EAAe;AACb,WAAK5B,QAAL,GAAgB4B,CAAhB;;AACA,WAAK3B,SAAL,GAFa,CAGb;;;AACA,WAAKa,wBAAL;AACD;;;WAED,mBAAUe,IAAV,EAAgB;AACd,8CAAmB,KAAK7B,QAAxB,EAAkC,KAAKD,MAAL,CAAY+B,UAA9C,EAA0DD,IAA1D;;AACA,WAAKf,wBAAL;;AACA,WAAKb,SAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,SAAL;AACD;;;kDApFyC8B,W","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session) => !!(session && session.value && session.value.length);\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n          });\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      var event = new CustomEvent('session-changed', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          complete: isComplete(this._session),\n          component: this.tagName.toLowerCase(),\n        },\n      });\n\n      this.dispatchEvent(event);\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new CustomEvent('model-set', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              complete: isComplete(this._session),\n              component: this.tagName.toLowerCase(),\n              hasModel: this._model !== undefined,\n            },\n          }),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  connectedCallback() {\n    this._rerender();\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -56,7 +56,10 @@ var Main = /*#__PURE__*/function (_React$Component) {
           session = _this$props.session,
           classes = _this$props.classes; // model.partLabel is a property used for ebsr
 
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewLayout, null, model.partLabel && /*#__PURE__*/_react["default"].createElement("p", null, model.partLabel), /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewLayout, {
+        ariaLabel: model.choiceMode == 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',
+        role: "region"
+      }, model.partLabel && /*#__PURE__*/_react["default"].createElement("p", null, model.partLabel), /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(classes.root, classes[model.className])
       }, /*#__PURE__*/_react["default"].createElement(_multipleChoice["default"], (0, _extends2["default"])({}, model, {
         session: session,

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["Main","props","model","onChoiceChanged","session","classes","partLabel","root","className","React","Component","PropTypes","object","func","isRequired","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;IAEMA,I;;;;;AAYJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAAqD,KAAKA,KAA1D;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AAAA,UAAyCC,OAAzC,eAAyCA,OAAzC,CADO,CAGP;;AACA,0BACE,gCAAC,uBAAD,QACGH,KAAK,CAACI,SAAN,iBAAmB,2CAAIJ,KAAK,CAACI,SAAV,CADtB,eAEE;AAAK,QAAA,SAAS,EAAE,4BAAWD,OAAO,CAACE,IAAnB,EAAyBF,OAAO,CAACH,KAAK,CAACM,SAAP,CAAhC;AAAhB,sBACE,gCAAC,0BAAD,gCACMN,KADN;AAEE,QAAA,OAAO,EAAEE,OAFX;AAGE,QAAA,eAAe,EAAED;AAHnB,SADF,CAFF,CADF;AAYD;;;EAhCgBM,kBAAMC,S;;iCAAnBV,I,eACe;AACjBE,EAAAA,KAAK,EAAES,sBAAUC,MADA;AAEjBR,EAAAA,OAAO,EAAEO,sBAAUC,MAFF;AAGjBT,EAAAA,eAAe,EAAEQ,sBAAUE,IAHV;AAIjBR,EAAAA,OAAO,EAAEM,sBAAUC,MAAV,CAAiBE;AAJT,C;iCADfd,I,kBAQkB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AA2BxB,IAAMW,MAAM,GAAG,wBAAW,EAAX,EAAe;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAf,EAAiChB,IAAjC,CAAf;AAEA,IAAMiB,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACnB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEgB;AAAzB,kBACE,gCAAC,MAAD,EAAYhB,KAAZ,CADF,CADW;AAAA,CAAb;;eAMemB,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { PreviewLayout } from '@pie-lib/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nclass Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onChoiceChanged: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n  };\n\n  static defaultProps = {\n    model: {},\n    session: {},\n  };\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const { model, onChoiceChanged, session, classes } = this.props;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout>\n        {model.partLabel && <p>{model.partLabel}</p>}\n        <div className={classNames(classes.root, classes[model.className])}>\n          <MultipleChoice\n            {...model}\n            session={session}\n            onChoiceChanged={onChoiceChanged}\n          />\n        </div>\n      </PreviewLayout>\n    );\n  }\n}\n\nconst Styled = withStyles({}, { name: 'Main' })(Main);\n\nconst theme = createMuiTheme({\n  typography: {\n    useNextVariants: true,\n  },\n});\n\nconst Root = (props) => (\n  <MuiThemeProvider theme={theme}>\n    <Styled {...props} />\n  </MuiThemeProvider>\n);\n\nexport default Root;\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["Main","props","model","onChoiceChanged","session","classes","choiceMode","partLabel","root","className","React","Component","PropTypes","object","func","isRequired","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;IAEMA,I;;;;;AAYJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAAqD,KAAKA,KAA1D;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AAAA,UAAyCC,OAAzC,eAAyCA,OAAzC,CADO,CAGP;;AACA,0BACE,gCAAC,uBAAD;AACE,QAAA,SAAS,EAAGH,KAAK,CAACI,UAAN,IAAoB,OAApB,GAA8B,0BAA9B,GAA2D,kCADzE;AAEE,QAAA,IAAI,EAAC;AAFP,SAIGJ,KAAK,CAACK,SAAN,iBAAmB,2CAAIL,KAAK,CAACK,SAAV,CAJtB,eAKE;AAAK,QAAA,SAAS,EAAE,4BAAWF,OAAO,CAACG,IAAnB,EAAyBH,OAAO,CAACH,KAAK,CAACO,SAAP,CAAhC;AAAhB,sBACE,gCAAC,0BAAD,gCAAoBP,KAApB;AAA2B,QAAA,OAAO,EAAEE,OAApC;AAA6C,QAAA,eAAe,EAAED;AAA9D,SADF,CALF,CADF;AAWD;;;EA/BgBO,kBAAMC,S;;iCAAnBX,I,eACe;AACjBE,EAAAA,KAAK,EAAEU,sBAAUC,MADA;AAEjBT,EAAAA,OAAO,EAAEQ,sBAAUC,MAFF;AAGjBV,EAAAA,eAAe,EAAES,sBAAUE,IAHV;AAIjBT,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBE;AAJT,C;iCADff,I,kBAQkB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AA0BxB,IAAMY,MAAM,GAAG,wBAAW,EAAX,EAAe;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAf,EAAiCjB,IAAjC,CAAf;AAEA,IAAMkB,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACpB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEiB;AAAzB,kBACE,gCAAC,MAAD,EAAYjB,KAAZ,CADF,CADW;AAAA,CAAb;;eAMeoB,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { PreviewLayout } from '@pie-lib/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nclass Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onChoiceChanged: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n  };\n\n  static defaultProps = {\n    model: {},\n    session: {},\n  };\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const { model, onChoiceChanged, session, classes } = this.props;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout\n        ariaLabel={(model.choiceMode == 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question')}\n        role=\"region\"\n      > \n        {model.partLabel && <p>{model.partLabel}</p>}\n        <div className={classNames(classes.root, classes[model.className])}>\n          <MultipleChoice {...model} session={session} onChoiceChanged={onChoiceChanged} />\n        </div>\n      </PreviewLayout>\n    );\n  }\n}\n\nconst Styled = withStyles({}, { name: 'Main' })(Main);\n\nconst theme = createMuiTheme({\n  typography: {\n    useNextVariants: true,\n  },\n});\n\nconst Root = (props) => (\n  <MuiThemeProvider theme={theme}>\n    <Styled {...props} />\n  </MuiThemeProvider>\n);\n\nexport default Root;\n"],"file":"main.js"}