npm - @pie-element/multiple-choice - Versions diffs - 7.8.1-next.51 → 7.8.1-next.78 - Mend

@pie-element/multiple-choice 7.8.1-next.51 → 7.8.1-next.78

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

package/lib/choice-input.js +22 -17
package/lib/choice-input.js.map +1 -1
package/lib/choice.js +3 -1
package/lib/choice.js.map +1 -1
package/lib/multiple-choice.js +46 -9
package/lib/multiple-choice.js.map +1 -1
package/package.json +2 -2

package/lib/choice-input.js CHANGED Viewed

@@ -125,7 +125,8 @@ var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
       checked = props.checked,
       onChange = props.onChange,
       disabled = props.disabled,
-      accessibility = props.accessibility;
+      accessibility = props.accessibility,
+      value = props.value;
   var key = function key(k) {
     return correctness ? "".concat(correctness, "-").concat(k) : k;
@@ -139,10 +140,12 @@ var StyledCheckbox = (0, _styles.withStyles)(inputStyles)(function (props) {
   var miniProps = {
     checked: checked,
     onChange: onChange,
-    disabled: disabled
+    disabled: disabled,
+    value: value
   };
   return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({
-    "aria-label": accessibility
+    "aria-label": accessibility || value,
+    "aria-checked": checked
   }, miniProps, {
     className: CLASS_NAME,
     classes: {
@@ -159,7 +162,8 @@ var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
       checked = props.checked,
       onChange = props.onChange,
       disabled = props.disabled,
-      accessibility = props.accessibility;
+      accessibility = props.accessibility,
+      value = props.value;
   var key = function key(k) {
     return correctness ? "".concat(correctness, "-").concat(k) : k;
@@ -173,10 +177,12 @@ var StyledRadio = (0, _styles.withStyles)(inputStyles)(function (props) {
   var miniProps = {
     checked: checked,
     onChange: onChange,
-    disabled: disabled
+    disabled: disabled,
+    value: value
   };
   return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({
-    "aria-label": accessibility
+    "aria-label": accessibility || value,
+    "aria-checked": checked
   }, miniProps, {
     className: CLASS_NAME,
     classes: {
@@ -204,8 +210,9 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(ChoiceInput, [{
     key: "onToggleChoice",
-    value: function onToggleChoice() {
-      this.props.onChange({
+    value: function onToggleChoice(event) {
+      this.props.onChange(event);
+      this.props.updateSession({
         value: this.props.value,
         selected: !this.props.checked
       });
@@ -219,7 +226,6 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
           displayKey = _this$props.displayKey,
           feedback = _this$props.feedback,
           label = _this$props.label,
-          checked = _this$props.checked,
           correctness = _this$props.correctness,
           classes = _this$props.classes,
           className = _this$props.className,
@@ -227,7 +233,9 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
           accessibility = _this$props.accessibility,
           hideTick = _this$props.hideTick,
           isEvaluateMode = _this$props.isEvaluateMode,
-          choicesLayout = _this$props.choicesLayout;
+          choicesLayout = _this$props.choicesLayout,
+          value = _this$props.value,
+          checked = _this$props.checked;
       var Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
       var classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
       var holderClassNames = (0, _classnames["default"])(classes.checkboxHolder, (0, _defineProperty2["default"])({}, classes.horizontalLayout, choicesLayout === 'horizontal'));
@@ -240,19 +248,16 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(holderClassNames, 'checkbox-holder')
       }, /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
-        disabled: disabled,
-        label: displayKey ? displayKey + '. ' : '',
+        label: displayKey ? displayKey + ". ".concat(label) : " ".concat(label),
+        value: value,
         control: /*#__PURE__*/_react["default"].createElement(Tag, {
           accessibility: accessibility,
+          disabled: disabled,
           checked: checked,
           correctness: correctness,
+          value: value,
           onChange: this.onToggleChoice
         })
-      }), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: "label",
-        onClick: this.onToggleChoice,
-        prompt: label,
-        tagName: "span"
       }))), rationale && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         className: "rationale",
         defaultClassName: "rationale",

package/lib/choice-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","horizontalLayout","paddingRight","spacing","unit","formStyleSheet","label","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","value","selected","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","Tag","classSuffix","holderClassNames","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n paddingRight: theme.spacing.unit,\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => <FormControlLabel {...props} classes={{ label: props.classes.label }} />);\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n return (\n <Checkbox\n aria-label={accessibility}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled };\n\n return (\n <Radio\n aria-label={accessibility}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n accessibility: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n };\n\n static defaultProps = {\n rationale: null,\n accessibility: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n }\n\n onToggleChoice() {\n this.props.onChange({\n value: this.props.value,\n selected: !this.props.checked,\n });\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n checked,\n correctness,\n classes,\n className,\n rationale,\n accessibility,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n <StyledFormControlLabel\n disabled={disabled}\n label={displayKey ? displayKey + '. ' : ''}\n control={\n <Tag\n accessibility={accessibility}\n checked={checked}\n correctness={correctness}\n onChange={this.onToggleChoice}\n />\n }\n />\n <PreviewPrompt className=\"label\" onClick={this.onToggleChoice} prompt={label} tagName=\"span\" />\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
1	+ {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","horizontalLayout","paddingRight","spacing","unit","formStyleSheet","label","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","disabled","incorrect","root","primaryLight","checked","primary","opacity","cursor","pointerEvents","StyledCheckbox","correctness","onChange","accessibility","value","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","event","updateSession","selected","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","Tag","classSuffix","holderClassNames","React","Component","PropTypes","oneOf","string","isRequired","bool","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport FeedbackTick from './feedback-tick';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n paddingRight: theme.spacing.unit,\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => <FormControlLabel {...props} classes={{ label: props.classes.label }} />);\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n aria-label={accessibility \|\| value}\n aria-checked={checked}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, accessibility, value } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n aria-label={accessibility \|\| value}\n aria-checked={checked}\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string.isRequired,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n accessibility: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n };\n\n static defaultProps = {\n rationale: null,\n accessibility: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n this.props.updateSession({\n value: this.props.value,\n selected: !this.props.checked,\n });\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n accessibility,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n } = this.props;\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n <StyledFormControlLabel\n label={displayKey ? displayKey + `. ${label}` : ` ${label}`}\n value={value}\n control={\n <Tag\n accessibility={accessibility}\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n onChange={this.onToggleChoice}\n />\n }\n />\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}

package/lib/choice.js CHANGED Viewed

@@ -86,7 +86,8 @@ var Choice = /*#__PURE__*/function (_React$Component) {
           displayKey = _this$props2.displayKey,
           classes = _this$props2.classes,
           choicesLayout = _this$props2.choicesLayout,
-          gridColumns = _this$props2.gridColumns;
+          gridColumns = _this$props2.gridColumns,
+          updateSession = _this$props2.updateSession;
       var choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
       var feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
@@ -99,6 +100,7 @@ var Choice = /*#__PURE__*/function (_React$Component) {
         displayKey: displayKey,
         choicesLayout: choicesLayout,
         gridColumns: gridColumns,
+        updateSession: updateSession,
         onChange: this.onChange,
         isEvaluateMode: isEvaluateMode
       });

package/lib/choice.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","choiceClass","feedback","choiceProps","onChange","names","noBorder","horizontalLayout","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","paddingTop","paddingBottom","borderBottom","paddingRight","marginRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;IAEaA,M;;;;;;;;;;;;;;;iGACA,UAACC,MAAD,EAAY;AACrB,wBAAsC,MAAKC,KAA3C;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,eAAlB,eAAkBA,eAAlB;;AAEA,UAAI,CAACD,QAAL,EAAe;AACbC,QAAAA,eAAe,CAACH,MAAD,CAAf;AACD;AACF,K;;;;;;WAED,kBAAS;AAAA;;AACP,~~yBAcI~~,KAAKC,~~KAdT~~;AAAA,UACED,MADF,gBACEA,MADF;AAAA,UAEEI,KAFF,gBAEEA,KAFF;AAAA,UAGEC,aAHF,gBAGEA,aAHF;AAAA,UAIEC,WAJF,gBAIEA,WAJF;AAAA,UAKEC,cALF,gBAKEA,cALF;AAAA,UAMEC,UANF,gBAMEA,UANF;AAAA,UAOEN,QAPF,gBAOEA,QAPF;AAAA,UAQEO,OARF,gBAQEA,OARF;AAAA,UASEC,WATF,gBASEA,WATF;AAAA,UAUEC,UAVF,gBAUEA,UAVF;AAAA,UAWEC,OAXF,gBAWEA,OAXF;AAAA,UAYEC,aAZF,gBAYEA,aAZF;AAAA,UAaEC,WAbF,gBAaEA,WAbF;~~AAeA~~,UAAMC,WAAW,GAAG,~~YAAYX~~,KAAK,KAAKC,aAAa,GAAG,CAA1B,GAA8B,OAA9B,GAAwC,EAApD,CAApB;AAEA,~~UAAMW~~,QAAQ,GAAG,~~CAACT~~,cAAD,IAAmBD,WAAnB,GAAiC,EAAjC,GAAsCN,MAAM,~~CAACgB~~,QAA9D;;AAEA,UAAMC,WAAW,~~mCACZjB~~,MADY;AAEfS,QAAAA,OAAO,EAAPA,OAFe;AAGfD,QAAAA,UAAU,EAAVA,UAHe;AAIfN,QAAAA,QAAQ,EAARA,QAJe;~~AAKfc~~,QAAAA,QAAQ,EAARA,QALe;~~AAMfN~~,QAAAA,WAAW,EAAXA,WANe;AAOfC,QAAAA,UAAU,EAAVA,UAPe;AAQfE,QAAAA,aAAa,EAAbA,aARe;AASfC,QAAAA,WAAW,EAAXA,WATe;~~AAUfI~~,QAAAA,QAAQ,EAAE,KAAKA,~~QAVA~~;~~AAWfX~~,QAAAA,cAAc,EAAdA;~~AAXe~~,QAAjB;;~~AAcA~~,~~UAAMY~~,KAAK,GAAG,~~4BAAWP~~,OAAO,CAACZ,MAAnB,mEACXY,OAAO,~~CAACQ~~,QADG,~~EACQhB~~,KAAK,KAAKC,aAAa,GAAG,CAA1B,IAA+BQ,aAAa,KAAK,UADzD,iDAEXD,OAAO,~~CAACS~~,gBAFG,~~EAEgBR~~,aAAa,KAAK,YAFlC,gBAAd;AAKA,0BACE;AAAK,QAAA,SAAS,~~EAAEE~~,WAAhB;AAA6B,QAAA,GAAG,~~EAAEX~~;AAAlC,sBACE,gCAAC,uBAAD,~~gCAAiBa~~,WAAjB;AAA8B,QAAA,SAAS,EAAEE;AAAzC,SADF,CADF;AAKD;;;~~EArDyBG~~,kBAAMC,S;;;~~AAwDlCxB~~,MAAM,~~CAACyB~~,SAAP,GAAmB;~~AACjBhB~~,EAAAA,UAAU,~~EAAEiB~~,sBAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,UAAV,CAAhB,CADK;~~AAEjB1B~~,EAAAA,MAAM,~~EAAEyB~~,sBAAUE,MAFD;~~AAGjBzB~~,EAAAA,QAAQ,~~EAAEuB~~,sBAAUG,IAAV,CAAeC,UAHR;~~AAIjB1B~~,EAAAA,eAAe,~~EAAEsB~~,sBAAUK,IAJV;~~AAKjBlB~~,EAAAA,OAAO,~~EAAEa~~,sBAAUE,MAAV,CAAiBE,UALT;~~AAMjBzB~~,EAAAA,KAAK,~~EAAEqB~~,sBAAUM,MANA;~~AAOjB1B~~,EAAAA,aAAa,~~EAAEoB~~,sBAAUM,MAPR;~~AAQjBzB~~,EAAAA,WAAW,~~EAAEmB~~,sBAAUG,IARN;~~AASjBrB~~,EAAAA,cAAc,~~EAAEkB~~,sBAAUG,IATT;~~AAUjBnB~~,EAAAA,OAAO,~~EAAEgB~~,sBAAUG,IAVF;~~AAWjBlB~~,EAAAA,WAAW,~~EAAEe~~,sBAAUO,MAXN;~~AAYjBrB~~,EAAAA,UAAU,~~EAAEc~~,sBAAUO,MAZL;~~AAajBnB~~,EAAAA,aAAa,~~EAAEY~~,sBAAUC,KAAV,CAAgB,CAAC,UAAD,EAAa,MAAb,EAAqB,YAArB,CAAhB,CAbE;~~AAcjBZ~~,EAAAA,WAAW,~~EAAEW~~,sBAAUO;AAdN,CAAnB;;eAiBe,wBAAW;~~AACxBhC~~,EAAAA,MAAM,EAAE;~~AACNiC~~,IAAAA,UAAU,EAAE,MADN;AAENC,IAAAA,aAAa,EAAE,MAFT;AAGNC,IAAAA,YAAY,EAAE;AAHR,GADgB;AAMxBf,EAAAA,QAAQ,EAAE;AACRe,IAAAA,YAAY,EAAE;AADN,GANc;AASxBd,EAAAA,gBAAgB,EAAE;AAChBe,IAAAA,YAAY,EAAE,MADE;AAEhB,eAAW;AACTC,MAAAA,WAAW,EAAE,KADJ,CAET;AACA;AACA;;AAJS;AAFK;AATM,CAAX,~~EAkBZtC~~,MAlBY,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n onChange = (choice) => {\n const { disabled, onChoiceChanged } = this.props;\n\n if (!disabled) {\n onChoiceChanged(choice);\n }\n };\n\n render() {\n const {\n choice,\n index,\n choicesLength,\n showCorrect,\n isEvaluateMode,\n choiceMode,\n disabled,\n checked,\n correctness,\n displayKey,\n classes,\n choicesLayout,\n gridColumns,\n } = this.props;\n const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n const feedback = !isEvaluateMode \|\| showCorrect ? '' : choice.feedback;\n\n const choiceProps = {\n ...choice,\n checked,\n choiceMode,\n disabled,\n feedback,\n correctness,\n displayKey,\n choicesLayout,\n gridColumns,\n onChange: this.onChange,\n isEvaluateMode,\n };\n\n const names = classNames(classes.choice, {\n [classes.noBorder]: index === choicesLength - 1 \|\| choicesLayout !== 'vertical',\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={choiceClass} key={index}>\n <ChoiceInput {...choiceProps} className={names} />\n </div>\n );\n }\n}\n\nChoice.propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n choice: PropTypes.object,\n disabled: PropTypes.bool.isRequired,\n onChoiceChanged: PropTypes.func,\n classes: PropTypes.object.isRequired,\n index: PropTypes.number,\n choicesLength: PropTypes.number,\n showCorrect: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n checked: PropTypes.bool,\n correctness: PropTypes.string,\n displayKey: PropTypes.string,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n};\n\nexport default withStyles({\n choice: {\n paddingTop: '20px',\n paddingBottom: '10px',\n borderBottom: '1px solid #E0DEE0',\n },\n noBorder: {\n borderBottom: 'none',\n },\n horizontalLayout: {\n paddingRight: '20px',\n '& label': {\n marginRight: '8px',\n // '& span:first-child': {\n // paddingRight: 0\n // }\n },\n },\n})(Choice);\n"],"file":"choice.js"}
1	+ {"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","updateSession","choiceClass","feedback","choiceProps","onChange","names","noBorder","horizontalLayout","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","paddingTop","paddingBottom","borderBottom","paddingRight","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n onChange = (choice) => {\n const { disabled, onChoiceChanged } = this.props;\n\n if (!disabled) {\n onChoiceChanged(choice);\n }\n };\n\n render() {\n const {\n choice,\n index,\n choicesLength,\n showCorrect,\n isEvaluateMode,\n choiceMode,\n disabled,\n checked,\n correctness,\n displayKey,\n classes,\n choicesLayout,\n gridColumns,\n updateSession,\n } = this.props;\n const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n const feedback = !isEvaluateMode \|\| showCorrect ? '' : choice.feedback;\n\n const choiceProps = {\n ...choice,\n checked,\n choiceMode,\n disabled,\n feedback,\n correctness,\n displayKey,\n choicesLayout,\n gridColumns,\n updateSession,\n onChange: this.onChange,\n isEvaluateMode,\n };\n\n const names = classNames(classes.choice, {\n [classes.noBorder]: index === choicesLength - 1 \|\| choicesLayout !== 'vertical',\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n });\n\n return (\n <div className={choiceClass} key={index}>\n <ChoiceInput {...choiceProps} className={names} />\n </div>\n );\n }\n}\n\nChoice.propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n choice: PropTypes.object,\n disabled: PropTypes.bool.isRequired,\n onChoiceChanged: PropTypes.func,\n classes: PropTypes.object.isRequired,\n index: PropTypes.number,\n choicesLength: PropTypes.number,\n showCorrect: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n checked: PropTypes.bool,\n correctness: PropTypes.string,\n displayKey: PropTypes.string,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n};\n\nexport default withStyles({\n choice: {\n paddingTop: '20px',\n paddingBottom: '10px',\n borderBottom: '1px solid #E0DEE0',\n },\n noBorder: {\n borderBottom: 'none',\n },\n horizontalLayout: {\n paddingRight: '20px',\n '& label': {\n marginRight: '8px',\n // '& span:first-child': {\n // paddingRight: 0\n // }\n },\n },\n})(Choice);\n"],"file":"choice.js"}

package/lib/multiple-choice.js CHANGED Viewed

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.MultipleChoice = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -78,6 +80,34 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, MultipleChoice);
     _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (event) {
+      var target = event.target;
+      _this.setState({
+        selectedValue: target.value
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChangeCheckboxes", function (event) {
+      var _event$target = event.target,
+          value = _event$target.value,
+          checked = _event$target.checked;
+      _this.setState(function (prevState) {
+        var selectedValues = (0, _toConsumableArray2["default"])(prevState.selectedValues);
+        if (checked) {
+          selectedValues.push(value);
+        } else {
+          selectedValues = selectedValues.filter(function (currentValue) {
+            return currentValue !== value;
+          });
+        }
+        return {
+          selectedValues: selectedValues
+        };
+      });
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getCorrectness", function () {
       var choice = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var isCorrect = choice.correct;
@@ -107,6 +137,8 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       }
     });
     _this.state = {
+      selectedValue: null,
+      selectedValues: [],
       showCorrect: _this.props.alwaysShowCorrect || false
     };
     _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2["default"])(_this));
@@ -114,6 +146,13 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
   }
   (0, _createClass2["default"])(MultipleChoice, [{
+    key: "isSelected",
+    value: function isSelected(value) {
+      var sessionValue = this.props.session && this.props.session.value;
+      return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
+    } // handleChange and handleChangeCheckboxes functions were added for accessibility. Please see comments and videos from PD-2441. They should only be removed if a better solution is found.
+  }, {
     key: "onToggle",
     value: function onToggle() {
       if (this.props.mode === 'evaluate') {
@@ -137,12 +176,6 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
-  }, {
-    key: "isSelected",
-    value: function isSelected(value) {
-      var sessionValue = this.props.session && this.props.session.value;
-      return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
-    }
   }, {
     key: "indexToSymbol",
     value: function indexToSymbol(index) {
@@ -177,7 +210,10 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           classes = _this$props.classes,
           alwaysShowCorrect = _this$props.alwaysShowCorrect,
           animationsDisabled = _this$props.animationsDisabled;
-      var showCorrect = this.state.showCorrect;
+      var _this$state = this.state,
+          showCorrect = _this$state.showCorrect,
+          selectedValue = _this$state.selectedValue,
+          selectedValues = _this$state.selectedValues;
       var isEvaluateMode = mode === 'evaluate';
       var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
       var columnsStyle = gridColumns > 1 ? {
@@ -226,9 +262,10 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           isEvaluateMode: isEvaluateMode,
           choiceMode: choiceMode,
           disabled: disabled,
-          onChoiceChanged: onChoiceChanged,
+          updateSession: onChoiceChanged,
+          onChoiceChanged: _this2.props.choiceMode === 'radio' ? _this2.handleChange : _this2.handleChangeCheckboxes,
           hideTick: choice.hideTick,
-          checked: showCorrect ? choice.correct || false : _this2.isSelected(choice.value),
+          checked: showCorrect ? choice.correct || false : _this2.props.choiceMode === 'radio' ? selectedValue === choice.value : selectedValues.includes(choice.value),
           correctness: isEvaluateMode ? _this2.getCorrectness(choice) : undefined,
           displayKey: _this2.indexToSymbol(index)
         });

package/lib/multiple-choice.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "7.8.1-next.51+a42a408d1",
+  "version": "7.8.1-next.78+3867e7270",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "a42a408d1d238e52cbcf907fbbaec2ee98550385",
+  "gitHead": "3867e7270466f7f9b9f4c33bb72e7eed6d50bb57",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },