@instructure/quiz-core 18.5.1-rc.0 → 18.5.1-rc.2

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisUpdateDate/index.js

@@ -33,7 +33,7 @@ export var AnalysisUpdateDate = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Flex, {
         direction: multiline ? 'column' : 'row',
         alignItems: "start"
-      }, /*#__PURE__*/React.createElement("b", null, t('Data Last Updated:'), "\xA0"), /*#__PURE__*/React.createElement("span", null, displayDateAndTimeInTimezone(date, timezone, locale))));
+      }, /*#__PURE__*/React.createElement("span", null, t('Data Last Updated:'), "\xA0"), /*#__PURE__*/React.createElement("span", null, displayDateAndTimeInTimezone(date, timezone, locale))));
     }
   }]);
 

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

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

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

@@ -0,0 +1,43 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AggregationTable from "../shared/AggregationTable/index.js";
+import { onlyAggregatePropType } from "../../propTypes.js";
+import { AfsTableWrapper } from "../shared/AfsTableWrapper/presenter.js";
+export var AggregationType = /*#__PURE__*/function (_Component) {
+  _inherits(AggregationType, _Component);
+
+  var _super = _createSuper(AggregationType);
+
+  function AggregationType() {
+    var _this;
+
+    _classCallCheck(this, AggregationType);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AggregationTable, {
+        itemId: itemId,
+        answerSummary: answerSummary
+      }));
+    };
+
+    return _this;
+  }
+
+  return AggregationType;
+}(Component);
+AggregationType.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  answerSummary: onlyAggregatePropType
+}.isRequired;

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

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

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

@@ -8,8 +8,6 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
-import { Flex } from '@instructure/ui-flex';
-import { Heading } from '@instructure/ui-heading';
 import { themeable } from '@instructure/ui-themeable';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import PropTypes from 'prop-types';
@@ -23,6 +21,7 @@ var styles = {
   'tableWrapper': 'ZuPLN_rMrG'
 };
 import theme from "./theme.js";
+import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
 export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceType, _Component);
 
@@ -77,19 +76,7 @@ export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
-        direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
-        shouldGrow: true
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.tableWrapper
-      }, /*#__PURE__*/React.createElement(Heading, {
-        margin: "large 0 small 0",
-        level: "h4",
-        theme: {
-          h4FontWeight: 'normal'
-        }
-      }, t('Answer Frequency Summary')), /*#__PURE__*/React.createElement(Table, {
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary')
       }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: spacingHeaderId,
@@ -104,7 +91,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/presenter.js

@@ -3,7 +3,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import { PropTypes } from '@instructure/quiz-interactions';
-import { ChoiceType } from "./ChoiceType/presenter.js";
+import ChoiceType from "./ChoiceType/index.js";
+import AggregationType from "./AggregationType/index.js";
 import { answerSummaryPropType } from "../propTypes.js";
 export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
   _inherits(AnswerFrequencySummary, _Component);
@@ -23,7 +24,8 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
     _this.afsTableComponentMap = new Map();
 
     _this.addAfsComponentsByFlags = function (afsFlags) {
-      if (afsFlags.formulaEnabled) {// this.afsTableComponentMap.set('formula', Formula)
+      if (afsFlags.formulaEnabled) {
+        _this.afsTableComponentMap.set('formula', AggregationType);
       }
     };
 
@@ -37,7 +39,7 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
 
       var AfsTableComponent = _this.afsTableComponentMap.get(interactionType);
 
-      if (!AfsTableComponent) {
+      if (!AfsTableComponent || !answerSummary) {
         return /*#__PURE__*/React.createElement(React.Fragment, null);
       }
 

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

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

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

@@ -0,0 +1,55 @@
+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;
+
+import React, { Component } from 'react';
+import t from '@instructure/quiz-i18n/es/format-message';
+import theme from "./theme.js";
+var styles = {
+  componentId: 'bmsWU',
+  template: function template(theme) {
+    return "\n\n.bmsWU_rMrG{display:flex;flex-basis:100%;flex-direction:column}";
+  },
+  'tableWrapper': 'bmsWU_rMrG'
+};
+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) {
+  _inherits(AfsTableWrapper, _Component);
+
+  var _super = _createSuper(AfsTableWrapper);
+
+  function AfsTableWrapper() {
+    var _this;
+
+    _classCallCheck(this, AfsTableWrapper);
+
+    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 () {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
+        direction: "row"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldGrow: true
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.tableWrapper
+      }, /*#__PURE__*/React.createElement(Heading, {
+        margin: "0 x-large small 0",
+        level: "h3",
+        weight: "bold",
+        color: "primary"
+      }, t('Answer Frequency Summary')), _this.props.children))));
+    };
+
+    return _this;
+  }
+
+  return AfsTableWrapper;
+}(Component), _temp)) || _class);

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

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

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

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

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

