@instructure/quiz-core 17.64.1-rc.2 → 17.64.1-rc.6

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

@@ -7,6 +7,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 var _dec, _class, _class2, _temp;
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import classNames from 'classnames';
 import { AccessibleContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -17,6 +18,7 @@ import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
 import { themeable } from '@instructure/ui-themeable';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { scoreToLetterGrade } from '@instructure/grading-utils';
 import { withI18nSupport } from '@instructure/quiz-common';
 import FormattedDuration from "../../../shared/FormattedDuration/index.js";
 import { formatTime } from "../../../../util/formatTimespan.js";
@@ -114,6 +116,26 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         }, alerts));
       }
     }
+  }, {
+    key: "renderLetterGrade",
+    value: function renderLetterGrade() {
+      var letterGrade = scoreToLetterGrade(this.percentageVal * 100, this.props.gradingScheme);
+      var gradeText = t('Grade for this attempt');
+      var alt = t('Grade for this attempt: { grade }', {
+        grade: letterGrade
+      });
+      return /*#__PURE__*/React.createElement(AccessibleContent, {
+        alt: alt
+      }, /*#__PURE__*/React.createElement(View, {
+        as: "div"
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "xx-large",
+        weight: "bold",
+        color: "primary"
+      }, letterGrade)), /*#__PURE__*/React.createElement(Text, {
+        color: "secondary"
+      }, gradeText));
+    }
   }, {
     key: "renderScoreStats",
     value: function renderScoreStats() {
@@ -186,7 +208,7 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         className: classNames('fs-mask', styles.info)
       }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, /*#__PURE__*/React.createElement(Heading, {
         level: "h2"
-      }, t('Assessment Statistics'))), this.renderScoreStats(), /*#__PURE__*/React.createElement("div", {
+      }, t('Assessment Statistics'))), this.props.restrictQuantitativeData ? this.renderLetterGrade() : this.renderScoreStats(), /*#__PURE__*/React.createElement("div", {
         className: styles.infoWrapper
       }, this.renderTime()))));
     }
@@ -286,8 +308,16 @@ export var Info = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   Info.displayName = "Info";
   return Info;
 }(withI18nSupport(Component)), _class2.propTypes = {
+  gradingScheme: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.number
+  })),
   quizSession: ImmutablePropTypes.record.isRequired,
   quizSessionResult: ImmutablePropTypes.record.isRequired,
+  restrictQuantitativeData: PropTypes.bool,
   sessionItemResults: ImmutablePropTypes.list.isRequired
+}, _class2.defaultProps = {
+  gradingScheme: [],
+  restrictQuantitativeData: false
 }, _temp)) || _class);
 export default Info;

package/es/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -136,7 +136,7 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
     value: function renderHeader() {
       return /*#__PURE__*/React.createElement("div", {
         className: styles.sessionItemResultHeader
-      }, this.renderResultPosition(), this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints());
+      }, this.renderResultPosition(), !this.props.restrictQuantitativeData && (this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints()));
     }
   }, {
     key: "renderResultPosition",
@@ -345,6 +345,7 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   editGraderFeedback: PropTypes.func,
   hideGraderFeedback: PropTypes.bool,
   itemResultsModifications: ImmutablePropTypes.map,
+  restrictQuantitativeData: PropTypes.bool,
   sessionItem: ImmutablePropTypes.record.isRequired,
   sessionItemResult: ImmutablePropTypes.record.isRequired,
   shouldRenderAnswerFeedback: PropTypes.bool,
@@ -353,6 +354,7 @@ export var SessionItemResult = (_dec = themeable(theme, styles), _dec(_class = (
   editGraderFeedback: null,
   hideGraderFeedback: false,
   itemResultsModifications: null,
+  restrictQuantitativeData: false,
   shouldRenderAnswerFeedback: false,
   shouldRenderTopBorder: true
 }, _temp)) || _class);

package/es/common/components/resources/sessionItemResult/SessionItemResultsList/index.js

@@ -6,6 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 var _dec, _class, _class2, _temp;
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
 import { themeable } from '@instructure/ui-themeable';
@@ -44,6 +45,7 @@ export var SessionItemResultsList = (_dec = themeable(theme, styles), _dec(_clas
       return /*#__PURE__*/React.createElement(SessionItemResult, {
         appContainer: _this.props.appContainer,
         key: sessionItem.id,
+        restrictQuantitativeData: _this.props.restrictQuantitativeData,
         sessionItem: sessionItem,
         sessionItemResult: sessionItem.sessionItemResult,
         shouldRenderTopBorder: shouldRenderTopBorder
@@ -93,6 +95,9 @@ export var SessionItemResultsList = (_dec = themeable(theme, styles), _dec(_clas
   return SessionItemResultsList;
 }(Component), _class2.propTypes = {
   appContainer: CustomPropTypes.selectors.isRequired,
+  restrictQuantitativeData: PropTypes.bool,
   sessionItems: ImmutablePropTypes.list.isRequired
+}, _class2.defaultProps = {
+  restrictQuantitativeData: false
 }, _temp)) || _class);
 export default SessionItemResultsList;

package/es/common/reducers/analyses.js

@@ -10,7 +10,7 @@ export var fetchInProgressKey = 'fetchInProgress';
 export var generationInProgressKey = 'generationInProgress';
 export var statusPollingInProgressKey = 'statusPollingInProgress';
 export var errorKey = 'analysisError';
-export var defaultState = fromJS((_fromJS = {}, _defineProperty(_fromJS, quizAnalysisKey, void 0), _defineProperty(_fromJS, itemAnalysesKey, void 0), _defineProperty(_fromJS, fetchInProgressKey, false), _defineProperty(_fromJS, generationInProgressKey, false), _defineProperty(_fromJS, statusPollingInProgressKey, false), _defineProperty(_fromJS, errorKey, void 0), _fromJS));
+export var defaultState = fromJS((_fromJS = {}, _defineProperty(_fromJS, quizAnalysisKey, void 0), _defineProperty(_fromJS, itemAnalysesKey, void 0), _defineProperty(_fromJS, fetchInProgressKey, true), _defineProperty(_fromJS, generationInProgressKey, false), _defineProperty(_fromJS, statusPollingInProgressKey, false), _defineProperty(_fromJS, errorKey, void 0), _fromJS));
 export default (function () {
   var state = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultState;
   var action = arguments.length > 1 ? arguments[1] : void 0;

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

@@ -57,8 +57,9 @@ export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_te
 }(Component), _class2.propTypes = {
   metricKey: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
   suffix: PropTypes.string
 }, _class2.defaultProps = {
+  value: void 0,
   suffix: ''
 }, _temp)) || _class);

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

