@instructure/quiz-core 17.19.2 → 17.20.0

package/lib/reporting/components/itemAnalysis/ItemAnalysisRow/presenter.js

@@ -0,0 +1,337 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ItemAnalysisRow = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _OutcomeList = _interopRequireDefault(require("@instructure/outcomes-ui/es/containers/OutcomeList"));
+
+var _uiMetric = require("@instructure/ui-metric");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _quizRce = require("@instructure/quiz-rce");
+
+var _index = _interopRequireDefault(require("../../../../common/components/shared/Card/index.js"));
+
+var _index2 = _interopRequireDefault(require("../../../../common/components/shared/ExpandButton/index.js"));
+
+var _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
+
+var _index3 = _interopRequireDefault(require("../AnswerFrequencySummary/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../charts/QuintileDistribution/index.js"));
+
+var _index5 = _interopRequireDefault(require("../../charts/Legend/index.js"));
+
+var _index6 = _interopRequireDefault(require("../../Caption/index.js"));
+
+var _index7 = _interopRequireDefault(require("../../MetricsListItem/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'eCUxk',
+  template: function template(theme) {
+    return "\n\n.eCUxk_cQXk{margin-bottom:".concat(theme.itemAnalysisRowMargin || 'inherit', ";padding:").concat(theme.itemAnalysisRowPadding || 'inherit', ";position:relative}\n\n.eCUxk_dlpV{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between}\n\n.eCUxk_fAhB{color:").concat(theme.headerTextColor || 'inherit', ";font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.eCUxk_dzph{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding-bottom:").concat(theme.metricsRowLowerPadding || 'inherit', "}\n\n.eCUxk_dFNV{color:").concat(theme.metricNoteColor || 'inherit', ";font-size:").concat(theme.metricNoteFontSize || 'inherit', "}\n\n.eCUxk_cloC{flex:1 0 35%;font-size:").concat(theme.stemFontSize || 'inherit', ";line-height:").concat(theme.stemLineHeight || 'inherit', ";margin-bottom:").concat(theme.stemMargin || 'inherit', "}\n\n.eCUxk_cloC p{margin:0}\n\n.eCUxk_bQrf{flex:0 1 42rem}\n\n.eCUxk_eiMu{justify-content:center}\n\n.eCUxk_bwKH{color:").concat(theme.emptyTextColor || 'inherit', ";flex:0 1 42rem;padding:").concat(theme.emptyTextPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .eCUxk_bwKH,[dir=rtl] .eCUxk_bwKH{text-align:center}\n\n.eCUxk_sIdV{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0 -1rem}\n\n.eCUxk_dvfr{flex:10 1 45%}\n\n.eCUxk_dYYR{flex:1 1 auto;min-width:1%}\n\n.eCUxk_eFpQ{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:0 ").concat(theme.answerDistributionPadding || 'inherit', ";position:relative}\n\n.eCUxk_dFwC{padding:0 ").concat(theme.answerDistributionChartPadding || 'inherit', ";width:19rem}\n\n.eCUxk_bqaR{padding:0 ").concat(theme.answerDistributionLegendPadding || 'inherit', "}\n\n.eCUxk_RMvh{background-color:").concat(theme.answerDistributionSwatchColor || 'inherit', "}\n\n.eCUxk_dMVr{display:flex;margin:0 -1rem}\n\n@media screen and (--phoneBreakPoint){.eCUxk_eFpQ{padding:0}.eCUxk_eiMu{flex-basis:50%}}");
+  },
+  'itemAnalysisRow': 'eCUxk_cQXk',
+  'headerRow': 'eCUxk_dlpV',
+  'headerText': 'eCUxk_fAhB',
+  'metricsRow': 'eCUxk_dzph',
+  'metricNote': 'eCUxk_dFNV',
+  'stem': 'eCUxk_cloC',
+  'metrics': 'eCUxk_bQrf',
+  'metric': 'eCUxk_eiMu',
+  'emptyText': 'eCUxk_bwKH',
+  'answerAnalysis': 'eCUxk_sIdV',
+  'answerTableSection': 'eCUxk_dvfr',
+  'answerDistributionSection': 'eCUxk_dYYR',
+  'answerDistribution': 'eCUxk_eFpQ',
+  'answerDistributionChart': 'eCUxk_dFwC',
+  'answerDistributionLegend': 'eCUxk_bqaR',
+  'answerDistributionSwatch': 'eCUxk_RMvh',
+  'outcomeAlignments': 'eCUxk_dMVr'
+};
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+
+var ItemAnalysisRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+  (0, _inherits2.default)(ItemAnalysisRow, _withI18nSupport);
+
+  var _super = (0, _createSuper2.default)(ItemAnalysisRow);
+
+  function ItemAnalysisRow() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ItemAnalysisRow);
+
+    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.toggleExpanded = function () {
+      _this.props.toggleExpanded(_this.props.itemId);
+
+      var _this$props = _this.props,
+          position = _this$props.position,
+          expanded = _this$props.expanded;
+      var text = (0, _formatMessage.default)("{\n      expanded, select,\n      false {Expanded item {position, number}}\n      other {Collapsed item {position, number}}\n    }", {
+        position: position,
+        expanded: expanded
+      });
+
+      _this.props.screenreaderNotification(text);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ItemAnalysisRow, [{
+    key: "renderExpandButton",
+    value: function renderExpandButton() {
+      var _this$props2 = this.props,
+          position = _this$props2.position,
+          expanded = _this$props2.expanded;
+      var title = (0, _formatMessage.default)("{\n      expanded, select,\n      false {Expand item {position, number} details}\n      other {Collapse item {position, number} details}\n    }", {
+        position: position,
+        expanded: expanded
+      });
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+        onClick: this.toggleExpanded,
+        title: title,
+        isExpanded: expanded,
+        "data-automation": "sdk-reporting-expand-button"
+      });
+    }
+  }, {
+    key: "renderHeader",
+    value: function renderHeader() {
+      var position = this.props.position;
+      var interactionType = this.props.itemAnalysis.interactionTypeName();
+      var pointsPossible = this.props.itemAnalysis.pointsPossible;
+      var separator = ' | ';
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headerRow
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headerText
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h3"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Item {position, number}', {
+        position: position
+      })), interactionType, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), (0, _formatMessage.default)('{pointsPossible, number} points possible', {
+        pointsPossible: pointsPossible
+      }))), this.props.itemAnalysis.isPresent() && this.renderExpandButton());
+    }
+  }, {
+    key: "renderStem",
+    value: function renderStem() {
+      return /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+        customStyles: styles.stem,
+        content: this.props.itemAnalysis.itemBody
+      });
+    }
+  }, {
+    key: "defaultMetricsList",
+    value: function defaultMetricsList() {
+      var mean = _formatMessage.default.rich('{score}<0>/{possible, number} pts</0>', {
+        0: function _(_ref) {
+          var children = _ref.children;
+          return /*#__PURE__*/_react.default.createElement("span", {
+            key: "mean",
+            className: styles.metricNote
+          }, children);
+        },
+        score: this.props.itemAnalysis.meanScore(this.locale) || 0,
+        possible: this.props.itemAnalysis.pointsPossible
+      });
+
+      return /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_index7.default, {
+        key: "difficultyIndex",
+        renderLabel: (0, _formatMessage.default)('Difficulty Index'),
+        renderValue: this.props.itemAnalysis.difficultyIndex(this.locale),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index7.default, {
+        key: "discriminationIndex",
+        renderLabel: (0, _formatMessage.default)('Discrimination Index'),
+        renderValue: this.props.itemAnalysis.discriminationIndex(this.locale),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index7.default, {
+        key: "rpb",
+        renderLabel: (0, _formatMessage.default)('RPB'),
+        renderValue: this.props.itemAnalysis.pointBiserial(this.locale),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index7.default, {
+        key: "meanEarnedScore",
+        renderLabel: (0, _formatMessage.default)('Mean Earned Score'),
+        renderValue: mean,
+        className: styles.metric,
+        isGroupChild: true
+      }));
+    }
+  }, {
+    key: "renderMetrics",
+    value: function renderMetrics() {
+      var list = _react.default.Children.count(this.props.children) === 0 ? this.defaultMetricsList() : /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, this.props.children);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metrics
+      }, list);
+    }
+  }, {
+    key: "renderAnswerAnalysisChart",
+    value: function renderAnswerAnalysisChart() {
+      if (this.props.itemAnalysis.choiceInfo().size === 0) {
+        return;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.answerTableSection
+      }, /*#__PURE__*/_react.default.createElement(_index6.default, {
+        text: (0, _formatMessage.default)('Answer Frequency Summary')
+      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+        itemAnalysis: this.props.itemAnalysis
+      })));
+    }
+  }, {
+    key: "renderAnswerAnalysis",
+    value: function renderAnswerAnalysis() {
+      if (this.props.expanded) {
+        var quintile = this.props.itemAnalysis.quintile();
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.answerAnalysis
+        }, this.renderAnswerAnalysisChart(), /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.answerDistributionSection,
+          "data-automation": "sdk-reporting-answer-distribution"
+        }, /*#__PURE__*/_react.default.createElement(_index6.default, {
+          text: (0, _formatMessage.default)('Performance by Quintile')
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.answerDistribution
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.answerDistributionChart
+        }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+          visualDistribution: quintile,
+          animateDelay: this.props.animateDelay,
+          animateDuration: this.props.animateDuration
+        })), /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.answerDistributionLegend
+        }, /*#__PURE__*/_react.default.createElement(_index5.default, {
+          series: [{
+            className: styles.answerDistributionSwatch,
+            label: (0, _formatMessage.default)('Number of Students')
+          }]
+        }))))));
+      }
+    }
+  }, {
+    key: "renderOutcomeAlignments",
+    value: function renderOutcomeAlignments() {
+      var _this$props3 = this.props,
+          expanded = _this$props3.expanded,
+          itemAnalysis = _this$props3.itemAnalysis,
+          outcomesEndpoint = _this$props3.outcomesEndpoint,
+          outcomesToken = _this$props3.outcomesToken;
+
+      if (expanded && outcomesEndpoint && itemAnalysis.outcomeAlignmentSetGuid) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.outcomeAlignments
+        }, /*#__PURE__*/_react.default.createElement(_index6.default, {
+          text: (0, _formatMessage.default)('Outcomes')
+        }, /*#__PURE__*/_react.default.createElement(_OutcomeList.default, {
+          artifactType: "quizzes.item",
+          artifactId: itemAnalysis.itemId,
+          alignmentSetId: itemAnalysis.outcomeAlignmentSetGuid,
+          host: outcomesEndpoint,
+          jwt: outcomesToken,
+          emptyText: (0, _formatMessage.default)('No outcomes are aligned'),
+          screenreaderNotification: this.props.screenreaderNotification,
+          liveRegion: _quizCommon.liveRegion
+        })));
+      }
+    }
+  }, {
+    key: "renderNotFound",
+    value: function renderNotFound() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.emptyText
+      }, (0, _formatMessage.default)('No submissions yet'));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.props.itemAnalysis.isLoaded()) {
+        return _ref2;
+      }
+
+      var present = this.props.itemAnalysis.isPresent();
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        key: this.props.itemId,
+        className: styles.itemAnalysisRow
+      }, this.renderHeader(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricsRow
+      }, this.renderStem(), present ? this.renderMetrics() : this.renderNotFound()), present && this.renderAnswerAnalysis(), this.renderOutcomeAlignments());
+    }
+  }]);
+  ItemAnalysisRow.displayName = "ItemAnalysisRow";
+  return ItemAnalysisRow;
+}((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
+  animateDelay: _propTypes.default.number,
+  animateDuration: _propTypes.default.number,
+  expanded: _propTypes.default.bool,
+  itemAnalysis: _reactImmutableProptypes.default.record.isRequired,
+  itemId: _propTypes.default.string.isRequired,
+  position: _propTypes.default.number.isRequired,
+  toggleExpanded: _propTypes.default.func.isRequired,
+  outcomesEndpoint: _propTypes.default.string,
+  outcomesToken: _propTypes.default.string,
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  children: _propTypes.default.arrayOf(_propTypes.default.node),
+  locale: _propTypes.default.string
+}, _class2.defaultProps = {
+  animateDelay: void 0,
+  animateDuration: void 0,
+  expanded: false,
+  outcomesEndpoint: null,
+  outcomesToken: null,
+  children: [],
+  locale: null
+}, _class2.contextTypes = {
+  locale: _propTypes.default.string
+}, _temp)) || _class);
+exports.ItemAnalysisRow = ItemAnalysisRow;
+var _default = ItemAnalysisRow;
+exports.default = _default;