@@ -0,0 +1,186 @@
+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 t from '@instructure/quiz-i18n/es/format-message';
+import { Table } from '@instructure/ui-table';
+import { onlyAggregatePropType } from "../../../propTypes.js";
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import PropTypes from 'prop-types';
+import { IconCheckSolid, IconXSolid, IconNoSolid, IconOvalHalfSolid } from '@instructure/ui-icons';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+var styles = {
+  componentId: 'eADot',
+  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}");
+  },
+  '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'
+};
+import { Flex } from '@instructure/ui-flex';
+import classNames from 'classnames';
+import { Text } from '@instructure/ui-text';
+var noAnswerKey = 'noAnswer';
+var incorrectKey = 'incorrect';
+var correctKey = 'correct';
+var partialCorrectKey = 'partialCorrect';
+
+var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
+
+var _ref2 = /*#__PURE__*/React.createElement(IconOvalHalfSolid, null);
+
+var _ref3 = /*#__PURE__*/React.createElement(IconXSolid, null);
+
+var _ref4 = /*#__PURE__*/React.createElement(IconNoSolid, null);
+
+export var AggregationTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(AggregationTable, _Component);
+
+  var _super = _createSuper(AggregationTable);
+
+  function AggregationTable() {
+    var _this;
+
+    _classCallCheck(this, AggregationTable);
+
+    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.renderHeaderRow = function () {
+      var itemId = _this.props.itemId;
+      var answerHeaderId = "answer-frequency-summary-aggregate-answer-".concat(itemId);
+      var respondentsHeaderId = "answer-frequency-summary-aggregate-respondents-".concat(itemId);
+      var percentageHeaderId = "answer-frequency-summary-aggregate-percentage-".concat(itemId);
+      return /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: answerHeaderId
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classNames(styles.firstHeaderCell)
+      }, t('Result'))), /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: respondentsHeaderId,
+        textAlign: "center"
+      }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: percentageHeaderId,
+        textAlign: "center"
+      }, t('%'))));
+    };
+
+    _this.renderRow = function (key, icon, label, count, percentage) {
+      var borderColor = styles["".concat(key, "Border")];
+      var backgroundColor = styles["".concat(key, "Background")];
+      var concatenatedPercentage = "".concat(percentage, "%");
+      return /*#__PURE__*/React.createElement(Table.Row, {
+        key: key
+      }, /*#__PURE__*/React.createElement(Table.Cell, {
+        theme: {
+          padding: '0px'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.firstCell, borderColor)
+      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, label), /*#__PURE__*/React.createElement(Flex, {
+        direction: "row",
+        alignItems: "center",
+        height: "47px"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        width: "46px",
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.iconWrapper, styles.iconWhite, backgroundColor)
+      }, icon)), /*#__PURE__*/React.createElement(Flex.Item, {
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.labelWrapper)
+      }, /*#__PURE__*/React.createElement(Text, null, label)))))), /*#__PURE__*/React.createElement(Table.Cell, {
+        theme: {
+          padding: '0px'
+        },
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.middleCell, borderColor)
+      }, /*#__PURE__*/React.createElement(Text, null, count))), /*#__PURE__*/React.createElement(Table.Cell, {
+        theme: {
+          padding: '0px'
+        },
+        textAlign: "center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.lastCell, borderColor)
+      }, /*#__PURE__*/React.createElement(Text, null, concatenatedPercentage))));
+    };
+
+    _this.isPartialCorrectExist = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      return !!(aggregate === null || aggregate === void 0 ? void 0 : aggregate.partial_correct);
+    };
+
+    _this.renderCorrect = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      var correct = aggregate.correct;
+      var correctCount = correct.count || 0;
+      var correctPercentage = correct.percentage || 0;
+      var correctLabel = _this.isPartialCorrectExist() ? t('Answered fully correctly') : t('Answered correctly');
+      return _this.renderRow(correctKey, _ref, correctLabel, correctCount, correctPercentage);
+    };
+
+    _this.renderPartialCorrect = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      var partial_correct = aggregate.partial_correct;
+      var partialCorrectCount = partial_correct.count || 0;
+      var partialCorrectPercentage = partial_correct.percentage || 0;
+      var partialCorrectLabel = t('Answered partially correct');
+      return _this.renderRow(partialCorrectKey, _ref2, partialCorrectLabel, partialCorrectCount, partialCorrectPercentage);
+    };
+
+    _this.renderIncorrect = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      var incorrect = aggregate.incorrect;
+      var incorrectCount = incorrect.count || 0;
+      var incorrectPercentage = incorrect.percentage || 0;
+      var incorrectLabel = _this.isPartialCorrectExist() ? t('Answered fully incorrectly') : t('Answered incorrectly');
+      return _this.renderRow(incorrectKey, _ref3, incorrectLabel, incorrectCount, incorrectPercentage);
+    };
+
+    _this.renderNoAnswer = function () {
+      var no_answer = _this.props.answerSummary.no_answer;
+      var noAnswerCount = no_answer.count || 0;
+      var noAnswerPercentage = no_answer.percentage || 0;
+      var noAnswerLabel = t('No answer');
+      return _this.renderRow(noAnswerKey, _ref4, noAnswerLabel, noAnswerCount, noAnswerPercentage);
+    };
+
+    _this.render = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.collapsingTable)
+      }, /*#__PURE__*/React.createElement(Table, {
+        caption: t('Answer Frequency Summary Aggregates')
+      }, _this.renderHeaderRow(), /*#__PURE__*/React.createElement(Table.Body, null, _this.renderCorrect(), _this.isPartialCorrectExist() && _this.renderPartialCorrect(), _this.renderIncorrect(), _this.renderNoAnswer())));
+    };
+
+    return _this;
+  }
+
+  return AggregationTable;
+}(Component), _class2.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  answerSummary: onlyAggregatePropType
+}.isRequired, _temp)) || _class);

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

