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

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

@@ -3,10 +3,10 @@ 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 AggregationTable from "../shared/AggregationTable/index.js";
 import { onlyAggregatePropType } from "../../propTypes.js";
 import { AfsTableWrapper } from "../shared/AfsTableWrapper/presenter.js";
 import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+import AggregationTable from "../shared/AggregationTable/index.js";
 export var AggregationType = /*#__PURE__*/function (_Component) {
   _inherits(AggregationType, _Component);
 

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

@@ -87,23 +87,19 @@ export var ChoiceTypeTableRow = (_dec = themeable(theme, styles), _dec(_class =
         key: _this.props.choiceIndex
       }, /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
-          padding: '0px',
-          fontWeight: 'bold'
+          padding: '0px'
         }
       }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon(correct)), /*#__PURE__*/React.createElement(Table.RowHeader, {
         theme: {
-          padding: cellPadding,
-          fontWeight: 'bold'
+          padding: cellPadding
         }
       }, _this.renderMiddleCell(correct, _this.extractChoiceText(choiceBody, correct))), /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
-          padding: cellPadding,
-          fontWeight: 'bold'
+          padding: cellPadding
         }
       }, _this.renderMiddleCell(correct, _this.props.choice.count)), /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
-          padding: cellPadding,
-          fontWeight: 'bold'
+          padding: cellPadding
         },
         textAlign: "center"
       }, _this.renderLastCell(correct, "".concat(_this.props.choice.percentage, "%"))));

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

@@ -14,12 +14,12 @@ import PropTypes from 'prop-types';
 import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
 var styles = {
-  componentId: 'dCEWT',
+  componentId: 'fxQkB',
   template: function template(theme) {
-    return "\n\n.dCEWT_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.dCEWT_SVtU{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.fxQkB_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.fxQkB_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.fxQkB_SVtU table tbody tr th{font-weight:400}");
   },
-  'tableWrapper': 'dCEWT_rMrG',
-  'tableContainer': 'dCEWT_SVtU'
+  'tableWrapper': 'fxQkB_rMrG',
+  'tableContainer': 'fxQkB_SVtU'
 };
 import theme from "./theme.js";
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/CategorizationType.js

@@ -0,0 +1,74 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
+import PropTypes from 'prop-types';
+import { matchingTypeAnswerSummaryPropType } from "../../propTypes.js";
+import t from '@instructure/quiz-i18n/es/format-message';
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+import MatchingTypeTable from "./MatchingTypeTable/index.js";
+import AggregationTable from "../shared/AggregationTable/index.js";
+var distractorKey = 'distractor';
+var distractorTranslation = t('Distractors');
+export var CategorizationType = /*#__PURE__*/function (_Component) {
+  _inherits(CategorizationType, _Component);
+
+  var _super = _createSuper(CategorizationType);
+
+  function CategorizationType() {
+    var _this;
+
+    _classCallCheck(this, CategorizationType);
+
+    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.updateAnswerBody = function (answerSummary) {
+      var answerSummaryCopy = _objectSpread({}, answerSummary);
+
+      Object.keys(answerSummaryCopy.questions).forEach(function (questionKey) {
+        Object.keys(answerSummaryCopy.questions[questionKey].answers).forEach(function (answerKey) {
+          if (distractorKey === answerKey) {
+            var detail = answerSummaryCopy.questions[questionKey].answers[answerKey];
+            answerSummaryCopy.questions[questionKey].answers[answerKey] = _objectSpread(_objectSpread({}, detail), {}, {
+              body: distractorTranslation
+            });
+          }
+        });
+      });
+      return answerSummaryCopy;
+    };
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary;
+
+      var updatedAnswerSummary = _this.updateAnswerBody(answerSummary);
+
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
+        afsTable: /*#__PURE__*/React.createElement(MatchingTypeTable, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary
+        }),
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return CategorizationType;
+}(Component);
+CategorizationType.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  answerSummary: matchingTypeAnswerSummaryPropType.isRequired
+}.isRequired;

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

@@ -3,11 +3,10 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
-import MatchingTypeTable from "./MatchingTypeTable/index.js";
 import PropTypes from 'prop-types';
 import { matchingTypeAnswerSummaryPropType } from "../../propTypes.js";