@@ -65,11 +65,13 @@ export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class
 }(Component), _class2.propTypes = {
   metricKey: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   popoverDescription: PropTypes.shape({
     title: PropTypes.string,
     subtitle: PropTypes.string,
     body: PropTypes.string,
     screenReaderLabel: PropTypes.string
   }).isRequired
+}, _class2.defaultProps = {
+  value: void 0
 }, _temp)) || _class);

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

@@ -75,20 +75,24 @@ export var Row = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
         key: _this.props.choiceIndex
       }, /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
-          padding: '0px'
+          padding: '0px',
+          fontWeight: 'bold'
         }
       }, _this.renderIcon(correct)), /*#__PURE__*/React.createElement(Table.RowHeader, {
         theme: {
-          padding: cellPadding
+          padding: cellPadding,
+          fontWeight: 'bold'
         },
         className: styles.tableBody
       }, _this.renderMiddleCell(correct, extractTextFromHtml(_this.props.choice.body))), /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
-          padding: cellPadding
+          padding: cellPadding,
+          fontWeight: 'bold'
         }
       }, _this.renderMiddleCell(correct, _this.props.choice.count)), /*#__PURE__*/React.createElement(Table.Cell, {
         theme: {
-          padding: cellPadding
+          padding: cellPadding,
+          fontWeight: 'bold'
         },
         textAlign: "center"
       }, _this.renderLastCell(correct, "".concat(_this.props.choice.percentage, "%"))));

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

@@ -48,7 +48,10 @@ export var AnswerSummaryTable = (_dec = themeable(theme, styles), _dec(_class =
         className: styles.tableWrapper
       }, /*#__PURE__*/React.createElement(Heading, {
         margin: "large 0 small 0",
-        level: "h3"
+        level: "h3",
+        theme: {
+          h3FontWeight: 'normal'
+        }
       }, t('Answer Frequency Summary')), /*#__PURE__*/React.createElement(ChoiceInfo, {
         itemId: itemId,
         choices: choices,

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

@@ -143,7 +143,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
         metricKey: "difficulty_index",
         label: t('Item Difficulty'),
-        value: t.number(scores.difficulty_index),
+        value: scores.difficulty_index,
         popoverDescription: difficultyIndex
       })), /*#__PURE__*/React.createElement(Flex.Item, {
         margin: "none medium none none"
@@ -162,7 +162,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
         metricKey: "discrimination_index",
         label: t('Discrimination Index'),
-        value: t.number(scores.discrimination_index),
+        value: scores.discrimination_index,
         popoverDescription: discriminationIndex
       })))), /*#__PURE__*/React.createElement(Flex.Item, {
         overflowY: "visible",
@@ -176,7 +176,7 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
         metricKey: "pearson_correlation",
         label: t('Corrected Item-Total Correlation Coefficient'),
-        value: t.number(scores.pearson_correlation),
+        value: scores.pearson_correlation,
         popoverDescription: pearsonCorrelation
       }))))));
     };
@@ -242,5 +242,5 @@ export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
   NewItemAnalysis.displayName = "NewItemAnalysis";
   return NewItemAnalysis;
 }(Component), _class2.propTypes = {
-  itemAnalysis: itemAnalysisPropType.isRequired
-}, _temp)) || _class);
+  itemAnalysis: itemAnalysisPropType
+}.isRequired, _temp)) || _class);

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

@@ -8,16 +8,17 @@ var _dec, _class, _class2, _temp;
 import { Heading } from '@instructure/ui-heading';
 import React, { Component } from 'react';
 var styles = {
-  componentId: 'fQZVs',
+  componentId: 'PCuaD',
   template: function template(theme) {
-    return "\n\n.fQZVs_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.fQZVs_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.fQZVs_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.fQZVs_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.fQZVs_dPzc,.fQZVs_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
+    return "\n\n.PCuaD_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.PCuaD_eKXQ{margin:").concat(theme.cardTopMargin || 'inherit', " 0 ").concat(theme.cardBottomMargin || 'inherit', " 0;padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.PCuaD_dYbQ{align-items:center;display:flex;height:502px;justify-content:center;padding:").concat(theme.cardWrapperPadding || 'inherit', "}\n\n.PCuaD_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.PCuaD_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.PCuaD_dPzc,.PCuaD_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
   },
-  'heading': 'fQZVs_eDnN',
-  'cardWrapper': 'fQZVs_eKXQ',
-  'container': 'fQZVs_crZr',
-  'expandButtonContainer': 'fQZVs_bTHH',
-  'metricGroup': 'fQZVs_dPzc',
-  'metricsWrapper': 'fQZVs_cpZE'
+  'heading': 'PCuaD_eDnN',
+  'cardWrapper': 'PCuaD_eKXQ',
+  'skeletonCardWrapper': 'PCuaD_dYbQ',
+  'container': 'PCuaD_crZr',
+  'expandButtonContainer': 'PCuaD_bTHH',
+  'metricGroup': 'PCuaD_dPzc',
+  'metricsWrapper': 'PCuaD_cpZE'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
@@ -29,6 +30,8 @@ import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
 import AnalysisMetric from "../AnalysisMetric/index.js";
 import { ScoreDistribution } from "../charts/ScoreDistribution/presenter.js";
 import { quizAnalysisPropType } from "../propTypes.js";
+import PropTypes from 'prop-types';
+import { Spinner } from '@instructure/ui-spinner';
 import { cronbachsAlpha, standardDeviation } from "./popoverContent.js";
 export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAnalysis, _Component);