@@ -0,0 +1,10 @@
+export default function generator() {
+  return {
+    colorGreen: '#0b874b',
+    colorBlue: '#0574b5',
+    colorRed: '#e0061f',
+    colorGrey: '#6b7780',
+    colorHeaderBottomBorder: '#c7cdd1',
+    cellPadding: '13.5px 13.5px;'
+  };
+}

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

@@ -101,7 +101,6 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       return /*#__PURE__*/React.createElement(Heading, {
         margin: "0 x-large small 0",
         level: "h3",
-        weight: "bold",
         color: "primary"
       }, title);
     };
@@ -193,7 +192,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }))))));
     };
 
-    _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType) {
+    _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", {
@@ -248,7 +247,8 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
 
       var _this$props = this.props,
           showFrequencyTable = _this$props.showFrequencyTable,
-          itemAnalysis = _this$props.itemAnalysis;
+          itemAnalysis = _this$props.itemAnalysis,
+          afsFlags = _this$props.afsFlags;
       var answer_summary = itemAnalysis.answer_summary,
           metadata = itemAnalysis.metadata,
           scores = itemAnalysis.scores;
@@ -277,7 +277,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         padding: "small xx-small none none",
         overflowY: "hidden",
         size: !this.state.bodyExpanded ? '60px' : void 0
-      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType)));
+      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
     }
   }]);
 

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

