@pie-element/multiple-choice 8.21.4-next.3 → 8.21.4-next.33

package/configure/package.json

@@ -8,7 +8,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "1.25.3",
+    "@pie-lib/pie-toolbox": "1.26.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/package.json

@@ -8,7 +8,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.25.3",
+    "@pie-lib/pie-toolbox": "1.26.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15"
   }

package/lib/index.js

@@ -66,7 +66,8 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
         var element = /*#__PURE__*/_react["default"].createElement(_main["default"], {
           model: _this._model,
           session: _this._session,
-          onChoiceChanged: _this._onChange.bind((0, _assertThisInitialized2["default"])(_this))
+          onChoiceChanged: _this._onChange.bind((0, _assertThisInitialized2["default"])(_this)),
+          onShowCorrectToggle: _this.onShowCorrectToggle.bind((0, _assertThisInitialized2["default"])(_this))
         }); //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
 
 
@@ -117,6 +118,11 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
   }
 
   (0, _createClass2["default"])(MultipleChoice, [{
+    key: "onShowCorrectToggle",
+    value: function onShowCorrectToggle() {
+      (0, _mathRenderingAccessible.renderMath)(this);
+    }
+  }, {
     key: "setLangAttribute",
     value: function setLangAttribute() {
       var language = this._model && (0, _typeof2["default"])(this._model.language) ? this._model.language : '';

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","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          });\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  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","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"}

package/lib/main.js

@@ -55,11 +55,13 @@ var Main = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           model = _this$props.model,
           onChoiceChanged = _this$props.onChoiceChanged,
-          session = _this$props.session; // model.partLabel is a property used for ebsr
+          session = _this$props.session,
+          onShowCorrectToggle = _this$props.onShowCorrectToggle; // model.partLabel is a property used for ebsr
 
       return /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewLayout, null, /*#__PURE__*/_react["default"].createElement(_multipleChoice["default"], (0, _extends2["default"])({}, model, {
         session: session,
-        onChoiceChanged: onChoiceChanged
+        onChoiceChanged: onChoiceChanged,
+        onShowCorrectToggle: onShowCorrectToggle
       })));
     }
   }]);
@@ -70,7 +72,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
   model: _propTypes["default"].object,
   session: _propTypes["default"].object,
   onChoiceChanged: _propTypes["default"].func,
-  classes: _propTypes["default"].object.isRequired
+  classes: _propTypes["default"].object.isRequired,
+  onShowCorrectToggle: _propTypes["default"].func
 });
 (0, _defineProperty2["default"])(Main, "defaultProps", {
   model: {},

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/pie-toolbox/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":["styles","Main","props","model","onChoiceChanged","session","onShowCorrectToggle","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;;;;;AAaJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAAiE,KAAKA,KAAtE;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AAAA,UAAyCC,mBAAzC,eAAyCA,mBAAzC,CADO,CAGP;;AACA,0BACE,gCAAC,uBAAD,qBACE,gCAAC,0BAAD,gCACMH,KADN;AAEE,QAAA,OAAO,EAAEE,OAFX;AAGE,QAAA,eAAe,EAAED,eAHnB;AAIE,QAAA,mBAAmB,EAAEE;AAJvB,SADF,CADF;AAUD;;;EA/BgBC,kBAAMC,S;;iCAAnBP,I,eACe;AACjBE,EAAAA,KAAK,EAAEM,sBAAUC,MADA;AAEjBL,EAAAA,OAAO,EAAEI,sBAAUC,MAFF;AAGjBN,EAAAA,eAAe,EAAEK,sBAAUE,IAHV;AAIjBC,EAAAA,OAAO,EAAEH,sBAAUC,MAAV,CAAiBG,UAJT;AAKjBP,EAAAA,mBAAmB,EAAEG,sBAAUE;AALd,C;iCADfV,I,kBASkB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AAyBxB,IAAMS,MAAM,GAAG,wBAAWd,MAAX,EAAmB;AAAEe,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAqCd,IAArC,CAAf;AAEA,IAAMe,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACjB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEc;AAAzB,kBACE,gCAAC,MAAD,EAAYd,KAAZ,CADF,CADW;AAAA,CAAb;;eAMeiB,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/pie-toolbox/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    onShowCorrectToggle: PropTypes.func,\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, onShowCorrectToggle } = this.props;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout>\n        <MultipleChoice\n          {...model}\n          session={session}\n          onChoiceChanged={onChoiceChanged}\n          onShowCorrectToggle={onShowCorrectToggle}\n        />\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"}

package/lib/multiple-choice.js

@@ -124,6 +124,15 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
         };
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onToggle", function () {
+      if (_this.props.mode === 'evaluate') {
+        _this.setState({
+          showCorrect: !_this.state.showCorrect
+        }, function () {
+          _this.props.onShowCorrectToggle();
+        });
+      }
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getCorrectness", function () {
       var choice = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var isCorrect = choice.correct;
