@pie-element/multiple-choice 9.17.1-next.18 → 9.17.1-next.22

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 (5) hide show
  1. package/lib/multiple-choice.js +8 -5
  2. package/lib/multiple-choice.js.map +1 -1
  3. package/module/element.js +16 -14
  4. package/module/print.js +16 -14
  5. package/package.json +2 -2
package/lib/multiple-choice.js CHANGED
@@ -175,17 +175,20 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
175
175
  }
176
176
  });
177
177
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleGroupFocus", function (e) {
178
- var _this$firstInputRef;
179
-
180
178
  var fieldset = e.currentTarget;
181
179
  var activeEl = document.activeElement;
182
180
 
183
181
  if (fieldset.contains(activeEl) && activeEl !== fieldset) {
184
182
  return;
185
- }
183
+ } // Only focus the first input if user is tabbing forward
184
+
186
185
 
187
- if ((_this$firstInputRef = _this.firstInputRef) !== null && _this$firstInputRef !== void 0 && _this$firstInputRef.current) {
188
- _this.firstInputRef.current.focus();
186
+ if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {
187
+ var _this$firstInputRef;
188
+
189
+ if ((_this$firstInputRef = _this.firstInputRef) !== null && _this$firstInputRef !== void 0 && _this$firstInputRef.current) {
190
+ _this.firstInputRef.current.focus();
191
+ }
189
192
  }
190
193
  });
