@pie-element/multiple-choice 9.12.1-next.0 → 9.12.1-next.3

package/lib/index.js

@@ -229,7 +229,7 @@ var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
 
             var info = _this2._createAudioInfoToast();
 
-            var container = _this2.querySelector('[class*="main"]');
+            var container = _this2.querySelector('#main-container');
 
             var enableAudio = function enableAudio() {
               if (_this2.querySelector('#play-audio-info')) {

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","audioComplete","autoplayAudioEnabled","completeAudioEnabled","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_boundHandleKeyDown","handleKeyDown","bind","_keyboardEventsEnabled","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","keyboardEventsEnabled","enableKeyboardEvents","leading","trailing","_dispatchResponseChanged","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","_dispatchModelSet","ModelSetEvent","undefined","language","lang","slice","s","data","info","document","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","img","src","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","isInsidePrompt","closest","_createAudioInfoToast","container","enableAudio","play","audioStartTime","Date","getTime","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","audioEndTime","disconnect","observe","childList","subtree","window","event","keyToIndex","key","numOffset","letterOffset","test","charCodeAt","choiceIndex","choices","currentValue","choiceId","newValue","selected","includes","selector","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model, audioComplete) => {\n  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};\n\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    return false;\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const { choiceMode, minSelections = 1, maxSelections } = model || {};\n  const selections = session.value.length || 0;\n\n  if (choiceMode === 'radio') {\n    return !!selections;\n  }\n\n  if (selections < minSelections || selections > maxSelections) {\n    return false;\n  }\n\n  return true;\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this.audioComplete = false;\n    this._boundHandleKeyDown = this.handleKeyDown.bind(this);\n    this._keyboardEventsEnabled = false;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n          this.setLangAttribute();\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n\n          if (this._model.keyboardEventsEnabled === true && !this._keyboardEventsEnabled) {\n            this.enableKeyboardEvents();\n          }\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      this.dispatchEvent(\n        new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)),\n      );\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new ModelSetEvent(\n            this.tagName.toLowerCase(),\n            isComplete(this._session, this._model),\n            this._model !== undefined,\n          ),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width:'100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000'\n    });\n\n    const img = document.createElement('img');\n    img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._rerender();\n\n    if (this._model && !this._model.autoplayAudioEnabled) {\n      return;\n    }\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('[class*=\"main\"]');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n              container.removeChild(info);\n\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            const info = this.querySelector('#play-audio-info');\n\n            if (info) {\n              this.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });\n            this.audioComplete = true;\n            this._dispatchResponseChanged();\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  enableKeyboardEvents() {\n    if (!this._keyboardEventsEnabled) {\n      window.addEventListener('keydown', this._boundHandleKeyDown);\n      this._keyboardEventsEnabled = true;\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._keyboardEventsEnabled) {\n      window.removeEventListener('keydown', this._boundHandleKeyDown);\n      this._keyboardEventsEnabled = false;\n    }\n  }\n\n  /**\n   * Handles global keyboard events for selecting or toggling multiple-choice answers.\n   * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.\n   * Ensures valid key presses toggle or select the appropriate choice based on the model.\n   */\n  handleKeyDown(event) {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const keyToIndex = (key) => {\n      const numOffset = key >= '1' && key <= '9' ? key - '1' : key === '0' ? 9 : -1;\n      const letterOffset = /^[a-jA-J]$/.test(key) ? key.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) : -1;\n      return numOffset >= 0 ? numOffset : letterOffset;\n    };\n\n    const choiceIndex = keyToIndex(event.key);\n\n    if (choiceIndex === undefined || choiceIndex >= this._model.choices.length) {\n      return;\n    }\n\n    const currentValue = this._session.value || [];\n    const choiceId = this._model.choices[choiceIndex].value;\n\n    const newValue = {\n      value: choiceId,\n      selected: !currentValue.includes(choiceId),\n      selector: 'Keyboard',\n    };\n\n    this._onChange(newValue);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","audioComplete","autoplayAudioEnabled","completeAudioEnabled","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_boundHandleKeyDown","handleKeyDown","bind","_keyboardEventsEnabled","_rerender","element","React","createElement","Main","onChoiceChanged","_onChange","onShowCorrectToggle","setAttribute","setLangAttribute","ReactDOM","render","keyboardEventsEnabled","enableKeyboardEvents","leading","trailing","_dispatchResponseChanged","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","_dispatchModelSet","ModelSetEvent","undefined","language","lang","slice","s","data","info","document","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","img","src","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","isInsidePrompt","closest","_createAudioInfoToast","container","enableAudio","play","audioStartTime","Date","getTime","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","audioEndTime","disconnect","observe","childList","subtree","window","event","keyToIndex","key","numOffset","letterOffset","test","charCodeAt","choiceIndex","choices","currentValue","choiceId","newValue","selected","includes","selector","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model, audioComplete) => {\n  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};\n\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    return false;\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const { choiceMode, minSelections = 1, maxSelections } = model || {};\n  const selections = session.value.length || 0;\n\n  if (choiceMode === 'radio') {\n    return !!selections;\n  }\n\n  if (selections < minSelections || selections > maxSelections) {\n    return false;\n  }\n\n  return true;\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this.audioComplete = false;\n    this._boundHandleKeyDown = this.handleKeyDown.bind(this);\n    this._keyboardEventsEnabled = false;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n          this.setLangAttribute();\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n\n          if (this._model.keyboardEventsEnabled === true && !this._keyboardEventsEnabled) {\n            this.enableKeyboardEvents();\n          }\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      this.dispatchEvent(\n        new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)),\n      );\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new ModelSetEvent(\n            this.tagName.toLowerCase(),\n            isComplete(this._session, this._model),\n            this._model !== undefined,\n          ),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  onShowCorrectToggle() {\n    renderMath(this);\n  }\n\n  setLangAttribute() {\n    const language = this._model && typeof this._model.language ? this._model.language : '';\n    const lang = language ? language.slice(0, 2) : 'en';\n    this.setAttribute('lang', lang);\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width:'100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000'\n    });\n\n    const img = document.createElement('img');\n    img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._rerender();\n\n    if (this._model && !this._model.autoplayAudioEnabled) {\n      return;\n    }\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n              container.removeChild(info);\n\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            const info = this.querySelector('#play-audio-info');\n\n            if (info) {\n              this.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });\n            this.audioComplete = true;\n            this._dispatchResponseChanged();\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  enableKeyboardEvents() {\n    if (!this._keyboardEventsEnabled) {\n      window.addEventListener('keydown', this._boundHandleKeyDown);\n      this._keyboardEventsEnabled = true;\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._keyboardEventsEnabled) {\n      window.removeEventListener('keydown', this._boundHandleKeyDown);\n      this._keyboardEventsEnabled = false;\n    }\n  }\n\n  /**\n   * Handles global keyboard events for selecting or toggling multiple-choice answers.\n   * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.\n   * Ensures valid key presses toggle or select the appropriate choice based on the model.\n   */\n  handleKeyDown(event) {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const keyToIndex = (key) => {\n      const numOffset = key >= '1' && key <= '9' ? key - '1' : key === '0' ? 9 : -1;\n      const letterOffset = /^[a-jA-J]$/.test(key) ? key.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) : -1;\n      return numOffset >= 0 ? numOffset : letterOffset;\n    };\n\n    const choiceIndex = keyToIndex(event.key);\n\n    if (choiceIndex === undefined || choiceIndex >= this._model.choices.length) {\n      return;\n    }\n\n    const currentValue = this._session.value || [];\n    const choiceId = this._model.choices[choiceIndex].value;\n\n    const newValue = {\n      value: choiceId,\n      selected: !currentValue.includes(choiceId),\n      selector: 'Keyboard',\n    };\n\n    this._onChange(newValue);\n  }\n}\n"],"file":"index.js"}

