@instructure/quiz-core 18.3.1-rc.2 → 18.3.1-rc.21

package/es/common/components/resources/quiz/AddContent/Popover/presenter.js

@@ -45,12 +45,12 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
       return elementsForSelectors(_this.props.appContainer);
     };
 
-    _this.toggle = function (shouldShow) {
-      if (shouldShow) {
-        _this.props.switchOnEditing();
-      } else {
-        _this.props.switchOffEditing();
-      }
+    _this.showContent = function () {
+      _this.props.switchOnEditing();
+    };
+
+    _this.hideContent = function () {
+      _this.props.switchOffEditing();
     };
 
     _this.storePopoverTriggerRef = function (b) {
@@ -60,11 +60,13 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
     _this.renderPopoverButton = function () {
       return /*#__PURE__*/React.createElement(Popover, {
         on: "click",
-        onToggle: _this.toggle,
+        onShowContent: _this.showContent,
+        onHideContent: _this.hideContent,
         isShowingContent: _this.props.isEditing,
         shouldCloseOnEscape: true,
-        shouldContainFocus: true
-      }, /*#__PURE__*/React.createElement(Popover.Trigger, null, _this.renderAddContentButton()), /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(AddContentBody, {
+        shouldContainFocus: true,
+        renderTrigger: _this.renderAddContentButton()
+      }, /*#__PURE__*/React.createElement(AddContentBody, {
         allowStimulusCreation: _this.props.allowStimulusCreation,
         onOpenBankTray: _this.props.switchOffEditing,
         onAddItem: _this.props.switchOffEditing,
@@ -72,7 +74,7 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
         position: _this.props.position,
         quizId: _this.props.quizId,
         stimulusId: _this.props.stimulusId
-      })));
+      }));
     };
 
     _this.openAddContentModal = function () {

package/es/common/components/resources/quizSessionResult/Info/index.js

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
 import { Text } from '@instructure/ui-text';
-import { Progress } from '@instructure/ui-progress';
+import { ProgressCircle } from '@instructure/ui-progress';
 import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
 import { themeable } from '@instructure/ui-themeable';
@@ -57,7 +57,8 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   _createClass(Info, [{
     key: "progressTextFormatter",
     // needed for inst-ui Progress
-    value: function progressTextFormatter(valueNow, valueMax) {
+    value: function progressTextFormatter(_ref) {
+      var valueNow = _ref.valueNow;
       var percentageUnknown = valueNow === unknownPercentageValue;
       return percentageUnknown ? t('Unknown Score') : t('Your score was {percentage}.', {
         percentage: this.formatPercentMax2FractionDigits(valueNow)
@@ -66,7 +67,8 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
 
   }, {
     key: "progressDisplayFormatter",
-    value: function progressDisplayFormatter(valueNow, valueMax) {
+    value: function progressDisplayFormatter(_ref2) {
+      var valueNow = _ref2.valueNow;
       var valueToShow = valueNow === unknownPercentageValue ? t({
         id: 'progress_display',
         default: '?',
@@ -153,13 +155,12 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       return /*#__PURE__*/React.createElement("div", {
         className: styles.score,
         "data-automation": "sdk-info-score"
-      }, /*#__PURE__*/React.createElement(Progress, {
-        animateOnMount: true,
+      }, /*#__PURE__*/React.createElement(ProgressCircle, {
+        shouldAnimateOnMount: true,
         size: "large",
-        variant: "circle",
-        label: t('Your Score'),
-        formatValueText: this.progressTextFormatter,
-        formatDisplayedValue: this.progressDisplayFormatter,
+        screenReaderLabel: t('Your Score'),
+        formatScreenReaderValue: this.progressTextFormatter,
+        renderValue: this.progressDisplayFormatter,
         valueNow: this.percentageVal,
         valueMax: 1
       }));

package/es/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -440,7 +440,7 @@ export var StimulusEdit = (_dec = themeable(theme, styles), _dec(_class = (_temp
         className: styles.buttonWrapper
       }, /*#__PURE__*/React.createElement(Button, {
         type: "button",
-        variant: "primary",
+        color: "primary",
         disabled: !this.state.canSubmit,
         onClick: this.onSubmit
       }, t('Done')))));

package/es/common/components/shared/ExpandButton/index.js

@@ -10,8 +10,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { IconArrowOpenDownLine } from '@instructure/ui-icons';
-import { Button } from '@instructure/ui-buttons';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { IconButton } from '@instructure/ui-buttons';
 import { themeable } from '@instructure/ui-themeable';
 import { omitProps } from '@instructure/ui-react-utils';
 var styles = {
@@ -46,13 +45,15 @@ export var ExpandButton = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Button, Object.assign({
-        variant: "icon",
+      return /*#__PURE__*/React.createElement(IconButton, Object.assign({
         size: "medium",
+        withBackground: false,
+        withBorder: false,
         onClick: this.props.onClick,
-        icon: this.renderIcon(),
-        title: this.props.title
-      }, omitProps(this.props, this.constructor.propTypes)), /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.title));
+        renderIcon: this.renderIcon()
+      }, omitProps(this.props, this.constructor.propTypes), {
+        screenReaderLabel: this.props.title
+      }));
     }
   }]);
 

package/es/common/components/shared/InteractionTypes/presenter.js

@@ -65,12 +65,13 @@ export var InteractionTypes = (_dec = themeable(theme, styles), _dec(_class = (_
       }
 
       return /*#__PURE__*/React.createElement(Button, {
-        fluidWidth: true,
         key: intType.slug,
         margin: "0 0 xx-small",
         onClick: onClick,
         size: "small",
-        "data-automation": automation
+        "data-automation": automation,
+        display: "block",
+        textAlign: "start"
       }, /*#__PURE__*/React.createElement(Grid, {
         colSpacing: "none",
         vAlign: "middle"

package/es/common/components/shared/drag_and_drop/DragHandle/presenter.js

@@ -6,9 +6,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Map } from 'immutable';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Menu } from '@instructure/ui-menu';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconArrowDownLine, IconArrowUpLine, IconDragHandleLine, IconMiniArrowDownLine, IconMiniArrowUpLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
 import keyboardClickable from "../../../../../common/util/keyboardClickable.js";
@@ -203,19 +202,21 @@ export var DragHandle = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderIcon",
     value: function renderIcon() {
-      return /*#__PURE__*/React.createElement(Button // must be a button when disabled for the screenreader to read it properly
+      return /*#__PURE__*/React.createElement(IconButton // must be a button when disabled for the screenreader to read it properly
       // must be a div when enabled to allow dragging in firefox
       , {
         as: this.props.disabled ? 'button' : 'div',
-        variant: "icon",
-        icon: IconDragHandleLine,
+        renderIcon: IconDragHandleLine,
+        withBackground: false,
+        withBorder: false,
         size: "small",
         ref: this.handleTriggerRef,
         onKeyDown: keyboardClickable,
         disabled: this.props.disabled,
         "data-automation": "sdk-drag-handle",
-        cursor: "move"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, MOVE)));
+        cursor: "move",
+        screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, MOVE)
+      });
     }
   }, {
     key: "renderMenuItems",

package/es/moderating/components/resources/AccommodationsModal/index.js

@@ -117,7 +117,7 @@ export var AccommodationModal = /*#__PURE__*/function (_Component) {
         margin: "xxx-small",
         "data-automation": "sdk-moderation-cancel"
       }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
+        color: "primary",
         onClick: this.saveAction,
         margin: "xxx-small",
         "data-automation": "sdk-moderation-save"

package/es/moderating/components/resources/ModerateTableRow/presenter.js

@@ -9,7 +9,7 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { AccessibleContent, PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { AccessibleContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { List } from '@instructure/ui-list';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
@@ -18,7 +18,7 @@ import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { Table } from '@instructure/ui-table';
 import { IconEditLine, IconWarningLine } from '@instructure/ui-icons';
-import { Button } from '@instructure/ui-buttons';
+import { Button, IconButton } from '@instructure/ui-buttons';
 import { themeable } from '@instructure/ui-themeable';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { withI18nSupport } from '@instructure/quiz-common';
@@ -287,7 +287,7 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
           }, t('None'));
         } else {
           displayContent = /*#__PURE__*/React.createElement(List, {
-            variant: "unstyled"
+            isUnstyled: true
           }, accommodations.map(function (elem) {
             return /*#__PURE__*/React.createElement(List.Item, {
               key: elem.name
@@ -305,13 +305,15 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
         }, /*#__PURE__*/React.createElement(Flex.Item, {
           shouldShrink: true,
           "data-automation": "sdk-moderate-accommodations-text"
-        }, displayContent), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
-          variant: "icon",
+        }, displayContent), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
           margin: "0 x-small 0 0",
-          icon: IconEditLine,
+          withBackground: false,
+          withBorder: false,
+          renderIcon: IconEditLine,
           onClick: this.onAccommodationsClick,
-          "data-automation": "sdk-moderate-accommodations-edit"
-        }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Edit student accommodations'))))));
+          "data-automation": "sdk-moderate-accommodations-edit",
+          screenReaderLabel: t('Edit student accommodations')
+        }))));
       }
     }
   }, {

package/es/moderating/components/resources/OutstandingQuizzesModal/presenter.js

@@ -140,7 +140,7 @@ export var OutstandingQuizzesModal = /*#__PURE__*/function (_Component) {
       }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
         onClick: this.saveAction,
         margin: "xxx-small",
-        variant: "primary",
+        color: "primary",
         disabled: !this.state.quizzesSelectedAndReadyToSubmit.length,
         "data-automation": "sdk-outstanding-quizzes-submit"
       }, t('Submit Manually'))));

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/ChoiceTypeTableRow/index.js

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