-import MatchingTypeOrderer from "./utils/matchingTypeOrderer.js";
 import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+import MatchingTypeTable from "./MatchingTypeTable/index.js";
 import AggregationTable from "../shared/AggregationTable/index.js";
 export var MatchingType = /*#__PURE__*/function (_Component) {
   _inherits(MatchingType, _Component);
@@ -29,20 +28,10 @@ export var MatchingType = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           itemId = _this$props.itemId,
           answerSummary = _this$props.answerSummary;
-      var questions = answerSummary.questions;
-      var questionKeys = Object.keys(questions);
-      var exampleAnswers = questions[questionKeys[0]].answers;
-      var answerKeys = Object.keys(exampleAnswers);
-      var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
-      var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
-      var tableHalfWidth = orderedAnswerKeys.length <= 3;
       return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
-        tableHalfWidth: tableHalfWidth,
         afsTable: /*#__PURE__*/React.createElement(MatchingTypeTable, {
           itemId: itemId,
-          answerSummary: answerSummary,
-          orderedAnswerKeys: orderedAnswerKeys,
-          orderedQuestionKeys: orderedQuestionKeys
+          answerSummary: answerSummary
         }),
         aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
           itemId: itemId,
@@ -57,6 +46,6 @@ export var MatchingType = /*#__PURE__*/function (_Component) {
   return MatchingType;
 }(Component);
 MatchingType.propTypes = {
-  itemId: PropTypes.number,
-  answerSummary: matchingTypeAnswerSummaryPropType
+  itemId: PropTypes.number.isRequired,
+  answerSummary: matchingTypeAnswerSummaryPropType.isRequired
 }.isRequired;

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

@@ -8,16 +8,17 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import { Flex } from '@instructure/ui-flex';
 var styles = {
-  componentId: 'daSNV',
+  componentId: 'bdaoA',
   template: function template(theme) {
-    return "\n\n.daSNV_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.daSNV_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.daSNV_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.daSNV_EKAb svg{fill:#fff}\n\n.daSNV_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.daSNV_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.daSNV_cVld{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.bdaoA_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.bdaoA_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.bdaoA_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.bdaoA_EKAb svg{fill:#fff}\n\n.bdaoA_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.bdaoA_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.bdaoA_bwoZ{max-width:100%;width:calc(25% + 350px)}\n\n.bdaoA_SVtU table tbody tr th{font-weight:400}");
   },
-  'tableWrapper': 'daSNV_rMrG',
-  'iconWrapper': 'daSNV_cvRx',
-  'iconCorrect': 'daSNV_EKAb',
-  'correctRowBorder': 'daSNV_tnta',
-  'correctRowBorderRadius': 'daSNV_fvqY',
-  'answerFrequencySummaryContainer': 'daSNV_cVld'
+  'tableWrapper': 'bdaoA_rMrG',
+  'iconWrapper': 'bdaoA_cvRx',
+  'iconCorrect': 'bdaoA_EKAb',
+  'correctRowBorder': 'bdaoA_tnta',
+  'correctRowBorderRadius': 'bdaoA_fvqY',
+  'tableHalfWidth': 'bdaoA_bwoZ',
+  'tableContainer': 'bdaoA_SVtU'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
@@ -25,9 +26,10 @@ import { themeable } from '@instructure/ui-themeable';
 import PropTypes from 'prop-types';
 import { IconCheckSolid } from '@instructure/ui-icons';
 import { matchingTypeAnswerSummaryPropType } from "../../../propTypes.js";
+import MatchingTypeOrderer from "../utils/matchingTypeOrderer.js";
+import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import classNames from 'classnames';
 import theme from "./theme.js";
-import { extractTextFromHtml } from '@instructure/quiz-interactions';
 
 var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
 
@@ -151,7 +153,7 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       var questionBody = extractedQuestionBody.trim().length > 0 ? extractedQuestionBody : question.body;
       return /*#__PURE__*/React.createElement(Table.Row, {
         key: rowKey
-      }, /*#__PURE__*/React.createElement(Table.Cell, {
+      }, /*#__PURE__*/React.createElement(Table.RowHeader, {
         id: questionRowHeaderId,
         key: questionRowHeaderId,
         theme: {
@@ -161,14 +163,21 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
     };
 
     _this.render = function () {
-      var _this$props4 = _this.props,
-          orderedAnswerKeys = _this$props4.orderedAnswerKeys,
-          orderedQuestionKeys = _this$props4.orderedQuestionKeys;
-      return /*#__PURE__*/React.createElement(Table, {
+      var answerSummary = _this.props.answerSummary;
+      var questions = answerSummary.questions;
+      var questionKeys = Object.keys(questions);
+      var exampleAnswers = questions[questionKeys[0]].answers;
+      var answerKeys = Object.keys(exampleAnswers).sort();
+      var tableHalfWidth = answerKeys.length <= 3;
+      var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
+      var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.tableContainer, _defineProperty({}, styles.tableHalfWidth, tableHalfWidth))
+      }, /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary')
       }, /*#__PURE__*/React.createElement(Table.Head, null, _this.renderHeaderRow(orderedAnswerKeys)), /*#__PURE__*/React.createElement(Table.Body, null, orderedQuestionKeys.map(function (orderedQuestionKey) {
         return _this.renderRow(orderedQuestionKey, orderedAnswerKeys);
-      })));
+      }))));
     };
 
     return _this;
@@ -177,7 +186,5 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
   return MatchingTypeTable;
 }(Component), _class2.propTypes = {
   itemId: PropTypes.number,
-  answerSummary: matchingTypeAnswerSummaryPropType,
-  orderedAnswerKeys: PropTypes.array.isRequired,
-  orderedQuestionKeys: PropTypes.array.isRequired
+  answerSummary: matchingTypeAnswerSummaryPropType
 }.isRequired, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/OrderingType.js

@@ -3,14 +3,13 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
-import MatchingTypeOrderer from "./utils/matchingTypeOrderer.js";
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
-import MatchingTypeTable from "./MatchingTypeTable/index.js";
 import PropTypes from 'prop-types';
 import { matchingTypeAnswerSummaryPropType } from "../../propTypes.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import AggregationTable from "../shared/AggregationTable/index.js";
 import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+import AggregationTable from "../shared/AggregationTable/index.js";