@@ -168,27 +177,24 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       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') {
-        this.setState({
-          showCorrect: !this.state.showCorrect
-        });
-      }
-    }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (!nextProps.correctResponse) {
+      var _this2 = this;
+
+      if (!nextProps.correctResponse && this.state.showCorrect !== false) {
         this.setState({
           showCorrect: false
+        }, function () {
+          _this2.props.onShowCorrectToggle();
         });
       }
 
-      if (nextProps.alwaysShowCorrect) {
+      if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {
         this.setState({
           showCorrect: true
+        }, function () {
+          _this2.props.onShowCorrectToggle();
         });
       }
     }
@@ -241,7 +247,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _classNames,
-          _this2 = this;
+          _this3 = this;
 
       var _this$props2 = this.props,
           mode = _this$props2.mode,
@@ -302,7 +308,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
         style: columnsStyle
       }, choices.map(function (choice, index) {
         return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
-          choicesLayout: _this2.props.choicesLayout,
+          choicesLayout: _this3.props.choicesLayout,
           gridColumns: gridColumns,
           key: "choice-".concat(index),
           choice: choice,
@@ -313,11 +319,11 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           choiceMode: choiceMode,
           disabled: disabled,
           updateSession: onChoiceChanged,
-          onChoiceChanged: _this2.props.choiceMode === 'radio' ? _this2.handleChange : _this2.handleChangeCheckboxes,
+          onChoiceChanged: _this3.props.choiceMode === 'radio' ? _this3.handleChange : _this3.handleChangeCheckboxes,
           hideTick: choice.hideTick,
-          checked: _this2.getChecked(choice),
-          correctness: isEvaluateMode ? _this2.getCorrectness(choice) : undefined,
-          displayKey: _this2.indexToSymbol(index)
+          checked: _this3.getChecked(choice),
+          correctness: isEvaluateMode ? _this3.getCorrectness(choice) : undefined,
+          displayKey: _this3.indexToSymbol(index)
         });
       }))));
     }
@@ -345,7 +351,8 @@ exports.MultipleChoice = MultipleChoice;
   gridColumns: _propTypes["default"].string,
   alwaysShowCorrect: _propTypes["default"].bool,
   animationsDisabled: _propTypes["default"].bool,
-  language: _propTypes["default"].string
+  language: _propTypes["default"].string,
+  onShowCorrectToggle: _propTypes["default"].func
 });
 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","choice","isCorrect","correct","isChecked","isSelected","state","showCorrect","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","session","indexOf","mode","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","includes","classes","disabled","className","choices","gridColumns","prompt","onChoiceChanged","responseCorrect","animationsDisabled","language","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';\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    };\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    // 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        } = 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                            />\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","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","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';\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    };\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        this.props.onShowCorrectToggle();\n      });\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n      this.setState({ showCorrect: false }, () => {\n        this.props.onShowCorrectToggle();\n      });\n    }\n\n    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n      this.setState({ showCorrect: true }, () => {\n        this.props.onShowCorrectToggle();\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        } = 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                            />\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/module/configure.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.18.2/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@1.18.3/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@4.12.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {

package/module/element.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.18.2/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.18.3/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -9339,7 +9339,8 @@ class MultipleChoice$1 extends React$2.Component {
       gridColumns: PropTypes$1.string,
       alwaysShowCorrect: PropTypes$1.bool,
       animationsDisabled: PropTypes$1.bool,
-      language: PropTypes$1.string
+      language: PropTypes$1.string,
+      onShowCorrectToggle: PropTypes$1.func
     };
   }
   constructor(props) {
@@ -9347,6 +9348,7 @@ class MultipleChoice$1 extends React$2.Component {
     MultipleChoice$1.prototype.__init.call(this);
     MultipleChoice$1.prototype.__init2.call(this);
     MultipleChoice$1.prototype.__init3.call(this);
+    MultipleChoice$1.prototype.__init4.call(this);
     this.state = {
       selectedValue: null,
       selectedValues: [],
@@ -9382,22 +9384,30 @@ class MultipleChoice$1 extends React$2.Component {
       });
     };
   }
-  onToggle() {
-    if (this.props.mode === 'evaluate') {
-      this.setState({
-        showCorrect: !this.state.showCorrect
-      });
-    }
+  __init3() {
+    this.onToggle = () => {
+      if (this.props.mode === 'evaluate') {
+        this.setState({
+          showCorrect: !this.state.showCorrect
+        }, () => {
+          this.props.onShowCorrectToggle();
+        });
+      }
+    };
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.correctResponse) {
+    if (!nextProps.correctResponse && this.state.showCorrect !== false) {
       this.setState({
         showCorrect: false
+      }, () => {
+        this.props.onShowCorrectToggle();
       });
     }
-    if (nextProps.alwaysShowCorrect) {
+    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {
       this.setState({
         showCorrect: true
+      }, () => {
+        this.props.onShowCorrectToggle();
       });
     }
   }
@@ -9410,7 +9420,7 @@ class MultipleChoice$1 extends React$2.Component {
     }
     return '';
   }
-  __init3() {
+  __init4() {
     this.getCorrectness = (choice = {}) => {
       const isCorrect = choice.correct;
       const isChecked = this.isSelected(choice.value);
@@ -9451,14 +9461,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 195
+        lineNumber: 202
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 197
+        lineNumber: 204
       }
     }, "Multiple Select Question");
   }
@@ -9478,7 +9488,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 225
+        lineNumber: 232
       }
     });
     return React$2.createElement('div', {
@@ -9486,21 +9496,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 234
+        lineNumber: 241
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 235
+        lineNumber: 242
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 240
+        lineNumber: 247
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -9510,14 +9520,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 242
+        lineNumber: 249
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 256
+        lineNumber: 263
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -9527,7 +9537,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 257
+        lineNumber: 264
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -9537,7 +9547,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 260
+        lineNumber: 267
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -9548,7 +9558,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 268
+        lineNumber: 275
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -9570,7 +9580,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 283
       }
     })))));
   }
@@ -9593,7 +9603,8 @@ class Main extends React$1.Component {
       model: PropTypes.object,
       session: PropTypes.object,
       onChoiceChanged: PropTypes.func,
-      classes: PropTypes.object.isRequired
+      classes: PropTypes.object.isRequired,
+      onShowCorrectToggle: PropTypes.func
     };
   }
   static __initStatic2() {
@@ -9606,21 +9617,22 @@ class Main extends React$1.Component {
     super(props);
   }
   render() {
-    const {model, onChoiceChanged, session} = this.props;
+    const {model, onChoiceChanged, session, onShowCorrectToggle} = this.props;
     return React$1.createElement(PreviewLayout, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 31
+        lineNumber: 32
       }
     }, React$1.createElement(MultipleChoice$2, {
       ...model,
       session: session,
       onChoiceChanged: onChoiceChanged,
+      onShowCorrectToggle: onShowCorrectToggle,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 32
+        lineNumber: 33
       }
     }));
   }
@@ -9640,14 +9652,14 @@ const Root = props => React$1.createElement(styles$b.MuiThemeProvider, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 47
+    lineNumber: 53
   }
 }, React$1.createElement(Styled, {
   ...props,
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 48
+    lineNumber: 54
   }
 }));
 const {concat: concat} = _dll_lodash;
@@ -9687,7 +9699,8 @@ class MultipleChoice extends HTMLElement {
         var element = React.createElement(Root, {
           model: this._model,
           session: this._session,
-          onChoiceChanged: this._onChange.bind(this)
+          onChoiceChanged: this._onChange.bind(this),
+          onShowCorrectToggle: this.onShowCorrectToggle.bind(this)
         });
         this.setAttribute('aria-label', this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
         this.setAttribute('role', 'region');
@@ -9729,6 +9742,9 @@ class MultipleChoice extends HTMLElement {
       trailing: true
     });
   }
