@instructure/quiz-core 18.5.1-rc.8 → 18.6.0

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

@@ -9,6 +9,8 @@ import { fetchReports } from "./fetchReports.js";
 import { fetchReportsStatus } from "./fetchReportsStatus.js";
 import { getErrorMessageForCode } from "./errorCodes.js";
 import { generateReports as triggerReportGeneration } from "./generateReports.js";
+import { exportReports as triggerExportReports } from "./exportReports.js";
+import { saveFile } from "./utils.js";
 export var withAnalysisStatePresenter = function withAnalysisStatePresenter(OriginalComponent) {
   var WithAnalysisStatePresenter = function WithAnalysisStatePresenter(_ref) {
     var quizAnalysis = _ref.quizAnalysis,
@@ -26,11 +28,12 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
         generateAnalysis = _ref.generateAnalysis,
         fetchQuizAnalysis = _ref.fetchQuizAnalysis,
         fetchItemAnalyses = _ref.fetchItemAnalyses,
+        getAnalysesExport = _ref.getAnalysesExport,
         fetchAnalysesStatus = _ref.fetchAnalysesStatus,
         statusPollingInProgress = _ref.statusPollingInProgress,
         setStatusPollingInProgress = _ref.setStatusPollingInProgress,
         pollingInterval = _ref.pollingInterval,
-        passThroughProps = _objectWithoutProperties(_ref, ["quizAnalysis", "itemAnalyses", "fetchInProgress", "generationInProgress", "analysisError", "setQuizAnalysis", "addError", "setItemAnalyses", "setFetchInProgress", "setGenerationInProgress", "setAnalysisError", "activeQuizId", "generateAnalysis", "fetchQuizAnalysis", "fetchItemAnalyses", "fetchAnalysesStatus", "statusPollingInProgress", "setStatusPollingInProgress", "pollingInterval"]);
+        passThroughProps = _objectWithoutProperties(_ref, ["quizAnalysis", "itemAnalyses", "fetchInProgress", "generationInProgress", "analysisError", "setQuizAnalysis", "addError", "setItemAnalyses", "setFetchInProgress", "setGenerationInProgress", "setAnalysisError", "activeQuizId", "generateAnalysis", "fetchQuizAnalysis", "fetchItemAnalyses", "getAnalysesExport", "fetchAnalysesStatus", "statusPollingInProgress", "setStatusPollingInProgress", "pollingInterval"]);
 
     WithAnalysisStatePresenter.displayName = "WithAnalysisStatePresenter(".concat(OriginalComponent.displayName || OriginalComponent.name, ")");
 
@@ -101,6 +104,41 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
       return _generateReports.apply(this, arguments);
     }
 
+    function exportReports(_x) {
+      return _exportReports.apply(this, arguments);
+    }
+
+    function _exportReports() {
+      _exportReports = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(format) {
+        var filter,
+            exportConfig,
+            _args4 = arguments;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                filter = _args4.length > 1 && _args4[1] !== void 0 ? _args4[1] : 'last_attempt';
+                exportConfig = {
+                  getAnalysesExport: getAnalysesExport,
+                  format: format,
+                  filter: filter,
+                  activeQuizId: activeQuizId,
+                  addError: addError,
+                  saveFile: saveFile
+                };
+                _context4.next = 4;
+                return triggerExportReports(exportConfig);
+
+              case 4:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+      return _exportReports.apply(this, arguments);
+    }
+
     useEffect(function () {
       var fetchIfNeeded = /*#__PURE__*/function () {
         var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -172,6 +210,7 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
       generationInProgress: generationInProgress,
       analysisError: analysisError,
       generateReports: generateReports,
+      exportReports: exportReports,
       analysisFetchError: analysisFetchError
     }, passThroughProps));
   };
@@ -193,6 +232,7 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
     fetchQuizAnalysis: PropTypes.func.isRequired,
     fetchItemAnalyses: PropTypes.func.isRequired,
     fetchAnalysesStatus: PropTypes.func.isRequired,
+    getAnalysesExport: PropTypes.func.isRequired,
     addError: PropTypes.func.isRequired,
     pollingInterval: PropTypes.number.isRequired,
     generateAnalysis: PropTypes.func.isRequired // from LTI, f(filter: string, onError?: func(error))

package/es/reporting/components/resources/ReportCard/theme.js

@@ -3,7 +3,7 @@ export default function generator(_ref) {
       borders = _ref.borders;
   return {
     cardHeight: '6rem',
-    cardWidth: '16rem',
+    cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
     cardBoxShadow: '1px 1px 3px 0 #ddd',

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

@@ -32,11 +32,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _dec, _class, _class2, _temp;
 
 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'
 };
 var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AnalysisMetric, _Component);
@@ -56,7 +57,9 @@ var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
           label = _this$props.label,
           value = _this$props.value,
           suffix = _this$props.suffix;
-      return /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricWrapper
+      }, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
         theme: {
           valueFontWeight: 500,
           padding: '0'
@@ -67,7 +70,7 @@ var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
           className: styles.metricLabel
         }, label),
         renderValue: (0, _utils.getSanitizedMetricValue)(value, suffix)
-      });
+      }));
     }
   }]);
   AnalysisMetric.displayName = "AnalysisMetric";

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

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,20 +25,9 @@ var _propTypes2 = require("../../propTypes.js");
 
 var _presenter = require("../shared/AfsTableWrapper/presenter.js");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _presenter2 = require("../shared/AfsPartsContainer/presenter.js");
 
-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) {
+var AggregationType = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AggregationType, _Component);
 
   var _super = (0, _createSuper2.default)(AggregationType);
@@ -58,20 +47,22 @@ var AggregationType = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_cla
       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("div", {
-        className: (0, _classnames.default)(styles.answerFrequencySummaryContainer)
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
-        itemId: itemId,
-        answerSummary: answerSummary
-      })));
+      return /*#__PURE__*/_react.default.createElement(_presenter.AfsTableWrapper, null, /*#__PURE__*/_react.default.createElement(_presenter2.AfsPartsContainer, {
+        aggregationTable: /*#__PURE__*/_react.default.createElement(_index.default, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
     };
 
     return _this;
   }
 
   return AggregationType;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component);
+
+exports.AggregationType = AggregationType;
+AggregationType.propTypes = {
   itemId: _propTypes.default.number.isRequired,
   answerSummary: _propTypes2.onlyAggregatePropType
-}.isRequired, _temp)) || _class);
-exports.AggregationType = AggregationType;
+}.isRequired;

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

@@ -42,12 +42,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'cEPQa',
+  componentId: 'dCEWT',
   template: function template(theme) {
-    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)}");
+    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': 'cEPQa_rMrG',
-  'answerFrequencySummaryContainer': 'cEPQa_cVld'
+  'tableWrapper': 'dCEWT_rMrG',
+  'tableContainer': 'dCEWT_SVtU'
 };
 var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ChoiceType, _Component);