+import MatchingTypeTable from "./MatchingTypeTable/index.js";
 export var OrderingType = /*#__PURE__*/function (_Component) {
   _inherits(OrderingType, _Component);
 
@@ -54,20 +53,10 @@ export var OrderingType = /*#__PURE__*/function (_Component) {
 
       var updatedAnswerSummary = _this.updateAnswerBody(answerSummary);
 
-      var questions = updatedAnswerSummary.questions;
-      var questionKeys = Object.keys(questions);
-      var exampleAnswers = questions[questionKeys[0]].answers;
-      var answerKeys = Object.keys(exampleAnswers).sort();
-      var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(updatedAnswerSummary, answerKeys);
-      var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(updatedAnswerSummary, questionKeys, orderedAnswerKeys);
-      var tableHalfWidth = orderedAnswerKeys.length <= 3;
       return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
-        tableHalfWidth: tableHalfWidth,
         afsTable: /*#__PURE__*/React.createElement(MatchingTypeTable, {
           itemId: itemId,
-          answerSummary: updatedAnswerSummary,
-          orderedAnswerKeys: orderedAnswerKeys,
-          orderedQuestionKeys: orderedQuestionKeys
+          answerSummary: updatedAnswerSummary
         }),
         aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
           itemId: itemId,
@@ -82,6 +71,6 @@ export var OrderingType = /*#__PURE__*/function (_Component) {
   return OrderingType;
 }(Component);
 OrderingType.propTypes = {
-  itemId: PropTypes.number,
-  answerSummary: matchingTypeAnswerSummaryPropType
+  itemId: PropTypes.number.isRequired,
+  answerSummary: matchingTypeAnswerSummaryPropType.isRequired
 }.isRequired;

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

@@ -1,2 +1,3 @@
 export { MatchingType } from "./MatchingType.js";
-export { OrderingType } from "./OrderingType.js";
+export { OrderingType } from "./OrderingType.js";
+export { CategorizationType } from "./CategorizationType.js";

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

@@ -5,8 +5,8 @@ import React, { Component } from 'react';
 import { PropTypes } from '@instructure/quiz-interactions';
 import ChoiceType from "./ChoiceType/index.js";
 import AggregationType from "./AggregationType/index.js";
-import { MatchingType, OrderingType } from "./MatchingType/index.js";
-import { answerSummaryPropType } from "../propTypes.js";
+import { MatchingType, OrderingType, CategorizationType } from "./MatchingType/index.js";
+import { afsFlags, answerSummaryPropType } from "../propTypes.js";
 export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
 
@@ -40,6 +40,10 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.orderingEnabled) {
         _this.afsTableComponentMap.set('ordering', OrderingType);
       }
+
+      if (afsFlags.categorizationEnabled) {
+        _this.afsTableComponentMap.set('categorization', CategorizationType);
+      }
     };
 
     _this.render = function () {
@@ -77,10 +81,5 @@ AnswerFrequencySummary.propTypes = {
   itemId: PropTypes.number.isRequired,
   answerSummary: answerSummaryPropType.isRequired,
   interactionType: PropTypes.string.isRequired,
-  afsFlags: PropTypes.shape({
-    formulaEnabled: PropTypes.bool.isRequired,
-    matchingEnabled: PropTypes.bool.isRequired,
-    hotSpotEnabled: PropTypes.bool.isRequired,
-    orderingEnabled: PropTypes.bool.isRequired
-  })
+  afsFlags: afsFlags
 }.isRequired;

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

@@ -43,18 +43,14 @@ export var AfsPartsContainer = (_dec = themeable({}, styles), _dec(_class = (_te
     };
 
     _this.renderAfsTable = function () {
-      var _this$props2 = _this.props,
-          afsTable = _this$props2.afsTable,
-          tableHalfWidth = _this$props2.tableHalfWidth;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(_defineProperty({}, styles.tableContainer, tableHalfWidth))
-      }, afsTable);
+      var afsTable = _this.props.afsTable;
+      return /*#__PURE__*/React.createElement("div", null, afsTable);
     };
 
     _this.render = function () {
-      var _this$props3 = _this.props,
-          afsTable = _this$props3.afsTable,
-          aggregationTable = _this$props3.aggregationTable;
+      var _this$props2 = _this.props,
+          afsTable = _this$props2.afsTable,
+          aggregationTable = _this$props2.aggregationTable;
       return /*#__PURE__*/React.createElement(React.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
     };
 
@@ -63,11 +59,9 @@ export var AfsPartsContainer = (_dec = themeable({}, styles), _dec(_class = (_te
 
   return AfsPartsContainer;
 }(Component), _class2.propTypes = {
-  tableHalfWidth: PropTypes.bool,
   afsTable: PropTypes.node,
   aggregationTable: PropTypes.node
 }.isRequired, _class2.defaultProps = {
-  tableHalfWidth: true,
   afsTable: null,
   aggregationTable: null
 }, _temp)) || _class);

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

@@ -14,27 +14,23 @@ import { IconCheckSolid, IconXSolid, IconNoSolid, IconOvalHalfSolid } from '@ins
 import { themeable } from '@instructure/ui-themeable';
 import theme from "./theme.js";
 var styles = {
-  componentId: 'fuOpc',
+  componentId: 'fXtvV',
   template: function template(theme) {
-    return "\n\n.fuOpc_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.fuOpc_fPIL table{border-collapse:separate;border-spacing:0 12px}\n\n.fuOpc_fPIL thead th{border-color:".concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fuOpc_euQM{padding-left:10px}\n\n.fuOpc_fuuc{padding-left:45px}\n\n.fuOpc_bTFA{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fuOpc_bvau{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fuOpc_dmcW{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fuOpc_cxOH{background-color:").concat(theme.colorRed || 'inherit', "}\n\n.fuOpc_xOeH{border-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fuOpc_eRkO{background-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fuOpc_dlLI{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fuOpc_eKcq{background-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fuOpc_vDgC svg{fill:#fff}\n\n.fuOpc_fHMm{border-color:").concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fuOpc_WspM{border-radius:4px 0 0 4px;border-style:solid;border-width:2px 0 2px 2px}\n\n.fuOpc_fAnT{border-width:2px 0 2px 0}\n\n.fuOpc_bMPk,.fuOpc_fAnT{border-style:solid;padding:").concat(theme.cellPadding || 'inherit', "}\n\n.fuOpc_bMPk{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
+    return "\n\n.fXtvV_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.fXtvV_fPIL{min-width:500px}\n\n.fXtvV_fPIL table{border-collapse:separate;border-spacing:0 12px}\n\n.fXtvV_fPIL thead th{border-color:".concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fXtvV_fPIL table tbody tr td{border-style:solid;border-width:2px 0 2px 0;width:33.33%}\n\n.fXtvV_fPIL table tbody tr th:first-child{border-radius:4px 0 0 4px;border-style:solid;border-width:2px 0 2px 2px;font-weight:400}\n\n.fXtvV_fPIL table tbody tr td:last-child{border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}\n\n.fXtvV_fZpZ table tbody tr:first-child td,.fXtvV_fZpZ table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_fZpZ table tbody tr:nth-child(2) td,.fXtvV_fZpZ table tbody tr:nth-child(2) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_dgTJ table tbody tr:first-child td,.fXtvV_dgTJ table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_dgTJ table tbody tr:nth-child(2) td,.fXtvV_dgTJ table tbody tr:nth-child(2) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_dgTJ table tbody tr:nth-child(3) td,.fXtvV_dgTJ table tbody tr:nth-child(3) th{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:first-child td,.fXtvV_bUPM table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:nth-child(2) td,.fXtvV_bUPM table tbody tr:nth-child(2) th{border-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:nth-child(3) td,.fXtvV_bUPM table tbody tr:nth-child(3) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:nth-child(4) td,.fXtvV_bUPM table tbody tr:nth-child(4) th{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fXtvV_bvau{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_cxOH{background-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_eRkO{background-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fXtvV_eKcq{background-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fXtvV_euQM{padding-left:10px}\n\n.fXtvV_fuuc{padding-left:45px}\n\n.fXtvV_vDgC svg{fill:#fff}\n\n.fXtvV_fHMm{border-color:").concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}");
   },
-  'iconWrapper': 'fuOpc_cvRx',
-  'collapsingTable': 'fuOpc_fPIL',
-  'labelWrapper': 'fuOpc_euQM',
-  'firstHeaderCell': 'fuOpc_fuuc',
-  'correctBorder': 'fuOpc_bTFA',
-  'correctBackground': 'fuOpc_bvau',
-  'incorrectBorder': 'fuOpc_dmcW',
-  'incorrectBackground': 'fuOpc_cxOH',
-  'partialCorrectBorder': 'fuOpc_xOeH',
-  'partialCorrectBackground': 'fuOpc_eRkO',
-  'noAnswerBorder': 'fuOpc_dlLI',
-  'noAnswerBackground': 'fuOpc_eKcq',
-  'iconWhite': 'fuOpc_vDgC',
-  'headerCell': 'fuOpc_fHMm',
-  'firstCell': 'fuOpc_WspM',
-  'middleCell': 'fuOpc_fAnT',
-  'lastCell': 'fuOpc_bMPk'
+  'iconWrapper': 'fXtvV_cvRx',
+  'collapsingTable': 'fXtvV_fPIL',
+  'correctIncorrect': 'fXtvV_fZpZ',
+  'correctIncorrectNoanswer': 'fXtvV_dgTJ',
+  'correctIncorrectNoanswerPartial': 'fXtvV_bUPM',
+  'correctBackground': 'fXtvV_bvau',
+  'incorrectBackground': 'fXtvV_cxOH',
+  'partialCorrectBackground': 'fXtvV_eRkO',
+  'noAnswerBackground': 'fXtvV_eKcq',
+  'labelWrapper': 'fXtvV_euQM',
+  'firstHeaderCell': 'fXtvV_fuuc',
+  'iconWhite': 'fXtvV_vDgC',
+  'headerCell': 'fXtvV_fHMm'
 };
 import { Flex } from '@instructure/ui-flex';
 import classNames from 'classnames';
@@ -87,45 +83,38 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
     };
 
     _this.renderRow = function (key, icon, label, count, percentage) {
-      var borderColor = styles["".concat(key, "Border")];
       var backgroundColor = styles["".concat(key, "Background")];
       var concatenatedPercentage = "".concat(percentage, "%");
       return /*#__PURE__*/React.createElement(Table.Row, {
         key: key
-      }, /*#__PURE__*/React.createElement(Table.Cell, {
+      }, /*#__PURE__*/React.createElement(Table.RowHeader, {
         theme: {
           padding: '0px'
         }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.firstCell, borderColor)
       }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, label), /*#__PURE__*/React.createElement(Flex, {
         direction: "row",
-        alignItems: "center",
-        height: "47px"
+        alignItems: "center"
       }, /*#__PURE__*/React.createElement(Flex.Item, {
         width: "46px",
-        textAlign: "center"
+        textAlign: "center",
+        align: "stretch"
       }, /*#__PURE__*/React.createElement("div", {
         className: classNames(styles.iconWrapper, styles.iconWhite, backgroundColor)
       }, icon)), /*#__PURE__*/React.createElement(Flex.Item, {
-        textAlign: "center"
+        shouldShrink: true
       }, /*#__PURE__*/React.createElement("div", {
         className: classNames(styles.labelWrapper)
-      }, /*#__PURE__*/React.createElement(Text, null, label)))))), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, /*#__PURE__*/React.createElement(Text, null, label))))), /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.middleCell, borderColor)
-      }, /*#__PURE__*/React.createElement(Text, null, count))), /*#__PURE__*/React.createElement(Table.Cell, {
+      }, /*#__PURE__*/React.createElement(Text, null, count)), /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.lastCell, borderColor)
-      }, /*#__PURE__*/React.createElement(Text, null, concatenatedPercentage))));
+      }, /*#__PURE__*/React.createElement(Text, null, concatenatedPercentage)));
     };
 
     _this.isPartialCorrectExist = function () {
@@ -133,6 +122,11 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
       return !!(aggregate === null || aggregate === void 0 ? void 0 : aggregate.partial_correct);
     };
 
+    _this.isNoAnswerExist = function () {
+      var no_answer = _this.props.answerSummary.no_answer;
+      return !!no_answer;
+    };
+
     _this.renderCorrect = function () {
       var aggregate = _this.props.answerSummary.aggregate;
       var correct = aggregate.correct;
@@ -168,12 +162,26 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
       return _this.renderRow(noAnswerKey, _ref4, noAnswerLabel, noAnswerCount, noAnswerPercentage);
     };
 
+    _this.getColorProfile = function () {
+      var colorProfile;
+
+      if (!_this.isPartialCorrectExist() && _this.isNoAnswerExist()) {
+        colorProfile = 'correctIncorrectNoanswer';
+      } else if (_this.isPartialCorrectExist() && _this.isNoAnswerExist()) {
+        colorProfile = 'correctIncorrectNoanswerPartial';
+      } else {
+        colorProfile = 'correctIncorrect';
+      }
+
+      return colorProfile;
+    };
+
     _this.render = function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.collapsingTable)
+        className: classNames(styles.collapsingTable, styles[_this.getColorProfile()])
       }, /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary Aggregates')
-      }, _this.renderHeaderRow(), /*#__PURE__*/React.createElement(Table.Body, null, _this.renderCorrect(), _this.isPartialCorrectExist() && _this.renderPartialCorrect(), _this.renderIncorrect(), _this.renderNoAnswer())));
+      }, _this.renderHeaderRow(), /*#__PURE__*/React.createElement(Table.Body, null, _this.renderCorrect(), _this.isPartialCorrectExist() && _this.renderPartialCorrect(), _this.renderIncorrect(), _this.isNoAnswerExist() && _this.renderNoAnswer())));
     };
 
     return _this;

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

@@ -10,7 +10,8 @@ function mapStateToProps(_state) {
       formulaEnabled: featureOn('ia_formula_afs'),
       matchingEnabled: featureOn('ia_matching_afs'),
       orderingEnabled: featureOn('ia_ordering_afs'),
-      hotSpotEnabled: featureOn('ia_hot_spot_afs')
+      hotSpotEnabled: featureOn('ia_hot_spot_afs'),
+      categorizationEnabled: featureOn('ia_categorization_afs')
     }
   };
 }

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

@@ -84,5 +84,8 @@ export var matchingTypeAnswerSummaryPropType = PropTypes.shape({
 export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType]);
 export var afsFlags = PropTypes.shape({
   formulaEnabled: PropTypes.bool.isRequired,
-  matchingEnabled: PropTypes.bool.isRequired
+  matchingEnabled: PropTypes.bool.isRequired,
+  hotSpotEnabled: PropTypes.bool.isRequired,
+  orderingEnabled: PropTypes.bool.isRequired,
+  categorizationEnabled: PropTypes.bool.isRequired
 });

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

@@ -19,14 +19,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _index = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
-
 var _propTypes2 = require("../../propTypes.js");
 
 var _presenter = require("../shared/AfsTableWrapper/presenter.js");
 
 var _presenter2 = require("../shared/AfsPartsContainer/presenter.js");
 
+var _index = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
+
 var AggregationType = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AggregationType, _Component);
 

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

@@ -111,23 +111,19 @@ var ChoiceTypeTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
         key: _this.props.choiceIndex
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
-          padding: '0px',
-          fontWeight: 'bold'
+          padding: '0px'
         }
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon(correct)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
         theme: {
-          padding: cellPadding,
-          fontWeight: 'bold'
+          padding: cellPadding
         }
       }, _this.renderMiddleCell(correct, _this.extractChoiceText(choiceBody, correct))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
-          padding: cellPadding,
-          fontWeight: 'bold'
+          padding: cellPadding
         }
       }, _this.renderMiddleCell(correct, _this.props.choice.count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
-          padding: cellPadding,
-          fontWeight: 'bold'
+          padding: cellPadding
         },
         textAlign: "center"
       }, _this.renderLastCell(correct, "".concat(_this.props.choice.percentage, "%"))));

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

@@ -42,12 +42,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'dCEWT',
+  componentId: 'fxQkB',
   template: function template(theme) {
-    return "\n\n.dCEWT_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.dCEWT_SVtU{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.fxQkB_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.fxQkB_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.fxQkB_SVtU table tbody tr th{font-weight:400}");
   },
-  'tableWrapper': 'dCEWT_rMrG',
-  'tableContainer': 'dCEWT_SVtU'
+  'tableWrapper': 'fxQkB_rMrG',
+  'tableContainer': 'fxQkB_SVtU'
 };
 var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ChoiceType, _Component);

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/CategorizationType.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CategorizationType = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+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 = _interopRequireWildcard(require("react"));
+
+var _index = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = require("../../propTypes.js");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _presenter = require("../shared/AfsPartsContainer/presenter.js");
+
+var _index2 = _interopRequireDefault(require("./MatchingTypeTable/index.js"));
+
+var _index3 = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
+
+var distractorKey = 'distractor';
+var distractorTranslation = (0, _formatMessage.default)('Distractors');
+
+var CategorizationType = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CategorizationType, _Component);
+
+  var _super = (0, _createSuper2.default)(CategorizationType);
+
+  function CategorizationType() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CategorizationType);
+
+    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.updateAnswerBody = function (answerSummary) {
+      var answerSummaryCopy = (0, _objectSpread2.default)({}, answerSummary);
+      Object.keys(answerSummaryCopy.questions).forEach(function (questionKey) {
+        Object.keys(answerSummaryCopy.questions[questionKey].answers).forEach(function (answerKey) {
+          if (distractorKey === answerKey) {
+            var detail = answerSummaryCopy.questions[questionKey].answers[answerKey];
+            answerSummaryCopy.questions[questionKey].answers[answerKey] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, detail), {}, {
+              body: distractorTranslation
+            });
+          }
+        });
+      });
+      return answerSummaryCopy;
+    };
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary;
+
+      var updatedAnswerSummary = _this.updateAnswerBody(answerSummary);
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, null, /*#__PURE__*/_react.default.createElement(_presenter.AfsPartsContainer, {
+        afsTable: /*#__PURE__*/_react.default.createElement(_index2.default, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary
+        }),
+        aggregationTable: /*#__PURE__*/_react.default.createElement(_index3.default, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return CategorizationType;
+}(_react.Component);
+
+exports.CategorizationType = CategorizationType;
+CategorizationType.propTypes = {
+  itemId: _propTypes.default.number.isRequired,
+  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType.isRequired
+}.isRequired;

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

@@ -19,16 +19,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _index = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
 
-var _index2 = _interopRequireDefault(require("./MatchingTypeTable/index.js"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = require("../../propTypes.js");
 
-var _matchingTypeOrderer = _interopRequireDefault(require("./utils/matchingTypeOrderer.js"));
-
 var _presenter = require("../shared/AfsPartsContainer/presenter.js");
 
+var _index2 = _interopRequireDefault(require("./MatchingTypeTable/index.js"));
+
 var _index3 = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
 
 var MatchingType = /*#__PURE__*/function (_Component) {
@@ -51,23 +49,10 @@ var MatchingType = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           itemId = _this$props.itemId,
           answerSummary = _this$props.answerSummary;
-      var questions = answerSummary.questions;
-      var questionKeys = Object.keys(questions);
-      var exampleAnswers = questions[questionKeys[0]].answers;
-      var answerKeys = Object.keys(exampleAnswers);
-
-      var orderedAnswerKeys = _matchingTypeOrderer.default.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
-
-      var orderedQuestionKeys = _matchingTypeOrderer.default.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
-
-      var tableHalfWidth = orderedAnswerKeys.length <= 3;
       return /*#__PURE__*/_react.default.createElement(_index.default, null, /*#__PURE__*/_react.default.createElement(_presenter.AfsPartsContainer, {
-        tableHalfWidth: tableHalfWidth,
         afsTable: /*#__PURE__*/_react.default.createElement(_index2.default, {
           itemId: itemId,
-          answerSummary: answerSummary,
-          orderedAnswerKeys: orderedAnswerKeys,
-          orderedQuestionKeys: orderedQuestionKeys
+          answerSummary: answerSummary
         }),
         aggregationTable: /*#__PURE__*/_react.default.createElement(_index3.default, {
           itemId: itemId,
@@ -84,6 +69,6 @@ var MatchingType = /*#__PURE__*/function (_Component) {
 
 exports.MatchingType = MatchingType;
 MatchingType.propTypes = {
-  itemId: _propTypes.default.number,
-  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType
+  itemId: _propTypes.default.number.isRequired,
+  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType.isRequired
 }.isRequired;

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

@@ -33,25 +33,28 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _propTypes2 = require("../../../propTypes.js");
 
+var _matchingTypeOrderer = _interopRequireDefault(require("../utils/matchingTypeOrderer.js"));
+
+var _quizInteractions = require("@instructure/quiz-interactions");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
-var _quizInteractions = require("@instructure/quiz-interactions");
-
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'daSNV',
+  componentId: 'bdaoA',
   template: function template(theme) {
-    return "\n\n.daSNV_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.daSNV_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.daSNV_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.daSNV_EKAb svg{fill:#fff}\n\n.daSNV_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.daSNV_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.daSNV_cVld{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.bdaoA_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.bdaoA_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.bdaoA_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.bdaoA_EKAb svg{fill:#fff}\n\n.bdaoA_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.bdaoA_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.bdaoA_bwoZ{max-width:100%;width:calc(25% + 350px)}\n\n.bdaoA_SVtU table tbody tr th{font-weight:400}");
   },
-  'tableWrapper': 'daSNV_rMrG',
-  'iconWrapper': 'daSNV_cvRx',
-  'iconCorrect': 'daSNV_EKAb',
-  'correctRowBorder': 'daSNV_tnta',
-  'correctRowBorderRadius': 'daSNV_fvqY',
-  'answerFrequencySummaryContainer': 'daSNV_cVld'
+  'tableWrapper': 'bdaoA_rMrG',
+  'iconWrapper': 'bdaoA_cvRx',
+  'iconCorrect': 'bdaoA_EKAb',
+  'correctRowBorder': 'bdaoA_tnta',
+  'correctRowBorderRadius': 'bdaoA_fvqY',
+  'tableHalfWidth': 'bdaoA_bwoZ',
+  'tableContainer': 'bdaoA_SVtU'
 };
 
 var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
@@ -176,7 +179,7 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       var questionBody = extractedQuestionBody.trim().length > 0 ? extractedQuestionBody : question.body;
       return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
         key: rowKey
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
         id: questionRowHeaderId,
         key: questionRowHeaderId,
         theme: {
@@ -186,14 +189,24 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     };
 
     _this.render = function () {
-      var _this$props4 = _this.props,
-          orderedAnswerKeys = _this$props4.orderedAnswerKeys,
-          orderedQuestionKeys = _this$props4.orderedQuestionKeys;
-      return /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      var answerSummary = _this.props.answerSummary;
+      var questions = answerSummary.questions;
+      var questionKeys = Object.keys(questions);
+      var exampleAnswers = questions[questionKeys[0]].answers;
+      var answerKeys = Object.keys(exampleAnswers).sort();
+      var tableHalfWidth = answerKeys.length <= 3;
+
+      var orderedAnswerKeys = _matchingTypeOrderer.default.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
+
+      var orderedQuestionKeys = _matchingTypeOrderer.default.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.tableContainer, (0, _defineProperty2.default)({}, styles.tableHalfWidth, tableHalfWidth))
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, _this.renderHeaderRow(orderedAnswerKeys)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, orderedQuestionKeys.map(function (orderedQuestionKey) {
         return _this.renderRow(orderedQuestionKey, orderedAnswerKeys);
-      })));
+      }))));
     };
 
     return _this;
