@pie-element/multiple-choice 7.10.3-next.71 → 8.0.0-beta

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["styles","Main","props","model","onChoiceChanged","session","React","Component","PropTypes","object","func","classes","isRequired","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO,EAAP;AAAA,CAAf;;IAEMC,I;;;;;AAYJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAA4C,KAAKA,KAAjD;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC,CADO,CAGP;;AACA,0BACE,gCAAC,uBAAD,qBACE,gCAAC,0BAAD,gCAAoBF,KAApB;AAA2B,QAAA,OAAO,EAAEE,OAApC;AAA6C,QAAA,eAAe,EAAED;AAA9D,SADF,CADF;AAKD;;;EAzBgBE,kBAAMC,S;;iCAAnBN,I,eACe;AACjBE,EAAAA,KAAK,EAAEK,sBAAUC,MADA;AAEjBJ,EAAAA,OAAO,EAAEG,sBAAUC,MAFF;AAGjBL,EAAAA,eAAe,EAAEI,sBAAUE,IAHV;AAIjBC,EAAAA,OAAO,EAAEH,sBAAUC,MAAV,CAAiBG;AAJT,C;iCADfX,I,kBAQkB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AAoBxB,IAAMQ,MAAM,GAAG,wBAAWb,MAAX,EAAmB;AAAEc,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAqCb,IAArC,CAAf;AAEA,IAAMc,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAAChB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEa;AAAzB,kBACE,gCAAC,MAAD,EAAYb,KAAZ,CADF,CADW;AAAA,CAAb;;eAMegB,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 { PreviewLayout } from '@pie-lib/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nconst styles = () => ({});\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 } = this.props;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout>\n        <MultipleChoice {...model} session={session} onChoiceChanged={onChoiceChanged} />\n      </PreviewLayout>\n    );\n  }\n}\n\nconst Styled = withStyles(styles, { 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"}

package/lib/multiple-choice.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.MultipleChoice = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -42,36 +40,33 @@ 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; } }
 
 // MultipleChoice
-var styles = function styles(theme) {
-  return {
-    main: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      '& *': {
-        '-webkit-font-smoothing': 'antialiased'
-      }
-    },
-    partLabel: {
-      paddingBottom: theme.spacing.unit * 2
-    },
-    teacherInstructions: {
-      marginBottom: theme.spacing.unit * 2
-    },
-    horizontalLayout: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    },
-    gridLayout: {
-      display: 'grid'
-    },
-    fieldset: {
-      border: '0px',
-      padding: '0.01em 0 0 0',
-      margin: '0px',
-      minWidth: '0px'
+var styles = {
+  corespringChoice: {
+    backgroundColor: _renderUi.color.background(),
+    padding: '5px',
+    '& *': {
+      '-webkit-font-smoothing': 'antialiased'
     }
-  };
+  },
+  horizontalLayout: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  gridLayout: {
+    display: 'grid'
+  },
+  getColumns: function getColumns(columns) {
+    return columns > 1 ? {
+      gridTemplateColumns: "repeat(".concat(columns, ", 1fr)")
+    } : undefined;
+  },
+  fieldset: {
+    border: '0px',
+    padding: '0.01em 0 0 0',
+    margin: '0px',
+    minWidth: '0px'
+  }
 };
 
 var MultipleChoice = /*#__PURE__*/function (_React$Component) {
@@ -84,34 +79,6 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
 
     (0, _classCallCheck2["default"])(this, MultipleChoice);
     _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (event) {
-      var target = event.target;
-
-      _this.setState({
-        selectedValue: target.value
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChangeCheckboxes", function (event) {
-      var _event$target = event.target,
-          value = _event$target.value,
-          checked = _event$target.checked;
-
-      _this.setState(function (prevState) {
-        var selectedValues = (0, _toConsumableArray2["default"])(prevState.selectedValues);
-
-        if (checked) {
-          selectedValues.push(value);
-        } else {
-          selectedValues = selectedValues.filter(function (currentValue) {
-            return currentValue !== value;
-          });
-        }
-
-        return {
-          selectedValues: selectedValues
-        };
-      });
-    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getCorrectness", function () {
       var choice = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var isCorrect = choice.correct;
@@ -141,8 +108,6 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       }
     });
     _this.state = {
-      selectedValue: null,
-      selectedValues: [],
       showCorrect: _this.props.alwaysShowCorrect || false
     };
     _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2["default"])(_this));
@@ -150,13 +115,6 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2["default"])(MultipleChoice, [{
-    key: "isSelected",
-    value: function isSelected(value) {
-      var sessionValue = this.props.session && this.props.session.value;
-      return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
-    } // handleChange and handleChangeCheckboxes functions were added for accessibility. Please see comments and videos from PD-2441. They should only be removed if a better solution is found.
-
-  }, {
     key: "onToggle",
     value: function onToggle() {
       if (this.props.mode === 'evaluate') {
@@ -180,6 +138,12 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "isSelected",
+    value: function isSelected(value) {
+      var sessionValue = this.props.session && this.props.session.value;
+      return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
+    }
   }, {
     key: "indexToSymbol",
     value: function indexToSymbol(index) {
@@ -193,34 +157,17 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
 
       return '';
     }
-  }, {
-    key: "getChecked",
-    value: function getChecked(choice) {
-      if (this.state.showCorrect) {
-        return choice.correct || false;
-      }
-
-      if (this.isSelected(choice.value)) {
-        return true;
-      }
-
-      return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
-    }
   }, {
     key: "render",
     value: function render() {
-      var _classNames,
-          _this2 = this;
+      var _this2 = this;
 
       var _this$props = this.props,
           mode = _this$props.mode,
           disabled = _this$props.disabled,
-          className = _this$props.className,
           _this$props$choices = _this$props.choices,
           choices = _this$props$choices === void 0 ? [] : _this$props$choices,
           choiceMode = _this$props.choiceMode,
-          gridColumns = _this$props.gridColumns,
-          partLabel = _this$props.partLabel,
           prompt = _this$props.prompt,
           onChoiceChanged = _this$props.onChoiceChanged,
           responseCorrect = _this$props.responseCorrect,
@@ -231,46 +178,40 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       var showCorrect = this.state.showCorrect;
       var isEvaluateMode = mode === 'evaluate';
       var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
-      var columnsStyle = gridColumns > 1 ? {
-        gridTemplateColumns: "repeat(".concat(gridColumns, ", 1fr)")
-      } : undefined;
-
-      var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        tagName: "div",
-        className: "prompt",
-        defaultClassName: "teacher-instructions",
-        prompt: teacherInstructions
-      });
-
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.main, className, 'multiple-choice')
-      }, partLabel && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.partLabel
-      }, partLabel), teacherInstructions && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.teacherInstructions
-      }, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        className: (0, _classnames["default"])(classes.corespringChoice, 'multiple-choice')
+      }, teacherInstructions && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, teacherInstructionsDiv) : teacherInstructionsDiv), /*#__PURE__*/_react["default"].createElement("fieldset", {
-        className: classes.fieldset
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        tagName: "div",
         className: "prompt",
-        defaultClassName: "prompt",
-        prompt: prompt,
-        tagName: 'legend'
-      }), !alwaysShowCorrect && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+        prompt: teacherInstructions
+      })) : /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        tagName: "div",
+        className: "prompt",
+        defaultClassName: "teacher-instructions",
+        prompt: teacherInstructions
+      }), /*#__PURE__*/_react["default"].createElement("br", null)), !alwaysShowCorrect && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
         show: showCorrectAnswerToggle,
         toggled: showCorrect,
         onToggle: this.onToggle.bind(this)
+      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("fieldset", {
+        className: classes.fieldset
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        defaultClassName: "prompt",
+        prompt: prompt,
+        tagName: "legend"
       }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.gridLayout, this.props.choicesLayout === 'grid'), (0, _defineProperty2["default"])(_classNames, classes.horizontalLayout, this.props.choicesLayout === 'horizontal'), _classNames)),
-        style: columnsStyle
+        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.gridLayout, this.props.choicesLayout === 'grid'), (0, _defineProperty2["default"])({}, classes.horizontalLayout, this.props.choicesLayout === 'horizontal')),
+        style: styles.getColumns(this.props.gridColumns)
       }, choices.map(function (choice, index) {
         return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
           choicesLayout: _this2.props.choicesLayout,
-          gridColumns: gridColumns,
+          gridColumns: _this2.props.gridColumns,
           key: "choice-".concat(index),
           choice: choice,
           index: index,
@@ -279,10 +220,9 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           isEvaluateMode: isEvaluateMode,
           choiceMode: choiceMode,
           disabled: disabled,
-          updateSession: onChoiceChanged,
-          onChoiceChanged: _this2.props.choiceMode === 'radio' ? _this2.handleChange : _this2.handleChangeCheckboxes,
+          onChoiceChanged: onChoiceChanged,
           hideTick: choice.hideTick,
-          checked: _this2.getChecked(choice),
+          checked: showCorrect ? choice.correct || false : _this2.isSelected(choice.value),
           correctness: isEvaluateMode ? _this2.getCorrectness(choice) : undefined,
           displayKey: _this2.indexToSymbol(index)
         });
@@ -294,12 +234,10 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
 
 exports.MultipleChoice = MultipleChoice;
 (0, _defineProperty2["default"])(MultipleChoice, "propTypes", {
-  className: _propTypes["default"].string,
   mode: _propTypes["default"].oneOf(['gather', 'view', 'evaluate']),
   choiceMode: _propTypes["default"].oneOf(['radio', 'checkbox']),
   keyMode: _propTypes["default"].oneOf(['numbers', 'letters', 'none']),
   choices: _propTypes["default"].array,
-  partLabel: _propTypes["default"].string,
   prompt: _propTypes["default"].string,
   teacherInstructions: _propTypes["default"].string,
   session: _propTypes["default"].object,

package/lib/multiple-choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["styles","theme","main","color","text","backgroundColor","background","partLabel","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","display","flexDirection","flexWrap","gridLayout","fieldset","border","padding","margin","minWidth","MultipleChoice","props","event","target","setState","selectedValue","value","checked","prevState","selectedValues","push","filter","currentValue","choice","isCorrect","correct","isChecked","isSelected","state","showCorrect","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","session","indexOf","mode","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","includes","disabled","className","choices","gridColumns","prompt","onChoiceChanged","responseCorrect","classes","animationsDisabled","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","teacherInstructionsDiv","hidden","visible","choicesLayout","map","length","handleChange","handleChangeCheckboxes","hideTick","getChecked","getCorrectness","indexToSymbol","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& *': {\n      '-webkit-font-smoothing': 'antialiased',\n    },\n  },\n  partLabel: {\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  horizontalLayout: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  gridLayout: {\n    display: 'grid',\n  },\n  fieldset: {\n    border: '0px',\n    padding: '0.01em 0 0 0',\n    margin: '0px',\n    minWidth: '0px',\n  },\n});\n\nexport class MultipleChoice extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n    choices: PropTypes.array,\n    partLabel: PropTypes.string,\n    prompt: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    session: PropTypes.object,\n    disabled: PropTypes.bool,\n    onChoiceChanged: PropTypes.func,\n    responseCorrect: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    correctResponse: PropTypes.array,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    gridColumns: PropTypes.string,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      selectedValue: null,\n      selectedValues: [],\n      showCorrect: this.props.alwaysShowCorrect || false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  // handleChange and handleChangeCheckboxes functions were added for accessibility. Please see comments and videos from PD-2441. They should only be removed if a better solution is found.\n  handleChange = (event) => {\n    const target = event.target;\n\n    this.setState({ selectedValue: target.value });\n  };\n\n  handleChangeCheckboxes = (event) => {\n    const { value, checked } = event.target;\n\n    this.setState((prevState) => {\n      let selectedValues = [...prevState.selectedValues];\n\n      if (checked) {\n        selectedValues.push(value);\n      } else {\n        selectedValues = selectedValues.filter((currentValue) => currentValue !== value);\n      }\n\n      return { selectedValues };\n    });\n  };\n\n  onToggle() {\n    if (this.props.mode === 'evaluate') {\n      this.setState({ showCorrect: !this.state.showCorrect });\n    }\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse) {\n      this.setState({ showCorrect: false });\n    }\n\n    if (nextProps.alwaysShowCorrect) {\n      this.setState({ showCorrect: true });\n    }\n  }\n\n  indexToSymbol(index) {\n    if (this.props.keyMode === 'numbers') {\n      return `${index + 1}`;\n    }\n\n    if (this.props.keyMode === 'letters') {\n      return String.fromCharCode(97 + index).toUpperCase();\n    }\n\n    return '';\n  }\n\n  getCorrectness = (choice = {}) => {\n    const isCorrect = choice.correct;\n    const isChecked = this.isSelected(choice.value);\n\n    if (this.state.showCorrect) {\n      return isCorrect ? 'correct' : undefined;\n    }\n\n    if (isCorrect) {\n      if (isChecked) {\n        // A correct answer is selected: marked with a green checkmark\n        return 'correct';\n      } else {\n        // A correct answer is NOT selected: marked with an orange X\n        return 'incorrect';\n      }\n    } else {\n      if (isChecked) {\n        // An incorrect answer is selected: marked with an orange X\n        return 'incorrect';\n      } else {\n        // An incorrect answer is NOT selected: not marked\n        return undefined;\n      }\n    }\n  };\n\n  getChecked(choice) {\n    if (this.state.showCorrect) {\n      return choice.correct || false;\n    }\n\n    if (this.isSelected(choice.value)) {\n      return true;\n    }\n\n    return this.props.choiceMode === 'radio'\n      ? this.state.selectedValue === choice.value\n      : this.state.selectedValues.includes(choice.value);\n  }\n\n  render() {\n    const {\n      mode,\n      disabled,\n      className,\n      choices = [],\n      choiceMode,\n      gridColumns,\n      partLabel,\n      prompt,\n      onChoiceChanged,\n      responseCorrect,\n      teacherInstructions,\n      classes,\n      alwaysShowCorrect,\n      animationsDisabled,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n    const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    return (\n      <div className={classNames(classes.main, className, 'multiple-choice')}>\n        {partLabel && <div className={classes.partLabel}>{partLabel}</div>}\n\n        {teacherInstructions && (\n          <div className={classes.teacherInstructions}>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{\n                  hidden: 'Show Teacher Instructions',\n                  visible: 'Hide Teacher Instructions',\n                }}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </div>\n        )}\n\n        <fieldset className={classes.fieldset}>\n          <PreviewPrompt className=\"prompt\" defaultClassName=\"prompt\" prompt={prompt} tagName={'legend'} />\n\n          {!alwaysShowCorrect && (\n            <CorrectAnswerToggle\n              show={showCorrectAnswerToggle}\n              toggled={showCorrect}\n              onToggle={this.onToggle.bind(this)}\n            />\n          )}\n\n          <div\n            className={classNames({\n              [classes.gridLayout]: this.props.choicesLayout === 'grid',\n              [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal',\n            })}\n            style={columnsStyle}\n          >\n            {choices.map((choice, index) => (\n              <StyledChoice\n                choicesLayout={this.props.choicesLayout}\n                gridColumns={gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                updateSession={onChoiceChanged}\n                onChoiceChanged={this.props.choiceMode === 'radio' ? this.handleChange : this.handleChangeCheckboxes}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n              />\n            ))}\n          </div>\n        </fieldset>\n      </div>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}
+{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["styles","corespringChoice","backgroundColor","color","background","padding","horizontalLayout","display","flexDirection","flexWrap","gridLayout","getColumns","columns","gridTemplateColumns","undefined","fieldset","border","margin","minWidth","MultipleChoice","props","choice","isCorrect","correct","isChecked","isSelected","value","state","showCorrect","alwaysShowCorrect","onToggle","bind","mode","setState","nextProps","correctResponse","sessionValue","session","indexOf","index","keyMode","String","fromCharCode","toUpperCase","disabled","choices","choiceMode","prompt","onChoiceChanged","responseCorrect","teacherInstructions","classes","animationsDisabled","isEvaluateMode","showCorrectAnswerToggle","hidden","visible","choicesLayout","gridColumns","map","length","hideTick","getCorrectness","indexToSymbol","React","Component","PropTypes","oneOf","array","string","object","bool","func","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst styles = {\n  corespringChoice: {\n    backgroundColor: color.background(),\n    padding: '5px',\n    '& *': {\n      '-webkit-font-smoothing': 'antialiased',\n    },\n  },\n  horizontalLayout: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  gridLayout: {\n    display: 'grid',\n  },\n  getColumns: function (columns) {\n    return columns > 1 ? { gridTemplateColumns: `repeat(${columns}, 1fr)` } : undefined;\n  },\n  fieldset: {\n    border: '0px',\n    padding: '0.01em 0 0 0',\n    margin: '0px',\n    minWidth: '0px'\n  },\n};\n\nexport class MultipleChoice extends React.Component {\n  static propTypes = {\n    mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n    choices: PropTypes.array,\n    prompt: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    session: PropTypes.object,\n    disabled: PropTypes.bool,\n    onChoiceChanged: PropTypes.func,\n    responseCorrect: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    correctResponse: PropTypes.array,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    gridColumns: PropTypes.string,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: this.props.alwaysShowCorrect || false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n  }\n\n  onToggle() {\n    if (this.props.mode === 'evaluate') {\n      this.setState({ showCorrect: !this.state.showCorrect });\n    }\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse) {\n      this.setState({ showCorrect: false });\n    }\n\n    if (nextProps.alwaysShowCorrect) {\n      this.setState({ showCorrect: true });\n    }\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  indexToSymbol(index) {\n    if (this.props.keyMode === 'numbers') {\n      return `${index + 1}`;\n    }\n\n    if (this.props.keyMode === 'letters') {\n      return String.fromCharCode(97 + index).toUpperCase();\n    }\n\n    return '';\n  }\n\n  getCorrectness = (choice = {}) => {\n    const isCorrect = choice.correct;\n    const isChecked = this.isSelected(choice.value);\n\n    if (this.state.showCorrect) {\n      return isCorrect ? 'correct' : undefined;\n    }\n\n    if (isCorrect) {\n      if (isChecked) {\n        // A correct answer is selected: marked with a green checkmark\n        return 'correct';\n      } else {\n        // A correct answer is NOT selected: marked with an orange X\n        return 'incorrect';\n      }\n    } else {\n      if (isChecked) {\n        // An incorrect answer is selected: marked with an orange X\n        return 'incorrect';\n      } else {\n        // An incorrect answer is NOT selected: not marked\n        return undefined;\n      }\n    }\n  };\n\n  render() {\n    const {\n      mode,\n      disabled,\n      choices = [],\n      choiceMode,\n      prompt,\n      onChoiceChanged,\n      responseCorrect,\n      teacherInstructions,\n      classes,\n      alwaysShowCorrect,\n      animationsDisabled,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div className={classNames(classes.corespringChoice, 'multiple-choice')}>\n        {teacherInstructions && (\n          <React.Fragment>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{\n                  hidden: 'Show Teacher Instructions',\n                  visible: 'Hide Teacher Instructions',\n                }}\n              >\n                <PreviewPrompt tagName=\"div\" className=\"prompt\" prompt={teacherInstructions} />\n              </Collapsible>\n            ) : (\n              <PreviewPrompt\n                tagName=\"div\"\n                className=\"prompt\"\n                defaultClassName=\"teacher-instructions\"\n                prompt={teacherInstructions}\n              />\n            )}\n            <br />\n          </React.Fragment>\n        )}\n        {!alwaysShowCorrect && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n          />\n        )}\n        {showCorrectAnswerToggle && <br />}\n        <fieldset className={classes.fieldset}>\n          <PreviewPrompt className=\"prompt\" defaultClassName=\"prompt\" prompt={prompt} tagName={\"legend\"} />\n          <div\n            className={classNames(\n              { [classes.gridLayout]: this.props.choicesLayout === 'grid' },\n              {\n                [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal',\n              },\n            )}\n            style={styles.getColumns(this.props.gridColumns)}\n          >\n            {choices.map((choice, index) => (\n              <StyledChoice\n                choicesLayout={this.props.choicesLayout}\n                gridColumns={this.props.gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                onChoiceChanged={onChoiceChanged}\n                hideTick={choice.hideTick}\n                checked={showCorrect ? choice.correct || false : this.isSelected(choice.value)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n              />\n            ))}\n          </div>\n        </fieldset>\n      </div>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "7.10.3-next.71+b7d3e7f71",
+  "version": "8.0.0-beta",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-lib/config-ui": "^11.6.1",
-    "@pie-lib/correct-answer-toggle": "^2.3.70",
-    "@pie-lib/math-rendering": "^2.5.13",
-    "@pie-lib/render-ui": "^4.14.20",
+    "@pie-lib/config-ui": "12.0.0-beta.3",
+    "@pie-lib/correct-answer-toggle": "^2.3.62",
+    "@pie-lib/math-rendering": "^2.5.12",
+    "@pie-lib/render-ui": "^4.14.12",
+    "is-plain-object": "^5.0.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "enzyme-to-json": "^3.3.3",
@@ -21,7 +22,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "b7d3e7f7160aafd5dcfed2960bc6c2f03dba2180",
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.