@pie-element/ebsr 9.0.2-next.13 → 9.0.2-next.15

package/configure/node_modules/@pie-element/multiple-choice/docs/pie-schema.json.md

@@ -0,0 +1,327 @@
+Model for the Choice Interaction
+
+The schema defines the following properties:
+
+# `choiceMode` (string, enum)
+
+Indicates the choices are single or multiple selection
+
+This element must be one of the following enum values:
+
+* `checkbox`
+* `radio`
+
+# `choicePrefix` (string, enum)
+
+What key should be displayed before choices. If undefined no  key will be displayed.
+
+This element must be one of the following enum values:
+
+* `letters`
+* `numbers`
+
+Default: `": 'letters'"`
+
+# `choices` (array, required)
+
+The choice options for the question
+
+The object is an array with all elements of the type `object`.
+
+The array object has the following properties:
+
+## `correct` (boolean)
+
+Indicates if the choice is correct
+
+## `value` (string, required)
+
+the value that will be stored if this choice is selected
+
+## `label` (string, required)
+
+the text label that will be presented to the user for this choice
+
+## `feedback` (object)
+
+The type of feedback to use:
+   `default` = a standard feedback message
+   `custom` = a customized feedback message
+
+Properties of the `feedback` object:
+
+### `type` (string, enum, required)
+
+This element must be one of the following enum values:
+
+* `custom`
+* `default`
+* `none`
+
+Default: `"default"`
+
+### `value` (string)
+
+Value for feedback
+
+### `custom` (string)
+
+Custom value for feedback
+
+## `rationale` (string)
+
+Rationale for the Choice
+
+# `prompt` (string)
+
+The question prompt or item stem
+
+# `promptEnabled` (boolean)
+
+Determines if prompt should show
+
+# `choicesLayout` (string, enum)
+
+Indicates the layout of choices for player
+
+This element must be one of the following enum values:
+
+* `grid`
+* `horizontal`
+* `vertical`
+
+Default: `": 'vertical'"`
+
+# `gridColumns` (number)
+
+Indicates the number of columns for the grid layout
+
+Default: `": 2"`
+
+# `toolbarEditorPosition` (string, enum)
+
+Indicates the editor's toolbar position which can be 'bottom' or 'top'
+
+This element must be one of the following enum values:
+
+* `bottom`
+* `top`
+
+Default: `": 'bottom'"`
+
+# `lockChoiceOrder` (boolean)
+
+Indicates the order of choices should be randomly ordered when presented to user
+
+# `partialScoring` (boolean)
+
+Indicates that the item should use partial scoring
+
+# `scoringType` (string, enum)
+
+Indicates scoring type
+
+This element must be one of the following enum values:
+
+* `auto`
+* `rubric`
+
+# `studentInstructions` (string)
+
+Indicates student instructions
+
+# `teacherInstructions` (string)
+
+Indicates teacher instructions
+
+# `feedbackEnabled` (boolean, required)
+
+Indicates if feedback is enabled
+
+# `rationaleEnabled` (boolean, required)
+
+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
+
+# `teacherInstructionsEnabled` (boolean, required)
+
+Indicates if Teacher Instructions are enabled
+
+# `accessibilityLabelsEnabled` (boolean, required)
+
+Indicates if Accessibility Labels are enabled
+
+# `rubricEnabled` (boolean, required)
+
+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.
+
+# `element` (string, required)
+
+The html Element tag name
+
+---
+
+# Sub Schemas
+
+The schema defines the following additional types:
+
+## `ConfigureProp` (object)
+
+Properties of the `ConfigureProp` 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
+
+## `ConfigurePropWithEnabled` (object)
+
+Properties of the `ConfigurePropWithEnabled` 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)
+
+## `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
+
+## `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:
+
+### `correct` (boolean)
+
+Indicates if the choice is correct
+
+### `value` (string, required)
+
+the value that will be stored if this choice is selected
+
+### `label` (string, required)
+
+the text label that will be presented to the user for this choice
+
+### `feedback` (object)
+
+The type of feedback to use:
+   `default` = a standard feedback message
+   `custom` = a customized feedback message
+
+Properties of the `feedback` object:
+
+#### `type` (string, enum, required)
+
+This element must be one of the following enum values:
+
+* `custom`
+* `default`
+* `none`
+
+Default: `"default"`
+
+#### `value` (string)
+
+Value for feedback
+
+#### `custom` (string)
+
+Custom value for feedback
+
+### `rationale` (string)
+
+Rationale for the Choice
+
+## `Feedback` (object)
+
+The type of feedback to use:
+   `default` = a standard feedback message
+   `custom` = a customized feedback message
+
+Properties of the `Feedback` object:
+
+### `type` (string, enum, required)
+
+This element must be one of the following enum values:
+
+* `custom`
+* `default`
+* `none`
+
+Default: `"default"`
+
+### `value` (string)
+
+Value for feedback
+
+### `custom` (string)
+
+Custom value for feedback

