@pie-element/multiple-choice 9.7.2-next.0 → 9.7.2-next.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/index.js +0 -1
  2. package/lib/index.js.map +1 -1
  3. package/lib/multiple-choice.js +14 -29
  4. package/lib/multiple-choice.js.map +1 -1
  5. package/module/element.js +23 -36
  6. package/module/print.js +23 -35
  7. package/package.json +2 -2
package/lib/index.js CHANGED
@@ -108,7 +108,6 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
108
108
  trailing: true
109
109
  });
110
110
  _this._dispatchResponseChanged = (0, _debounce["default"])(function () {
111
- console.log('>> dispatch event');
112
111
  var event = new CustomEvent('session-changed', {
113
112
  bubbles: true,
114
113
  composed: true,
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"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","console","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';\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\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 console.log('>> dispatch event');\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"}
1
+ {"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":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,wBAAN,CAAZ;;AAEO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,OAAD,EAAUC,KAAV,EAAoB;AAC5C,MAAI,CAACD,OAAD,IAAY,CAACA,OAAO,CAACE,KAAzB,EAAgC;AAC9B,WAAO,KAAP;AACD;;AAED,aAAqDD,KAAK,IAAI,EAA9D;AAAA,MAAQE,UAAR,QAAQA,UAAR;AAAA,MAAoBC,aAApB,QAAoBA,aAApB;AAAA,MAAmCC,aAAnC,QAAmCA,aAAnC;;AACA,MAAMC,UAAU,GAAGN,OAAO,CAACE,KAAR,CAAcK,MAAd,IAAwB,CAA3C;;AAEA,MAAIJ,UAAU,KAAK,OAAnB,EAA4B;AAC1B,WAAO,CAAC,CAACG,UAAT;AACD;;AAED,MAAIA,UAAU,GAAGF,aAAb,IAA8BE,UAAU,GAAGD,aAA/C,EAA8D;AAC5D,WAAO,KAAP;AACD;;AAED,SAAO,IAAP;AACD,CAjBM;;;;IAmBcG,c;;;;;AACnB,4BAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAEA,UAAKC,SAAL,GAAiB,0BACf,YAAM;AACJ,UAAI,MAAKF,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIE,OAAO,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACtCd,UAAAA,KAAK,EAAE,MAAKQ,MAD0B;AAEtCT,UAAAA,OAAO,EAAE,MAAKU,QAFwB;AAGtCM,UAAAA,eAAe,EAAE,MAAKC,SAAL,CAAeC,IAAf,gDAHqB;AAItCC,UAAAA,mBAAmB,EAAE,MAAKA,mBAAL,CAAyBD,IAAzB;AAJiB,SAA1B,CAAd,CADgC,CAQhC;;;AACA,cAAKE,YAAL,CACE,YADF,EAEE,MAAKX,MAAL,CAAYN,UAAZ,KAA2B,OAA3B,GAAqC,0BAArC,GAAkE,kCAFpE;;AAIA,cAAKiB,YAAL,CAAkB,MAAlB,EAA0B,QAA1B;;AACA,cAAKC,gBAAL;;AAEAC,6BAASC,MAAT,CAAgBX,OAAhB,kDAA+B,YAAM;AACnCd,UAAAA,GAAG,CAAC,+BAAD,CAAH;AACA;AACD,SAHD;AAID,OApBD,MAoBO;AACLA,QAAAA,GAAG,CAAC,MAAD,CAAH;AACD;AACF,KAzBc,EA0Bf,EA1Be,EA2Bf;AAAE0B,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KA3Be,CAAjB;AA8BA,UAAKC,wBAAL,GAAgC,0BAAS,YAAM;AAC7C,UAAIC,KAAK,GAAG,IAAIC,WAAJ,CAAgB,iBAAhB,EAAmC;AAC7CC,QAAAA,OAAO,EAAE,IADoC;AAE7CC,QAAAA,QAAQ,EAAE,IAFmC;AAG7CC,QAAAA,MAAM,EAAE;AACNC,UAAAA,QAAQ,EAAEjC,UAAU,CAAC,MAAKW,QAAN,EAAgB,MAAKD,MAArB,CADd;AAENwB,UAAAA,SAAS,EAAE,MAAKC,OAAL,CAAaC,WAAb;AAFL;AAHqC,OAAnC,CAAZ;;AASA,YAAKC,aAAL,CAAmBT,KAAnB;AACD,KAX+B,CAAhC;AAaA,UAAKU,iBAAL,GAAyB,0BACvB,YAAM;AACJ,YAAKD,aAAL,CACE,IAAIR,WAAJ,CAAgB,WAAhB,EAA6B;AAC3BC,QAAAA,OAAO,EAAE,IADkB;AAE3BC,QAAAA,QAAQ,EAAE,IAFiB;AAG3BC,QAAAA,MAAM,EAAE;AACNC,UAAAA,QAAQ,EAAEjC,UAAU,CAAC,MAAKW,QAAN,EAAgB,MAAKD,MAArB,CADd;AAENwB,UAAAA,SAAS,EAAE,MAAKC,OAAL,CAAaC,WAAb,EAFL;AAGNG,UAAAA,QAAQ,EAAE,MAAK7B,MAAL,KAAgB8B;AAHpB;AAHmB,OAA7B,CADF;AAWD,KAbsB,EAcvB,EAduB,EAevB;AAAEf,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KAfuB,CAAzB;AAhDY;AAiEb;;;;WAED,+BAAsB;AACpB,qCAAW,IAAX;AACD;;;WAED,4BAAmB;AACjB,UAAMe,QAAQ,GAAG,KAAK/B,MAAL,6BAAsB,KAAKA,MAAL,CAAY+B,QAAlC,IAA6C,KAAK/B,MAAL,CAAY+B,QAAzD,GAAoE,EAArF;AACA,UAAMC,IAAI,GAAGD,QAAQ,GAAGA,QAAQ,CAACE,KAAT,CAAe,CAAf,EAAkB,CAAlB,CAAH,GAA0B,IAA/C;AACA,WAAKtB,YAAL,CAAkB,MAAlB,EAA0BqB,IAA1B;AACD;;;SAED,aAAUE,CAAV,EAAa;AACX,WAAKlC,MAAL,GAAckC,CAAd;;AACA,WAAKhC,SAAL;;AACA,WAAK0B,iBAAL;AACD;;;SAED,eAAc;AACZ,aAAO,KAAK3B,QAAZ;AACD,K;SAED,aAAYiC,CAAZ,EAAe;AACb,WAAKjC,QAAL,GAAgBiC,CAAhB;;AACA,WAAKhC,SAAL,GAFa,CAGb;;;AACA,WAAKe,wBAAL;AACD;;;WAED,mBAAUkB,IAAV,EAAgB;AACd,8CAAmB,KAAKlC,QAAxB,EAAkC,KAAKD,MAAL,CAAYN,UAA9C,EAA0DyC,IAA1D;;AACA,WAAKlB,wBAAL;;AACA,WAAKf,SAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,SAAL;AACD;;;kDAvGyCkC,W","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\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\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 CHANGED
@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = exports.MultipleChoice = void 0;
9
9
 
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
-
12
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
11
 
14
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -110,29 +108,20 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
110
108
  value = _event$target.value,
111
109
  checked = _event$target.checked;
112
110
  var _this$props = _this.props,
113
- choiceMode = _this$props.choiceMode,
114
111
  maxSelections = _this$props.maxSelections,
115
- onChoiceChanged = _this$props.onChoiceChanged;
112
+ onChoiceChanged = _this$props.onChoiceChanged,
113
+ session = _this$props.session;
116
114
 
117
- if (choiceMode === 'radio') {
115
+ if (session.value && session.value.length >= maxSelections) {
116
+ // show/hide max selections error when user select/deselect an answer
118
117
  _this.setState({
119
- selectedValue: value
118
+ maxSelectionsErrorState: checked
120
119
  });
121
- } else {
122
- var selectedValues = _this.state.selectedValues;
123
120
 
124
- if (checked && selectedValues.length >= maxSelections) {
121
+ if (checked) {
122
+ // prevent selecting more answers
125
123
  return;
126
124
  }
127
-
128
- _this.setState(function (prevState) {
129
- var selectedValues = checked ? [].concat((0, _toConsumableArray2["default"])(prevState.selectedValues), [value]) : prevState.selectedValues.filter(function (currentValue) {
130
- return currentValue !== value;
131
- });
132
- return {
133
- selectedValues: selectedValues
134
- };
135
- });
136
125
  }
137
126
 
138
127
  onChoiceChanged({
@@ -180,9 +169,8 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
180
169
  }
181
170
  });
182
171
  _this.state = {
183
- selectedValue: null,
184
- selectedValues: [],
185
- showCorrect: _this.props.alwaysShowCorrect || false
172
+ showCorrect: _this.props.alwaysShowCorrect || false,
173
+ maxSelectionsErrorState: false
186
174
  };
187
175
  _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2["default"])(_this));
188
176
  return _this;
@@ -194,7 +182,6 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
194
182
  var sessionValue = this.props.session && this.props.session.value;
195
183
  return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
196
184
  } // handleChange was added for accessibility. Please see comments and videos from PD-2441.
197
- // TODO: Should only be removed if a better solution is found.
198
185
 
199
186
  }, {
200
187
  key: "UNSAFE_componentWillReceiveProps",
@@ -241,11 +228,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
241
228
  return choice.correct || false;
242
229
  }
243
230
 
244
- if (this.isSelected(choice.value)) {
245
- return true;
246
- }
247
-
248
- return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
231
+ return this.isSelected(choice.value);
249
232
  } // renderHeading function was added for accessibility.
