@pie-element/math-inline 5.6.4-next.133 → 5.6.4-next.1332

package/lib/index.js

@@ -41,7 +41,7 @@ var _defaults = _interopRequireDefault(require("../configure/lib/defaults"));
 
 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 log = (0, _debug["default"])('pie-ui:math-inline');
 
@@ -56,8 +56,8 @@ var MathInline = /*#__PURE__*/function (_HTMLElement) {
     (0, _classCallCheck2["default"])(this, MathInline);
     _this = _super.call(this);
     _this._configuration = _defaults["default"].configuration;
-    _this.sessionChangedEventCaller = _lodash["default"].debounce(function (session) {
-      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(session, true));
+    _this.sessionChangedEventCaller = _lodash["default"].debounce(function () {
+      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), true));
     }, 1000);
     return _this;
   }
@@ -72,6 +72,9 @@ var MathInline = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       this._session = s;
 
@@ -92,7 +95,7 @@ var MathInline = /*#__PURE__*/function (_HTMLElement) {
       Object.keys(s).map(function (key) {
         _this2._session[key] = s[key];
       });
-      this.sessionChangedEventCaller(this._session);
+      this.sessionChangedEventCaller();
       log('session: ', this._session);
     }
   }, {

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","MathInline","_configuration","defaults","configuration","sessionChangedEventCaller","_","debounce","session","dispatchEvent","SessionChangedEvent","m","_model","ModelSetEvent","_render","s","_session","c","Object","keys","map","key","el","React","createElement","Main","model","onSessionChange","sessionChanged","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAIA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,oBAAN,CAAZ;;IAIqBC,U;;;;;AACnB,wBAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,cAAL,GAAsBC,qBAASC,aAA/B;AACA,UAAKC,yBAAL,GAAiCC,mBAAEC,QAAF,CAAW,UAACC,OAAD,EAAa;AACvD,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAwBF,OAAxB,EAAiC,IAAjC,CAAnB;AACD,KAFgC,EAE9B,IAF8B,CAAjC;AAHY;AAMb;;;;SAED,aAAUG,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AACA,WAAKF,aAAL,CAAmB,IAAII,8BAAJ,CAAkB,KAAKD,MAAvB,EAA+B,IAA/B,EAAqC,CAAC,CAAC,KAAKA,MAA5C,CAAnB;;AACA,WAAKE,OAAL;AACD;;;SAED,aAAYC,CAAZ,EAAe;AACb,WAAKC,QAAL,GAAgBD,CAAhB;;AACA,WAAKD,OAAL;AACD;;;SAED,aAAkBG,CAAlB,EAAqB;AACnB,WAAKf,cAAL,GAAsBe,CAAtB;;AACA,WAAKH,OAAL;AACD;;;WAED,wBAAeC,CAAf,EAAkB;AAAA;;AAChBG,MAAAA,MAAM,CAACC,IAAP,CAAYJ,CAAZ,EAAeK,GAAf,CAAmB,UAAAC,GAAG,EAAI;AACxB,QAAA,MAAI,CAACL,QAAL,CAAcK,GAAd,IAAqBN,CAAC,CAACM,GAAD,CAAtB;AACD,OAFD;AAIA,WAAKhB,yBAAL,CAA+B,KAAKW,QAApC;AACAhB,MAAAA,GAAG,CAAC,WAAD,EAAc,KAAKgB,QAAnB,CAAH;AACD;;;WAED,6BAAoB;AAClB,WAAKF,OAAL;AACD;;;WAED,mBAAU;AACR,UAAI,CAAC,KAAKF,MAAN,IAAgB,CAAC,KAAKI,QAA1B,EAAoC;AAClC;AACD;;AAED,UAAMM,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,QAAAA,KAAK,EAAE,KAAKd,MADuB;AAEnCJ,QAAAA,OAAO,EAAE,KAAKQ,QAFqB;AAGnCZ,QAAAA,aAAa,EAAE,KAAKF,cAHe;AAInCyB,QAAAA,eAAe,EAAE,KAAKC,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAJkB,OAA1B,CAAX;;AAOAC,2BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB;AACD;;;kDAnDqCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Main from './main';\nimport debug from 'debug';\nimport _ from 'lodash';\n\nimport {\n  ModelSetEvent,\n  SessionChangedEvent,\n} from '@pie-framework/pie-player-events';\nimport defaults from '../configure/lib/defaults';\n\nconst log = debug('pie-ui:math-inline');\n\nexport { Main as Component };\n\nexport default class MathInline extends HTMLElement {\n  constructor() {\n    super();\n    this._configuration = defaults.configuration;\n    this.sessionChangedEventCaller = _.debounce((session) => {\n      this.dispatchEvent(new SessionChangedEvent(session, true));\n    }, 1000);\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(new ModelSetEvent(this._model, true, !!this._model));\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  sessionChanged(s) {\n    Object.keys(s).map(key => {\n      this._session[key] = s[key];\n    });\n\n    this.sessionChangedEventCaller(this._session);\n    log('session: ', this._session);\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      configuration: this._configuration,\n      onSessionChange: this.sessionChanged.bind(this),\n    });\n\n    ReactDOM.render(el, this);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","MathInline","_configuration","defaults","configuration","sessionChangedEventCaller","_","debounce","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","m","_model","ModelSetEvent","_render","_session","s","c","Object","keys","map","key","el","React","createElement","Main","model","session","onSessionChange","sessionChanged","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAIA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,oBAAN,CAAZ;;IAIqBC,U;;;;;AACnB,wBAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,cAAL,GAAsBC,qBAASC,aAA/B;AACA,UAAKC,yBAAL,GAAiCC,mBAAEC,QAAF,CAAW,YAAM;AAChD,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,IAApD,CAAnB;AACD,KAFgC,EAE9B,IAF8B,CAAjC;AAHY;AAMb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AACA,WAAKJ,aAAL,CAAmB,IAAIM,8BAAJ,CAAkB,KAAKD,MAAvB,EAA+B,IAA/B,EAAqC,CAAC,CAAC,KAAKA,MAA5C,CAAnB;;AACA,WAAKE,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKC,QAAZ;AACD,K;SAPD,aAAYC,CAAZ,EAAe;AACb,WAAKD,QAAL,GAAgBC,CAAhB;;AACA,WAAKF,OAAL;AACD;;;SAMD,aAAkBG,CAAlB,EAAqB;AACnB,WAAKhB,cAAL,GAAsBgB,CAAtB;;AACA,WAAKH,OAAL;AACD;;;WAED,wBAAeE,CAAf,EAAkB;AAAA;;AAChBE,MAAAA,MAAM,CAACC,IAAP,CAAYH,CAAZ,EAAeI,GAAf,CAAmB,UAAAC,GAAG,EAAI;AACxB,QAAA,MAAI,CAACN,QAAL,CAAcM,GAAd,IAAqBL,CAAC,CAACK,GAAD,CAAtB;AACD,OAFD;AAIA,WAAKjB,yBAAL;AACAL,MAAAA,GAAG,CAAC,WAAD,EAAc,KAAKgB,QAAnB,CAAH;AACD;;;WAED,6BAAoB;AAClB,WAAKD,OAAL;AACD;;;WAED,mBAAU;AACR,UAAI,CAAC,KAAKF,MAAN,IAAgB,CAAC,KAAKG,QAA1B,EAAoC;AAClC;AACD;;AAED,UAAMO,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,QAAAA,KAAK,EAAE,KAAKd,MADuB;AAEnCe,QAAAA,OAAO,EAAE,KAAKZ,QAFqB;AAGnCZ,QAAAA,aAAa,EAAE,KAAKF,cAHe;AAInC2B,QAAAA,eAAe,EAAE,KAAKC,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAJkB,OAA1B,CAAX;;AAOAC,2BAASC,MAAT,CAAgBV,EAAhB,EAAoB,IAApB;AACD;;;kDAvDqCW,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Main from './main';\nimport debug from 'debug';\nimport _ from 'lodash';\n\nimport {\n  ModelSetEvent,\n  SessionChangedEvent,\n} from '@pie-framework/pie-player-events';\nimport defaults from '../configure/lib/defaults';\n\nconst log = debug('pie-ui:math-inline');\n\nexport { Main as Component };\n\nexport default class MathInline extends HTMLElement {\n  constructor() {\n    super();\n    this._configuration = defaults.configuration;\n    this.sessionChangedEventCaller = _.debounce(() => {\n      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), true));\n    }, 1000);\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(new ModelSetEvent(this._model, true, !!this._model));\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  sessionChanged(s) {\n    Object.keys(s).map(key => {\n      this._session[key] = s[key];\n    });\n\n    this.sessionChangedEventCaller();\n    log('session: ', this._session);\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      configuration: this._configuration,\n      onSessionChange: this.sessionChanged.bind(this),\n    });\n\n    ReactDOM.render(el, this);\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -47,13 +47,15 @@ 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;
@@ -86,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;
@@ -101,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++, "]");
       }
