@pie-element/multiple-choice 9.5.2-next.7 → 9.6.0

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","onShowCorrectToggle","setAttribute","choiceMode","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","language","lang","slice","s","data","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/pie-toolbox/math-rendering-accessible';\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            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n\n          this.setLangAttribute();\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  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\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","model","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","bind","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","language","lang","slice","s","data","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/pie-toolbox/math-rendering-accessible';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model) => {\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const { choiceMode, minSelections, maxSelections } = model || {};\n  const selections = session.value.length || 0;\n\n  if (choiceMode === 'radio') {\n    return !!selections;\n  }\n\n  if (selections < minSelections || selections > maxSelections) {\n    return false;\n  }\n\n  return true;\n\n  // !!(session && session.value && session.value.length);\n};\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            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n          this.setLangAttribute();\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, this._model),\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, this._model),\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  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\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/multiple-choice.js

@@ -35,6 +35,8 @@ var _styles = require("@material-ui/core/styles");
 
 var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
 
+var _translator = _interopRequireDefault(require("@pie-lib/pie-toolbox/translator"));
+
 var _choice = _interopRequireDefault(require("./choice"));
 
 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); }; }
@@ -42,6 +44,8 @@ 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 translator = _translator["default"].translator;
+
 var styles = function styles(theme) {
   return {
     main: {
@@ -82,6 +86,11 @@ var styles = function styles(theme) {
       width: '1px',
       height: '1px',
       overflow: 'hidden'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main,
+      paddingTop: theme.spacing.unit
     }
   };
 };
@@ -97,31 +106,38 @@ 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;
+      var _this$props = _this.props,
+          choiceMode = _this$props.choiceMode,
+          maxSelections = _this$props.maxSelections,
+          onChoiceChanged = _this$props.onChoiceChanged;
 
-      _this.setState(function (prevState) {
-        var selectedValues = (0, _toConsumableArray2["default"])(prevState.selectedValues);
+      if (choiceMode === 'radio') {
+        _this.setState({
+          selectedValue: value
+        });
+      } else {
+        var selectedValues = _this.state.selectedValues;
 
-        if (checked) {
-          selectedValues.push(value);
-        } else {
-          selectedValues = selectedValues.filter(function (currentValue) {
+        if (checked && selectedValues.length >= maxSelections) {
+          return;
+        }
+
+        _this.setState(function (prevState) {
+          var selectedValues = checked ? [].concat((0, _toConsumableArray2["default"])(prevState.selectedValues), [value]) : prevState.selectedValues.filter(function (currentValue) {
             return currentValue !== value;
           });
-        }
+          return {
+            selectedValues: selectedValues
+          };
+        });
+      }
 
-        return {
-          selectedValues: selectedValues
-        };
+      onChoiceChanged({
+        value: value,
+        selected: checked
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onToggle", function () {
@@ -177,7 +193,8 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
     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.
+    } // handleChange was added for accessibility. Please see comments and videos from PD-2441.
+    // TODO: Should only be removed if a better solution is found.
 
   }, {
     key: "UNSAFE_componentWillReceiveProps",
@@ -234,10 +251,10 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderHeading",
     value: function renderHeading() {
-      var _this$props = this.props,
-          mode = _this$props.mode,
-          choiceMode = _this$props.choiceMode,
-          classes = _this$props.classes;
+      var _this$props2 = this.props,
+          mode = _this$props2.mode,
+          choiceMode = _this$props2.choiceMode,
+          classes = _this$props2.classes;
 
       if (mode !== 'gather') {
         return null;
@@ -255,30 +272,33 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       var _classNames,
           _this3 = this;
 
-      var _this$props2 = this.props,
-          mode = _this$props2.mode,
-          disabled = _this$props2.disabled,
-          className = _this$props2.className,
-          _this$props2$choices = _this$props2.choices,
-          choices = _this$props2$choices === void 0 ? [] : _this$props2$choices,
-          choiceMode = _this$props2.choiceMode,
-          gridColumns = _this$props2.gridColumns,
-          partLabel = _this$props2.partLabel,
-          prompt = _this$props2.prompt,
-          onChoiceChanged = _this$props2.onChoiceChanged,
-          responseCorrect = _this$props2.responseCorrect,
-          teacherInstructions = _this$props2.teacherInstructions,
-          classes = _this$props2.classes,
-          alwaysShowCorrect = _this$props2.alwaysShowCorrect,
-          animationsDisabled = _this$props2.animationsDisabled,
-          language = _this$props2.language,
-          isSelectionButtonBelow = _this$props2.isSelectionButtonBelow;
+      var _this$props3 = this.props,
+          mode = _this$props3.mode,
+          disabled = _this$props3.disabled,
+          className = _this$props3.className,
+          _this$props3$choices = _this$props3.choices,
+          choices = _this$props3$choices === void 0 ? [] : _this$props3$choices,
+          choiceMode = _this$props3.choiceMode,
+          gridColumns = _this$props3.gridColumns,
+          partLabel = _this$props3.partLabel,
+          prompt = _this$props3.prompt,
+          responseCorrect = _this$props3.responseCorrect,
+          teacherInstructions = _this$props3.teacherInstructions,
+          classes = _this$props3.classes,
+          alwaysShowCorrect = _this$props3.alwaysShowCorrect,
+          animationsDisabled = _this$props3.animationsDisabled,
+          language = _this$props3.language,
+          isSelectionButtonBelow = _this$props3.isSelectionButtonBelow,
+          minSelections = _this$props3.minSelections,
+          maxSelections = _this$props3.maxSelections,
+          session = _this$props3.session;
       var showCorrect = this.state.showCorrect;
       var isEvaluateMode = mode === 'evaluate';
       var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
       var columnsStyle = gridColumns > 1 ? {
         gridTemplateColumns: "repeat(".concat(gridColumns, ", 1fr)")
       } : undefined;
+      var selections = session.value && session.value.length || 0;
 
       var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         tagName: "div",
@@ -316,6 +336,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       }, choices.map(function (choice, index) {
         return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
           choicesLayout: _this3.props.choicesLayout,
+          selectedAnswerBackgroundColor: _this3.props.selectedAnswerBackgroundColor,
           gridColumns: gridColumns,
           key: "choice-".concat(index),
           choice: choice,
@@ -325,15 +346,24 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           isEvaluateMode: isEvaluateMode,
           choiceMode: choiceMode,
           disabled: disabled,
-          updateSession: onChoiceChanged,
-          onChoiceChanged: _this3.props.choiceMode === 'radio' ? _this3.handleChange : _this3.handleChangeCheckboxes,
+          onChoiceChanged: _this3.handleChange,
           hideTick: choice.hideTick,
           checked: _this3.getChecked(choice),
           correctness: isEvaluateMode ? _this3.getCorrectness(choice) : undefined,
           displayKey: _this3.indexToSymbol(index),
           isSelectionButtonBelow: isSelectionButtonBelow
         });
-      }))));
+      }))), choiceMode === 'checkbox' && selections < minSelections && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, translator.t("translation:multipleChoice:minSelections_".concat(minSelections === 1 ? 'one' : 'other'), {
+        lng: language,
+        minSelections: minSelections
+      })), choiceMode === 'checkbox' && selections >= maxSelections && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, translator.t("translation:multipleChoice:maxSelections_".concat(maxSelections === 1 ? 'one' : 'other'), {
+        lng: language,
+        maxSelections: maxSelections
+      })));
     }
   }]);
   return MultipleChoice;
