@instructure/quiz-core 20.4.2-rc.1 → 20.4.2-rc.3

package/lib/common/components/resources/quizSessionResult/Info/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,14 +17,12 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiAlerts = require("@instructure/ui-alerts");
@@ -39,7 +35,7 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _uiView = require("@instructure/ui-view");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -51,26 +47,14 @@ var _index = _interopRequireDefault(require("../../../shared/FormattedDuration/i
 
 var _formatTimespan = require("../../../../util/formatTimespan.js");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fhrSa',
-  template: function template(theme) {
-    return "\n\n.fhrSa_ekHz{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-top:".concat(theme.alertWrapperMargin || 'inherit', "}\n\n.fhrSa_bANW{flex-grow:1;max-width:33rem}\n\n.fhrSa_gasz{margin:none;padding:none}\n\n.fhrSa_pypk,.fhrSa_gasz{align-items:center;display:flex;justify-content:center}\n\n.fhrSa_pypk{align-self:center;flex-wrap:wrap}\n\n.fhrSa_bCqi{flex-wrap:wrap;justify-content:flex-start}\n\n.fhrSa_frHB,.fhrSa_bCqi{align-items:center;display:flex;flex:1 1 auto}\n\n.fhrSa_frHB{height:150px;margin:").concat(theme.scoreMargin || 'inherit', ";width:150px;z-index:").concat(theme.scoreZIndex || 'inherit', "}\n\n.fhrSa_fkZg{font-size:").concat(theme.scorePercentageFontSize || 'inherit', ";font-weight:").concat(theme.scorePercentageFontWeight || 'inherit', "}\n\n.fhrSa_vsBM{flex:1 1 auto;margin:").concat(theme.infoWrapperMargin || 'inherit', ";padding-left:").concat(theme.inforWrapperPadding || 'inherit', "}");
-  },
-  'alertWrapper': 'fhrSa_ekHz',
-  'alertWidth': 'fhrSa_bANW',
-  'wrapper': 'fhrSa_gasz',
-  'info': 'fhrSa_pypk',
-  'scoreStats': 'fhrSa_bCqi',
-  'score': 'fhrSa_frHB',
-  'scorePercentage': 'fhrSa_fkZg',
-  'infoWrapper': 'fhrSa_vsBM'
-};
 var unknownPercentageValue = 'UNKNOWN_PERCENTAGE';
-var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+var Info = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   (0, _inherits2.default)(Info, _withI18nSupport);
 
   var _super = (0, _createSuper2.default)(Info);
@@ -105,8 +89,8 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
         default: '?',
         description: 'placeholder for an unknown percentage value'
       }) : this.formatPercentMax2FractionDigits(valueNow);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.scorePercentage,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.scorePercentage,
         "data-automation": "sdk-quiz-score-percentage"
       }, valueToShow);
     }
@@ -124,7 +108,7 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
 
       if (quizSessionResult.isLoaded() && quizSessionResult.autogradingFailed()) {
         var msg = (0, _formatMessage.default)('There was a grading problem. Please inform your instructor.');
-        alerts.push( /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        alerts.push((0, _emotion.jsx)(_uiAlerts.Alert, {
           key: "autograding_failed",
           variant: "warning"
         }, msg));
@@ -134,17 +118,17 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
         var ungradedText = (0, _formatMessage.default)("{\n        count, plural,\n        one {# question requires grading}\n        other {# questions require grading}\n      }", {
           count: ungradedCount
         });
-        alerts.push( /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        alerts.push((0, _emotion.jsx)(_uiAlerts.Alert, {
           key: "manual_grading",
           variant: "info"
         }, ungradedText));
       }
 
       if (alerts.length) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.alertWrapper
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.alertWidth,
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.alertWrapper
+        }, (0, _emotion.jsx)("div", {
+          css: this.props.styles.alertWidth,
           "data-automation": "sdk-results-requires-grading"
         }, alerts));
       }
