@instructure/quiz-core 20.7.1-rc.9 → 20.8.1-rc.0

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/{shared → RichFillBlankType}/ChoiceGroupTypeTable/presenter.js

@@ -23,15 +23,11 @@ var _uiFlex = require("@instructure/ui-flex");
 
 var _uiText = require("@instructure/ui-text");
 
-var _index = _interopRequireDefault(require("../../../../../../../common/components/shared/ExpandButton/index.js"));
-
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _index2 = _interopRequireDefault(require("../../../../../../../common/components/shared/Card/index.js"));
-
-var _index3 = _interopRequireDefault(require("../ChoiceTypeTable/index.js"));
+var _index = _interopRequireDefault(require("../../shared/ChoiceTypeTable/index.js"));
 
-var _index4 = _interopRequireDefault(require("../../../NewItemAnalysis/BlankIcon/index.js"));
+var _index2 = _interopRequireDefault(require("../../../NewItemAnalysis/BlankIcon/index.js"));
 
 var _emotion = require("@instructure/emotion");
 
@@ -39,6 +35,8 @@ var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
+var _index3 = _interopRequireDefault(require("../../shared/ExpandableCard/index.js"));
+
 var _dec, _class, _class2, _temp;
 
 var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
@@ -80,10 +78,19 @@ var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _the
       return (0, _formatMessage.default)('There are no entries for this open entry question.');
     };
 
-    _this.handleBodyToggle = function () {
-      _this.setState({
-        bodyExpanded: !_this.state.bodyExpanded
-      });
+    _this.renderBlankInfo = function () {
+      var _blank$aggregate, _blank$aggregate2;
+
+      var blank = _this.props.blank;
+      var correctCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate = blank.aggregate) === null || _blank$aggregate === void 0 ? void 0 : _blank$aggregate.correct) || 0;
+      var incorrectCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate2 = blank.aggregate) === null || _blank$aggregate2 === void 0 ? void 0 : _blank$aggregate2.incorrect) || 0;
+      var noAnswer = (blank === null || blank === void 0 ? void 0 : blank.no_answer) || 0;
+      var correctString = "".concat((0, _formatMessage.default)('Correct'), ": ").concat(correctCount, " ");
+      var incorrectString = "".concat((0, _formatMessage.default)('Incorrect'), ": ").concat(incorrectCount, " ");
+      var noAnswerString = "".concat((0, _formatMessage.default)('No Answer'), ": ").concat(noAnswer, " ");
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, (0, _emotion.jsx)(_uiText.Text, null, correctString), (0, _emotion.jsx)(_uiText.Text, null, incorrectString), (0, _emotion.jsx)(_uiText.Text, null, noAnswerString));
     };
 
     _this.renderTable = function () {
@@ -94,7 +101,7 @@ var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _the
       var choices = blank.choices;
       var tableId = "".concat(itemId, "_").concat(index, "_choiceGroup");
       var tableContainerSizeClass = '';
-      return (0, _emotion.jsx)(_index3.default, {
+      return (0, _emotion.jsx)(_index.default, {
         itemId: tableId,
         choices: choices,
         tableContainerSizeClass: tableContainerSizeClass
@@ -104,16 +111,14 @@ var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _the
     _this.renderBlankIcon = function () {
       var index = _this.props.index;
       var blankIconKey = "blank_icon_".concat(index);
-      return (0, _emotion.jsx)(_index4.default, {
+      return (0, _emotion.jsx)(_index2.default, {
         key: blankIconKey,
         number: index + 1
       });
     };
 
     _this.renderHeadLine = function () {
-      var _this$props2 = _this.props,
-          blank = _this$props2.blank,
-          blankInfo = _this$props2.blankInfo;
+      var blank = _this.props.blank;
       var blank_text = blank.blank_text,
           blank_type = blank.blank_type;
       var blankTextAndType = "".concat(blank_text, " (").concat(_this.getTranslatedBlankType(blank_type), ")");
@@ -129,24 +134,7 @@ var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _the
       }, blankTextAndType)), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         margin: "xxx-small none small none"
-      }, blankInfo));
-    };
-
-    _this.renderGroup = function () {
-      return (0, _emotion.jsx)(_uiFlex.Flex, {
-        direction: "row",
-        alignItems: "start"
-      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
-        shouldShrink: true,
-        shouldGrow: true,
-        margin: "xx-small none none none"
-      }, _this.renderHeadLine()), (0, _emotion.jsx)(_uiFlex.Flex.Item, {
-        margin: "none none none x-small"
-      }, (0, _emotion.jsx)(_index.default, {
-        onClick: _this.handleBodyToggle,
-        title: _this.state.bodyExpanded ? (0, _formatMessage.default)('collapse group result') : (0, _formatMessage.default)('expand group result'),
-        isExpanded: _this.state.bodyExpanded
-      })));
+      }, _this.renderBlankInfo()));
     };
 
     _this.renderEmptyInfo = function () {
@@ -156,41 +144,17 @@ var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _the
       }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldShrink: true,
         shouldGrow: true,
