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

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/presenter.js

@@ -3,7 +3,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ChoiceTypeTable from "./ChoiceTypeTable/index.js";
+import ChoiceTypeTable from "../shared/ChoiceTypeTable/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
 import AggregationTable from "../shared/AggregationTable/index.js";
 import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
@@ -31,7 +31,7 @@ export var ChoiceType = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
         afsTable: /*#__PURE__*/React.createElement(ChoiceTypeTable, {
           itemId: itemId,
-          answerSummary: answerSummary
+          choices: answerSummary.choices
         }),
         aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
           itemId: itemId,

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/MatchingTypeTable/presenter.js

@@ -111,6 +111,7 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
           padding: '0 0 0 0'
         }
       }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, correct ? "".concat(t('Correct answer'), ": ").concat(count) : count), /*#__PURE__*/React.createElement("div", {
+        "aria-hidden": "true",
         className: containerClassNames
       }, /*#__PURE__*/React.createElement(Flex, {
         direction: "row",

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/index.js

@@ -0,0 +1 @@
+export { RichFillBlankType as default } from "./presenter.js";

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/presenter.js

@@ -0,0 +1,92 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { richFillBlankTypeAnswerSummaryPropType } from "../../propTypes.js";
+import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+import ChoiceGroupTypeTable from "../shared/ChoiceGroupTypeTable/index.js";
+import { Text } from '@instructure/ui-text';
+import t from '@instructure/quiz-i18n/es/format-message';
+import AggregationTable from "../shared/AggregationTable/index.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var RichFillBlankType = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(RichFillBlankType, _Component);
+
+  var _super = _createSuper(RichFillBlankType);
+
+  function RichFillBlankType() {
+    var _this;
+
+    _classCallCheck(this, RichFillBlankType);
+
+    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.renderBlankInfo = function (blank) {
+      var _blank$aggregate, _blank$aggregate2;
+
+      var correctCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate = blank.aggregate) === null || _blank$aggregate === void 0 ? void 0 : _blank$aggregate.correct) || 0;
+      var incorrectCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate2 = blank.aggregate) === null || _blank$aggregate2 === void 0 ? void 0 : _blank$aggregate2.incorrect) || 0;
+      var noAnswer = (blank === null || blank === void 0 ? void 0 : blank.no_answer) || 0;
+      var correctString = "".concat(t('Correct'), ": ").concat(correctCount, " ");
+      var incorrectString = "".concat(t('Incorrect'), ": ").concat(incorrectCount, " ");
+      var noAnswerString = "".concat(t('No Answer'), ": ").concat(noAnswer, " ");
+      return jsx("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, jsx(Text, null, correctString), jsx(Text, null, incorrectString), jsx(Text, null, noAnswerString));
+    };
+
+    _this.renderGroup = function (key, itemId, blank, index) {
+      return jsx(ChoiceGroupTypeTable, {
+        key: key,
+        itemId: itemId,
+        blank: blank,
+        blankInfo: _this.renderBlankInfo(blank),
+        index: index
+      });
+    };
+
+    _this.renderGroups = function () {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      var blanks = answerSummary.blanks;
+      return blanks.map(function (blank, index) {
+        var key = "ChoiceGroupTypeTable_".concat(index);
+        return _this.renderGroup(key, itemId, blank, index);
+      });
+    };
+
+    _this.render = function () {
+      var _this$props2 = _this.props,
+          answerSummary = _this$props2.answerSummary,
+          itemId = _this$props2.itemId;
+      return jsx(AfsTableWrapper, null, jsx(AfsPartsContainer, {
+        afsTable: _this.renderGroups(),
+        aggregationTable: jsx(AggregationTable, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return RichFillBlankType;
+}(Component), _class2.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  answerSummary: richFillBlankTypeAnswerSummaryPropType.isRequired,
+  styles: PropTypes.object
+}.isRequired, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/styles.js

@@ -0,0 +1,10 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    groupAggregationContainer: {
+      display: 'flex',
+      gap: componentTheme.aggregateSpacing
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/theme.js

@@ -0,0 +1,8 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    aggregateSpacing: spacing.xSmall
+  };
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/presenter.js

@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import { PropTypes } from '@instructure/quiz-interactions';
 import LegacyChoiceType from "./LegacyChoiceType/index.js";
 import ChoiceType from "./ChoiceType/index.js";
+import RichFillBlankType from "./RichFillBlankType/index.js";
 import AggregationType from "./AggregationType/index.js";
 import { MatchingType, OrderingType, CategorizationType } from "./MatchingType/index.js";
 import { afsFlags, answerSummaryPropType } from "../propTypes.js";
@@ -57,6 +58,10 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.multiAnswerEnabled) {
         _this.afsTableComponentMap.set('multi-answer', ChoiceType);
       }
+
+      if (afsFlags.fillInTheBlankEnabled) {
+        _this.afsTableComponentMap.set('rich-fill-blank', RichFillBlankType);
+      }
     };
 
     _this.render = function () {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/presenter.js

@@ -8,7 +8,6 @@ import React, { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
 import { onlyAggregatePropType } from "../../../propTypes.js";
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import PropTypes from 'prop-types';
 import { IconCheckSolid, IconXSolid, IconNoSolid, IconOvalHalfSolid } from '@instructure/ui-icons';
 import { themeable } from '@instructure/ui-themeable';
@@ -97,7 +96,7 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
         themeOverride: {
           padding: '0px'
         }
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, label), /*#__PURE__*/React.createElement(Flex, {
+      }, /*#__PURE__*/React.createElement(Flex, {
         direction: "row",
         alignItems: "center"
       }, /*#__PURE__*/React.createElement(Flex.Item, {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceGroupTypeTable/index.js

@@ -0,0 +1 @@
+export { ChoiceGroupTypeTable as default } from "./presenter.js";

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

@@ -0,0 +1,165 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { choiceTypeObject } from "../../../propTypes.js";
+import { Flex } from '@instructure/ui-flex';
+import { Text } from '@instructure/ui-text';
+import ExpandButton from "../../../../../../../common/components/shared/ExpandButton/index.js";
+import t from '@instructure/quiz-i18n/es/format-message';
+import Card from "../../../../../../../common/components/shared/Card/index.js";
+import ChoiceTypeTable from "../ChoiceTypeTable/index.js";
+import BlankIcon from "../../../NewItemAnalysis/BlankIcon/index.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(ChoiceGroupTypeTable, _Component);
+
+  var _super = _createSuper(ChoiceGroupTypeTable);
+
+  function ChoiceGroupTypeTable() {
+    var _this;
+
+    _classCallCheck(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 t('Open Entry');
+
+        case 'wordbank':
+          return t('Word Bank');
+
+        case 'dropdown':
+          return t('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 jsx(ChoiceTypeTable, {
+        itemId: tableId,
+        choices: choices,
+        tableContainerSizeClass: tableContainerSizeClass
+      });
+    };
+
+    _this.renderBlankIcon = function () {
+      var index = _this.props.index;
+      var blankIconKey = "blank_icon_".concat(index);
+      return jsx(BlankIcon, {
+        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 jsx(Flex, {
+        overflowY: "visible",
+        direction: "row",
+        alignItems: "start",
+        wrap: "wrap"
+      }, jsx(Flex.Item, null, _this.renderBlankIcon()), jsx(Flex.Item, {
+        margin: "xxx-small medium small x-small"
+      }, jsx(Text, {
+        weight: "bold"
+      }, blankTextAndType)), jsx(Flex.Item, {
+        shouldShrink: true,
+        margin: "xxx-small none small none"
+      }, blankInfo));
+    };
+
+    _this.renderGroup = function () {
+      return jsx(Flex, {
+        direction: "row",
+        alignItems: "start"
+      }, jsx(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        margin: "xx-small none none none"
+      }, _this.renderHeadLine()), jsx(Flex.Item, {
+        margin: "none none none x-small"
+      }, jsx(ExpandButton, {
+        onClick: _this.handleBodyToggle,
+        title: _this.state.bodyExpanded ? t('collapse group result') : t('expand group result'),
+        isExpanded: _this.state.bodyExpanded
+      })));
+    };
+
+    _this.render = function () {
+      return jsx("div", {
+        css: _this.props.styles.groupWrapper
+      }, jsx(Card, {
+        css: _this.props.styles.cardWrapper
+      }, jsx(Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, jsx(Flex.Item, {
+        overflowY: "visible"
+      }, jsx(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+      }, jsx(Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, jsx(Flex.Item, {
+        shouldShrink: true,
+        padding: "x-small small x-small medium",
+        overflowY: "hidden"
+      }, _this.renderGroup()), _this.state.bodyExpanded && jsx(Flex.Item, {
+        shouldShrink: true,
+        padding: "x-small small x-small small"
+      }, _this.renderTable())))))));
+    };
+
+    return _this;
+  }
+
+  return ChoiceGroupTypeTable;
+}(Component), _class2.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  blank: PropTypes.shape({
+    choices: PropTypes.arrayOf(choiceTypeObject).isRequired,
+    blank_text: PropTypes.string.isRequired,
+    blank_type: PropTypes.string.isRequired
+  }).isRequired,
+  blankInfo: PropTypes.node.isRequired,
+  index: PropTypes.number.isRequired,
+  styles: PropTypes.object
+}.isRequired, _temp)) || _class);

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

@@ -0,0 +1,15 @@
+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")
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -0,0 +1,9 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    cardBottomMargin: spacing.xSmall,
+    cardMinWidth: '500px'
+  };
+};
+
+export default generateComponentTheme;

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

