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

package/es/common/util/Fetcher.js

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

package/es/reporting/api/getAnalysesExport.js

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

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

@@ -1,12 +1,24 @@
 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";
-export var AggregationType = /*#__PURE__*/function (_Component) {
+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) {
   _inherits(AggregationType, _Component);
 
   var _super = _createSuper(AggregationType);
@@ -26,18 +38,19 @@ export var AggregationType = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           answerSummary = _this$props.answerSummary,
           itemId = _this$props.itemId;
-      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AggregationTable, {
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.answerFrequencySummaryContainer)
+      }, /*#__PURE__*/React.createElement(AggregationTable, {
         itemId: itemId,
         answerSummary: answerSummary
-      }));
+      })));
     };
 
     return _this;
   }
 
   return AggregationType;
-}(Component);
-AggregationType.propTypes = {
+}(Component), _class2.propTypes = {
   itemId: PropTypes.number.isRequired,
   answerSummary: onlyAggregatePropType
-}.isRequired;
+}.isRequired, _temp)) || _class);

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

@@ -14,14 +14,16 @@ import PropTypes from 'prop-types';
 import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
 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'
 };
 import theme from "./theme.js";
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
+import classNames from 'classnames';
 export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceType, _Component);
 
@@ -76,7 +78,9 @@ export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(Table, {
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.answerFrequencySummaryContainer)
+      }, /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary')
       }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: spacingHeaderId,
@@ -91,7 +95,7 @@ export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices))));
+      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))));
     }
   }]);
 

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

@@ -0,0 +1,67 @@
+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) {
+  _inherits(MatchingType, _Component);
+
+  var _super = _createSuper(MatchingType);
+
+  function MatchingType() {
+    var _this;
+
+    _classCallCheck(this, MatchingType);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary;
+      var questions = answerSummary.questions;
+      var questionKeys = Object.keys(questions);
+      var exampleAnswers = questions[questionKeys[0]].answers;
+      var answerKeys = Object.keys(exampleAnswers);
+      var orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(answerSummary, answerKeys);
+      var orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(answerSummary, questionKeys, orderedAnswerKeys);
+      var 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
+      })));
+    };
+
+    return _this;
+  }
+
+  return MatchingType;
+}(Component), _class2.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: matchingTypeAnswerSummaryPropType
+}.isRequired, _temp)) || _class);

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

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

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

