@instructure/quiz-core 20.7.1-rc.7 → 20.8.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [20.8.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.7.0...v20.8.0) (2024-02-28)
+
+
+### Bug Fixes
+
+* **Banks:** Sort By dropdown uses header names instead of ids ([a01b932](https://gerrit.instructure.com/quizzes-ui/commits/a01b93266a5146e60789cc91185333143897a8be))
+
+
+### Features
+
+* **item-analysis:** adapt aggregation table ([89cc091](https://gerrit.instructure.com/quizzes-ui/commits/89cc0912a287d55922fb75a4c343b663875be5d9))
+* **item-analysis:** answer frequency summary for essay and file-upload questions ([fa18909](https://gerrit.instructure.com/quizzes-ui/commits/fa1890974baa639fabfc8e64371fef39cfc57bc8))
+* **quiz-core:** Add IA afs numeric ([9b86625](https://gerrit.instructure.com/quizzes-ui/commits/9b8662538d9fadf02ab2c441074cdc5f67aaca22))
+
+
+
+
+
 # [20.7.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.6.0...v20.7.0) (2024-02-22)
 
 

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/NumericType/ChoiceTypeWithInfo/index.js

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

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

@@ -0,0 +1,90 @@
+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 { choiceTypeObject } from "../../../propTypes.js";
+import { Flex } from '@instructure/ui-flex';
+import ChoiceTypeTable from "../../shared/ChoiceTypeTable/index.js";
+import { Text } from '@instructure/ui-text';
+import t from '@instructure/quiz-i18n/es/format-message';
+export var ChoiceTypeWithInfo = /*#__PURE__*/function (_Component) {
+  _inherits(ChoiceTypeWithInfo, _Component);
+
+  var _super = _createSuper(ChoiceTypeWithInfo);
+
+  function ChoiceTypeWithInfo() {
+    var _this;
+
+    _classCallCheck(this, ChoiceTypeWithInfo);
+
+    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.renderTable = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          choices = _this$props.choices,
+          index = _this$props.index;
+      var tableId = "".concat(itemId, "_").concat(index, "_choiceGroup");
+      var tableContainerSizeClass = '';
+      return /*#__PURE__*/React.createElement(ChoiceTypeTable, {
+        itemId: tableId,
+        choices: choices,
+        tableContainerSizeClass: tableContainerSizeClass
+      });
+    };
+
+    _this.renderEmptyRequirement = function () {
+      return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
+        padding: "medium none none none"
+      }, /*#__PURE__*/React.createElement(Text, null, t('There are no entries for this requirement.'))));
+    };
+
+    _this.render = function () {
+      var _this$props2 = _this.props,
+          headLine = _this$props2.headLine,
+          choices = _this$props2.choices;
+      var areThereChoices = Array.isArray(choices) && choices.length > 0;
+      return /*#__PURE__*/React.createElement(Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible",
+        shouldGrow: true,
+        shouldShrink: true
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: "column",
+        justifyItems: "start"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        padding: "none none none none",
+        overflowY: "hidden"
+      }, /*#__PURE__*/React.createElement(Flex, {
+        direction: "row",
+        alignItems: "start"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        shouldGrow: true,
+        margin: "none none none none"
+      }, headLine))), /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldShrink: true,
+        padding: "none none medium none"
+      }, areThereChoices ? _this.renderTable() : _this.renderEmptyRequirement()))));
+    };
+
+    return _this;
+  }
+
+  return ChoiceTypeWithInfo;
+}(Component);
+ChoiceTypeWithInfo.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  index: PropTypes.number.isRequired,
+  choices: choiceTypeObject.isRequired,
+  headLine: PropTypes.node,
+  styles: PropTypes.object
+}.isRequired;

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

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

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