@@ -157,23 +141,23 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
       var alt = (0, _formatMessage.default)('Grade for this attempt: { grade }', {
         grade: letterGrade
       });
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      return (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: alt
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, (0, _emotion.jsx)(_uiView.View, {
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "xx-large",
         weight: "bold",
         color: "primary"
-      }, letterGrade)), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, letterGrade)), (0, _emotion.jsx)(_uiText.Text, {
         color: "secondary"
       }, gradeText));
     }
   }, {
     key: "renderScoreStats",
     value: function renderScoreStats() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.scoreStats
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.scoreStats
       }, this.renderProgress(), this.renderPointsDisplay());
     }
   }, {
@@ -183,10 +167,10 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.score,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.score,
         "data-automation": "sdk-info-score"
-      }, /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressCircle, {
+      }, (0, _emotion.jsx)(_uiProgress.ProgressCircle, {
         shouldAnimateOnMount: true,
         size: "large",
         screenReaderLabel: (0, _formatMessage.default)('Your Score'),
@@ -199,16 +183,16 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   }, {
     key: "renderPointsDisplay",
     value: function renderPointsDisplay() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.infoWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.infoWrapper
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: this.pointsText
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         as: "div",
         color: "primary",
         size: "xx-large",
         weight: "bold"
-      }, this.mainPointsText), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, this.mainPointsText), (0, _emotion.jsx)(_uiText.Text, {
         color: "secondary"
       }, this.subPointsText)));
     }
@@ -219,29 +203,30 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
       var alt = (0, _formatMessage.default)('Time for this attempt: { time }', {
         time: (0, _formatTimespan.formatTime)(this.props.quizSession.elapsedTime)
       });
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      return (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: alt
-      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, (0, _emotion.jsx)(_uiView.View, {
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, (0, _emotion.jsx)(_index.default, {
         fontSize: "xx-large",
         fontWeight: "bold",
         seconds: this.props.quizSession.elapsedTime
-      })), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      })), (0, _emotion.jsx)(_uiText.Text, {
         color: "secondary"
       }, attemptText));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, this.renderAlert(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.wrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('fs-mask', styles.info)
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", null, this.renderAlert(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.wrapper
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.info,
+        className: "fs-mask"
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h2"
-      }, (0, _formatMessage.default)('Assessment Statistics'))), this.props.restrictQuantitativeData ? this.renderLetterGrade() : this.renderScoreStats(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.infoWrapper
+      }, (0, _formatMessage.default)('Assessment Statistics'))), this.props.restrictQuantitativeData ? this.renderLetterGrade() : this.renderScoreStats(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.infoWrapper
       }, this.renderTime()))));
     }
   }, {
@@ -346,7 +331,9 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   quizSession: _reactImmutableProptypes.default.record.isRequired,
   quizSessionResult: _reactImmutableProptypes.default.record.isRequired,
   restrictQuantitativeData: _propTypes.default.bool,
-  sessionItemResults: _reactImmutableProptypes.default.list.isRequired
+  sessionItemResults: _reactImmutableProptypes.default.list.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   gradingScheme: [],
   restrictQuantitativeData: false

package/lib/common/components/resources/quizSessionResult/Info/styles.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    alertWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: componentTheme.alertWrapperMargin
+    },
+    alertWidth: {
+      flexGrow: 1,
+      maxWidth: '33rem,'
+    },
+    wrapper: {
+      padding: 'none',
+      margin: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    info: {
+      alignSelf: 'center',
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    scoreStats: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flex: '1 1 auto'
+    },
+    score: {
+      display: 'flex',
+      alignItems: 'center',
+      flex: '1 1 auto',
+      margin: componentTheme.scoreMargin,
+      height: '150px',
+      width: '150px',
+
+      /*
+        progress modal sets a -1 z-index on its content
+        and this raises it above the app background
+      */
+      zIndex: componentTheme.scoreZIndex
+    },
+    scorePercentage: {
+      fontSize: componentTheme.scorePercentageFontSize,
+      fontWeight: componentTheme.scorePercentageFontWeight
+    },
+    infoWrapper: {
+      flex: '1 1 auto',
+      margin: componentTheme.infoWrapperMargin,
+      paddingLeft: componentTheme.inforWrapperPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/quizSessionResult/Info/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography;
   return {
@@ -17,4 +17,7 @@ function generator(_ref) {
     infoWrapperMargin: spacing.small,
     inforWrapperPadding: spacing.small
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _presenter.BlankIcon;
+  }
+});
+
+var _presenter = require("./presenter.js");

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/presenter.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlankIcon = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = require("react");
+
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _dec, _class, _class2, _temp;
+
+var BlankIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BlankIcon, _Component);
+
+  var _super = (0, _createSuper2.default)(BlankIcon);
+
+  function BlankIcon() {
+    (0, _classCallCheck2.default)(this, BlankIcon);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(BlankIcon, [{
+    key: "render",
+    value: function render() {
+      var number = this.props.number;
+      return (0, _emotion.jsx)("span", {
+        css: this.props.styles.blankSpace
+      }, number);
+    }
+  }]);
+  BlankIcon.displayName = "BlankIcon";
+  return BlankIcon;
+}(_react.Component), _class2.propTypes = {
+  number: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object
+}.isRequired, _temp)) || _class);
+exports.BlankIcon = BlankIcon;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    blankSpace: {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: componentTheme.blankHeight,
+      minWidth: componentTheme.blankMinWidth,
+      verticalAlign: 'middle',
+      border: "1px solid ".concat(componentTheme.blankBorderColor),
+      borderRadius: componentTheme.blankBorderRadius,
+      padding: '2px 2px'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/BlankIcon/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var colors = _ref.colors;
+  return {
+    blankBorderColor: colors.tiara,
+    blankBorderRadius: '14px',
+    blankMinWidth: '20px',
+    blankHeight: '20px'
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/index.js

@@ -23,7 +23,8 @@ function mapStateToProps(_state) {
       categorizationEnabled: (0, _featureCheck.featureOn)('ia_categorization_afs'),
       trueFalseEnabled: (0, _featureCheck.featureOn)('ia_true_false_afs'),
       choiceEnabled: (0, _featureCheck.featureOn)('ia_choice_afs'),
-      multiAnswerEnabled: (0, _featureCheck.featureOn)('ia_multi_answer_afs')
+      multiAnswerEnabled: (0, _featureCheck.featureOn)('ia_multi_answer_afs'),
+      fillInTheBlankEnabled: (0, _featureCheck.featureOn)('ia_rich_fill_blank_afs')
     }
   };
 }

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js