@@ -0,0 +1,180 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React, { Component } from 'react';
+import { Flex } from '@instructure/ui-flex';
+var styles = {
+  componentId: 'daSNV',
+  template: function template(theme) {
+    return "\n\n.daSNV_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.daSNV_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.daSNV_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.daSNV_EKAb svg{fill:#fff}\n\n.daSNV_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.daSNV_fvqY{border-radius:4px 4px 4px 4px;border-width:2px 2px 2px 2px}\n\n.daSNV_cVld{max-width:100%;width:calc(25% + 350px)}");
+  },
+  'tableWrapper': 'daSNV_rMrG',
+  'iconWrapper': 'daSNV_cvRx',
+  'iconCorrect': 'daSNV_EKAb',
+  'correctRowBorder': 'daSNV_tnta',
+  'correctRowBorderRadius': 'daSNV_fvqY',
+  'answerFrequencySummaryContainer': 'daSNV_cVld'
+};
+import t from '@instructure/quiz-i18n/es/format-message';
+import { Table } from '@instructure/ui-table';
+import { themeable } from '@instructure/ui-themeable';
+import PropTypes from 'prop-types';
+import { IconCheckSolid } from '@instructure/ui-icons';
+import { matchingTypeAnswerSummaryPropType } from "../../../propTypes.js";
+import classNames from 'classnames';
+import theme from "./theme.js";
+
+var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
+
+var _ref2 = /*#__PURE__*/React.createElement(Flex.Item, {
+  width: "46px",
+  textAlign: "center"
+});
+
+export var MatchingTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(MatchingTypeTable, _Component);
+
+  var _super = _createSuper(MatchingTypeTable);
+
+  function MatchingTypeTable() {
+    var _this;
+
+    _classCallCheck(this, MatchingTypeTable);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.renderIcon = function () {
+      var classes = classNames(styles.iconWrapper, styles.iconCorrect);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes
+      }, _ref);
+    };
+
+    _this.renderHeaderCell = function (key) {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      var questions = answerSummary.questions;
+      var questionKeys = Object.keys(questions);
+      var exampleAnswers = questions[questionKeys[0]].answers;
+      var answer = exampleAnswers[key];
+      var answerNumberHeaderId = "answer-number-header-".concat(key, "-").concat(itemId);
+      return /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: answerNumberHeaderId,
+        key: answerNumberHeaderId,
+        theme: {
+          padding: '0 0 15px 0'
+        },
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: "row"
+      }, _ref2, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        textAlign: "center"
+      }, answer.body)));
+    };
+
+    _this.renderCell = function (questionKey, answerKey) {
+      var _classNames;
+
+      var _this$props2 = _this.props,
+          answerSummary = _this$props2.answerSummary,
+          itemId = _this$props2.itemId;
+      var questions = answerSummary.questions;
+      var question = questions[questionKey];
+      var answer = question.answers[answerKey];
+      var correct = answer.correct,
+          count = answer.count;
+      var answerNumberCellId = "answer-number-cell-".concat(questionKey, "-").concat(answerKey, "-").concat(itemId);
+      var containerClassNames = classNames((_classNames = {}, _defineProperty(_classNames, styles.correctRowBorder, answer.correct), _defineProperty(_classNames, styles.correctRowBorderRadius, answer.correct), _classNames));
+      return /*#__PURE__*/React.createElement(Table.Cell, {
+        id: answerNumberCellId,
+        key: answerNumberCellId,
+        theme: {
+          padding: '0 0 0 0'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: containerClassNames
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: "row"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        width: "46px",
+        textAlign: "center"
+      }, correct && _this.renderIcon()), /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        width: "46px",
+        textAlign: "center"
+      }, count))));
+    };
+
+    _this.renderHeaderRow = function (orderedAnswerKeys) {
+      var itemId = _this.props.itemId;
+      var headerCells = orderedAnswerKeys.map(_this.renderHeaderCell);
+      var categoryHeaderId = "category-header-".concat(itemId);
+      var rowKey = "header-row-".concat(itemId);
+      return /*#__PURE__*/React.createElement(Table.Row, {
+        key: rowKey
+      }, /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: categoryHeaderId,
+        key: categoryHeaderId,
+        theme: {
+          padding: '0 0 15px 0'
+        },
+        textAlign: "start",
+        width: "250px"
+      }, t('Question')), headerCells);
+    };
+
+    _this.renderRow = function (orderedQuestionKey, orderedAnswerKeys) {
+      var _this$props3 = _this.props,
+          answerSummary = _this$props3.answerSummary,
+          itemId = _this$props3.itemId;
+      var questions = answerSummary.questions;
+      var question = questions[orderedQuestionKey];
+      var answerCells = orderedAnswerKeys.map(function (answerKey) {
+        return _this.renderCell(orderedQuestionKey, answerKey);
+      });
+      var questionRowHeaderId = "question-row-header-id-".concat(orderedQuestionKey, "-").concat(itemId);
+      var rowKey = "row-".concat(orderedQuestionKey, "-").concat(itemId);
+      return /*#__PURE__*/React.createElement(Table.Row, {
+        key: rowKey
+      }, /*#__PURE__*/React.createElement(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.createElement(Table, {
+        caption: t('Answer Frequency Summary')
+      }, /*#__PURE__*/React.createElement(Table.Head, null, _this.renderHeaderRow(orderedAnswerKeys)), /*#__PURE__*/React.createElement(Table.Body, null, orderedQuestionKeys.map(function (orderedQuestionKey) {
+        return _this.renderRow(orderedQuestionKey, orderedAnswerKeys);
+      })));
+    };
+
+    return _this;
+  }
+
+  return MatchingTypeTable;
+}(Component), _class2.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: matchingTypeAnswerSummaryPropType,
+  orderedAnswerKeys: PropTypes.array.isRequired,
+  orderedQuestionKeys: PropTypes.array.isRequired
+}.isRequired, _temp)) || _class);

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

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

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

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

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

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

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

