@pie-element/ebsr 11.0.0 → 12.0.1-esmbeta.1

package/configure/node_modules/@pie-element/multiple-choice/lib/multiple-choice.js

@@ -0,0 +1,469 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MultipleChoice = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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/render-ui");
+
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+
+var _choice = _interopRequireDefault(require("./choice"));
+
+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); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+// MultipleChoice
+var translator = _translator["default"].translator;
+
+var styles = function styles(theme) {
+  return {
+    main: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      '& *': {
+        '-webkit-font-smoothing': 'antialiased'
+      },
+      position: 'relative',
+      // remove border from legend tags inside main to override the OT default styles
+      '& legend': {
+        border: 'none !important'
+      }
+    },
+    partLabel: {
+      display: 'block',
+      fontSize: 'inherit',
+      margin: '0',
+      fontWeight: 'normal',
+      paddingBottom: theme.spacing.unit * 2
+    },
+    teacherInstructions: {
+      marginBottom: theme.spacing.unit * 2
+    },
+    horizontalLayout: {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    },
+    gridLayout: {
+      display: 'grid'
+    },
+    fieldset: {
+      border: '0px',
+      padding: '0.01em 0 0 0',
+      margin: '0px',
+      minWidth: '0px',
+      '&:focus': {
+        outline: 'none'
+      }
+    },
+    srOnly: {
+      position: 'absolute',
+      left: '-10000px',
+      top: 'auto',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: theme.palette.error.main,
+      paddingTop: theme.spacing.unit
+    }
+  };
+};
+
+var MultipleChoice = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(MultipleChoice, _React$Component);
+
+  var _super = _createSuper(MultipleChoice);
+
+  function MultipleChoice(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, MultipleChoice);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (event) {
+      var _event$target = event.target,
+          value = _event$target.value,
+          checked = _event$target.checked;
+      var _this$props = _this.props,
+          maxSelections = _this$props.maxSelections,
+          onChoiceChanged = _this$props.onChoiceChanged,
+          session = _this$props.session;
+
+      if (session.value && session.value.length >= maxSelections) {
+        // show/hide max selections error when user select/deselect an answer
+        _this.setState({
+          maxSelectionsErrorState: checked
+        });
+
+        if (checked) {
+          // prevent selecting more answers
+          return;
+        }
+      }
+
+      onChoiceChanged({
+        value: value,
+        selected: checked,
+        selector: 'Mouse'
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onToggle", function () {
+      if (_this.props.mode === 'evaluate') {
+        _this.setState({
+          showCorrect: !_this.state.showCorrect
+        }, function () {
+          if (_this.props.onShowCorrectToggle) {
+            _this.props.onShowCorrectToggle();
+          }
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getCorrectness", function () {
+      var choice = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var isCorrect = choice.correct;
+
+      var isChecked = _this.isSelected(choice.value);
+
+      if (_this.state.showCorrect) {
+        return isCorrect ? 'correct' : undefined;
+      }
+
+      if (isCorrect) {
+        if (isChecked) {
+          // A correct answer is selected: marked with a green checkmark
+          return 'correct';
+        } else {
+          // A correct answer is NOT selected: marked with an orange X
+          return 'incorrect';
+        }
+      } else {
+        if (isChecked) {
+          // An incorrect answer is selected: marked with an orange X
+          return 'incorrect';
+        } else {
+          // An incorrect answer is NOT selected: not marked
+          return undefined;
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleGroupFocus", function (e) {
+      var fieldset = e.currentTarget;
+      var activeEl = document.activeElement;
+
+      if (fieldset.contains(activeEl) && activeEl !== fieldset) {
+        return;
+      } // Only focus the first input if user is tabbing forward
+
+
+      if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {
+        var _this$firstInputRef;
+
+        if ((_this$firstInputRef = _this.firstInputRef) !== null && _this$firstInputRef !== void 0 && _this$firstInputRef.current) {
+          _this.firstInputRef.current.focus();
+        }
+      }
+    });
+    _this.state = {
+      showCorrect: _this.props.alwaysShowCorrect || false,
+      maxSelectionsErrorState: false
+    };
+    _this.onToggle = _this.onToggle.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.firstInputRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(MultipleChoice, [{
+    key: "isSelected",
+    value: function isSelected(value) {
+      var sessionValue = this.props.session && this.props.session.value;
+      return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
+    } // handleChange was added for accessibility. Please see comments and videos from PD-2441.
+
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
+      if (!nextProps.correctResponse && this.state.showCorrect !== false) {
+        this.setState({
+          showCorrect: false
+        }, function () {
+          if (_this2.props.onShowCorrectToggle) {
+            _this2.props.onShowCorrectToggle();
+          }
+        });
+      }
+
+      if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {
+        this.setState({
+          showCorrect: true
+        }, function () {
+          if (_this2.props.onShowCorrectToggle) {
+            _this2.props.onShowCorrectToggle();
+          }
+        });
+      }
+    }
+  }, {
+    key: "indexToSymbol",
+    value: function indexToSymbol(index) {
+      if (this.props.keyMode === 'numbers') {
+        return "".concat(index + 1);
+      }
+
+      if (this.props.keyMode === 'letters') {
+        return String.fromCharCode(97 + index).toUpperCase();
+      }
+
+      return '';
+    }
+  }, {
+    key: "getChecked",
+    value: function getChecked(choice) {
+      // to determine if we are in evaluate mode or print mode
+      // since both modes have showCorrect but it interferes with "browse mode" in IBX if the print props are set
+      var isEvaluateMode = this.state.showCorrect && this.props.mode === 'evaluate';
+      var isPrintMode = this.props.alwaysShowCorrect && (!this.props.session || !this.props.session.value || this.props.session.value.length === 0);
+
+      if (isEvaluateMode || isPrintMode) {
+        return choice.correct || false;
+      }
+
+      return this.isSelected(choice.value);
+    } // renderHeading function was added for accessibility.
+
+  }, {
+    key: "renderHeading",
+    value: function renderHeading() {
+      var _this$props2 = this.props,
+          mode = _this$props2.mode,
+          choiceMode = _this$props2.choiceMode,
+          classes = _this$props2.classes;
+
+      if (mode !== 'gather') {
+        return null;
+      }
+
+      return choiceMode === 'radio' ? /*#__PURE__*/_react["default"].createElement("h3", {
+        className: classes.srOnly
+      }, "Multiple Choice Question") : /*#__PURE__*/_react["default"].createElement("h3", {
+        className: classes.srOnly
+      }, "Multiple Select Question");
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this3 = this;
+
+      var _this$props3 = this.props,
+          mode = _this$props3.mode,
+          disabled = _this$props3.disabled,
+          className = _this$props3.className,
+          _this$props3$choices = _this$props3.choices,
+          choices = _this$props3$choices === void 0 ? [] : _this$props3$choices,
+          choiceMode = _this$props3.choiceMode,
+          gridColumns = _this$props3.gridColumns,
+          partLabel = _this$props3.partLabel,
+          prompt = _this$props3.prompt,
+          responseCorrect = _this$props3.responseCorrect,
+          teacherInstructions = _this$props3.teacherInstructions,
+          classes = _this$props3.classes,
+          alwaysShowCorrect = _this$props3.alwaysShowCorrect,
+          animationsDisabled = _this$props3.animationsDisabled,
+          language = _this$props3.language,
+          isSelectionButtonBelow = _this$props3.isSelectionButtonBelow,
+          minSelections = _this$props3.minSelections,
+          maxSelections = _this$props3.maxSelections,
+          autoplayAudioEnabled = _this$props3.autoplayAudioEnabled,
+          session = _this$props3.session,
+          customAudioButton = _this$props3.customAudioButton;
+      var _this$state = this.state,
+          showCorrect = _this$state.showCorrect,
+          maxSelectionsErrorState = _this$state.maxSelectionsErrorState;
+      var isEvaluateMode = mode === 'evaluate';
+      var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
+      var columnsStyle = gridColumns > 1 ? {
+        gridTemplateColumns: "repeat(".concat(gridColumns, ", 1fr)")
+      } : undefined;
+      var selections = session.value && session.value.length || 0;
+
+      var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        tagName: "div",
+        className: "prompt",
+        defaultClassName: "teacher-instructions",
+        prompt: teacherInstructions
+      });
+
+      var getMultipleChoiceMinSelectionErrorMessage = function getMultipleChoiceMinSelectionErrorMessage() {
+        if (minSelections && maxSelections) {
+          return minSelections === maxSelections ? translator.t('translation:multipleChoice:minmaxSelections_equal', {
+            lng: language,
+            minSelections: minSelections
+          }) : translator.t('translation:multipleChoice:minmaxSelections_range', {
+            lng: language,
+            minSelections: minSelections,
+            maxSelections: maxSelections
+          });
+        }
+
+        if (minSelections) {
+          return translator.t('translation:multipleChoice:minSelections', {
+            lng: language,
+            minSelections: minSelections
+          });
+        }
+
+        return '';
+      };
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        id: 'main-container',
+        className: (0, _classnames["default"])(classes.main, className, 'multiple-choice')
+      }, partLabel && /*#__PURE__*/_react["default"].createElement("h2", {
+        className: classes.partLabel
+      }, partLabel), this.renderHeading(), teacherInstructions && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.teacherInstructions
+      }, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Teacher Instructions',
+          visible: 'Hide Teacher Instructions'
+        }
+      }, teacherInstructionsDiv) : teacherInstructionsDiv), /*#__PURE__*/_react["default"].createElement("fieldset", {
+        tabIndex: 0,
+        className: classes.fieldset,
+        onFocus: this.handleGroupFocus,
+        role: choiceMode === 'radio' ? 'radiogroup' : 'group'
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        defaultClassName: "prompt",
+        prompt: prompt,
+        tagName: 'legend',
+        autoplayAudioEnabled: autoplayAudioEnabled,
+        customAudioButton: customAudioButton
+      }), !alwaysShowCorrect && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+        show: showCorrectAnswerToggle,
+        toggled: showCorrect,
+        onToggle: this.onToggle.bind(this),
+        language: language
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.gridLayout, this.props.choicesLayout === 'grid'), (0, _defineProperty2["default"])(_classNames, classes.horizontalLayout, this.props.choicesLayout === 'horizontal'), _classNames)),
+        style: columnsStyle
+      }, choices.map(function (choice, index) {
+        return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
+          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,
+          index: index,
+          choicesLength: choices.length,
+          showCorrect: showCorrect,
+          isEvaluateMode: isEvaluateMode,
+          choiceMode: choiceMode,
+          disabled: disabled,
+          tagName: partLabel ? "group-".concat(partLabel) : 'group',
+          onChoiceChanged: _this3.handleChange,
+          hideTick: choice.hideTick,
+          checked: _this3.getChecked(choice),
+          correctness: isEvaluateMode ? _this3.getCorrectness(choice) : undefined,
+          displayKey: _this3.indexToSymbol(index),
+          isSelectionButtonBelow: isSelectionButtonBelow
+        });
+      }))), choiceMode === 'checkbox' && selections < minSelections && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, translator.t("translation:multipleChoice:maxSelections_".concat(maxSelections === 1 ? 'one' : 'other'), {
+        lng: language,
+        maxSelections: maxSelections
+      })));
+    }
+  }]);
+  return MultipleChoice;
+}(_react["default"].Component);
+
+exports.MultipleChoice = MultipleChoice;
+(0, _defineProperty2["default"])(MultipleChoice, "propTypes", {
+  className: _propTypes["default"].string,
+  mode: _propTypes["default"].oneOf(['gather', 'view', 'evaluate']),
+  choiceMode: _propTypes["default"].oneOf(['radio', 'checkbox']),
+  keyMode: _propTypes["default"].oneOf(['numbers', 'letters', 'none']),
+  choices: _propTypes["default"].array,
+  partLabel: _propTypes["default"].string,
+  prompt: _propTypes["default"].string,
+  teacherInstructions: _propTypes["default"].string,
+  session: _propTypes["default"].object,
+  disabled: _propTypes["default"].bool,
+  onChoiceChanged: _propTypes["default"].func,
+  responseCorrect: _propTypes["default"].bool,
+  classes: _propTypes["default"].object.isRequired,
+  correctResponse: _propTypes["default"].array,
+  choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal']),
+  gridColumns: _propTypes["default"].string,
+  alwaysShowCorrect: _propTypes["default"].bool,
+  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,
+  maxSelections: _propTypes["default"].number,
+  autoplayAudioEnabled: _propTypes["default"].bool,
+  customAudioButton: {
+    playImage: _propTypes["default"].string,
+    pauseImage: _propTypes["default"].string
+  }
+});
+MultipleChoice.defaultProps = {
+  session: {
+    value: []
+  }
+};
+
+var _default = (0, _styles.withStyles)(styles)(MultipleChoice);
+
+exports["default"] = _default;
+//# sourceMappingURL=multiple-choice.js.map

package/configure/node_modules/@pie-element/multiple-choice/lib/multiple-choice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/multiple-choice.jsx"],"names":["translator","Translator","styles","theme","main","color","text","backgroundColor","background","position","border","partLabel","display","fontSize","margin","fontWeight","paddingBottom","spacing","unit","teacherInstructions","marginBottom","horizontalLayout","flexDirection","flexWrap","gridLayout","fieldset","padding","minWidth","outline","srOnly","left","top","width","height","overflow","errorText","typography","palette","error","paddingTop","MultipleChoice","props","event","target","value","checked","maxSelections","onChoiceChanged","session","length","setState","maxSelectionsErrorState","selected","selector","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","e","currentTarget","activeEl","document","activeElement","contains","relatedTarget","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","firstInputRef","current","focus","alwaysShowCorrect","onToggle","bind","React","createRef","sessionValue","indexOf","nextProps","correctResponse","index","keyMode","String","fromCharCode","toUpperCase","isEvaluateMode","isPrintMode","choiceMode","classes","disabled","className","choices","gridColumns","prompt","responseCorrect","animationsDisabled","language","isSelectionButtonBelow","minSelections","autoplayAudioEnabled","customAudioButton","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","teacherInstructionsDiv","getMultipleChoiceMinSelectionErrorMessage","t","lng","renderHeading","hidden","visible","handleGroupFocus","choicesLayout","map","selectedAnswerBackgroundColor","selectedAnswerStrokeColor","selectedAnswerStrokeWidth","hoverAnswerBackgroundColor","hoverAnswerStrokeColor","hoverAnswerStrokeWidth","handleChange","hideTick","getChecked","getCorrectness","indexToSymbol","Component","PropTypes","string","oneOf","array","object","bool","func","isRequired","number","playImage","pauseImage","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport Translator from '@pie-lib/translator';\n\nimport StyledChoice from './choice';\n\n// MultipleChoice\n\nconst { translator } = Translator;\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& *': {\n      '-webkit-font-smoothing': 'antialiased',\n    },\n    position: 'relative',\n    // remove border from legend tags inside main to override the OT default styles\n    '& legend': {\n      border: 'none !important',\n    },\n  },\n  partLabel: {\n    display: 'block',\n    fontSize: 'inherit',\n    margin: '0',\n    fontWeight: 'normal',\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  horizontalLayout: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n  },\n  gridLayout: {\n    display: 'grid',\n  },\n  fieldset: {\n    border: '0px',\n    padding: '0.01em 0 0 0',\n    margin: '0px',\n    minWidth: '0px',\n    '&:focus': {\n      outline: 'none',\n    },\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    selectedAnswerStrokeColor: PropTypes.string,\n    selectedAnswerStrokeWidth: PropTypes.string,\n    hoverAnswerBackgroundColor: PropTypes.string,\n    hoverAnswerStrokeColor: PropTypes.string,\n    hoverAnswerStrokeWidth: PropTypes.string,\n    onShowCorrectToggle: PropTypes.func,\n    isSelectionButtonBelow: PropTypes.bool,\n    minSelections: PropTypes.number,\n    maxSelections: PropTypes.number,\n    autoplayAudioEnabled: PropTypes.bool,\n    customAudioButton: {\n      playImage: PropTypes.string,\n      pauseImage: PropTypes.string,\n    },\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: this.props.alwaysShowCorrect || false,\n      maxSelectionsErrorState: false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n    this.firstInputRef = React.createRef();\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  // handleChange was added for accessibility. Please see comments and videos from PD-2441.\n  handleChange = (event) => {\n    const { value, checked } = event.target;\n    const { maxSelections, onChoiceChanged, session } = this.props;\n\n    if (session.value && session.value.length >= maxSelections) {\n      // show/hide max selections error when user select/deselect an answer\n      this.setState({ maxSelectionsErrorState: checked });\n\n      if (checked) {\n        // prevent selecting more answers\n        return;\n      }\n    }\n\n    onChoiceChanged({ value, selected: checked, selector: 'Mouse' });\n  };\n\n  onToggle = () => {\n    if (this.props.mode === 'evaluate') {\n      this.setState({ showCorrect: !this.state.showCorrect }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n      this.setState({ showCorrect: false }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n\n    if (nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n      this.setState({ showCorrect: true }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  }\n\n  indexToSymbol(index) {\n    if (this.props.keyMode === 'numbers') {\n      return `${index + 1}`;\n    }\n\n    if (this.props.keyMode === 'letters') {\n      return String.fromCharCode(97 + index).toUpperCase();\n    }\n\n    return '';\n  }\n\n  getCorrectness = (choice = {}) => {\n    const isCorrect = choice.correct;\n    const isChecked = this.isSelected(choice.value);\n\n    if (this.state.showCorrect) {\n      return isCorrect ? 'correct' : undefined;\n    }\n\n    if (isCorrect) {\n      if (isChecked) {\n        // A correct answer is selected: marked with a green checkmark\n        return 'correct';\n      } else {\n        // A correct answer is NOT selected: marked with an orange X\n        return 'incorrect';\n      }\n    } else {\n      if (isChecked) {\n        // An incorrect answer is selected: marked with an orange X\n        return 'incorrect';\n      } else {\n        // An incorrect answer is NOT selected: not marked\n        return undefined;\n      }\n    }\n  };\n\n  getChecked(choice) {\n    // to determine if we are in evaluate mode or print mode\n    // since both modes have showCorrect but it interferes with \"browse mode\" in IBX if the print props are set\n    const isEvaluateMode = this.state.showCorrect && this.props.mode === 'evaluate';\n    const isPrintMode =\n      this.props.alwaysShowCorrect &&\n      (!this.props.session || !this.props.session.value || this.props.session.value.length === 0);\n\n    if (isEvaluateMode || isPrintMode) {\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      <h3 className={classes.srOnly}>Multiple Choice Question</h3>\n    ) : (\n      <h3 className={classes.srOnly}>Multiple Select Question</h3>\n    );\n  }\n\n  handleGroupFocus = (e) => {\n    const fieldset = e.currentTarget;\n    const activeEl = document.activeElement;\n\n    if (fieldset.contains(activeEl) && activeEl !== fieldset) {\n      return;\n    }\n\n    // Only focus the first input if user is tabbing forward\n    if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {\n      if (this.firstInputRef?.current) {\n        this.firstInputRef.current.focus();\n      }\n    }\n  };\n\n  render() {\n    const {\n      mode,\n      disabled,\n      className,\n      choices = [],\n      choiceMode,\n      gridColumns,\n      partLabel,\n      prompt,\n      responseCorrect,\n      teacherInstructions,\n      classes,\n      alwaysShowCorrect,\n      animationsDisabled,\n      language,\n      isSelectionButtonBelow,\n      minSelections,\n      maxSelections,\n      autoplayAudioEnabled,\n      session,\n      customAudioButton,\n    } = this.props;\n    const { showCorrect, maxSelectionsErrorState } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n    const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n    const selections = (session.value && session.value.length) || 0;\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    const getMultipleChoiceMinSelectionErrorMessage = () => {\n      if (minSelections && maxSelections) {\n        return minSelections === maxSelections\n          ? translator.t('translation:multipleChoice:minmaxSelections_equal', { lng: language, minSelections })\n          : translator.t('translation:multipleChoice:minmaxSelections_range', {\n              lng: language,\n              minSelections,\n              maxSelections,\n            });\n      }\n\n      if (minSelections) {\n        return translator.t('translation:multipleChoice:minSelections', { lng: language, minSelections });\n      }\n\n      return '';\n    };\n\n    return (\n      <div id={'main-container'} className={classNames(classes.main, className, 'multiple-choice')}>\n        {partLabel && <h2 className={classes.partLabel}>{partLabel}</h2>}\n\n        {this.renderHeading()}\n\n        {teacherInstructions && (\n          <div className={classes.teacherInstructions}>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{\n                  hidden: 'Show Teacher Instructions',\n                  visible: 'Hide Teacher Instructions',\n                }}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </div>\n        )}\n\n        <fieldset\n          tabIndex={0}\n          className={classes.fieldset}\n          onFocus={this.handleGroupFocus}\n          role={choiceMode === 'radio' ? 'radiogroup' : 'group'}\n        >\n          <PreviewPrompt\n            className=\"prompt\"\n            defaultClassName=\"prompt\"\n            prompt={prompt}\n            tagName={'legend'}\n            autoplayAudioEnabled={autoplayAudioEnabled}\n            customAudioButton={customAudioButton}\n          />\n\n          {!alwaysShowCorrect && (\n            <CorrectAnswerToggle\n              show={showCorrectAnswerToggle}\n              toggled={showCorrect}\n              onToggle={this.onToggle.bind(this)}\n              language={language}\n            />\n          )}\n\n          <div\n            className={classNames({\n              [classes.gridLayout]: this.props.choicesLayout === 'grid',\n              [classes.horizontalLayout]: this.props.choicesLayout === 'horizontal',\n            })}\n            style={columnsStyle}\n          >\n            {choices.map((choice, index) => (\n              <StyledChoice\n                autoFocusRef={index === 0 ? this.firstInputRef : null}\n                choicesLayout={this.props.choicesLayout}\n                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\n                selectedAnswerStrokeColor={this.props.selectedAnswerStrokeColor}\n                selectedAnswerStrokeWidth={this.props.selectedAnswerStrokeWidth}\n                hoverAnswerBackgroundColor={this.props.hoverAnswerBackgroundColor}\n                hoverAnswerStrokeColor={this.props.hoverAnswerStrokeColor}\n                hoverAnswerStrokeWidth={this.props.hoverAnswerStrokeWidth}\n                gridColumns={gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                tagName={partLabel ? `group-${partLabel}` : 'group'}\n                onChoiceChanged={this.handleChange}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n                isSelectionButtonBelow={isSelectionButtonBelow}\n              />\n            ))}\n          </div>\n        </fieldset>\n\n        {choiceMode === 'checkbox' && selections < minSelections && (\n          <div className={classes.errorText}>{getMultipleChoiceMinSelectionErrorMessage()}</div>\n        )}\n        {choiceMode === 'checkbox' && maxSelectionsErrorState && (\n          <div className={classes.errorText}>\n            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              maxSelections,\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default withStyles(styles)(MultipleChoice);\n"],"file":"multiple-choice.js"}

