@pie-element/multiple-choice 9.19.4 → 9.19.5-next.84

package/lib/choice-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","padding","spacing","unit","margin","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","marginLeft","srOnly","position","left","top","width","height","overflow","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","focusVisibleUnchecked","outline","focusUncheckedBorder","focusUnchecked","focusVisibleChecked","focusCheckedBorder","focusChecked","StyledCheckbox","correctness","onChange","value","id","onKeyDown","inputRef","key","k","resolved","miniProps","StyledRadio","tagName","ChoiceInput","event","choiceMode","isArrowDown","isArrowUp","preventDefault","currentEl","document","getElementById","choiceId","fieldset","closest","groupCheckboxes","Array","from","querySelectorAll","currentIndex","findIndex","el","nextIndex","nextEl","focus","onToggleChoice","bind","generateChoiceId","descId","Math","random","toFixed","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","screenReaderLabel","tagProps","handleKeyDown","hasMathOrImage","includes","control","autoFocusRef","undefined","React","Component","PropTypes","oneOf","string","bool","isRequired","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n  row: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n  },\n  checkboxHolder: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n    flex: 1,\n    '& label': {\n      color: color.text(),\n      '& > span': {\n        fontSize: 'inherit',\n      },\n    },\n  },\n  horizontalLayout: {\n    [`& .${CLASS_NAME}`]: {\n      // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n      // add margin to the top, left and bottom of the checkbox to keep the same spacing as before\n      padding: theme.spacing.unit,\n      margin: `${theme.spacing.unit / 2}px 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`,\n    },\n  },\n  belowLayout: {\n    '& > label': {\n      alignItems: 'flex-start',\n    },\n  },\n  belowLayoutCenter: {\n    justifyContent: 'center',\n    '& > label': {\n      alignItems: 'center',\n    },\n  },\n  belowSelectionComponent: {\n    display: 'flex',\n    alignItems: 'center',\n    '& > span': {\n      // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n      marginLeft: `-${theme.spacing.unit}px`,\n    },\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n});\n\nconst formStyleSheet = {\n  label: {\n    color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n    backgroundColor: color.background(),\n    letterSpacing: 'normal',\n  },\n  disabled: {\n    // apply to all children\n    '& *': {\n      cursor: 'not-allowed !important',\n    },\n  },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n  name: 'FormControlLabel',\n})((props) => (\n  <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n  [`&.${CLASS_NAME}`]: {\n    color: `var(--choice-input-${varName}, ${fallback}) !important`,\n  },\n});\n\nconst inputStyles = {\n  'correct-root': colorStyle('correct-color', color.text()),\n  'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n  'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n  'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n  'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n  'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n  root: {\n    ...colorStyle('color', color.text()),\n    '&:hover': { color: `${color.primaryLight()} !important` },\n  },\n  checked: colorStyle('selected-color', color.primary()),\n  disabled: {\n    ...colorStyle('disabled-color', color.text()),\n    opacity: 0.6,\n    cursor: 'not-allowed !important',\n    pointerEvents: 'initial !important',\n  },\n  focusVisibleUnchecked: {\n    outline: `2px solid ${color.focusUncheckedBorder()}`,\n    backgroundColor: color.focusUnchecked(),\n  },\n  focusVisibleChecked: {\n    outline: `2px solid ${color.focusCheckedBorder()}`,\n    backgroundColor: color.focusChecked(),\n  },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n  const { correctness, classes, checked, onChange, disabled, value, id, onKeyDown, inputRef } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled, value };\n\n  return (\n    <Checkbox\n      id={id}\n      inputRef={inputRef}\n      aria-checked={checked}\n      onKeyDown={onKeyDown}\n      focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n      disableRipple\n      {...miniProps}\n      className={CLASS_NAME}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n  const { correctness, classes, checked, onChange, disabled, value, id, tagName, inputRef } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled, value };\n\n  return (\n    <Radio\n      id={id}\n      inputRef={inputRef}\n      aria-checked={checked}\n      focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n      disableRipple\n      {...miniProps}\n      className={CLASS_NAME}\n      name={tagName}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport class ChoiceInput extends React.Component {\n  static propTypes = {\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    displayKey: PropTypes.string,\n    checked: PropTypes.bool.isRequired,\n    correctness: PropTypes.string,\n    disabled: PropTypes.bool.isRequired,\n    feedback: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    rationale: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    value: PropTypes.string.isRequired,\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    tagName: PropTypes.string,\n    hideTick: PropTypes.bool,\n    isEvaluateMode: PropTypes.bool,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    isSelectionButtonBelow: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    rationale: null,\n    checked: false,\n    isEvaluateMode: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.onToggleChoice = this.onToggleChoice.bind(this);\n    this.choiceId = this.generateChoiceId();\n    this.descId = `${this.choiceId}-desc`;\n  }\n\n  onToggleChoice(event) {\n    this.props.onChange(event);\n  }\n\n  generateChoiceId() {\n    return 'choice-' + (Math.random() * 10000).toFixed();\n  }\n\n  handleKeyDown = (event) => {\n    const { choiceMode } = this.props;\n\n    if (choiceMode !== 'checkbox') return;\n\n    const isArrowDown = event.key === 'ArrowDown';\n    const isArrowUp = event.key === 'ArrowUp';\n\n    if (!isArrowDown && !isArrowUp) return;\n\n    event.preventDefault();\n\n    const currentEl = document.getElementById(this.choiceId);\n    if (!currentEl) return;\n\n    const fieldset = currentEl.closest('fieldset');\n    if (!fieldset) return;\n\n    const groupCheckboxes = Array.from(fieldset.querySelectorAll('input[type=\"checkbox\"]'));\n\n    const currentIndex = groupCheckboxes.findIndex((el) => el === currentEl);\n    if (currentIndex === -1) return;\n\n    const nextIndex = isArrowDown ? currentIndex + 1 : currentIndex - 1;\n    const nextEl = groupCheckboxes[nextIndex];\n\n    if (nextEl) {\n      nextEl.focus();\n    }\n  };\n\n  render() {\n    const {\n      choiceMode,\n      disabled,\n      displayKey,\n      feedback,\n      label,\n      correctness,\n      classes,\n      className,\n      rationale,\n      hideTick,\n      isEvaluateMode,\n      choicesLayout,\n      value,\n      checked,\n      tagName,\n      isSelectionButtonBelow,\n    } = this.props;\n\n    const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n    const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n    const holderClassNames = classNames(classes.checkboxHolder, {\n      [classes.horizontalLayout]: choicesLayout === 'horizontal',\n      [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n      [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n    });\n\n    const choicelabel = (\n      <>\n        {displayKey && !isSelectionButtonBelow ? (\n          <span className={classes.row}>\n            {displayKey}.{'\\u00A0'}\n            <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n          </span>\n        ) : (\n          <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n        )}\n      </>\n    );\n\n    const screenReaderLabel = (\n      <span id={this.descId} className={classes.srOnly}>\n        {choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below'}\n      </span>\n    );\n\n    const tagProps = {\n      disabled,\n      checked,\n      correctness,\n      tagName,\n      value,\n      id: this.choiceId,\n      onChange: this.onToggleChoice,\n      onKeyDown: this.handleKeyDown,\n      'aria-describedby': this.descId,\n    };\n\n    const hasMathOrImage =\n      typeof label === 'string' &&\n      (label.includes('<math') ||\n        label.includes('\\\\(') ||\n        label.includes('\\\\[') ||\n        label.includes('<img') ||\n        label.includes('data-latex') ||\n        label.includes('data-raw') ||\n        label.includes('<mjx-container'));\n\n    const control = isSelectionButtonBelow ? (\n      <span className={classes.belowSelectionComponent}>\n        {hasMathOrImage && screenReaderLabel}\n        <Tag {...tagProps} style={{ padding: 0 }} />\n        {displayKey ? `${displayKey}.` : ''}\n      </span>\n    ) : (\n      <>\n        {hasMathOrImage && screenReaderLabel}\n        <Tag {...tagProps} inputRef={this.props.autoFocusRef} />\n      </>\n    );\n\n    return (\n      <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n        <div className={classes.row}>\n          {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n          <div className={classNames(holderClassNames, 'checkbox-holder')}>\n            <StyledFormControlLabel\n              label={choicelabel}\n              value={value}\n              htmlFor={this.choiceId}\n              labelPlacement={isSelectionButtonBelow ? 'top' : undefined}\n              control={control}\n            />\n          </div>\n        </div>\n        {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n        <Feedback feedback={feedback} correctness={correctness} />\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
+{"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","padding","spacing","unit","margin","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","marginLeft","srOnly","position","left","top","width","height","overflow","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","focusVisibleUnchecked","outline","focusUncheckedBorder","focusUnchecked","focusVisibleChecked","focusCheckedBorder","focusChecked","StyledCheckbox","correctness","onChange","value","id","onKeyDown","inputRef","key","k","resolved","miniProps","StyledRadio","tagName","ChoiceInput","event","choiceMode","isArrowDown","isArrowUp","preventDefault","currentEl","document","getElementById","choiceId","fieldset","closest","groupCheckboxes","Array","from","querySelectorAll","currentIndex","findIndex","el","nextIndex","nextEl","focus","onToggleChoice","bind","generateChoiceId","descId","Math","random","toFixed","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","screenReaderLabel","tagProps","handleKeyDown","hasMathOrImage","includes","control","autoFocusRef","undefined","React","Component","PropTypes","oneOf","string","bool","isRequired","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n  row: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n  },\n  checkboxHolder: {\n    display: 'flex',\n    alignItems: 'center',\n    backgroundColor: color.background(),\n    flex: 1,\n    '& label': {\n      color: color.text(),\n      '& > span': {\n        fontSize: 'inherit',\n      },\n    },\n  },\n  horizontalLayout: {\n    [`& .${CLASS_NAME}`]: {\n      // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n      // add margin to the top, left and bottom of the checkbox to keep the same spacing as before\n      padding: theme.spacing.unit,\n      margin: `${theme.spacing.unit / 2}px 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`,\n    },\n  },\n  belowLayout: {\n    '& > label': {\n      alignItems: 'flex-start',\n    },\n  },\n  belowLayoutCenter: {\n    justifyContent: 'center',\n    '& > label': {\n      alignItems: 'center',\n    },\n  },\n  belowSelectionComponent: {\n    display: 'flex',\n    alignItems: 'center',\n    '& > span': {\n      // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n      marginLeft: `-${theme.spacing.unit}px`,\n    },\n  },\n  srOnly: {\n    position: 'absolute',\n    left: '-10000px',\n    top: 'auto',\n    width: '1px',\n    height: '1px',\n    overflow: 'hidden',\n  },\n});\n\nconst formStyleSheet = {\n  label: {\n    color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n    backgroundColor: color.background(),\n    letterSpacing: 'normal',\n  },\n  disabled: {\n    // apply to all children\n    '& *': {\n      cursor: 'not-allowed !important',\n    },\n  },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n  name: 'FormControlLabel',\n})((props) => (\n  <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n  [`&.${CLASS_NAME}`]: {\n    color: `var(--choice-input-${varName}, ${fallback}) !important`,\n  },\n});\n\nconst inputStyles = {\n  'correct-root': colorStyle('correct-color', color.text()),\n  'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n  'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n  'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n  'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n  'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n  root: {\n    ...colorStyle('color', color.text()),\n    '&:hover': { color: `${color.primaryLight()} !important` },\n  },\n  checked: colorStyle('selected-color', color.primary()),\n  disabled: {\n    ...colorStyle('disabled-color', color.text()),\n    opacity: 0.6,\n    cursor: 'not-allowed !important',\n    pointerEvents: 'initial !important',\n  },\n  focusVisibleUnchecked: {\n    outline: `2px solid ${color.focusUncheckedBorder()}`,\n    backgroundColor: color.focusUnchecked(),\n  },\n  focusVisibleChecked: {\n    outline: `2px solid ${color.focusCheckedBorder()}`,\n    backgroundColor: color.focusChecked(),\n  },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n  const { correctness, classes, checked, onChange, disabled, value, id, onKeyDown, inputRef } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled, value };\n\n  return (\n    <Checkbox\n      id={id}\n      inputRef={inputRef}\n      aria-checked={checked}\n      onKeyDown={onKeyDown}\n      focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n      disableRipple\n      {...miniProps}\n      className={CLASS_NAME}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n  const { correctness, classes, checked, onChange, disabled, value, id, tagName, inputRef } = props;\n  const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n  const resolved = {\n    root: classes[key('root')],\n    checked: classes[key('checked')],\n    disabled: classes[key('disabled')],\n  };\n\n  const miniProps = { checked, onChange, disabled, value };\n\n  return (\n    <Radio\n      id={id}\n      inputRef={inputRef}\n      aria-checked={checked}\n      focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n      disableRipple\n      {...miniProps}\n      className={CLASS_NAME}\n      name={tagName}\n      classes={{\n        root: resolved.root,\n        checked: resolved.checked,\n        disabled: `${correctness ? '' : resolved.disabled}`,\n      }}\n    />\n  );\n});\n\nexport class ChoiceInput extends React.Component {\n  static propTypes = {\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    displayKey: PropTypes.string,\n    checked: PropTypes.bool.isRequired,\n    correctness: PropTypes.string,\n    disabled: PropTypes.bool.isRequired,\n    feedback: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    rationale: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    value: PropTypes.string.isRequired,\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    tagName: PropTypes.string,\n    hideTick: PropTypes.bool,\n    isEvaluateMode: PropTypes.bool,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    isSelectionButtonBelow: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    rationale: null,\n    checked: false,\n    isEvaluateMode: false,\n  };\n\n  constructor(props) {\n    super(props);\n    this.onToggleChoice = this.onToggleChoice.bind(this);\n    this.choiceId = this.generateChoiceId();\n    this.descId = `${this.choiceId}-desc`;\n  }\n\n  onToggleChoice(event) {\n    this.props.onChange(event);\n  }\n\n  generateChoiceId() {\n    return 'choice-' + (Math.random() * 10000).toFixed();\n  }\n\n  handleKeyDown = (event) => {\n    const { choiceMode } = this.props;\n\n    if (choiceMode !== 'checkbox') return;\n\n    const isArrowDown = event.key === 'ArrowDown';\n    const isArrowUp = event.key === 'ArrowUp';\n\n    if (!isArrowDown && !isArrowUp) return;\n\n    event.preventDefault();\n\n    const currentEl = document.getElementById(this.choiceId);\n    if (!currentEl) return;\n\n    const fieldset = currentEl.closest('fieldset');\n    if (!fieldset) return;\n\n    const groupCheckboxes = Array.from(fieldset.querySelectorAll('input[type=\"checkbox\"]'));\n\n    const currentIndex = groupCheckboxes.findIndex((el) => el === currentEl);\n    if (currentIndex === -1) return;\n\n    const nextIndex = isArrowDown ? currentIndex + 1 : currentIndex - 1;\n    const nextEl = groupCheckboxes[nextIndex];\n\n    if (nextEl) {\n      nextEl.focus();\n    }\n  };\n\n  render() {\n    const {\n      choiceMode,\n      disabled,\n      displayKey,\n      feedback,\n      label,\n      correctness,\n      classes,\n      className,\n      rationale,\n      hideTick,\n      isEvaluateMode,\n      choicesLayout,\n      value,\n      checked,\n      tagName,\n      isSelectionButtonBelow,\n    } = this.props;\n\n    const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n    const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n    const holderClassNames = classNames(classes.checkboxHolder, {\n      [classes.horizontalLayout]: choicesLayout === 'horizontal',\n      [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n      [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n    });\n\n    const choicelabel = (\n      <>\n        {displayKey && !isSelectionButtonBelow ? (\n          <span className={classes.row}>\n            {displayKey}.{'\\u00A0'}\n            <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n          </span>\n        ) : (\n          <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n        )}\n      </>\n    );\n\n    const screenReaderLabel = (\n      <span id={this.descId} className={classes.srOnly}>\n        {choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below'}\n      </span>\n    );\n\n    const tagProps = {\n      disabled,\n      checked,\n      correctness,\n      tagName,\n      value,\n      id: this.choiceId,\n      onChange: this.onToggleChoice,\n      onKeyDown: this.handleKeyDown,\n      'aria-describedby': this.descId,\n    };\n\n    const hasMathOrImage =\n      typeof label === 'string' &&\n      (label.includes('<math') ||\n        label.includes('\\\\(') ||\n        label.includes('\\\\[') ||\n        label.includes('<img') ||\n        label.includes('data-latex') ||\n        label.includes('data-raw') ||\n        label.includes('<mjx-container'));\n\n    const control = isSelectionButtonBelow ? (\n      <span className={classes.belowSelectionComponent}>\n        {hasMathOrImage && screenReaderLabel}\n        <Tag {...tagProps} style={{ padding: 0 }} />\n        {displayKey ? `${displayKey}.` : ''}\n      </span>\n    ) : (\n      <>\n        {hasMathOrImage && screenReaderLabel}\n        <Tag {...tagProps} inputRef={this.props.autoFocusRef} />\n      </>\n    );\n\n    return (\n      <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n        <div className={classes.row}>\n          {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n          <div className={classNames(holderClassNames, 'checkbox-holder')}>\n            <StyledFormControlLabel\n              label={choicelabel}\n              value={value}\n              htmlFor={this.choiceId}\n              labelPlacement={isSelectionButtonBelow ? 'top' : undefined}\n              control={control}\n            />\n          </div>\n        </div>\n        {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n        <Feedback feedback={feedback} correctness={correctness} />\n      </div>\n    );\n  }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}

package/lib/choice.js

@@ -56,10 +56,29 @@ var Choice = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (choice) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isHovered: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
       var _this$props = _this.props,
           disabled = _this$props.disabled,
-          onChoiceChanged = _this$props.onChoiceChanged;
+          checked = _this$props.checked;
+
+      if (!disabled && !checked) {
+        _this.setState({
+          isHovered: true
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        isHovered: false
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (choice) {
+      var _this$props2 = _this.props,
+          disabled = _this$props2.disabled,
+          onChoiceChanged = _this$props2.onChoiceChanged;
 
       if (!disabled) {
         onChoiceChanged(choice);
@@ -73,24 +92,30 @@ var Choice = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _classNames;
 
-      var _this$props2 = this.props,
-          choice = _this$props2.choice,
-          index = _this$props2.index,
-          choicesLength = _this$props2.choicesLength,
-          showCorrect = _this$props2.showCorrect,
-          isEvaluateMode = _this$props2.isEvaluateMode,
-          choiceMode = _this$props2.choiceMode,
-          disabled = _this$props2.disabled,
-          checked = _this$props2.checked,
-          correctness = _this$props2.correctness,
-          displayKey = _this$props2.displayKey,
-          classes = _this$props2.classes,
-          choicesLayout = _this$props2.choicesLayout,
-          gridColumns = _this$props2.gridColumns,
-          isSelectionButtonBelow = _this$props2.isSelectionButtonBelow,
-          selectedAnswerBackgroundColor = _this$props2.selectedAnswerBackgroundColor,
-          autoFocusRef = _this$props2.autoFocusRef,
-          tagName = _this$props2.tagName;
+      var _this$props3 = this.props,
+          choice = _this$props3.choice,
+          index = _this$props3.index,
+          choicesLength = _this$props3.choicesLength,
+          showCorrect = _this$props3.showCorrect,
+          isEvaluateMode = _this$props3.isEvaluateMode,
+          choiceMode = _this$props3.choiceMode,
+          disabled = _this$props3.disabled,
+          checked = _this$props3.checked,
+          correctness = _this$props3.correctness,
+          displayKey = _this$props3.displayKey,
+          classes = _this$props3.classes,
+          choicesLayout = _this$props3.choicesLayout,
+          gridColumns = _this$props3.gridColumns,
+          isSelectionButtonBelow = _this$props3.isSelectionButtonBelow,
+          selectedAnswerBackgroundColor = _this$props3.selectedAnswerBackgroundColor,
+          selectedAnswerStrokeColor = _this$props3.selectedAnswerStrokeColor,
+          selectedAnswerStrokeWidth = _this$props3.selectedAnswerStrokeWidth,
+          hoverAnswerBackgroundColor = _this$props3.hoverAnswerBackgroundColor,
+          hoverAnswerStrokeColor = _this$props3.hoverAnswerStrokeColor,
+          hoverAnswerStrokeWidth = _this$props3.hoverAnswerStrokeWidth,
+          autoFocusRef = _this$props3.autoFocusRef,
+          tagName = _this$props3.tagName;
+      var isHovered = this.state.isHovered;
       var choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
       var feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
 
@@ -107,17 +132,61 @@ var Choice = /*#__PURE__*/function (_React$Component) {
         onChange: this.onChange,
         isEvaluateMode: isEvaluateMode,
         isSelectionButtonBelow: isSelectionButtonBelow,
+        selectedAnswerStrokeColor: selectedAnswerStrokeColor,
+        selectedAnswerStrokeWidth: selectedAnswerStrokeWidth,
         tagName: tagName
       });
 
-      var names = (0, _classnames["default"])(classes.choice, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.noBorder, index === choicesLength - 1 || choicesLayout !== 'vertical'), (0, _defineProperty2["default"])(_classNames, classes.horizontalLayout, choicesLayout === 'horizontal'), _classNames));
-      var choiceBackground = selectedAnswerBackgroundColor && checked ? selectedAnswerBackgroundColor : 'initial';
+      var normalizeStrokeWidth = function normalizeStrokeWidth(width) {
+        if (!width) return '2px'; // default
+
+        var trimmed = String(width).trim(); // add 'px' if the value is a number
+
+        if (/^\d+(\.\d+)?$/.test(trimmed)) {
+          return "".concat(trimmed, "px");
+        }
+
+        return trimmed;
+      };
+
+      var hasSelectedStroke = selectedAnswerStrokeColor && selectedAnswerStrokeColor !== 'initial';
+      var hasHoverStroke = hoverAnswerStrokeColor && hoverAnswerStrokeColor !== 'initial';
+      var currentStrokeColor = 'transparent';
+      var currentStrokeWidth = '2px';
+      var currentBackgroundColor = 'initial';
+
+      if (hasSelectedStroke || hasHoverStroke) {
+        if (checked && hasSelectedStroke) {
+          // selected state takes priority when selected stroke is configured
+          currentStrokeColor = selectedAnswerStrokeColor;
+          currentStrokeWidth = selectedAnswerStrokeWidth;
+        } else if (isHovered && !disabled && hasHoverStroke) {
+          // hover state when not selected and not disabled, and hover stroke is configured
+          currentStrokeColor = hoverAnswerStrokeColor;
+          currentStrokeWidth = hoverAnswerStrokeWidth;
+        }
+      }
+
+      if (checked && selectedAnswerBackgroundColor && selectedAnswerBackgroundColor !== 'initial') {
+        currentBackgroundColor = selectedAnswerBackgroundColor;
+      } else if (isHovered && !disabled && hoverAnswerBackgroundColor && hoverAnswerBackgroundColor !== 'initial') {
+        currentBackgroundColor = hoverAnswerBackgroundColor;
+      }
+
+      var strokeStyle = hasSelectedStroke || hasHoverStroke ? {
+        border: "".concat(normalizeStrokeWidth(currentStrokeWidth), " solid ").concat(currentStrokeColor),
+        borderRadius: '8px'
+      } : {};
+      var names = (0, _classnames["default"])(classes.choice, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.noBorder, index === choicesLength - 1 || choicesLayout !== 'vertical' || strokeStyle), (0, _defineProperty2["default"])(_classNames, classes.horizontalLayout, choicesLayout === 'horizontal'), _classNames));
+      var choiceBackground = currentBackgroundColor !== 'initial' ? currentBackgroundColor : 'initial';
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: choiceClass,
         key: index,
-        style: {
+        style: _objectSpread({
           backgroundColor: choiceBackground
-        }
+        }, strokeStyle),
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
       }, /*#__PURE__*/_react["default"].createElement(_choiceInput["default"], (0, _extends2["default"])({}, choiceProps, {
         className: names,
         autoFocusRef: autoFocusRef
@@ -145,6 +214,11 @@ Choice.propTypes = {
   choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal']),
   gridColumns: _propTypes["default"].string,
   selectedAnswerBackgroundColor: _propTypes["default"].string,
+  selectedAnswerStrokeColor: _propTypes["default"].string,
+  selectedAnswerStrokeWidth: _propTypes["default"].string,
+  hoverAnswerBackgroundColor: _propTypes["default"].string,
+  hoverAnswerStrokeColor: _propTypes["default"].string,
+  hoverAnswerStrokeWidth: _propTypes["default"].string,
   tagName: _propTypes["default"].string,
   isSelectionButtonBelow: _propTypes["default"].bool,
   autoFocusRef: _propTypes["default"].object

package/lib/choice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/choice.jsx"],"names":["Choice","choice","props","disabled","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","checked","correctness","displayKey","classes","choicesLayout","gridColumns","isSelectionButtonBelow","selectedAnswerBackgroundColor","autoFocusRef","tagName","choiceClass","feedback","choiceProps","onChange","names","noBorder","horizontalLayout","choiceBackground","backgroundColor","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","theme","paddingTop","spacing","unit","paddingBottom","paddingLeft","paddingRight","borderBottom","palette","grey","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n  static propTypes = {};\n\n  onChange = (choice) => {\n    const { disabled, onChoiceChanged } = this.props;\n\n    if (!disabled) {\n      onChoiceChanged(choice);\n    }\n  };\n\n  render() {\n    const {\n      choice,\n      index,\n      choicesLength,\n      showCorrect,\n      isEvaluateMode,\n      choiceMode,\n      disabled,\n      checked,\n      correctness,\n      displayKey,\n      classes,\n      choicesLayout,\n      gridColumns,\n      isSelectionButtonBelow,\n      selectedAnswerBackgroundColor,\n      autoFocusRef,\n      tagName\n    } = this.props;\n    const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n    const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n    const choiceProps = {\n      ...choice,\n      checked,\n      choiceMode,\n      disabled,\n      feedback,\n      correctness,\n      displayKey,\n      index,\n      choicesLayout,\n      gridColumns,\n      onChange: this.onChange,\n      isEvaluateMode,\n      isSelectionButtonBelow,\n      tagName,\n    };\n\n    const names = classNames(classes.choice, {\n      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',\n      [classes.horizontalLayout]: choicesLayout === 'horizontal',\n    });\n\n    const choiceBackground = selectedAnswerBackgroundColor && checked ? selectedAnswerBackgroundColor : 'initial';\n\n    return (\n      <div className={choiceClass} key={index} style={{ backgroundColor: choiceBackground }}>\n        <ChoiceInput {...choiceProps} className={names} autoFocusRef={autoFocusRef} />\n      </div>\n    );\n  }\n}\n\nChoice.propTypes = {\n  choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n  choice: PropTypes.object,\n  disabled: PropTypes.bool.isRequired,\n  onChoiceChanged: PropTypes.func,\n  classes: PropTypes.object.isRequired,\n  index: PropTypes.number,\n  choicesLength: PropTypes.number,\n  showCorrect: PropTypes.bool,\n  isEvaluateMode: PropTypes.bool,\n  checked: PropTypes.bool,\n  correctness: PropTypes.string,\n  displayKey: PropTypes.string,\n  choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n  gridColumns: PropTypes.string,\n  selectedAnswerBackgroundColor: PropTypes.string,\n  tagName: PropTypes.string,\n  isSelectionButtonBelow: PropTypes.bool,\n  autoFocusRef: PropTypes.object,\n};\n\nexport default withStyles((theme) => ({\n  choice: {\n    paddingTop: theme.spacing.unit * 2.5,\n    paddingBottom: theme.spacing.unit + 2,\n    paddingLeft: theme.spacing.unit + 2,\n    paddingRight: theme.spacing.unit + 2,\n    borderBottom: `1px solid ${theme.palette.grey[300]}`,\n  },\n  noBorder: {\n    borderBottom: 'none',\n  },\n  horizontalLayout: {\n    paddingRight: theme.spacing.unit * 2.5,\n    '& label': {\n      marginRight: theme.spacing.unit,\n      // '& span:first-child': {\n      //   paddingRight: 0\n      // }\n    },\n  },\n}))(Choice);\n"],"file":"choice.js"}
+{"version":3,"sources":["../src/choice.jsx"],"names":["Choice","isHovered","props","disabled","checked","setState","choice","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","correctness","displayKey","classes","choicesLayout","gridColumns","isSelectionButtonBelow","selectedAnswerBackgroundColor","selectedAnswerStrokeColor","selectedAnswerStrokeWidth","hoverAnswerBackgroundColor","hoverAnswerStrokeColor","hoverAnswerStrokeWidth","autoFocusRef","tagName","state","choiceClass","feedback","choiceProps","onChange","normalizeStrokeWidth","width","trimmed","String","trim","test","hasSelectedStroke","hasHoverStroke","currentStrokeColor","currentStrokeWidth","currentBackgroundColor","strokeStyle","border","borderRadius","names","noBorder","horizontalLayout","choiceBackground","backgroundColor","handleMouseEnter","handleMouseLeave","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","theme","paddingTop","spacing","unit","paddingBottom","paddingLeft","paddingRight","borderBottom","palette","grey","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n  static propTypes = {};\n\n  state = {\n    isHovered: false,\n  };\n\n  handleMouseEnter = () => {\n    const { disabled, checked } = this.props;\n\n    if (!disabled && !checked) {\n      this.setState({ isHovered: true });\n    }\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ isHovered: false });\n  };\n\n  onChange = (choice) => {\n    const { disabled, onChoiceChanged } = this.props;\n\n    if (!disabled) {\n      onChoiceChanged(choice);\n    }\n  };\n\n  render() {\n    const {\n      choice,\n      index,\n      choicesLength,\n      showCorrect,\n      isEvaluateMode,\n      choiceMode,\n      disabled,\n      checked,\n      correctness,\n      displayKey,\n      classes,\n      choicesLayout,\n      gridColumns,\n      isSelectionButtonBelow,\n      selectedAnswerBackgroundColor,\n      selectedAnswerStrokeColor,\n      selectedAnswerStrokeWidth,\n      hoverAnswerBackgroundColor,\n      hoverAnswerStrokeColor,\n      hoverAnswerStrokeWidth,\n      autoFocusRef,\n      tagName\n    } = this.props;\n    \n    const { isHovered } = this.state;\n    const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n    const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n    const choiceProps = {\n      ...choice,\n      checked,\n      choiceMode,\n      disabled,\n      feedback,\n      correctness,\n      displayKey,\n      index,\n      choicesLayout,\n      gridColumns,\n      onChange: this.onChange,\n      isEvaluateMode,\n      isSelectionButtonBelow,\n      selectedAnswerStrokeColor,\n      selectedAnswerStrokeWidth,\n      tagName,\n    };\n\n    const normalizeStrokeWidth = (width) => {\n      if (!width) return '2px'; // default\n      const trimmed = String(width).trim();\n    \n      // add 'px' if the value is a number\n      if (/^\\d+(\\.\\d+)?$/.test(trimmed)) {\n        return `${trimmed}px`;\n      }\n\n      return trimmed;\n    };\n\n    const hasSelectedStroke = selectedAnswerStrokeColor && selectedAnswerStrokeColor !== 'initial';\n    const hasHoverStroke = hoverAnswerStrokeColor && hoverAnswerStrokeColor !== 'initial';\n    \n    let currentStrokeColor = 'transparent';\n    let currentStrokeWidth = '2px';\n    let currentBackgroundColor = 'initial';\n    \n    if ((hasSelectedStroke || hasHoverStroke)) {\n      if (checked && hasSelectedStroke) {\n        // selected state takes priority when selected stroke is configured\n        currentStrokeColor = selectedAnswerStrokeColor;\n        currentStrokeWidth = selectedAnswerStrokeWidth;\n      } else if (isHovered && !disabled && hasHoverStroke) {\n        // hover state when not selected and not disabled, and hover stroke is configured\n        currentStrokeColor = hoverAnswerStrokeColor;\n        currentStrokeWidth = hoverAnswerStrokeWidth;\n      }\n    }\n    \n    if (checked && selectedAnswerBackgroundColor && selectedAnswerBackgroundColor !== 'initial') {\n      currentBackgroundColor = selectedAnswerBackgroundColor;\n    } else if (isHovered && !disabled && hoverAnswerBackgroundColor && hoverAnswerBackgroundColor !== 'initial') {\n      currentBackgroundColor = hoverAnswerBackgroundColor;\n    }\n\n     const strokeStyle = (hasSelectedStroke || hasHoverStroke) ? {\n      border: `${normalizeStrokeWidth(currentStrokeWidth)} solid ${currentStrokeColor}`,\n      borderRadius: '8px',\n    } : {};\n\n    const names = classNames(classes.choice, {\n      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical' || strokeStyle,\n      [classes.horizontalLayout]: choicesLayout === 'horizontal',\n    });\n\n    const choiceBackground = currentBackgroundColor !== 'initial' ? currentBackgroundColor : 'initial';\n\n    return (\n      <div \n        className={choiceClass} \n        key={index} \n        style={{ backgroundColor: choiceBackground, ...strokeStyle }}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <ChoiceInput {...choiceProps} className={names} autoFocusRef={autoFocusRef} />\n      </div>\n    );\n  }\n}\n\nChoice.propTypes = {\n  choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n  choice: PropTypes.object,\n  disabled: PropTypes.bool.isRequired,\n  onChoiceChanged: PropTypes.func,\n  classes: PropTypes.object.isRequired,\n  index: PropTypes.number,\n  choicesLength: PropTypes.number,\n  showCorrect: PropTypes.bool,\n  isEvaluateMode: PropTypes.bool,\n  checked: PropTypes.bool,\n  correctness: PropTypes.string,\n  displayKey: PropTypes.string,\n  choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n  gridColumns: PropTypes.string,\n  selectedAnswerBackgroundColor: PropTypes.string,\n  selectedAnswerStrokeColor: PropTypes.string,\n  selectedAnswerStrokeWidth: PropTypes.string,\n  hoverAnswerBackgroundColor: PropTypes.string,\n  hoverAnswerStrokeColor: PropTypes.string,\n  hoverAnswerStrokeWidth: PropTypes.string,\n  tagName: PropTypes.string,\n  isSelectionButtonBelow: PropTypes.bool,\n  autoFocusRef: PropTypes.object,\n};\n\nexport default withStyles((theme) => ({\n  choice: {\n    paddingTop: theme.spacing.unit * 2.5,\n    paddingBottom: theme.spacing.unit + 2,\n    paddingLeft: theme.spacing.unit + 2,\n    paddingRight: theme.spacing.unit + 2,\n    borderBottom: `1px solid ${theme.palette.grey[300]}`,\n  },\n  noBorder: {\n    borderBottom: 'none',\n  },\n  horizontalLayout: {\n    paddingRight: theme.spacing.unit * 2.5,\n    '& label': {\n      marginRight: theme.spacing.unit,\n      // '& span:first-child': {\n      //   paddingRight: 0\n      // }\n    },\n  },\n}))(Choice);\n"],"file":"choice.js"}

package/lib/feedback-tick.js

@@ -27,7 +27,7 @@ var _styles = require("@material-ui/core/styles");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+var _renderUi = require("@pie-lib/render-ui");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 

package/lib/feedback-tick.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/feedback-tick.jsx"],"names":["stylesheet","incorrect","fill","color","correct","feedbackTick","width","height","position","display","verticalAlign","feedbackTickEnter","opacity","left","feedbackTickEnterActive","transition","feedbackTickLeave","feedbackTickLeaveActive","FeedbackTick","props","incorrectIcon","enableBackground","classes","correctIcon","correctness","icon","enter","enterActive","exit","exitActive","React","Component","PropTypes","object","isRequired","string","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst stylesheet = {\n  incorrect: {\n    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n  },\n  correct: {\n    fill: `var(--feedback-correct-bg-color, ${color.correct()})`,\n  },\n  feedbackTick: {\n    width: '33px',\n    height: '33px',\n    '& svg': {\n      position: 'absolute',\n      display: 'inline-block',\n      width: '33px',\n      height: '33px',\n      verticalAlign: 'middle',\n      '& hide': {\n        display: 'none',\n      },\n    },\n  },\n  feedbackTickEnter: {\n    opacity: '0',\n    left: '-50px',\n  },\n  feedbackTickEnterActive: {\n    opacity: '1',\n    left: '0px',\n    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',\n  },\n  feedbackTickLeave: {\n    opacity: '1',\n    left: '0px',\n  },\n  feedbackTickLeaveActive: {\n    opacity: '0',\n    left: '-50px',\n    transition: 'left 300ms ease-in, opacity 300ms',\n  },\n};\n\nclass FeedbackTick extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correctness: PropTypes.string,\n  };\n  constructor(props) {\n    super(props);\n    this.incorrectIcon = (\n      <svg\n        key=\"1\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <g>\n          <rect\n            x=\"11\"\n            y=\"17.3\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)\"\n            className={this.props.classes.incorrect}\n            width=\"16.6\"\n            height=\"3.7\"\n          />\n          <rect\n            x=\"17.4\"\n            y=\"10.7\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)\"\n            className={this.props.classes.incorrect}\n            width=\"3.7\"\n            height=\"16.6\"\n          />\n        </g>\n      </svg>\n    );\n\n    this.correctIcon = (\n      <svg\n        key=\"2\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <polygon\n          className={this.props.classes.correct}\n          points=\"19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4\"\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const { correctness, classes } = this.props;\n\n    const icon = (() => {\n      if (correctness === 'incorrect') {\n        return this.incorrectIcon;\n      } else if (correctness === 'correct') {\n        return this.correctIcon;\n      }\n    })();\n\n    return (\n      <div className={classes.feedbackTick}>\n        <TransitionGroup>\n          {correctness && (\n            <CSSTransition\n              classNames={{\n                enter: classes.feedbackTickEnter,\n                enterActive: classes.feedbackTickEnterActive,\n                exit: classes.feedbackTickLeave,\n                exitActive: classes.feedbackTickLeaveActive,\n              }}\n              timeout={{ enter: 700, exit: 300 }}\n            >\n              {icon}\n            </CSSTransition>\n          )}\n        </TransitionGroup>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(stylesheet, { name: 'FeedbackTick' })(FeedbackTick);\n"],"file":"feedback-tick.js"}
+{"version":3,"sources":["../src/feedback-tick.jsx"],"names":["stylesheet","incorrect","fill","color","correct","feedbackTick","width","height","position","display","verticalAlign","feedbackTickEnter","opacity","left","feedbackTickEnterActive","transition","feedbackTickLeave","feedbackTickLeaveActive","FeedbackTick","props","incorrectIcon","enableBackground","classes","correctIcon","correctness","icon","enter","enterActive","exit","exitActive","React","Component","PropTypes","object","isRequired","string","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\n\nconst stylesheet = {\n  incorrect: {\n    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n  },\n  correct: {\n    fill: `var(--feedback-correct-bg-color, ${color.correct()})`,\n  },\n  feedbackTick: {\n    width: '33px',\n    height: '33px',\n    '& svg': {\n      position: 'absolute',\n      display: 'inline-block',\n      width: '33px',\n      height: '33px',\n      verticalAlign: 'middle',\n      '& hide': {\n        display: 'none',\n      },\n    },\n  },\n  feedbackTickEnter: {\n    opacity: '0',\n    left: '-50px',\n  },\n  feedbackTickEnterActive: {\n    opacity: '1',\n    left: '0px',\n    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',\n  },\n  feedbackTickLeave: {\n    opacity: '1',\n    left: '0px',\n  },\n  feedbackTickLeaveActive: {\n    opacity: '0',\n    left: '-50px',\n    transition: 'left 300ms ease-in, opacity 300ms',\n  },\n};\n\nclass FeedbackTick extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correctness: PropTypes.string,\n  };\n  constructor(props) {\n    super(props);\n    this.incorrectIcon = (\n      <svg\n        key=\"1\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <g>\n          <rect\n            x=\"11\"\n            y=\"17.3\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)\"\n            className={this.props.classes.incorrect}\n            width=\"16.6\"\n            height=\"3.7\"\n          />\n          <rect\n            x=\"17.4\"\n            y=\"10.7\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)\"\n            className={this.props.classes.incorrect}\n            width=\"3.7\"\n            height=\"16.6\"\n          />\n        </g>\n      </svg>\n    );\n\n    this.correctIcon = (\n      <svg\n        key=\"2\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <polygon\n          className={this.props.classes.correct}\n          points=\"19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4\"\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const { correctness, classes } = this.props;\n\n    const icon = (() => {\n      if (correctness === 'incorrect') {\n        return this.incorrectIcon;\n      } else if (correctness === 'correct') {\n        return this.correctIcon;\n      }\n    })();\n\n    return (\n      <div className={classes.feedbackTick}>\n        <TransitionGroup>\n          {correctness && (\n            <CSSTransition\n              classNames={{\n                enter: classes.feedbackTickEnter,\n                enterActive: classes.feedbackTickEnterActive,\n                exit: classes.feedbackTickLeave,\n                exitActive: classes.feedbackTickLeaveActive,\n              }}\n              timeout={{ enter: 700, exit: 300 }}\n            >\n              {icon}\n            </CSSTransition>\n          )}\n        </TransitionGroup>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(stylesheet, { name: 'FeedbackTick' })(FeedbackTick);\n"],"file":"feedback-tick.js"}

package/lib/index.js

@@ -35,9 +35,9 @@ var _debug = _interopRequireDefault(require("debug"));
 
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
 
-var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
+var _mathRendering = require("@pie-lib/math-rendering");
 
-var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+var _renderUi = require("@pie-lib/render-ui");
 
 var _sessionUpdater = require("./session-updater");
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","model","audioComplete","elementContext","autoplayAudioEnabled","completeAudioEnabled","audio","querySelector","isInsidePrompt","closest","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_boundHandleKeyDown","handleKeyDown","bind","_keyboardEventsEnabled","_audioInitialized","_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","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","audioStartTime","Date","getTime","handleEnded","audioEndTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","window","event","mode","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 { EnableAudioAutoplayImage } from '@pie-lib/pie-toolbox/render-ui';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model, audioComplete, elementContext) => {\n  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};\n\n  // check audio completion if audio settings are enabled and audio actually exists\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    if (elementContext) {\n      const audio = elementContext.querySelector('audio');\n      const isInsidePrompt = audio && audio.closest('#preview-prompt');\n      \n      // only require audio completion if audio exists and is inside the prompt\n      if (audio && isInsidePrompt) {\n        return false;\n      }\n    }\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    this._audioInitialized = 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, this)),\n      );\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new ModelSetEvent(\n            this.tagName.toLowerCase(),\n            isComplete(this._session, this._model, this.audioComplete, this),\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    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio\n    this._audioInitialized = false;\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      cursor: 'pointer'\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\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    // 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          if (this._audioInitialized) return;\n\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\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              container.removeChild(info);\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            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n\n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              container.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          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n          // set to true to prevent multiple initializations\n          this._audioInitialized = true;\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    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\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 { mode } = this._model;\n    if (mode !== 'gather') {\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 <= -1 || 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","elementContext","autoplayAudioEnabled","completeAudioEnabled","audio","querySelector","isInsidePrompt","closest","value","choiceMode","minSelections","maxSelections","selections","length","MultipleChoice","_model","_session","_boundHandleKeyDown","handleKeyDown","bind","_keyboardEventsEnabled","_audioInitialized","_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","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","audioStartTime","Date","getTime","handleEnded","audioEndTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","window","event","mode","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/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session, model, audioComplete, elementContext) => {\n  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};\n\n  // check audio completion if audio settings are enabled and audio actually exists\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    if (elementContext) {\n      const audio = elementContext.querySelector('audio');\n      const isInsidePrompt = audio && audio.closest('#preview-prompt');\n      \n      // only require audio completion if audio exists and is inside the prompt\n      if (audio && isInsidePrompt) {\n        return false;\n      }\n    }\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    this._audioInitialized = 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, this)),\n      );\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new ModelSetEvent(\n            this.tagName.toLowerCase(),\n            isComplete(this._session, this._model, this.audioComplete, this),\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    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio\n    this._audioInitialized = false;\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      cursor: 'pointer'\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\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    // 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          if (this._audioInitialized) return;\n\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\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              container.removeChild(info);\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            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n\n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              container.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          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n          // set to true to prevent multiple initializations\n          this._audioInitialized = true;\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    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\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 { mode } = this._model;\n    if (mode !== 'gather') {\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 <= -1 || 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/main.js

@@ -27,7 +27,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styles = require("@material-ui/core/styles");
 
-var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+var _renderUi = require("@pie-lib/render-ui");
 
 var _multipleChoice = _interopRequireDefault(require("./multiple-choice"));
 

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["styles","Main","props","model","onChoiceChanged","session","onShowCorrectToggle","extraCSSRules","fontSizeFactor","React","Component","PropTypes","object","func","classes","isRequired","shape","names","arrayOf","string","rules","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO,EAAP;AAAA,CAAf;;IAEMC,I;;;;;AAiBJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAAiE,KAAKA,KAAtE;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AAAA,UAAyCC,mBAAzC,eAAyCA,mBAAzC;AACA,UAAQC,aAAR,GAA0CJ,KAA1C,CAAQI,aAAR;AAAA,UAAuBC,cAAvB,GAA0CL,KAA1C,CAAuBK,cAAvB,CAFO,CAIP;;AACA,0BACE,gCAAC,uBAAD;AAAe,QAAA,aAAa,EAAED,aAA9B;AAA6C,QAAA,cAAc,EAAEC;AAA7D,sBACE,gCAAC,0BAAD,gCACML,KADN;AAEE,QAAA,OAAO,EAAEE,OAFX;AAGE,QAAA,eAAe,EAAED,eAHnB;AAIE,QAAA,mBAAmB,EAAEE;AAJvB,SADF,CADF;AAUD;;;EApCgBG,kBAAMC,S;;iCAAnBT,I,eACe;AACjBE,EAAAA,KAAK,EAAEQ,sBAAUC,MADA;AAEjBP,EAAAA,OAAO,EAAEM,sBAAUC,MAFF;AAGjBR,EAAAA,eAAe,EAAEO,sBAAUE,IAHV;AAIjBC,EAAAA,OAAO,EAAEH,sBAAUC,MAAV,CAAiBG,UAJT;AAKjBT,EAAAA,mBAAmB,EAAEK,sBAAUE,IALd;AAMjBN,EAAAA,aAAa,EAAEI,sBAAUK,KAAV,CAAgB;AAC7BC,IAAAA,KAAK,EAAEN,sBAAUO,OAAV,CAAkBP,sBAAUQ,MAA5B,CADsB;AAE7BC,IAAAA,KAAK,EAAET,sBAAUQ;AAFY,GAAhB;AANE,C;iCADflB,I,kBAakB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AA0BxB,IAAMgB,MAAM,GAAG,wBAAWrB,MAAX,EAAmB;AAAEsB,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAqCrB,IAArC,CAAf;AAEA,IAAMsB,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACxB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEqB;AAAzB,kBACE,gCAAC,MAAD,EAAYrB,KAAZ,CADF,CADW;AAAA,CAAb;;eAMewB,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport { PreviewLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nconst styles = () => ({});\n\nclass Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onChoiceChanged: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n    onShowCorrectToggle: PropTypes.func,\n    extraCSSRules: PropTypes.shape({\n      names: PropTypes.arrayOf(PropTypes.string),\n      rules: PropTypes.string,\n    }),\n  };\n\n  static defaultProps = {\n    model: {},\n    session: {},\n  };\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const { model, onChoiceChanged, session, onShowCorrectToggle } = this.props;\n    const { extraCSSRules, fontSizeFactor } = model;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout extraCSSRules={extraCSSRules} fontSizeFactor={fontSizeFactor}>\n        <MultipleChoice\n          {...model}\n          session={session}\n          onChoiceChanged={onChoiceChanged}\n          onShowCorrectToggle={onShowCorrectToggle}\n        />\n      </PreviewLayout>\n    );\n  }\n}\n\nconst Styled = withStyles(styles, { name: 'Main' })(Main);\n\nconst theme = createMuiTheme({\n  typography: {\n    useNextVariants: true,\n  },\n});\n\nconst Root = (props) => (\n  <MuiThemeProvider theme={theme}>\n    <Styled {...props} />\n  </MuiThemeProvider>\n);\n\nexport default Root;\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["styles","Main","props","model","onChoiceChanged","session","onShowCorrectToggle","extraCSSRules","fontSizeFactor","React","Component","PropTypes","object","func","classes","isRequired","shape","names","arrayOf","string","rules","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO,EAAP;AAAA,CAAf;;IAEMC,I;;;;;AAiBJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAAiE,KAAKA,KAAtE;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AAAA,UAAyCC,mBAAzC,eAAyCA,mBAAzC;AACA,UAAQC,aAAR,GAA0CJ,KAA1C,CAAQI,aAAR;AAAA,UAAuBC,cAAvB,GAA0CL,KAA1C,CAAuBK,cAAvB,CAFO,CAIP;;AACA,0BACE,gCAAC,uBAAD;AAAe,QAAA,aAAa,EAAED,aAA9B;AAA6C,QAAA,cAAc,EAAEC;AAA7D,sBACE,gCAAC,0BAAD,gCACML,KADN;AAEE,QAAA,OAAO,EAAEE,OAFX;AAGE,QAAA,eAAe,EAAED,eAHnB;AAIE,QAAA,mBAAmB,EAAEE;AAJvB,SADF,CADF;AAUD;;;EApCgBG,kBAAMC,S;;iCAAnBT,I,eACe;AACjBE,EAAAA,KAAK,EAAEQ,sBAAUC,MADA;AAEjBP,EAAAA,OAAO,EAAEM,sBAAUC,MAFF;AAGjBR,EAAAA,eAAe,EAAEO,sBAAUE,IAHV;AAIjBC,EAAAA,OAAO,EAAEH,sBAAUC,MAAV,CAAiBG,UAJT;AAKjBT,EAAAA,mBAAmB,EAAEK,sBAAUE,IALd;AAMjBN,EAAAA,aAAa,EAAEI,sBAAUK,KAAV,CAAgB;AAC7BC,IAAAA,KAAK,EAAEN,sBAAUO,OAAV,CAAkBP,sBAAUQ,MAA5B,CADsB;AAE7BC,IAAAA,KAAK,EAAET,sBAAUQ;AAFY,GAAhB;AANE,C;iCADflB,I,kBAakB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AA0BxB,IAAMgB,MAAM,GAAG,wBAAWrB,MAAX,EAAmB;AAAEsB,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAqCrB,IAArC,CAAf;AAEA,IAAMsB,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACxB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEqB;AAAzB,kBACE,gCAAC,MAAD,EAAYrB,KAAZ,CADF,CADW;AAAA,CAAb;;eAMewB,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport { PreviewLayout } from '@pie-lib/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nconst styles = () => ({});\n\nclass Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onChoiceChanged: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n    onShowCorrectToggle: PropTypes.func,\n    extraCSSRules: PropTypes.shape({\n      names: PropTypes.arrayOf(PropTypes.string),\n      rules: PropTypes.string,\n    }),\n  };\n\n  static defaultProps = {\n    model: {},\n    session: {},\n  };\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const { model, onChoiceChanged, session, onShowCorrectToggle } = this.props;\n    const { extraCSSRules, fontSizeFactor } = model;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout extraCSSRules={extraCSSRules} fontSizeFactor={fontSizeFactor}>\n        <MultipleChoice\n          {...model}\n          session={session}\n          onChoiceChanged={onChoiceChanged}\n          onShowCorrectToggle={onShowCorrectToggle}\n        />\n      </PreviewLayout>\n    );\n  }\n}\n\nconst Styled = withStyles(styles, { name: 'Main' })(Main);\n\nconst theme = createMuiTheme({\n  typography: {\n    useNextVariants: true,\n  },\n});\n\nconst Root = (props) => (\n  <MuiThemeProvider theme={theme}>\n    <Styled {...props} />\n  </MuiThemeProvider>\n);\n\nexport default Root;\n"],"file":"main.js"}

package/lib/multiple-choice.js

@@ -25,15 +25,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _correctAnswerToggle = require("@pie-lib/pie-toolbox/correct-answer-toggle");
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _styles = require("@material-ui/core/styles");
 
-var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+var _renderUi = require("@pie-lib/render-ui");
 
-var _translator = _interopRequireDefault(require("@pie-lib/pie-toolbox/translator"));
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
 
 var _choice = _interopRequireDefault(require("./choice"));
 
@@ -372,7 +372,7 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
         tagName: 'legend',
         autoplayAudioEnabled: autoplayAudioEnabled,
         customAudioButton: customAudioButton
-      }), !alwaysShowCorrect && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
+      }), !alwaysShowCorrect && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
         show: showCorrectAnswerToggle,
         toggled: showCorrect,
         onToggle: this.onToggle.bind(this),
@@ -385,6 +385,11 @@ var MultipleChoice = /*#__PURE__*/function (_React$Component) {
           autoFocusRef: index === 0 ? _this3.firstInputRef : null,
           choicesLayout: _this3.props.choicesLayout,
           selectedAnswerBackgroundColor: _this3.props.selectedAnswerBackgroundColor,
+          selectedAnswerStrokeColor: _this3.props.selectedAnswerStrokeColor,
+          selectedAnswerStrokeWidth: _this3.props.selectedAnswerStrokeWidth,
+          hoverAnswerBackgroundColor: _this3.props.hoverAnswerBackgroundColor,
+          hoverAnswerStrokeColor: _this3.props.hoverAnswerStrokeColor,
+          hoverAnswerStrokeWidth: _this3.props.hoverAnswerStrokeWidth,
           gridColumns: gridColumns,
           key: "choice-".concat(index),
           choice: choice,
@@ -437,6 +442,11 @@ exports.MultipleChoice = MultipleChoice;
   animationsDisabled: _propTypes["default"].bool,
   language: _propTypes["default"].string,
   selectedAnswerBackgroundColor: _propTypes["default"].string,
+  selectedAnswerStrokeColor: _propTypes["default"].string,
+  selectedAnswerStrokeWidth: _propTypes["default"].string,
+  hoverAnswerBackgroundColor: _propTypes["default"].string,
+  hoverAnswerStrokeColor: _propTypes["default"].string,
+  hoverAnswerStrokeWidth: _propTypes["default"].string,
   onShowCorrectToggle: _propTypes["default"].func,
   isSelectionButtonBelow: _propTypes["default"].bool,
   minSelections: _propTypes["default"].number,