250
233
 
251
234
  }, {
@@ -292,7 +275,9 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
292
275
  minSelections = _this$props3.minSelections,
293
276
  maxSelections = _this$props3.maxSelections,
294
277
  session = _this$props3.session;
295
- var showCorrect = this.state.showCorrect;
278
+ var _this$state = this.state,
279
+ showCorrect = _this$state.showCorrect,
280
+ maxSelectionsErrorState = _this$state.maxSelectionsErrorState;
296
281
  var isEvaluateMode = mode === 'evaluate';
297
282
  var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
298
283
  var columnsStyle = gridColumns > 1 ? {
@@ -358,7 +343,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
358
343
  }, translator.t("translation:multipleChoice:minSelections_".concat(minSelections === 1 ? 'one' : 'other'), {
359
344
  lng: language,
360
345
  minSelections: minSelections
361
- })), choiceMode === 'checkbox' && selections >= maxSelections && /*#__PURE__*/_react["default"].createElement("div", {
346
+ })), choiceMode === 'checkbox' && maxSelectionsErrorState && /*#__PURE__*/_react["default"].createElement("div", {
362
347
  className: classes.errorText
363
348
  }, translator.t("translation:multipleChoice:maxSelections_".concat(maxSelections === 1 ? 'one' : 'other'), {
364
349
  lng: language,
package/lib/multiple-choice.js.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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","maxSelections","onChoiceChanged","session","length","setState","maxSelectionsErrorState","selected","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","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 showCorrect: this.props.alwaysShowCorrect || false,\n maxSelectionsErrorState: 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 handleChange = (event) => {\n const { value, checked } = event.target;\n const { maxSelections, onChoiceChanged, session } = this.props;\n\n if (session.value && session.value.length >= maxSelections) {\n // show/hide max selections error when user select/deselect an answer\n this.setState({ maxSelectionsErrorState: checked });\n\n if (checked) {\n // prevent selecting more answers\n return;\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 return this.isSelected(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, maxSelectionsErrorState } = 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' && maxSelectionsErrorState && (\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/element.js CHANGED
@@ -12666,9 +12666,8 @@ class MultipleChoice$1 extends React$2.Component {
12666
12666
  MultipleChoice$1.prototype.__init2.call(this);
12667
12667
  MultipleChoice$1.prototype.__init3.call(this);
12668
12668
  this.state = {
12669
- selectedValue: null,
12670
- selectedValues: [],
12671
- showCorrect: this.props.alwaysShowCorrect || false
12669
+ showCorrect: this.props.alwaysShowCorrect || false,
12670
+ maxSelectionsErrorState: false
12672
12671
  };
12673
12672
  this.onToggle = this.onToggle.bind(this);
12674
12673
  }
@@ -12679,22 +12678,14 @@ class MultipleChoice$1 extends React$2.Component {
12679
12678
  __init() {
12680
12679
  this.handleChange = event => {
12681
12680
  const {value, checked} = event.target;
12682
- const {choiceMode, maxSelections, onChoiceChanged} = this.props;
12683
- if (choiceMode === 'radio') {
12681
+ const {maxSelections, onChoiceChanged, session} = this.props;
12682
+ if (session.value && session.value.length >= maxSelections) {
12684
12683
  this.setState({
12685
- selectedValue: value
12684
+ maxSelectionsErrorState: checked
12686
12685
  });
12687
- } else {
12688
- const {selectedValues} = this.state;
12689
- if (checked && selectedValues.length >= maxSelections) {
12686
+ if (checked) {
12690
12687
  return;
12691
12688
  }
12692
- this.setState(prevState => {
12693
- const selectedValues = checked ? [...prevState.selectedValues, value] : prevState.selectedValues.filter(currentValue => currentValue !== value);
12694
- return {
12695
- selectedValues
12696
- };
12697
- });
12698
12689
  }
12699
12690
  onChoiceChanged({
12700
12691
  value,
@@ -12770,10 +12761,7 @@ class MultipleChoice$1 extends React$2.Component {
12770
12761
  if (this.state.showCorrect) {
12771
12762
  return choice.correct || false;
12772
12763
  }
12773
- if (this.isSelected(choice.value)) {
12774
- return true;
12775
- }
12776
- return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
12764
+ return this.isSelected(choice.value);
12777
12765
  }
12778
12766
  renderHeading() {
12779
12767
  const {mode, choiceMode, classes} = this.props;
@@ -12785,20 +12773,20 @@ class MultipleChoice$1 extends React$2.Component {
12785
12773
  __self: this,
12786
12774
  __source: {
12787
12775
  fileName: _jsxFileName$1,
12788
- lineNumber: 225
12776
+ lineNumber: 209
12789
12777
  }
12790
12778
  }, "Multiple Choice Question") : React$2.createElement('h2', {
12791
12779
  className: classes.srOnly,
12792
12780
  __self: this,
12793
12781
  __source: {
12794
12782
  fileName: _jsxFileName$1,
12795
- lineNumber: 227
12783
+ lineNumber: 211
12796
12784
  }
12797
12785
  }, "Multiple Select Question");
12798
12786
  }
12799
12787
  render() {
12800
12788
  const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
12801
- const {showCorrect} = this.state;
12789
+ const {showCorrect, maxSelectionsErrorState} = this.state;
12802
12790
  const isEvaluateMode = mode === 'evaluate';
12803
12791
  const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
12804
12792
  const columnsStyle = gridColumns > 1 ? {
@@ -12813,7 +12801,7 @@ class MultipleChoice$1 extends React$2.Component {
12813
12801
  __self: this,
12814
12802
  __source: {
12815
12803
  fileName: _jsxFileName$1,
12816
- lineNumber: 259
12804
+ lineNumber: 243
12817
12805
  }
12818
12806
  });
12819
12807
  return React$2.createElement('div', {
@@ -12821,21 +12809,21 @@ class MultipleChoice$1 extends React$2.Component {
12821
12809
  __self: this,
12822
12810
  __source: {
12823
12811
  fileName: _jsxFileName$1,
12824
- lineNumber: 268
12812
+ lineNumber: 252
12825
12813
  }
12826
12814
  }, partLabel && React$2.createElement('h3', {
12827
12815
  className: classes.partLabel,
12828
12816
  __self: this,
12829
12817
  __source: {
12830
12818
  fileName: _jsxFileName$1,
12831
- lineNumber: 269
12819
+ lineNumber: 253
12832
12820
  }
12833
12821
  }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
12834
12822
  className: classes.teacherInstructions,
12835
12823
  __self: this,
12836
12824
  __source: {
12837
12825
  fileName: _jsxFileName$1,
12838
- lineNumber: 274
12826
+ lineNumber: 258
12839
12827
  }
12840
12828
  }, !animationsDisabled ? React$2.createElement(Collapsible, {
12841
12829
  labels: {
@@ -12845,14 +12833,14 @@ class MultipleChoice$1 extends React$2.Component {
12845
12833
  __self: this,
12846
12834
  __source: {
12847
12835
  fileName: _jsxFileName$1,
12848
- lineNumber: 276
12836
+ lineNumber: 260
12849
12837
  }
12850
12838
  }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
12851
12839
  className: classes.fieldset,
12852
12840
  __self: this,
12853
12841
  __source: {
12854
12842
  fileName: _jsxFileName$1,
12855
- lineNumber: 290
12843
+ lineNumber: 274
12856
12844
  }
12857
12845
  }, React$2.createElement(PreviewPrompt, {
12858
12846
  className: "prompt",
@@ -12862,7 +12850,7 @@ class MultipleChoice$1 extends React$2.Component {
12862
12850
  __self: this,
12863
12851
  __source: {
12864
12852
  fileName: _jsxFileName$1,
12865
- lineNumber: 291
12853
+ lineNumber: 275
12866
12854
  }
12867
12855
  }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
12868
12856
  show: showCorrectAnswerToggle,
@@ -12872,7 +12860,7 @@ class MultipleChoice$1 extends React$2.Component {
12872
12860
  __self: this,
12873
12861
  __source: {
12874
12862
  fileName: _jsxFileName$1,
12875
- lineNumber: 294
12863
+ lineNumber: 278
12876
12864
  }
12877
12865
  }), React$2.createElement('div', {
12878
12866
  className: classNames({
@@ -12883,7 +12871,7 @@ class MultipleChoice$1 extends React$2.Component {
12883
12871
  __self: this,
12884
12872
  __source: {
12885
12873
  fileName: _jsxFileName$1,
12886
- lineNumber: 302
12874
+ lineNumber: 286
12887
12875
  }
12888
12876
  }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
12889
12877
  choicesLayout: this.props.choicesLayout,
@@ -12906,24 +12894,24 @@ class MultipleChoice$1 extends React$2.Component {
12906
12894
  __self: this,
12907
12895
  __source: {
12908
12896
  fileName: _jsxFileName$1,
12909
- lineNumber: 310
12897
+ lineNumber: 294
12910
12898
  }
12911
12899
  })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
12912
12900
  className: classes.errorText,
12913
12901
  __self: this,
12914
12902
  __source: {
12915
12903
  fileName: _jsxFileName$1,
12916
- lineNumber: 334
12904
+ lineNumber: 318
12917
12905
  }
12918
12906
  }, translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
12919
12907
  lng: language,
12920
12908
  minSelections
12921
- })), choiceMode === 'checkbox' && selections >= maxSelections && React$2.createElement('div', {
12909
+ })), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
12922
12910
  className: classes.errorText,
12923
12911
  __self: this,
12924
12912
  __source: {
12925
12913
  fileName: _jsxFileName$1,
12926
- lineNumber: 342
12914
+ lineNumber: 326
12927
12915
  }
12928
12916
  }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
12929
12917
  lng: language,
@@ -13083,7 +13071,6 @@ class MultipleChoice extends HTMLElement {
13083
13071
  trailing: true
13084
13072
  });
13085
13073
  this._dispatchResponseChanged = debounce(() => {
13086
- console.log('>> dispatch event');
13087
13074
  var event = new CustomEvent('session-changed', {
13088
13075
  bubbles: true,
13089
13076
  composed: true,
package/module/print.js CHANGED
@@ -12666,9 +12666,8 @@ class MultipleChoice extends React$2.Component {
12666
12666
  MultipleChoice.prototype.__init2.call(this);
12667
12667
  MultipleChoice.prototype.__init3.call(this);
12668
12668
  this.state = {
12669
- selectedValue: null,
12670
- selectedValues: [],
12671
- showCorrect: this.props.alwaysShowCorrect || false
12669
+ showCorrect: this.props.alwaysShowCorrect || false,
12670
+ maxSelectionsErrorState: false
12672
12671
  };
12673
12672
  this.onToggle = this.onToggle.bind(this);
12674
12673
  }
@@ -12679,22 +12678,14 @@ class MultipleChoice extends React$2.Component {
12679
12678
  __init() {
12680
12679
  this.handleChange = event => {
12681
12680
  const {value, checked} = event.target;
12682
- const {choiceMode, maxSelections, onChoiceChanged} = this.props;
12683
- if (choiceMode === 'radio') {
12681
+ const {maxSelections, onChoiceChanged, session} = this.props;
12682
+ if (session.value && session.value.length >= maxSelections) {
12684
12683
  this.setState({
12685
- selectedValue: value
12684
+ maxSelectionsErrorState: checked
12686
12685
  });
12687
- } else {
12688
- const {selectedValues} = this.state;
12689
- if (checked && selectedValues.length >= maxSelections) {
12686
+ if (checked) {
12690
12687
  return;
12691
12688
  }
12692
- this.setState(prevState => {
12693
- const selectedValues = checked ? [...prevState.selectedValues, value] : prevState.selectedValues.filter(currentValue => currentValue !== value);
12694
- return {
12695
- selectedValues
12696
- };
12697
- });
12698
12689
  }
12699
12690
  onChoiceChanged({
12700
12691
  value,
@@ -12770,10 +12761,7 @@ class MultipleChoice extends React$2.Component {
12770
12761
  if (this.state.showCorrect) {
12771
12762
  return choice.correct || false;
12772
12763
  }
12773
- if (this.isSelected(choice.value)) {
12774
- return true;
12775
- }
12776
- return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
12764
+ return this.isSelected(choice.value);
12777
12765
  }
12778
12766
  renderHeading() {
12779
12767
  const {mode, choiceMode, classes} = this.props;
@@ -12785,20 +12773,20 @@ class MultipleChoice extends React$2.Component {
12785
12773
  __self: this,
12786
12774
  __source: {
12787
12775
  fileName: _jsxFileName$1,
12788
- lineNumber: 225
12776
+ lineNumber: 209
12789
12777
  }
12790
12778
  }, "Multiple Choice Question") : React$2.createElement('h2', {
12791
12779
  className: classes.srOnly,
12792
12780
  __self: this,
12793
12781
  __source: {
12794
12782
  fileName: _jsxFileName$1,
12795
- lineNumber: 227
12783
+ lineNumber: 211
12796
12784
  }
12797
12785
  }, "Multiple Select Question");
12798
12786
  }
12799
12787
  render() {
12800
12788
  const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
12801
- const {showCorrect} = this.state;
12789
+ const {showCorrect, maxSelectionsErrorState} = this.state;
12802
12790
  const isEvaluateMode = mode === 'evaluate';
12803
12791
  const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
12804
12792
  const columnsStyle = gridColumns > 1 ? {
@@ -12813,7 +12801,7 @@ class MultipleChoice extends React$2.Component {
12813
12801
  __self: this,
12814
12802
  __source: {
12815
12803
  fileName: _jsxFileName$1,
12816
- lineNumber: 259
12804
+ lineNumber: 243
12817
12805
  }
12818
12806
  });
12819
12807
  return React$2.createElement('div', {
@@ -12821,21 +12809,21 @@ class MultipleChoice extends React$2.Component {
12821
12809
  __self: this,
12822
12810
  __source: {
12823
12811
  fileName: _jsxFileName$1,
12824
- lineNumber: 268
12812
+ lineNumber: 252
12825
12813
  }
12826
12814
  }, partLabel && React$2.createElement('h3', {
12827
12815
  className: classes.partLabel,
12828
12816
  __self: this,
12829
12817
  __source: {
12830
12818
  fileName: _jsxFileName$1,
12831
- lineNumber: 269
12819
+ lineNumber: 253
12832
12820
  }
12833
12821
  }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
12834
12822
  className: classes.teacherInstructions,
12835
12823
  __self: this,
12836
12824
  __source: {
12837
12825
  fileName: _jsxFileName$1,
12838
- lineNumber: 274
12826
+ lineNumber: 258
12839
12827
  }
12840
12828
  }, !animationsDisabled ? React$2.createElement(Collapsible, {
12841
12829
  labels: {
@@ -12845,14 +12833,14 @@ class MultipleChoice extends React$2.Component {
12845
12833
  __self: this,
12846
12834
  __source: {
12847
12835
  fileName: _jsxFileName$1,
12848
- lineNumber: 276
12836
+ lineNumber: 260
12849
12837
  }
12850
12838
  }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
12851
12839
  className: classes.fieldset,
12852
12840
  __self: this,
12853
12841
  __source: {
12854
12842
  fileName: _jsxFileName$1,
12855
- lineNumber: 290
12843
+ lineNumber: 274
12856
12844
  }
12857
12845
  }, React$2.createElement(PreviewPrompt, {
12858
12846
  className: "prompt",
@@ -12862,7 +12850,7 @@ class MultipleChoice extends React$2.Component {
12862
12850
  __self: this,
12863
12851
  __source: {
12864
12852
  fileName: _jsxFileName$1,
12865
- lineNumber: 291
12853
+ lineNumber: 275
12866
12854
  }
12867
12855
  }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
12868
12856
  show: showCorrectAnswerToggle,
@@ -12872,7 +12860,7 @@ class MultipleChoice extends React$2.Component {
12872
12860
  __self: this,
12873
12861
  __source: {
12874
12862
  fileName: _jsxFileName$1,
12875
- lineNumber: 294
12863
+ lineNumber: 278
12876
12864
  }
12877
12865
  }), React$2.createElement('div', {
12878
12866
  className: classNames({
@@ -12883,7 +12871,7 @@ class MultipleChoice extends React$2.Component {
12883
12871
  __self: this,
12884
12872
  __source: {
12885
12873
  fileName: _jsxFileName$1,
12886
- lineNumber: 302
12874
+ lineNumber: 286
12887
12875
  }
12888
12876
  }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
12889
12877
  choicesLayout: this.props.choicesLayout,
@@ -12906,24 +12894,24 @@ class MultipleChoice extends React$2.Component {
12906
12894
  __self: this,
12907
12895
  __source: {
12908
12896
  fileName: _jsxFileName$1,
12909
- lineNumber: 310
12897
+ lineNumber: 294
12910
12898
  }
12911
12899
  })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
12912
12900
  className: classes.errorText,
12913
12901
  __self: this,
12914
12902
  __source: {
12915
12903
  fileName: _jsxFileName$1,
12916
- lineNumber: 334
12904
+ lineNumber: 318
12917
12905
  }
12918
12906
  }, translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
12919
12907
  lng: language,
12920
12908
  minSelections
12921
- })), choiceMode === 'checkbox' && selections >= maxSelections && React$2.createElement('div', {
12909
+ })), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
12922
12910
  className: classes.errorText,
12923
12911
  __self: this,
12924
12912
  __source: {
12925
12913
  fileName: _jsxFileName$1,
12926
- lineNumber: 342
12914
+ lineNumber: 326
12927
12915
  }
12928
12916
  }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
12929
12917
  lng: language,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/multiple-choice",
3
3
  "repository": "pie-framework/pie-elements",
4
- "version": "9.7.2-next.0+84d34449a",
4
+ "version": "9.7.2-next.13+95b17d26e",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -18,7 +18,7 @@
18
18
  "react-test-renderer": "^16.3.2",
19
19
  "react-transition-group": "^2.3.1"
20
20
  },
21
- "gitHead": "84d34449ad5a426c607c88b2b43cae7468944413",
21
+ "gitHead": "95b17d26ecb7649371c9399138d5bd7ba2a10b74",
22
22
  "scripts": {
23
23
  "postpublish": "../../scripts/postpublish"
24
24
  },