-        padding: "none none x-small small"
+        padding: "none none x-small none"
       }, (0, _emotion.jsx)(_uiText.Text, null, _this.getTranslatedEmptyMessage())));
     };
 
     _this.render = function () {
-      var _this$props3 = _this.props,
-          styles = _this$props3.styles,
-          blank = _this$props3.blank;
-      var groupWrapper = styles.groupWrapper,
-          cardWrapper = styles.cardWrapper;
+      var blank = _this.props.blank;
       var areThereChoices = Array.isArray(blank.choices) && blank.choices.length > 0;
-      var bodyExpanded = _this.state.bodyExpanded;
-      return (0, _emotion.jsx)("div", {
-        css: groupWrapper
-      }, (0, _emotion.jsx)(_index2.default, {
-        css: cardWrapper
-      }, (0, _emotion.jsx)(_uiFlex.Flex, {
-        direction: "column",
-        justifyItems: "start"
-      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
-        overflowY: "visible"
-      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
-        shouldGrow: true,
-        shouldShrink: true
-      }, (0, _emotion.jsx)(_uiFlex.Flex, {
-        direction: "column",
-        justifyItems: "start"
-      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
-        shouldShrink: true,
-        padding: "x-small small x-small medium",
-        overflowY: "hidden"
-      }, _this.renderGroup()), bodyExpanded && (0, _emotion.jsx)(_uiFlex.Flex.Item, {
-        shouldShrink: true,
-        padding: "x-small small x-small small"
-      }, areThereChoices ? _this.renderTable() : _this.renderEmptyInfo())))))));
+      return (0, _emotion.jsx)(_index3.default, {
+        content: areThereChoices ? _this.renderTable() : _this.renderEmptyInfo(),
+        headLine: _this.renderHeadLine()
+      });
     };
 
     return _this;
@@ -204,7 +168,6 @@ var ChoiceGroupTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _the
     blank_text: _propTypes.default.string.isRequired,
     blank_type: _propTypes.default.string.isRequired
   }).isRequired,