@@ -0,0 +1,255 @@
+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;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
+import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
+import AggregationTable from "../shared/AggregationTable/index.js";
+import ExpandableCard from "../shared/ExpandableCard/index.js";
+import { Text } from '@instructure/ui-text';
+import t from '@instructure/quiz-i18n/es/format-message';
+import ChoiceTypeTable from "../shared/ChoiceTypeTable/index.js";
+import { jsx, withStyle } from '@instructure/emotion';
+import ChoiceTypeWithInfo from "./ChoiceTypeWithInfo/index.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+import { Flex } from '@instructure/ui-flex';
+import { numericTypeAnswerSummaryPropType } from "../../propTypes.js";
+export var NumericType = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(NumericType, _Component);
+
+  var _super = _createSuper(NumericType);
+
+  function NumericType() {
+    var _this;
+
+    _classCallCheck(this, NumericType);
+
+    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.renderIncorrectTable = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary;
+      var incorrect_answer_choices = answerSummary.requirements.incorrect_answer_choices;
+      var tableId = "".concat(itemId, "_incorrect_choices");
+      var tableContainerSizeClass = '';
+      return jsx(ChoiceTypeTable, {
+        itemId: tableId,
+        choices: incorrect_answer_choices,
+        tableContainerSizeClass: tableContainerSizeClass
+      });
+    };
+
+    _this.getPreciseTypeTranslatable = function (precisionType) {
+      switch (precisionType) {
+        case 'significantDigits':
+          return t('Significant Digits');
+
+        case 'decimals':
+          return t('Decimal Places');
+
+        default:
+          return precisionType;
+      }
+    };
+
+    _this.renderPreciseResponse = function (correct_answers) {
+      var typeString = "".concat(t('Correct answer'), " - ").concat(t('Precise Response'), " ");
+      var answerString = "".concat(t('Answer'), ": ").concat(correct_answers.value, " ");
+      var precisionString = "".concat(t('Precision'), ": ").concat(correct_answers.precision, " ");
+
+      var translatablePrecisionType = _this.getPreciseTypeTranslatable(correct_answers.precision_type);
+
+      var precisionTypeString = "".concat(t('Type'), ": ").concat(translatablePrecisionType, " ");
+      return jsx("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, jsx(Text, {
+        transform: "capitalize",
+        weight: "bold"
+      }, typeString), jsx(Text, {
+        transform: "capitalize"
+      }, answerString), jsx(Text, {
+        transform: "capitalize"
+      }, precisionString), jsx(Text, {
+        transform: "capitalize"
+      }, precisionTypeString));
+    };
+
+    _this.getMarginTypeTranslatable = function (marginType) {
+      switch (marginType) {
+        case 'absolute':
+          return t('Absolute');
+
+        case 'percent':
+          return t('Percent');
+
+        default:
+          return marginType;
+      }
+    };
+
+    _this.renderMarginOfError = function (correct_answers) {
+      var typeString = "".concat(t('Correct answer'), " - ").concat(t('Margin Of Error'), " ");
+      var answerString = "".concat(t('Answer'), ": ").concat(correct_answers.value, " ");
+      var marginString = "".concat(t('+/- margin'), ": ").concat(correct_answers.margin, " ");
+
+      var translatableMarginType = _this.getMarginTypeTranslatable(correct_answers.margin_type);
+
+      var marginTypeString = "".concat(t('Type'), ": ").concat(translatableMarginType, " ");
+      return jsx("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, jsx(Text, {
+        transform: "capitalize",
+        weight: "bold"
+      }, typeString), jsx(Text, {
+        transform: "capitalize"
+      }, answerString), jsx(Text, {
+        transform: "capitalize"
+      }, marginString), jsx(Text, {
+        transform: "capitalize"
+      }, marginTypeString));
+    };
+
+    _this.renderExactResponse = function (correct_answers) {
+      var typeString = "".concat(t('Correct answer'), " - ").concat(t('Exact Response'), " ");
+      var answerString = "".concat(t('Answer'), ": ").concat(correct_answers.value, " ");
+      return jsx("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, jsx(Text, {
+        transform: "capitalize",
+        weight: "bold"
+      }, typeString), jsx(Text, {
+        transform: "capitalize"
+      }, answerString));
+    };
+
+    _this.renderWithinRange = function (correct_answers) {
+      var typeString = "".concat(t('Correct answer'), " - ").concat(t('Within A Range'), " ");
+      var startString = "".concat(t('Range Starts'), ": ").concat(correct_answers.start, " ");
+      var endString = "".concat(t('Range Ends'), ": ").concat(correct_answers.end, " ");
+      return jsx("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, jsx(Text, {
+        transform: "capitalize",
+        weight: "bold"
+      }, typeString), jsx(Text, {
+        transform: "capitalize"
+      }, startString), jsx(Text, {
+        transform: "capitalize"
+      }, endString));
+    };
+
+    _this.renderUncategorized = function () {
+      var typeString = "".concat(t('Correct answer'), " - ").concat(t('Uncategorized'), " ");
+      return jsx("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, jsx(Text, {
+        transform: "capitalize",
+        weight: "bold"
+      }, typeString));
+    };
+
+    _this.getHeadLineByType = function (correct_answer) {
+      switch (correct_answer.type) {
+        case 'withinARange':
+          return _this.renderWithinRange(correct_answer);
+
+        case 'exactResponse':
+          return _this.renderExactResponse(correct_answer);
+
+        case 'preciseResponse':
+          return _this.renderPreciseResponse(correct_answer);
+
+        case 'marginOfError':
+          return _this.renderMarginOfError(correct_answer);
+
+        default:
+          return _this.renderUncategorized();
+      }
+    };
+
+    _this.renderChoiceTypeWithInfo = function (correct_answer, index, itemId) {
+      var key = "ChoiceTypeWithInfo_".concat(itemId, "_").concat(index);
+      return jsx(ChoiceTypeWithInfo, {
+        key: key,
+        itemId: itemId,
+        choices: correct_answer.choices,
+        headLine: _this.getHeadLineByType(correct_answer),
+        index: index
+      });
+    };
+
+    _this.renderCorrectChoiceTypes = function () {
+      var _this$props2 = _this.props,
+          itemId = _this$props2.itemId,
+          answerSummary = _this$props2.answerSummary;
+      var correct_answers = answerSummary.requirements.correct_answers;
+      return correct_answers.map(function (correct_answer, index) {
+        return _this.renderChoiceTypeWithInfo(correct_answer, index, itemId);
+      });
+    };
+
+    _this.renderEmptyIncorrect = function () {
+      return jsx(Flex, null, jsx(Flex.Item, {
+        padding: "small none small none"
+      }, jsx(Text, null, t('There are no incorrect answers.'))));
+    };
+
+    _this.renderEmptyCorrect = function () {
+      return jsx(Flex, null, jsx(Flex.Item, {
+        padding: "small none small none"
+      }, jsx(Text, null, t('There are no correct answers.'))));
+    };
+
+    _this.renderAfsTable = function () {
+      var answerSummary = _this.props.answerSummary;
+      var _answerSummary$requir = answerSummary.requirements,
+          correct_answers = _answerSummary$requir.correct_answers,
+          incorrect_answer_choices = _answerSummary$requir.incorrect_answer_choices;
+      var areThereIncorrectChoices = Array.isArray(incorrect_answer_choices) && incorrect_answer_choices.length > 0;
+      var areThereCorrectAnswers = Array.isArray(correct_answers) && correct_answers.length > 0;
+      return jsx("div", null, jsx(ExpandableCard, {
+        content: areThereCorrectAnswers ? _this.renderCorrectChoiceTypes() : _this.renderEmptyCorrect(),
+        headLine: jsx(Text, {
+          weight: "bold"
+        }, t('Correct Answers'))
+      }), jsx(ExpandableCard, {
+        content: areThereIncorrectChoices ? _this.renderIncorrectTable() : _this.renderEmptyIncorrect(),
+        headLine: jsx(Text, {
+          weight: "bold"
+        }, t('Incorrect Answers'))
+      }));
+    };
+
+    _this.render = function () {
+      var _this$props3 = _this.props,
+          answerSummary = _this$props3.answerSummary,
+          itemId = _this$props3.itemId;
+      return jsx(AfsTableWrapper, null, jsx(AfsPartsContainer, {
+        afsTable: _this.renderAfsTable(),
+        aggregationTable: jsx(AggregationTable, {
+          itemId: itemId,
+          answerSummary: answerSummary
+        })
+      }));
+    };
+
+    return _this;
+  }
+
+  return NumericType;
+}(Component), _class2.propTypes = {
+  itemId: PropTypes.number.isRequired,
+  answerSummary: numericTypeAnswerSummaryPropType.isRequired,
+  styles: PropTypes.object
+}.isRequired, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/{shared/ChoiceGroupTypeTable → NumericType}/theme.js

