@instructure/quiz-core 18.5.1-rc.1 → 18.5.1-rc.11

package/es/common/util/Fetcher.js

@@ -1,5 +1,6 @@
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import { decamelizeKeys } from 'humps';
@@ -7,7 +8,7 @@ import queryString from 'query-string';
 import fetch from 'isomorphic-fetch';
 import t from '@instructure/quiz-i18n/es/format-message';
 import jsonify from "./jsonify.js";
-import { httpHeaders } from "./httpHeaders.js";
+import { httpHeaders, jwtHeader } from "./httpHeaders.js";
 import store from "../../reduxStore.js";
 import { callbacksCompleteForCall, errorCallFor, startCallFor, successCallFor } from "./callHelpers.js";
 import { addError, addSuccess } from "../actions/alerts.js";
@@ -33,7 +34,8 @@ export var Fetcher = /*#__PURE__*/function () {
         successMessage = _ref.successMessage,
         onError = _ref.onError,
         cloneResponseForError = _ref.cloneResponseForError,
-        asyncResponseHandler = _ref.asyncResponseHandler;
+        asyncResponseHandler = _ref.asyncResponseHandler,
+        injectMissingUserToken = _ref.injectMissingUserToken;
 
     _classCallCheck(this, Fetcher);
 
@@ -43,6 +45,7 @@ export var Fetcher = /*#__PURE__*/function () {
     this.cloneResponseForError = cloneResponseForError || false;
     this.callType = callType;
     this.headers = headers;
+    this.injectMissingUserToken = injectMissingUserToken || false;
     this.successMessage = successMessage;
     this.onError = onError;
     this.asyncResponseHandler = asyncResponseHandler || jsonify;
@@ -91,7 +94,16 @@ export var Fetcher = /*#__PURE__*/function () {
   }, {
     key: "callHeaders",
     value: function callHeaders() {
-      return this.headers || httpHeaders(this.getState().getIn(['config', 'userToken']));
+      if (!this.headers) {
+        return httpHeaders(this.getState().getIn(['config', 'userToken']));
+      }
+
+      if (!this.injectMissingUserToken) {
+        return this.headers;
+      }
+
+      var userToken = this.getState().getIn(['config', 'userToken']);
+      return _objectSpread(_objectSpread({}, jwtHeader(userToken)), this.headers);
     }
   }, {
     key: "handleSuccess",

package/es/reporting/api/getAnalysesExport.js

@@ -13,6 +13,7 @@ var getFetcher = function getFetcher(format) {
     headers: {
       'Accept': mimeType
     },
+    injectUserToken: true,
     asyncResponseHandler: function asyncResponseHandler(response) {
       return response;
     }

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

@@ -8,11 +8,12 @@ var _dec, _class, _class2, _temp;
 import { themeable } from '@instructure/ui-themeable';
 import theme from "./theme.js";
 var styles = {
-  componentId: 'ethsC',
+  componentId: 'fKESK',
   template: function template(theme) {
-    return "\n\n.ethsC_eckF{margin:0;max-width:159px;text-transform:capitalize}";
+    return "\n\n.fKESK_eckF{margin:0;max-width:159px;text-transform:capitalize}\n\n.fKESK_CIyo{width:90px}";
   },
-  'metricLabel': 'ethsC_eckF'
+  'metricLabel': 'fKESK_eckF',
+  'metricWrapper': 'fKESK_CIyo'
 };
 import React, { Component } from 'react';
 import { getSanitizedMetricValue } from "../utils.js";
@@ -37,7 +38,9 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
           label = _this$props.label,
           value = _this$props.value,
           suffix = _this$props.suffix;
-      return /*#__PURE__*/React.createElement(Metric, {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.metricWrapper
+      }, /*#__PURE__*/React.createElement(Metric, {
         theme: {
           valueFontWeight: 500,
           padding: '0'
@@ -48,7 +51,7 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
           className: styles.metricLabel
         }, label),
         renderValue: getSanitizedMetricValue(value, suffix)
-      });
+      }));
     }
   }]);
 

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

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

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

@@ -0,0 +1,46 @@
+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 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";
+export var AggregationType = /*#__PURE__*/function (_Component) {
+  _inherits(AggregationType, _Component);
+
+  var _super = _createSuper(AggregationType);
+
+  function AggregationType() {
+    var _this;
+
+    _classCallCheck(this, AggregationType);
+
+    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.render = function () {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return AggregationType;
+}(Component);
+AggregationType.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  answerSummary: onlyAggregatePropType
+}.isRequired;

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

@@ -8,21 +8,22 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
-import { Flex } from '@instructure/ui-flex';
-import { Heading } from '@instructure/ui-heading';
 import { themeable } from '@instructure/ui-themeable';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import PropTypes from 'prop-types';
 import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
 var styles = {
-  componentId: 'ZuPLN',
+  componentId: 'dCEWT',
   template: function template(theme) {
-    return "\n\n.ZuPLN_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}");
+    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)}");
   },
-  'tableWrapper': 'ZuPLN_rMrG'
+  'tableWrapper': 'dCEWT_rMrG',
+  'tableContainer': 'dCEWT_SVtU'
 };
 import theme from "./theme.js";
+import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
+import classNames from 'classnames';
 export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceType, _Component);
 
@@ -77,19 +78,9 @@ export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
-        direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
-        shouldGrow: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.tableWrapper
-      }, /*#__PURE__*/React.createElement(Heading, {
-        margin: "large 0 small 0",
-        level: "h4",
-        theme: {
-          h4FontWeight: 'normal'
-        }
-      }, t('Answer Frequency Summary')), /*#__PURE__*/React.createElement(Table, {
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.tableContainer)
+      }, /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary')
       }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: spacingHeaderId,
@@ -104,7 +95,7 @@ export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))))));
+      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
     }
   }]);
 

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

@@ -0,0 +1,57 @@
+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 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";
+export var MatchingType = /*#__PURE__*/function (_Component) {
+  _inherits(MatchingType, _Component);
+
+  var _super = _createSuper(MatchingType);
+
+  function MatchingType() {
+    var _this;
+
+    _classCallCheck(this, MatchingType);
+
+    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.render = function () {
+      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
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return MatchingType;
+}(Component);
+MatchingType.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: matchingTypeAnswerSummaryPropType
+}.isRequired;

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

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

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

@@ -0,0 +1,183 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React, { Component } from 'react';
+import { Flex } from '@instructure/ui-flex';
+var styles = {
+  componentId: 'daSNV',
+  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)}");
+  },
+  'tableWrapper': 'daSNV_rMrG',
+  'iconWrapper': 'daSNV_cvRx',
+  'iconCorrect': 'daSNV_EKAb',
+  'correctRowBorder': 'daSNV_tnta',
+  'correctRowBorderRadius': 'daSNV_fvqY',
+  'answerFrequencySummaryContainer': 'daSNV_cVld'
+};
+import t from '@instructure/quiz-i18n/es/format-message';
+import { Table } from '@instructure/ui-table';
+import { themeable } from '@instructure/ui-themeable';
+import PropTypes from 'prop-types';
+import { IconCheckSolid } from '@instructure/ui-icons';
+import { matchingTypeAnswerSummaryPropType } from "../../../propTypes.js";
+import classNames from 'classnames';
+import theme from "./theme.js";
+import { extractTextFromHtml } from '@instructure/quiz-interactions';
+
+var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
+
+var _ref2 = /*#__PURE__*/React.createElement(Flex.Item, {
+  width: "46px",
+  textAlign: "center"
+});
+
+export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(MatchingTypeTable, _Component);
+
+  var _super = _createSuper(MatchingTypeTable);
+
+  function MatchingTypeTable() {
+    var _this;
+
+    _classCallCheck(this, MatchingTypeTable);
+
+    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.renderIcon = function () {
+      var classes = classNames(styles.iconWrapper, styles.iconCorrect);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes
+      }, _ref);
+    };
+
+    _this.renderHeaderCell = function (key) {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      var questions = answerSummary.questions;
+      var questionKeys = Object.keys(questions);
+      var exampleAnswers = questions[questionKeys[0]].answers;
+      var answer = exampleAnswers[key];
+      var answerNumberHeaderId = "answer-number-header-".concat(key, "-").concat(itemId);
+      return /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: answerNumberHeaderId,
+        key: answerNumberHeaderId,
+        theme: {
+          padding: '0 0 15px 0'
+        },
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: "row"
+      }, _ref2, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        textAlign: "center"
+      }, answer.body)));
+    };
+
+    _this.renderCell = function (questionKey, answerKey) {
+      var _classNames;
+
+      var _this$props2 = _this.props,
+          answerSummary = _this$props2.answerSummary,
+          itemId = _this$props2.itemId;
+      var questions = answerSummary.questions;
+      var question = questions[questionKey];
+      var answer = question.answers[answerKey];
+      var correct = answer.correct,
+          count = answer.count;
+      var answerNumberCellId = "answer-number-cell-".concat(questionKey, "-").concat(answerKey, "-").concat(itemId);
+      var containerClassNames = classNames((_classNames = {}, _defineProperty(_classNames, styles.correctRowBorder, answer.correct), _defineProperty(_classNames, styles.correctRowBorderRadius, answer.correct), _classNames));
+      return /*#__PURE__*/React.createElement(Table.Cell, {
+        id: answerNumberCellId,
+        key: answerNumberCellId,
+        theme: {
+          padding: '0 0 0 0'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: containerClassNames
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: "row"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        width: "46px",
+        textAlign: "center"
+      }, correct && _this.renderIcon()), /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        width: "46px",
+        textAlign: "center"
+      }, count))));
+    };
+
+    _this.renderHeaderRow = function (orderedAnswerKeys) {
+      var itemId = _this.props.itemId;
+      var headerCells = orderedAnswerKeys.map(_this.renderHeaderCell);
+      var categoryHeaderId = "category-header-".concat(itemId);
+      var rowKey = "header-row-".concat(itemId);
+      return /*#__PURE__*/React.createElement(Table.Row, {
+        key: rowKey
+      }, /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: categoryHeaderId,
+        key: categoryHeaderId,
+        theme: {
+          padding: '0 0 15px 0'
+        },
+        textAlign: "start",
+        width: "250px"
+      }, t('Question')), headerCells);
+    };
+
+    _this.renderRow = function (orderedQuestionKey, orderedAnswerKeys) {
+      var _this$props3 = _this.props,
+          answerSummary = _this$props3.answerSummary,
+          itemId = _this$props3.itemId;
+      var questions = answerSummary.questions;
+      var question = questions[orderedQuestionKey];
+      var answerCells = orderedAnswerKeys.map(function (answerKey) {
+        return _this.renderCell(orderedQuestionKey, answerKey);
+      });
+      var questionRowHeaderId = "question-row-header-id-".concat(orderedQuestionKey, "-").concat(itemId);
+      var rowKey = "row-".concat(orderedQuestionKey, "-").concat(itemId);
+      var extractedQuestionBody = extractTextFromHtml(question.body);
+      var questionBody = extractedQuestionBody.trim().length > 0 ? extractedQuestionBody : question.body;
+      return /*#__PURE__*/React.createElement(Table.Row, {
+        key: rowKey
+      }, /*#__PURE__*/React.createElement(Table.Cell, {
+        id: questionRowHeaderId,
+        key: questionRowHeaderId,
+        theme: {
+          padding: '0 0 1px 0'
+        }
+      }, questionBody), answerCells);
+    };
+
+    _this.render = function () {
+      var _this$props4 = _this.props,
+          orderedAnswerKeys = _this$props4.orderedAnswerKeys,
+          orderedQuestionKeys = _this$props4.orderedQuestionKeys;
+      return /*#__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;
+  }
+
+  return MatchingTypeTable;
+}(Component), _class2.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: matchingTypeAnswerSummaryPropType,
+  orderedAnswerKeys: PropTypes.array.isRequired,
+  orderedQuestionKeys: PropTypes.array.isRequired
+}.isRequired, _temp)) || _class);

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

@@ -0,0 +1,7 @@
+export default function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    tableBottomPadding: spacing.medium,
+    colorGreen: '#0b874b'
+  };
+}

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

@@ -0,0 +1,87 @@
+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 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";
+export var OrderingType = /*#__PURE__*/function (_Component) {
+  _inherits(OrderingType, _Component);
+
+  var _super = _createSuper(OrderingType);
+
+  function OrderingType() {
+    var _this;
+
+    _classCallCheck(this, OrderingType);
+
+    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 translateBody = function translateBody(index) {
+        return "".concat(t('Order'), " ").concat(index);
+      };
+
+      var answerSummaryCopy = _objectSpread({}, answerSummary);
+
+      Object.keys(answerSummaryCopy.questions).forEach(function (questionKey) {
+        Object.keys(answerSummaryCopy.questions[questionKey].answers).forEach(function (answerKey) {
+          var detail = answerSummaryCopy.questions[questionKey].answers[answerKey];
+          answerSummaryCopy.questions[questionKey].answers[answerKey] = _objectSpread(_objectSpread({}, detail), {}, {
+            // Body cannot be used because because re-render of the component add Order
+            // as many time we have to re-render. Only re-assignment works.
+            body: translateBody(Number(answerKey) + 1)
+          });
+        });
+      });
+      return answerSummaryCopy;
+    };
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary;
+
+      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
+        }),
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return OrderingType;
+}(Component);
+OrderingType.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: matchingTypeAnswerSummaryPropType
+}.isRequired;

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

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

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

