@pie-element/math-inline 5.6.3 → 5.6.4-next.1008

package/lib/main.js

@@ -47,18 +47,21 @@ var _simpleQuestionBlock = _interopRequireDefault(require("./simple-question-blo
 
 var _mathquill = _interopRequireDefault(require("@pie-framework/mathquill"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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] : [];
@@ -85,7 +88,9 @@ function prepareForStatic(model, state) {
 
   var _ref2 = config || {},
       expression = _ref2.expression,
-      responses = _ref2.responses;
+      responses = _ref2.responses,
+      printMode = _ref2.printMode,
+      alwaysShowCorrect = _ref2.alwaysShowCorrect;
 
   if (config && expression) {
     var modelExpression = expression;
@@ -100,6 +105,11 @@ function prepareForStatic(model, state) {
     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++, "]");
       }
@@ -211,7 +221,13 @@ var Main = /*#__PURE__*/function (_React$Component) {
       if (c.type === 'clear') {
         _this.input.clear();
       } else if (c.type === 'command') {
-        _this.input.cmd(c.value);
+        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 {
@@ -233,6 +249,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }, _this.handleAnswerBlockDomUpdate);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "subFieldChanged", function (name, subfieldValue) {
+      (0, _mathInput.updateSpans)();
+
       if (name) {
         _this.setState(function (state) {
           return {
@@ -258,11 +276,13 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }
     });
     (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 || !(relatedTarget.offsetParent && relatedTarget.offsetParent.children && relatedTarget.offsetParent.children[0] && relatedTarget.offsetParent.children[0].attributes && relatedTarget.offsetParent.children[0].attributes['data-keypad'])) {
+      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: ''
         });
@@ -287,7 +307,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
         answers: _answers
       }),
       activeAnswerBlock: '',
-      showCorrect: false
+      showCorrect: _this.props.model.config.alwaysShowCorrect || false
     };
     return _this;
   }
@@ -332,6 +352,18 @@ var Main = /*#__PURE__*/function (_React$Component) {
           _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;
@@ -371,49 +403,110 @@ var Main = /*#__PURE__*/function (_React$Component) {
         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 _cx,
-          _this4 = this;
+      var _this4 = this,
+          _cx;
 
       var _this$props2 = this.props,
           model = _this$props2.model,
           classes = _this$props2.classes;
-      var state = this.state;
-      var activeAnswerBlock = state.activeAnswerBlock,
-          showCorrect = state.showCorrect,
-          session = state.session;
-
-      if (!model.config) {
+      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 additionalKeys = generateAdditionalKeys(model.config.customKeys);
-      var correct = model.correctness && model.correctness.correct;
-      var staticLatex = prepareForStatic(model, state) || '';
-      var tooltipModeEnabled = model.disabled && model.correctness && model.config && model.config.responseType !== _utils.ResponseTypes.simple;
+      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
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+      }, prompt && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.content
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: model.config.prompt
-        }
-      })), /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+      }, /*#__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
-      }, model.config.responseType === _utils.ResponseTypes.simple && /*#__PURE__*/_react["default"].createElement(_simpleQuestionBlock["default"], {
+      }, responseType === _utils.ResponseTypes.simple && /*#__PURE__*/_react["default"].createElement(_simpleQuestionBlock["default"], {
         onSimpleResponseChange: this.onSimpleResponseChange,
         showCorrect: showCorrect,
+        emptyResponse: emptyResponse,
         model: model,
         session: session
-      }), model.config.responseType === _utils.ResponseTypes.advanced && /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.expression, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.incorrect, !correct && !showCorrect), (0, _defineProperty2["default"])(_cx, classes.correct, correct || showCorrect), (0, _defineProperty2["default"])(_cx, classes.showCorrectness, model.disabled && model.correctness && !model.view), (0, _defineProperty2["default"])(_cx, classes.correctAnswerShown, showCorrect), _cx))
+      }), 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: {
@@ -421,17 +514,17 @@ var Main = /*#__PURE__*/function (_React$Component) {
           popper: classes.keypadTooltipPopper
         },
         title: Object.keys(session.answers).map(function (answerId) {
-          return answerId === activeAnswerBlock && !(showCorrect || model.disabled) && /*#__PURE__*/_react["default"].createElement("div", {
+          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, model.config.equationEditor)
+              width: getKeyPadWidth(additionalKeys, equationEditor)
             }
           }, /*#__PURE__*/_react["default"].createElement(_mathInput.HorizontalKeypad, {
             additionalKeys: additionalKeys,
-            mode: model.config.equationEditor || DEFAULT_KEYPAD_VARIANT,
+            mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
             onClick: _this4.onClick
           })) || null;
         })