package/lib/reporting/components/itemAnalysis/ItemAnalysisRow/theme.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      breakpoints = _ref.breakpoints;
+  return {
+    itemAnalysisRowPadding: spacing.small,
+    itemAnalysisRowMargin: spacing.small,
+    headerTextColor: colors.ash,
+    headerTextFontSize: typography.fontSizeXSmall,
+    metricNoteFontSize: typography.fontSizeMedium,
+    metricNoteColor: colors.ash,
+    metricsRowLowerPadding: spacing.large,
+    stemFontSize: typography.fontSizeXSmall,
+    stemLineHeight: typography.lineHeight,
+    stemMargin: spacing.small,
+    emptyTextPadding: spacing.small,
+    emptyTextColor: colors.ash,
+    answerDistributionPadding: spacing.small,
+    answerDistributionChartPadding: spacing.small,
+    answerDistributionLegendPadding: spacing.small,
+    answerDistributionSwatchColor: colors.electric,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
+  };
+}

package/lib/reporting/components/quizAnalysis/QuizAnalysisOverview.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizAnalysisOverview = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiMetric = require("@instructure/ui-metric");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../common/components/shared/FormattedDuration/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index2 = _interopRequireDefault(require("../../../common/components/shared/Card/index.js"));
+
+var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
+
+var _index3 = _interopRequireDefault(require("../charts/CentileDistribution/index.js"));
+
+var _index4 = _interopRequireDefault(require("../MetricsListItem/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fOAfX',
+  template: function template(theme) {
+    return "\n\n.fOAfX_bGBk{padding:".concat(theme.rootPadding || 'inherit', "}\n\n.fOAfX_CIyo{padding-bottom:").concat(theme.metricWrapperPadding || 'inherit', "}\n\n.fOAfX_CIyo,.fOAfX_gasz{margin-top:").concat(theme.wrapperMargin || 'inherit', "}\n\n@media screen and (--tabletBreakPoint){.fOAfX_eiMu{flex-basis:33.3%}}\n\n@media screen and (--phoneBreakPoint){.fOAfX_eiMu{flex-basis:50%}}");
+  },
+  'root': 'fOAfX_bGBk',
+  'metricWrapper': 'fOAfX_CIyo',
+  'wrapper': 'fOAfX_gasz',
+  'metric': 'fOAfX_eiMu'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+
+var QuizAnalysisOverview = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizAnalysisOverview, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizAnalysisOverview);
+
+  function QuizAnalysisOverview() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizAnalysisOverview);
+
+    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.renderBatchTimestamp = function () {
+      if (_this.props.quizAnalysis.batchTimestamp) {
+        var timestamp = Date.parse(_this.props.quizAnalysis.batchTimestamp);
+        return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          color: "secondary",
+          size: "x-small"
+        }, _ref, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Data Last Updated:')), "\xA0", _formatMessage.default.date(timestamp, 'medium'));
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizAnalysisOverview, [{
+    key: "defaulMetrics",
+    value: function defaulMetrics() {
+      var quizAnalysis = this.props.quizAnalysis;
+
+      var formattedElapsedTime = /*#__PURE__*/_react.default.createElement(_index.default, {
+        fontSize: "x-large",
+        seconds: quizAnalysis.meanElapsedTime()
+      });
+
+      return /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        key: "highScore",
+        renderLabel: (0, _formatMessage.default)('High Score'),
+        renderValue: quizAnalysis.highScore(),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        key: "lowScore",
+        renderLabel: (0, _formatMessage.default)('Low Score'),
+        renderValue: quizAnalysis.lowScore(),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        key: "meanScore",
+        renderLabel: (0, _formatMessage.default)('Mean Score'),
+        renderValue: quizAnalysis.meanScore(),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        key: "standardDeviation",
+        renderLabel: (0, _formatMessage.default)('Standard Deviation'),
+        renderValue: quizAnalysis.standardDeviation(),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        key: "meanElapsedTime",
+        renderLabel: (0, _formatMessage.default)('Mean Elapsed Time'),
+        renderValue: /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          size: "x-large"
+        }, formattedElapsedTime),
+        className: styles.metric,
+        isGroupChild: true
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        key: "cronbachsAlpha",
+        renderLabel: (0, _formatMessage.default)('Cronbach\'s Alpha'),
+        renderValue: quizAnalysis.cronbachsAlpha(),
+        className: styles.metric,
+        isGroupChild: true
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          animateDelay = _this$props.animateDelay,
+          animateDuration = _this$props.animateDuration,
+          quizAnalysis = _this$props.quizAnalysis,
+          quizTitle = _this$props.quizTitle;
+      if (!quizAnalysis.isLoaded()) return _ref2;
+      var list = _react.default.Children.count(this.props.children) === 0 ? this.defaulMetrics() : /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, this.props.children);
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+        className: styles.root
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h4",
+        as: "h2",
+        color: "primary"
+      }, quizTitle), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricWrapper
+      }, list), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.wrapper
+      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+        animateDelay: animateDelay,
+        animateDuration: animateDuration,
+        summaryDistribution: quizAnalysis.decileDistribution(),
+        visualDistribution: quizAnalysis.centileDistribution()
+      })), this.renderBatchTimestamp());
+    }
+  }]);
+  QuizAnalysisOverview.displayName = "QuizAnalysisOverview";
+  return QuizAnalysisOverview;
+}(_react.Component), _class2.propTypes = {
+  animateDelay: _propTypes.default.number,
+  animateDuration: _propTypes.default.number,
+  quizAnalysis: _reactImmutableProptypes.default.record.isRequired,
+  quizTitle: _propTypes.default.string.isRequired,
+  children: _propTypes.default.arrayOf(_propTypes.default.node)
+}, _class2.defaultProps = {
+  animateDelay: void 0,
+  animateDuration: void 0,
+  quizTitle: '',
+  children: []
+}, _temp)) || _class);
+exports.QuizAnalysisOverview = QuizAnalysisOverview;
+var _default = QuizAnalysisOverview;
+exports.default = _default;