package/configure/node_modules/@pie-element/multiple-choice/lib/print.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _main = _interopRequireDefault(require("./main"));
+
+var _mathRendering = require("@pie-lib/math-rendering");
+
+var _debug = _interopRequireDefault(require("debug"));
+
+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); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var log = (0, _debug["default"])('pie-element:multiple-choice:print');
+/**
+ * Live in same package as main element - so we can access some of the shared comps!
+ *
+ * - update pslb to build print if src/print.js is there
+ * - update demo el
+ * - get configure/controller building
+ */
+
+var preparePrintModel = function preparePrintModel(model, opts) {
+  var instr = opts.role === 'instructor';
+  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;
+  model.teacherInstructions = instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;
+  model.showTeacherInstructions = instr;
+  model.alwaysShowCorrect = instr;
+  model.mode = instr ? 'evaluate' : model.mode;
+  model.disabled = true;
+  model.animationsDisabled = true;
+  model.lockChoiceOrder = true;
+  model.choicesLayout = model.choicesLayout || 'vertical';
+  var choices = (0, _cloneDeep["default"])(model.choices);
+  model.choices = choices.map(function (c) {
+    c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;
+    c.hideTick = instr;
+    c.feedback = undefined;
+    return c;
+  });
+  model.keyMode = model.choicePrefix || 'letters';
+  return model;
+};
+
+var MultipleChoicePrint = /*#__PURE__*/function (_HTMLElement) {
+  (0, _inherits2["default"])(MultipleChoicePrint, _HTMLElement);
+
+  var _super = _createSuper(MultipleChoicePrint);
+
+  function MultipleChoicePrint() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, MultipleChoicePrint);
+    _this = _super.call(this);
+    _this._options = null;
+    _this._model = null;
+    _this._session = [];
+    _this._rerender = (0, _debounce["default"])(function () {
+      if (_this._model && _this._session) {
+        var printModel = preparePrintModel(_this._model, _this._options);
+
+        var element = _this._options && /*#__PURE__*/_react["default"].createElement(_main["default"], {
+          model: printModel,
+          session: {}
+        });
+
+        _reactDom["default"].render(element, (0, _assertThisInitialized2["default"])(_this), function () {
+          log('render complete - render math');
+          (0, _mathRendering.renderMath)((0, _assertThisInitialized2["default"])(_this));
+        });
+      } else {
+        log('skip');
+      }
+    }, 50, {
+      leading: false,
+      trailing: true
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(MultipleChoicePrint, [{
+    key: "options",
+    set: function set(o) {
+      this._options = o;
+    }
+  }, {
+    key: "model",
+    set: function set(s) {
+      this._model = s;
+
+      this._rerender();
+    }
+  }, {
+    key: "connectedCallback",
+    value: function connectedCallback() {}
+  }]);
+  return MultipleChoicePrint;
+}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
+
+exports["default"] = MultipleChoicePrint;
+//# sourceMappingURL=print.js.map