@@ -445,9 +538,40 @@ var Main = /*#__PURE__*/function (_React$Component) {
         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 && (model.correctness && model.correctness.correctness !== 'correct' || model.teacherInstructions || model.rationale || model.feedback)) {
+      if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions || rationale || feedback)) {
         return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           interactive: true,
           classes: {
@@ -456,39 +580,45 @@ var Main = /*#__PURE__*/function (_React$Component) {
           },
           title: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
             className: classes.main
-          }, model.correctness && model.correctness.correctness !== 'correct' && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+          }, showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
             className: classes.toggle,
             show: true,
             toggled: showCorrect,
             onToggle: this.toggleShowCorrect
-          })), model.teacherInstructions && (0, _renderUi.hasText)(model.teacherInstructions) && [/*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+          })), 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("div", {
-            dangerouslySetInnerHTML: {
-              __html: model.teacherInstructions
-            }
+          }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+            prompt: teacherInstructions
           })), /*#__PURE__*/_react["default"].createElement("br", {
             key: "br"
-          })], model.rationale && (0, _renderUi.hasText)(model.rationale) && [/*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+          })], rationale && (0, _renderUi.hasText)(rationale) && [/*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
             key: "collapsible",
             labels: {
               hidden: 'Show Rationale',
               visible: 'Hide Rationale'
             }
-          }, /*#__PURE__*/_react["default"].createElement("div", {
-            dangerouslySetInnerHTML: {
-              __html: model.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"
-          })], model.feedback && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
-            correctness: model.correctness.correctness,
-            feedback: model.feedback
+          })], feedback && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
+            correctness: correctness.correctness,
+            feedback: feedback
           }))
         }, /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.mainContainer,
@@ -527,7 +657,12 @@ var styles = function styles(theme) {
       color: _renderUi.color.text(),
       padding: theme.spacing.unit * 2,
       border: "1px solid ".concat(_renderUi.color.secondary()),
-      fontSize: '16px'
+      fontSize: '16px',
+      '& :not(.MathJax) > table tr': {
+        '&:nth-child(2n)': {
+          backgroundColor: 'unset !important'
+        }
+      }
     },
     tooltipPopper: {
       opacity: 1
@@ -560,6 +695,9 @@ var styles = function styles(theme) {
     content: {
       marginTop: theme.spacing.unit * 2
     },
+    note: {
+      paddingTop: '15px'
+    },
     collapsible: {
       marginTop: theme.spacing.unit * 2
     },
@@ -572,7 +710,6 @@ var styles = function styles(theme) {
     },
     expression: {
       maxWidth: 'fit-content',
-      marginTop: theme.spacing.unit * 2,
       '& > .mq-math-mode': {
         '& > .mq-root-block': {
           '& > .mq-editable-field': {
@@ -589,13 +726,44 @@ var styles = function styles(theme) {
     inputAndKeypadContainer: {
       position: 'relative',
       '& .mq-overarrow-inner': {
-        border: 'none !important'
+        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: {
@@ -605,6 +773,9 @@ var styles = function styles(theme) {
       padding: theme.spacing.unit,
       letterSpacing: '0.5px'
     },
+    printCorrect: {
+      border: "2px solid ".concat(_renderUi.color.correct(), " !important")
+    },
     correct: {
       borderColor: "".concat(_renderUi.color.correct(), " !important")
     },
@@ -612,20 +783,20 @@ var styles = function styles(theme) {
       borderColor: "".concat(_renderUi.color.incorrect(), " !important")
     },
     blockContainer: {
-      margin: theme.spacing.unit,
+      margin: "".concat(theme.spacing.unit, "px !important"),
       display: 'inline-flex',
-      border: '2px solid grey'
+      border: '2px solid grey !important'
     },
     blockResponse: {
       flex: 2,
       color: 'grey',
       background: 'lightgrey',
-      fontSize: '0.8rem',
-      padding: theme.spacing.unit / 2,
+      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())
+      borderRight: "2px solid ".concat(_renderUi.color.disabled(), " !important")
     },
     toggle: {
       color: _renderUi.color.text()
@@ -633,7 +804,7 @@ var styles = function styles(theme) {
     blockMath: {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
-      padding: theme.spacing.unit / 2,
+      padding: "".concat(theme.spacing.unit / 2, "px !important"),
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -645,6 +816,10 @@ var styles = function styles(theme) {
           }
         }
       }
+    },
+    printContainer: {
+      marginBottom: '10px',
+      pointerEvents: 'none'
     }
   };
 };