@@ -122,17 +122,19 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
         width: "auto",
         margin: "auto",
         direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, _this.renderHeader()), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Flex, {
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, _this.renderHeader()), /*#__PURE__*/React.createElement(Flex.Item, {
+        margin: "0 0 0 auto"
+      }, /*#__PURE__*/React.createElement(Flex, {
         alignItems: "center",
+        justifyItems: "end",
         width: "auto",
-        margin: "auto",
-        direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
-        margin: "small"
-      }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+        direction: "row",
+        wrap: "wrap-reverse"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
         date: quizAnalysis === null || quizAnalysis === void 0 ? void 0 : quizAnalysis.created_timestamp
       })), /*#__PURE__*/React.createElement(Flex.Item, {
-        overflowY: "visible"
+        overflowY: "visible",
+        margin: "0 0 0 small"
       }, _this.renderGenerationButton()), /*#__PURE__*/React.createElement(Flex.Item, null, shouldShowError && /*#__PURE__*/React.createElement(Text, {
         size: "x-small",
         weight: "bold",
@@ -167,7 +169,7 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
 
     _this.renderStartGenerationButton = function () {
       return /*#__PURE__*/React.createElement(Button, {
-        color: "primary-inverse",
+        color: "secondary",
         margin: "0 0 x-small 0",
         onClick: _this.handleGeneration,
         theme: {

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

@@ -43,9 +43,18 @@ export var itemAnalysisPropType = PropTypes.shape({
   }),
   answer_summary: answerSummaryPropType
 });
-var noAnswerPropType = PropTypes.shape({
-  count: PropTypes.number,
-  percentage: PropTypes.number
+var aggregateDetailPropType = PropTypes.shape({
+  count: PropTypes.number.isRequired,
+  percentage: PropTypes.number.isRequired
+});
+var aggregatePropType = PropTypes.shape({
+  correct: aggregateDetailPropType.isRequired,
+  incorrect: aggregateDetailPropType.isRequired,
+  partial_correct: aggregateDetailPropType
+});
+export var onlyAggregatePropType = PropTypes.shape({
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
 });
 export var choiceTypeAnswerSummaryPropType = PropTypes.shape({
   choices: PropTypes.arrayOf(PropTypes.shape({
@@ -54,9 +63,9 @@ export var choiceTypeAnswerSummaryPropType = PropTypes.shape({
     count: PropTypes.number,
     percentage: PropTypes.number
   })),
-  no_answer: noAnswerPropType
+  no_answer: aggregateDetailPropType
 });
-export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType]);
+export var answerSummaryPropType = PropTypes.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType]);
 export var afsFlags = PropTypes.shape({
   formulaEnabled: PropTypes.bool.isRequired,
   matchingEnabled: PropTypes.bool.isRequired

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

@@ -53,7 +53,7 @@ var AnalysisUpdateDate = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         direction: multiline ? 'column' : 'row',
         alignItems: "start"
-      }, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Data Last Updated:'), "\xA0"), /*#__PURE__*/_react.default.createElement("span", null, (0, _formatTimespan.displayDateAndTimeInTimezone)(date, timezone, locale))));
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _formatMessage.default)('Data Last Updated:'), "\xA0"), /*#__PURE__*/_react.default.createElement("span", null, (0, _formatTimespan.displayDateAndTimeInTimezone)(date, timezone, locale))));
     }
   }]);
   AnalysisUpdateDate.displayName = "AnalysisUpdateDate";

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

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AggregationType = void 0;
+
+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 _index = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
+
+var _propTypes2 = require("../../propTypes.js");
+
+var _presenter = require("../shared/AfsTableWrapper/presenter.js");
+
+var AggregationType = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AggregationType, _Component);
+
+  var _super = (0, _createSuper2.default)(AggregationType);
+
+  function AggregationType() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AggregationType);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          answerSummary = _this$props.answerSummary,
+          itemId = _this$props.itemId;
+      return /*#__PURE__*/_react.default.createElement(_presenter.AfsTableWrapper, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+        itemId: itemId,
+        answerSummary: answerSummary
+      }));
+    };
+
+    return _this;
+  }
+
+  return AggregationType;
+}(_react.Component);
+
+exports.AggregationType = AggregationType;
+AggregationType.propTypes = {
+  itemId: _propTypes.default.number.isRequired,
+  answerSummary: _propTypes2.onlyAggregatePropType
+}.isRequired;

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

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

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