@@ -5,6 +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 { answerSummaryPropType } from "../propTypes.js";
 export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
@@ -31,6 +32,10 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.hotSpotEnabled) {
         _this.afsTableComponentMap.set('hot-spot', AggregationType);
       }
+
+      if (afsFlags.matchingEnabled) {
+        _this.afsTableComponentMap.set('matching', MatchingType);
+      }
     };
 
     _this.render = function () {

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

@@ -2,7 +2,7 @@ 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, _temp;
+var _dec, _class, _class2, _temp;
 
 import React, { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
@@ -17,7 +17,8 @@ var styles = {
 import { themeable } from '@instructure/ui-themeable';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
-export var AfsTableWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = /*#__PURE__*/function (_Component) {
+import PropTypes from 'prop-types';
+export var AfsTableWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AfsTableWrapper, _Component);
 
   var _super = _createSuper(AfsTableWrapper);
@@ -34,22 +35,24 @@ export var AfsTableWrapper = (_dec = themeable(theme, styles), _dec(_class = (_t
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.render = function () {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
+      return /*#__PURE__*/React.createElement(Flex, {
         direction: "row"
       }, /*#__PURE__*/React.createElement(Flex.Item, {
         shouldGrow: true
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.tableWrapper
       }, /*#__PURE__*/React.createElement(Heading, {
-        margin: "0 x-large small 0",
+        margin: "x-large x-large x-large 0",
         level: "h3",
         weight: "bold",
         color: "primary"
-      }, t('Answer Frequency Summary')), _this.props.children))));
+      }, t('Answer Frequency Summary')), _this.props.children)));
     };
 
     return _this;
   }
 
   return AfsTableWrapper;
-}(Component), _temp)) || _class);
+}(Component), _class2.propTypes = {
+  children: PropTypes.node.isRequired
+}, _temp)) || _class);

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