@@ -1,8 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
-    cardBottomMargin: spacing.xSmall,
-    cardMinWidth: '500px'
+    aggregateSpacing: spacing.small
   };
 };
 

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

@@ -10,14 +10,13 @@ import PropTypes from 'prop-types';
 import { choiceTypeObject } from "../../../propTypes.js";
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
-import ExpandButton from "../../../../../../../common/components/shared/ExpandButton/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import Card from "../../../../../../../common/components/shared/Card/index.js";
-import ChoiceTypeTable from "../ChoiceTypeTable/index.js";
+import ChoiceTypeTable from "../../shared/ChoiceTypeTable/index.js";
 import BlankIcon from "../../../NewItemAnalysis/BlankIcon/index.js";
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import ExpandableCard from "../../shared/ExpandableCard/index.js";
 export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceGroupTypeTable, _Component);
 
@@ -57,10 +56,19 @@ export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateCompo
       return t('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(t('Correct'), ": ").concat(correctCount, " ");
+      var incorrectString = "".concat(t('Incorrect'), ": ").concat(incorrectCount, " ");
+      var noAnswerString = "".concat(t('No Answer'), ": ").concat(noAnswer, " ");
+      return jsx("div", {
+        css: _this.props.styles.groupAggregationContainer
+      }, jsx(Text, null, correctString), jsx(Text, null, incorrectString), jsx(Text, null, noAnswerString));
     };
 
     _this.renderTable = function () {
@@ -88,9 +96,7 @@ export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateCompo
     };
 
     _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), ")");