@@ -23,10 +23,6 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _uiTable = require("@instructure/ui-table");
 
-var _uiFlex = require("@instructure/ui-flex");
-
-var _uiHeading = require("@instructure/ui-heading");
-
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
@@ -39,6 +35,8 @@ var _propTypes2 = require("../../propTypes.js");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _index2 = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
@@ -102,19 +100,7 @@ var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        direction: "row"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        shouldGrow: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.tableWrapper
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        margin: "large 0 small 0",
-        level: "h4",
-        theme: {
-          h4FontWeight: 'normal'
-        }
-      }, (0, _formatMessage.default)('Answer Frequency Summary')), /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      return /*#__PURE__*/_react.default.createElement(_index2.default, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Answer Frequency Summary')
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: spacingHeaderId,
@@ -129,7 +115,7 @@ var ChoiceType = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))))));
+      }, (0, _formatMessage.default)('%')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices))));
     }
   }]);
   ChoiceType.displayName = "ChoiceType";

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

@@ -19,7 +19,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
-var _presenter = require("./ChoiceType/presenter.js");
+var _index = _interopRequireDefault(require("./ChoiceType/index.js"));
+
+var _index2 = _interopRequireDefault(require("./AggregationType/index.js"));
 
 var _propTypes = require("../propTypes.js");
 
@@ -41,7 +43,8 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
     _this.afsTableComponentMap = new Map();
 
     _this.addAfsComponentsByFlags = function (afsFlags) {
-      if (afsFlags.formulaEnabled) {// this.afsTableComponentMap.set('formula', Formula)
+      if (afsFlags.formulaEnabled) {
+        _this.afsTableComponentMap.set('formula', _index2.default);
       }
     };
 
@@ -55,7 +58,7 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
 
       var AfsTableComponent = _this.afsTableComponentMap.get(interactionType);
 
-      if (!AfsTableComponent) {
+      if (!AfsTableComponent || !answerSummary) {
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
       }
 
@@ -65,11 +68,11 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       });
     };
 
-    _this.afsTableComponentMap.set('true-false', _presenter.ChoiceType);
+    _this.afsTableComponentMap.set('true-false', _index.default);
 
-    _this.afsTableComponentMap.set('choice', _presenter.ChoiceType);
+    _this.afsTableComponentMap.set('choice', _index.default);
 