package/configure/node_modules/@pie-element/multiple-choice/lib/choice-input.js

@@ -0,0 +1,332 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.StyledRadio = exports.StyledFormControlLabel = exports.StyledCheckbox = exports.ChoiceInput = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+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"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _feedbackTick = _interopRequireDefault(require("./feedback-tick"));
+
+var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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); }; }
+
+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); 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 = 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(theme) {
+  return {
+    row: {
+      display: 'flex',
+      alignItems: 'center',
+      backgroundColor: _renderUi.color.background()
+    },
+    checkboxHolder: {
+      display: 'flex',
+      alignItems: 'center',
+      backgroundColor: _renderUi.color.background(),
+      flex: 1,
+      '& label': {
+        color: _renderUi.color.text(),
+        '& > span': {
+          fontSize: 'inherit'
+        }
+      }
+    },
+    horizontalLayout: (0, _defineProperty2["default"])({}, "& .".concat(CLASS_NAME), {
+      paddingRight: theme.spacing.unit
+    })
+  };
+};
+
+var formStyleSheet = {
+  label: {
+    color: "".concat(_renderUi.color.text(), " !important"),
+    //'var(--choice-input-color, black)'
+    backgroundColor: _renderUi.color.background()
+  }
+};
+var StyledFormControlLabel = (0, _styles.withStyles)(formStyleSheet, {
+  name: 'FormControlLabel'
+})(function (props) {
+  return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], (0, _extends2["default"])({}, props, {
+    classes: {
+      label: props.classes.label
+    }
+  }));
+});
+exports.StyledFormControlLabel = StyledFormControlLabel;
+
+var colorStyle = function colorStyle(varName, fallback) {
+  return (0, _defineProperty2["default"])({}, "&.".concat(CLASS_NAME), {
+    color: "var(--choice-input-".concat(varName, ", ").concat(fallback, ") !important")
+  });
+};
+
+var inputStyles = {
+  'correct-root': colorStyle('correct-color', _renderUi.color.text()),
+  'correct-checked': colorStyle('correct-selected-color', _renderUi.color.correct()),
+  //green[500]),
+  'correct-disabled': colorStyle('correct-disabled-color', _renderUi.color.disabled()),
+  //'grey'),
+  'incorrect-root': colorStyle('incorrect-color', _renderUi.color.incorrect()),
+  'incorrect-checked': colorStyle('incorrect-checked', _renderUi.color.incorrect()),
+  //orange[500]),
+  'incorrect-disabled': colorStyle('incorrect-disabled-color', _renderUi.color.disabled()),
+  root: _objectSpread(_objectSpread({}, colorStyle('color', _renderUi.color.text())), {}, {
+    '&:hover': {
+      color: "".concat(_renderUi.color.primaryLight(), " !important")
+    }
+  }),
+  checked: colorStyle('selected-color', _renderUi.color.primary()),
+  disabled: _objectSpread(_objectSpread({}, colorStyle('disabled-color', _renderUi.color.text())), {}, {
+    opacity: 0.6,
+    cursor: 'not-allowed !important',
+    pointerEvents: 'initial !important'
+  })
+};
+var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
+  var correctness = props.correctness,
+      classes = props.classes,
+      checked = props.checked,
+      onChange = props.onChange,
+      disabled = props.disabled,
+      accessibility = props.accessibility,
+      value = props.value,
+      id = props.id;
+
+  var key = function key(k) {
+    return correctness ? "".concat(correctness, "-").concat(k) : k;
+  };
+
+  var resolved = {
+    root: classes[key('root')],
+    checked: classes[key('checked')],
+    disabled: classes[key('disabled')]
+  };
+  var miniProps = {
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled,
+    value: value
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
+    id: id,
+    "aria-label": accessibility,
+    "aria-checked": checked
+  }, miniProps, {
+    className: CLASS_NAME,
+    classes: {
+      root: resolved.root,
+      checked: resolved.checked,
+      disabled: "".concat(correctness ? '' : resolved.disabled)
+    }
+  }));
+});
+exports.StyledCheckbox = StyledCheckbox;
+var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
+  var correctness = props.correctness,
+      classes = props.classes,
+      checked = props.checked,
+      onChange = props.onChange,
+      disabled = props.disabled,
+      accessibility = props.accessibility,
+      value = props.value,
+      id = props.id;
+
+  var key = function key(k) {
+    return correctness ? "".concat(correctness, "-").concat(k) : k;
+  };
+
+  var resolved = {
+    root: classes[key('root')],
+    checked: classes[key('checked')],
+    disabled: classes[key('disabled')]
+  };
+  var miniProps = {
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled,
+    value: value
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({
+    id: id,
+    "aria-label": accessibility,
+    "aria-checked": checked
+  }, miniProps, {
+    className: CLASS_NAME,
+    classes: {
+      root: resolved.root,
+      checked: resolved.checked,
+      disabled: "".concat(correctness ? '' : resolved.disabled)
+    }
+  }));
+});
+exports.StyledRadio = StyledRadio;
+
+var ChoiceInput = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(ChoiceInput, _React$Component);
+
+  var _super = _createSuper(ChoiceInput);
+
+  function ChoiceInput(props) {
+    var _this;
+
+    (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(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() {
+      var _this$props = this.props,
+          choiceMode = _this$props.choiceMode,
+          disabled = _this$props.disabled,
+          displayKey = _this$props.displayKey,
+          feedback = _this$props.feedback,
+          label = _this$props.label,
+          correctness = _this$props.correctness,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          rationale = _this$props.rationale,
+          accessibility = _this$props.accessibility,
+          hideTick = _this$props.hideTick,
+          isEvaluateMode = _this$props.isEvaluateMode,
+          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", {
+        className: classes.row
+      }, !hideTick && isEvaluateMode && /*#__PURE__*/_react["default"].createElement(_feedbackTick["default"], {
+        correctness: correctness
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(holderClassNames, 'checkbox-holder')
+      }, /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
+        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
+        })
+      }))), rationale && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "rationale",
+        defaultClassName: "rationale",
+        prompt: rationale
+      }), /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
+        feedback: feedback,
+        correctness: correctness
+      }));
+    }
+  }]);
+  return ChoiceInput;
+}(_react["default"].Component);
+
+exports.ChoiceInput = ChoiceInput;
+(0, _defineProperty2["default"])(ChoiceInput, "propTypes", {
+  choiceMode: _propTypes["default"].oneOf(['radio', 'checkbox']),
+  displayKey: _propTypes["default"].string.isRequired,
+  checked: _propTypes["default"].bool.isRequired,
+  correctness: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool.isRequired,
+  feedback: _propTypes["default"].string,
+  label: _propTypes["default"].string.isRequired,
+  rationale: _propTypes["default"].string,
+  accessibility: _propTypes["default"].string,
+  onChange: _propTypes["default"].func.isRequired,
+  value: _propTypes["default"].string.isRequired,
+  classes: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  hideTick: _propTypes["default"].bool,
+  isEvaluateMode: _propTypes["default"].bool,
+  choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal']),
+  updateSession: _propTypes["default"].func
+});
+(0, _defineProperty2["default"])(ChoiceInput, "defaultProps", {
+  rationale: null,
+  accessibility: null,
+  checked: false,
+  isEvaluateMode: false
+});
+
+var _default = (0, _styles.withStyles)(styleSheet)(ChoiceInput);
+
+exports["default"] = _default;
+//# sourceMappingURL=choice-input.js.map