@@ -63,28 +66,23 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         className: styles.metricGroup
       }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
         metricKey: "stddev",
-        value: t.number(scores === null || scores === void 0 ? void 0 : scores.stddev),
+        value: scores === null || scores === void 0 ? void 0 : scores.stddev,
         label: t('Standard Deviation'),
         popoverDescription: standardDeviation
       }), /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
         metricKey: "cronbachs_alpha",
-        value: t.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha),
+        value: scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha,
         label: t('Cronbach\'s Alpha'),
         popoverDescription: cronbachsAlpha
       })));
     };
 
-    return _this;
-  }
-
-  _createClass(NewQuizAnalysis, [{
-    key: "render",
-    value: function render() {
-      var quizAnalysis = this.props.quizAnalysis;
+    _this.renderContent = function () {
+      var quizAnalysis = _this.props.quizAnalysis;
       var scores = quizAnalysis.scores,
           attempts = quizAnalysis.attempts,
           metadata = quizAnalysis.metadata;
-      var expanded = this.state.expanded;
+      var expanded = _this.state.expanded;
       return /*#__PURE__*/React.createElement(Card, {
         className: styles.cardWrapper
       }, /*#__PURE__*/React.createElement("div", {
@@ -117,7 +115,7 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       }, /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "median_percentage",
         label: t('Median Score'),
-        value: t.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage),
+        value: scores === null || scores === void 0 ? void 0 : scores.median_percentage,
         suffix: "%"
       }), /*#__PURE__*/React.createElement(AnalysisMetric, {
         metricKey: "mean_elapsed_sec",
@@ -126,19 +124,39 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       })), /*#__PURE__*/React.createElement("div", {
         className: styles.expandButtonContainer
       }, /*#__PURE__*/React.createElement(ExpandButton, {
-        onClick: this.handleToggle,
+        onClick: _this.handleToggle,
         title: expanded ? t('collapse quiz analysis') : t('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && this.renderExpanded(), /*#__PURE__*/React.createElement(ScoreDistribution, {
-        decileDistribution: quizAnalysis.scores.decile_distribution
+      }))), expanded && _this.renderExpanded(), /*#__PURE__*/React.createElement(ScoreDistribution, {
+        decileDistribution: scores === null || scores === void 0 ? void 0 : scores.decile_distribution
       }));
+    };
+
+    return _this;
+  }
+
+  _createClass(NewQuizAnalysis, [{
+    key: "render",
+    value: function render() {
+      var fetchInProgress = this.props.fetchInProgress;
+
+      if (fetchInProgress) {
+        return /*#__PURE__*/React.createElement(Card, {
+          className: styles.skeletonCardWrapper
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          renderTitle: t('Loading quiz analysis data')
+        }));
+      } else {
+        return this.renderContent();
+      }
     }
   }]);
 
   NewQuizAnalysis.displayName = "NewQuizAnalysis";
   return NewQuizAnalysis;
 }(Component), _class2.propTypes = {
-  quizAnalysis: quizAnalysisPropType.isRequired
-}, _class2.defaultProps = {
+  quizAnalysis: quizAnalysisPropType,
+  fetchInProgress: PropTypes.bool
+}.isRequired, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js

