@instructure/quiz-core 19.0.1-rc.1 → 19.0.1-rc.3

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

@@ -1,9 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _dec, _class, _class2, _temp;
+var _rowStyleMap, _dec, _class, _class2, _temp;
 
 import React, { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
@@ -13,18 +14,19 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import PropTypes from 'prop-types';
 import { choiceTypeAnswerSummaryPropType } from "../../../propTypes.js";
 var styles = {
-  componentId: 'TErmM',
+  componentId: 'elvBp',
   template: function template(theme) {
-    return "\n\n.TErmM_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.TErmM_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.TErmM_SVtU table tbody tr th{font-weight:400;height:1px;width:33.33%}\n\n.TErmM_SVtU table tbody tr td{height:1px;width:33.33%}\n\n.TErmM_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.TErmM_EKAb{background-color:").concat(theme.colorGreen || 'inherit', ";border-radius:4px 0 0 4px}\n\n.TErmM_EKAb svg{fill:#fff}\n\n.TErmM_cCmC{align-items:center;display:flex;height:calc(100% - 4px);justify-content:center}\n\n.TErmM_dJVn{padding:").concat(theme.cellPadding || 'inherit', "}\n\n.TErmM_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.TErmM_fvqY{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
+    return "\n\n.elvBp_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.elvBp_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.elvBp_SVtU table{border-collapse:separate;border-spacing:0 1px}\n\n.elvBp_eviJ table thead tr td,.elvBp_eviJ table thead tr th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.elvBp_SVtU table tbody tr th{font-weight:400;width:33.33%}\n\n.elvBp_SVtU table tbody tr td{width:33.33%}\n\n.elvBp_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.elvBp_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.elvBp_EKAb svg{fill:#fff}\n\n.elvBp_cCmC{align-items:center;display:flex;height:calc(100% - 4px);justify-content:center}\n\n.elvBp_dJVn{padding:").concat(theme.cellPadding || 'inherit', "}\n\n.elvBp_eEOp td,.elvBp_eEOp th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.elvBp_UAZE td{border-width:2px 0 2px 0}\n\n.elvBp_UAZE td,.elvBp_UAZE th:first-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid}\n\n.elvBp_UAZE th:first-child{border-radius:4px 0 0 4px;border-width:2px 0 2px 2px}\n\n.elvBp_UAZE td:last-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}");
   },
-  'tableWrapper': 'TErmM_rMrG',
-  'tableContainer': 'TErmM_SVtU',
-  'iconWrapper': 'TErmM_cvRx',
-  'iconCorrect': 'TErmM_EKAb',
-  'textContainer': 'TErmM_cCmC',
-  'firstTextContainer': 'TErmM_dJVn',
-  'correctRowBorder': 'TErmM_tnta',
-  'correctRowBorderRadius': 'TErmM_fvqY'
+  'tableWrapper': 'elvBp_rMrG',
+  'tableContainer': 'elvBp_SVtU',
+  'headerGrayBottomBorder': 'elvBp_eviJ',
+  'iconWrapper': 'elvBp_cvRx',
+  'iconCorrect': 'elvBp_EKAb',
+  'textContainer': 'elvBp_cCmC',
+  'firstTextContainer': 'elvBp_dJVn',
+  'incorrectRow': 'elvBp_eEOp',
+  'correctRow': 'elvBp_UAZE'
 };
 import theme from "./theme.js";
 import classNames from 'classnames';
@@ -32,6 +34,9 @@ import { IconCheckSolid, IconXSolid } from '@instructure/ui-icons';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
+var correctAttribute = 'correct';
+var incorrectAttribute = 'incorrect';
+var rowStyleMap = (_rowStyleMap = {}, _defineProperty(_rowStyleMap, correctAttribute, styles.correctRow), _defineProperty(_rowStyleMap, incorrectAttribute, styles.incorrectRow), _rowStyleMap);
 
 var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
 
@@ -60,24 +65,15 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
       }, correct ? _ref : _ref2);
     };
 
