@instructure/quiz-core 20.4.2-rc.2 → 20.4.2-rc.5

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceGroupTypeTable/presenter.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChoiceGroupTypeTable = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../../propTypes.js");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiText = require("@instructure/ui-text");
+
+var _index = _interopRequireDefault(require("../../../../../../../common/components/shared/ExpandButton/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index2 = _interopRequireDefault(require("../../../../../../../common/components/shared/Card/index.js"));
+
+var _index3 = _interopRequireDefault(require("../ChoiceTypeTable/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../../NewItemAnalysis/BlankIcon/index.js"));
+
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ChoiceGroupTypeTable, _Component);
+
+  var _super = (0, _createSuper2.default)(ChoiceGroupTypeTable);
+
+  function ChoiceGroupTypeTable() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ChoiceGroupTypeTable);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      bodyExpanded: false
+    };
+
+    _this.getTranslatedBlankType = function (blank_type) {
+      switch (blank_type) {
+        case 'openEntry':
+          return (0, _formatMessage.default)('Open Entry');
+
+        case 'wordbank':
+          return (0, _formatMessage.default)('Word Bank');
+
+        case 'dropdown':
+          return (0, _formatMessage.default)('Dropdown');
+
+        default:
+          return blank_type;
+      }
+    };
+
+    _this.handleBodyToggle = function () {
+      _this.setState({
+        bodyExpanded: !_this.state.bodyExpanded
+      });
+    };
+
+    _this.renderTable = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          blank = _this$props.blank,
+          index = _this$props.index;
+      var choices = blank.choices;
+      var tableId = "".concat(itemId, "_").concat(index, "_choiceGroup");
+      var tableContainerSizeClass = '';
+      return (0, _emotion.jsx)(_index3.default, {
+        itemId: tableId,
+        choices: choices,
+        tableContainerSizeClass: tableContainerSizeClass
+      });
+    };
+
+    _this.renderBlankIcon = function () {
+      var index = _this.props.index;
+      var blankIconKey = "blank_icon_".concat(index);
+      return (0, _emotion.jsx)(_index4.default, {
+        key: blankIconKey,
+        number: index + 1
+      });
+    };
+
+    _this.renderHeadLine = function () {
+      var _this$props2 = _this.props,
+          blank = _this$props2.blank,
+          blankInfo = _this$props2.blankInfo;
+      var blank_text = blank.blank_text,
+          blank_type = blank.blank_type;
+      var blankTextAndType = "".concat(blank_text, " (").concat(_this.getTranslatedBlankType(blank_type), ")");
+      return (0, _emotion.jsx)(_uiFlex.Flex, {
+        overflowY: "visible",
+        direction: "row",
+        alignItems: "start",
+        wrap: "wrap"
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, _this.renderBlankIcon()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        margin: "xxx-small medium small x-small"
+      }, (0, _emotion.jsx)(_uiText.Text, {
+        weight: "bold"
+      }, blankTextAndType)), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        shouldShrink: true,
+        margin: "xxx-small none small none"
+      }, blankInfo));
+    };
+
+    _this.renderGroup = function () {
+      return (0, _emotion.jsx)(_uiFlex.Flex, {
+        direction: "row",
+        alignItems: "start"
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        margin: "xx-small none none none"
+      }, _this.renderHeadLine()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        margin: "none none none x-small"
+      }, (0, _emotion.jsx)(_index.default, {
+        onClick: _this.handleBodyToggle,
+        title: _this.state.bodyExpanded ? (0, _formatMessage.default)('collapse group result') : (0, _formatMessage.default)('expand group result'),
+        isExpanded: _this.state.bodyExpanded
+      })));
+    };
+
+    _this.render = function () {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.groupWrapper
+      }, (0, _emotion.jsx)(_index2.default, {
+        css: _this.props.styles.cardWrapper
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        overflowY: "visible"
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        shouldShrink: true,
+        padding: "x-small small x-small medium",
+        overflowY: "hidden"
+      }, _this.renderGroup()), _this.state.bodyExpanded && (0, _emotion.jsx)(_uiFlex.Flex.Item, {
+        shouldShrink: true,
+        padding: "x-small small x-small small"
+      }, _this.renderTable())))))));
+    };
+
+    return _this;
+  }
+
+  return ChoiceGroupTypeTable;
+}(_react.Component), _class2.propTypes = {
+  itemId: _propTypes.default.number.isRequired,
+  blank: _propTypes.default.shape({
+    choices: _propTypes.default.arrayOf(_propTypes2.choiceTypeObject).isRequired,
+    blank_text: _propTypes.default.string.isRequired,
+    blank_type: _propTypes.default.string.isRequired
+  }).isRequired,
+  blankInfo: _propTypes.default.node.isRequired,
+  index: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object
+}.isRequired, _temp)) || _class);
+exports.ChoiceGroupTypeTable = ChoiceGroupTypeTable;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceGroupTypeTable/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    groupWrapper: {
+      padding: '0',
+      width: 'calc(25% + 350px)',
+      minWidth: componentTheme.cardMinWidth,
+      maxWidth: '100%'
+    },
+    cardWrapper: {
+      margin: "0 0 ".concat(componentTheme.cardBottomMargin, " 0")
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceGroupTypeTable/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    cardBottomMargin: spacing.xSmall,
+    cardMinWidth: '500px'
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/{ChoiceType → shared}/ChoiceTypeTable/presenter.js

@@ -48,19 +48,20 @@ var _uiText = require("@instructure/ui-text");
 var _rowStyleMap, _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'elvBp',
+  componentId: 'cYrxJ',
   template: function template(theme) {
-    return "\n\n.elvBp_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.elvBp_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.elvBp_SVtU table{border-collapse:separate;border-spacing:0 1px}\n\n.elvBp_eviJ table thead tr td,.elvBp_eviJ table thead tr th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.elvBp_SVtU table tbody tr th{font-weight:400;width:33.33%}\n\n.elvBp_SVtU table tbody tr td{width:33.33%}\n\n.elvBp_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.elvBp_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.elvBp_EKAb svg{fill:#fff}\n\n.elvBp_cCmC{align-items:center;display:flex;height:calc(100% - 4px);justify-content:center}\n\n.elvBp_dJVn{padding:").concat(theme.cellPadding || 'inherit', "}\n\n.elvBp_eEOp td,.elvBp_eEOp th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.elvBp_UAZE td{border-width:2px 0 2px 0}\n\n.elvBp_UAZE td,.elvBp_UAZE th:first-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid}\n\n.elvBp_UAZE th:first-child{border-radius:4px 0 0 4px;border-width:2px 0 2px 2px}\n\n.elvBp_UAZE td:last-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}");
+    return "\n\n.cYrxJ_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.cYrxJ_fgIl{max-width:100%;width:calc(25% + 350px)}\n\n.cYrxJ_SVtU table{border-collapse:separate;border-spacing:0 1px}\n\n.cYrxJ_eviJ table thead tr td,.cYrxJ_eviJ table thead tr th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.cYrxJ_SVtU table tbody tr th{font-weight:400;width:33.33%}\n\n.cYrxJ_SVtU table tbody tr td{width:33.33%}\n\n.cYrxJ_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.cYrxJ_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.cYrxJ_EKAb svg{fill:#fff}\n\n.cYrxJ_cCmC{align-items:center;display:flex;height:calc(100% - 4px);justify-content:center}\n\n.cYrxJ_dJVn{padding:").concat(theme.cellPadding || 'inherit', "}\n\n.cYrxJ_eEOp td,.cYrxJ_eEOp th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.cYrxJ_UAZE td{border-width:2px 0 2px 0}\n\n.cYrxJ_UAZE td,.cYrxJ_UAZE th:first-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid}\n\n.cYrxJ_UAZE th:first-child{border-radius:4px 0 0 4px;border-width:2px 0 2px 2px}\n\n.cYrxJ_UAZE td:last-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}");
   },
