@pie-element/multiple-choice 7.12.1-next.33 → 7.12.1-next.47
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.
- package/lib/multiple-choice.js +49 -18
- package/lib/multiple-choice.js.map +1 -1
- package/package.json +2 -2
package/lib/multiple-choice.js
CHANGED
|
@@ -52,6 +52,10 @@ var styles = function styles(theme) {
|
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
54
|
partLabel: {
|
|
55
|
+
display: 'block',
|
|
56
|
+
fontSize: 'inherit',
|
|
57
|
+
margin: '0',
|
|
58
|
+
fontWeight: 'normal',
|
|
55
59
|
paddingBottom: theme.spacing.unit * 2
|
|
56
60
|
},
|
|
57
61
|
teacherInstructions: {
|
|
@@ -70,6 +74,14 @@ var styles = function styles(theme) {
|
|
|
70
74
|
padding: '0.01em 0 0 0',
|
|
71
75
|
margin: '0px',
|
|
72
76
|
minWidth: '0px'
|
|
77
|
+
},
|
|
78
|
+
srOnly: {
|
|
79
|
+
position: 'absolute',
|
|
80
|
+
left: '-10000px',
|
|
81
|
+
top: 'auto',
|
|
82
|
+
width: '1px',
|
|
83
|
+
height: '1px',
|
|
84
|
+
overflow: 'hidden'
|
|
73
85
|
}
|
|
74
86
|
};
|
|
75
87
|
};
|
|
@@ -205,6 +217,25 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
|
|
|
205
217
|
}
|
|
206
218
|
|
|
207
219
|
return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
|
|
220
|
+
} // renderHeading function was added for accessibility.
|
|
221
|
+
|
|
222
|
+
}, {
|
|
223
|
+
key: "renderHeading",
|
|
224
|
+
value: function renderHeading() {
|
|
225
|
+
var _this$props = this.props,
|
|
226
|
+
mode = _this$props.mode,
|
|
227
|
+
choiceMode = _this$props.choiceMode,
|
|
228
|
+
classes = _this$props.classes;
|
|
229
|
+
|
|
230
|
+
if (mode !== 'gather') {
|
|
231
|
+
return null;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
return choiceMode === 'radio' ? /*#__PURE__*/_react["default"].createElement("h2", {
|
|
235
|
+
className: classes.srOnly
|
|
236
|
+
}, "Multiple Choice Question") : /*#__PURE__*/_react["default"].createElement("h2", {
|
|
237
|
+
className: classes.srOnly
|
|
238
|
+
}, "Multiple Select Question");
|
|
208
239
|
}
|
|
209
240
|
}, {
|
|
210
241
|
key: "render",
|
|
@@ -212,22 +243,22 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
|
|
|
212
243
|
var _classNames,
|
|
213
244
|
_this2 = this;
|
|
214
245
|
|
|
215
|
-
var _this$
|
|
216
|
-
mode = _this$
|
|
217
|
-
disabled = _this$
|
|
218
|
-
className = _this$
|
|
219
|
-
_this$
|
|
220
|
-
choices = _this$
|
|
221
|
-
choiceMode = _this$
|
|
222
|
-
gridColumns = _this$
|
|
223
|
-
partLabel = _this$
|
|
224
|
-
prompt = _this$
|
|
225
|
-
onChoiceChanged = _this$
|
|
226
|
-
responseCorrect = _this$
|
|
227
|
-
teacherInstructions = _this$
|
|
228
|
-
classes = _this$
|
|
229
|
-
alwaysShowCorrect = _this$
|
|
230
|
-
animationsDisabled = _this$
|
|
246
|
+
var _this$props2 = this.props,
|
|
247
|
+
mode = _this$props2.mode,
|
|
248
|
+
disabled = _this$props2.disabled,
|
|
249
|
+
className = _this$props2.className,
|
|
250
|
+
_this$props2$choices = _this$props2.choices,
|
|
251
|
+
choices = _this$props2$choices === void 0 ? [] : _this$props2$choices,
|
|
252
|
+
choiceMode = _this$props2.choiceMode,
|
|
253
|
+
gridColumns = _this$props2.gridColumns,
|
|
254
|
+
partLabel = _this$props2.partLabel,
|
|
255
|
+
prompt = _this$props2.prompt,
|
|
256
|
+
onChoiceChanged = _this$props2.onChoiceChanged,
|
|
257
|
+
responseCorrect = _this$props2.responseCorrect,
|
|
258
|
+
teacherInstructions = _this$props2.teacherInstructions,
|
|
259
|
+
classes = _this$props2.classes,
|
|
260
|
+
alwaysShowCorrect = _this$props2.alwaysShowCorrect,
|
|
261
|
+
animationsDisabled = _this$props2.animationsDisabled;
|
|
231
262
|
var showCorrect = this.state.showCorrect;
|
|
232
263
|
var isEvaluateMode = mode === 'evaluate';
|
|
233
264
|
var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
|
|
@@ -244,9 +275,9 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
|
|
|
244
275
|
|
|
245
276
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
246
277
|
className: (0, _classnames["default"])(classes.main, className, 'multiple-choice')
|
|
247
|
-
}, partLabel && /*#__PURE__*/_react["default"].createElement("
|
|
278
|
+
}, partLabel && /*#__PURE__*/_react["default"].createElement("h3", {
|
|
248
279
|
className: classes.partLabel
|
|
249
|
-
}, partLabel), teacherInstructions && /*#__PURE__*/_react["default"].createElement("div", {
|
|
280
|
+
}, partLabel), this.renderHeading(), teacherInstructions && /*#__PURE__*/_react["default"].createElement("div", {
|
|
250
281
|
className: classes.teacherInstructions
|
|
251
282
|
}, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
|
|
252
283
|
labels: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["styles","theme","main","color","text","backgroundColor","background","partLabel","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","display","flexDirection","flexWrap","gridLayout","fieldset","border","padding","margin","minWidth","MultipleChoice","props","event","target","setState","selectedValue","value","checked","prevState","selectedValues","push","filter","currentValue","choice","isCorrect","correct","isChecked","isSelected","state","showCorrect","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","session","indexOf","mode","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","includes","disabled","className","choices","gridColumns","prompt","onChoiceChanged","responseCorrect","classes","animationsDisabled","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","teacherInstructionsDiv","hidden","visible","choicesLayout","map","length","handleChange","handleChangeCheckboxes","hideTick","getChecked","getCorrectness","indexToSymbol","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n '& *': {\n '-webkit-font-smoothing': 'antialiased',\n },\n },\n partLabel: {\n paddingBottom: theme.spacing.unit * 2,\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n horizontalLayout: {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n },\n gridLayout: {\n display: 'grid',\n },\n fieldset: {\n border: '0px',\n padding: '0.01em 0 0 0',\n margin: '0px',\n minWidth: '0px',\n },\n});\n\nexport class MultipleChoice extends React.Component {\n static propTypes = {\n className: PropTypes.string,\n mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n choices: PropTypes.array,\n partLabel: PropTypes.string,\n prompt: PropTypes.string,\n teacherInstructions: PropTypes.string,\n session: PropTypes.object,\n disabled: PropTypes.bool,\n onChoiceChanged: PropTypes.func,\n responseCorrect: PropTypes.bool,\n classes: PropTypes.object.isRequired,\n correctResponse: PropTypes.array,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n alwaysShowCorrect: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n selectedValue: null,\n selectedValues: [],\n showCorrect: this.props.alwaysShowCorrect || false,\n };\n\n this.onToggle = this.onToggle.bind(this);\n }\n\n isSelected(value) {\n const sessionValue = this.props.session && this.props.session.value;\n\n return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n }\n\n // handleChange and handleChangeCheckboxes functions were added for accessibility. Please see comments and videos from PD-2441. They should only be removed if a better solution is found.\n handleChange = (event) => {\n const target = event.target;\n\n this.setState({ selectedValue: target.value });\n };\n\n handleChangeCheckboxes = (event) => {\n const { value, checked } = event.target;\n\n this.setState((prevState) => {\n let selectedValues = [...prevState.selectedValues];\n\n if (checked) {\n selectedValues.push(value);\n } else {\n selectedValues = selectedValues.filter((currentValue) => currentValue !== value);\n }\n\n return { selectedValues };\n });\n };\n\n onToggle() {\n if (this.props.mode === 'evaluate') {\n this.setState({ showCorrect: !this.state.showCorrect });\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!nextProps.correctResponse) {\n this.setState({ showCorrect: false });\n }\n\n if (nextProps.alwaysShowCorrect) {\n this.setState({ showCorrect: true });\n }\n }\n\n indexToSymbol(index) {\n if (this.props.keyMode === 'numbers') {\n return `${index + 1}`;\n }\n\n if (this.props.keyMode === 'letters') {\n return String.fromCharCode(97 + index).toUpperCase();\n }\n\n return '';\n }\n\n getCorrectness = (choice = {}) => {\n const isCorrect = choice.correct;\n const isChecked = this.isSelected(choice.value);\n\n if (this.state.showCorrect) {\n return isCorrect ? 'correct' : undefined;\n }\n\n if (isCorrect) {\n if (isChecked) {\n // A correct answer is selected: marked with a green checkmark\n return 'correct';\n } else {\n // A correct answer is NOT selected: marked with an orange X\n return 'incorrect';\n }\n } else {\n if (isChecked) {\n // An incorrect answer is selected: marked with an orange X\n return 'incorrect';\n } else {\n // An incorrect answer is NOT selected: not marked\n return undefined;\n }\n }\n };\n\n getChecked(choice) {\n if (this.state.showCorrect) {\n return choice.correct || false;\n }\n\n if (this.isSelected(choice.value)) {\n return true;\n }\n\n return this.props.choiceMode === 'radio'\n ? this.state.selectedValue === choice.value\n : this.state.selectedValues.includes(choice.value);\n }\n\n render() {\n const {\n mode,\n disabled,\n className,\n choices = [],\n choiceMode,\n gridColumns,\n partLabel,\n prompt,\n onChoiceChanged,\n responseCorrect,\n teacherInstructions,\n classes,\n alwaysShowCorrect,\n animationsDisabled,\n } = this.props;\n const { showCorrect } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n\n const teacherInstructionsDiv = (\n <PreviewPrompt\n tagName=\"div\"\n className=\"prompt\"\n defaultClassName=\"teacher-instructions\"\n prompt={teacherInstructions}\n />\n );\n\n return (\n <div className={classNames(classes.main, className, 'multiple-choice')}>\n {partLabel && <div className={classes.partLabel}>{partLabel}</div>}\n\n {teacherInstructions && (\n <div className={classes.teacherInstructions}>\n {!animationsDisabled ? (\n <Collapsible\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n {teacherInstructionsDiv}\n </Collapsible>\n ) : (\n teacherInstructionsDiv\n )}\n </div>\n )}\n\n <fieldset className={classes.fieldset}>\n <PreviewPrompt className=\"prompt\" defaultClassName=\"prompt\" prompt={prompt} tagName={'legend'} />\n\n {!alwaysShowCorrect && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n />\n )}\n\n <div\n className={classNames({\n [classes.gridLayout]: this.props.choicesLayout === 'grid',\n [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal',\n })}\n style={columnsStyle}\n >\n {choices.map((choice, index) => (\n <StyledChoice\n choicesLayout={this.props.choicesLayout}\n gridColumns={gridColumns}\n key={`choice-${index}`}\n choice={choice}\n index={index}\n choicesLength={choices.length}\n showCorrect={showCorrect}\n isEvaluateMode={isEvaluateMode}\n choiceMode={choiceMode}\n disabled={disabled}\n updateSession={onChoiceChanged}\n onChoiceChanged={this.props.choiceMode === 'radio' ? this.handleChange : this.handleChangeCheckboxes}\n hideTick={choice.hideTick}\n checked={this.getChecked(choice)}\n correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n displayKey={this.indexToSymbol(index)}\n />\n ))}\n </div>\n </fieldset>\n </div>\n );\n }\n}\n\nMultipleChoice.defaultProps = {\n session: {\n value: [],\n },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}
|
|
1
|
+
{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["styles","theme","main","color","text","backgroundColor","background","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","border","padding","minWidth","srOnly","position","left","top","width","height","overflow","MultipleChoice","props","event","target","setState","selectedValue","value","checked","prevState","selectedValues","push","filter","currentValue","choice","isCorrect","correct","isChecked","isSelected","state","showCorrect","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","session","indexOf","mode","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","includes","classes","disabled","className","choices","gridColumns","prompt","onChoiceChanged","responseCorrect","animationsDisabled","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","teacherInstructionsDiv","renderHeading","hidden","visible","choicesLayout","map","length","handleChange","handleChangeCheckboxes","hideTick","getChecked","getCorrectness","indexToSymbol","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n '& *': {\n '-webkit-font-smoothing': 'antialiased',\n },\n },\n partLabel: {\n display: 'block',\n fontSize: 'inherit',\n margin: '0',\n fontWeight: 'normal',\n paddingBottom: theme.spacing.unit * 2,\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n horizontalLayout: {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n },\n gridLayout: {\n display: 'grid',\n },\n fieldset: {\n border: '0px',\n padding: '0.01em 0 0 0',\n margin: '0px',\n minWidth: '0px',\n },\n srOnly: {\n position: 'absolute',\n left: '-10000px',\n top: 'auto',\n width: '1px',\n height: '1px',\n overflow: 'hidden',\n },\n});\n\nexport class MultipleChoice extends React.Component {\n static propTypes = {\n className: PropTypes.string,\n mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n choices: PropTypes.array,\n partLabel: PropTypes.string,\n prompt: PropTypes.string,\n teacherInstructions: PropTypes.string,\n session: PropTypes.object,\n disabled: PropTypes.bool,\n onChoiceChanged: PropTypes.func,\n responseCorrect: PropTypes.bool,\n classes: PropTypes.object.isRequired,\n correctResponse: PropTypes.array,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n alwaysShowCorrect: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n selectedValue: null,\n selectedValues: [],\n showCorrect: this.props.alwaysShowCorrect || false,\n };\n\n this.onToggle = this.onToggle.bind(this);\n }\n\n isSelected(value) {\n const sessionValue = this.props.session && this.props.session.value;\n\n return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n }\n\n // handleChange and handleChangeCheckboxes functions were added for accessibility. Please see comments and videos from PD-2441. They should only be removed if a better solution is found.\n handleChange = (event) => {\n const target = event.target;\n\n this.setState({ selectedValue: target.value });\n };\n\n handleChangeCheckboxes = (event) => {\n const { value, checked } = event.target;\n\n this.setState((prevState) => {\n let selectedValues = [...prevState.selectedValues];\n\n if (checked) {\n selectedValues.push(value);\n } else {\n selectedValues = selectedValues.filter((currentValue) => currentValue !== value);\n }\n\n return { selectedValues };\n });\n };\n\n onToggle() {\n if (this.props.mode === 'evaluate') {\n this.setState({ showCorrect: !this.state.showCorrect });\n }\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!nextProps.correctResponse) {\n this.setState({ showCorrect: false });\n }\n\n if (nextProps.alwaysShowCorrect) {\n this.setState({ showCorrect: true });\n }\n }\n\n indexToSymbol(index) {\n if (this.props.keyMode === 'numbers') {\n return `${index + 1}`;\n }\n\n if (this.props.keyMode === 'letters') {\n return String.fromCharCode(97 + index).toUpperCase();\n }\n\n return '';\n }\n\n getCorrectness = (choice = {}) => {\n const isCorrect = choice.correct;\n const isChecked = this.isSelected(choice.value);\n\n if (this.state.showCorrect) {\n return isCorrect ? 'correct' : undefined;\n }\n\n if (isCorrect) {\n if (isChecked) {\n // A correct answer is selected: marked with a green checkmark\n return 'correct';\n } else {\n // A correct answer is NOT selected: marked with an orange X\n return 'incorrect';\n }\n } else {\n if (isChecked) {\n // An incorrect answer is selected: marked with an orange X\n return 'incorrect';\n } else {\n // An incorrect answer is NOT selected: not marked\n return undefined;\n }\n }\n };\n\n getChecked(choice) {\n if (this.state.showCorrect) {\n return choice.correct || false;\n }\n\n if (this.isSelected(choice.value)) {\n return true;\n }\n\n return this.props.choiceMode === 'radio'\n ? this.state.selectedValue === choice.value\n : this.state.selectedValues.includes(choice.value);\n }\n\n // renderHeading function was added for accessibility.\n renderHeading() {\n const { mode, choiceMode, classes } = this.props;\n\n if (mode !== 'gather') {\n return null;\n }\n\n return choiceMode === 'radio' ? (\n <h2 className={classes.srOnly}>Multiple Choice Question</h2>\n ) : (\n <h2 className={classes.srOnly}>Multiple Select Question</h2>\n );\n }\n\n render() {\n const {\n mode,\n disabled,\n className,\n choices = [],\n choiceMode,\n gridColumns,\n partLabel,\n prompt,\n onChoiceChanged,\n responseCorrect,\n teacherInstructions,\n classes,\n alwaysShowCorrect,\n animationsDisabled,\n } = this.props;\n const { showCorrect } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n\n const teacherInstructionsDiv = (\n <PreviewPrompt\n tagName=\"div\"\n className=\"prompt\"\n defaultClassName=\"teacher-instructions\"\n prompt={teacherInstructions}\n />\n );\n\n return (\n <div className={classNames(classes.main, className, 'multiple-choice')}>\n {partLabel && <h3 className={classes.partLabel}>{partLabel}</h3>}\n\n {this.renderHeading()}\n\n {teacherInstructions && (\n <div className={classes.teacherInstructions}>\n {!animationsDisabled ? (\n <Collapsible\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n {teacherInstructionsDiv}\n </Collapsible>\n ) : (\n teacherInstructionsDiv\n )}\n </div>\n )}\n\n <fieldset className={classes.fieldset}>\n <PreviewPrompt className=\"prompt\" defaultClassName=\"prompt\" prompt={prompt} tagName={'legend'} />\n\n {!alwaysShowCorrect && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n />\n )}\n\n <div\n className={classNames({\n [classes.gridLayout]: this.props.choicesLayout === 'grid',\n [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal',\n })}\n style={columnsStyle}\n >\n {choices.map((choice, index) => (\n <StyledChoice\n choicesLayout={this.props.choicesLayout}\n gridColumns={gridColumns}\n key={`choice-${index}`}\n choice={choice}\n index={index}\n choicesLength={choices.length}\n showCorrect={showCorrect}\n isEvaluateMode={isEvaluateMode}\n choiceMode={choiceMode}\n disabled={disabled}\n updateSession={onChoiceChanged}\n onChoiceChanged={this.props.choiceMode === 'radio' ? this.handleChange : this.handleChangeCheckboxes}\n hideTick={choice.hideTick}\n checked={this.getChecked(choice)}\n correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n displayKey={this.indexToSymbol(index)}\n />\n ))}\n </div>\n </fieldset>\n </div>\n );\n }\n}\n\nMultipleChoice.defaultProps = {\n session: {\n value: [],\n },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}
|
package/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": "7.12.1-next.
|
|
4
|
+
"version": "7.12.1-next.47+de41d6516",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"react-test-renderer": "^16.3.2",
|
|
22
22
|
"react-transition-group": "^2.3.1"
|
|
23
23
|
},
|
|
24
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "de41d651639fba66ed94d99a6b74579295800365",
|
|
25
25
|
"scripts": {
|
|
26
26
|
"postpublish": "../../scripts/postpublish"
|
|
27
27
|
},
|