@pie-element/math-templated 2.11.2-next.7000

package/lib/main.js

@@ -0,0 +1,843 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _mathInput = require("@pie-lib/pie-toolbox/math-input");
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
+
+var _mathquill = _interopRequireDefault(require("@pie-framework/mathquill"));
+
+var _maskMarkup = require("@pie-lib/pie-toolbox/mask-markup");
+
+var _correctAnswerToggle = require("@pie-lib/pie-toolbox/correct-answer-toggle");
+
+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; } }
+
+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; }
+
+var registered = false; // Define a regex pattern to match {{number}}
+
+var REGEX = /(\{\{\d+\}\})/gm;
+var DEFAULT_KEYPAD_VARIANT = 6; // !!! If you're using Chrome but have selected the "iPad" device in Chrome Developer Tools, the navigator.userAgent string may still report as
+//  Safari because Chrome on iOS actually uses the Safari rendering engine under the hood due to Apple's restrictions on third-party browser engines.
+// When you select the "iPad" device in Chrome Developer Tools, you're essentially emulating the behavior of Safari on an iPad, including the user agent string.
+//  Therefore, even though you're using Chrome, the user agent string will resemble that of Safari on an iPad.
+// Since the regular expression /^((?!chrome|android).)*safari/i checks for the presence of "safari" in the user agent string while excluding "chrome" and "android",
+//  it will return true in this case because "safari" is present in the user agent string emulated by Chrome when in iPad mode.
+
+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 splitByParts(text) {
+  // Use the regex pattern to split the text
+  var parts = text.split(REGEX); // Filter out empty strings that might result from splitting
+
+  return parts.filter(function (part) {
+    return part;
+  });
+}
+
+function prepareForStatic(model, state) {
+  var _ref = model || {},
+      responses = _ref.responses,
+      disabled = _ref.disabled,
+      markup = _ref.markup,
+      printMode = _ref.printMode,
+      alwaysShowCorrect = _ref.alwaysShowCorrect;
+
+  if (markup) {
+    if (state.showCorrect) {
+      return Object.keys(responses || {}).reduce(function (acc, responseKey) {
+        var _responses$responseKe;
+
+        acc[responseKey] = responses === null || responses === void 0 ? void 0 : (_responses$responseKe = responses[responseKey]) === null || _responses$responseKe === void 0 ? void 0 : _responses$responseKe.answer;
+        return acc;
+      }, {});
+    }
+
+    var splitted = splitByParts(markup);
+    return splitted.reduce(function (acc, split) {
+      if (split.match(REGEX)) {
+        var responseKey = Main.getResponseKey(split);
+        var answer = state.session.answers["r".concat(responseKey)];
+
+        if (printMode && !alwaysShowCorrect) {
+          var blankSpace = '\\ \\ '.repeat(30) + '\\embed{newLine}[] ';
+          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, responseKey, "\\MathQuillMathField[r".concat(responseKey, "]{").concat(blankSpace.repeat(3), "}")));
+        }
+
+        if (disabled) {
+          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, responseKey, "\\embed{answerBlock}[r".concat(responseKey, "]")));
+        }
+
+        return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, responseKey, "\\MathQuillMathField[r".concat(responseKey, "]{").concat(answer && answer.value || '', "}")));
+      }
+
+      return acc;
+    }, {});
+  }
+}
+
+var Main = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Main, _React$Component);
+
+  var _super = _createSuper(Main);
+
+  // removes {{ and }} and returns only key response. Eg: {{0}} => 0
+  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"));
+
+          if (el) {
+            var MQ = _mathquill["default"].getInterface(2);
+
+            var answer = answers[answerId];
+            el.textContent = answer && answer.value || '';
+
+            if (model.view) {
+              el.parentElement.parentElement.classList.remove(classes.correct);
+              el.parentElement.parentElement.classList.remove(classes.incorrect);
+            }
+
+            MQ.StaticMath(el);
+            indexEl.textContent = 'R';
+          }
+        });
+      }
+
+      (0, _mathRenderingAccessible.renderMath)(_this.root);
+    });
+    (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;
+      if (type === 'answer') return _objectSpread({
+        type: 'answer'
+      }, data);
+      if (value === 'clear') return {
+        type: 'clear'
+      };
+      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), {}, {
+              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 _ref2 = e || {},
+          relatedTarget = _ref2.relatedTarget,
+          currentTarget = _ref2.currentTarget;
+
+      function getParentWithRoleTooltip(element) {
+        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        // only run this max 16 times
+        if (!element || depth >= 16) return null;
+        var parent = element.offsetParent;
+        if (!parent) return null;
+
+        if (parent.getAttribute('role') === 'tooltip') {
+          return parent;
+        }
+
+        return getParentWithRoleTooltip(parent, depth + 1);
+      }
+
+      function getDeepChildDataKeypad(element) {
+        var _element$children;
+
+        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        // only run this max 4 times
+        if (!element || depth >= 4) return null;
+        var child = element === null || element === void 0 ? void 0 : (_element$children = element.children) === null || _element$children === void 0 ? void 0 : _element$children[0];
+        if (!child) return null;
+
+        if (child.attributes && child.attributes['data-keypad']) {
+          return child;
+        }
+
+        return getDeepChildDataKeypad(child, depth + 1);
+      }
+
+      var parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
+      var childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
+
+      if (!relatedTarget || !currentTarget || !(childWithDataKeypad !== null && childWithDataKeypad !== void 0 && childWithDataKeypad.attributes['data-keypad'])) {
+        _this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderTeacherInstructions", function () {
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          classes = _this$props2.classes;
+
+      var _ref3 = model || {},
+          teacherInstructions = _ref3.teacherInstructions,
+          animationsDisabled = _ref3.animationsDisabled;
+
+      var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        defaultClassName: "teacher-instructions",
+        prompt: teacherInstructions
+      });
+
+      return teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.collapsible
+      }, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Teacher Instructions',
+          visible: 'Hide Teacher Instructions'
+        }
+      }, teacherInstructionsDiv) : teacherInstructionsDiv);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderRationale", function () {
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          classes = _this$props3.classes;
+
+      var _ref4 = model || {},
+          rationale = _ref4.rationale,
+          animationsDisabled = _ref4.animationsDisabled;
+
+      var rationaleDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: rationale
+      });
+
+      return rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.collapsible
+      }, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Rationale',
+          visible: 'Hide Rationale'
+        }
+      }, rationaleDiv) : rationaleDiv);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderPlayerContent", function () {
+      var _this$props4 = _this.props,
+          model = _this$props4.model,
+          classes = _this$props4.classes;
+      var _this$state2 = _this.state,
+          activeAnswerBlock = _this$state2.activeAnswerBlock,
+          showCorrect = _this$state2.showCorrect,
+          session = _this$state2.session;
+
+      var _ref5 = model || {},
+          correctness = _ref5.correctness,
+          disabled = _ref5.disabled,
+          view = _ref5.view,
+          responses = _ref5.responses,
+          equationEditor = _ref5.equationEditor,
+          customKeys = _ref5.customKeys,
+          feedback = _ref5.feedback,
+          _ref5$env = _ref5.env;
+
+      _ref5$env = _ref5$env === void 0 ? {} : _ref5$env;
+      var mode = _ref5$env.mode,
+          printMode = _ref5.printMode,
+          alwaysShowCorrect = _ref5.alwaysShowCorrect;
+      var emptyResponse = (0, _isEmpty["default"])(responses);
+      var additionalKeys = generateAdditionalKeys(customKeys);
+      var statics = prepareForStatic(model, _this.state) || '';
+      var studentPrintMode = printMode && !alwaysShowCorrect;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.inputAndKeypadContainer
+      }, /*#__PURE__*/_react["default"].createElement(_maskMarkup.Customizable, {
+        disabled: disabled,
+        markup: model.markup // TODO remove the need of value?
+        ,
+        value: {},
+        customMarkMarkupComponent: function customMarkMarkupComponent(id) {
+          var _cx;
+
+          var responseIsCorrect = mode === 'evaluate' && feedback[id];
+
+          var MQStatic = /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
+            className: classes["static"],
+            ref: function ref(mqStatic) {
+              _this.mqStatic = mqStatic || _this.mqStatic;
+            },
+            latex: statics[id],
+            onSubFieldChange: _this.subFieldChanged,
+            getFieldName: _this.getFieldName,
+            setInput: _this.setInput,
+            onSubFieldFocus: _this.onSubFieldFocus,
+            onBlur: _this.onBlur
+          });
+
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: (0, _classnames["default"])(classes.expression, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.incorrect, !emptyResponse && !responseIsCorrect && !showCorrect), (0, _defineProperty2["default"])(_cx, classes.correct, !emptyResponse && (responseIsCorrect || showCorrect)), (0, _defineProperty2["default"])(_cx, classes.showCorrectness, !emptyResponse && disabled && correctness && !view), (0, _defineProperty2["default"])(_cx, classes.correctAnswerShown, showCorrect), _cx))
+          }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+            ref: function ref(_ref6) {
+              return _this.setTooltipRef(_ref6);
+            },
+            enterTouchDelay: 0,
+            interactive: true,
+            open: activeAnswerBlock === "r".concat(id),
+            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: {
+                  width: getKeyPadWidth(additionalKeys, equationEditor)
+                }
+              }, /*#__PURE__*/_react["default"].createElement(_mathInput.HorizontalKeypad, {
+                additionalKeys: additionalKeys,
+                mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
+                onClick: _this.onClick
+              })) || null;
+            })
+          }, studentPrintMode ? /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.printContainer
+          }, MQStatic) : MQStatic));
+        }
+      }));
+    });
+    var _answers = {};
+
+    var _ref7 = props || {},
+        _model = _ref7.model,
+        _session = _ref7.session;
+
+    var _ref8 = _model || {},
+        markup = _ref8.markup,
+        _alwaysShowCorrect = _ref8.alwaysShowCorrect;
+
+    var _ref9 = _session || {},
+        sessionAnswers = _ref9.answers;
+
+    if (markup) {
+      // build out local state model using responses declared in markup
+      (markup || '').replace(REGEX, function (response) {
+        var responseKey = Main.getResponseKey(response);
+        var sessionAnswerForResponse = sessionAnswers && sessionAnswers["r".concat(responseKey)];
+        _answers["r".concat(responseKey)] = {
+          value: (sessionAnswerForResponse === null || sessionAnswerForResponse === void 0 ? void 0 : sessionAnswerForResponse.value) || ''
+        };
+      });
+    }
+
+    _this.state = {
+      session: _objectSpread(_objectSpread({}, props.session), {}, {
+        answers: _answers
+      }),
+      activeAnswerBlock: '',
+      showCorrect: _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: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
+      var markup = this.props.model.markup;
+
+      var _ref10 = nextProps.model || {},
+          nextMarkup = _ref10.markup;
+
+      var matches = markup.match(REGEX);
+      var nextMatches = nextMarkup.match(REGEX); // If markup changed, and we no longer have the same response area, the session needs to be updated
+
+      if (!(0, _isEqual["default"])(matches, nextMatches)) {
+        var newAnswers = {};
+        var answers = this.state.session.answers;
+        (nextMatches || []).forEach(function (nextMatch) {
+          var responseKey = Main.getResponseKey(nextMatch);
+          var sessionAnswerForResponse = answers && answers["r".concat(responseKey)]; // build out local state model using responses declared in markup
+
+          newAnswers["r".concat(responseKey)] = {
+            value: (sessionAnswerForResponse === null || sessionAnswerForResponse === void 0 ? void 0 : sessionAnswerForResponse.value) || ''
+          };
+        });
+        this.setState(function (state) {
+          return {
+            session: _objectSpread(_objectSpread({}, state.session), {}, {
+              answers: newAnswers
+            })
+          };
+        }, function () {
+          _this2.props.onSessionChange(_this2.state.session);
+
+          _this2.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, _mathRenderingAccessible.renderMath)(_this3.root);
+      }, 100);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.handleAnswerBlockDomUpdate();
+    }
+  }, {
+    key: "setTooltipRef",
+    value: // function for tooltip
+    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;
+
+      var _this$props5 = this.props,
+          model = _this$props5.model,
+          classes = _this$props5.classes;
+      var showCorrect = this.state.showCorrect;
+
+      var _ref11 = model || {},
+          prompt = _ref11.prompt,
+          _ref11$env = _ref11.env;
+
+      _ref11$env = _ref11$env === void 0 ? {} : _ref11$env;
+      var mode = _ref11$env.mode,
+          role = _ref11$env.role,
+          correctness = _ref11.correctness,
+          responses = _ref11.responses,
+          language = _ref11.language,
+          showNote = _ref11.showNote,
+          note = _ref11.note;
+      var emptyResponse = (0, _isEmpty["default"])(responses);
+      var showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
+      var displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.mainContainer,
+        ref: function ref(r) {
+          return _this4.root = r || _this4.root;
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.main
+      }, mode === 'gather' && /*#__PURE__*/_react["default"].createElement("h2", {
+        className: classes.srOnly
+      }, "Math Equation Response Question"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.main
+      }, showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
+        language: language,
+        className: classes.toggle,
+        show: true,
+        toggled: showCorrect,
+        onToggle: this.toggleShowCorrect
+      })), this.renderTeacherInstructions(), prompt && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.promptContainer
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: prompt
+      })), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+        "false": true
+      }, this.renderPlayerContent()), displayNote && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.note, 'note'),
+        dangerouslySetInnerHTML: {
+          __html: note
+        }
+      }), this.renderRationale()));
+    }
+  }]);
+  return Main;
+}(_react["default"].Component);
+
+exports.Main = Main;
+(0, _defineProperty2["default"])(Main, "getResponseKey", function (response) {
+  return (response || '').replaceAll('{{', '').replaceAll('}}', '');
+});
+(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: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background(),
+      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
+    },
+    promptContainer: {
+      marginBottom: theme.spacing.unit * 2
+    },
+    main: {
+      width: '100%',
+      position: 'relative',
+      backgroundColor: _renderUi.color.background(),
+      color: _renderUi.color.text()
+    },
+    title: {
+      fontSize: '1.1rem',
+      display: 'block',
+      marginTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit
+    },
+    collapsible: {
+      marginBottom: theme.spacing.unit * 2
+    },
+    responseContainer: {
+      zIndex: 10,
+      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
+        }
+      }
+    },
+    "static": {
+      '& > .mq-root-block': {
+        '& > .mq-editable-field': {
+          borderColor: _renderUi.color.text()
+        }
+      }
+    },
+    inputAndKeypadContainer: {
+      position: 'relative',
+      '& > div > div': {
+        display: 'flex',
+        alignItems: 'baseline',
+        flexWrap: 'wrap'
+      },
+      '& .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'
+    },
+    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: theme.palette.grey['A100'],
+      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(),
+      marginBottom: theme.spacing.unit * 2
+    },
+    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: theme.spacing.unit,
+      pointerEvents: 'none'
+    },
+    srOnly: {
+      position: 'absolute',
+      left: '-10000px',
+      top: 'auto',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
+    },
+    note: {
+      marginBottom: theme.spacing.unit * 2
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Main);
+
+exports["default"] = _default;
+//# sourceMappingURL=main.js.map