@@ -59,24 +59,30 @@ var _rceChecker = require("../../../../../common/util/rceChecker.js");
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
+var _quizCommon = require("@instructure/quiz-common");
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'ewlJT',
+  componentId: 'eObAE',
   template: function template(theme) {
-    return "\n\n.ewlJT_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.ewlJT_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.ewlJT_bwlc,.ewlJT_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.ewlJT_bqdH{row-gap:24px}\n\n.ewlJT_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.ewlJT_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.ewlJT_fFDJ{display:none}\n\n.ewlJT_fxkJ{margin-top:-8px}\n\n.ewlJT_esVF{min-height:48px}\n\n.ewlJT_eTZq{position:relative}\n\n.ewlJT_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.ewlJT_cVld{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.eObAE_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.eObAE_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.eObAE_bwlc,.eObAE_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.eObAE_bqdH{row-gap:24px}\n\n.eObAE_eTaq{align-items:center;border:1px solid ").concat(theme.blankBorderColor || 'inherit', ";border-radius:").concat(theme.blankBorderRadius || 'inherit', ";display:inline-flex;height:").concat(theme.blankHeight || 'inherit', ";justify-content:center;min-width:").concat(theme.blankMinWidth || 'inherit', ";padding:2px 2px;vertical-align:middle}\n\n.eObAE_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.eObAE_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.eObAE_fFDJ{display:none}\n\n.eObAE_fxkJ{margin-top:-8px}\n\n.eObAE_esVF{min-height:48px}\n\n.eObAE_eTZq{position:relative}\n\n.eObAE_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.eObAE_cVld{max-width:100%;width:calc(25% + 350px)}");
   },