@@ -14,27 +14,27 @@ import { IconCheckSolid, IconXSolid, IconNoSolid, IconOvalHalfSolid } from '@ins
 import { themeable } from '@instructure/ui-themeable';
 import theme from "./theme.js";
 var styles = {
-  componentId: 'eADot',
+  componentId: 'fuOpc',
   template: function template(theme) {
-    return "\n\n.eADot_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.eADot_fPIL table{border-collapse:separate;border-spacing:0 12px}\n\n.eADot_fPIL thead th{border-color:".concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.eADot_euQM{padding-left:10px}\n\n.eADot_fuuc{padding-left:45px}\n\n.eADot_bTFA{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.eADot_bvau{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.eADot_dmcW{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.eADot_cxOH{background-color:").concat(theme.colorRed || 'inherit', "}\n\n.eADot_xOeH{border-color:").concat(theme.colorBlue || 'inherit', "}\n\n.eADot_eRkO{background-color:").concat(theme.colorBlue || 'inherit', "}\n\n.eADot_dlLI{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.eADot_eKcq{background-color:").concat(theme.colorGrey || 'inherit', "}\n\n.eADot_vDgC svg{fill:#fff}\n\n.eADot_fHMm{border-color:").concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.eADot_WspM{border-radius:4px 0 0 4px;border-style:solid;border-width:2px 0 2px 2px}\n\n.eADot_fAnT{border-width:2px 0 2px 0}\n\n.eADot_bMPk,.eADot_fAnT{border-style:solid;padding:").concat(theme.cellPadding || 'inherit', "}\n\n.eADot_bMPk{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
+    return "\n\n.fuOpc_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.fuOpc_fPIL table{border-collapse:separate;border-spacing:0 12px}\n\n.fuOpc_fPIL thead th{border-color:".concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fuOpc_euQM{padding-left:10px}\n\n.fuOpc_fuuc{padding-left:45px}\n\n.fuOpc_bTFA{border-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fuOpc_bvau{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.fuOpc_dmcW{border-color:").concat(theme.colorRed || 'inherit', "}\n\n.fuOpc_cxOH{background-color:").concat(theme.colorRed || 'inherit', "}\n\n.fuOpc_xOeH{border-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fuOpc_eRkO{background-color:").concat(theme.colorBlue || 'inherit', "}\n\n.fuOpc_dlLI{border-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fuOpc_eKcq{background-color:").concat(theme.colorGrey || 'inherit', "}\n\n.fuOpc_vDgC svg{fill:#fff}\n\n.fuOpc_fHMm{border-color:").concat(theme.colorHeaderBottomBorder || 'inherit', ";border-style:solid;border-width:0 0 1px 0}\n\n.fuOpc_WspM{border-radius:4px 0 0 4px;border-style:solid;border-width:2px 0 2px 2px}\n\n.fuOpc_fAnT{border-width:2px 0 2px 0}\n\n.fuOpc_bMPk,.fuOpc_fAnT{border-style:solid;padding:").concat(theme.cellPadding || 'inherit', "}\n\n.fuOpc_bMPk{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
   },
-  'iconWrapper': 'eADot_cvRx',
-  'collapsingTable': 'eADot_fPIL',
-  'labelWrapper': 'eADot_euQM',
-  'firstHeaderCell': 'eADot_fuuc',
-  'correctBorder': 'eADot_bTFA',
-  'correctBackground': 'eADot_bvau',
-  'incorrectBorder': 'eADot_dmcW',
-  'incorrectBackground': 'eADot_cxOH',
-  'partialCorrectBorder': 'eADot_xOeH',
-  'partialCorrectBackground': 'eADot_eRkO',
-  'noAnswerBorder': 'eADot_dlLI',
-  'noAnswerBackground': 'eADot_eKcq',
-  'iconWhite': 'eADot_vDgC',
-  'headerCell': 'eADot_fHMm',
-  'firstCell': 'eADot_WspM',
-  'middleCell': 'eADot_fAnT',
-  'lastCell': 'eADot_bMPk'
+  'iconWrapper': 'fuOpc_cvRx',
+  'collapsingTable': 'fuOpc_fPIL',
+  'labelWrapper': 'fuOpc_euQM',
+  'firstHeaderCell': 'fuOpc_fuuc',
+  'correctBorder': 'fuOpc_bTFA',
+  'correctBackground': 'fuOpc_bvau',
+  'incorrectBorder': 'fuOpc_dmcW',
+  'incorrectBackground': 'fuOpc_cxOH',
+  'partialCorrectBorder': 'fuOpc_xOeH',
+  'partialCorrectBackground': 'fuOpc_eRkO',
+  'noAnswerBorder': 'fuOpc_dlLI',
+  'noAnswerBackground': 'fuOpc_eKcq',
+  'iconWhite': 'fuOpc_vDgC',
+  'headerCell': 'fuOpc_fHMm',
+  'firstCell': 'fuOpc_WspM',
+  'middleCell': 'fuOpc_fAnT',
+  'lastCell': 'fuOpc_bMPk'
 };
 import { Flex } from '@instructure/ui-flex';
 import classNames from 'classnames';

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

@@ -195,14 +195,12 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
     _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType, afsFlags) {
       return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement("div", {
         className: metricsClass
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.answerFrequencySummaryContainer
       }, /*#__PURE__*/React.createElement(AnswerFrequencySummary, {
         itemId: itemId,
         answerSummary: answer_summary,
         interactionType: interactionType,
         afsFlags: afsFlags
-      }))));
+      })));
     };
 
     return _this;

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

@@ -65,7 +65,18 @@ export var choiceTypeAnswerSummaryPropType = PropTypes.shape({
   })),
   no_answer: aggregateDetailPropType
 });
-export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType]);
+export var matchingTypeAnswerSummaryPropType = PropTypes.shape({
+  questions: PropTypes.objectOf(PropTypes.shape({
+    body: PropTypes.string,
+    answers: PropTypes.objectOf(PropTypes.shape({
+      count: PropTypes.number,
+      correct: PropTypes.bool,
+      body: PropTypes.string,
+      distractor: PropTypes.bool
+    }))
+  }))
+});
+export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType, matchingTypeAnswerSummaryPropType]);
 export var afsFlags = PropTypes.shape({
   formulaEnabled: PropTypes.bool.isRequired,
   matchingEnabled: PropTypes.bool.isRequired