@@ -202,8 +215,6 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   return MatchingTypeTable;
 }(_react.Component), _class2.propTypes = {
   itemId: _propTypes.default.number,
-  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType,
-  orderedAnswerKeys: _propTypes.default.array.isRequired,
-  orderedQuestionKeys: _propTypes.default.array.isRequired
+  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType
 }.isRequired, _temp)) || _class);
 exports.MatchingTypeTable = MatchingTypeTable;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/OrderingType.js

@@ -19,22 +19,20 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _matchingTypeOrderer = _interopRequireDefault(require("./utils/matchingTypeOrderer.js"));
-
 var _index = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
 
-var _index2 = _interopRequireDefault(require("./MatchingTypeTable/index.js"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = require("../../propTypes.js");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _index3 = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
-
 var _presenter = require("../shared/AfsPartsContainer/presenter.js");
 
+var _index2 = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
+
+var _index3 = _interopRequireDefault(require("./MatchingTypeTable/index.js"));
+
 var OrderingType = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(OrderingType, _Component);
 
@@ -77,25 +75,12 @@ var OrderingType = /*#__PURE__*/function (_Component) {
 
       var updatedAnswerSummary = _this.updateAnswerBody(answerSummary);
 
-      var questions = updatedAnswerSummary.questions;
-      var questionKeys = Object.keys(questions);
-      var exampleAnswers = questions[questionKeys[0]].answers;
-      var answerKeys = Object.keys(exampleAnswers).sort();
-
-      var orderedAnswerKeys = _matchingTypeOrderer.default.orderAnswerKeysForDiagonal(updatedAnswerSummary, answerKeys);
-
-      var orderedQuestionKeys = _matchingTypeOrderer.default.orderQuestionKeysForDiagonal(updatedAnswerSummary, questionKeys, orderedAnswerKeys);
-
-      var tableHalfWidth = orderedAnswerKeys.length <= 3;
       return /*#__PURE__*/_react.default.createElement(_index.default, null, /*#__PURE__*/_react.default.createElement(_presenter.AfsPartsContainer, {
-        tableHalfWidth: tableHalfWidth,
-        afsTable: /*#__PURE__*/_react.default.createElement(_index2.default, {
+        afsTable: /*#__PURE__*/_react.default.createElement(_index3.default, {
           itemId: itemId,
-          answerSummary: updatedAnswerSummary,
-          orderedAnswerKeys: orderedAnswerKeys,
-          orderedQuestionKeys: orderedQuestionKeys
+          answerSummary: updatedAnswerSummary
         }),
-        aggregationTable: /*#__PURE__*/_react.default.createElement(_index3.default, {
+        aggregationTable: /*#__PURE__*/_react.default.createElement(_index2.default, {
           itemId: itemId,
           answerSummary: updatedAnswerSummary
         })
@@ -110,6 +95,6 @@ var OrderingType = /*#__PURE__*/function (_Component) {
 
 exports.OrderingType = OrderingType;
 OrderingType.propTypes = {
-  itemId: _propTypes.default.number,
-  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType
+  itemId: _propTypes.default.number.isRequired,
+  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType.isRequired
 }.isRequired;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/index.js

@@ -15,7 +15,15 @@ Object.defineProperty(exports, "OrderingType", {
     return _OrderingType.OrderingType;
   }
 });
+Object.defineProperty(exports, "CategorizationType", {
+  enumerable: true,
+  get: function get() {
+    return _CategorizationType.CategorizationType;
+  }
+});
 
 var _MatchingType = require("./MatchingType.js");
 
-var _OrderingType = require("./OrderingType.js");
+var _OrderingType = require("./OrderingType.js");
+
+var _CategorizationType = require("./CategorizationType.js");

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

@@ -60,6 +60,10 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.orderingEnabled) {
         _this.afsTableComponentMap.set('ordering', _index3.OrderingType);
       }
+
+      if (afsFlags.categorizationEnabled) {
+        _this.afsTableComponentMap.set('categorization', _index3.CategorizationType);
+      }
     };
 
     _this.render = function () {
@@ -99,10 +103,5 @@ AnswerFrequencySummary.propTypes = {
   itemId: _quizInteractions.PropTypes.number.isRequired,
   answerSummary: _propTypes.answerSummaryPropType.isRequired,
   interactionType: _quizInteractions.PropTypes.string.isRequired,
-  afsFlags: _quizInteractions.PropTypes.shape({
-    formulaEnabled: _quizInteractions.PropTypes.bool.isRequired,
-    matchingEnabled: _quizInteractions.PropTypes.bool.isRequired,
-    hotSpotEnabled: _quizInteractions.PropTypes.bool.isRequired,
-    orderingEnabled: _quizInteractions.PropTypes.bool.isRequired
-  })
+  afsFlags: _propTypes.afsFlags
 }.isRequired;

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

@@ -61,18 +61,14 @@ var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_c
     };
 
     _this.renderAfsTable = function () {
-      var _this$props2 = _this.props,
-          afsTable = _this$props2.afsTable,
-          tableHalfWidth = _this$props2.tableHalfWidth;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)((0, _defineProperty2.default)({}, styles.tableContainer, tableHalfWidth))
-      }, afsTable);
+      var afsTable = _this.props.afsTable;
+      return /*#__PURE__*/_react.default.createElement("div", null, afsTable);
     };
 
     _this.render = function () {
-      var _this$props3 = _this.props,
-          afsTable = _this$props3.afsTable,
-          aggregationTable = _this$props3.aggregationTable;
+      var _this$props2 = _this.props,
+          afsTable = _this$props2.afsTable,
+          aggregationTable = _this$props2.aggregationTable;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
     };
 
@@ -81,11 +77,9 @@ var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_c
 
   return AfsPartsContainer;
 }(_react.Component), _class2.propTypes = {
-  tableHalfWidth: _propTypes.default.bool,
   afsTable: _propTypes.default.node,
   aggregationTable: _propTypes.default.node
 }.isRequired, _class2.defaultProps = {
-  tableHalfWidth: true,
   afsTable: null,
   aggregationTable: null
 }, _temp)) || _class);

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

@@ -42,27 +42,23 @@ var _uiText = require("@instructure/ui-text");
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'fuOpc',
+  componentId: 'fXtvV',
   template: function template(theme) {
-    return "\n\n.fuOpc_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.fuOpc_fPIL table{border-collapse:separate;border-spacing:0 12px}\n\n.fuOpc_fPIL thead th{border-color:".concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fuOpc_euQM{padding-left:10px}\n\n.fuOpc_fuuc{padding-left:45px}\n\n.fuOpc_bTFA{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fuOpc_bvau{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fuOpc_dmcW{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fuOpc_cxOH{background-color:").concat(theme.colorRed || 'inherit', "}\n\n.fuOpc_xOeH{border-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fuOpc_eRkO{background-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fuOpc_dlLI{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fuOpc_eKcq{background-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fuOpc_vDgC svg{fill:#fff}\n\n.fuOpc_fHMm{border-color:").concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fuOpc_WspM{border-radius:4px 0 0 4px;border-style:solid;border-width:2px 0 2px 2px}\n\n.fuOpc_fAnT{border-width:2px 0 2px 0}\n\n.fuOpc_bMPk,.fuOpc_fAnT{border-style:solid;padding:").concat(theme.cellPadding || 'inherit', "}\n\n.fuOpc_bMPk{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
+    return "\n\n.fXtvV_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.fXtvV_fPIL{min-width:500px}\n\n.fXtvV_fPIL table{border-collapse:separate;border-spacing:0 12px}\n\n.fXtvV_fPIL thead th{border-color:".concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fXtvV_fPIL table tbody tr td{border-style:solid;border-width:2px 0 2px 0;width:33.33%}\n\n.fXtvV_fPIL table tbody tr th:first-child{border-radius:4px 0 0 4px;border-style:solid;border-width:2px 0 2px 2px;font-weight:400}\n\n.fXtvV_fPIL table tbody tr td:last-child{border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}\n\n.fXtvV_fZpZ table tbody tr:first-child td,.fXtvV_fZpZ table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_fZpZ table tbody tr:nth-child(2) td,.fXtvV_fZpZ table tbody tr:nth-child(2) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_dgTJ table tbody tr:first-child td,.fXtvV_dgTJ table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_dgTJ table tbody tr:nth-child(2) td,.fXtvV_dgTJ table tbody tr:nth-child(2) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_dgTJ table tbody tr:nth-child(3) td,.fXtvV_dgTJ table tbody tr:nth-child(3) th{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:first-child td,.fXtvV_bUPM table tbody tr:first-child th{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:nth-child(2) td,.fXtvV_bUPM table tbody tr:nth-child(2) th{border-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:nth-child(3) td,.fXtvV_bUPM table tbody tr:nth-child(3) th{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_bUPM table tbody tr:nth-child(4) td,.fXtvV_bUPM table tbody tr:nth-child(4) th{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fXtvV_bvau{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fXtvV_cxOH{background-color:").concat(theme.colorRed || 'inherit', "}\n\n.fXtvV_eRkO{background-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fXtvV_eKcq{background-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fXtvV_euQM{padding-left:10px}\n\n.fXtvV_fuuc{padding-left:45px}\n\n.fXtvV_vDgC svg{fill:#fff}\n\n.fXtvV_fHMm{border-color:").concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}");
   },
-  'iconWrapper': 'fuOpc_cvRx',
-  'collapsingTable': 'fuOpc_fPIL',
-  'labelWrapper': 'fuOpc_euQM',
-  'firstHeaderCell': 'fuOpc_fuuc',
-  'correctBorder': 'fuOpc_bTFA',
-  'correctBackground': 'fuOpc_bvau',
-  'incorrectBorder': 'fuOpc_dmcW',
-  'incorrectBackground': 'fuOpc_cxOH',
-  'partialCorrectBorder': 'fuOpc_xOeH',
-  'partialCorrectBackground': 'fuOpc_eRkO',
-  'noAnswerBorder': 'fuOpc_dlLI',
-  'noAnswerBackground': 'fuOpc_eKcq',
-  'iconWhite': 'fuOpc_vDgC',
-  'headerCell': 'fuOpc_fHMm',
-  'firstCell': 'fuOpc_WspM',
-  'middleCell': 'fuOpc_fAnT',
-  'lastCell': 'fuOpc_bMPk'
+  'iconWrapper': 'fXtvV_cvRx',
+  'collapsingTable': 'fXtvV_fPIL',
+  'correctIncorrect': 'fXtvV_fZpZ',
+  'correctIncorrectNoanswer': 'fXtvV_dgTJ',
+  'correctIncorrectNoanswerPartial': 'fXtvV_bUPM',
+  'correctBackground': 'fXtvV_bvau',
+  'incorrectBackground': 'fXtvV_cxOH',
+  'partialCorrectBackground': 'fXtvV_eRkO',
+  'noAnswerBackground': 'fXtvV_eKcq',
+  'labelWrapper': 'fXtvV_euQM',
+  'firstHeaderCell': 'fXtvV_fuuc',
+  'iconWhite': 'fXtvV_vDgC',
+  'headerCell': 'fXtvV_fHMm'
 };
 var noAnswerKey = 'noAnswer';
 var incorrectKey = 'incorrect';
@@ -112,45 +108,38 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     };
 
     _this.renderRow = function (key, icon, label, count, percentage) {
-      var borderColor = styles["".concat(key, "Border")];
       var backgroundColor = styles["".concat(key, "Background")];
       var concatenatedPercentage = "".concat(percentage, "%");
       return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
         key: key
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
         theme: {
           padding: '0px'
         }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.firstCell, borderColor)
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, label), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         direction: "row",
-        alignItems: "center",
-        height: "47px"
+        alignItems: "center"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
         width: "46px",
-        textAlign: "center"
+        textAlign: "center",
+        align: "stretch"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(styles.iconWrapper, styles.iconWhite, backgroundColor)
       }, icon)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        textAlign: "center"
+        shouldShrink: true
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(styles.labelWrapper)
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, label)))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, label))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.middleCell, borderColor)
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, count))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
           padding: '0px'
         },
         textAlign: "center"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.lastCell, borderColor)
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, concatenatedPercentage))));
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, concatenatedPercentage)));
     };
 
     _this.isPartialCorrectExist = function () {
@@ -158,6 +147,11 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       return !!(aggregate === null || aggregate === void 0 ? void 0 : aggregate.partial_correct);
     };
 
+    _this.isNoAnswerExist = function () {
+      var no_answer = _this.props.answerSummary.no_answer;
+      return !!no_answer;
+    };
+
     _this.renderCorrect = function () {
       var aggregate = _this.props.answerSummary.aggregate;
       var correct = aggregate.correct;
@@ -193,12 +187,26 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       return _this.renderRow(noAnswerKey, _ref4, noAnswerLabel, noAnswerCount, noAnswerPercentage);
     };
 
+    _this.getColorProfile = function () {
+      var colorProfile;
+
+      if (!_this.isPartialCorrectExist() && _this.isNoAnswerExist()) {
+        colorProfile = 'correctIncorrectNoanswer';
+      } else if (_this.isPartialCorrectExist() && _this.isNoAnswerExist()) {
+        colorProfile = 'correctIncorrectNoanswerPartial';
+      } else {
+        colorProfile = 'correctIncorrect';
+      }
+
+      return colorProfile;
+    };
+
     _this.render = function () {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.collapsingTable)
+        className: (0, _classnames.default)(styles.collapsingTable, styles[_this.getColorProfile()])
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary Aggregates')
-      }, _this.renderHeaderRow(), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this.renderCorrect(), _this.isPartialCorrectExist() && _this.renderPartialCorrect(), _this.renderIncorrect(), _this.renderNoAnswer())));
+      }, _this.renderHeaderRow(), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this.renderCorrect(), _this.isPartialCorrectExist() && _this.renderPartialCorrect(), _this.renderIncorrect(), _this.isNoAnswerExist() && _this.renderNoAnswer())));
     };
 
     return _this;

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