package/lib/multiple-choice.js

@@ -51,7 +51,8 @@ var styles = function styles(theme) {
       backgroundColor: _renderUi.color.background(),
       '& *': {
         '-webkit-font-smoothing': 'antialiased'
-      }
+      },
+      position: 'relative'
     },
     partLabel: {
       display: 'block',
@@ -319,6 +320,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
       };
 
       return /*#__PURE__*/_react["default"].createElement("div", {
+        id: 'main-container',
         className: (0, _classnames["default"])(classes.main, className, 'multiple-choice')
       }, partLabel && /*#__PURE__*/_react["default"].createElement("h3", {
         className: classes.partLabel

package/lib/multiple-choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["translator","Translator","styles","theme","main","color","text","backgroundColor","background","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","border","padding","minWidth","srOnly","position","left","top","width","height","overflow","errorText","typography","palette","error","paddingTop","MultipleChoice","props","event","target","value","checked","maxSelections","onChoiceChanged","session","length","setState","maxSelectionsErrorState","selected","selector","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","alwaysShowCorrect","onToggle","bind","sessionValue","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","autoplayAudioEnabled","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","addAutoplayAudio","test","navigator","userAgent","teacherInstructionsDiv","getMultipleChoiceMinSelectionErrorMessage","t","lng","renderHeading","hidden","visible","choicesLayout","map","selectedAnswerBackgroundColor","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst { translator } = Translator;\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& *': {\n      '-webkit-font-smoothing': 'antialiased',\n    },\n  },\n  partLabel: {\n    display: 'block',\n    fontSize: 'inherit',\n    margin: '0',\n    fontWeight: 'normal',\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  horizontalLayout: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  gridLayout: {\n    display: 'grid',\n  },\n  fieldset: {\n    border: '0px',\n    padding: '0.01em 0 0 0',\n    margin: '0px',\n    minWidth: '0px',\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nexport class MultipleChoice extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n    choices: PropTypes.array,\n    partLabel: PropTypes.string,\n    prompt: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    session: PropTypes.object,\n    disabled: PropTypes.bool,\n    onChoiceChanged: PropTypes.func,\n    responseCorrect: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    correctResponse: PropTypes.array,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    gridColumns: PropTypes.string,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    language: PropTypes.string,\n    selectedAnswerBackgroundColor: PropTypes.string,\n    onShowCorrectToggle: PropTypes.func,\n    isSelectionButtonBelow: PropTypes.bool,\n    minSelections: PropTypes.number,\n    maxSelections: PropTypes.number,\n    autoplayAudioEnabled: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: this.props.alwaysShowCorrect || false,\n      maxSelectionsErrorState: false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  // handleChange was added for accessibility. Please see comments and videos from PD-2441.\n  handleChange = (event) => {\n    const { value, checked } = event.target;\n    const { maxSelections, onChoiceChanged, session } = this.props;\n    \n    if (session.value && session.value.length >= maxSelections) {\n      // show/hide max selections error when user select/deselect an answer\n      this.setState({ maxSelectionsErrorState: checked });\n\n      if (checked) {\n        // prevent selecting more answers\n        return;\n      }\n    }\n\n    onChoiceChanged({ value, selected: checked, 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  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    } = 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    // Safari, Firefox, and Edge do not support autoplay audio smoothly in our use case\n    const addAutoplayAudio = autoplayAudioEnabled && !(/Safari|Firefox|Edg/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent));\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', { lng: language, minSelections, maxSelections });\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 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\n            className=\"prompt\"\n            defaultClassName=\"prompt\"\n            prompt={prompt}\n            tagName={'legend'}\n            autoplayAudioEnabled={addAutoplayAudio}\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                choicesLayout={this.props.choicesLayout}\n                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\n                gridColumns={gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                onChoiceChanged={this.handleChange}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n                isSelectionButtonBelow={isSelectionButtonBelow}\n              />\n            ))}\n          </div>\n        </fieldset>\n\n        {choiceMode === 'checkbox' && (selections < minSelections) && (\n          <div className={classes.errorText}>\n            {getMultipleChoiceMinSelectionErrorMessage()}\n          </div>\n        )}\n        {choiceMode === 'checkbox' && maxSelectionsErrorState && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              maxSelections,\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}
+{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["translator","Translator","styles","theme","main","color","text","backgroundColor","background","position","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","border","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","alwaysShowCorrect","onToggle","bind","sessionValue","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","choiceMode","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","autoplayAudioEnabled","isEvaluateMode","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","addAutoplayAudio","test","navigator","userAgent","teacherInstructionsDiv","getMultipleChoiceMinSelectionErrorMessage","t","lng","renderHeading","hidden","visible","choicesLayout","map","selectedAnswerBackgroundColor","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","React","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst { translator } = Translator;\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& *': {\n      '-webkit-font-smoothing': 'antialiased',\n    },\n    position: 'relative'\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  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: this.props.alwaysShowCorrect || false,\n      maxSelectionsErrorState: false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  // handleChange was added for accessibility. Please see comments and videos from PD-2441.\n  handleChange = (event) => {\n    const { value, checked } = event.target;\n    const { maxSelections, onChoiceChanged, session } = this.props;\n    \n    if (session.value && session.value.length >= maxSelections) {\n      // show/hide max selections error when user select/deselect an answer\n      this.setState({ maxSelectionsErrorState: checked });\n\n      if (checked) {\n        // prevent selecting more answers\n        return;\n      }\n    }\n\n    onChoiceChanged({ value, selected: checked, 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  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    } = 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    // Safari, Firefox, and Edge do not support autoplay audio smoothly in our use case\n    const addAutoplayAudio = autoplayAudioEnabled && !(/Safari|Firefox|Edg/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent));\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', { lng: language, minSelections, maxSelections });\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 className={classes.fieldset}>\n          <PreviewPrompt\n            className=\"prompt\"\n            defaultClassName=\"prompt\"\n            prompt={prompt}\n            tagName={'legend'}\n            autoplayAudioEnabled={addAutoplayAudio}\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                choicesLayout={this.props.choicesLayout}\n                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\n                gridColumns={gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                onChoiceChanged={this.handleChange}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n                isSelectionButtonBelow={isSelectionButtonBelow}\n              />\n            ))}\n          </div>\n        </fieldset>\n\n        {choiceMode === 'checkbox' && (selections < minSelections) && (\n          <div className={classes.errorText}>\n            {getMultipleChoiceMinSelectionErrorMessage()}\n          </div>\n        )}\n        {choiceMode === 'checkbox' && maxSelectionsErrorState && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              maxSelections,\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}

package/module/element.js

@@ -12593,7 +12593,8 @@ const styles$1 = theme => ({
     backgroundColor: color.background(),
     '& *': {
       '-webkit-font-smoothing': 'antialiased'
-    }
+    },
+    position: 'relative'
   },
   partLabel: {
     display: 'block',
@@ -12777,14 +12778,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 210
+        lineNumber: 211
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 212
+        lineNumber: 213
       }
     }, "Multiple Select Question");
   }
@@ -12806,7 +12807,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 247
+        lineNumber: 248
       }
     });
     const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12829,25 +12830,26 @@ class MultipleChoice$1 extends React$2.Component {
       return '';
     };
     return React$2.createElement('div', {
+      id: 'main-container',
       className: classNames(classes.main, className, 'multiple-choice'),
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 270
+        lineNumber: 271
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 271
+        lineNumber: 272
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 277
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12857,14 +12859,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 279
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 292
+        lineNumber: 293
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12875,7 +12877,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 293
+        lineNumber: 294
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12885,7 +12887,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 302
+        lineNumber: 303
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12896,7 +12898,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 310
+        lineNumber: 311
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12919,21 +12921,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 319
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 342
+        lineNumber: 343
       }
     }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 347
