@instructure/quiz-core 18.5.1-rc.4 → 18.5.1-rc.7

package/lib/common/util/Fetcher.js

@@ -11,6 +11,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -56,7 +58,8 @@ var Fetcher = /*#__PURE__*/function () {
         successMessage = _ref.successMessage,
         onError = _ref.onError,
         cloneResponseForError = _ref.cloneResponseForError,
-        asyncResponseHandler = _ref.asyncResponseHandler;
+        asyncResponseHandler = _ref.asyncResponseHandler,
+        injectMissingUserToken = _ref.injectMissingUserToken;
 
     (0, _classCallCheck2.default)(this, Fetcher);
     // A Response body can only be read once, and is read in the onError handler
@@ -65,6 +68,7 @@ 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.default;
@@ -113,7 +117,16 @@ var Fetcher = /*#__PURE__*/function () {
   }, {
     key: "callHeaders",
     value: function callHeaders() {
-      return this.headers || (0, _httpHeaders.httpHeaders)(this.getState().getIn(['config', 'userToken']));
+      if (!this.headers) {
+        return (0, _httpHeaders.httpHeaders)(this.getState().getIn(['config', 'userToken']));
+      }
+
+      if (!this.injectMissingUserToken) {
+        return this.headers;
+      }
+
+      var userToken = this.getState().getIn(['config', 'userToken']);
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _httpHeaders.jwtHeader)(userToken)), this.headers);
     }
   }, {
     key: "handleSuccess",

package/lib/reporting/api/getAnalysesExport.js

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

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

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,7 +25,20 @@ var _propTypes2 = require("../../propTypes.js");
 
 var _presenter = require("../shared/AfsTableWrapper/presenter.js");
 
-var AggregationType = /*#__PURE__*/function (_Component) {
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'JFhmr',
+  template: function template(theme) {
+    return "\n\n.JFhmr_cVld{max-width:100%;width:calc(25% + 350px)}";
+  },
+  'answerFrequencySummaryContainer': 'JFhmr_cVld'
+};
+var AggregationType = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AggregationType, _Component);
 
   var _super = (0, _createSuper2.default)(AggregationType);
@@ -45,20 +58,20 @@ var AggregationType = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           answerSummary = _this$props.answerSummary,
           itemId = _this$props.itemId;
-      return /*#__PURE__*/_react.default.createElement(_presenter.AfsTableWrapper, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+      return /*#__PURE__*/_react.default.createElement(_presenter.AfsTableWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.answerFrequencySummaryContainer)
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
         itemId: itemId,
         answerSummary: answerSummary
-      }));
+      })));
     };
 
     return _this;
   }
 
   return AggregationType;
-}(_react.Component);
-
-exports.AggregationType = AggregationType;
-AggregationType.propTypes = {
+}(_react.Component), _class2.propTypes = {
   itemId: _propTypes.default.number.isRequired,
   answerSummary: _propTypes2.onlyAggregatePropType
-}.isRequired;
+}.isRequired, _temp)) || _class);
+exports.AggregationType = AggregationType;

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

@@ -37,14 +37,17 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _index2 = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'ZuPLN',
+  componentId: 'cEPQa',
   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.cEPQa_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.cEPQa_cVld{max-width:100%;width:calc(25% + 350px)}");
   },
-  'tableWrapper': 'ZuPLN_rMrG'
+  'tableWrapper': 'cEPQa_rMrG',
+  'answerFrequencySummaryContainer': 'cEPQa_cVld'
 };
 var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ChoiceType, _Component);