-    _this.afsTableComponentMap.set('multi-answer', _presenter.ChoiceType);
+    _this.afsTableComponentMap.set('multi-answer', _index.default);
 
     return _this;
   }

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

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AfsTableWrapper = void 0;
+
+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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _dec, _class, _temp;
+
+var styles = {
+  componentId: 'bmsWU',
+  template: function template(theme) {
+    return "\n\n.bmsWU_rMrG{display:flex;flex-basis:100%;flex-direction:column}";
+  },
+  'tableWrapper': 'bmsWU_rMrG'
+};
+var AfsTableWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AfsTableWrapper, _Component);
+
+  var _super = (0, _createSuper2.default)(AfsTableWrapper);
+
+  function AfsTableWrapper() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AfsTableWrapper);
+
+    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 () {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldGrow: true
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.tableWrapper
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        margin: "0 x-large small 0",
+        level: "h3",
+        weight: "bold",
+        color: "primary"
+      }, (0, _formatMessage.default)('Answer Frequency Summary')), _this.props.children))));
+    };
+
+    return _this;
+  }
+
+  return AfsTableWrapper;
+}(_react.Component), _temp)) || _class);
+exports.AfsTableWrapper = AfsTableWrapper;

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

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

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

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

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AggregationTable = void 0;
+
+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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiTable = require("@instructure/ui-table");
+
+var _propTypes = require("../../../propTypes.js");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'eADot',
+  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}");
+  },
+  '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'
+};
+var noAnswerKey = 'noAnswer';
+var incorrectKey = 'incorrect';
+var correctKey = 'correct';
+var partialCorrectKey = 'partialCorrect';
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconOvalHalfSolid, null);
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconXSolid, null);
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconNoSolid, null);
+
+var AggregationTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AggregationTable, _Component);
+
+  var _super = (0, _createSuper2.default)(AggregationTable);
+
+  function AggregationTable() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AggregationTable);
+
+    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.renderHeaderRow = function () {
+      var itemId = _this.props.itemId;
+      var answerHeaderId = "answer-frequency-summary-aggregate-answer-".concat(itemId);
+      var respondentsHeaderId = "answer-frequency-summary-aggregate-respondents-".concat(itemId);
+      var percentageHeaderId = "answer-frequency-summary-aggregate-percentage-".concat(itemId);
+      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: answerHeaderId
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _classnames.default)(styles.firstHeaderCell)
+      }, (0, _formatMessage.default)('Result'))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: respondentsHeaderId,
+        textAlign: "center"
+      }, (0, _formatMessage.default)('Respondents')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: percentageHeaderId,
+        textAlign: "center"
+      }, (0, _formatMessage.default)('%'))));
+    };
+
+    _this.renderRow = function (key, icon, label, count, percentage) {
+      var borderColor = styles["".concat(key, "Border")];
+      var backgroundColor = styles["".concat(key, "Background")];
+      var concatenatedPercentage = "".concat(percentage, "%");
+      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+        key: key
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+        theme: {
+          padding: '0px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.firstCell, borderColor)
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, label), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "row",
+        alignItems: "center",
+        height: "47px"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        width: "46px",
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.iconWrapper, styles.iconWhite, backgroundColor)
+      }, icon)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.labelWrapper)
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, label)))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+        theme: {
+          padding: '0px'
+        },
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.middleCell, borderColor)
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, count))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+        theme: {
+          padding: '0px'
+        },
+        textAlign: "center"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.lastCell, borderColor)
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, concatenatedPercentage))));
+    };
+
+    _this.isPartialCorrectExist = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      return !!(aggregate === null || aggregate === void 0 ? void 0 : aggregate.partial_correct);
+    };
+
+    _this.renderCorrect = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      var correct = aggregate.correct;
+      var correctCount = correct.count || 0;
+      var correctPercentage = correct.percentage || 0;
+      var correctLabel = _this.isPartialCorrectExist() ? (0, _formatMessage.default)('Answered fully correctly') : (0, _formatMessage.default)('Answered correctly');
+      return _this.renderRow(correctKey, _ref, correctLabel, correctCount, correctPercentage);
+    };
+
+    _this.renderPartialCorrect = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      var partial_correct = aggregate.partial_correct;
+      var partialCorrectCount = partial_correct.count || 0;
+      var partialCorrectPercentage = partial_correct.percentage || 0;
+      var partialCorrectLabel = (0, _formatMessage.default)('Answered partially correct');
+      return _this.renderRow(partialCorrectKey, _ref2, partialCorrectLabel, partialCorrectCount, partialCorrectPercentage);
+    };
+
+    _this.renderIncorrect = function () {
+      var aggregate = _this.props.answerSummary.aggregate;
+      var incorrect = aggregate.incorrect;
+      var incorrectCount = incorrect.count || 0;
+      var incorrectPercentage = incorrect.percentage || 0;
+      var incorrectLabel = _this.isPartialCorrectExist() ? (0, _formatMessage.default)('Answered fully incorrectly') : (0, _formatMessage.default)('Answered incorrectly');
+      return _this.renderRow(incorrectKey, _ref3, incorrectLabel, incorrectCount, incorrectPercentage);
+    };
+
+    _this.renderNoAnswer = function () {
+      var no_answer = _this.props.answerSummary.no_answer;
+      var noAnswerCount = no_answer.count || 0;
+      var noAnswerPercentage = no_answer.percentage || 0;
+      var noAnswerLabel = (0, _formatMessage.default)('No answer');
+      return _this.renderRow(noAnswerKey, _ref4, noAnswerLabel, noAnswerCount, noAnswerPercentage);
+    };
+
+    _this.render = function () {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.collapsingTable)
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+        caption: (0, _formatMessage.default)('Answer Frequency Summary Aggregates')
+      }, _this.renderHeaderRow(), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this.renderCorrect(), _this.isPartialCorrectExist() && _this.renderPartialCorrect(), _this.renderIncorrect(), _this.renderNoAnswer())));
+    };
+
+    return _this;
+  }
+
+  return AggregationTable;
+}(_react.Component), _class2.propTypes = {
+  itemId: _propTypes2.default.number.isRequired,
+  answerSummary: _propTypes.onlyAggregatePropType
+}.isRequired, _temp)) || _class);
+exports.AggregationTable = AggregationTable;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/AggregationTable/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {
+    colorGreen: '#0b874b',
+    colorBlue: '#0574b5',
+    colorRed: '#e0061f',
+    colorGrey: '#6b7780',
+    colorHeaderBottomBorder: '#c7cdd1',
+    cellPadding: '13.5px 13.5px;'
+  };
+}

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