+        lineNumber: 348
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13218,7 +13220,7 @@ class MultipleChoice extends HTMLElement {
           if (audio && !isInsidePrompt) return;
           if (!audio) return;
           const info = this._createAudioInfoToast();
-          const container = this.querySelector('[class*="main"]');
+          const container = this.querySelector('#main-container');
           const enableAudio = () => {
             if (this.querySelector('#play-audio-info')) {
               audio.play();

package/module/print.js

@@ -12593,7 +12593,8 @@ const styles$1 = theme => ({
     backgroundColor: color.background(),
     '& *': {
       '-webkit-font-smoothing': 'antialiased'
-    }
+    },
+    position: 'relative'
   },
   partLabel: {
     display: 'block',
@@ -12777,14 +12778,14 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 210
+        lineNumber: 211
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 212
+        lineNumber: 213
       }
     }, "Multiple Select Question");
   }
@@ -12806,7 +12807,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 247
+        lineNumber: 248
       }
     });
     const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12829,25 +12830,26 @@ class MultipleChoice extends React$2.Component {
       return '';
     };
     return React$2.createElement('div', {
+      id: 'main-container',
       className: classNames(classes.main, className, 'multiple-choice'),
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 270
+        lineNumber: 271
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 271
+        lineNumber: 272
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 277
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12857,14 +12859,14 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 279
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 292
+        lineNumber: 293
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12875,7 +12877,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 293
+        lineNumber: 294
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12885,7 +12887,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 302
+        lineNumber: 303
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12896,7 +12898,7 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 310
+        lineNumber: 311
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12919,21 +12921,21 @@ class MultipleChoice extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 319
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 342
+        lineNumber: 343
       }
     }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 347
+        lineNumber: 348
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "9.12.1-next.0+c040d8d08",
+  "version": "9.12.1-next.3+da6ef2782",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "c040d8d08c48faa9c552f129d1d369f0d6bf2590",
+  "gitHead": "da6ef2782bf676c671fed5c47b1faf86bd47ea54",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },