@instructure/quiz-core 18.6.1-rc.0 → 18.6.1-rc.2

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/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,16 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import { Flex } from '@instructure/ui-flex';
 var styles = {
-  componentId: 'daSNV',
+  componentId: 'bAOvu',
   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.bAOvu_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.bAOvu_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.bAOvu_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.bAOvu_EKAb svg{fill:#fff}\n\n.bAOvu_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.bAOvu_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.bAOvu_SVtU{max-width:100%;width:calc(25% + 350px)}");
   },
-  'tableWrapper': 'daSNV_rMrG',
-  'iconWrapper': 'daSNV_cvRx',
-  'iconCorrect': 'daSNV_EKAb',
-  'correctRowBorder': 'daSNV_tnta',
-  'correctRowBorderRadius': 'daSNV_fvqY',
-  'answerFrequencySummaryContainer': 'daSNV_cVld'
+  'tableWrapper': 'bAOvu_rMrG',
+  'iconWrapper': 'bAOvu_cvRx',
+  'iconCorrect': 'bAOvu_EKAb',
+  'correctRowBorder': 'bAOvu_tnta',
+  'correctRowBorderRadius': 'bAOvu_fvqY',
+  'tableContainer': 'bAOvu_SVtU'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
@@ -25,9 +25,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);
 
@@ -161,14 +162,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(_defineProperty({}, styles.tableContainer, 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 +185,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

@@ -43,6 +43,7 @@ var noAnswerKey = 'noAnswer';
 var incorrectKey = 'incorrect';
 var correctKey = 'correct';
 var partialCorrectKey = 'partialCorrect';
+var tableLayout = 'fixed';
 
 var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
 
@@ -133,6 +134,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;
@@ -172,8 +178,9 @@ export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_
       return /*#__PURE__*/React.createElement("div", {
         className: classNames(styles.collapsingTable)
       }, /*#__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())));
+        caption: t('Answer Frequency Summary Aggregates'),
+        layout: tableLayout
+      }, _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/presenter.js

@@ -95,7 +95,7 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
       return /*#__PURE__*/React.createElement(Flex, {
         alignItems: "center",
         width: "auto",
-        margin: "auto",
+        margin: "small auto",
         direction: "column"
       }, /*#__PURE__*/React.createElement(Flex.Item, {
         overflowY: "hidden"
@@ -109,37 +109,50 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
       }, quizAnalysis === null || quizAnalysis === void 0 ? void 0 : (_quizAnalysis$metadat = quizAnalysis.metadata) === null || _quizAnalysis$metadat === void 0 ? void 0 : _quizAnalysis$metadat.quiz_title)));
     };
 
-    _this.renderTop = function () {
+    _this.renderUpdateDateWithError = function () {
       var _this$props = _this.props,
           analysisError = _this$props.analysisError,
           generationInProgress = _this$props.generationInProgress,
           quizAnalysis = _this$props.quizAnalysis;
       var shouldShowError = analysisError && !generationInProgress;
       return /*#__PURE__*/React.createElement(Flex, {
-        justifyItems: "space-between",
-        alignItems: "center",
-        wrap: "wrap",
-        width: "auto",
-        margin: "auto",
-        direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, _this.renderHeader()), /*#__PURE__*/React.createElement(Flex.Item, {
-        margin: "0 0 0 auto"
-      }, /*#__PURE__*/React.createElement(Flex, {
-        alignItems: "center",
-        justifyItems: "end",
+        alignItems: "end",
         width: "auto",
-        direction: "row",
-        wrap: "wrap-reverse"
+        margin: "small auto",
+        direction: "column"
       }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
         date: quizAnalysis === null || quizAnalysis === void 0 ? void 0 : quizAnalysis.created_timestamp
-      })), /*#__PURE__*/React.createElement(Flex.Item, {
-        overflowY: "visible",
-        margin: "0 0 0 small"
-      }, _this.renderGenerationButton()), /*#__PURE__*/React.createElement(Flex.Item, null, shouldShowError && /*#__PURE__*/React.createElement(Text, {
+      })), /*#__PURE__*/React.createElement(Flex.Item, null, shouldShowError && /*#__PURE__*/React.createElement(Text, {
         size: "x-small",
-        weight: "bold",
+        weight: "400",
         color: "danger"
-      }, analysisError)))));
+      }, analysisError)));
+    };
+
+    _this.renderRightSide = function () {
+      return /*#__PURE__*/React.createElement(Flex, {
+        alignItems: "center",
+        justifyItems: "space-between",
+        width: "auto",
+        direction: "row",
+        wrap: "wrap-reverse"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        padding: "0 small 0 0",
+        margin: "0 0 0 auto"
+      }, _this.renderUpdateDateWithError()), /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "0 0 0 auto"
+      }, _this.renderGenerationButton()));
+    };
+
+    _this.renderTop = function () {
+      return /*#__PURE__*/React.createElement(Flex, {
+        justifyItems: "space-between",
+        alignItems: "center",
+        wrap: "wrap",
+        width: "auto",
+        margin: "0 auto small 0",
+        direction: "row"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, _this.renderHeader()), /*#__PURE__*/React.createElement(Flex.Item, null, _this.renderRightSide()));
     };
 
     _this.renderTopOnFailedFetch = function () {
@@ -157,7 +170,7 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
       return /*#__PURE__*/React.createElement(Button, {
         color: "primary-inverse",
         interaction: "disabled",
-        margin: "0 0 x-small 0"
+        margin: "auto"
       }, /*#__PURE__*/React.createElement(QuizzesSpinner, {
         size: "x-small",
         color: "brand",
@@ -170,7 +183,7 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
     _this.renderStartGenerationButton = function () {
       return /*#__PURE__*/React.createElement(Button, {
         color: "secondary",
-        margin: "0 0 x-small 0",
+        margin: "auto",
         onClick: _this.handleGeneration,
         theme: {
           lineHeight: '24px'

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/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,27 @@ 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: 'bAOvu',
   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.bAOvu_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.bAOvu_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.bAOvu_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.bAOvu_EKAb svg{fill:#fff}\n\n.bAOvu_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.bAOvu_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.bAOvu_SVtU{max-width:100%;width:calc(25% + 350px)}");
   },
-  'tableWrapper': 'daSNV_rMrG',
-  'iconWrapper': 'daSNV_cvRx',
-  'iconCorrect': 'daSNV_EKAb',
-  'correctRowBorder': 'daSNV_tnta',
-  'correctRowBorderRadius': 'daSNV_fvqY',
-  'answerFrequencySummaryContainer': 'daSNV_cVld'
+  'tableWrapper': 'bAOvu_rMrG',
+  'iconWrapper': 'bAOvu_cvRx',
+  'iconCorrect': 'bAOvu_EKAb',
+  'correctRowBorder': 'bAOvu_tnta',
+  'correctRowBorderRadius': 'bAOvu_fvqY',
+  'tableContainer': 'bAOvu_SVtU'
 };
 
 var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
@@ -186,14 +188,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)((0, _defineProperty2.default)({}, styles.tableContainer, 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 +214,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

@@ -68,6 +68,7 @@ var noAnswerKey = 'noAnswer';
 var incorrectKey = 'incorrect';
 var correctKey = 'correct';
 var partialCorrectKey = 'partialCorrect';
+var tableLayout = 'fixed';
 
 var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
 
@@ -158,6 +159,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;
@@ -197,8 +203,9 @@ var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(styles.collapsingTable)
       }, /*#__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())));
+        caption: (0, _formatMessage.default)('Answer Frequency Summary Aggregates'),
+        layout: tableLayout
+      }, _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/presenter.js

@@ -126,7 +126,7 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         alignItems: "center",
         width: "auto",
-        margin: "auto",
+        margin: "small auto",
         direction: "column"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
         overflowY: "hidden"
@@ -140,37 +140,50 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
       }, quizAnalysis === null || quizAnalysis === void 0 ? void 0 : (_quizAnalysis$metadat = quizAnalysis.metadata) === null || _quizAnalysis$metadat === void 0 ? void 0 : _quizAnalysis$metadat.quiz_title)));
     };
 
-    _this.renderTop = function () {
+    _this.renderUpdateDateWithError = function () {
       var _this$props = _this.props,
           analysisError = _this$props.analysisError,
           generationInProgress = _this$props.generationInProgress,
           quizAnalysis = _this$props.quizAnalysis;
       var shouldShowError = analysisError && !generationInProgress;
       return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        justifyItems: "space-between",
-        alignItems: "center",
-        wrap: "wrap",
-        width: "auto",
-        margin: "auto",
-        direction: "row"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, _this.renderHeader()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        margin: "0 0 0 auto"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        alignItems: "center",
-        justifyItems: "end",
+        alignItems: "end",
         width: "auto",
-        direction: "row",
-        wrap: "wrap-reverse"
+        margin: "small auto",
+        direction: "column"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
         date: quizAnalysis === null || quizAnalysis === void 0 ? void 0 : quizAnalysis.created_timestamp
-      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        overflowY: "visible",
-        margin: "0 0 0 small"
-      }, _this.renderGenerationButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, shouldShowError && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, shouldShowError && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "x-small",
-        weight: "bold",
+        weight: "400",
         color: "danger"
-      }, analysisError)))));
+      }, analysisError)));
+    };
+
+    _this.renderRightSide = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        alignItems: "center",
+        justifyItems: "space-between",
+        width: "auto",
+        direction: "row",
+        wrap: "wrap-reverse"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        padding: "0 small 0 0",
+        margin: "0 0 0 auto"
+      }, _this.renderUpdateDateWithError()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "0 0 0 auto"
+      }, _this.renderGenerationButton()));
+    };
+
+    _this.renderTop = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        justifyItems: "space-between",
+        alignItems: "center",
+        wrap: "wrap",
+        width: "auto",
+        margin: "0 auto small 0",
+        direction: "row"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, _this.renderHeader()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, _this.renderRightSide()));
     };
 
     _this.renderTopOnFailedFetch = function () {
@@ -188,7 +201,7 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         color: "primary-inverse",
         interaction: "disabled",
-        margin: "0 0 x-small 0"
+        margin: "auto"
       }, /*#__PURE__*/_react.default.createElement(_Spinner.QuizzesSpinner, {
         size: "x-small",
         color: "brand",
@@ -201,7 +214,7 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
     _this.renderStartGenerationButton = function () {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
         color: "secondary",
-        margin: "0 0 x-small 0",
+        margin: "auto",
         onClick: _this.handleGeneration,
         theme: {
           lineHeight: '24px'

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.0+a1790dfdf",
+  "version": "18.6.1-rc.2+ac66a4360",
   "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.0+a1790dfdf",
-    "@instructure/quiz-i18n": "18.6.1-rc.0+a1790dfdf",
-    "@instructure/quiz-interactions": "18.6.1-rc.0+a1790dfdf",
-    "@instructure/quiz-number-input": "18.6.1-rc.0+a1790dfdf",
-    "@instructure/quiz-rce": "18.6.1-rc.0+a1790dfdf",
+    "@instructure/quiz-common": "18.6.1-rc.2+ac66a4360",
+    "@instructure/quiz-i18n": "18.6.1-rc.2+ac66a4360",
+    "@instructure/quiz-interactions": "18.6.1-rc.2+ac66a4360",
+    "@instructure/quiz-number-input": "18.6.1-rc.2+ac66a4360",
+    "@instructure/quiz-rce": "18.6.1-rc.2+ac66a4360",
     "@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.0+a1790dfdf",
+    "instructure-validations": "18.6.1-rc.2+ac66a4360",
     "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.0+a1790dfdf",
+    "quiz-presets": "18.6.1-rc.2+ac66a4360",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -176,5 +176,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a1790dfdfd701dbef77c71e7a231b796fb734635"
+  "gitHead": "ac66a43604b7238d95451f873c5ed673e35e51f8"
 }