@@ -136,7 +136,6 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       return /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         margin: "0 x-large small 0",
         level: "h3",
-        weight: "bold",
         color: "primary"
       }, title);
     };
@@ -228,7 +227,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }))))));
     };
 
-    _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType) {
+    _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType, afsFlags) {
       return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement("div", {
         className: metricsClass
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -237,7 +236,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         itemId: itemId,
         answerSummary: answer_summary,
         interactionType: interactionType,
-        afsFlags: _propTypes.afsFlags
+        afsFlags: afsFlags
       }))));
     };
 
@@ -283,7 +282,8 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
       var _this$props = this.props,
           showFrequencyTable = _this$props.showFrequencyTable,
-          itemAnalysis = _this$props.itemAnalysis;
+          itemAnalysis = _this$props.itemAnalysis,
+          afsFlags = _this$props.afsFlags;
       var answer_summary = itemAnalysis.answer_summary,
           metadata = itemAnalysis.metadata,
           scores = itemAnalysis.scores;
@@ -312,7 +312,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         padding: "small xx-small none none",
         overflowY: "hidden",
         size: !this.state.bodyExpanded ? '60px' : void 0
-      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType)));
+      }, this.renderRichContent(metadata.item_body, itemBodyClass, itemId)))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderMetrics(scores, metricsClass)))), showFrequencyTable && this.renderAnswerSummaryTable(itemId, answer_summary, metricsClass, interactionType, afsFlags)));
     }
   }]);
   NewItemAnalysis.displayName = "NewItemAnalysis";

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

@@ -153,17 +153,19 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
         width: "auto",
         margin: "auto",
         direction: "row"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, _this.renderHeader()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, _this.renderHeader()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        margin: "0 0 0 auto"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         alignItems: "center",
+        justifyItems: "end",
         width: "auto",
-        margin: "auto",
-        direction: "row"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        margin: "small"
-      }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
+        direction: "row",
+        wrap: "wrap-reverse"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
         date: quizAnalysis === null || quizAnalysis === void 0 ? void 0 : quizAnalysis.created_timestamp
       })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-        overflowY: "visible"
+        overflowY: "visible",
+        margin: "0 0 0 small"
       }, _this.renderGenerationButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, shouldShowError && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "x-small",
         weight: "bold",