-  'cardWrapper': 'ewlJT_eKXQ',
-  'itemCardInnerContainer': 'ewlJT_bwlc',
-  'metricsContainer': 'ewlJT_bqdH',
-  'itemCardToggleButtonWrapper': 'ewlJT_NpIG',
-  'metricNumberContext': 'ewlJT_eoBe',
-  'hiddenMetrics': 'ewlJT_fFDJ',
-  'itemBodyToggleButtonWrapper': 'ewlJT_fxkJ',
-  'itemBody': 'ewlJT_esVF',
-  'hiddenItemBody': 'ewlJT_eTZq',
-  'answerFrequencySummaryContainer': 'ewlJT_cVld'
+  'cardWrapper': 'eObAE_eKXQ',
+  'itemCardInnerContainer': 'eObAE_bwlc',
+  'metricsContainer': 'eObAE_bqdH',
+  'blankSpace': 'eObAE_eTaq',
+  'itemCardToggleButtonWrapper': 'eObAE_NpIG',
+  'metricNumberContext': 'eObAE_eoBe',
+  'hiddenMetrics': 'eObAE_fFDJ',
+  'itemBodyToggleButtonWrapper': 'eObAE_fxkJ',
+  'itemBody': 'eObAE_esVF',
+  'hiddenItemBody': 'eObAE_eTZq',
+  'answerFrequencySummaryContainer': 'eObAE_cVld'
 };
+var parser = new DOMParser();
+var parsererrorElement = 'parsererror';
+var parseType = 'text/html';
 var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewItemAnalysis, _Component);
 
@@ -148,6 +154,34 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }, _this.mapInteractionTypeToTranslation(interactionType));
     };
 
+    _this.isBlank = function (element) {
+      if (element.textContent) return false;
+      if (!element.hasAttribute('id')) return false;
+      var regex = new RegExp('^blank_.+$');
+      return regex.test(element.getAttribute('id'));
+    };
+
+    _this.enhanceItemBody = function (itemBody) {
+      var tempDoc = parser.parseFromString(itemBody, parseType);
+      var errorNode = tempDoc.querySelector(parsererrorElement);
+
+      if (errorNode) {
+        // eslint-disable-next-line no-console
+        console.error('Parsing failed: ', errorNode);
+        return itemBody;
+      }
+
+      Array.from(tempDoc.querySelectorAll('span')).filter(function (span) {
+        return _this.isBlank(span);
+      }).forEach(function (span, index) {
+        var newSpan = span.cloneNode();
+        newSpan.setAttribute('class', styles.blankSpace);
+        newSpan.innerHTML = "".concat(index + 1);
+        span.replaceWith(newSpan);
+      });
+      return tempDoc.querySelector('body').innerHTML;
+    };
+
     _this.renderRichContent = function (itemBody, itemBodyClass, itemId) {
       return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         direction: "row",
@@ -238,6 +272,14 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       })));
     };
 
+    _this.shouldEnhanceItemBody = function () {
+      var _this$props = _this.props,
+          itemAnalysis = _this$props.itemAnalysis,
+          afsFlags = _this$props.afsFlags;
+      var metadata = itemAnalysis.metadata;
+      return afsFlags.fillInTheBlankEnabled && metadata.interaction_type === _quizCommon.RICH_FILL_BLANK_SLUG && metadata.item_body;
+    };
+
     return _this;
   }
 