-    _this.renderFirstCell = function (correct, content) {
-      var className = classNames(styles.firstTextContainer, _defineProperty({}, styles.correctRowBorder, correct));
+    _this.renderFirstCell = function (content) {
+      var className = classNames(styles.firstTextContainer);
       return /*#__PURE__*/React.createElement("div", {
         className: className
       }, content);
     };
 
-    _this.renderMiddleCell = function (correct, content) {
-      var className = classNames(styles.textContainer, _defineProperty({}, styles.correctRowBorder, correct));
-      return /*#__PURE__*/React.createElement("div", {
-        className: className
-      }, content);
-    };
-
-    _this.renderLastCell = function (correct, content) {
-      var _classNames4;
-
-      var className = classNames(styles.textContainer, (_classNames4 = {}, _defineProperty(_classNames4, styles.correctRowBorder, correct), _defineProperty(_classNames4, styles.correctRowBorderRadius, correct), _classNames4));
+    _this.renderCell = function (content) {
+      var className = classNames(styles.textContainer);
       return /*#__PURE__*/React.createElement("div", {
         className: className
       }, content);
@@ -93,6 +89,23 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
       return _this.answerLabel(correct);
     };
 
+    _this.nextChoiceIsCorrect = function (choices, choiceIndex) {
+      var _choices$choiceIndex;
+
+      return (_choices$choiceIndex = choices[choiceIndex]) === null || _choices$choiceIndex === void 0 ? void 0 : _choices$choiceIndex.correct;
+    };
+
+    _this.getDataIconAttribute = function (correct, choiceIndex) {
+      var answerSummary = _this.props.answerSummary;
+      var choices = answerSummary.choices;
+
+      if (_this.nextChoiceIsCorrect(choices, choiceIndex + 1) && !correct) {
+        return '';
+      }
+
+      return correct ? correctAttribute : incorrectAttribute;
+    };
+
     _this.renderRow = function (choice, choiceIndex) {
       var correct = choice.correct,
           body = choice.body;
@@ -103,7 +116,7 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
       return /*#__PURE__*/React.createElement(Table.Row, {
         key: choiceIndex
       }, /*#__PURE__*/React.createElement(Table.RowHeader, {
-        theme: {
+        themeOverride: {
           padding: '0'
         }
       }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderContent), /*#__PURE__*/React.createElement(Flex, {
@@ -114,20 +127,46 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
         textAlign: "center",
         align: "stretch"
       }, /*#__PURE__*/React.createElement("div", {
+        "data-icon": _this.getDataIconAttribute(correct, choiceIndex),
         className: classNames(styles.iconWrapper)
       }, _this.renderIcon(correct))), /*#__PURE__*/React.createElement(Flex.Item, {
         shouldShrink: true,
         shouldGrow: true
-      }, /*#__PURE__*/React.createElement(Text, null, _this.renderFirstCell(correct, extractedBody))))), /*#__PURE__*/React.createElement(Table.Cell, {
-        theme: {
+      }, /*#__PURE__*/React.createElement(Text, null, _this.renderFirstCell(extractedBody))))), /*#__PURE__*/React.createElement(Table.Cell, {
+        themeOverride: {
           padding: '0'
         }
-      }, _this.renderMiddleCell(correct, choice.count)), /*#__PURE__*/React.createElement(Table.Cell, {
-        theme: {
+      }, _this.renderCell(choice.count)), /*#__PURE__*/React.createElement(Table.Cell, {
+        themeOverride: {
           padding: '0'
         },
         textAlign: "center"
-      }, _this.renderLastCell(correct, "".concat(choice.percentage, "%"))));
+      }, _this.renderCell("".concat(choice.percentage, "%"))));
+    };
+
+    _this.componentDidMount = function () {
+      if (_this.tableRef) {
+        var _iterator = _createForOfIteratorHelper(_this.tableRef.rows),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _row$querySelector, _row$querySelector$da;
+
+            var row = _step.value;
+            var icon = (_row$querySelector = row.querySelector('tr th:first-child [data-icon]')) === null || _row$querySelector === void 0 ? void 0 : (_row$querySelector$da = _row$querySelector.dataset) === null || _row$querySelector$da === void 0 ? void 0 : _row$querySelector$da.icon;
+            row.classList.add(rowStyleMap[icon]);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    };
+
+    _this.setTableRef = function (el) {
+      return _this.tableRef = el;
     };
 
     _this.render = function () {
@@ -138,14 +177,16 @@ export var ChoiceTypeTable = (_dec = themeable(theme, styles), _dec(_class = (_t
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
+      var containerClasses = classNames(styles.tableContainer, _defineProperty({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.tableContainer)
+        className: containerClasses
       }, /*#__PURE__*/React.createElement(Table, {
-        caption: t('Answer Frequency Summary')
+        caption: t('Answer Frequency Summary'),
+        elementRef: _this.setTableRef
       }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: answerHeaderId,
         height: "47px",
-        theme: {
+        themeOverride: {
           padding: '0 0 0 57px'
         }
       }, t('Answer')), /*#__PURE__*/React.createElement(Table.ColHeader, {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/ChoiceTypeTable/theme.js

@@ -3,6 +3,7 @@ export default function generator(_ref) {
   return {
     tableBottomPadding: spacing.medium,
     colorGreen: '#0b874b',
+    colorGray: '#C7CDD1',
     cellPadding: '0.75rem 0.75rem'
   };
 }

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

@@ -49,6 +49,10 @@ export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.trueFalseEnabled) {
         _this.afsTableComponentMap.set('true-false', ChoiceType);
       }
+
+      if (afsFlags.choiceEnabled) {
+        _this.afsTableComponentMap.set('choice', ChoiceType);
+      }
     };
 
     _this.render = function () {

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

@@ -9,15 +9,16 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { themeable } from '@instructure/ui-themeable';
 var styles = {
-  componentId: 'dApXZ',
+  componentId: 'DjkQc',
   template: function template(theme) {
-    return "\n\n.dApXZ_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.dApXZ_ellB{margin-top:13px}";
+    return "\n\n.DjkQc_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.DjkQc_ellB{margin-top:".concat(theme.marginOfTables || 'inherit', "}");
   },
-  'tableContainer': 'dApXZ_SVtU',
-  'aggregateContainer': 'dApXZ_ellB'
+  'tableContainer': 'DjkQc_SVtU',
+  'aggregateContainer': 'DjkQc_ellB'
 };
 import classNames from 'classnames';
-export var AfsPartsContainer = (_dec = themeable({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import theme from "./theme.js";
+export var AfsPartsContainer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AfsPartsContainer, _Component);
 
   var _super = _createSuper(AfsPartsContainer);

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

@@ -0,0 +1,6 @@
+export default function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    marginOfTables: spacing.medium
+  };
+}

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

@@ -12,7 +12,8 @@ function mapStateToProps(_state) {
       orderingEnabled: featureOn('ia_ordering_afs'),
       hotSpotEnabled: featureOn('ia_hot_spot_afs'),
       categorizationEnabled: featureOn('ia_categorization_afs'),
-      trueFalseEnabled: featureOn('ia_true_false_afs')
+      trueFalseEnabled: featureOn('ia_true_false_afs'),
+      choiceEnabled: featureOn('ia_choice_afs')
     }
   };
 }

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

@@ -88,5 +88,6 @@ export var afsFlags = PropTypes.shape({
   hotSpotEnabled: PropTypes.bool.isRequired,
   orderingEnabled: PropTypes.bool.isRequired,
   categorizationEnabled: PropTypes.bool.isRequired,
-  trueFalseEnabled: PropTypes.bool.isRequired
+  trueFalseEnabled: PropTypes.bool.isRequired,
+  choiceEnabled: PropTypes.bool.isRequired
 });

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChoiceTypeTable = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -17,6 +17,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -43,22 +45,26 @@ var _uiFlex = require("@instructure/ui-flex");
 
 var _uiText = require("@instructure/ui-text");
 
-var _dec, _class, _class2, _temp;
+var _rowStyleMap, _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'TErmM',
+  componentId: 'elvBp',
   template: function template(theme) {
-    return "\n\n.TErmM_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.TErmM_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.TErmM_SVtU table tbody tr th{font-weight:400;height:1px;width:33.33%}\n\n.TErmM_SVtU table tbody tr td{height:1px;width:33.33%}\n\n.TErmM_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.TErmM_EKAb{background-color:").concat(theme.colorGreen || 'inherit', ";border-radius:4px 0 0 4px}\n\n.TErmM_EKAb svg{fill:#fff}\n\n.TErmM_cCmC{align-items:center;display:flex;height:calc(100% - 4px);justify-content:center}\n\n.TErmM_dJVn{padding:").concat(theme.cellPadding || 'inherit', "}\n\n.TErmM_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0}\n\n.TErmM_fvqY{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
+    return "\n\n.elvBp_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}\n\n.elvBp_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.elvBp_SVtU table{border-collapse:separate;border-spacing:0 1px}\n\n.elvBp_eviJ table thead tr td,.elvBp_eviJ table thead tr th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.elvBp_SVtU table tbody tr th{font-weight:400;width:33.33%}\n\n.elvBp_SVtU table tbody tr td{width:33.33%}\n\n.elvBp_cvRx{align-items:center;display:flex;height:100%;justify-content:center;min-height:47px;width:46px}\n\n.elvBp_EKAb{background-color:").concat(theme.colorGreen || 'inherit', "}\n\n.elvBp_EKAb svg{fill:#fff}\n\n.elvBp_cCmC{align-items:center;display:flex;height:calc(100% - 4px);justify-content:center}\n\n.elvBp_dJVn{padding:").concat(theme.cellPadding || 'inherit', "}\n\n.elvBp_eEOp td,.elvBp_eEOp th{border-bottom:solid 0.0625rem ").concat(theme.colorGray || 'inherit', "}\n\n.elvBp_UAZE td{border-width:2px 0 2px 0}\n\n.elvBp_UAZE td,.elvBp_UAZE th:first-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid}\n\n.elvBp_UAZE th:first-child{border-radius:4px 0 0 4px;border-width:2px 0 2px 2px}\n\n.elvBp_UAZE td:last-child{border-color:").concat(theme.colorGreen || 'inherit', ";border-radius:0 4px 4px 0;border-style:solid;border-width:2px 2px 2px 0}");
   },
-  'tableWrapper': 'TErmM_rMrG',
-  'tableContainer': 'TErmM_SVtU',
-  'iconWrapper': 'TErmM_cvRx',
-  'iconCorrect': 'TErmM_EKAb',
-  'textContainer': 'TErmM_cCmC',
-  'firstTextContainer': 'TErmM_dJVn',
-  'correctRowBorder': 'TErmM_tnta',
-  'correctRowBorderRadius': 'TErmM_fvqY'
+  'tableWrapper': 'elvBp_rMrG',
+  'tableContainer': 'elvBp_SVtU',
+  'headerGrayBottomBorder': 'elvBp_eviJ',
+  'iconWrapper': 'elvBp_cvRx',
+  'iconCorrect': 'elvBp_EKAb',
+  'textContainer': 'elvBp_cCmC',
+  'firstTextContainer': 'elvBp_dJVn',
+  'incorrectRow': 'elvBp_eEOp',
+  'correctRow': 'elvBp_UAZE'
 };
+var correctAttribute = 'correct';
+var incorrectAttribute = 'incorrect';
+var rowStyleMap = (_rowStyleMap = {}, (0, _defineProperty2.default)(_rowStyleMap, correctAttribute, styles.correctRow), (0, _defineProperty2.default)(_rowStyleMap, incorrectAttribute, styles.incorrectRow), _rowStyleMap);
 
 var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCheckSolid, null);
 
@@ -87,24 +93,15 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }, correct ? _ref : _ref2);
     };
 