@@ -2,6 +2,8 @@ export default function generator(_ref) {
   var spacing = _ref.spacing;
   return {
     metricGroupPaddingTop: spacing.medium,
+    cardTopMargin: spacing.small,
+    cardBottomMargin: spacing.medium,
     viewPaddingRight: spacing.large,
     viewPaddingTop: spacing.medium,
     headingPadding: spacing.medium,

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

@@ -62,7 +62,7 @@ export var ScoreDistribution = (_dec = themeable(theme, styles), _dec(_class = (
       }, t('Score Distribution'))), /*#__PURE__*/React.createElement(QuintileDistribution, {
         animateDelay: 1000,
         animateDuration: 1000,
-        visualDistribution: this.props.decileDistribution,
+        visualDistribution: this.props.decileDistribution || [],
         calculateLabelForColumn: this.calculateLabelForColumn
       }), /*#__PURE__*/React.createElement("div", {
         className: styles.chartLabel

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

@@ -6,64 +6,122 @@ import React, { Component } from 'react';
 import { Heading } from '@instructure/ui-heading';
 import NewItemAnalysis from "./NewItemAnalysis/index.js";
 import NewQuizAnalysis from "./NewQuizAnalysis/index.js";
-import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Flex } from '@instructure/ui-flex';
 import { AnalysisUpdateDate } from "./AnalysisUpdateDate/index.js";
 import { itemAnalysisPropType, quizAnalysisPropType } from "./propTypes.js";
 import PropTypes from 'prop-types';
-
-var _ref = /*#__PURE__*/React.createElement(Spinner, null);
-
+import { QuizzesSpinner } from "../../../../common/components/shared/spinner/Spinner.js";
+import { Spinner } from '@instructure/ui-spinner';
+import { Button } from '@instructure/ui-buttons';
+import { Text } from '@instructure/ui-text';
 export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAndItemAnalysisPresenter, _Component);
 
   var _super = _createSuper(NewQuizAndItemAnalysisPresenter);
 
   function NewQuizAndItemAnalysisPresenter() {
+    var _this;
+
     _classCallCheck(this, NewQuizAndItemAnalysisPresenter);
 
-    return _super.apply(this, arguments);
+    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.renderItemAnalyses = function () {
+      var itemAnalyses = _this.props.itemAnalyses;
+      return /*#__PURE__*/React.createElement("div", null, itemAnalyses.map(function (itemAnalysis) {
+        return /*#__PURE__*/React.createElement(NewItemAnalysis, {
+          key: itemAnalysis.metadata.item_id,
+          itemAnalysis: itemAnalysis
+        });
+      }));
+    };
+
+    _this.renderSpinner = function () {
+      return /*#__PURE__*/React.createElement(Flex, {
+        padding: "medium",
+        justifyItems: "center",
+        alignItems: "center"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: t('Loading item analyses data')
+      }));
+    };
+
+    _this.renderOngoingGenerationButton = function () {
+      return /*#__PURE__*/React.createElement(Button, {
+        color: "primary-inverse",
+        interaction: "disabled",
+        margin: "0 0 x-small 0"
+      }, /*#__PURE__*/React.createElement(QuizzesSpinner, {
+        size: "x-small",
+        color: "brand",
+        minHeight: "0",
+        mainText: t('Generation In Progress'),
+        fontSize: "medium"
+      }));
+    };
+
+    _this.renderStartGenerationButton = function () {
+      return /*#__PURE__*/React.createElement(Button, {
+        color: "primary-inverse",
+        margin: "0 0 x-small 0",
+        onClick: _this.handleGeneration,
+        theme: {
+          lineHeight: '24px'
+        }
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "medium"
+      }, t('Generate Report')));
+    };
+
+    _this.renderGenerationButton = function () {
+      return _this.props.generationInProgress ? _this.renderOngoingGenerationButton() : _this.renderStartGenerationButton();
+    };
+
+    _this.handleGeneration = function (_event) {
+      var filter = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'last_attempt';
+
+      _this.props.generateReports(filter);
+    };
+
+    return _this;
   }
 
   _createClass(NewQuizAndItemAnalysisPresenter, [{
-    key: "renderContent",
-    value: function renderContent() {
+    key: "render",
+    value: function render() {
       var _this$props = this.props,
-          quizAnalysis = _this$props.quizAnalysis,
-          itemAnalyses = _this$props.itemAnalyses;
+          analysisError = _this$props.analysisError,
+          fetchInProgress = _this$props.fetchInProgress,
+          generationInProgress = _this$props.generationInProgress,
+          quizAnalysis = _this$props.quizAnalysis;
+      var shouldShowError = analysisError && !fetchInProgress && !generationInProgress;
       return /*#__PURE__*/React.createElement("div", {
         className: "fs-mask"
       }, /*#__PURE__*/React.createElement(Flex, {
-        justifyItems: "end",
+        alignItems: "end",
         width: "82.5rem",
-        margin: "auto"
-      }, /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
+        margin: "auto",
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        overflowY: "visible"
+      }, !fetchInProgress && this.renderGenerationButton()), /*#__PURE__*/React.createElement(Flex.Item, null, shouldShowError && /*#__PURE__*/React.createElement(Text, {
+        size: "x-small",
+        weight: "bold",
+        color: "danger"
+      }, analysisError)), /*#__PURE__*/React.createElement(Flex.Item, null, !fetchInProgress && /*#__PURE__*/React.createElement(AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp
-      })), /*#__PURE__*/React.createElement(NewQuizAnalysis, {
-        quizAnalysis: quizAnalysis
-      }), /*#__PURE__*/React.createElement(Heading, {
-        level: "h3",
+      }))), /*#__PURE__*/React.createElement(NewQuizAnalysis, {
+        quizAnalysis: quizAnalysis,
+        fetchInProgress: fetchInProgress
+      }), !fetchInProgress && /*#__PURE__*/React.createElement(Heading, {
+        level: "h2",
         color: "primary"
-      }, t('Item Analysis')), itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
-        return /*#__PURE__*/React.createElement(NewItemAnalysis, {
-          key: itemAnalysis.metadata.item_id,
-          itemAnalysis: itemAnalysis
-        });
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          quizAnalysis = _this$props2.quizAnalysis,
-          itemAnalyses = _this$props2.itemAnalyses;
-
-      if (quizAnalysis && itemAnalyses) {
-        return this.renderContent();
-      } else {
-        return _ref;
-      }
+      }, t('Item Analysis')), fetchInProgress ? this.renderSpinner() : this.renderItemAnalyses());
     }
   }]);
 
@@ -72,9 +130,14 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
 }(Component);
 NewQuizAndItemAnalysisPresenter.propTypes = {
   quizAnalysis: quizAnalysisPropType,
-  itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType)
+  itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType),
+  fetchInProgress: PropTypes.bool.isRequired,
+  generationInProgress: PropTypes.bool.isRequired,
+  analysisError: PropTypes.string,
+  generateReports: PropTypes.func.isRequired
 };
 NewQuizAndItemAnalysisPresenter.defaultProps = {
+  analysisError: void 0,
   quizAnalysis: void 0,
   itemAnalyses: void 0
 };

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

@@ -1,11 +1,20 @@
 import t from '@instructure/quiz-i18n/es/format-message';
 
+var formatNumbers = function formatNumbers(value) {
+  if (typeof value === 'number') {
+    return t.number(value);
+  }
+
+  return value;
+};
+
 var getSanitizedMetricValue = function getSanitizedMetricValue(value, suffix) {
   if (value === null || value === void 0) {
     return t('N/A');
   }
 
-  return suffix ? value + suffix : value;
+  var formattedValue = formatNumbers(value);
+  return suffix ? formattedValue + suffix : formattedValue;
 };
 
 export { getSanitizedMetricValue };

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

@@ -103,7 +103,7 @@ export var withAnalysisStatePresenter = function withAnalysisStatePresenter(Orig
                 case 0:
                   hasStoredAnalyses = quizAnalysis && itemAnalyses;
 
-                  if (!(!hasStoredAnalyses && !fetchInProgress)) {
+                  if (hasStoredAnalyses) {
                     _context.next = 4;
                     break;
                   }

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

@@ -21,6 +21,8 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -41,6 +43,8 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _gradingUtils = require("@instructure/grading-utils");
+
 var _quizCommon = require("@instructure/quiz-common");
 
 var _index = _interopRequireDefault(require("../../../shared/FormattedDuration/index.js"));
@@ -143,6 +147,26 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
         }, alerts));
       }
     }