@@ -12,21 +12,22 @@ import { Table } from '@instructure/ui-table';
 import { themeable } from '@instructure/ui-themeable';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import PropTypes from 'prop-types';
-import { choiceTypeAnswerSummaryPropType } from "../../../propTypes.js";
+import { choiceTypeObject } from "../../../propTypes.js";
 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'
 };
 import theme from "./theme.js";
 import classNames from 'classnames';
@@ -96,8 +97,7 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
     };
 
     _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 '';
@@ -171,13 +171,13 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
 
     _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 = classNames(styles.tableContainer, _defineProperty({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
+      var containerClasses = classNames(tableContainerSizeClass, styles.tableContainer, _defineProperty({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
       return /*#__PURE__*/React.createElement("div", {
         className: containerClasses
       }, /*#__PURE__*/React.createElement(Table, {
@@ -206,5 +206,8 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
   return ChoiceTypeTable;
 }(Component), _class2.propTypes = {
   itemId: PropTypes.number,
-  answerSummary: choiceTypeAnswerSummaryPropType
-}.isRequired, _temp)) || _class);
+  choices: PropTypes.arrayOf(choiceTypeObject),
+  tableContainerClass: PropTypes.string
+}.isRequired, _class2.defaultProps = {
+  tableContainerSizeClass: styles.tableWidthMax
+}, _temp)) || _class);

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

@@ -26,11 +26,11 @@ export var quizAnalysisPropType = PropTypes.shape({
     average_attempts: PropTypes.number
   }).isRequired
 });