package/configure/node_modules/@pie-element/multiple-choice/lib/choice-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","paddingRight","spacing","unit","formStyleSheet","label","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","event","updateSession","selected","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","Tag","classSuffix","holderClassNames","choicelabel","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/pie-toolbox/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 = (theme) => ({\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      '& > span':{\n        fontSize: 'inherit',\n      }\n    },\n  },\n  horizontalLayout: {\n    [`& .${CLASS_NAME}`]: {\n      paddingRight: theme.spacing.unit,\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, value, id } = 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, value };\n\n  return (\n    <Checkbox\n      id={id}\n      aria-label={accessibility}\n      aria-checked={checked}\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, value, id } = 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, value };\n\n  return (\n    <Radio\n      id={id}\n      aria-label={accessibility}\n      aria-checked={checked}\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    updateSession: PropTypes.func,\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    this.choiceId = this.generateChoiceId();\n  }\n\n  onToggleChoice(event) {\n    this.props.onChange(event);\n    this.props.updateSession({\n      value: this.props.value,\n      selected: !this.props.checked,\n    });\n  }\n\n  generateChoiceId() {\n    return 'choice-' + (Math.random() * 10000).toFixed();\n  }\n\n  render() {\n    const {\n      choiceMode,\n      disabled,\n      displayKey,\n      feedback,\n      label,\n      correctness,\n      classes,\n      className,\n      rationale,\n      accessibility,\n      hideTick,\n      isEvaluateMode,\n      choicesLayout,\n      value,\n      checked,\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    const choicelabel = (\n      <>\n        {displayKey ? (\n          <span className={classes.row}>\n            {displayKey}.{'\\u00A0'}\n            <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n          </span>\n        ) : (\n          <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n        )}\n      </>\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              label={choicelabel}\n              value={value}\n              htmlFor={this.choiceId}\n              control={\n                <Tag\n                  accessibility={accessibility}\n                  disabled={disabled}\n                  checked={checked}\n                  correctness={correctness}\n                  value={value}\n                  id={this.choiceId}\n                  onChange={this.onToggleChoice}\n                />\n              }\n            />\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"}