package/lib/reporting/components/quizAnalysis/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      typography = _ref.typography,
+      colors = _ref.colors,
+      breakpoints = _ref.breakpoints;
+  return {
+    rootPadding: spacing.small,
+    wrapperMargin: spacing.small,
+    metricWrapperPadding: spacing.large,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    tabletBreakPoint: "max-width: ".concat(breakpoints.large)
+  };
+}

package/lib/reporting/components/resources/OutcomeAnalysis/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = exports.OutcomeAnalysis = void 0;
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var _alerts = require("../../../../common/actions/alerts.js");
+
+var _presenter = require("./presenter.js");
+
+function mapStateToProps(state) {
+  return {
+    appContainer: state.getIn(['ui', 'appContainer']),
+    contextUuid: state.getIn(['outcomes', 'contextUuid']),
+    outcomesHost: state.getIn(['outcomes', 'outcomesEndpoint']),
+    outcomesToken: state.getIn(['outcomes', 'outcomesToken'])
+  };
+}
+
+var mapDispatchToProps = {
+  screenreaderNotification: _alerts.screenreaderNotification
+};
+var OutcomeAnalysis = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.OutcomeAnalysis);
+exports.OutcomeAnalysis = OutcomeAnalysis;
+var _default = OutcomeAnalysis;
+exports.default = _default;