-    _this.renderFirstCell = function (correct, content) {
-      var className = (0, _classnames.default)(styles.firstTextContainer, (0, _defineProperty2.default)({}, styles.correctRowBorder, correct));
+    _this.renderFirstCell = function (content) {
+      var className = (0, _classnames.default)(styles.firstTextContainer);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: className
       }, content);
     };
 
-    _this.renderMiddleCell = function (correct, content) {
-      var className = (0, _classnames.default)(styles.textContainer, (0, _defineProperty2.default)({}, styles.correctRowBorder, correct));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
-      }, content);
-    };
-
-    _this.renderLastCell = function (correct, content) {
-      var _classNames4;
-
-      var className = (0, _classnames.default)(styles.textContainer, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, styles.correctRowBorder, correct), (0, _defineProperty2.default)(_classNames4, styles.correctRowBorderRadius, correct), _classNames4));
+    _this.renderCell = function (content) {
+      var className = (0, _classnames.default)(styles.textContainer);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: className
       }, content);
@@ -120,6 +117,23 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       return _this.answerLabel(correct);
     };
 
+    _this.nextChoiceIsCorrect = function (choices, choiceIndex) {
+      var _choices$choiceIndex;
+
+      return (_choices$choiceIndex = choices[choiceIndex]) === null || _choices$choiceIndex === void 0 ? void 0 : _choices$choiceIndex.correct;
+    };
+
+    _this.getDataIconAttribute = function (correct, choiceIndex) {
+      var answerSummary = _this.props.answerSummary;
+      var choices = answerSummary.choices;
+
+      if (_this.nextChoiceIsCorrect(choices, choiceIndex + 1) && !correct) {
+        return '';
+      }
+
+      return correct ? correctAttribute : incorrectAttribute;
+    };
+
     _this.renderRow = function (choice, choiceIndex) {
       var correct = choice.correct,
           body = choice.body;
@@ -130,7 +144,7 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
         key: choiceIndex
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
-        theme: {
+        themeOverride: {
           padding: '0'
         }
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, screenReaderContent), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
@@ -141,20 +155,46 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         textAlign: "center",
         align: "stretch"
       }, /*#__PURE__*/_react.default.createElement("div", {
+        "data-icon": _this.getDataIconAttribute(correct, choiceIndex),
         className: (0, _classnames.default)(styles.iconWrapper)
       }, _this.renderIcon(correct))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
         shouldShrink: true,
         shouldGrow: true
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, _this.renderFirstCell(correct, extractedBody))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-        theme: {
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, null, _this.renderFirstCell(extractedBody))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+        themeOverride: {
           padding: '0'
         }