package/es/reporting/components/resources/NewQuizAndItemAnalysis/{AnswerSummaryTable/AnswerSummaryTableRow → AnswerFrequencySummary/ChoiceType/ChoiceTypeTableRow}/presenter.js

@@ -30,15 +30,15 @@ var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
 
 var _ref2 = /*#__PURE__*/React.createElement(IconXSolid, null);
 
-export var AnswerSummaryTableRow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  _inherits(AnswerSummaryTableRow, _Component);
+export var ChoiceTypeTableRow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(ChoiceTypeTableRow, _Component);
 
-  var _super = _createSuper(AnswerSummaryTableRow);
+  var _super = _createSuper(ChoiceTypeTableRow);
 
-  function AnswerSummaryTableRow() {
+  function ChoiceTypeTableRow() {
     var _this;
 
-    _classCallCheck(this, AnswerSummaryTableRow);
+    _classCallCheck(this, ChoiceTypeTableRow);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -112,7 +112,7 @@ export var AnswerSummaryTableRow = (_dec = themeable(theme, styles), _dec(_class
     return _this;
   }
 
-  return AnswerSummaryTableRow;
+  return ChoiceTypeTableRow;
 }(Component), _class2.displayName = 'Row', _class2.propTypes = {
   choice: PropTypes.shape({
     body: PropTypes.string,

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

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

package/es/reporting/components/resources/NewQuizAndItemAnalysis/{AnswerSummaryTable/ChoiceInfo → AnswerFrequencySummary/ChoiceType}/presenter.js

@@ -2,21 +2,36 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 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 { 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 AnswerSummaryTableRow from "../AnswerSummaryTableRow/index.js";
 import PropTypes from 'prop-types';
-export var ChoiceInfo = /*#__PURE__*/function (_Component) {
-  _inherits(ChoiceInfo, _Component);
+import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
+import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
+var styles = {
+  componentId: 'ZuPLN',
+  template: function template(theme) {
+    return "\n\n.ZuPLN_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}");
+  },
+  'tableWrapper': 'ZuPLN_rMrG'
+};
+import theme from "./theme.js";
+export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(ChoiceType, _Component);
 
-  var _super = _createSuper(ChoiceInfo);
+  var _super = _createSuper(ChoiceType);
 
-  function ChoiceInfo() {
+  function ChoiceType() {
     var _this;
 
-    _classCallCheck(this, ChoiceInfo);
+    _classCallCheck(this, ChoiceType);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -25,7 +40,7 @@ export var ChoiceInfo = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderRow = function (choice, choiceIndex) {
-      return /*#__PURE__*/React.createElement(AnswerSummaryTableRow, {
+      return /*#__PURE__*/React.createElement(ChoiceTypeTableRow, {
         key: choiceIndex,
         choice: choice,
         choiceIndex: choiceIndex
@@ -39,7 +54,7 @@ export var ChoiceInfo = /*#__PURE__*/function (_Component) {
         correct: false,
         count: payload.count
       };
-      return /*#__PURE__*/React.createElement(AnswerSummaryTableRow, {
+      return /*#__PURE__*/React.createElement(ChoiceTypeTableRow, {
         key: choiceIndex,
         choice: asChoice,
         choiceIndex: choiceIndex
@@ -49,19 +64,32 @@ export var ChoiceInfo = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(ChoiceInfo, [{
+  _createClass(ChoiceType, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          choices = _this$props.choices,
-          noAnswer = _this$props.noAnswer,
+          answerSummary = _this$props.answerSummary,
           itemId = _this$props.itemId;
+      var choices = answerSummary.choices,
+          noAnswer = answerSummary.no_answer;
       var numberOfChoices = choices.length;
       var spacingHeaderId = "answer-frequency-summary-spacing-".concat(itemId);
       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(Table, {
+      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, {
         caption: t('Answer Frequency Summary')
       }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: spacingHeaderId,
@@ -76,23 +104,13 @@ export var ChoiceInfo = /*#__PURE__*/function (_Component) {
         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)))))));
     }
   }]);
 
-  ChoiceInfo.displayName = "ChoiceInfo";
-  return ChoiceInfo;
-}(Component);
-ChoiceInfo.propTypes = {
+  ChoiceType.displayName = "ChoiceType";
+  return ChoiceType;
+}(Component), _class2.propTypes = {
   itemId: PropTypes.number,
-  choices: PropTypes.arrayOf(PropTypes.shape({
-    body: PropTypes.string,
-    correct: PropTypes.bool,
-    count: PropTypes.number,
-    percentage: PropTypes.number
-  })),
-  noAnswer: PropTypes.shape({
-    count: PropTypes.number,
-    percentage: PropTypes.number
-  })
-}.isRequired;
+  answerSummary: choiceTypeAnswerSummaryPropType
+}.isRequired, _temp)) || _class);

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

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

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

@@ -0,0 +1,54 @@
+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 '@instructure/quiz-interactions';
+import { ChoiceType } from "./ChoiceType/presenter.js";
+import { answerSummaryPropType } from "../propTypes.js";
+var afsTableComponentMap = new Map();
+afsTableComponentMap.set('true-false', ChoiceType);
+afsTableComponentMap.set('choice', ChoiceType);
+afsTableComponentMap.set('multi-answer', ChoiceType);
+export var AnswerFrequencySummary = /*#__PURE__*/function (_Component) {
+  _inherits(AnswerFrequencySummary, _Component);
+
+  var _super = _createSuper(AnswerFrequencySummary);
+
+  function AnswerFrequencySummary() {
+    var _this;
+
+    _classCallCheck(this, AnswerFrequencySummary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.render = function () {
+      var _this$props = _this.props,
+          itemId = _this$props.itemId,
+          answerSummary = _this$props.answerSummary,
+          interactionType = _this$props.interactionType;
+      var AfsTableComponent = afsTableComponentMap.get(interactionType);
+
+      if (!AfsTableComponent) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null);
+      }
+
+      return /*#__PURE__*/React.createElement(AfsTableComponent, {
+        itemId: itemId,
+        answerSummary: answerSummary
+      });
+    };
+
+    return _this;
+  }
+
+  return AnswerFrequencySummary;
+}(Component);
+AnswerFrequencySummary.propTypes = {
+  itemId: PropTypes.number,
+  answerSummary: answerSummaryPropType,
+  interactionType: PropTypes.string
+}.isRequired;

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

@@ -4,6 +4,7 @@ import { NewItemAnalysis as NewItemAnalysisPresenter } from "./presenter.js";
 
 function mapStateToProps(_state) {
   return {
+    // This would be able to switch of all AFS Tables
     showFrequencyTable: featureOn('show_improved_item_analysis_frequency_table')
   };
 }

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

@@ -10,20 +10,20 @@ import { Heading } from '@instructure/ui-heading';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import React, { Component } from 'react';
 var styles = {
-  componentId: 'bQIMq',
+  componentId: 'ewlJT',
   template: function template(theme) {
-    return "\n\n.bQIMq_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.bQIMq_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.bQIMq_bwlc,.bQIMq_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.bQIMq_bqdH{row-gap:24px}\n\n.bQIMq_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.bQIMq_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.bQIMq_fFDJ{display:none}\n\n.bQIMq_fxkJ{margin-top:-8px}\n\n.bQIMq_esVF{min-height:48px}\n\n.bQIMq_eTZq{position:relative}\n\n.bQIMq_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.bQIMq_fkgx{max-width:100%;width:calc(25% + 350px)}");
+    return "\n\n.ewlJT_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', "}\n\n.ewlJT_bwlc{gap:24px;justify-content:space-between;position:relative;row-gap:32px}\n\n.ewlJT_bwlc,.ewlJT_bqdH{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap}\n\n.ewlJT_bqdH{row-gap:24px}\n\n.ewlJT_NpIG{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:0}\n\n.ewlJT_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.ewlJT_fFDJ{display:none}\n\n.ewlJT_fxkJ{margin-top:-8px}\n\n.ewlJT_esVF{min-height:48px}\n\n.ewlJT_eTZq{position:relative}\n\n.ewlJT_eTZq:after{background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff);content:\"\";height:48px;left:0;position:absolute;top:0;width:100%}\n\n.ewlJT_cVld{max-width:100%;width:calc(25% + 350px)}");
   },
-  'cardWrapper': 'bQIMq_eKXQ',
-  'itemCardInnerContainer': 'bQIMq_bwlc',
-  'metricsContainer': 'bQIMq_bqdH',
-  'itemCardToggleButtonWrapper': 'bQIMq_NpIG',
-  'metricNumberContext': 'bQIMq_eoBe',
-  'hiddenMetrics': 'bQIMq_fFDJ',
-  'itemBodyToggleButtonWrapper': 'bQIMq_fxkJ',
-  'itemBody': 'bQIMq_esVF',
-  'hiddenItemBody': 'bQIMq_eTZq',
-  'answerSummaryTableContainer': 'bQIMq_fkgx'
+  'cardWrapper': 'ewlJT_eKXQ',
+  'itemCardInnerContainer': 'ewlJT_bwlc',
+  'metricsContainer': 'ewlJT_bqdH',
+  'itemCardToggleButtonWrapper': 'ewlJT_NpIG',
+  'metricNumberContext': 'ewlJT_eoBe',
+  'hiddenMetrics': 'ewlJT_fFDJ',
+  'itemBodyToggleButtonWrapper': 'ewlJT_fxkJ',
+  'itemBody': 'ewlJT_esVF',
+  'hiddenItemBody': 'ewlJT_eTZq',
+  'answerFrequencySummaryContainer': 'ewlJT_cVld'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -36,13 +36,12 @@ import AnalysisMetric from "../AnalysisMetric/index.js";
 import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
 import classnames from 'classnames';
 import { interactionTypesNameDictionary } from "../../../../../common/util/interactionTypeMetadata.js";
-import AnswerSummaryTable from "../AnswerSummaryTable/index.js";
+import AnswerFrequencySummary from "../AnswerFrequencySummary/index.js";
 import { itemAnalysisPropType } from "../propTypes.js";
 import { Flex } from '@instructure/ui-flex';
 import { RichContentRenderer, ensureMathIsReady, ensureMathRendered } from '@instructure/quiz-rce';
 import { ensureImagesLoaded } from "../../../../../common/util/printUtils.js";
 import { PropTypes } from '@instructure/quiz-interactions';
-var supportedTables = ['choice', 'true-false', 'multi-answer'];
 export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewItemAnalysis, _Component);
 
@@ -194,19 +193,16 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }))))));
     };
 