-  blankInfo: _propTypes.default.node,
   index: _propTypes.default.number.isRequired,
   styles: _propTypes.default.object
 }.isRequired, _temp)) || _class);

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/RichFillBlankType/ChoiceGroupTypeTable/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    groupAggregationContainer: {
+      display: 'flex',
+      gap: componentTheme.aggregateSpacing
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -13,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,23 +25,11 @@ var _index = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"
 
 var _presenter = require("../shared/AfsPartsContainer/presenter.js");
 
-var _index2 = _interopRequireDefault(require("../shared/ChoiceGroupTypeTable/index.js"));
-
-var _uiText = require("@instructure/ui-text");
-
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+var _index2 = _interopRequireDefault(require("./ChoiceGroupTypeTable/index.js"));
 
 var _index3 = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
 
-var _emotion = require("@instructure/emotion");
-
-var _styles = _interopRequireDefault(require("./styles.js"));
-
-var _theme = _interopRequireDefault(require("./theme.js"));
-
-var _dec, _class, _class2, _temp;
-
-var RichFillBlankType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var RichFillBlankType = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(RichFillBlankType, _Component);
 
   var _super = (0, _createSuper2.default)(RichFillBlankType);
@@ -55,26 +45,11 @@ var RichFillBlankType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.renderBlankInfo = function (blank) {
-      var _blank$aggregate, _blank$aggregate2;
-
-      var correctCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate = blank.aggregate) === null || _blank$aggregate === void 0 ? void 0 : _blank$aggregate.correct) || 0;
-      var incorrectCount = (blank === null || blank === void 0 ? void 0 : (_blank$aggregate2 = blank.aggregate) === null || _blank$aggregate2 === void 0 ? void 0 : _blank$aggregate2.incorrect) || 0;
-      var noAnswer = (blank === null || blank === void 0 ? void 0 : blank.no_answer) || 0;
-      var correctString = "".concat((0, _formatMessage.default)('Correct'), ": ").concat(correctCount, " ");
-      var incorrectString = "".concat((0, _formatMessage.default)('Incorrect'), ": ").concat(incorrectCount, " ");
-      var noAnswerString = "".concat((0, _formatMessage.default)('No Answer'), ": ").concat(noAnswer, " ");
-      return (0, _emotion.jsx)("div", {
-        css: _this.props.styles.groupAggregationContainer
-      }, (0, _emotion.jsx)(_uiText.Text, null, correctString), (0, _emotion.jsx)(_uiText.Text, null, incorrectString), (0, _emotion.jsx)(_uiText.Text, null, noAnswerString));
-    };
-
     _this.renderGroup = function (key, itemId, blank, index) {
-      return (0, _emotion.jsx)(_index2.default, {
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
         key: key,
         itemId: itemId,
         blank: blank,
-        blankInfo: _this.renderBlankInfo(blank),
         index: index
       });
     };
@@ -85,7 +60,7 @@ var RichFillBlankType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
           itemId = _this$props.itemId;
       var blanks = answerSummary.blanks;
       return blanks.map(function (blank, index) {
-        var key = "ChoiceGroupTypeTable_".concat(index);
+        var key = "ChoiceGroupTypeTable_".concat(itemId, "_").concat(index);
         return _this.renderGroup(key, itemId, blank, index);
       });
     };
@@ -94,9 +69,9 @@ var RichFillBlankType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       var _this$props2 = _this.props,
           answerSummary = _this$props2.answerSummary,
           itemId = _this$props2.itemId;