-  'tableWrapper': 'elvBp_rMrG',
-  'tableContainer': 'elvBp_SVtU',
-  'headerGrayBottomBorder': 'elvBp_eviJ',
-  'iconWrapper': 'elvBp_cvRx',
-  'iconCorrect': 'elvBp_EKAb',
-  'textContainer': 'elvBp_cCmC',
-  'firstTextContainer': 'elvBp_dJVn',
-  'incorrectRow': 'elvBp_eEOp',
-  'correctRow': 'elvBp_UAZE'
+  'tableWrapper': 'cYrxJ_rMrG',
+  'tableWidthMax': 'cYrxJ_fgIl',
+  'tableContainer': 'cYrxJ_SVtU',
+  'headerGrayBottomBorder': 'cYrxJ_eviJ',
+  'iconWrapper': 'cYrxJ_cvRx',
+  'iconCorrect': 'cYrxJ_EKAb',
+  'textContainer': 'cYrxJ_cCmC',
+  'firstTextContainer': 'cYrxJ_dJVn',
+  'incorrectRow': 'cYrxJ_eEOp',
+  'correctRow': 'cYrxJ_UAZE'
 };
 var correctAttribute = 'correct';
 var incorrectAttribute = 'incorrect';
@@ -124,8 +125,7 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     };
 
     _this.getDataIconAttribute = function (correct, choiceIndex) {
-      var answerSummary = _this.props.answerSummary;
-      var choices = answerSummary.choices;
+      var choices = _this.props.choices;
 
       if (_this.nextChoiceIsCorrect(choices, choiceIndex + 1) && !correct) {
         return '';
@@ -199,13 +199,13 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
     _this.render = function () {
       var _this$props = _this.props,
-          answerSummary = _this$props.answerSummary,
-          itemId = _this$props.itemId;
-      var choices = answerSummary.choices;
+          choices = _this$props.choices,
+          itemId = _this$props.itemId,
+          tableContainerSizeClass = _this$props.tableContainerSizeClass;
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      var containerClasses = (0, _classnames.default)(styles.tableContainer, (0, _defineProperty2.default)({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
+      var containerClasses = (0, _classnames.default)(tableContainerSizeClass, styles.tableContainer, (0, _defineProperty2.default)({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: containerClasses
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
@@ -234,6 +234,9 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   return ChoiceTypeTable;
 }(_react.Component), _class2.propTypes = {
   itemId: _propTypes.default.number,
-  answerSummary: _propTypes2.choiceTypeAnswerSummaryPropType
-}.isRequired, _temp)) || _class);
+  choices: _propTypes.default.arrayOf(_propTypes2.choiceTypeObject),
+  tableContainerClass: _propTypes.default.string
+}.isRequired, _class2.defaultProps = {
+  tableContainerSizeClass: styles.tableWidthMax
+}, _temp)) || _class);
 exports.ChoiceTypeTable = ChoiceTypeTable;

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'
   };
 }