@@ -212,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 {
@@ -234,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 {
@@ -290,7 +307,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
         answers: _answers
       }),
       activeAnswerBlock: '',
-      showCorrect: false
+      showCorrect: _this.props.model.config.alwaysShowCorrect || false
     };
     return _this;
   }
@@ -335,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;
@@ -380,7 +409,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
       // Safari Hack: https://stackoverflow.com/a/42764495/5757635
       setTimeout(function () {
         if (ref && IS_SAFARI) {
-          var div = document.querySelector("[role='tooltip']");
+          var div = document.querySelector('[role=\'tooltip\']');
 
           if (div) {
             var el = div.firstChild;
@@ -392,57 +421,91 @@ var Main = /*#__PURE__*/function (_React$Component) {
   }, {
     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;
-      var _model$config = model.config;
-      _model$config = _model$config === void 0 ? {} : _model$config;
-      var showNote = _model$config.showNote,
-          note = _model$config.note,
-          _model$config$env = _model$config.env;
-      _model$config$env = _model$config$env === void 0 ? {} : _model$config$env;
-      var mode = _model$config$env.mode,
-          role = _model$config$env.role;
-      var displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
-
-      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(_ref5) {
-          return _this4.setTooltipRef(_ref5);
+        ref: function ref(_ref7) {
+          return _this4.setTooltipRef(_ref7);
         },
         interactive: true,
         open: !!activeAnswerBlock,
@@ -451,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;
         })
@@ -475,14 +538,40 @@ var Main = /*#__PURE__*/function (_React$Component) {
         setInput: this.setInput,
         onSubFieldFocus: this.onSubFieldFocus,
         onBlur: this.onBlur
-      }))))), displayNote && /*#__PURE__*/_react["default"].createElement("div", {
+      }))))), 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 && (0, _renderUi.hasText)(teacherInstructions) || rationale && (0, _renderUi.hasText)(rationale) || feedback)) {
         return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           interactive: true,
           classes: {
@@ -491,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,
@@ -562,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
@@ -610,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': {
@@ -627,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: {
@@ -643,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")
     },
@@ -650,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()
@@ -671,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',
@@ -683,6 +816,10 @@ var styles = function styles(theme) {
           }
         }
       }
+    },
+    printContainer: {
+      marginBottom: '10px',
+      pointerEvents: 'none'
     }
   };
 };