+  }, {
+    key: "renderLetterGrade",
+    value: function renderLetterGrade() {
+      var letterGrade = (0, _gradingUtils.scoreToLetterGrade)(this.percentageVal * 100, this.props.gradingScheme);
+      var gradeText = (0, _formatMessage.default)('Grade for this attempt');
+      var alt = (0, _formatMessage.default)('Grade for this attempt: { grade }', {
+        grade: letterGrade
+      });
+      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        alt: alt
+      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "xx-large",
+        weight: "bold",
+        color: "primary"
+      }, letterGrade)), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "secondary"
+      }, gradeText));
+    }
   }, {
     key: "renderScoreStats",
     value: function renderScoreStats() {
@@ -215,7 +239,7 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
         className: (0, _classnames.default)('fs-mask', styles.info)
       }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         level: "h2"
-      }, (0, _formatMessage.default)('Assessment Statistics'))), this.renderScoreStats(), /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _formatMessage.default)('Assessment Statistics'))), this.props.restrictQuantitativeData ? this.renderLetterGrade() : this.renderScoreStats(), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.infoWrapper
       }, this.renderTime()))));
     }
@@ -314,9 +338,17 @@ var Info = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   Info.displayName = "Info";
   return Info;
 }((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
+  gradingScheme: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string,
+    value: _propTypes.default.number
+  })),
   quizSession: _reactImmutableProptypes.default.record.isRequired,
   quizSessionResult: _reactImmutableProptypes.default.record.isRequired,
+  restrictQuantitativeData: _propTypes.default.bool,
   sessionItemResults: _reactImmutableProptypes.default.list.isRequired
+}, _class2.defaultProps = {
+  gradingScheme: [],
+  restrictQuantitativeData: false
 }, _temp)) || _class);
 exports.Info = Info;
 var _default = Info;

package/lib/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -168,7 +168,7 @@ var SessionItemResult = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
     value: function renderHeader() {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.sessionItemResultHeader
-      }, this.renderResultPosition(), this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints());
+      }, this.renderResultPosition(), !this.props.restrictQuantitativeData && (this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints()));
     }
   }, {
     key: "renderResultPosition",
@@ -376,6 +376,7 @@ var SessionItemResult = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   editGraderFeedback: _propTypes.default.func,
   hideGraderFeedback: _propTypes.default.bool,
   itemResultsModifications: _reactImmutableProptypes.default.map,
+  restrictQuantitativeData: _propTypes.default.bool,
   sessionItem: _reactImmutableProptypes.default.record.isRequired,
   sessionItemResult: _reactImmutableProptypes.default.record.isRequired,
   shouldRenderAnswerFeedback: _propTypes.default.bool,
@@ -384,6 +385,7 @@ var SessionItemResult = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   editGraderFeedback: null,
   hideGraderFeedback: false,
   itemResultsModifications: null,
+  restrictQuantitativeData: false,
   shouldRenderAnswerFeedback: false,
   shouldRenderTopBorder: true
 }, _temp)) || _class);

package/lib/common/components/resources/sessionItemResult/SessionItemResultsList/index.js

@@ -19,6 +19,8 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
 var _uiHeading = require("@instructure/ui-heading");
@@ -68,6 +70,7 @@ var SessionItemResultsList = (_dec = (0, _uiThemeable.themeable)(_theme.default,
       return /*#__PURE__*/_react.default.createElement(_index.default, {
         appContainer: _this.props.appContainer,
         key: sessionItem.id,
+        restrictQuantitativeData: _this.props.restrictQuantitativeData,
         sessionItem: sessionItem,
         sessionItemResult: sessionItem.sessionItemResult,
         shouldRenderTopBorder: shouldRenderTopBorder
@@ -116,7 +119,10 @@ var SessionItemResultsList = (_dec = (0, _uiThemeable.themeable)(_theme.default,
   return SessionItemResultsList;
 }(_react.Component), _class2.propTypes = {
   appContainer: _CustomPropTypes.default.selectors.isRequired,
+  restrictQuantitativeData: _propTypes.default.bool,
   sessionItems: _reactImmutableProptypes.default.list.isRequired
+}, _class2.defaultProps = {
+  restrictQuantitativeData: false
 }, _temp)) || _class);
 exports.SessionItemResultsList = SessionItemResultsList;
 var _default = SessionItemResultsList;

package/lib/common/reducers/analyses.js

@@ -27,7 +27,7 @@ var statusPollingInProgressKey = 'statusPollingInProgress';
 exports.statusPollingInProgressKey = statusPollingInProgressKey;
 var errorKey = 'analysisError';
 exports.errorKey = errorKey;
-var defaultState = (0, _immutable.fromJS)((_fromJS = {}, (0, _defineProperty2.default)(_fromJS, quizAnalysisKey, void 0), (0, _defineProperty2.default)(_fromJS, itemAnalysesKey, void 0), (0, _defineProperty2.default)(_fromJS, fetchInProgressKey, false), (0, _defineProperty2.default)(_fromJS, generationInProgressKey, false), (0, _defineProperty2.default)(_fromJS, statusPollingInProgressKey, false), (0, _defineProperty2.default)(_fromJS, errorKey, void 0), _fromJS));
+var defaultState = (0, _immutable.fromJS)((_fromJS = {}, (0, _defineProperty2.default)(_fromJS, quizAnalysisKey, void 0), (0, _defineProperty2.default)(_fromJS, itemAnalysesKey, void 0), (0, _defineProperty2.default)(_fromJS, fetchInProgressKey, true), (0, _defineProperty2.default)(_fromJS, generationInProgressKey, false), (0, _defineProperty2.default)(_fromJS, statusPollingInProgressKey, false), (0, _defineProperty2.default)(_fromJS, errorKey, void 0), _fromJS));
 exports.defaultState = defaultState;
 
 var _default = function _default() {

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

@@ -75,9 +75,10 @@ var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
 }(_react.Component), _class2.propTypes = {
   metricKey: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]).isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),
   suffix: _propTypes.default.string
 }, _class2.defaultProps = {
+  value: void 0,
   suffix: ''
 }, _temp)) || _class);
 exports.AnalysisMetric = AnalysisMetric;

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