-var aggregateDetailPropType = PropTypes.shape({
+export var aggregateDetailPropType = PropTypes.shape({
   count: PropTypes.number.isRequired,
   percentage: PropTypes.number.isRequired
 });
-var aggregatePropType = PropTypes.shape({
+export var aggregatePropType = PropTypes.shape({
   correct: aggregateDetailPropType.isRequired,
   incorrect: aggregateDetailPropType.isRequired,
   partial_correct: aggregateDetailPropType
@@ -39,14 +39,16 @@ export var onlyAggregatePropType = PropTypes.shape({
   no_answer: aggregateDetailPropType,
   aggregate: aggregatePropType
 });
+export var choiceTypeObject = PropTypes.shape({
+  body: PropTypes.string,
+  correct: PropTypes.bool,
+  count: PropTypes.number,
+  percentage: PropTypes.number
+});
 export var choiceTypeAnswerSummaryPropType = PropTypes.shape({
-  choices: PropTypes.arrayOf(PropTypes.shape({
-    body: PropTypes.string,
-    correct: PropTypes.bool,
-    count: PropTypes.number,
-    percentage: PropTypes.number
-  })),
-  no_answer: aggregateDetailPropType
+  choices: PropTypes.arrayOf(choiceTypeObject),
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
 });
 export var matchingTypeAnswerSummaryPropType = PropTypes.shape({
   questions: PropTypes.objectOf(PropTypes.shape({
@@ -57,9 +59,25 @@ export var matchingTypeAnswerSummaryPropType = PropTypes.shape({
       body: PropTypes.string,
       distractor: PropTypes.bool
     }))
-  }))
+  })),
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
+});
+export var richFillBlankTypeAnswerSummaryPropType = PropTypes.shape({
+  blanks: PropTypes.arrayOf(PropTypes.shape({
+    choices: PropTypes.arrayOf(choiceTypeObject),
+    blank_text: PropTypes.string,
+    blank_type: PropTypes.string,
+    no_answer: PropTypes.number,
+    aggregate: PropTypes.shape({
+      correct: PropTypes.number,
+      incorrect: PropTypes.number
+    })
+  })),
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
 });
-export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType]);
+export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType, richFillBlankTypeAnswerSummaryPropType]);
 export var itemAnalysisPropType = PropTypes.shape({
   attempts: PropTypes.shape({
     students_responded: PropTypes.number,

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/presenter.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _index = _interopRequireDefault(require("./ChoiceTypeTable/index.js"));
+var _index = _interopRequireDefault(require("../shared/ChoiceTypeTable/index.js"));
 
 var _propTypes2 = require("../../propTypes.js");
 
@@ -52,7 +52,7 @@ var ChoiceType = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement(_index3.default, null, /*#__PURE__*/_react.default.createElement(_presenter.AfsPartsContainer, {
         afsTable: /*#__PURE__*/_react.default.createElement(_index.default, {
           itemId: itemId,
-          answerSummary: answerSummary
+          choices: answerSummary.choices
         }),
         aggregationTable: /*#__PURE__*/_react.default.createElement(_index2.default, {
           itemId: itemId,

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/MatchingTypeTable/presenter.js

@@ -138,6 +138,7 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
           padding: '0 0 0 0'
         }
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, correct ? "".concat((0, _formatMessage.default)('Correct answer'), ": ").concat(count) : count), /*#__PURE__*/_react.default.createElement("div", {
+        "aria-hidden": "true",
         className: containerClassNames
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         direction: "row",

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/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.RichFillBlankType;
+  }
+});
+
+var _presenter = require("./presenter.js");

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/presenter.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichFillBlankType = 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 _index = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
+
+var _presenter = require("../shared/AfsPartsContainer/presenter.js");
+
+var _index2 = _interopRequireDefault(require("../shared/ChoiceGroupTypeTable/index.js"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index3 = _interopRequireDefault(require("../shared/AggregationTable/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 RichFillBlankType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(RichFillBlankType, _Component);
+
+  var _super = (0, _createSuper2.default)(RichFillBlankType);
+
+  function RichFillBlankType() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, RichFillBlankType);
+
+    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.renderBlankInfo = function (blank) {
+      var _blank$aggregate, _blank$aggregate2;
+
+      var correctCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate = blank.aggregate) === null || _blank$aggregate === void 0 ? void 0 : _blank$aggregate.correct) || 0;
+      var incorrectCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate2 = blank.aggregate) === null || _blank$aggregate2 === void 0 ? void 0 : _blank$aggregate2.incorrect) || 0;
+      var noAnswer = (blank === null || blank === void 0 ? void 0 : blank.no_answer) || 0;
+      var correctString = "".concat((0, _formatMessage.default)('Correct'), ": ").concat(correctCount, " ");
+      var incorrectString = "".concat((0, _formatMessage.default)('Incorrect'), ": ").concat(incorrectCount, " ");
+      var noAnswerString = "".concat((0, _formatMessage.default)('No Answer'), ": ").concat(noAnswer, " ");
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, (0, _emotion.jsx)(_uiText.Text, null, correctString), (0, _emotion.jsx)(_uiText.Text, null, incorrectString), (0, _emotion.jsx)(_uiText.Text, null, noAnswerString));
+    };
+
+    _this.renderGroup = function (key, itemId, blank, index) {
+      return (0, _emotion.jsx)(_index2.default, {
+        key: key,
+        itemId: itemId,
+        blank: blank,
+        blankInfo: _this.renderBlankInfo(blank),
+        index: index
+      });
+    };
+
+    _this.renderGroups = function () {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      var blanks = answerSummary.blanks;
+      return blanks.map(function (blank, index) {
+        var key = "ChoiceGroupTypeTable_".concat(index);
+        return _this.renderGroup(key, itemId, blank, index);
+      });
+    };
+
+    _this.render = function () {
+      var _this$props2 = _this.props,
+          answerSummary = _this$props2.answerSummary,
+          itemId = _this$props2.itemId;
+      return (0, _emotion.jsx)(_index.default, null, (0, _emotion.jsx)(_presenter.AfsPartsContainer, {
+        afsTable: _this.renderGroups(),
+        aggregationTable: (0, _emotion.jsx)(_index3.default, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return RichFillBlankType;
+}(_react.Component), _class2.propTypes = {
+  itemId: _propTypes.default.number.isRequired,
+  answerSummary: _propTypes2.richFillBlankTypeAnswerSummaryPropType.isRequired,
+  styles: _propTypes.default.object
+}.isRequired, _temp)) || _class);
+exports.RichFillBlankType = RichFillBlankType;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    groupAggregationContainer: {
+      display: 'flex',
+      gap: componentTheme.aggregateSpacing
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/theme.js

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

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

@@ -23,9 +23,11 @@ var _index = _interopRequireDefault(require("./LegacyChoiceType/index.js"));
 
 var _index2 = _interopRequireDefault(require("./ChoiceType/index.js"));
 
-var _index3 = _interopRequireDefault(require("./AggregationType/index.js"));
+var _index3 = _interopRequireDefault(require("./RichFillBlankType/index.js"));
 
-var _index4 = require("./MatchingType/index.js");
+var _index4 = _interopRequireDefault(require("./AggregationType/index.js"));
+
+var _index5 = require("./MatchingType/index.js");
 
 var _propTypes = require("../propTypes.js");
 
@@ -48,23 +50,23 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
 
     _this.addAfsComponentsByFlags = function (afsFlags) {
       if (afsFlags.formulaEnabled) {
-        _this.afsTableComponentMap.set('formula', _index3.default);
+        _this.afsTableComponentMap.set('formula', _index4.default);
       }
 
       if (afsFlags.hotSpotEnabled) {
-        _this.afsTableComponentMap.set('hot-spot', _index3.default);
+        _this.afsTableComponentMap.set('hot-spot', _index4.default);
       }
 
       if (afsFlags.matchingEnabled) {
-        _this.afsTableComponentMap.set('matching', _index4.MatchingType);
+        _this.afsTableComponentMap.set('matching', _index5.MatchingType);
       }
 
       if (afsFlags.orderingEnabled) {
-        _this.afsTableComponentMap.set('ordering', _index4.OrderingType);
+        _this.afsTableComponentMap.set('ordering', _index5.OrderingType);
       }
 
       if (afsFlags.categorizationEnabled) {
-        _this.afsTableComponentMap.set('categorization', _index4.CategorizationType);
+        _this.afsTableComponentMap.set('categorization', _index5.CategorizationType);
       }
 
       if (afsFlags.trueFalseEnabled) {
@@ -78,6 +80,10 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.multiAnswerEnabled) {
         _this.afsTableComponentMap.set('multi-answer', _index2.default);
       }
+
+      if (afsFlags.fillInTheBlankEnabled) {
+        _this.afsTableComponentMap.set('rich-fill-blank', _index3.default);
+      }
     };
 
     _this.render = function () {

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

@@ -23,8 +23,6 @@ var _uiTable = require("@instructure/ui-table");
 
 var _propTypes = require("../../../propTypes.js");
 
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _uiIcons = require("@instructure/ui-icons");
@@ -124,7 +122,7 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         themeOverride: {
           padding: '0px'
         }
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, label), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         direction: "row",
         alignItems: "center"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceGroupTypeTable/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.ChoiceGroupTypeTable;
+  }
+});
+
+var _presenter = require("./presenter.js");

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/propTypes.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.afsFlags = exports.itemAnalysisPropType = exports.answerSummaryPropType = exports.matchingTypeAnswerSummaryPropType = exports.choiceTypeAnswerSummaryPropType = exports.onlyAggregatePropType = exports.quizAnalysisPropType = exports.quizAnalysisMetadata = void 0;
+exports.afsFlags = exports.itemAnalysisPropType = exports.answerSummaryPropType = exports.richFillBlankTypeAnswerSummaryPropType = exports.matchingTypeAnswerSummaryPropType = exports.choiceTypeAnswerSummaryPropType = exports.choiceTypeObject = exports.onlyAggregatePropType = exports.aggregatePropType = exports.aggregateDetailPropType = exports.quizAnalysisPropType = exports.quizAnalysisMetadata = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -47,12 +47,16 @@ var aggregateDetailPropType = _propTypes.default.shape({
   percentage: _propTypes.default.number.isRequired
 });
 
+exports.aggregateDetailPropType = aggregateDetailPropType;
+
 var aggregatePropType = _propTypes.default.shape({
   correct: aggregateDetailPropType.isRequired,
   incorrect: aggregateDetailPropType.isRequired,
   partial_correct: aggregateDetailPropType
 });
 
+exports.aggregatePropType = aggregatePropType;
+
 var onlyAggregatePropType = _propTypes.default.shape({
   no_answer: aggregateDetailPropType,
   aggregate: aggregatePropType
@@ -60,14 +64,19 @@ var onlyAggregatePropType = _propTypes.default.shape({
 
 exports.onlyAggregatePropType = onlyAggregatePropType;
 
+var choiceTypeObject = _propTypes.default.shape({
+  body: _propTypes.default.string,
+  correct: _propTypes.default.bool,
+  count: _propTypes.default.number,
+  percentage: _propTypes.default.number
+});
+
+exports.choiceTypeObject = choiceTypeObject;
+
 var choiceTypeAnswerSummaryPropType = _propTypes.default.shape({
-  choices: _propTypes.default.arrayOf(_propTypes.default.shape({
-    body: _propTypes.default.string,
-    correct: _propTypes.default.bool,
-    count: _propTypes.default.number,
-    percentage: _propTypes.default.number
-  })),
-  no_answer: aggregateDetailPropType
+  choices: _propTypes.default.arrayOf(choiceTypeObject),
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
 });
 
 exports.choiceTypeAnswerSummaryPropType = choiceTypeAnswerSummaryPropType;
@@ -81,12 +90,31 @@ var matchingTypeAnswerSummaryPropType = _propTypes.default.shape({
       body: _propTypes.default.string,
       distractor: _propTypes.default.bool
     }))
-  }))
+  })),
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
 });
 
 exports.matchingTypeAnswerSummaryPropType = matchingTypeAnswerSummaryPropType;
 