@@ -198,7 +200,7 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
 
     _this.renderStartGenerationButton = function () {
       return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        color: "primary-inverse",
+        color: "secondary",
         margin: "0 0 x-small 0",
         onClick: _this.handleGeneration,
         theme: {

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.afsFlags = exports.answerSummaryPropType = exports.choiceTypeAnswerSummaryPropType = exports.itemAnalysisPropType = exports.quizAnalysisPropType = void 0;
+exports.afsFlags = exports.answerSummaryPropType = exports.choiceTypeAnswerSummaryPropType = exports.onlyAggregatePropType = exports.itemAnalysisPropType = exports.quizAnalysisPropType = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -59,11 +59,24 @@ var itemAnalysisPropType = _propTypes.default.shape({
 
 exports.itemAnalysisPropType = itemAnalysisPropType;
 
-var noAnswerPropType = _propTypes.default.shape({
-  count: _propTypes.default.number,
-  percentage: _propTypes.default.number
+var aggregateDetailPropType = _propTypes.default.shape({
+  count: _propTypes.default.number.isRequired,
+  percentage: _propTypes.default.number.isRequired
 });
 
+var aggregatePropType = _propTypes.default.shape({
+  correct: aggregateDetailPropType.isRequired,
+  incorrect: aggregateDetailPropType.isRequired,
+  partial_correct: aggregateDetailPropType
+});
+
+var onlyAggregatePropType = _propTypes.default.shape({
+  no_answer: aggregateDetailPropType,
+  aggregate: aggregatePropType
+});
+
+exports.onlyAggregatePropType = onlyAggregatePropType;
+
 var choiceTypeAnswerSummaryPropType = _propTypes.default.shape({
   choices: _propTypes.default.arrayOf(_propTypes.default.shape({
     body: _propTypes.default.string,
@@ -71,12 +84,12 @@ var choiceTypeAnswerSummaryPropType = _propTypes.default.shape({
     count: _propTypes.default.number,
     percentage: _propTypes.default.number
   })),
-  no_answer: noAnswerPropType
+  no_answer: aggregateDetailPropType
 });
 
 exports.choiceTypeAnswerSummaryPropType = choiceTypeAnswerSummaryPropType;
 
-var answerSummaryPropType = _propTypes.default.oneOfType([choiceTypeAnswerSummaryPropType]);
+var answerSummaryPropType = _propTypes.default.oneOfType([choiceTypeAnswerSummaryPropType, onlyAggregatePropType]);
 
 exports.answerSummaryPropType = answerSummaryPropType;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "18.5.1-rc.0+bbf9e57c3",
+  "version": "18.5.1-rc.2+7e05172cf",
   "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.0+bbf9e57c3",
-    "@instructure/quiz-i18n": "18.5.1-rc.0+bbf9e57c3",
-    "@instructure/quiz-interactions": "18.5.1-rc.0+bbf9e57c3",
-    "@instructure/quiz-number-input": "18.5.1-rc.0+bbf9e57c3",
-    "@instructure/quiz-rce": "18.5.1-rc.0+bbf9e57c3",
+    "@instructure/quiz-common": "18.5.1-rc.2+7e05172cf",
+    "@instructure/quiz-i18n": "18.5.1-rc.2+7e05172cf",
+    "@instructure/quiz-interactions": "18.5.1-rc.2+7e05172cf",
+    "@instructure/quiz-number-input": "18.5.1-rc.2+7e05172cf",
+    "@instructure/quiz-rce": "18.5.1-rc.2+7e05172cf",
     "@instructure/ui-a11y-content": "^7.22.1",
     "@instructure/ui-alerts": "^7.22.1",
     "@instructure/ui-avatar": "^7.22.1",
@@ -108,7 +108,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "18.5.1-rc.0+bbf9e57c3",
+    "instructure-validations": "18.5.1-rc.2+7e05172cf",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -159,7 +159,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "18.5.1-rc.0+bbf9e57c3",
+    "quiz-presets": "18.5.1-rc.2+7e05172cf",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -175,5 +175,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bbf9e57c353867de3ee4f9aea3b1f5de00445428"
+  "gitHead": "7e05172cfb3460af3f9231c0e072898116415f40"
 }