@@ -106,24 +112,7 @@ export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateCompo
       }, blankTextAndType)), jsx(Flex.Item, {
         shouldShrink: true,
         margin: "xxx-small none small none"
-      }, blankInfo));
-    };
-
-    _this.renderGroup = function () {
-      return jsx(Flex, {
-        direction: "row",
-        alignItems: "start"
-      }, jsx(Flex.Item, {
-        shouldShrink: true,
-        shouldGrow: true,
-        margin: "xx-small none none none"
-      }, _this.renderHeadLine()), jsx(Flex.Item, {
-        margin: "none none none x-small"
-      }, jsx(ExpandButton, {
-        onClick: _this.handleBodyToggle,
-        title: _this.state.bodyExpanded ? t('collapse group result') : t('expand group result'),
-        isExpanded: _this.state.bodyExpanded
-      })));
+      }, _this.renderBlankInfo()));
     };
 
     _this.renderEmptyInfo = function () {
@@ -133,41 +122,17 @@ export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateCompo
       }, jsx(Flex.Item, {
         shouldShrink: true,
         shouldGrow: true,
-        padding: "none none x-small small"
+        padding: "none none x-small none"
       }, jsx(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 jsx("div", {
-        css: groupWrapper
-      }, jsx(Card, {
-        css: cardWrapper
-      }, jsx(Flex, {
-        direction: "column",
-        justifyItems: "start"
-      }, jsx(Flex.Item, {
-        overflowY: "visible"
-      }, jsx(Flex.Item, {
-        shouldGrow: true,
-        shouldShrink: true
-      }, jsx(Flex, {
-        direction: "column",
-        justifyItems: "start"
-      }, jsx(Flex.Item, {
-        shouldShrink: true,
-        padding: "x-small small x-small medium",
-        overflowY: "hidden"
-      }, _this.renderGroup()), bodyExpanded && jsx(Flex.Item, {
-        shouldShrink: true,
-        padding: "x-small small x-small small"
-      }, areThereChoices ? _this.renderTable() : _this.renderEmptyInfo())))))));
+      return jsx(ExpandableCard, {
+        content: areThereChoices ? _this.renderTable() : _this.renderEmptyInfo(),
+        headLine: _this.renderHeadLine()
+      });
     };
 
     return _this;
@@ -181,7 +146,6 @@ export var ChoiceGroupTypeTable = (_dec = withStyle(generateStyle, generateCompo
     blank_text: PropTypes.string.isRequired,
     blank_type: PropTypes.string.isRequired
   }).isRequired,
-  blankInfo: PropTypes.node,
   index: PropTypes.number.isRequired,
   styles: PropTypes.object
 }.isRequired, _temp)) || _class);

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

