@pie-element/math-inline 6.5.0 → 6.5.1-beta.1

package/lib/main.js

@@ -1,830 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Main = 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 _mathInput = require("@pie-lib/math-input");
-
-var _renderUi = require("@pie-lib/render-ui");
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
-var _styles = require("@material-ui/core/styles");
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
-var _utils = require("./utils");
-
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _simpleQuestionBlock = _interopRequireDefault(require("./simple-question-block"));
-
-var _mathquill = _interopRequireDefault(require("@pie-framework/mathquill"));
-
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 registered = false;
-var NEWLINE_LATEX = /\\newline/g;
-var REGEX = /{{response}}/gm;
-var DEFAULT_KEYPAD_VARIANT = 6;
-var IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
-function generateAdditionalKeys() {
-  var keyData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return keyData.map(function (key) {
-    return {
-      name: key,
-      latex: key,
-      write: key,
-      label: key
-    };
-  });
-}
-
-function getKeyPadWidth() {
-  var additionalKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var equationEditor = arguments.length > 1 ? arguments[1] : undefined;
-  return Math.floor(additionalKeys.length / 5) * 30 + (equationEditor === 'miscellaneous' ? 600 : 500);
-}
-
-function prepareForStatic(model, state) {
-  var _ref = model || {},
-      config = _ref.config,
-      disabled = _ref.disabled;
-
-  var _ref2 = config || {},
-      expression = _ref2.expression,
-      responses = _ref2.responses,
-      printMode = _ref2.printMode,
-      alwaysShowCorrect = _ref2.alwaysShowCorrect;
-
-  if (config && expression) {
-    var modelExpression = expression;
-
-    if (state.showCorrect) {
-      return responses && responses.length && responses[0].answer;
-    }
-
-    var answerBlocks = 1; // assume one at least
-    // build out local state model using responses declared in expression
-
-    return (modelExpression || '').replace(REGEX, function () {
-      var answer = state.session.answers["r".concat(answerBlocks)];
-
-      if (printMode && !alwaysShowCorrect) {
-        var blankSpace = '\\ \\ '.repeat(30) + '\\newline ';
-        return "\\MathQuillMathField[r".concat(answerBlocks++, "]{").concat(blankSpace.repeat(3), "}");
-      }
-
-      if (disabled) {
-        return "\\embed{answerBlock}[r".concat(answerBlocks++, "]");
-      }
-
-      return "\\MathQuillMathField[r".concat(answerBlocks++, "]{").concat(answer && answer.value || '', "}");
-    }).replace(NEWLINE_LATEX, '\\embed{newLine}[]');
-  }
-}
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAnswerBlockDomUpdate", function () {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          classes = _this$props.classes;
-      var _this$state = _this.state,
-          session = _this$state.session,
-          showCorrect = _this$state.showCorrect;
-      var answers = session.answers;
-
-      if (_this.root && model.disabled && !showCorrect) {
-        Object.keys(answers).forEach(function (answerId) {
-          var el = _this.root.querySelector("#".concat(answerId));
-
-          var indexEl = _this.root.querySelector("#".concat(answerId, "Index")); // const correct = model.correctness && model.correctness.correct;
-
-
-          if (el) {
-            var MQ = _mathquill["default"].getInterface(2);
-
-            var answer = answers[answerId];
-            el.textContent = answer && answer.value || '';
-
-            if (!model.view) {// for now, we're not going to be showing individual response correctness
-              // TODO re-attach the classes once we are
-              // el.parentElement.parentElement.classList.add(
-              //   correct ? classes.correct : classes.incorrect
-              // );
-            } else {
-              el.parentElement.parentElement.classList.remove(classes.correct);
-              el.parentElement.parentElement.classList.remove(classes.incorrect);
-            }
-
-            MQ.StaticMath(el); // For now, we're not going to be indexing response blocks
-            // TODO go back to indexing once we support individual response correctness
-            // indexEl.textContent = `R${idx + 1}`;
-
-            indexEl.textContent = 'R';
-          }
-        });
-      }
-
-      (0, _mathRendering.renderMath)(_this.root);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDone", function () {});
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSimpleResponseChange", function (response) {
-      _this.setState(function (state) {
-        return {
-          session: _objectSpread(_objectSpread({}, state.session), {}, {
-            response: response
-          })
-        };
-      }, _this.callOnSessionChange);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSubFieldFocus", function (id) {
-      _this.setState({
-        activeAnswerBlock: id
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toNodeData", function (data) {
-      if (!data) {
-        return;
-      }
-
-      var type = data.type,
-          value = data.value;
-
-      if (type === 'command' || type === 'cursor') {
-        return data;
-      } else if (type === 'answer') {
-        return _objectSpread({
-          type: 'answer'
-        }, data);
-      } else if (value === 'clear') {
-        return {
-          type: 'clear'
-        };
-      } else {
-        return {
-          type: 'write',
-          value: value
-        };
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInput", function (input) {
-      _this.input = input;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (data) {
-      var c = _this.toNodeData(data);
-
-      if (c.type === 'clear') {
-        _this.input.clear();
-      } else if (c.type === 'command') {
-        if (Array.isArray(c.value)) {
-          c.value.forEach(function (vv) {
-            _this.input.cmd(vv);
-          });
-        } else {
-          _this.input.cmd(c.value);
-        }
-      } else if (c.type === 'cursor') {
-        _this.input.keystroke(c.value);
-      } else {
-        _this.input.write(c.value);
-      }
-
-      _this.input.focus();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "callOnSessionChange", function () {
-      var onSessionChange = _this.props.onSessionChange;
-
-      if (onSessionChange) {
-        onSessionChange(_this.state.session);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleShowCorrect", function (show) {
-      _this.setState({
-        showCorrect: show
-      }, _this.handleAnswerBlockDomUpdate);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "subFieldChanged", function (name, subfieldValue) {
-      (0, _mathInput.updateSpans)();
-
-      if (name) {
-        _this.setState(function (state) {
-          return {
-            session: _objectSpread(_objectSpread({}, state.session), {}, {
-              completeAnswer: _this.mqStatic && _this.mqStatic.mathField.latex(),
-              answers: _objectSpread(_objectSpread({}, state.session.answers), {}, (0, _defineProperty2["default"])({}, name, {
-                value: subfieldValue
-              }))
-            })
-          };
-        }, _this.callOnSessionChange);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFieldName", function (changeField, fields) {
-      var answers = _this.state.session.answers;
-
-      if (Object.keys(answers || {}).length) {
-        var keys = Object.keys(answers);
-        return keys.find(function (k) {
-          var tf = fields[k];
-          return tf && tf.id == changeField.id;
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (e) {
-      var _relatedTarget$offset, _relatedTarget$offset2, _relatedTarget$offset3, _relatedTarget$offset4, _relatedTarget$offset5, _relatedTarget$offset6, _relatedTarget$offset7;
-
-      var _ref3 = e || {},
-          relatedTarget = _ref3.relatedTarget,
-          currentTarget = _ref3.currentTarget;
-
-      if (!relatedTarget || !currentTarget || !IS_SAFARI && !(relatedTarget !== null && relatedTarget !== void 0 && (_relatedTarget$offset = relatedTarget.offsetParent) !== null && _relatedTarget$offset !== void 0 && (_relatedTarget$offset2 = _relatedTarget$offset.children[0]) !== null && _relatedTarget$offset2 !== void 0 && (_relatedTarget$offset3 = _relatedTarget$offset2.attributes) !== null && _relatedTarget$offset3 !== void 0 && _relatedTarget$offset3['data-keypad']) || IS_SAFARI && !(relatedTarget !== null && relatedTarget !== void 0 && (_relatedTarget$offset4 = relatedTarget.offsetParent) !== null && _relatedTarget$offset4 !== void 0 && (_relatedTarget$offset5 = _relatedTarget$offset4.children[0]) !== null && _relatedTarget$offset5 !== void 0 && (_relatedTarget$offset6 = _relatedTarget$offset5.children[0]) !== null && _relatedTarget$offset6 !== void 0 && (_relatedTarget$offset7 = _relatedTarget$offset6.attributes) !== null && _relatedTarget$offset7 !== void 0 && _relatedTarget$offset7['data-keypad'])) {
-        _this.setState({
-          activeAnswerBlock: ''
-        });
-      }
-    });
-    var _answers = {};
-
-    if (props.model.config && props.model.config.expression) {
-      var answerBlocks = 1; // assume one at least
-      // build out local state model using responses declared in expression
-
-      (props.model.config.expression || '').replace(REGEX, function () {
-        _answers["r".concat(answerBlocks)] = {
-          value: props.session && props.session.answers && props.session.answers["r".concat(answerBlocks)] && props.session.answers["r".concat(answerBlocks)].value || ''
-        };
-        answerBlocks += 1;
-      });
-    }
-
-    _this.state = {
-      session: _objectSpread(_objectSpread({}, props.session), {}, {
-        answers: _answers
-      }),
-      activeAnswerBlock: '',
-      showCorrect: _this.props.model.config.alwaysShowCorrect || false
-    };
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      var classes = this.props.classes;
-
-      if (typeof window !== 'undefined') {
-        var MQ = _mathquill["default"].getInterface(2);
-
-        if (!registered) {
-          MQ.registerEmbed('answerBlock', function (data) {
-            return {
-              htmlString: "<div class=\"".concat(classes.blockContainer, "\">\n                <div class=\"").concat(classes.blockResponse, "\" id=\"").concat(data, "Index\">R</div>\n                <div class=\"").concat(classes.blockMath, "\">\n                  <span id=\"").concat(data, "\"></span>\n                </div>\n              </div>"),
-              text: function text() {
-                return 'text';
-              },
-              latex: function latex() {
-                return "\\embed{answerBlock}[".concat(data, "]");
-              }
-            };
-          });
-          registered = true;
-        }
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.handleAnswerBlockDomUpdate();
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this2 = this;
-
-      var config = this.props.model.config;
-
-      var _ref4 = nextProps.model || {},
-          _ref4$config = _ref4.config,
-          nextConfig = _ref4$config === void 0 ? {} : _ref4$config;
-
-      if (config.env && config.env.mode !== 'evaluate' || nextConfig.env && nextConfig.env.mode !== 'evaluate') {
-        this.setState(_objectSpread(_objectSpread({}, this.state.session), {}, {
-          showCorrect: false
-        }));
-      }
-
-      if (nextConfig.alwaysShowCorrect) {
-        this.setState({
-          showCorrect: true
-        });
-      }
-
-      if (config && config.responses && config.responses.length !== nextConfig.responses.length || !config && nextConfig && nextConfig.responses || config && nextConfig && config.expression !== nextConfig.expression) {
-        var newAnswers = {};
-        var answers = this.state.session.answers;
-        var answerBlocks = 1; // assume one at least
-        // build out local state model using responses declared in expression
-
-        (nextConfig.expression || '').replace(REGEX, function () {
-          newAnswers["r".concat(answerBlocks)] = {
-            value: answers && answers["r".concat(answerBlocks)] && answers["r".concat(answerBlocks)].value || ''
-          };
-          answerBlocks++;
-        });
-        this.setState(function (state) {
-          return {
-            session: _objectSpread(_objectSpread({}, state.session), {}, {
-              completeAnswer: _this2.mqStatic && _this2.mqStatic.mathField.latex(),
-              answers: newAnswers
-            })
-          };
-        }, this.handleAnswerBlockDomUpdate);
-      }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var sameModel = (0, _isEqual["default"])(this.props.model, nextProps.model);
-      var sameState = (0, _isEqual["default"])(this.state, nextState);
-      return !sameModel || !sameState;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this3 = this;
-
-      this.handleAnswerBlockDomUpdate();
-      setTimeout(function () {
-        return (0, _mathRendering.renderMath)(_this3.root);
-      }, 100);
-    }
-  }, {
-    key: "setTooltipRef",
-    value: function setTooltipRef(ref) {
-      // Safari Hack: https://stackoverflow.com/a/42764495/5757635
-      setTimeout(function () {
-        if (ref && IS_SAFARI) {
-          var div = document.querySelector("[role='tooltip']");
-
-          if (div) {
-            var el = div.firstChild;
-            el.setAttribute('tabindex', '-1');
-          }
-        }
-      }, 1);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this,
-          _cx;
-
-      var _this$props2 = this.props,
-          model = _this$props2.model,
-          classes = _this$props2.classes;
-      var _this$state2 = this.state,
-          activeAnswerBlock = _this$state2.activeAnswerBlock,
-          showCorrect = _this$state2.showCorrect,
-          session = _this$state2.session;
-
-      var _ref5 = model || {},
-          config = _ref5.config,
-          correctness = _ref5.correctness,
-          disabled = _ref5.disabled,
-          view = _ref5.view,
-          teacherInstructions = _ref5.teacherInstructions,
-          rationale = _ref5.rationale,
-          feedback = _ref5.feedback,
-          animationsDisabled = _ref5.animationsDisabled,
-          printMode = _ref5.printMode,
-          alwaysShowCorrect = _ref5.alwaysShowCorrect;
-
-      if (!config) {
-        return null;
-      }
-
-      var _ref6 = config || {},
-          showNote = _ref6.showNote,
-          note = _ref6.note,
-          prompt = _ref6.prompt,
-          responses = _ref6.responses,
-          responseType = _ref6.responseType,
-          equationEditor = _ref6.equationEditor,
-          customKeys = _ref6.customKeys,
-          _ref6$env = _ref6.env;
-
-      _ref6$env = _ref6$env === void 0 ? {} : _ref6$env;
-      var mode = _ref6$env.mode,
-          role = _ref6$env.role;
-      var displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
-      var emptyResponse = (0, _isEmpty["default"])(responses);
-      var showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
-      var tooltipModeEnabled = disabled && correctness;
-      var additionalKeys = generateAdditionalKeys(customKeys);
-      var correct = correctness && correctness.correct;
-      var staticLatex = prepareForStatic(model, this.state) || '';
-      var viewMode = disabled && !correctness;
-      var studentPrintMode = printMode && !alwaysShowCorrect;
-
-      var printView = /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.printContainer
-      }, /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
-        ref: function ref(mqStatic) {
-          return _this4.mqStatic = mqStatic || _this4.mqStatic;
-        },
-        latex: staticLatex,
-        onSubFieldChange: this.subFieldChanged,
-        getFieldName: this.getFieldName,
-        setInput: this.setInput,
-        onSubFieldFocus: this.onSubFieldFocus,
-        onBlur: this.onBlur
-      }));
-
-      var midContent = /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.main
-      }, prompt && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.content
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: prompt
-      })), studentPrintMode ? printView : /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
-        "false": true
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.inputAndKeypadContainer
-      }, responseType === _utils.ResponseTypes.simple && /*#__PURE__*/_react["default"].createElement(_simpleQuestionBlock["default"], {
-        onSimpleResponseChange: this.onSimpleResponseChange,
-        showCorrect: showCorrect,
-        emptyResponse: emptyResponse,
-        model: model,
-        session: session
-      }), responseType === _utils.ResponseTypes.advanced && /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.expression, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.incorrect, !emptyResponse && !correct && !showCorrect), (0, _defineProperty2["default"])(_cx, classes.correct, !emptyResponse && (correct || showCorrect)), (0, _defineProperty2["default"])(_cx, classes.showCorrectness, !emptyResponse && disabled && correctness && !view), (0, _defineProperty2["default"])(_cx, classes.correctAnswerShown, showCorrect), (0, _defineProperty2["default"])(_cx, classes.printCorrect, printMode && alwaysShowCorrect), _cx))
-      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        ref: function ref(_ref7) {
-          return _this4.setTooltipRef(_ref7);
-        },
-        interactive: true,
-        open: !!activeAnswerBlock,
-        classes: {
-          tooltip: classes.keypadTooltip,
-          popper: classes.keypadTooltipPopper
-        },
-        title: Object.keys(session.answers).map(function (answerId) {
-          return answerId === activeAnswerBlock && !(showCorrect || disabled) && /*#__PURE__*/_react["default"].createElement("div", {
-            "data-keypad": true,
-            key: answerId,
-            className: classes.responseContainer,
-            style: {
-              // marginTop: this.mqStatic && this.mqStatic.input.offsetHeight - 20,
-              width: getKeyPadWidth(additionalKeys, equationEditor)
-            }
-          }, /*#__PURE__*/_react["default"].createElement(_mathInput.HorizontalKeypad, {
-            additionalKeys: additionalKeys,
-            mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
-            onClick: _this4.onClick
-          })) || null;
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
-        ref: function ref(mqStatic) {
-          return _this4.mqStatic = mqStatic || _this4.mqStatic;
-        },
-        latex: staticLatex,
-        onSubFieldChange: this.subFieldChanged,
-        getFieldName: this.getFieldName,
-        setInput: this.setInput,
-        onSubFieldFocus: this.onSubFieldFocus,
-        onBlur: this.onBlur
-      }))))), viewMode && teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Teacher Instructions',
-          visible: 'Hide Teacher Instructions'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
-      }), /*#__PURE__*/_react["default"].createElement("br", null)), viewMode && rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Rationale',
-          visible: 'Hide Rationale'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: rationale
-        }
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: rationale
-        }
-      })), viewMode && displayNote && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.note,
-        dangerouslySetInnerHTML: {
-          __html: "<strong>Note:</strong> ".concat(note)
-        }
-      }));
-
-      if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) || rationale && (0, _renderUi.hasText)(rationale) || feedback)) {
-        return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-          interactive: true,
-          classes: {
-            tooltip: classes.tooltip,
-            popper: classes.tooltipPopper
-          },
-          title: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-            className: classes.main
-          }, showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-            className: classes.toggle,
-            show: true,
-            toggled: showCorrect,
-            onToggle: this.toggleShowCorrect
-          })), teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && [/*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-            key: "collapsible",
-            labels: {
-              hidden: 'Show Teacher Instructions',
-              visible: 'Hide Teacher Instructions'
-            },
-            className: classes.collapsible
-          }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-            prompt: teacherInstructions
-          })), /*#__PURE__*/_react["default"].createElement("br", {
-            key: "br"
-          })], rationale && (0, _renderUi.hasText)(rationale) && [/*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-            key: "collapsible",
-            labels: {
-              hidden: 'Show Rationale',
-              visible: 'Hide Rationale'
-            }
-          }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-            prompt: rationale
-          })), /*#__PURE__*/_react["default"].createElement("br", {
-            key: "br"
-          })], displayNote && (0, _renderUi.hasText)(note) && [/*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-            key: "collapsible",
-            labels: {
-              hidden: 'Show Note',
-              visible: 'Hide Note'
-            }
-          }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-            prompt: note
-          })), /*#__PURE__*/_react["default"].createElement("br", {
-            key: "br"
-          })], feedback && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
-            correctness: correctness.correctness,
-            feedback: feedback
-          }))
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.mainContainer,
-          ref: function ref(r) {
-            return _this4.root = r || _this4.root;
-          }
-        }, midContent));
-      }
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.mainContainer,
-        ref: function ref(r) {
-          return _this4.root = r || _this4.root;
-        }
-      }, midContent);
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
-exports.Main = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  classes: _propTypes["default"].object,
-  session: _propTypes["default"].object.isRequired,
-  onSessionChange: _propTypes["default"].func,
-  model: _propTypes["default"].object.isRequired
-});
-
-var styles = function styles(theme) {
-  return {
-    mainContainer: {
-      display: 'inline-block'
-    },
-    tooltip: {
-      background: "".concat(_renderUi.color.primaryLight(), " !important"),
-      color: _renderUi.color.text(),
-      padding: theme.spacing.unit * 2,
-      border: "1px solid ".concat(_renderUi.color.secondary()),
-      fontSize: '16px',
-      '& :not(.MathJax) > table tr': {
-        '&:nth-child(2n)': {
-          backgroundColor: 'unset !important'
-        }
-      }
-    },
-    tooltipPopper: {
-      opacity: 1
-    },
-    keypadTooltip: {
-      fontSize: 'initial',
-      background: 'transparent',
-      width: '600px',
-      marginTop: 0,
-      paddingTop: 0
-    },
-    keypadTooltipPopper: {
-      background: 'transparent',
-      width: '650px',
-      opacity: 1
-    },
-    main: {
-      width: '100%',
-      position: 'relative',
-      padding: theme.spacing.unit / 2,
-      backgroundColor: _renderUi.color.background(),
-      color: _renderUi.color.text()
-    },
-    title: {
-      fontSize: '1.1rem',
-      display: 'block',
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit
-    },
-    content: {
-      marginTop: theme.spacing.unit * 2
-    },
-    note: {
-      paddingTop: '15px'
-    },
-    collapsible: {
-      marginTop: theme.spacing.unit * 2
-    },
-    responseContainer: {
-      zIndex: 10,
-      // position: 'absolute',
-      // right: 0,
-      minWidth: '400px',
-      marginTop: theme.spacing.unit * 2
-    },
-    expression: {
-      maxWidth: 'fit-content',
-      '& > .mq-math-mode': {
-        '& > .mq-root-block': {
-          '& > .mq-editable-field': {
-            minWidth: '10px',
-            margin: theme.spacing.unit * 2 / 3,
-            padding: theme.spacing.unit / 4
-          }
-        },
-        '& sup': {
-          top: 0
-        }
-      }
-    },
-    inputAndKeypadContainer: {
-      position: 'relative',
-      '& .mq-overarrow-inner': {
-        border: 'none !important',
-        padding: '0 !important'
-      },
-      '& .mq-overarrow-inner-right': {
-        display: 'none !important'
-      },
-      '& .mq-overarrow-inner-left': {
-        display: 'none !important'
-      },
-      '& .mq-overarrow.mq-arrow-both': {
-        minWidth: '1.23em',
-        '& *': {
-          lineHeight: '1 !important'
-        },
-        '&:before': {
-          top: '-0.4em',
-          left: '-1px'
-        },
-        '&:after': {
-          top: '-2.4em',
-          right: '-1px'
-        },
-        '&.mq-empty:after': {
-          top: '-0.45em'
-        }
-      },
-      '& .mq-overarrow.mq-arrow-right': {
-        '&:before': {
-          top: '-0.4em',
-          right: '-1px'
-        }
-      },
-      '& .mq-longdiv-inner': {
-        borderTop: '1px solid !important',
-        paddingTop: '1.5px !important'
-      },
-      '& .mq-parallelogram': {
-        lineHeight: 0.85
-      }
-    },
-    showCorrectness: {
-      border: '2px solid'
-    },
-    correctAnswerShown: {
-      padding: theme.spacing.unit,
-      letterSpacing: '0.5px'
-    },
-    printCorrect: {
-      border: "2px solid ".concat(_renderUi.color.correct(), " !important")
-    },
-    correct: {
-      borderColor: "".concat(_renderUi.color.correct(), " !important")
-    },
-    incorrect: {
-      borderColor: "".concat(_renderUi.color.incorrect(), " !important")
-    },
-    blockContainer: {
-      margin: "".concat(theme.spacing.unit, "px !important"),
-      display: 'inline-flex',
-      border: '2px solid grey !important'
-    },
-    blockResponse: {
-      flex: 2,
-      color: 'grey',
-      background: 'lightgrey',
-      fontSize: '0.8rem !important',
-      padding: "".concat(theme.spacing.unit / 2, "px !important"),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRight: "2px solid ".concat(_renderUi.color.disabled(), " !important")
-    },
-    toggle: {
-      color: _renderUi.color.text()
-    },
-    blockMath: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      padding: "".concat(theme.spacing.unit / 2, "px !important"),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flex: 8,
-      '& > .mq-math-mode': {
-        '& > .mq-hasCursor': {
-          '& > .mq-cursor': {
-            display: 'none'
-          }
-        }
-      }
-    },
-    printContainer: {
-      marginBottom: '10px',
-      pointerEvents: 'none'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Main);
-
-exports["default"] = _default;
-//# sourceMappingURL=main.js.map