@@ -0,0 +1,42 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+
+var MatchingTypeOrderer = function MatchingTypeOrderer() {
+  _classCallCheck(this, MatchingTypeOrderer);
+
+  this.orderAnswerKeysForDiagonal = function (answerSummary, answerKeys) {
+    var questions = answerSummary.questions;
+    var questionKeys = Object.keys(questions);
+
+    var orderedKeys = _toConsumableArray(answerKeys);
+
+    answerKeys.forEach(function (answerKey) {
+      questionKeys.forEach(function (questionKey) {
+        var question = questions[questionKey];
+
+        if (question.answers[answerKey].distractor) {
+          orderedKeys.splice(orderedKeys.indexOf(answerKey), 1);
+          orderedKeys.push(answerKey);
+        }
+      });
+    });
+    return orderedKeys;
+  };
+
+  this.orderQuestionKeysForDiagonal = function (answerSummary, questionKeys, orderedAnswerKeys) {
+    var questions = answerSummary.questions;
+    var orderedQuestionKeys = [];
+    orderedAnswerKeys.forEach(function (orderedAnswerKey) {
+      questionKeys.forEach(function (questionKey) {
+        var question = questions[questionKey];
+
+        if (question.answers[orderedAnswerKey].correct) {
+          orderedQuestionKeys.push(questionKey);
+        }
+      });
+    });
+    return orderedQuestionKeys;
+  };
+};
+
+export default new MatchingTypeOrderer();

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

@@ -3,7 +3,9 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import { PropTypes } from '@instructure/quiz-interactions';
-import { ChoiceType } from "./ChoiceType/presenter.js";
+import ChoiceType from "./ChoiceType/index.js";
+import AggregationType from "./AggregationType/index.js";
+import { MatchingType, OrderingType } from "./MatchingType/index.js";
 import { answerSummaryPropType } from "../propTypes.js";
 export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
@@ -23,7 +25,20 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
     _this.afsTableComponentMap = new Map();
 
     _this.addAfsComponentsByFlags = function (afsFlags) {
-      if (afsFlags.formulaEnabled) {// this.afsTableComponentMap.set('formula', Formula)
+      if (afsFlags.formulaEnabled) {
+        _this.afsTableComponentMap.set('formula', AggregationType);
+      }
+
+      if (afsFlags.hotSpotEnabled) {
+        _this.afsTableComponentMap.set('hot-spot', AggregationType);
+      }
+
+      if (afsFlags.matchingEnabled) {
+        _this.afsTableComponentMap.set('matching', MatchingType);
+      }
+
+      if (afsFlags.orderingEnabled) {
+        _this.afsTableComponentMap.set('ordering', OrderingType);
       }
     };
 
@@ -37,7 +52,7 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
 
       var AfsTableComponent = _this.afsTableComponentMap.get(interactionType);
 
-      if (!AfsTableComponent) {
+      if (!AfsTableComponent || !answerSummary) {
         return /*#__PURE__*/React.createElement(React.Fragment, null);
       }
 
@@ -64,6 +79,8 @@ AnswerFrequencySummary.propTypes = {
   interactionType: PropTypes.string.isRequired,
   afsFlags: PropTypes.shape({
     formulaEnabled: PropTypes.bool.isRequired,
-    matchingEnabled: PropTypes.bool.isRequired
+    matchingEnabled: PropTypes.bool.isRequired,
+    hotSpotEnabled: PropTypes.bool.isRequired,
+    orderingEnabled: PropTypes.bool.isRequired
   })
 }.isRequired;

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

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