@@ -0,0 +1,10 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    groupAggregationContainer: {
+      display: 'flex',
+      gap: componentTheme.aggregateSpacing
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,23 +1,14 @@
 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;
-
-/** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { richFillBlankTypeAnswerSummaryPropType } from "../../propTypes.js";
 import AfsTableWrapper from "../shared/AfsTableWrapper/index.js";
 import { AfsPartsContainer } from "../shared/AfsPartsContainer/presenter.js";
-import ChoiceGroupTypeTable from "../shared/ChoiceGroupTypeTable/index.js";
-import { Text } from '@instructure/ui-text';
-import t from '@instructure/quiz-i18n/es/format-message';
+import ChoiceGroupTypeTable from "./ChoiceGroupTypeTable/index.js";
 import AggregationTable from "../shared/AggregationTable/index.js";
-import { withStyle, jsx } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-export var RichFillBlankType = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var RichFillBlankType = /*#__PURE__*/function (_Component) {
   _inherits(RichFillBlankType, _Component);
 
   var _super = _createSuper(RichFillBlankType);
@@ -33,26 +24,11 @@ export var RichFillBlankType = (_dec = withStyle(generateStyle, generateComponen
 
     _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(t('Correct'), ": ").concat(correctCount, " ");
-      var incorrectString = "".concat(t('Incorrect'), ": ").concat(incorrectCount, " ");
-      var noAnswerString = "".concat(t('No Answer'), ": ").concat(noAnswer, " ");
-      return jsx("div", {
-        css: _this.props.styles.groupAggregationContainer
-      }, jsx(Text, null, correctString), jsx(Text, null, incorrectString), jsx(Text, null, noAnswerString));
-    };
-
     _this.renderGroup = function (key, itemId, blank, index) {
-      return jsx(ChoiceGroupTypeTable, {
+      return /*#__PURE__*/React.createElement(ChoiceGroupTypeTable, {
         key: key,
         itemId: itemId,
         blank: blank,
-        blankInfo: _this.renderBlankInfo(blank),
         index: index
       });
     };
@@ -63,7 +39,7 @@ export var RichFillBlankType = (_dec = withStyle(generateStyle, generateComponen
           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);
       });
     };
@@ -72,9 +48,9 @@ export var RichFillBlankType = (_dec = withStyle(generateStyle, generateComponen
       var _this$props2 = _this.props,
           answerSummary = _this$props2.answerSummary,
           itemId = _this$props2.itemId;
-      return jsx(AfsTableWrapper, null, jsx(AfsPartsContainer, {
+      return /*#__PURE__*/React.createElement(AfsTableWrapper, null, /*#__PURE__*/React.createElement(AfsPartsContainer, {
         afsTable: _this.renderGroups(),
-        aggregationTable: jsx(AggregationTable, {
+        aggregationTable: /*#__PURE__*/React.createElement(AggregationTable, {
           itemId: itemId,
           answerSummary: answerSummary
         })
@@ -85,8 +61,8 @@ export var RichFillBlankType = (_dec = withStyle(generateStyle, generateComponen
   }
 
   return RichFillBlankType;
-}(Component), _class2.propTypes = {
+}(Component);
+RichFillBlankType.propTypes = {
   itemId: PropTypes.number.isRequired,
-  answerSummary: richFillBlankTypeAnswerSummaryPropType.isRequired,
-  styles: PropTypes.object
-}.isRequired, _temp)) || _class);
+  answerSummary: richFillBlankTypeAnswerSummaryPropType.isRequired
+}.isRequired;