-    _this.renderAnswerSummaryTable = function (itemId, answer_summary, isSupportedTable, metricsClass) {
-      return /*#__PURE__*/React.createElement("div", {
+    _this.renderAnswerSummaryTable = function (itemId, answer_summary, metricsClass, interactionType) {
+      return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement("div", {
         className: metricsClass
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.answerSummaryTableContainer
-      }, isSupportedTable && /*#__PURE__*/React.createElement(Flex, {
-        direction: "row"
-      }, /*#__PURE__*/React.createElement(Flex.Item, {
-        shouldGrow: true
-      }, /*#__PURE__*/React.createElement(AnswerSummaryTable, {
+        className: styles.answerFrequencySummaryContainer
+      }, /*#__PURE__*/React.createElement(AnswerFrequencySummary, {
         itemId: itemId,
-        answerSummary: answer_summary
-      })))));
+        answerSummary: answer_summary,
+        interactionType: interactionType
+      }))));
     };
 
     return _this;
@@ -256,7 +252,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
           metadata = itemAnalysis.metadata,
           scores = itemAnalysis.scores;
       var itemId = metadata.item_id;
-      var isSupportedTable = supportedTables.includes(metadata.interaction_type);
+      var interactionType = metadata.interaction_type;
       var metricsClass = classnames(_defineProperty({}, styles.hiddenMetrics, !this.state.metricsExpanded));
       var itemBodyClass = classnames(styles.itemBody, _defineProperty({}, styles.hiddenItemBody, this.isBodyHigherThanContainer() && !this.state.bodyExpanded));
       var title = (_metadata$item_title = metadata.item_title) !== null && _metadata$item_title !== void 0 ? _metadata$item_title : t('Untitled item');
@@ -280,7 +276,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 && /*#__PURE__*/React.createElement(Flex.Item, null, this.renderAnswerSummaryTable(itemId, answer_summary, isSupportedTable, metricsClass))));
+      }, 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)));
     }
   }]);
 

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

@@ -157,8 +157,9 @@ export var NewQuizAndItemAnalysisReportCardPresenter = (_dec = themeable(theme,
       var _this$props3 = this.props,
           fetchInProgress = _this$props3.fetchInProgress,
           name = _this$props3.name,
-          quizAnalysis = _this$props3.quizAnalysis;
-      var reportCardStyles = classnames(styles.reportCard, _defineProperty({}, styles.emptyReportCard, !quizAnalysis));
+          quizAnalysis = _this$props3.quizAnalysis,
+          analysisError = _this$props3.analysisError;
+      var reportCardStyles = classnames(styles.reportCard, _defineProperty({}, styles.emptyReportCard, !quizAnalysis && !analysisError));
       return /*#__PURE__*/React.createElement(Card, {
         className: reportCardStyles
       }, /*#__PURE__*/React.createElement("div", {