191
194
  _this.state = {
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","position","border","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","padding","minWidth","srOnly","left","top","width","height","overflow","errorText","typography","palette","error","paddingTop","MultipleChoice","props","event","target","value","checked","maxSelections","onChoiceChanged","session","length","setState","maxSelectionsErrorState","selected","selector","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","e","currentTarget","activeEl","document","activeElement","contains","firstInputRef","current","focus","alwaysShowCorrect","onToggle","bind","React","createRef","sessionValue","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","autoplayAudioEnabled","customAudioButton","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","teacherInstructionsDiv","getMultipleChoiceMinSelectionErrorMessage","t","lng","renderHeading","hidden","visible","handleGroupFocus","choicesLayout","map","selectedAnswerBackgroundColor","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","playImage","pauseImage","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 position: 'relative',\n // remove border from legend tags inside main to override the OT default styles\n '& legend': {\n border: 'none !important',\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 autoplayAudioEnabled: PropTypes.bool,\n customAudioButton: {\n playImage: PropTypes.string,\n pauseImage: PropTypes.string,\n },\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 this.firstInputRef = React.createRef();\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, selector: 'Mouse' });\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 handleGroupFocus = (e) => {\n const fieldset = e.currentTarget;\n const activeEl = document.activeElement;\n\n if (fieldset.contains(activeEl) && activeEl !== fieldset) {\n return;\n }\n\n if (this.firstInputRef?.current) {\n this.firstInputRef.current.focus();\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 autoplayAudioEnabled,\n session,\n customAudioButton,\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 const getMultipleChoiceMinSelectionErrorMessage = () => {\n if (minSelections && maxSelections) {\n return minSelections === maxSelections\n ? translator.t('translation:multipleChoice:minmaxSelections_equal', { lng: language, minSelections })\n : translator.t('translation:multipleChoice:minmaxSelections_range', {\n lng: language,\n minSelections,\n maxSelections,\n });\n }\n\n if (minSelections) {\n return translator.t('translation:multipleChoice:minSelections', { lng: language, minSelections });\n }\n\n return '';\n };\n\n return (\n <div id={'main-container'} 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\n tabIndex={0}\n className={classes.fieldset}\n onFocus={this.handleGroupFocus}\n role={choiceMode === 'radio' ? 'radiogroup' : 'group'}\n >\n <PreviewPrompt\n className=\"prompt\"\n defaultClassName=\"prompt\"\n prompt={prompt}\n tagName={'legend'}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\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 autoFocusRef={index === 0 ? this.firstInputRef : null}\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 tagName={partLabel ? `group-${partLabel}` : 'group'}\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}>{getMultipleChoiceMinSelectionErrorMessage()}</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"}
1
+ {"version":3,"sources":["../src/multiple-choice.jsx"],"names":["translator","Translator","styles","theme","main","color","text","backgroundColor","background","position","border","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","padding","minWidth","srOnly","left","top","width","height","overflow","errorText","typography","palette","error","paddingTop","MultipleChoice","props","event","target","value","checked","maxSelections","onChoiceChanged","session","length","setState","maxSelectionsErrorState","selected","selector","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","e","currentTarget","activeEl","document","activeElement","contains","relatedTarget","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","firstInputRef","current","focus","alwaysShowCorrect","onToggle","bind","React","createRef","sessionValue","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","autoplayAudioEnabled","customAudioButton","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","teacherInstructionsDiv","getMultipleChoiceMinSelectionErrorMessage","t","lng","renderHeading","hidden","visible","handleGroupFocus","choicesLayout","map","selectedAnswerBackgroundColor","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","playImage","pauseImage","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA;AAEA,IAAQA,UAAR,GAAuBC,sBAAvB,CAAQD,UAAR;;AAEA,IAAME,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,KAAK,EAAEA,gBAAMC,IAAN,EADH;AAEJC,MAAAA,eAAe,EAAEF,gBAAMG,UAAN,EAFb;AAGJ,aAAO;AACL,kCAA0B;AADrB,OAHH;AAMJC,MAAAA,QAAQ,EAAE,UANN;AAOJ;AACA,kBAAY;AACVC,QAAAA,MAAM,EAAE;AADE;AARR,KADmB;AAazBC,IAAAA,SAAS,EAAE;AACTC,MAAAA,OAAO,EAAE,OADA;AAETC,MAAAA,QAAQ,EAAE,SAFD;AAGTC,MAAAA,MAAM,EAAE,GAHC;AAITC,MAAAA,UAAU,EAAE,QAJH;AAKTC,MAAAA,aAAa,EAAEb,KAAK,CAACc,OAAN,CAAcC,IAAd,GAAqB;AAL3B,KAbc;AAoBzBC,IAAAA,mBAAmB,EAAE;AACnBC,MAAAA,YAAY,EAAEjB,KAAK,CAACc,OAAN,CAAcC,IAAd,GAAqB;AADhB,KApBI;AAuBzBG,IAAAA,gBAAgB,EAAE;AAChBT,MAAAA,OAAO,EAAE,MADO;AAEhBU,MAAAA,aAAa,EAAE,KAFC;AAGhBC,MAAAA,QAAQ,EAAE;AAHM,KAvBO;AA4BzBC,IAAAA,UAAU,EAAE;AACVZ,MAAAA,OAAO,EAAE;AADC,KA5Ba;AA+BzBa,IAAAA,QAAQ,EAAE;AACRf,MAAAA,MAAM,EAAE,KADA;AAERgB,MAAAA,OAAO,EAAE,cAFD;AAGRZ,MAAAA,MAAM,EAAE,KAHA;AAIRa,MAAAA,QAAQ,EAAE;AAJF,KA/Be;AAqCzBC,IAAAA,MAAM,EAAE;AACNnB,MAAAA,QAAQ,EAAE,UADJ;AAENoB,MAAAA,IAAI,EAAE,UAFA;AAGNC,MAAAA,GAAG,EAAE,MAHC;AAINC,MAAAA,KAAK,EAAE,KAJD;AAKNC,MAAAA,MAAM,EAAE,KALF;AAMNC,MAAAA,QAAQ,EAAE;AANJ,KArCiB;AA6CzBC,IAAAA,SAAS,EAAE;AACTrB,MAAAA,QAAQ,EAAEV,KAAK,CAACgC,UAAN,CAAiBtB,QAAjB,GAA4B,CAD7B;AAETR,MAAAA,KAAK,EAAEF,KAAK,CAACiC,OAAN,CAAcC,KAAd,CAAoBjC,IAFlB;AAGTkC,MAAAA,UAAU,EAAEnC,KAAK,CAACc,OAAN,CAAcC;AAHjB;AA7Cc,GAAZ;AAAA,CAAf;;IAoDaqB,c;;;;;AAiCX,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,qGAmBJ,UAACC,KAAD,EAAW;AACxB,0BAA2BA,KAAK,CAACC,MAAjC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,OAAf,iBAAeA,OAAf;AACA,wBAAoD,MAAKJ,KAAzD;AAAA,UAAQK,aAAR,eAAQA,aAAR;AAAA,UAAuBC,eAAvB,eAAuBA,eAAvB;AAAA,UAAwCC,OAAxC,eAAwCA,OAAxC;;AAEA,UAAIA,OAAO,CAACJ,KAAR,IAAiBI,OAAO,CAACJ,KAAR,CAAcK,MAAd,IAAwBH,aAA7C,EAA4D;AAC1D;AACA,cAAKI,QAAL,CAAc;AAAEC,UAAAA,uBAAuB,EAAEN;AAA3B,SAAd;;AAEA,YAAIA,OAAJ,EAAa;AACX;AACA;AACD;AACF;;AAEDE,MAAAA,eAAe,CAAC;AAAEH,QAAAA,KAAK,EAALA,KAAF;AAASQ,QAAAA,QAAQ,EAAEP,OAAnB;AAA4BQ,QAAAA,QAAQ,EAAE;AAAtC,OAAD,CAAf;AACD,KAlCkB;AAAA,iGAoCR,YAAM;AACf,UAAI,MAAKZ,KAAL,CAAWa,IAAX,KAAoB,UAAxB,EAAoC;AAClC,cAAKJ,QAAL,CAAc;AAAEK,UAAAA,WAAW,EAAE,CAAC,MAAKC,KAAL,CAAWD;AAA3B,SAAd,EAAwD,YAAM;AAC5D,cAAI,MAAKd,KAAL,CAAWgB,mBAAf,EAAoC;AAClC,kBAAKhB,KAAL,CAAWgB,mBAAX;AACD;AACF,SAJD;AAKD;AACF,KA5CkB;AAAA,uGA4EF,YAAiB;AAAA,UAAhBC,MAAgB,uEAAP,EAAO;AAChC,UAAMC,SAAS,GAAGD,MAAM,CAACE,OAAzB;;AACA,UAAMC,SAAS,GAAG,MAAKC,UAAL,CAAgBJ,MAAM,CAACd,KAAvB,CAAlB;;AAEA,UAAI,MAAKY,KAAL,CAAWD,WAAf,EAA4B;AAC1B,eAAOI,SAAS,GAAG,SAAH,GAAeI,SAA/B;AACD;;AAED,UAAIJ,SAAJ,EAAe;AACb,YAAIE,SAAJ,EAAe;AACb;AACA,iBAAO,SAAP;AACD,SAHD,MAGO;AACL;AACA,iBAAO,WAAP;AACD;AACF,OARD,MAQO;AACL,YAAIA,SAAJ,EAAe;AACb;AACA,iBAAO,WAAP;AACD,SAHD,MAGO;AACL;AACA,iBAAOE,SAAP;AACD;AACF;AACF,KArGkB;AAAA,yGA8HA,UAACC,CAAD,EAAO;AACxB,UAAMtC,QAAQ,GAAGsC,CAAC,CAACC,aAAnB;AACA,UAAMC,QAAQ,GAAGC,QAAQ,CAACC,aAA1B;;AAEA,UAAI1C,QAAQ,CAAC2C,QAAT,CAAkBH,QAAlB,KAA+BA,QAAQ,KAAKxC,QAAhD,EAA0D;AACxD;AACD,OANuB,CAQxB;;;AACA,UAAI,CAACsC,CAAC,CAACM,aAAH,IAAoB5C,QAAQ,CAAC6C,uBAAT,CAAiCP,CAAC,CAACM,aAAnC,IAAoDE,IAAI,CAACC,2BAAjF,EAA8G;AAAA;;AAC5G,mCAAI,MAAKC,aAAT,gDAAI,oBAAoBC,OAAxB,EAAiC;AAC/B,gBAAKD,aAAL,CAAmBC,OAAnB,CAA2BC,KAA3B;AACD;AACF;AACF,KA5IkB;AAGjB,UAAKpB,KAAL,GAAa;AACXD,MAAAA,WAAW,EAAE,MAAKd,KAAL,CAAWoC,iBAAX,IAAgC,KADlC;AAEX1B,MAAAA,uBAAuB,EAAE;AAFd,KAAb;AAKA,UAAK2B,QAAL,GAAgB,MAAKA,QAAL,CAAcC,IAAd,gDAAhB;AACA,UAAKL,aAAL,gBAAqBM,kBAAMC,SAAN,EAArB;AATiB;AAUlB;;;;WAED,oBAAWrC,KAAX,EAAkB;AAChB,UAAMsC,YAAY,GAAG,KAAKzC,KAAL,CAAWO,OAAX,IAAsB,KAAKP,KAAL,CAAWO,OAAX,CAAmBJ,KAA9D;AAEA,aAAOsC,YAAY,IAAIA,YAAY,CAACC,OAA7B,IAAwCD,YAAY,CAACC,OAAb,CAAqBvC,KAArB,KAA+B,CAA9E;AACD,K,CAED;;;;WA4BA,0CAAiCwC,SAAjC,EAA4C;AAAA;;AAC1C,UAAI,CAACA,SAAS,CAACC,eAAX,IAA8B,KAAK7B,KAAL,CAAWD,WAAX,KAA2B,KAA7D,EAAoE;AAClE,aAAKL,QAAL,CAAc;AAAEK,UAAAA,WAAW,EAAE;AAAf,SAAd,EAAsC,YAAM;AAC1C,cAAI,MAAI,CAACd,KAAL,CAAWgB,mBAAf,EAAoC;AAClC,YAAA,MAAI,CAAChB,KAAL,CAAWgB,mBAAX;AACD;AACF,SAJD;AAKD;;AAED,UAAI2B,SAAS,CAACP,iBAAV,IAA+B,KAAKrB,KAAL,CAAWD,WAAX,KAA2B,IAA9D,EAAoE;AAClE,aAAKL,QAAL,CAAc;AAAEK,UAAAA,WAAW,EAAE;AAAf,SAAd,EAAqC,YAAM;AACzC,cAAI,MAAI,CAACd,KAAL,CAAWgB,mBAAf,EAAoC;AAClC,YAAA,MAAI,CAAChB,KAAL,CAAWgB,mBAAX;AACD;AACF,SAJD;AAKD;AACF;;;WAED,uBAAc6B,KAAd,EAAqB;AACnB,UAAI,KAAK7C,KAAL,CAAW8C,OAAX,KAAuB,SAA3B,EAAsC;AACpC,yBAAUD,KAAK,GAAG,CAAlB;AACD;;AAED,UAAI,KAAK7C,KAAL,CAAW8C,OAAX,KAAuB,SAA3B,EAAsC;AACpC,eAAOC,MAAM,CAACC,YAAP,CAAoB,KAAKH,KAAzB,EAAgCI,WAAhC,EAAP;AACD;;AAED,aAAO,EAAP;AACD;;;WA6BD,oBAAWhC,MAAX,EAAmB;AACjB,UAAI,KAAKF,KAAL,CAAWD,WAAf,EAA4B;AAC1B,eAAOG,MAAM,CAACE,OAAP,IAAkB,KAAzB;AACD;;AAED,aAAO,KAAKE,UAAL,CAAgBJ,MAAM,CAACd,KAAvB,CAAP;AACD,K,CAED;;;;WACA,yBAAgB;AACd,yBAAsC,KAAKH,KAA3C;AAAA,UAAQa,IAAR,gBAAQA,IAAR;AAAA,UAAcqC,UAAd,gBAAcA,UAAd;AAAA,UAA0BC,OAA1B,gBAA0BA,OAA1B;;AAEA,UAAItC,IAAI,KAAK,QAAb,EAAuB;AACrB,eAAO,IAAP;AACD;;AAED,aAAOqC,UAAU,KAAK,OAAf,gBACL;AAAI,QAAA,SAAS,EAAEC,OAAO,CAAC/D;AAAvB,oCADK,gBAGL;AAAI,QAAA,SAAS,EAAE+D,OAAO,CAAC/D;AAAvB,oCAHF;AAKD;;;WAkBD,kBAAS;AAAA;AAAA;;AACP,yBAqBI,KAAKY,KArBT;AAAA,UACEa,IADF,gBACEA,IADF;AAAA,UAEEuC,QAFF,gBAEEA,QAFF;AAAA,UAGEC,SAHF,gBAGEA,SAHF;AAAA,8CAIEC,OAJF;AAAA,UAIEA,OAJF,qCAIY,EAJZ;AAAA,UAKEJ,UALF,gBAKEA,UALF;AAAA,UAMEK,WANF,gBAMEA,WANF;AAAA,UAOEpF,SAPF,gBAOEA,SAPF;AAAA,UAQEqF,MARF,gBAQEA,MARF;AAAA,UASEC,eATF,gBASEA,eATF;AAAA,UAUE9E,mBAVF,gBAUEA,mBAVF;AAAA,UAWEwE,OAXF,gBAWEA,OAXF;AAAA,UAYEf,iBAZF,gBAYEA,iBAZF;AAAA,UAaEsB,kBAbF,gBAaEA,kBAbF;AAAA,UAcEC,QAdF,gBAcEA,QAdF;AAAA,UAeEC,sBAfF,gBAeEA,sBAfF;AAAA,UAgBEC,aAhBF,gBAgBEA,aAhBF;AAAA,UAiBExD,aAjBF,gBAiBEA,aAjBF;AAAA,UAkBEyD,oBAlBF,gBAkBEA,oBAlBF;AAAA,UAmBEvD,OAnBF,gBAmBEA,OAnBF;AAAA,UAoBEwD,iBApBF,gBAoBEA,iBApBF;AAsBA,wBAAiD,KAAKhD,KAAtD;AAAA,UAAQD,WAAR,eAAQA,WAAR;AAAA,UAAqBJ,uBAArB,eAAqBA,uBAArB;AACA,UAAMsD,cAAc,GAAGnD,IAAI,KAAK,UAAhC;AACA,UAAMoD,uBAAuB,GAAGD,cAAc,IAAI,CAACP,eAAnD;AACA,UAAMS,YAAY,GAAGX,WAAW,GAAG,CAAd,GAAkB;AAAEY,QAAAA,mBAAmB,mBAAYZ,WAAZ;AAArB,OAAlB,GAA2EjC,SAAhG;AACA,UAAM8C,UAAU,GAAI7D,OAAO,CAACJ,KAAR,IAAiBI,OAAO,CAACJ,KAAR,CAAcK,MAAhC,IAA2C,CAA9D;;AAEA,UAAM6D,sBAAsB,gBAC1B,gCAAC,uBAAD;AACE,QAAA,OAAO,EAAC,KADV;AAEE,QAAA,SAAS,EAAC,QAFZ;AAGE,QAAA,gBAAgB,EAAC,sBAHnB;AAIE,QAAA,MAAM,EAAE1F;AAJV,QADF;;AASA,UAAM2F,yCAAyC,GAAG,SAA5CA,yCAA4C,GAAM;AACtD,YAAIT,aAAa,IAAIxD,aAArB,EAAoC;AAClC,iBAAOwD,aAAa,KAAKxD,aAAlB,GACH7C,UAAU,CAAC+G,CAAX,CAAa,mDAAb,EAAkE;AAAEC,YAAAA,GAAG,EAAEb,QAAP;AAAiBE,YAAAA,aAAa,EAAbA;AAAjB,WAAlE,CADG,GAEHrG,UAAU,CAAC+G,CAAX,CAAa,mDAAb,EAAkE;AAChEC,YAAAA,GAAG,EAAEb,QAD2D;AAEhEE,YAAAA,aAAa,EAAbA,aAFgE;AAGhExD,YAAAA,aAAa,EAAbA;AAHgE,WAAlE,CAFJ;AAOD;;AAED,YAAIwD,aAAJ,EAAmB;AACjB,iBAAOrG,UAAU,CAAC+G,CAAX,CAAa,0CAAb,EAAyD;AAAEC,YAAAA,GAAG,EAAEb,QAAP;AAAiBE,YAAAA,aAAa,EAAbA;AAAjB,WAAzD,CAAP;AACD;;AAED,eAAO,EAAP;AACD,OAhBD;;AAkBA,0BACE;AAAK,QAAA,EAAE,EAAE,gBAAT;AAA2B,QAAA,SAAS,EAAE,4BAAWV,OAAO,CAACvF,IAAnB,EAAyByF,SAAzB,EAAoC,iBAApC;AAAtC,SACGlF,SAAS,iBAAI;AAAI,QAAA,SAAS,EAAEgF,OAAO,CAAChF;AAAvB,SAAmCA,SAAnC,CADhB,EAGG,KAAKsG,aAAL,EAHH,EAKG9F,mBAAmB,iBAClB;AAAK,QAAA,SAAS,EAAEwE,OAAO,CAACxE;AAAxB,SACG,CAAC+E,kBAAD,gBACC,gCAAC,qBAAD;AACE,QAAA,MAAM,EAAE;AACNgB,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AADV,SAMGN,sBANH,CADD,GAUCA,sBAXJ,CANJ,eAsBE;AACE,QAAA,QAAQ,EAAE,CADZ;AAEE,QAAA,SAAS,EAAElB,OAAO,CAAClE,QAFrB;AAGE,QAAA,OAAO,EAAE,KAAK2F,gBAHhB;AAIE,QAAA,IAAI,EAAE1B,UAAU,KAAK,OAAf,GAAyB,YAAzB,GAAwC;AAJhD,sBAME,gCAAC,uBAAD;AACE,QAAA,SAAS,EAAC,QADZ;AAEE,QAAA,gBAAgB,EAAC,QAFnB;AAGE,QAAA,MAAM,EAAEM,MAHV;AAIE,QAAA,OAAO,EAAE,QAJX;AAKE,QAAA,oBAAoB,EAAEM,oBALxB;AAME,QAAA,iBAAiB,EAAEC;AANrB,QANF,EAeG,CAAC3B,iBAAD,iBACC,gCAAC,wCAAD;AACE,QAAA,IAAI,EAAE6B,uBADR;AAEE,QAAA,OAAO,EAAEnD,WAFX;AAGE,QAAA,QAAQ,EAAE,KAAKuB,QAAL,CAAcC,IAAd,CAAmB,IAAnB,CAHZ;AAIE,QAAA,QAAQ,EAAEqB;AAJZ,QAhBJ,eAwBE;AACE,QAAA,SAAS,EAAE,6FACRR,OAAO,CAACnE,UADA,EACa,KAAKgB,KAAL,CAAW6E,aAAX,KAA6B,MAD1C,iDAER1B,OAAO,CAACtE,gBAFA,EAEmB,KAAKmB,KAAL,CAAW6E,aAAX,KAA6B,YAFhD,gBADb;AAKE,QAAA,KAAK,EAAEX;AALT,SAOGZ,OAAO,CAACwB,GAAR,CAAY,UAAC7D,MAAD,EAAS4B,KAAT;AAAA,4BACX,gCAAC,kBAAD;AACE,UAAA,YAAY,EAAEA,KAAK,KAAK,CAAV,GAAc,MAAI,CAACZ,aAAnB,GAAmC,IADnD;AAEE,UAAA,aAAa,EAAE,MAAI,CAACjC,KAAL,CAAW6E,aAF5B;AAGE,UAAA,6BAA6B,EAAE,MAAI,CAAC7E,KAAL,CAAW+E,6BAH5C;AAIE,UAAA,WAAW,EAAExB,WAJf;AAKE,UAAA,GAAG,mBAAYV,KAAZ,CALL;AAME,UAAA,MAAM,EAAE5B,MANV;AAOE,UAAA,KAAK,EAAE4B,KAPT;AAQE,UAAA,aAAa,EAAES,OAAO,CAAC9C,MARzB;AASE,UAAA,WAAW,EAAEM,WATf;AAUE,UAAA,cAAc,EAAEkD,cAVlB;AAWE,UAAA,UAAU,EAAEd,UAXd;AAYE,UAAA,QAAQ,EAAEE,QAZZ;AAaE,UAAA,OAAO,EAAEjF,SAAS,mBAAYA,SAAZ,IAA0B,OAb9C;AAcE,UAAA,eAAe,EAAE,MAAI,CAAC6G,YAdxB;AAeE,UAAA,QAAQ,EAAE/D,MAAM,CAACgE,QAfnB;AAgBE,UAAA,OAAO,EAAE,MAAI,CAACC,UAAL,CAAgBjE,MAAhB,CAhBX;AAiBE,UAAA,WAAW,EAAE+C,cAAc,GAAG,MAAI,CAACmB,cAAL,CAAoBlE,MAApB,CAAH,GAAiCK,SAjB9D;AAkBE,UAAA,UAAU,EAAE,MAAI,CAAC8D,aAAL,CAAmBvC,KAAnB,CAlBd;AAmBE,UAAA,sBAAsB,EAAEe;AAnB1B,UADW;AAAA,OAAZ,CAPH,CAxBF,CAtBF,EA+EGV,UAAU,KAAK,UAAf,IAA6BkB,UAAU,GAAGP,aAA1C,iBACC;AAAK,QAAA,SAAS,EAAEV,OAAO,CAACzD;AAAxB,SAAoC4E,yCAAyC,EAA7E,CAhFJ,EAkFGpB,UAAU,KAAK,UAAf,IAA6BxC,uBAA7B,iBACC;AAAK,QAAA,SAAS,EAAEyC,OAAO,CAACzD;AAAxB,SACGlC,UAAU,CAAC+G,CAAX,oDAAyDlE,aAAa,KAAK,CAAlB,GAAsB,KAAtB,GAA8B,OAAvF,GAAkG;AACjGmE,QAAAA,GAAG,EAAEb,QAD4F;AAEjGtD,QAAAA,aAAa,EAAbA;AAFiG,OAAlG,CADH,CAnFJ,CADF;AA6FD;;;EApUiCkC,kBAAM8C,S;;;iCAA7BtF,c,eACQ;AACjBsD,EAAAA,SAAS,EAAEiC,sBAAUC,MADJ;AAEjB1E,EAAAA,IAAI,EAAEyE,sBAAUE,KAAV,CAAgB,CAAC,QAAD,EAAW,MAAX,EAAmB,UAAnB,CAAhB,CAFW;AAGjBtC,EAAAA,UAAU,EAAEoC,sBAAUE,KAAV,CAAgB,CAAC,OAAD,EAAU,UAAV,CAAhB,CAHK;AAIjB1C,EAAAA,OAAO,EAAEwC,sBAAUE,KAAV,CAAgB,CAAC,SAAD,EAAY,SAAZ,EAAuB,MAAvB,CAAhB,CAJQ;AAKjBlC,EAAAA,OAAO,EAAEgC,sBAAUG,KALF;AAMjBtH,EAAAA,SAAS,EAAEmH,sBAAUC,MANJ;AAOjB/B,EAAAA,MAAM,EAAE8B,sBAAUC,MAPD;AAQjB5G,EAAAA,mBAAmB,EAAE2G,sBAAUC,MARd;AASjBhF,EAAAA,OAAO,EAAE+E,sBAAUI,MATF;AAUjBtC,EAAAA,QAAQ,EAAEkC,sBAAUK,IAVH;AAWjBrF,EAAAA,eAAe,EAAEgF,sBAAUM,IAXV;AAYjBnC,EAAAA,eAAe,EAAE6B,sBAAUK,IAZV;AAajBxC,EAAAA,OAAO,EAAEmC,sBAAUI,MAAV,CAAiBG,UAbT;AAcjBjD,EAAAA,eAAe,EAAE0C,sBAAUG,KAdV;AAejBZ,EAAAA,aAAa,EAAES,sBAAUE,KAAV,CAAgB,CAAC,UAAD,EAAa,MAAb,EAAqB,YAArB,CAAhB,CAfE;AAgBjBjC,EAAAA,WAAW,EAAE+B,sBAAUC,MAhBN;AAiBjBnD,EAAAA,iBAAiB,EAAEkD,sBAAUK,IAjBZ;AAkBjBjC,EAAAA,kBAAkB,EAAE4B,sBAAUK,IAlBb;AAmBjBhC,EAAAA,QAAQ,EAAE2B,sBAAUC,MAnBH;AAoBjBR,EAAAA,6BAA6B,EAAEO,sBAAUC,MApBxB;AAqBjBvE,EAAAA,mBAAmB,EAAEsE,sBAAUM,IArBd;AAsBjBhC,EAAAA,sBAAsB,EAAE0B,sBAAUK,IAtBjB;AAuBjB9B,EAAAA,aAAa,EAAEyB,sBAAUQ,MAvBR;AAwBjBzF,EAAAA,aAAa,EAAEiF,sBAAUQ,MAxBR;AAyBjBhC,EAAAA,oBAAoB,EAAEwB,sBAAUK,IAzBf;AA0BjB5B,EAAAA,iBAAiB,EAAE;AACjBgC,IAAAA,SAAS,EAAET,sBAAUC,MADJ;AAEjBS,IAAAA,UAAU,EAAEV,sBAAUC;AAFL;AA1BF,C;AAsUrBxF,cAAc,CAACkG,YAAf,GAA8B;AAC5B1F,EAAAA,OAAO,EAAE;AACPJ,IAAAA,KAAK,EAAE;AADA;AADmB,CAA9B;;eAMe,wBAAWzC,MAAX,EAAmBqC,cAAnB,C","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 position: 'relative',\n // remove border from legend tags inside main to override the OT default styles\n '& legend': {\n border: 'none !important',\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 autoplayAudioEnabled: PropTypes.bool,\n customAudioButton: {\n playImage: PropTypes.string,\n pauseImage: PropTypes.string,\n },\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 this.firstInputRef = React.createRef();\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, selector: 'Mouse' });\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 handleGroupFocus = (e) => {\n const fieldset = e.currentTarget;\n const activeEl = document.activeElement;\n\n if (fieldset.contains(activeEl) && activeEl !== fieldset) {\n return;\n }\n\n // Only focus the first input if user is tabbing forward\n if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {\n if (this.firstInputRef?.current) {\n this.firstInputRef.current.focus();\n }\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 autoplayAudioEnabled,\n session,\n customAudioButton,\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 const getMultipleChoiceMinSelectionErrorMessage = () => {\n if (minSelections && maxSelections) {\n return minSelections === maxSelections\n ? translator.t('translation:multipleChoice:minmaxSelections_equal', { lng: language, minSelections })\n : translator.t('translation:multipleChoice:minmaxSelections_range', {\n lng: language,\n minSelections,\n maxSelections,\n });\n }\n\n if (minSelections) {\n return translator.t('translation:multipleChoice:minSelections', { lng: language, minSelections });\n }\n\n return '';\n };\n\n return (\n <div id={'main-container'} 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\n tabIndex={0}\n className={classes.fieldset}\n onFocus={this.handleGroupFocus}\n role={choiceMode === 'radio' ? 'radiogroup' : 'group'}\n >\n <PreviewPrompt\n className=\"prompt\"\n defaultClassName=\"prompt\"\n prompt={prompt}\n tagName={'legend'}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\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 autoFocusRef={index === 0 ? this.firstInputRef : null}\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 tagName={partLabel ? `group-${partLabel}` : 'group'}\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}>{getMultipleChoiceMinSelectionErrorMessage()}</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
@@ -12887,8 +12887,10 @@ class MultipleChoice$1 extends React$2.Component {
12887
12887
  if (fieldset.contains(activeEl) && activeEl !== fieldset) {
12888
12888
  return;
12889
12889
  }
12890
- if (_optionalChain$1([this, 'access', _3 => _3.firstInputRef, 'optionalAccess', _4 => _4.current])) {
12891
- this.firstInputRef.current.focus();
12890
+ if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {
12891
+ if (_optionalChain$1([this, 'access', _3 => _3.firstInputRef, 'optionalAccess', _4 => _4.current])) {
12892
+ this.firstInputRef.current.focus();
12893
+ }
12892
12894
  }
12893
12895
  };
12894
12896
  }
@@ -12909,7 +12911,7 @@ class MultipleChoice$1 extends React$2.Component {
12909
12911
  __self: this,
12910
12912
  __source: {
12911
12913
  fileName: _jsxFileName$1,
12912
- lineNumber: 269
12914
+ lineNumber: 272
12913
12915
  }
12914
12916
  });
12915
12917
  const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12937,21 +12939,21 @@ class MultipleChoice$1 extends React$2.Component {
12937
12939
  __self: this,
12938
12940
  __source: {
12939
12941
  fileName: _jsxFileName$1,
12940
- lineNumber: 296
12942
+ lineNumber: 299
12941
12943
  }
12942
12944
  }, partLabel && React$2.createElement('h3', {
12943
12945
  className: classes.partLabel,
12944
12946
  __self: this,
12945
12947
  __source: {
12946
12948
  fileName: _jsxFileName$1,
12947
- lineNumber: 297
12949
+ lineNumber: 300
12948
12950
  }
12949
12951
  }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
12950
12952
  className: classes.teacherInstructions,
12951
12953
  __self: this,
12952
12954
  __source: {
12953
12955
  fileName: _jsxFileName$1,
12954
- lineNumber: 302
12956
+ lineNumber: 305
12955
12957
  }
12956
12958
  }, !animationsDisabled ? React$2.createElement(Collapsible, {
12957
12959
  labels: {
@@ -12961,7 +12963,7 @@ class MultipleChoice$1 extends React$2.Component {
12961
12963
  __self: this,
12962
12964
  __source: {
12963
12965
  fileName: _jsxFileName$1,
12964
- lineNumber: 304
12966
+ lineNumber: 307
12965
12967
  }
12966
12968
  }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
12967
12969
  tabIndex: 0,
@@ -12971,7 +12973,7 @@ class MultipleChoice$1 extends React$2.Component {
12971
12973
  __self: this,
12972
12974
  __source: {
12973
12975
  fileName: _jsxFileName$1,
12974
- lineNumber: 318
12976
+ lineNumber: 321
12975
12977
  }
12976
12978
  }, React$2.createElement(PreviewPrompt, {
12977
12979
  className: "prompt",
@@ -12983,7 +12985,7 @@ class MultipleChoice$1 extends React$2.Component {
12983
12985
  __self: this,
12984
12986
  __source: {
12985
12987
  fileName: _jsxFileName$1,
12986
- lineNumber: 324
12988
+ lineNumber: 327
12987
12989
  }
12988
12990
  }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
12989
12991
  show: showCorrectAnswerToggle,
@@ -12993,7 +12995,7 @@ class MultipleChoice$1 extends React$2.Component {
12993
12995
  __self: this,
12994
12996
  __source: {
12995
12997
  fileName: _jsxFileName$1,
12996
- lineNumber: 334
12998
+ lineNumber: 337
12997
12999
  }
12998
13000
  }), React$2.createElement('div', {
12999
13001
  className: classNames({
@@ -13004,7 +13006,7 @@ class MultipleChoice$1 extends React$2.Component {
13004
13006
  __self: this,
13005
13007
  __source: {
13006
13008
  fileName: _jsxFileName$1,
13007
- lineNumber: 342
13009
+ lineNumber: 345
13008
13010
  }
13009
13011
  }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
13010
13012
  autoFocusRef: index === 0 ? this.firstInputRef : null,
@@ -13029,21 +13031,21 @@ class MultipleChoice$1 extends React$2.Component {
13029
13031
  __self: this,
13030
13032
  __source: {
13031
13033
  fileName: _jsxFileName$1,
13032
- lineNumber: 350
13034
+ lineNumber: 353
13033
13035
  }
13034
13036
  })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
13035
13037
  className: classes.errorText,
13036
13038
  __self: this,
13037
13039
  __source: {
13038
13040
  fileName: _jsxFileName$1,
13039
- lineNumber: 376
13041
+ lineNumber: 379
13040
13042
  }
13041
13043
  }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
13042
13044
  className: classes.errorText,
13043
13045
  __self: this,
13044
13046
  __source: {
13045
13047
  fileName: _jsxFileName$1,
13046
- lineNumber: 379
13048
+ lineNumber: 382
13047
13049
  }
13048
13050
  }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
13049
13051
  lng: language,
package/module/print.js CHANGED
@@ -12887,8 +12887,10 @@ class MultipleChoice extends React$2.Component {
12887
12887
  if (fieldset.contains(activeEl) && activeEl !== fieldset) {
12888
12888
  return;
12889
12889
  }
12890
- if (_optionalChain([this, 'access', _3 => _3.firstInputRef, 'optionalAccess', _4 => _4.current])) {
12891
- this.firstInputRef.current.focus();
12890
+ if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {
12891
+ if (_optionalChain([this, 'access', _3 => _3.firstInputRef, 'optionalAccess', _4 => _4.current])) {
12892
+ this.firstInputRef.current.focus();
12893
+ }
12892
12894
  }
12893
12895
  };
12894
12896
  }
@@ -12909,7 +12911,7 @@ class MultipleChoice extends React$2.Component {
12909
12911
  __self: this,
12910
12912
  __source: {
12911
12913
  fileName: _jsxFileName$1,
12912
- lineNumber: 269
12914
+ lineNumber: 272
12913
12915
  }
12914
12916
  });
12915
12917
  const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12937,21 +12939,21 @@ class MultipleChoice extends React$2.Component {
12937
12939
  __self: this,
12938
12940
  __source: {
12939
12941
  fileName: _jsxFileName$1,
12940
- lineNumber: 296
12942
+ lineNumber: 299
12941
12943
  }
12942
12944
  }, partLabel && React$2.createElement('h3', {
12943
12945
  className: classes.partLabel,
12944
12946
  __self: this,
12945
12947
  __source: {
12946
12948
  fileName: _jsxFileName$1,
12947
- lineNumber: 297
12949
+ lineNumber: 300
12948
12950
  }
12949
12951
  }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
12950
12952
  className: classes.teacherInstructions,
12951
12953
  __self: this,
12952
12954
  __source: {
12953
12955
  fileName: _jsxFileName$1,
12954
- lineNumber: 302
12956
+ lineNumber: 305
12955
12957
  }
12956
12958
  }, !animationsDisabled ? React$2.createElement(Collapsible, {
12957
12959
  labels: {
@@ -12961,7 +12963,7 @@ class MultipleChoice extends React$2.Component {
12961
12963
  __self: this,
12962
12964
  __source: {
12963
12965
  fileName: _jsxFileName$1,
12964
- lineNumber: 304
12966
+ lineNumber: 307
12965
12967
  }
12966
12968
  }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
12967
12969
  tabIndex: 0,
@@ -12971,7 +12973,7 @@ class MultipleChoice extends React$2.Component {
12971
12973
  __self: this,
12972
12974
  __source: {
12973
12975
  fileName: _jsxFileName$1,
12974
- lineNumber: 318
12976
+ lineNumber: 321
12975
12977
  }
12976
12978
  }, React$2.createElement(PreviewPrompt, {
12977
12979
  className: "prompt",
@@ -12983,7 +12985,7 @@ class MultipleChoice extends React$2.Component {
12983
12985
  __self: this,
12984
12986
  __source: {
12985
12987
  fileName: _jsxFileName$1,
12986
- lineNumber: 324
12988
+ lineNumber: 327
12987
12989
  }
12988
12990
  }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
12989
12991
  show: showCorrectAnswerToggle,
@@ -12993,7 +12995,7 @@ class MultipleChoice extends React$2.Component {
12993
12995
  __self: this,
12994
12996
  __source: {
12995
12997
  fileName: _jsxFileName$1,
12996
- lineNumber: 334
12998
+ lineNumber: 337
12997
12999
  }
12998
13000
  }), React$2.createElement('div', {
12999
13001
  className: classNames({
@@ -13004,7 +13006,7 @@ class MultipleChoice extends React$2.Component {
13004
13006
  __self: this,
13005
13007
  __source: {
13006
13008
  fileName: _jsxFileName$1,
13007
- lineNumber: 342
13009
+ lineNumber: 345
13008
13010
  }
13009
13011
  }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
13010
13012
  autoFocusRef: index === 0 ? this.firstInputRef : null,
@@ -13029,21 +13031,21 @@ class MultipleChoice extends React$2.Component {
13029
13031
  __self: this,
13030
13032
  __source: {
13031
13033
  fileName: _jsxFileName$1,
13032
- lineNumber: 350
13034
+ lineNumber: 353
13033
13035
  }
13034
13036
  })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
13035
13037
  className: classes.errorText,
13036
13038
  __self: this,
13037
13039
  __source: {
13038
13040
  fileName: _jsxFileName$1,
13039
- lineNumber: 376
13041
+ lineNumber: 379
13040
13042
  }
13041
13043
  }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
13042
13044
  className: classes.errorText,
13043
13045
  __self: this,
13044
13046
  __source: {
13045
13047
  fileName: _jsxFileName$1,
13046
- lineNumber: 379
13048
+ lineNumber: 382
13047
13049
  }
13048
13050
  }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
13049
13051
  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.17.1-next.18+89b2264a0",
4
+ "version": "9.17.1-next.22+dd310cb23",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -19,7 +19,7 @@
19
19
  "react-test-renderer": "^16.3.2",
20
20
  "react-transition-group": "^2.3.1"
21
21
  },
22
- "gitHead": "89b2264a008f74f49176e93af0ece000efa6c578",
22
+ "gitHead": "dd310cb23adc801808c806374c1cec73d6335d80",
23
23
  "scripts": {
24
24
  "postpublish": "../../scripts/postpublish"
25
25
  },