@@ -84,12 +84,14 @@ var AnalysisPopoverMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default,
 }(_react.Component), _class2.propTypes = {
   metricKey: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   popoverDescription: _propTypes.default.shape({
     title: _propTypes.default.string,
     subtitle: _propTypes.default.string,
     body: _propTypes.default.string,
     screenReaderLabel: _propTypes.default.string
   }).isRequired
+}, _class2.defaultProps = {
+  value: void 0
 }, _temp)) || _class);
 exports.AnalysisPopoverMetric = AnalysisPopoverMetric;

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

@@ -97,20 +97,24 @@ var Row = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cla
         key: _this.props.choiceIndex
       }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
-          padding: '0px'
+          padding: '0px',
+          fontWeight: 'bold'
         }
       }, _this.renderIcon(correct)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, {
         theme: {
-          padding: cellPadding
+          padding: cellPadding,
+          fontWeight: 'bold'
         },
         className: styles.tableBody
       }, _this.renderMiddleCell(correct, (0, _quizInteractions.extractTextFromHtml)(_this.props.choice.body))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
-          padding: cellPadding
+          padding: cellPadding,
+          fontWeight: 'bold'
         }
       }, _this.renderMiddleCell(correct, _this.props.choice.count)), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
         theme: {
-          padding: cellPadding
+          padding: cellPadding,
+          fontWeight: 'bold'
         },
         textAlign: "center"
       }, _this.renderLastCell(correct, "".concat(_this.props.choice.percentage, "%"))));

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

@@ -69,7 +69,10 @@ var AnswerSummaryTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
         className: styles.tableWrapper
       }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
         margin: "large 0 small 0",
-        level: "h3"
+        level: "h3",
+        theme: {
+          h3FontWeight: 'normal'
+        }
       }, (0, _formatMessage.default)('Answer Frequency Summary')), /*#__PURE__*/_react.default.createElement(_presenter.ChoiceInfo, {
         itemId: itemId,
         choices: choices,

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

@@ -175,7 +175,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         metricKey: "difficulty_index",
         label: (0, _formatMessage.default)('Item Difficulty'),
-        value: _formatMessage.default.number(scores.difficulty_index),
+        value: scores.difficulty_index,
         popoverDescription: _popoverContent.difficultyIndex
       })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
         margin: "none medium none none"
@@ -194,7 +194,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         metricKey: "discrimination_index",
         label: (0, _formatMessage.default)('Discrimination Index'),
-        value: _formatMessage.default.number(scores.discrimination_index),
+        value: scores.discrimination_index,
         popoverDescription: _popoverContent.discriminationIndex
       })))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
         overflowY: "visible",
@@ -208,7 +208,7 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         metricKey: "pearson_correlation",
         label: (0, _formatMessage.default)('Corrected Item-Total Correlation Coefficient'),
-        value: _formatMessage.default.number(scores.pearson_correlation),
+        value: scores.pearson_correlation,
         popoverDescription: _popoverContent.pearsonCorrelation
       }))))));
     };
@@ -273,6 +273,6 @@ var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   NewItemAnalysis.displayName = "NewItemAnalysis";
   return NewItemAnalysis;
 }(_react.Component), _class2.propTypes = {
-  itemAnalysis: _propTypes.itemAnalysisPropType.isRequired
-}, _temp)) || _class);
+  itemAnalysis: _propTypes.itemAnalysisPropType
+}.isRequired, _temp)) || _class);
 exports.NewItemAnalysis = NewItemAnalysis;

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

@@ -41,21 +41,26 @@ var _presenter = require("../charts/ScoreDistribution/presenter.js");
 
 var _propTypes = require("../propTypes.js");
 
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _uiSpinner = require("@instructure/ui-spinner");
+
 var _popoverContent = require("./popoverContent.js");
 
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'fQZVs',
+  componentId: 'PCuaD',
   template: function template(theme) {
-    return "\n\n.fQZVs_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.fQZVs_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.fQZVs_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.fQZVs_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.fQZVs_dPzc,.fQZVs_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
+    return "\n\n.PCuaD_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.PCuaD_eKXQ{margin:").concat(theme.cardTopMargin || 'inherit', " 0 ").concat(theme.cardBottomMargin || 'inherit', " 0;padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.PCuaD_dYbQ{align-items:center;display:flex;height:502px;justify-content:center;padding:").concat(theme.cardWrapperPadding || 'inherit', "}\n\n.PCuaD_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.PCuaD_bTHH{position:absolute;right:").concat(theme.viewPaddingRight || 'inherit', ";top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.PCuaD_dPzc,.PCuaD_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
   },
-  'heading': 'fQZVs_eDnN',
-  'cardWrapper': 'fQZVs_eKXQ',
-  'container': 'fQZVs_crZr',
-  'expandButtonContainer': 'fQZVs_bTHH',
-  'metricGroup': 'fQZVs_dPzc',
-  'metricsWrapper': 'fQZVs_cpZE'
+  'heading': 'PCuaD_eDnN',
+  'cardWrapper': 'PCuaD_eKXQ',
+  'skeletonCardWrapper': 'PCuaD_dYbQ',
+  'container': 'PCuaD_crZr',
+  'expandButtonContainer': 'PCuaD_bTHH',
+  'metricGroup': 'PCuaD_dPzc',
+  'metricsWrapper': 'PCuaD_cpZE'
 };
 var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAnalysis, _Component);
@@ -90,28 +95,23 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         className: styles.metricGroup
       }, /*#__PURE__*/_react.default.createElement(_index3.default, {
         metricKey: "stddev",
-        value: _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.stddev),
+        value: scores === null || scores === void 0 ? void 0 : scores.stddev,
         label: (0, _formatMessage.default)('Standard Deviation'),
         popoverDescription: _popoverContent.standardDeviation
       }), /*#__PURE__*/_react.default.createElement(_index3.default, {
         metricKey: "cronbachs_alpha",
-        value: _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha),
+        value: scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha,
         label: (0, _formatMessage.default)('Cronbach\'s Alpha'),
         popoverDescription: _popoverContent.cronbachsAlpha
       })));
     };
 