@@ -360,8 +390,11 @@ exports.MultipleChoice = MultipleChoice;
   alwaysShowCorrect: _propTypes["default"].bool,
   animationsDisabled: _propTypes["default"].bool,
   language: _propTypes["default"].string,
+  selectedAnswerBackgroundColor: _propTypes["default"].string,
   onShowCorrectToggle: _propTypes["default"].func,
-  isSelectionButtonBelow: _propTypes["default"].bool
+  isSelectionButtonBelow: _propTypes["default"].bool,
+  minSelections: _propTypes["default"].number,
+  maxSelections: _propTypes["default"].number
 });
 MultipleChoice.defaultProps = {
   session: {

package/lib/multiple-choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["styles","theme","main","color","text","backgroundColor","background","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","border","padding","minWidth","srOnly","position","left","top","width","height","overflow","MultipleChoice","props","event","target","setState","selectedValue","value","checked","prevState","selectedValues","push","filter","currentValue","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","session","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","includes","classes","disabled","className","choices","gridColumns","prompt","onChoiceChanged","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","teacherInstructionsDiv","renderHeading","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/pie-toolbox/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\n\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        display: 'block',\n        fontSize: 'inherit',\n        margin: '0',\n        fontWeight: 'normal',\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    srOnly: {\n        position: 'absolute',\n        left: '-10000px',\n        top: 'auto',\n        width: '1px',\n        height: '1px',\n        overflow: 'hidden',\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        language: PropTypes.string,\n        onShowCorrectToggle: PropTypes.func,\n        isSelectionButtonBelow: 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        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n      this.setState({ showCorrect: false }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n\n    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n      this.setState({ showCorrect: true }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\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    // renderHeading function was added for accessibility.\n    renderHeading() {\n        const {mode, choiceMode, classes} = this.props;\n\n        if (mode !== 'gather') {\n            return null;\n        }\n\n        return choiceMode === 'radio' ? (\n            <h2 className={classes.srOnly}>Multiple Choice Question</h2>\n        ) : (\n            <h2 className={classes.srOnly}>Multiple Select Question</h2>\n        );\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            language,\n            isSelectionButtonBelow\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 && <h3 className={classes.partLabel}>{partLabel}</h3>}\n\n                {this.renderHeading()}\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                            language={language}\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                                isSelectionButtonBelow={isSelectionButtonBelow}\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":["translator","Translator","styles","theme","main","color","text","backgroundColor","background","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","border","padding","minWidth","srOnly","position","left","top","width","height","overflow","errorText","typography","palette","error","paddingTop","MultipleChoice","props","event","target","value","checked","choiceMode","maxSelections","onChoiceChanged","setState","selectedValue","selectedValues","state","length","prevState","filter","currentValue","selected","mode","showCorrect","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","session","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","includes","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","teacherInstructionsDiv","renderHeading","hidden","visible","choicesLayout","map","selectedAnswerBackgroundColor","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","t","lng","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst { translator } = Translator;\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    display: 'block',\n    fontSize: 'inherit',\n    margin: '0',\n    fontWeight: 'normal',\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  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\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    language: PropTypes.string,\n    selectedAnswerBackgroundColor: PropTypes.string,\n    onShowCorrectToggle: PropTypes.func,\n    isSelectionButtonBelow: PropTypes.bool,\n    minSelections: PropTypes.number,\n    maxSelections: PropTypes.number,\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 was added for accessibility. Please see comments and videos from PD-2441.\n  // TODO: Should only be removed if a better solution is found.\n  handleChange = (event) => {\n    const { value, checked } = event.target;\n    const { choiceMode, maxSelections, onChoiceChanged } = this.props;\n\n    if (choiceMode === 'radio') {\n      this.setState({ selectedValue: value });\n    } else {\n      const { selectedValues } = this.state;\n\n      if (checked && selectedValues.length >= maxSelections) {\n        return;\n      }\n\n      this.setState((prevState) => {\n        const selectedValues = checked\n          ? [...prevState.selectedValues, value]\n          : prevState.selectedValues.filter((currentValue) => currentValue !== value);\n\n        return { selectedValues };\n      });\n    }\n\n    onChoiceChanged({ value, selected: checked });\n  };\n\n  onToggle = () => {\n    if (this.props.mode === 'evaluate') {\n      this.setState({ showCorrect: !this.state.showCorrect }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n      this.setState({ showCorrect: false }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n\n    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n      this.setState({ showCorrect: true }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\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  // renderHeading function was added for accessibility.\n  renderHeading() {\n    const { mode, choiceMode, classes } = this.props;\n\n    if (mode !== 'gather') {\n      return null;\n    }\n\n    return choiceMode === 'radio' ? (\n      <h2 className={classes.srOnly}>Multiple Choice Question</h2>\n    ) : (\n      <h2 className={classes.srOnly}>Multiple Select Question</h2>\n    );\n  }\n\n  render() {\n    const {\n      mode,\n      disabled,\n      className,\n      choices = [],\n      choiceMode,\n      gridColumns,\n      partLabel,\n      prompt,\n      responseCorrect,\n      teacherInstructions,\n      classes,\n      alwaysShowCorrect,\n      animationsDisabled,\n      language,\n      isSelectionButtonBelow,\n      minSelections,\n      maxSelections,\n      session,\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    const selections = (session.value && session.value.length) || 0;\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 && <h3 className={classes.partLabel}>{partLabel}</h3>}\n\n        {this.renderHeading()}\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              language={language}\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                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\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                onChoiceChanged={this.handleChange}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n                isSelectionButtonBelow={isSelectionButtonBelow}\n              />\n            ))}\n          </div>\n        </fieldset>\n\n        {choiceMode === 'checkbox' && selections < minSelections && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              minSelections,\n            })}\n          </div>\n        )}\n        {choiceMode === 'checkbox' && selections >= maxSelections && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              maxSelections,\n            })}\n          </div>\n        )}\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/module/configure.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.4.0/module/index.js";
-import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.4.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.4.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.4.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -10779,7 +10779,8 @@ var sensibleDefaults = {
     studentInstructionsEnabled: true,
     teacherInstructions: '',
     teacherInstructionsEnabled: true,
-    toolbarEditorPosition: 'bottom'
+    toolbarEditorPosition: 'bottom',
+    selectedAnswerBackgroundColor: 'initial'
   },
   configuration: {
     baseInputConfiguration: {

package/module/controller.js

@@ -2539,6 +2539,7 @@ var defaults = {
   teacherInstructions: '',
   teacherInstructionsEnabled: true,
   toolbarEditorPosition: 'bottom',
+  selectedAnswerBackgroundColor: 'initial',
 };
 
 var controllerUtils$1 = {};
@@ -20711,6 +20712,9 @@ async function model(question, session, env, updateSession) {
     extraCSSRules: normalizedQuestion.extraCSSRules,
     fontSizeFactor: normalizedQuestion.fontSizeFactor,
     isSelectionButtonBelow: normalizedQuestion.isSelectionButtonBelow,
+    selectedAnswerBackgroundColor: normalizedQuestion.selectedAnswerBackgroundColor || 'initial',
+    minSelections: normalizedQuestion.minSelections,
+    maxSelections: normalizedQuestion.maxSelections,
   };
 
   const { role, mode } = env || {};

package/module/demo.js

@@ -62,7 +62,7 @@ generate.model = (id, element) => ({
       .blue {
         color: blue !important;
       }
-    `
+    `,
   },
   prompt: '',
   promptEnabled: true,