+  onShowCorrectToggle() {
+    renderMath(this);
+  }
   setLangAttribute() {
     const language = this._model && typeof this._model.language ? this._model.language : '';
     const lang = language ? language.slice(0, 2) : 'en';

package/module/manifest.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "1.18.2"
+      "version": "1.18.3"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",

package/module/print.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering_accessible, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.18.2/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering_accessible, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.18.3/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -9339,7 +9339,8 @@ class MultipleChoice extends React$2.Component {
       gridColumns: PropTypes$1.string,
       alwaysShowCorrect: PropTypes$1.bool,
       animationsDisabled: PropTypes$1.bool,
-      language: PropTypes$1.string
+      language: PropTypes$1.string,
+      onShowCorrectToggle: PropTypes$1.func
     };
   }
   constructor(props) {
@@ -9347,6 +9348,7 @@ class MultipleChoice extends React$2.Component {
     MultipleChoice.prototype.__init.call(this);
     MultipleChoice.prototype.__init2.call(this);
     MultipleChoice.prototype.__init3.call(this);
+    MultipleChoice.prototype.__init4.call(this);
     this.state = {
       selectedValue: null,
       selectedValues: [],
@@ -9382,22 +9384,30 @@ class MultipleChoice extends React$2.Component {
       });
     };
   }
-  onToggle() {
-    if (this.props.mode === 'evaluate') {
-      this.setState({
-        showCorrect: !this.state.showCorrect
-      });
-    }
+  __init3() {
+    this.onToggle = () => {
+      if (this.props.mode === 'evaluate') {
+        this.setState({
+          showCorrect: !this.state.showCorrect
+        }, () => {
+          this.props.onShowCorrectToggle();
+        });
+      }
+    };
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.correctResponse) {
+    if (!nextProps.correctResponse && this.state.showCorrect !== false) {
       this.setState({
         showCorrect: false
+      }, () => {
+        this.props.onShowCorrectToggle();
       });
     }
-    if (nextProps.alwaysShowCorrect) {
+    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {
       this.setState({
         showCorrect: true
+      }, () => {
+        this.props.onShowCorrectToggle();
       });
     }
   }
@@ -9410,7 +9420,7 @@ class MultipleChoice extends React$2.Component {
     }
     return '';
   }
-  __init3() {
+  __init4() {
     this.getCorrectness = (choice = {}) => {
       const isCorrect = choice.correct;
       const isChecked = this.isSelected(choice.value);
@@ -9451,14 +9461,14 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 195
+        lineNumber: 202
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 197
+        lineNumber: 204
       }
     }, "Multiple Select Question");
   }
@@ -9478,7 +9488,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 225
+        lineNumber: 232
       }
     });
     return React$2.createElement('div', {
@@ -9486,21 +9496,21 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 234
+        lineNumber: 241
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 235
+        lineNumber: 242
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 240
+        lineNumber: 247
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -9510,14 +9520,14 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 242
+        lineNumber: 249
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 256
+        lineNumber: 263
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -9527,7 +9537,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 257
+        lineNumber: 264
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -9537,7 +9547,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 260
+        lineNumber: 267
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -9548,7 +9558,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 268
+        lineNumber: 275
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -9570,7 +9580,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 283
       }
     })))));
   }
@@ -9593,7 +9603,8 @@ class Main extends React$1.Component {
       model: PropTypes.object,
       session: PropTypes.object,
       onChoiceChanged: PropTypes.func,
-      classes: PropTypes.object.isRequired
+      classes: PropTypes.object.isRequired,
+      onShowCorrectToggle: PropTypes.func
     };
   }
   static __initStatic2() {
@@ -9606,21 +9617,22 @@ class Main extends React$1.Component {
     super(props);
   }
   render() {
-    const {model, onChoiceChanged, session} = this.props;
+    const {model, onChoiceChanged, session, onShowCorrectToggle} = this.props;
     return React$1.createElement(PreviewLayout, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 31
+        lineNumber: 32
       }
     }, React$1.createElement(MultipleChoice$1, {
       ...model,
       session: session,
       onChoiceChanged: onChoiceChanged,
+      onShowCorrectToggle: onShowCorrectToggle,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 32
+        lineNumber: 33
       }
     }));
   }
@@ -9640,14 +9652,14 @@ const Root = props => React$1.createElement(styles$b.MuiThemeProvider, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 47
+    lineNumber: 53
   }
 }, React$1.createElement(Styled, {
   ...props,
   __self: undefined,
   __source: {
     fileName: _jsxFileName,
-    lineNumber: 48
+    lineNumber: 54
   }
 }));
 const React = _dll_react;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "8.21.4-next.3+4d5e9b38a",
+  "version": "8.21.4-next.33+30ae254b0",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-lib/pie-toolbox": "1.25.3",
+    "@pie-lib/pie-toolbox": "1.26.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "enzyme-to-json": "^3.3.3",
@@ -18,7 +18,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "4d5e9b38aae9ae001bc22c0a91da4d97eddd71dd",
+  "gitHead": "30ae254b0e3021389a52c7ab6cbf78a9868be728",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },