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

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [18.6.0](https://gerrit.instructure.com/quizzes-ui/compare/v18.5.0...v18.6.0) (2023-11-14)
+
+
+### Bug Fixes
+
+* **reports:** fixes for generate report button positioning after audit ([9f64fe1](https://gerrit.instructure.com/quizzes-ui/commits/9f64fe1029e0029cb999b0d8255369562691241f))
+
+
+### Features
+
+* **afs-formula:** Add formula aggregation ui component ([7e05172](https://gerrit.instructure.com/quizzes-ui/commits/7e05172cfb3460af3f9231c0e072898116415f40))
+* **afs-hot-spot:** Add hot-spot afs ([b23d37c](https://gerrit.instructure.com/quizzes-ui/commits/b23d37cd626992f7db90c3453d1556df7b2b4cfb))
+* **AfsOrderingType:** create frontend for ordering afs and summary part ([d1e9066](https://gerrit.instructure.com/quizzes-ui/commits/d1e9066d016e3503fecd812c533c388e68e49136))
+* **Fetcher:** support auth header injection for requests with custom headers ([1553b56](https://gerrit.instructure.com/quizzes-ui/commits/1553b56ba37bfd69bb798c66ec34b3cd601ad8a3))
+* **MatchingType:** create frontend for the afs table for matching question type ([c654589](https://gerrit.instructure.com/quizzes-ui/commits/c6545899277fee2f0cb7a574740c0b89e13c3ad3))
+* **quizanalysis:** extend quiz analysis chart by extreme low and high value ([846b42d](https://gerrit.instructure.com/quizzes-ui/commits/846b42d6fbb1d77bb36641c1fa31725bb5b42b47))
+* **Reports:** increase report card sizes, adapt metric rendering ([06ef7c9](https://gerrit.instructure.com/quizzes-ui/commits/06ef7c93969d591a3403d13a9365183179c855b1))
+* **Reports:** pass down export download functionality to analysis components ([7684e86](https://gerrit.instructure.com/quizzes-ui/commits/7684e8663eece2857d4f080e80563f2a6f31de33))
+
+
+
+
+
 # [18.5.0](https://gerrit.instructure.com/quizzes-ui/compare/v18.4.0...v18.5.0) (2023-11-01)
 
 

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/presenter.js

@@ -1,24 +1,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";
-
-var _dec, _class, _class2, _temp;
-
 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 classNames from 'classnames';
-var styles = {
-  componentId: 'JFhmr',
-  template: function template(theme) {
-    return "\n\n.JFhmr_cVld{max-width:100%;width:calc(25% + 350px)}";
-  },
-  'answerFrequencySummaryContainer': 'JFhmr_cVld'
-};
-import { themeable } from '@instructure/ui-themeable';
-export var AggregationType = (_dec = themeable({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+export var AggregationType = /*#__PURE__*/function (_Component) {
   _inherits(AggregationType, _Component);
 
   var _super = _createSuper(AggregationType);
@@ -38,19 +27,20 @@ export var AggregationType = (_dec = themeable({}, styles), _dec(_class = (_temp
       var _this$props = _this.props,
           answerSummary = _this$props.answerSummary,
           itemId = _this$props.itemId;
-      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.answerFrequencySummaryContainer)
-      }, /*#__PURE__*/React.createElement(AggregationTable, {
-        itemId: itemId,
-        answerSummary: answerSummary
-      })));
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
     };
 
     return _this;
   }
 
   return AggregationType;
-}(Component), _class2.propTypes = {
+}(Component);
+AggregationType.propTypes = {
   itemId: PropTypes.number.isRequired,
   answerSummary: onlyAggregatePropType
-}.isRequired, _temp)) || _class);
+}.isRequired;

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

@@ -14,12 +14,12 @@ import PropTypes from 'prop-types';
 import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
 var styles = {
-  componentId: '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'
 };
 import theme from "./theme.js";
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
@@ -79,7 +79,7 @@ export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
       return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.answerFrequencySummaryContainer)
+        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, {

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

@@ -1,26 +1,14 @@
-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 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 classNames from 'classnames';
-var styles = {
-  componentId: 'JFhmr',
-  template: function template(theme) {
-    return "\n\n.JFhmr_cVld{max-width:100%;width:calc(25% + 350px)}";
-  },
-  'answerFrequencySummaryContainer': 'JFhmr_cVld'
-};
-import { themeable } from '@instructure/ui-themeable';
-export var MatchingType = (_dec = themeable({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+export var MatchingType = /*#__PURE__*/function (_Component) {
   _inherits(MatchingType, _Component);
 
   var _super = _createSuper(MatchingType);
@@ -46,22 +34,24 @@ export var MatchingType = (_dec = themeable({}, styles), _dec(_class = (_temp =
       var answerKeys = Object.keys(exampleAnswers);
       var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
       var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
-      var containerHalfWidth = orderedAnswerKeys.length <= 3;
-      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames(_defineProperty({}, styles.answerFrequencySummaryContainer, containerHalfWidth))
-      }, /*#__PURE__*/React.createElement(MatchingTypeTable, {
-        itemId: itemId,
-        answerSummary: answerSummary,
-        orderedAnswerKeys: orderedAnswerKeys,
-        orderedQuestionKeys: orderedQuestionKeys
-      })));
+      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), _class2.propTypes = {
+}(Component);
+MatchingType.propTypes = {
   itemId: PropTypes.number,
   answerSummary: matchingTypeAnswerSummaryPropType
-}.isRequired, _temp)) || _class);
+}.isRequired;

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

@@ -27,6 +27,7 @@ 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);
 
@@ -146,6 +147,8 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
       });
       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, {
@@ -154,7 +157,7 @@ export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (
         theme: {
           padding: '0 0 1px 0'
         }
-      }, question.body), answerCells);
+      }, questionBody), answerCells);
     };
 
     _this.render = function () {

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

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

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

@@ -5,7 +5,7 @@ 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 } from "./MatchingType/index.js";
+import { MatchingType, OrderingType } from "./MatchingType/index.js";
 import { answerSummaryPropType } from "../propTypes.js";
 export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
@@ -36,6 +36,10 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.matchingEnabled) {
         _this.afsTableComponentMap.set('matching', MatchingType);
       }
+
+      if (afsFlags.orderingEnabled) {
+        _this.afsTableComponentMap.set('ordering', OrderingType);
+      }
     };
 
     _this.render = function () {
@@ -75,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";

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

@@ -0,0 +1,73 @@
+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 PropTypes from 'prop-types';
+import { themeable } from '@instructure/ui-themeable';
+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'
+};
+import classNames from 'classnames';
+export var AfsPartsContainer = (_dec = themeable({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(AfsPartsContainer, _Component);
+
+  var _super = _createSuper(AfsPartsContainer);
+
+  function AfsPartsContainer() {
+    var _this;
+
+    _classCallCheck(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.createElement("div", {
+        className: classNames(styles.tableContainer, _defineProperty({}, styles.aggregateContainer, afsTable))
+      }, aggregationTable);
+    };
+
+    _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);
+    };
+
+    _this.render = function () {
+      var _this$props3 = _this.props,
+          afsTable = _this$props3.afsTable,
+          aggregationTable = _this$props3.aggregationTable;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, afsTable && _this.renderAfsTable(), aggregationTable && _this.renderAggregationTable());
+    };
+
+    return _this;
+  }
+
+  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/NewItemAnalysis/index.js

@@ -9,6 +9,7 @@ function mapStateToProps(_state) {
     afsFlags: {
       formulaEnabled: featureOn('ia_formula_afs'),
       matchingEnabled: featureOn('ia_matching_afs'),
+      orderingEnabled: featureOn('ia_ordering_afs'),
       hotSpotEnabled: featureOn('ia_hot_spot_afs')
     }
   };

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

@@ -16,17 +16,17 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { themeable } from '@instructure/ui-themeable';
 import Card from "../../../../../common/components/shared/Card/index.js";
 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'
 };
 import theme from "./theme.js";
 import classnames from 'classnames';

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

@@ -5,7 +5,7 @@ export default 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',

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',

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

@@ -10,7 +10,7 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "18.5.1-rc.9+7684e8663",
+  "version": "18.6.0",
   "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.5.1-rc.9+7684e8663",
-    "@instructure/quiz-i18n": "18.5.1-rc.9+7684e8663",
-    "@instructure/quiz-interactions": "18.5.1-rc.9+7684e8663",
-    "@instructure/quiz-number-input": "18.5.1-rc.9+7684e8663",
-    "@instructure/quiz-rce": "18.5.1-rc.9+7684e8663",
+    "@instructure/quiz-common": "^18.6.0",
+    "@instructure/quiz-i18n": "^18.6.0",
+    "@instructure/quiz-interactions": "^18.6.0",
+    "@instructure/quiz-number-input": "^18.6.0",
+    "@instructure/quiz-rce": "^18.6.0",
     "@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.5.1-rc.9+7684e8663",
+    "instructure-validations": "^18.6.0",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -141,7 +141,7 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@instructure/quiz-scripts": "18.5.0",
+    "@instructure/quiz-scripts": "^18.6.0",
     "@instructure/ui-axe-check": "^7.22.1",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-karma-config": "^7.22.1",
@@ -160,7 +160,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "18.5.1-rc.9+7684e8663",
+    "quiz-presets": "^18.6.0",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -176,5 +176,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7684e8663eece2857d4f080e80563f2a6f31de33"
+  "gitHead": "dddcaa8802c8344705537cacfbc0b9638c25be4c"
 }

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

@@ -1,5 +0,0 @@
-export default function generator() {
-  return {
-    tableBottomPadding: 0
-  };
-}

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

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator() {
-  return {
-    tableBottomPadding: 0
-  };
-}