@@ -19,7 +19,8 @@ function mapStateToProps(_state) {
       formulaEnabled: (0, _featureCheck.featureOn)('ia_formula_afs'),
       matchingEnabled: (0, _featureCheck.featureOn)('ia_matching_afs'),
       orderingEnabled: (0, _featureCheck.featureOn)('ia_ordering_afs'),
-      hotSpotEnabled: (0, _featureCheck.featureOn)('ia_hot_spot_afs')
+      hotSpotEnabled: (0, _featureCheck.featureOn)('ia_hot_spot_afs'),
+      categorizationEnabled: (0, _featureCheck.featureOn)('ia_categorization_afs')
     }
   };
 }

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

@@ -117,7 +117,10 @@ exports.answerSummaryPropType = answerSummaryPropType;
 
 var afsFlags = _propTypes.default.shape({
   formulaEnabled: _propTypes.default.bool.isRequired,
-  matchingEnabled: _propTypes.default.bool.isRequired
+  matchingEnabled: _propTypes.default.bool.isRequired,
+  hotSpotEnabled: _propTypes.default.bool.isRequired,
+  orderingEnabled: _propTypes.default.bool.isRequired,
+  categorizationEnabled: _propTypes.default.bool.isRequired
 });
 
 exports.afsFlags = afsFlags;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "18.6.1-rc.1+dc5d4d2c0",
+  "version": "18.6.1-rc.3+9ea6ea418",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -43,11 +43,11 @@
   "dependencies": {
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "18.6.1-rc.1+dc5d4d2c0",
-    "@instructure/quiz-i18n": "18.6.1-rc.1+dc5d4d2c0",
-    "@instructure/quiz-interactions": "18.6.1-rc.1+dc5d4d2c0",
-    "@instructure/quiz-number-input": "18.6.1-rc.1+dc5d4d2c0",
-    "@instructure/quiz-rce": "18.6.1-rc.1+dc5d4d2c0",
+    "@instructure/quiz-common": "18.6.1-rc.3+9ea6ea418",
+    "@instructure/quiz-i18n": "18.6.1-rc.3+9ea6ea418",
+    "@instructure/quiz-interactions": "18.6.1-rc.3+9ea6ea418",
+    "@instructure/quiz-number-input": "18.6.1-rc.3+9ea6ea418",
+    "@instructure/quiz-rce": "18.6.1-rc.3+9ea6ea418",
     "@instructure/ui-a11y-content": "^7.22.1",
     "@instructure/ui-alerts": "^7.22.1",
     "@instructure/ui-avatar": "^7.22.1",
@@ -109,7 +109,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "18.6.1-rc.1+dc5d4d2c0",
+    "instructure-validations": "18.6.1-rc.3+9ea6ea418",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -160,7 +160,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "18.6.1-rc.1+dc5d4d2c0",
+    "quiz-presets": "18.6.1-rc.3+9ea6ea418",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -176,5 +176,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dc5d4d2c0e6ae7225236cbb8a9826620f07b8441"
+  "gitHead": "9ea6ea4188374d5d0fc720d14f3febd98e6d8968"
 }