-      return (0, _emotion.jsx)(_index.default, null, (0, _emotion.jsx)(_presenter.AfsPartsContainer, {
+      return /*#__PURE__*/_react.default.createElement(_index.default, null, /*#__PURE__*/_react.default.createElement(_presenter.AfsPartsContainer, {
         afsTable: _this.renderGroups(),
-        aggregationTable: (0, _emotion.jsx)(_index3.default, {
+        aggregationTable: /*#__PURE__*/_react.default.createElement(_index3.default, {
           itemId: itemId,
           answerSummary: answerSummary
         })
@@ -107,9 +82,10 @@ var RichFillBlankType = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
   }
 
   return RichFillBlankType;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component);
+
+exports.RichFillBlankType = RichFillBlankType;
+RichFillBlankType.propTypes = {
   itemId: _propTypes.default.number.isRequired,
-  answerSummary: _propTypes2.richFillBlankTypeAnswerSummaryPropType.isRequired,
-  styles: _propTypes.default.object
-}.isRequired, _temp)) || _class);
-exports.RichFillBlankType = RichFillBlankType;
+  answerSummary: _propTypes2.richFillBlankTypeAnswerSummaryPropType.isRequired
+}.isRequired;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ScoreDistributionType/Table/index.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ScoreDistributionTypeTable = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _propTypes = require("../../../propTypes.js");
+
+var _react = require("react");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiTable = require("@instructure/ui-table");
+
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var ScoreDistributionTypeTable = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ScoreDistributionTypeTable, _Component);
+
+  var _super = (0, _createSuper2.default)(ScoreDistributionTypeTable);
+
+  function ScoreDistributionTypeTable() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ScoreDistributionTypeTable);
+
+    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.renderFirstCell = function (content) {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.firstTextContainer
+      }, content);
+    };
+
+    _this.renderCell = function (content) {
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.textContainer
+      }, content);
+    };
+
+    _this.renderRow = function (choice, choiceIndex) {
+      var count = choice.count,
+          score = choice.score,
+          percentage = choice.percentage;
+      return (0, _emotion.jsx)(_uiTable.Table.Row, {
+        key: choiceIndex
+      }, (0, _emotion.jsx)(_uiTable.Table.Cell, {
+        themeOverride: {
+          padding: '0'
+        }
+      }, _this.renderFirstCell(score)), (0, _emotion.jsx)(_uiTable.Table.Cell, {
+        themeOverride: {
+          padding: '0'
+        }
+      }, _this.renderCell(count)), (0, _emotion.jsx)(_uiTable.Table.Cell, {
+        themeOverride: {
+          padding: '0'
+        },
+        textAlign: "center"
+      }, _this.renderCell("".concat(percentage, "%"))));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ScoreDistributionTypeTable, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          scores = _this$props.scores,
+          itemId = _this$props.itemId,
+          styles = _this$props.styles;
+      var pointsHeaderId = "answer-frequency-summary-points-".concat(itemId);
+      var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
+      var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
+      return (0, _emotion.jsx)("div", {
+        css: styles.tableContainer
+      }, (0, _emotion.jsx)(_uiTable.Table, {
+        caption: (0, _formatMessage.default)('Score Frequency Summary'),
+        elementRef: this.setTableRef
+      }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
+        id: pointsHeaderId,
+        height: "47px"
+      }, (0, _formatMessage.default)('Points')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
+        id: respondentsHeaderId,
+        height: "47px",
+        textAlign: "center"
+      }, (0, _formatMessage.default)('Respondents')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
+        id: percentageHeaderId,
+        height: "47px",
+        textAlign: "center"
+      }, (0, _formatMessage.default)('%')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, scores.map(this.renderRow))));
+    }
+  }]);
+  ScoreDistributionTypeTable.displayName = "ScoreDistributionTypeTable";
+  return ScoreDistributionTypeTable;
+}(_react.Component), _class2.propTypes = {
+  itemId: _propTypes2.default.number.isRequired,
+  scores: _propTypes2.default.arrayOf(_propTypes.scoreDistributionType).isRequired,
+  // eslint-disable-next-line react/require-default-props
+  makeStyles: _propTypes2.default.func,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes2.default.object
+}, _temp)) || _class);
+exports.ScoreDistributionTypeTable = ScoreDistributionTypeTable;
+var _default = ScoreDistributionTypeTable;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ScoreDistributionType/Table/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  var borderBottom = "solid 0.0625rem ".concat(componentTheme.colorGray);
+  return {
+    tableContainer: {
+      width: 'calc(25% + 350px)',
+      maxWidth: '100%',
+      '& table': {
+        borderCollapse: 'separate',
+        borderSpacing: '0 1px',
+        '& thead tr': {
+          '& th, & td': {
+            borderBottom: borderBottom
+          }
+        },
+        '& tbody tr': {
+          '& th, & td': {
+            width: '33.33%',
+            borderBottom: borderBottom
+          },
+          '& th': {
+            fontWeight: 400
+          }
+        }
+      }
+    },
+    textContainer: {
+      height: 'calc(100% - 4px)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    firstTextContainer: {
+      padding: componentTheme.cellPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ScoreDistributionType/Table/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
+  return {
+    tableBottomPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
+    colorGray: colors === null || colors === void 0 ? void 0 : colors.tiara,
+    cellPadding: "".concat(spacing === null || spacing === void 0 ? void 0 : spacing.small, " ").concat(spacing === null || spacing === void 0 ? void 0 : spacing.small)
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ScoreDistributionType = 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("./Table/index.js"));
+
+var _propTypes2 = require("../../propTypes.js");
+
+var _index2 = _interopRequireDefault(require("../shared/AggregationTable/index.js"));
+
+var _presenter = require("../shared/AfsPartsContainer/presenter.js");
+
+var _index3 = _interopRequireDefault(require("../shared/AfsTableWrapper/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var ScoreDistributionType = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ScoreDistributionType, _Component);
+
+  var _super = (0, _createSuper2.default)(ScoreDistributionType);
+
+  function ScoreDistributionType() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ScoreDistributionType);
+
+    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(_index3.default, {
+        tableHeader: (0, _formatMessage.default)('Score Frequency Summary')
+      }, /*#__PURE__*/_react.default.createElement(_presenter.AfsPartsContainer, {
+        afsTable: /*#__PURE__*/_react.default.createElement(_index.default, {
+          itemId: itemId,
+          scores: answerSummary.score_distribution
+        }),
+        aggregationTable: /*#__PURE__*/_react.default.createElement(_index2.default, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return ScoreDistributionType;
+}(_react.Component);
+
+exports.ScoreDistributionType = ScoreDistributionType;
+ScoreDistributionType.propTypes = {
+  itemId: _propTypes.default.number,
+  answerSummary: _propTypes2.scoreDistributionTypeAnswerSummaryPropType
+}.isRequired;
+var _default = ScoreDistributionType;
+exports.default = _default;

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

@@ -27,7 +27,11 @@ var _index3 = _interopRequireDefault(require("./RichFillBlankType/index.js"));
 
 var _index4 = _interopRequireDefault(require("./AggregationType/index.js"));
 
-var _index5 = require("./MatchingType/index.js");
+var _index5 = _interopRequireDefault(require("./NumericType/index.js"));
+
+var _index6 = require("./MatchingType/index.js");
+
+var _index7 = require("./ScoreDistributionType/index.js");
 
 var _propTypes = require("../propTypes.js");
 
@@ -58,15 +62,15 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       }
 
       if (afsFlags.matchingEnabled) {
-        _this.afsTableComponentMap.set('matching', _index5.MatchingType);
+        _this.afsTableComponentMap.set('matching', _index6.MatchingType);
       }
 
       if (afsFlags.orderingEnabled) {
-        _this.afsTableComponentMap.set('ordering', _index5.OrderingType);
+        _this.afsTableComponentMap.set('ordering', _index6.OrderingType);
       }
 
       if (afsFlags.categorizationEnabled) {
-        _this.afsTableComponentMap.set('categorization', _index5.CategorizationType);
+        _this.afsTableComponentMap.set('categorization', _index6.CategorizationType);
       }
 
       if (afsFlags.trueFalseEnabled) {
@@ -84,6 +88,18 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.fillInTheBlankEnabled) {
         _this.afsTableComponentMap.set('rich-fill-blank', _index3.default);
       }
+
+      if (afsFlags.numericEnabled) {
+        _this.afsTableComponentMap.set('numeric', _index5.default);
+      }
+
+      if (afsFlags.essayEnabled) {
+        _this.afsTableComponentMap.set('essay', _index7.ScoreDistributionType);
+      }
+
+      if (afsFlags.fileUploadEnabled) {
+        _this.afsTableComponentMap.set('file-upload', _index7.ScoreDistributionType);
+      }
     };
 
     _this.render = function () {

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

@@ -45,6 +45,11 @@ var AfsTableWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _this.getHeader = function () {
+      var tableHeader = _this.props.tableHeader;
+      return tableHeader || (0, _formatMessage.default)('Answer Frequency Summary');
+    };
+
     _this.render = function () {
       return (0, _emotion.jsx)(_uiFlex.Flex, {
         direction: "row",
@@ -58,7 +63,7 @@ var AfsTableWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
         level: "h3",
         weight: "bold",
         color: "primary"
-      }, (0, _formatMessage.default)('Answer Frequency Summary')), _this.props.children)));
+      }, _this.getHeader()), _this.props.children)));
     };
 
     return _this;
@@ -67,6 +72,7 @@ var AfsTableWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, null), _d
   return AfsTableWrapper;
 }(_react.Component), _class2.propTypes = {
   children: _propTypes.default.node.isRequired,
-  styles: _propTypes.default.object
+  styles: _propTypes.default.object,
+  tableHeader: _propTypes.default.string
 }, _temp)) || _class);
 exports.AfsTableWrapper = AfsTableWrapper;

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