@@ -104,7 +104,7 @@ var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       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("div", {
-        className: (0, _classnames.default)(styles.answerFrequencySummaryContainer)
+        className: (0, _classnames.default)(styles.tableContainer)
       }, /*#__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, {

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

@@ -1,16 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 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"));
@@ -29,20 +27,9 @@ var _propTypes2 = require("../../propTypes.js");
 
 var _matchingTypeOrderer = _interopRequireDefault(require("./utils/matchingTypeOrderer.js"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _uiThemeable = require("@instructure/ui-themeable");
+var _presenter = require("../shared/AfsPartsContainer/presenter.js");
 
-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) {
+var MatchingType = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MatchingType, _Component);
 
   var _super = (0, _createSuper2.default)(MatchingType);
@@ -71,23 +58,26 @@ var MatchingType = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_class
 
       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
-      })));
+      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
+        })
+      }));
     };
 
     return _this;
   }
 
   return MatchingType;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component);
+
+exports.MatchingType = MatchingType;
+MatchingType.propTypes = {
   itemId: _propTypes.default.number,
   answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType
-}.isRequired, _temp)) || _class);
-exports.MatchingType = MatchingType;
+}.isRequired;

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

@@ -37,6 +37,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _quizInteractions = require("@instructure/quiz-interactions");
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
@@ -170,6 +172,8 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       });
       var questionRowHeaderId = "question-row-header-id-".concat(orderedQuestionKey, "-").concat(itemId);
       var rowKey = "row-".concat(orderedQuestionKey, "-").concat(itemId);
+      var extractedQuestionBody = (0, _quizInteractions.extractTextFromHtml)(question.body);
+      var questionBody = extractedQuestionBody.trim().length > 0 ? extractedQuestionBody : question.body;
       return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
         key: rowKey
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
@@ -178,7 +182,7 @@ var MatchingTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
         theme: {
           padding: '0 0 1px 0'
         }
-      }, question.body), answerCells);
+      }, questionBody), answerCells);
     };
 
     _this.render = function () {

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

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrderingType = 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 _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 OrderingType = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(OrderingType, _Component);
+
+  var _super = (0, _createSuper2.default)(OrderingType);
+
+  function OrderingType() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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((0, _formatMessage.default)('Order'), " ").concat(index);
+      };
+
+      var answerSummaryCopy = (0, _objectSpread2.default)({}, 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] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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.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, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary,
+          orderedAnswerKeys: orderedAnswerKeys,
+          orderedQuestionKeys: orderedQuestionKeys
+        }),
+        aggregationTable: /*#__PURE__*/_react.default.createElement(_index3.default, {
+          itemId: itemId,
+          answerSummary: updatedAnswerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return OrderingType;
+}(_react.Component);
+
+exports.OrderingType = OrderingType;
+OrderingType.propTypes = {
+  itemId: _propTypes.default.number,
+  answerSummary: _propTypes2.matchingTypeAnswerSummaryPropType
+}.isRequired;

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

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

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

@@ -56,6 +56,10 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.matchingEnabled) {
         _this.afsTableComponentMap.set('matching', _index3.MatchingType);
       }
+
+      if (afsFlags.orderingEnabled) {
+        _this.afsTableComponentMap.set('ordering', _index3.OrderingType);
+      }
     };
 
     _this.render = function () {
@@ -97,6 +101,8 @@ AnswerFrequencySummary.propTypes = {
   interactionType: _quizInteractions.PropTypes.string.isRequired,
   afsFlags: _quizInteractions.PropTypes.shape({
     formulaEnabled: _quizInteractions.PropTypes.bool.isRequired,
-    matchingEnabled: _quizInteractions.PropTypes.bool.isRequired
+    matchingEnabled: _quizInteractions.PropTypes.bool.isRequired,
+    hotSpotEnabled: _quizInteractions.PropTypes.bool.isRequired,
+    orderingEnabled: _quizInteractions.PropTypes.bool.isRequired
   })
 }.isRequired;

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

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AfsPartsContainer = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dApXZ',
+  template: function template(theme) {
+    return "\n\n.dApXZ_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.dApXZ_ellB{margin-top:13px}";
+  },
+  'tableContainer': 'dApXZ_SVtU',
+  'aggregateContainer': 'dApXZ_ellB'
+};
+var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AfsPartsContainer, _Component);
+
+  var _super = (0, _createSuper2.default)(AfsPartsContainer);
+
+  function AfsPartsContainer() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AfsPartsContainer);
+
+    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.renderAggregationTable = function () {
+      var _this$props = _this.props,
+          afsTable = _this$props.afsTable,
+          aggregationTable = _this$props.aggregationTable;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.tableContainer, (0, _defineProperty2.default)({}, styles.aggregateContainer, afsTable))
+      }, aggregationTable);
+    };
+
+    _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);
+    };
+
+    _this.render = function () {
+      var _this$props3 = _this.props,
+          afsTable = _this$props3.afsTable,
+          aggregationTable = _this$props3.aggregationTable;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
+    };
+
+    return _this;
+  }
+
+  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);
+exports.AfsPartsContainer = AfsPartsContainer;

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

@@ -18,6 +18,7 @@ function mapStateToProps(_state) {
     afsFlags: {
       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')
     }
   };

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

@@ -52,17 +52,17 @@ var _propTypes2 = require("../propTypes.js");
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'bLTgQ',
+  componentId: 'cnjis',
   template: function template(theme) {
-    return "\n\n.bLTgQ_bqdH{column-gap:5px;display:flex;justify-content:space-between;padding-bottom:".concat(theme.metricsPadding || 'inherit', ";row-gap:8px}\n\n.bLTgQ_PFlN{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.bLTgQ_dJIh{height:").concat(theme.cardHeight || 'inherit', "}\n\n.bLTgQ_eWEX{align-items:flex-end;align-self:flex-end;display:flex;height:100%;justify-content:flex-end}\n\n.bLTgQ_blRb{max-width:160px;padding-right:10px}\n\n.bLTgQ_bxzy{border-bottom:1px solid ").concat(theme.quizSummaryBorderBottomColor || 'inherit', ";margin-bottom:15px;padding-bottom:15px}\n\n.bLTgQ_dKIc{padding-bottom:15px}\n\n@media only screen and (max-width:25rem){.bLTgQ_dJIh{height:auto}.bLTgQ_PFlN{max-width:").concat(theme.cardWidth || 'inherit', ";width:auto}.bLTgQ_bqdH{flex-wrap:wrap}}");
+    return "\n\n.cnjis_bqdH{column-gap:26px;display:flex;justify-content:flex-start;padding-bottom:".concat(theme.metricsPadding || 'inherit', ";row-gap:8px}\n\n.cnjis_PFlN{border-radius:").concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.cnjis_dJIh{height:").concat(theme.cardHeight || 'inherit', "}\n\n.cnjis_eWEX{align-items:flex-end;align-self:flex-end;display:flex;height:100%;justify-content:flex-end}\n\n.cnjis_blRb{max-width:160px;padding-right:10px}\n\n.cnjis_bxzy{border-bottom:1px solid ").concat(theme.quizSummaryBorderBottomColor || 'inherit', ";margin-bottom:15px;padding-bottom:15px}\n\n.cnjis_dKIc{padding-bottom:15px}\n\n@media only screen and (max-width:25rem){.cnjis_dJIh{height:auto}.cnjis_PFlN{max-width:").concat(theme.cardWidth || 'inherit', ";width:auto}.cnjis_bqdH{flex-wrap:wrap}}");
   },
-  'metricsContainer': 'bLTgQ_bqdH',
-  'reportCard': 'bLTgQ_PFlN',
-  'emptyReportCard': 'bLTgQ_dJIh',
-  'emptyCardBodyContainer': 'bLTgQ_eWEX',
-  'dateContainer': 'bLTgQ_blRb',
-  'quizAnalysisSummary': 'bLTgQ_bxzy',
-  'titleContainer': 'bLTgQ_dKIc'
+  'metricsContainer': 'cnjis_bqdH',
+  'reportCard': 'cnjis_PFlN',
+  'emptyReportCard': 'cnjis_dJIh',
+  'emptyCardBodyContainer': 'cnjis_eWEX',
+  'dateContainer': 'cnjis_blRb',
+  'quizAnalysisSummary': 'cnjis_bxzy',
+  'titleContainer': 'cnjis_dKIc'
 };
 var NewQuizAndItemAnalysisReportCardPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAndItemAnalysisReportCardPresenter, _Component);

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/theme.js

@@ -12,7 +12,7 @@ function generator(_ref) {
   return {
     metricsPadding: spacing.medium,
     cardHeight: '6rem',
-    cardWidth: '16rem',
+    cardWidth: '19.5rem',
     cardPadding: spacing.medium,
     cardMargin: spacing.xSmall,
     cardBoxShadow: '1px 1px 3px 0 #ddd',