@@ -278,10 +320,10 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     value: function render() {
       var _metadata$item_title;
 
-      var _this$props = this.props,
-          showFrequencyTable = _this$props.showFrequencyTable,
-          itemAnalysis = _this$props.itemAnalysis,
-          afsFlags = _this$props.afsFlags;
+      var _this$props2 = this.props,
+          showFrequencyTable = _this$props2.showFrequencyTable,
+          itemAnalysis = _this$props2.itemAnalysis,
+          afsFlags = _this$props2.afsFlags;
       var answer_summary = itemAnalysis.answer_summary,
           metadata = itemAnalysis.metadata,
           scores = itemAnalysis.scores;
@@ -290,6 +332,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var metricsClass = (0, _classnames3.default)((0, _defineProperty2.default)({}, styles.hiddenMetrics, !this.state.metricsExpanded));
       var itemBodyClass = (0, _classnames3.default)(styles.itemBody, (0, _defineProperty2.default)({}, styles.hiddenItemBody, this.isBodyHigherThanContainer() && !this.state.bodyExpanded));
       var title = (_metadata$item_title = metadata.item_title) !== null && _metadata$item_title !== void 0 ? _metadata$item_title : (0, _formatMessage.default)('Untitled item');
+      var itemBodyEnhanced = this.shouldEnhanceItemBody() ? this.enhanceItemBody(metadata.item_body) : metadata.item_body;
       return /*#__PURE__*/_react.default.createElement(_index2.default, {
         className: styles.cardWrapper
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
@@ -310,7 +353,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         padding: "small xx-small none none",
         overflowY: "hidden",
         size: !this.state.bodyExpanded ? '60px' : void 0
-      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
+      }, this.renderRichContent(itemBodyEnhanced, itemBodyClass, itemId)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
     }
   }]);
   NewItemAnalysis.displayName = "NewItemAnalysis";

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js

@@ -8,12 +8,17 @@ exports.default = generator;
 function generator(_ref) {
   var spacing = _ref.spacing,
       breakpoints = _ref.breakpoints,
-      typography = _ref.typography;
+      typography = _ref.typography,
+      colors = _ref.colors;
   return {
     tabletBreakPoint: "max-width: ".concat(breakpoints.large),
     cardWrapperPadding: spacing.medium,
     viewPaddingRight: spacing.xxSmall,
     metricNumberContextFontSize: typography.fontSizeMedium,
-    metricNumberContextFontWeight: typography.fontWeightNormal
+    metricNumberContextFontWeight: typography.fontWeightNormal,
+    blankBorderColor: colors.tiara,
+    blankBorderRadius: '14px',
+    blankMinWidth: '20px',
+    blankHeight: '20px'
   };
 }

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/propTypes.js

@@ -123,7 +123,8 @@ var afsFlags = _propTypes.default.shape({
   categorizationEnabled: _propTypes.default.bool.isRequired,
   trueFalseEnabled: _propTypes.default.bool.isRequired,
   choiceEnabled: _propTypes.default.bool.isRequired,
-  multiAnswerEnabled: _propTypes.default.bool.isRequired
+  multiAnswerEnabled: _propTypes.default.bool.isRequired,
+  fillInTheBlankEnabled: _propTypes.default.bool.isRequired
 });
 
 exports.afsFlags = afsFlags;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.4.2-rc.1+866bb7620",
+  "version": "20.4.2-rc.3+22ec8e38d",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.0.0",
-    "@instructure/quiz-common": "20.4.2-rc.1+866bb7620",
-    "@instructure/quiz-i18n": "20.4.2-rc.1+866bb7620",
-    "@instructure/quiz-interactions": "20.4.2-rc.1+866bb7620",
-    "@instructure/quiz-number-input": "20.4.2-rc.1+866bb7620",
-    "@instructure/quiz-rce": "20.4.2-rc.1+866bb7620",
+    "@instructure/quiz-common": "20.4.2-rc.3+22ec8e38d",
+    "@instructure/quiz-i18n": "20.4.2-rc.3+22ec8e38d",
+    "@instructure/quiz-interactions": "20.4.2-rc.3+22ec8e38d",
+    "@instructure/quiz-number-input": "20.4.2-rc.3+22ec8e38d",
+    "@instructure/quiz-rce": "20.4.2-rc.3+22ec8e38d",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.4.2-rc.1+866bb7620",
+    "instructure-validations": "20.4.2-rc.3+22ec8e38d",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.4.2-rc.1+866bb7620",
+    "quiz-presets": "20.4.2-rc.3+22ec8e38d",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "866bb7620e430ba716d2c6ab9400751884366666"
+  "gitHead": "22ec8e38d00de672820ed31af18d8936f9d54d6f"
 }