@@ -100,7 +103,9 @@ var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       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.default.createElement(_index2.default, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      return /*#__PURE__*/_react.default.createElement(_index2.default, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.answerFrequencySummaryContainer)
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: spacingHeaderId,
@@ -115,7 +120,7 @@ var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices))));
+      }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
     }
   }]);
   ChoiceType.displayName = "ChoiceType";

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

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MatchingType = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'JFhmr',
+  template: function template(theme) {
+    return "\n\n.JFhmr_cVld{max-width:100%;width:calc(25% + 350px)}";
+  },
+  'answerFrequencySummaryContainer': 'JFhmr_cVld'
+};
+var MatchingType = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MatchingType, _Component);
+
+  var _super = (0, _createSuper2.default)(MatchingType);
+
+  function MatchingType() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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.default.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
+
+      var orderedQuestionKeys = _matchingTypeOrderer.default.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
+
+      var containerHalfWidth = orderedAnswerKeys.length <= 3;
+      return /*#__PURE__*/_react.default.createElement(_index.default, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, styles.answerFrequencySummaryContainer, containerHalfWidth))
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        itemId: itemId,
+        answerSummary: answerSummary,
+        orderedAnswerKeys: orderedAnswerKeys,
+        orderedQuestionKeys: orderedQuestionKeys
+      })));
+    };
+
+    return _this;
+  }
+
+  return MatchingType;
+}(_react.Component), _class2.propTypes = {
+  itemId: _propTypes.default.number,
+  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType
+}.isRequired, _temp)) || _class);
+exports.MatchingType = MatchingType;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _presenter.MatchingTypeTable;
+  }
+});
+
+var _presenter = require("./presenter.js");

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

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MatchingTypeTable = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _uiFlex = require("@instructure/ui-flex");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiTable = require("@instructure/ui-table");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _propTypes2 = require("../../../propTypes.js");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+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'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+  width: "46px",
+  textAlign: "center"
+});
+
+var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MatchingTypeTable, _Component);
+
+  var _super = (0, _createSuper2.default)(MatchingTypeTable);
+
+  function MatchingTypeTable() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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 = (0, _classnames.default)(styles.iconWrapper, styles.iconCorrect);
+      return /*#__PURE__*/_react.default.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.default.createElement(_uiTable.Table.ColHeader, {
+        id: answerNumberHeaderId,
+        key: answerNumberHeaderId,
+        theme: {
+          padding: '0 0 15px 0'
+        },
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row"
+      }, _ref2, /*#__PURE__*/_react.default.createElement(_uiFlex.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 = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.correctRowBorder, answer.correct), (0, _defineProperty2.default)(_classNames, styles.correctRowBorderRadius, answer.correct), _classNames));
+      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+        id: answerNumberCellId,
+        key: answerNumberCellId,
+        theme: {
+          padding: '0 0 0 0'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: containerClassNames
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        width: "46px",
+        textAlign: "center"
+      }, correct && _this.renderIcon()), /*#__PURE__*/_react.default.createElement(_uiFlex.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.default.createElement(_uiTable.Table.Row, {
+        key: rowKey
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: categoryHeaderId,
+        key: categoryHeaderId,
+        theme: {
+          padding: '0 0 15px 0'
+        },
+        textAlign: "start",
+        width: "250px"
+      }, (0, _formatMessage.default)('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);
+      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+        key: rowKey
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+        id: questionRowHeaderId,
+        key: questionRowHeaderId,
+        theme: {
+          padding: '0 0 1px 0'
+        }
+      }, question.body), answerCells);
+    };
+
+    _this.render = function () {
+      var _this$props4 = _this.props,
+          orderedAnswerKeys = _this$props4.orderedAnswerKeys,
+          orderedQuestionKeys = _this$props4.orderedQuestionKeys;
+      return /*#__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;
+  }
+
+  return MatchingTypeTable;
+}(_react.Component), _class2.propTypes = {
+  itemId: _propTypes.default.number,
+  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType,
+  orderedAnswerKeys: _propTypes.default.array.isRequired,
+  orderedQuestionKeys: _propTypes.default.array.isRequired
+}.isRequired, _temp)) || _class);
+exports.MatchingTypeTable = MatchingTypeTable;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    tableBottomPadding: spacing.medium,
+    colorGreen: '#0b874b'
+  };
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MatchingType", {
+  enumerable: true,
+  get: function get() {
+    return _MatchingType.MatchingType;
+  }
+});
+
+var _MatchingType = require("./MatchingType.js");

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var MatchingTypeOrderer = function MatchingTypeOrderer() {
+  (0, _classCallCheck2.default)(this, MatchingTypeOrderer);
+
+  this.orderAnswerKeysForDiagonal = function (answerSummary, answerKeys) {
+    var questions = answerSummary.questions;
+    var questionKeys = Object.keys(questions);
+    var orderedKeys = (0, _toConsumableArray2.default)(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;
+  };
+};
+
+var _default = new MatchingTypeOrderer();
+
+exports.default = _default;

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

@@ -23,6 +23,8 @@ var _index = _interopRequireDefault(require("./ChoiceType/index.js"));
 
 var _index2 = _interopRequireDefault(require("./AggregationType/index.js"));
 
+var _index3 = require("./MatchingType/index.js");
+
 var _propTypes = require("../propTypes.js");
 
 var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
@@ -50,6 +52,10 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.hotSpotEnabled) {
         _this.afsTableComponentMap.set('hot-spot', _index2.default);
       }
+
+      if (afsFlags.matchingEnabled) {
+        _this.afsTableComponentMap.set('matching', _index3.MatchingType);
+      }
     };
 
     _this.render = function () {

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

@@ -27,7 +27,9 @@ var _uiFlex = require("@instructure/ui-flex");
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _dec, _class, _temp;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _dec, _class, _class2, _temp;
 
 var styles = {
   componentId: 'bmsWU',
@@ -36,7 +38,7 @@ var styles = {
   },
   'tableWrapper': 'bmsWU_rMrG'
 };
-var AfsTableWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = /*#__PURE__*/function (_Component) {
+var AfsTableWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AfsTableWrapper, _Component);
 
   var _super = (0, _createSuper2.default)(AfsTableWrapper);
@@ -53,23 +55,25 @@ var AfsTableWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.render = function () {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         direction: "row"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
         shouldGrow: true
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.tableWrapper
       }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        margin: "0 x-large small 0",
+        margin: "x-large x-large x-large 0",
         level: "h3",
         weight: "bold",
         color: "primary"
-      }, (0, _formatMessage.default)('Answer Frequency Summary')), _this.props.children))));
+      }, (0, _formatMessage.default)('Answer Frequency Summary')), _this.props.children)));
     };
 
     return _this;
   }
 
   return AfsTableWrapper;
-}(_react.Component), _temp)) || _class);
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.node.isRequired
+}, _temp)) || _class);
 exports.AfsTableWrapper = AfsTableWrapper;