-var answerSummaryPropType = _propTypes.default.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType]);
+var richFillBlankTypeAnswerSummaryPropType = _propTypes.default.shape({
+  blanks: _propTypes.default.arrayOf(_propTypes.default.shape({
+    choices: _propTypes.default.arrayOf(choiceTypeObject),
+    blank_text: _propTypes.default.string,
+    blank_type: _propTypes.default.string,
+    no_answer: _propTypes.default.number,
+    aggregate: _propTypes.default.shape({
+      correct: _propTypes.default.number,
+      incorrect: _propTypes.default.number
+    })
+  })),
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
+});
+
+exports.richFillBlankTypeAnswerSummaryPropType = richFillBlankTypeAnswerSummaryPropType;
+
+var answerSummaryPropType = _propTypes.default.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType, richFillBlankTypeAnswerSummaryPropType]);
 
 exports.answerSummaryPropType = answerSummaryPropType;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.4.2-rc.3+22ec8e38d",
+  "version": "20.4.2-rc.5+f8ddea77f",
   "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.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/quiz-common": "20.4.2-rc.5+f8ddea77f",
+    "@instructure/quiz-i18n": "20.4.2-rc.5+f8ddea77f",
+    "@instructure/quiz-interactions": "20.4.2-rc.5+f8ddea77f",
+    "@instructure/quiz-number-input": "20.4.2-rc.5+f8ddea77f",
+    "@instructure/quiz-rce": "20.4.2-rc.5+f8ddea77f",
     "@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.3+22ec8e38d",
+    "instructure-validations": "20.4.2-rc.5+f8ddea77f",
     "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.3+22ec8e38d",
+    "quiz-presets": "20.4.2-rc.5+f8ddea77f",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "22ec8e38d00de672820ed31af18d8936f9d54d6f"
+  "gitHead": "f8ddea77f2891407715b59f94335f3fcc679eb7a"
 }