-      }, _this.renderMiddleCell(correct, choice.count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-        theme: {
+      }, _this.renderCell(choice.count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+        themeOverride: {
           padding: '0'
         },
         textAlign: "center"
-      }, _this.renderLastCell(correct, "".concat(choice.percentage, "%"))));
+      }, _this.renderCell("".concat(choice.percentage, "%"))));
+    };
+
+    _this.componentDidMount = function () {
+      if (_this.tableRef) {
+        var _iterator = (0, _createForOfIteratorHelper2.default)(_this.tableRef.rows),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _row$querySelector, _row$querySelector$da;
+
+            var row = _step.value;
+            var icon = (_row$querySelector = row.querySelector('tr th:first-child [data-icon]')) === null || _row$querySelector === void 0 ? void 0 : (_row$querySelector$da = _row$querySelector.dataset) === null || _row$querySelector$da === void 0 ? void 0 : _row$querySelector$da.icon;
+            row.classList.add(rowStyleMap[icon]);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+    };
+
+    _this.setTableRef = function (el) {
+      return _this.tableRef = el;
     };
 
     _this.render = function () {
@@ -165,14 +205,16 @@ var ChoiceTypeTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
+      var containerClasses = (0, _classnames.default)(styles.tableContainer, (0, _defineProperty2.default)({}, styles.headerGrayBottomBorder, !_this.nextChoiceIsCorrect(choices, 0)));
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(styles.tableContainer)
+        className: containerClasses
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
-        caption: (0, _formatMessage.default)('Answer Frequency Summary')
+        caption: (0, _formatMessage.default)('Answer Frequency Summary'),
+        elementRef: _this.setTableRef
       }, /*#__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,
         height: "47px",
-        theme: {
+        themeOverride: {
           padding: '0 0 0 57px'
         }
       }, (0, _formatMessage.default)('Answer')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/ChoiceTypeTable/theme.js

@@ -10,6 +10,7 @@ function generator(_ref) {
   return {
     tableBottomPadding: spacing.medium,
     colorGreen: '#0b874b',
+    colorGray: '#C7CDD1',
     cellPadding: '0.75rem 0.75rem'
   };
 }

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

@@ -70,6 +70,10 @@ var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
       if (afsFlags.trueFalseEnabled) {
         _this.afsTableComponentMap.set('true-false', _index2.default);
       }
+
+      if (afsFlags.choiceEnabled) {
+        _this.afsTableComponentMap.set('choice', _index2.default);
+      }
     };
 
     _this.render = function () {

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

@@ -25,17 +25,19 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _theme = _interopRequireDefault(require("./theme.js"));
+
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'dApXZ',
+  componentId: 'DjkQc',
   template: function template(theme) {
-    return "\n\n.dApXZ_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.dApXZ_ellB{margin-top:13px}";
+    return "\n\n.DjkQc_SVtU{max-width:100%;width:calc(25% + 350px)}\n\n.DjkQc_ellB{margin-top:".concat(theme.marginOfTables || 'inherit', "}");
   },
-  'tableContainer': 'dApXZ_SVtU',
-  'aggregateContainer': 'dApXZ_ellB'
+  'tableContainer': 'DjkQc_SVtU',
+  'aggregateContainer': 'DjkQc_ellB'
 };
-var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)({}, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AfsPartsContainer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AfsPartsContainer, _Component);
 
   var _super = (0, _createSuper2.default)(AfsPartsContainer);

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    marginOfTables: spacing.medium
+  };
+}

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

@@ -21,7 +21,8 @@ function mapStateToProps(_state) {
       orderingEnabled: (0, _featureCheck.featureOn)('ia_ordering_afs'),
       hotSpotEnabled: (0, _featureCheck.featureOn)('ia_hot_spot_afs'),
       categorizationEnabled: (0, _featureCheck.featureOn)('ia_categorization_afs'),
-      trueFalseEnabled: (0, _featureCheck.featureOn)('ia_true_false_afs')
+      trueFalseEnabled: (0, _featureCheck.featureOn)('ia_true_false_afs'),
+      choiceEnabled: (0, _featureCheck.featureOn)('ia_choice_afs')
     }
   };
 }

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

@@ -121,7 +121,8 @@ var afsFlags = _propTypes.default.shape({
   hotSpotEnabled: _propTypes.default.bool.isRequired,
   orderingEnabled: _propTypes.default.bool.isRequired,
   categorizationEnabled: _propTypes.default.bool.isRequired,
-  trueFalseEnabled: _propTypes.default.bool.isRequired
+  trueFalseEnabled: _propTypes.default.bool.isRequired,
+  choiceEnabled: _propTypes.default.bool.isRequired
 });
 
 exports.afsFlags = afsFlags;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "19.0.1-rc.1+3fe6f47b6",
+  "version": "19.0.1-rc.3+ccf710abb",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.48.3",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "19.0.1-rc.1+3fe6f47b6",
-    "@instructure/quiz-i18n": "19.0.1-rc.1+3fe6f47b6",
-    "@instructure/quiz-interactions": "19.0.1-rc.1+3fe6f47b6",
-    "@instructure/quiz-number-input": "19.0.1-rc.1+3fe6f47b6",
-    "@instructure/quiz-rce": "19.0.1-rc.1+3fe6f47b6",
+    "@instructure/quiz-common": "19.0.1-rc.3+ccf710abb",
+    "@instructure/quiz-i18n": "19.0.1-rc.3+ccf710abb",
+    "@instructure/quiz-interactions": "19.0.1-rc.3+ccf710abb",
+    "@instructure/quiz-number-input": "19.0.1-rc.3+ccf710abb",
+    "@instructure/quiz-rce": "19.0.1-rc.3+ccf710abb",
     "@instructure/ui-a11y-content": "^8.48.3",
     "@instructure/ui-alerts": "^8.48.3",
     "@instructure/ui-avatar": "^8.48.3",
@@ -110,7 +110,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "19.0.1-rc.1+3fe6f47b6",
+    "instructure-validations": "19.0.1-rc.3+ccf710abb",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -161,7 +161,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "19.0.1-rc.1+3fe6f47b6",
+    "quiz-presets": "19.0.1-rc.3+ccf710abb",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -177,5 +177,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3fe6f47b67edf23b4154addc8df80af2060f85bd"
+  "gitHead": "ccf710abbb15a38788222e936bbdfbf710087793"
 }