-    return _this;
-  }
-
-  (0, _createClass2.default)(NewQuizAnalysis, [{
-    key: "render",
-    value: function render() {
-      var quizAnalysis = this.props.quizAnalysis;
+    _this.renderContent = function () {
+      var quizAnalysis = _this.props.quizAnalysis;
       var scores = quizAnalysis.scores,
           attempts = quizAnalysis.attempts,
           metadata = quizAnalysis.metadata;
-      var expanded = this.state.expanded;
+      var expanded = _this.state.expanded;
       return /*#__PURE__*/_react.default.createElement(_index2.default, {
         className: styles.cardWrapper
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -144,7 +144,7 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         metricKey: "median_percentage",
         label: (0, _formatMessage.default)('Median Score'),
-        value: _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage),
+        value: scores === null || scores === void 0 ? void 0 : scores.median_percentage,
         suffix: "%"
       }), /*#__PURE__*/_react.default.createElement(_index4.default, {
         metricKey: "mean_elapsed_sec",
@@ -153,19 +153,39 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.expandButtonContainer
       }, /*#__PURE__*/_react.default.createElement(_index.default, {
-        onClick: this.handleToggle,
+        onClick: _this.handleToggle,
         title: expanded ? (0, _formatMessage.default)('collapse quiz analysis') : (0, _formatMessage.default)('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_presenter.ScoreDistribution, {
-        decileDistribution: quizAnalysis.scores.decile_distribution
+      }))), expanded && _this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_presenter.ScoreDistribution, {
+        decileDistribution: scores === null || scores === void 0 ? void 0 : scores.decile_distribution
       }));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NewQuizAnalysis, [{
+    key: "render",
+    value: function render() {
+      var fetchInProgress = this.props.fetchInProgress;
+
+      if (fetchInProgress) {
+        return /*#__PURE__*/_react.default.createElement(_index2.default, {
+          className: styles.skeletonCardWrapper
+        }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+          renderTitle: (0, _formatMessage.default)('Loading quiz analysis data')
+        }));
+      } else {
+        return this.renderContent();
+      }
     }
   }]);
   NewQuizAnalysis.displayName = "NewQuizAnalysis";
   return NewQuizAnalysis;
 }(_react.Component), _class2.propTypes = {
-  quizAnalysis: _propTypes.quizAnalysisPropType.isRequired
-}, _class2.defaultProps = {
+  quizAnalysis: _propTypes.quizAnalysisPropType,
+  fetchInProgress: _propTypes2.default.bool
+}.isRequired, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);
 exports.NewQuizAnalysis = NewQuizAnalysis;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js

@@ -9,6 +9,8 @@ function generator(_ref) {
   var spacing = _ref.spacing;
   return {
     metricGroupPaddingTop: spacing.medium,
+    cardTopMargin: spacing.small,
+    cardBottomMargin: spacing.medium,
     viewPaddingRight: spacing.large,
     viewPaddingTop: spacing.medium,
     headingPadding: spacing.medium,

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

@@ -84,7 +84,7 @@ var ScoreDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       }, (0, _formatMessage.default)('Score Distribution'))), /*#__PURE__*/_react.default.createElement(_index.default, {
         animateDelay: 1000,
         animateDuration: 1000,
-        visualDistribution: this.props.decileDistribution,
+        visualDistribution: this.props.decileDistribution || [],
         calculateLabelForColumn: this.calculateLabelForColumn
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.chartLabel

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

@@ -25,8 +25,6 @@ var _index = _interopRequireDefault(require("./NewItemAnalysis/index.js"));
 
 var _index2 = _interopRequireDefault(require("./NewQuizAnalysis/index.js"));
 
-var _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
-
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _uiFlex = require("@instructure/ui-flex");
@@ -37,7 +35,13 @@ var _propTypes = require("./propTypes.js");
 
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
-var _ref = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+var _Spinner = require("../../../../common/components/shared/spinner/Spinner.js");
+
+var _uiSpinner = require("@instructure/ui-spinner");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
 
 var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NewQuizAndItemAnalysisPresenter, _Component);
@@ -45,48 +49,107 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
   var _super = (0, _createSuper2.default)(NewQuizAndItemAnalysisPresenter);
 
   function NewQuizAndItemAnalysisPresenter() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, NewQuizAndItemAnalysisPresenter);
-    return _super.apply(this, arguments);
+
+    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.renderItemAnalyses = function () {
+      var itemAnalyses = _this.props.itemAnalyses;
+      return /*#__PURE__*/_react.default.createElement("div", null, itemAnalyses.map(function (itemAnalysis) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          key: itemAnalysis.metadata.item_id,
+          itemAnalysis: itemAnalysis
+        });
+      }));
+    };
+
+    _this.renderSpinner = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        padding: "medium",
+        justifyItems: "center",
+        alignItems: "center"
+      }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        renderTitle: (0, _formatMessage.default)('Loading item analyses data')
+      }));
+    };
+
+    _this.renderOngoingGenerationButton = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        color: "primary-inverse",
+        interaction: "disabled",
+        margin: "0 0 x-small 0"
+      }, /*#__PURE__*/_react.default.createElement(_Spinner.QuizzesSpinner, {
+        size: "x-small",
+        color: "brand",
+        minHeight: "0",
+        mainText: (0, _formatMessage.default)('Generation In Progress'),
+        fontSize: "medium"
+      }));
+    };
+
+    _this.renderStartGenerationButton = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        color: "primary-inverse",
+        margin: "0 0 x-small 0",
+        onClick: _this.handleGeneration,
+        theme: {
+          lineHeight: '24px'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "medium"
+      }, (0, _formatMessage.default)('Generate Report')));
+    };
+
+    _this.renderGenerationButton = function () {
+      return _this.props.generationInProgress ? _this.renderOngoingGenerationButton() : _this.renderStartGenerationButton();
+    };
+
+    _this.handleGeneration = function (_event) {
+      var filter = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'last_attempt';
+
+      _this.props.generateReports(filter);
+    };
+
+    return _this;
   }
 
   (0, _createClass2.default)(NewQuizAndItemAnalysisPresenter, [{
-    key: "renderContent",
-    value: function renderContent() {
+    key: "render",
+    value: function render() {
       var _this$props = this.props,
-          quizAnalysis = _this$props.quizAnalysis,
-          itemAnalyses = _this$props.itemAnalyses;
+          analysisError = _this$props.analysisError,
+          fetchInProgress = _this$props.fetchInProgress,
+          generationInProgress = _this$props.generationInProgress,
+          quizAnalysis = _this$props.quizAnalysis;
+      var shouldShowError = analysisError && !fetchInProgress && !generationInProgress;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "fs-mask"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        justifyItems: "end",
+        alignItems: "end",
         width: "82.5rem",
-        margin: "auto"
-      }, /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
+        margin: "auto",
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        overflowY: "visible"
+      }, !fetchInProgress && this.renderGenerationButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, shouldShowError && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "x-small",
+        weight: "bold",
+        color: "danger"
+      }, analysisError)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, !fetchInProgress && /*#__PURE__*/_react.default.createElement(_index3.AnalysisUpdateDate, {
         date: quizAnalysis.created_timestamp
-      })), /*#__PURE__*/_react.default.createElement(_index2.default, {
-        quizAnalysis: quizAnalysis
-      }), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        level: "h3",
+      }))), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        quizAnalysis: quizAnalysis,
+        fetchInProgress: fetchInProgress
+      }), !fetchInProgress && /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h2",
         color: "primary"
-      }, (0, _formatMessage.default)('Item Analysis')), itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
-          key: itemAnalysis.metadata.item_id,
-          itemAnalysis: itemAnalysis
-        });
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          quizAnalysis = _this$props2.quizAnalysis,
-          itemAnalyses = _this$props2.itemAnalyses;
-
-      if (quizAnalysis && itemAnalyses) {
-        return this.renderContent();
-      } else {
-        return _ref;
-      }
+      }, (0, _formatMessage.default)('Item Analysis')), fetchInProgress ? this.renderSpinner() : this.renderItemAnalyses());
     }
   }]);
   NewQuizAndItemAnalysisPresenter.displayName = "NewQuizAndItemAnalysisPresenter";
@@ -96,9 +159,14 @@ var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component) {
 exports.NewQuizAndItemAnalysisPresenter = NewQuizAndItemAnalysisPresenter;
 NewQuizAndItemAnalysisPresenter.propTypes = {
   quizAnalysis: _propTypes.quizAnalysisPropType,
-  itemAnalyses: _propTypes2.default.arrayOf(_propTypes.itemAnalysisPropType)
+  itemAnalyses: _propTypes2.default.arrayOf(_propTypes.itemAnalysisPropType),
+  fetchInProgress: _propTypes2.default.bool.isRequired,
+  generationInProgress: _propTypes2.default.bool.isRequired,
+  analysisError: _propTypes2.default.string,
+  generateReports: _propTypes2.default.func.isRequired
 };
 NewQuizAndItemAnalysisPresenter.defaultProps = {
+  analysisError: void 0,
   quizAnalysis: void 0,
   itemAnalyses: void 0
 };

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

@@ -9,12 +9,21 @@ exports.getSanitizedMetricValue = void 0;
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var formatNumbers = function formatNumbers(value) {
+  if (typeof value === 'number') {
+    return _formatMessage.default.number(value);
+  }
+
+  return value;
+};
+
 var getSanitizedMetricValue = function getSanitizedMetricValue(value, suffix) {
   if (value === null || value === void 0) {
     return (0, _formatMessage.default)('N/A');
   }
 
-  return suffix ? value + suffix : value;
+  var formattedValue = formatNumbers(value);
+  return suffix ? formattedValue + suffix : formattedValue;
 };
 
 exports.getSanitizedMetricValue = getSanitizedMetricValue;

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

@@ -122,7 +122,7 @@ var withAnalysisStatePresenter = function withAnalysisStatePresenter(OriginalCom
                 case 0:
                   hasStoredAnalyses = quizAnalysis && itemAnalyses;
 
-                  if (!(!hasStoredAnalyses && !fetchInProgress)) {
+                  if (hasStoredAnalyses) {
                     _context.next = 4;
                     break;
                   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.64.1-rc.2+819871daa",
+  "version": "17.64.1-rc.6+4603e7609",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -40,12 +40,13 @@
     "lib"
   ],
   "dependencies": {
+    "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "17.64.1-rc.2+819871daa",
-    "@instructure/quiz-i18n": "17.64.1-rc.2+819871daa",
-    "@instructure/quiz-interactions": "17.64.1-rc.2+819871daa",
-    "@instructure/quiz-number-input": "17.64.1-rc.2+819871daa",
-    "@instructure/quiz-rce": "17.64.1-rc.2+819871daa",
+    "@instructure/quiz-common": "17.64.1-rc.6+4603e7609",
+    "@instructure/quiz-i18n": "17.64.1-rc.6+4603e7609",
+    "@instructure/quiz-interactions": "17.64.1-rc.6+4603e7609",
+    "@instructure/quiz-number-input": "17.64.1-rc.6+4603e7609",
+    "@instructure/quiz-rce": "17.64.1-rc.6+4603e7609",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +107,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.64.1-rc.2+819871daa",
+    "instructure-validations": "17.64.1-rc.6+4603e7609",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -157,7 +158,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.64.1-rc.2+819871daa",
+    "quiz-presets": "17.64.1-rc.6+4603e7609",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -173,5 +174,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "819871daafc1c68e4691ee2efbdfe6108144329e"
+  "gitHead": "4603e76094b6047dcfd896183b6a5c8243b7cc92"
 }