@instructure/quiz-core 17.56.1-rc.2 → 17.56.1-rc.3

package/es/common/util/formatTimespan.js

@@ -51,4 +51,13 @@ export function formatTime(time) {
     description: 'The character(s) inserted between "5 minutes" and "30 seconds" in ' + 'a timespan string like "5 minutes 30 seconds"'
   });
   return parts.join(separator);
+}
+export function formatTimeToFullNumeric(seconds) {
+  var hours = Math.floor(seconds / 3600);
+  var minutes = Math.floor(seconds % 3600 / 60);
+  var secs = seconds % 60;
+  var hoursStr = hours < 10 ? '0' + hours : hours;
+  var minutesStr = minutes < 10 ? '0' + minutes : minutes;
+  var secsStr = secs < 10 ? '0' + secs : secs;
+  return "".concat(hoursStr, ":").concat(minutesStr, ":").concat(secsStr);
 }

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

@@ -0,0 +1,2 @@
+import { MetricPopover } from "./presenter.js";
+export default MetricPopover;

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

@@ -0,0 +1,125 @@
+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 { View } from '@instructure/ui-view';
+import { CloseButton, IconButton } from '@instructure/ui-buttons';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { IconInfoLine } from '@instructure/ui-icons';
+import { Text } from '@instructure/ui-text';
+import { Popover } from '@instructure/ui-popover';
+import { Heading } from '@instructure/ui-heading';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+var styles = {
+  componentId: 'fSfiS',
+  template: function template(theme) {
+    return "\n\n.fSfiS_CkEK{padding-bottom:".concat(theme.headerPaddingBottom || 'inherit', "}\n\n.fSfiS_fSpJ{display:flex;justify-content:flex-end;margin-right:-10px;margin-top:-10px}");
+  },
+  'headerContainer': 'fSfiS_CkEK',
+  'closeIconContainer': 'fSfiS_fSpJ'
+};
+import PropTypes from 'prop-types';
+
+var _ref = /*#__PURE__*/React.createElement(IconInfoLine, {
+  size: "x-small"
+});
+
+export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(MetricPopover, _Component);
+
+  var _super = _createSuper(MetricPopover);
+
+  function MetricPopover() {
+    var _this;
+
+    _classCallCheck(this, MetricPopover);
+
+    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.state = {
+      isContentVisible: false
+    };
+
+    _this.showPopover = function () {
+      _this.setState({
+        isContentVisible: true
+      });
+    };
+
+    _this.hidePopover = function () {
+      _this.setState({
+        isContentVisible: false
+      });
+    };
+
+    _this.render = function () {
+      return /*#__PURE__*/React.createElement(Popover, {
+        renderTrigger: _this.renderPopoverTrigger(),
+        on: "click",
+        screenReaderLabel: _this.props.screenReaderLabel,
+        shouldContainFocus: true,
+        shouldReturnFocus: true,
+        onShowContent: _this.showPopover,
+        onHideContent: _this.hidePopover,
+        isShowingContent: _this.state.isContentVisible
+      }, /*#__PURE__*/React.createElement(View, {
+        padding: "medium",
+        as: "div",
+        display: "block",
+        width: "248px"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.closeIconContainer
+      }, /*#__PURE__*/React.createElement(CloseButton, {
+        onClick: _this.hidePopover,
+        screenReaderLabel: t('Close popover')
+      })), /*#__PURE__*/React.createElement("div", {
+        className: styles.headerContainer
+      }, /*#__PURE__*/React.createElement(Heading, {
+        level: "h3"
+      }, _this.props.title)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
+        theme: {
+          h5FontWeight: 700
+        },
+        level: "h5"
+      }, _this.props.subtitle), /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, _this.props.body))));
+    };
+
+    return _this;
+  }
+
+  _createClass(MetricPopover, [{
+    key: "renderPopoverTrigger",
+    value: function renderPopoverTrigger() {
+      return /*#__PURE__*/React.createElement(IconButton, {
+        size: "small",
+        theme: {
+          smallHeight: '18px',
+          transform: 'translateY(-1px)'
+        },
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: t('Metric tooltip'),
+        renderIcon: _ref
+      });
+    }
+  }]);
+
+  return MetricPopover;
+}(Component), _class2.propTypes = {
+  screenReaderLabel: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
+  body: PropTypes.string.isRequired
+}, _class2.defaultProps = {
+  subtitle: ''
+}, _temp)) || _class);

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

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

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

@@ -0,0 +1,2 @@
+import { NewQuizAnalysis } from "./presenter.js";
+export default NewQuizAnalysis;

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

@@ -0,0 +1,184 @@
+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 { Heading } from '@instructure/ui-heading';
+import { Metric } from '@instructure/ui-metric';
+import React, { Component } from 'react';
+var styles = {
+  componentId: 'bsfUh',
+  template: function template(theme) {
+    return "\n\n.bsfUh_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.bsfUh_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bsfUh_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.bsfUh_eckF{text-transform:uppercase}\n\n.bsfUh_dPzc,.bsfUh_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}\n\n.bsfUh_dPzc{margin-left:-8px}\n\n.bsfUh_dqHR{padding-left:5px}\n\n.bsfUh_bTHH{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}");
+  },
+  'heading': 'bsfUh_eDnN',
+  'cardWrapper': 'bsfUh_eKXQ',
+  'container': 'bsfUh_crZr',
+  'metricLabel': 'bsfUh_eckF',
+  'metricGroup': 'bsfUh_dPzc',
+  'metricsWrapper': 'bsfUh_cpZE',
+  'popoverContainer': 'bsfUh_dqHR',
+  'expandButtonContainer': 'bsfUh_bTHH'
+};
+import t from '@instructure/quiz-i18n/es/format-message';
+import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
+import { Text } from '@instructure/ui-text';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+import { getSanitizedMetricValue } from "../utils.js";
+import MetricPopover from "../MetricPopover/index.js";
+import { formatTimeToFullNumeric } from "../../../../../common/util/formatTimespan.js";
+import PropTypes from 'prop-types';
+import Card from "../../../../../common/components/shared/Card/index.js";
+var stdDevPopoverTexts = {
+  metricLabel: 'standard deviation',
+  title: 'Lorem ipsum ',
+  subtitle: 'subtitle',
+  body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
+  screenReaderLabel: 'standard deviation tooltip'
+};
+var cronbachsAlphaPopoverTexts = {
+  metricLabel: 'cronbach\'s alpha',
+  title: 'Lorem ipsum ',
+  subtitle: 'subtitle',
+  body: 'cronbach\'s alpha description',
+  screenReaderLabel: 'cronbach\'s alpha tooltip'
+};
+
+var _ref = /*#__PURE__*/React.createElement("br", null);
+
+export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(NewQuizAnalysis, _Component);
+
+  var _super = _createSuper(NewQuizAnalysis);
+
+  function NewQuizAnalysis() {
+    var _this;
+
+    _classCallCheck(this, NewQuizAnalysis);
+
+    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.state = {
+      expanded: false
+    };
+
+    _this.handleToggle = function () {
+      _this.setState({
+        expanded: !_this.state.expanded
+      });
+    };
+
+    _this.renderExpanded = function () {
+      var scores = _this.props.quizAnalysis.scores;
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.container
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.metricGroup
+      }, _this.renderMetric('median_percentage', t('median score'), t.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage), '%'), _this.renderMetricWithPopover('stddev', stdDevPopoverTexts, t.number(scores === null || scores === void 0 ? void 0 : scores.stddev)), _this.renderMetricWithPopover('cronbachs_alpha', cronbachsAlphaPopoverTexts, t.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha))));
+    };
+
+    return _this;
+  }
+
+  _createClass(NewQuizAnalysis, [{
+    key: "renderLabelWithPopover",
+    value: function renderLabelWithPopover(texts) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: styles.metricLabel
+      }, texts.metricLabel, /*#__PURE__*/React.createElement("span", {
+        className: styles.popoverContainer
+      }, /*#__PURE__*/React.createElement(MetricPopover, texts)));
+    }
+  }, {
+    key: "renderMetric",
+    value: function renderMetric(key, label, value, suffix) {
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
+          valueFontWeight: 500
+        },
+        textAlign: "start",
+        key: key,
+        renderLabel: /*#__PURE__*/React.createElement("span", {
+          className: styles.metricLabel
+        }, label),
+        renderValue: getSanitizedMetricValue(value, suffix)
+      });
+    }
+  }, {
+    key: "renderMetricWithPopover",
+    value: function renderMetricWithPopover(key, texts, value) {
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
+          valueFontWeight: 500
+        },
+        textAlign: "start",
+        key: key,
+        renderLabel: this.renderLabelWithPopover(texts),
+        renderValue: getSanitizedMetricValue(value)
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var quizAnalysis = this.props.quizAnalysis;
+      var scores = quizAnalysis.scores,
+          attempts = quizAnalysis.attempts,
+          metadata = quizAnalysis.metadata;
+      var expanded = this.state.expanded;
+      return /*#__PURE__*/React.createElement(Card, {
+        className: styles.cardWrapper
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.heading
+      }, /*#__PURE__*/React.createElement(Heading, {
+        level: "h4",
+        color: "primary"
+      }, t('Quiz summary:'), " ", metadata === null || metadata === void 0 ? void 0 : metadata.quiz_title)), /*#__PURE__*/React.createElement("div", {
+        className: styles.metricGroup
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.metricsWrapper
+      }, this.renderMetric('highscore', t('high score'), scores === null || scores === void 0 ? void 0 : scores.max_percentage, '%'), this.renderMetric('lowscore', t('low score'), scores === null || scores === void 0 ? void 0 : scores.min_percentage, '%'), this.renderMetric('meanscore', t('mean score'), scores === null || scores === void 0 ? void 0 : scores.mean_percentage, '%')), /*#__PURE__*/React.createElement("div", {
+        className: styles.metricsWrapper
+      }, this.renderMetric('average_attempts', t('average attempts'), t.number(attempts === null || attempts === void 0 ? void 0 : attempts.average_attempts)), this.renderMetric('mean_elapsed_sec', t('mean elapsed time'), formatTimeToFullNumeric(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec))), /*#__PURE__*/React.createElement("div", {
+        className: styles.expandButtonContainer
+      }, /*#__PURE__*/React.createElement(ExpandButton, {
+        onClick: this.handleToggle,
+        title: expanded ? t('collapse quiz analysis') : t('expand quiz analysis'),
+        isExpanded: expanded
+      }))), expanded && this.renderExpanded(), /*#__PURE__*/React.createElement(Text, {
+        size: "x-small"
+      }, _ref, /*#__PURE__*/React.createElement("b", null, t('Data Last Updated:')), "\xA0", t.date(Date.parse(quizAnalysis.created_timestamp), 'medium')));
+    }
+  }]);
+
+  NewQuizAnalysis.displayName = "NewQuizAnalysis";
+  return NewQuizAnalysis;
+}(Component), _class2.propTypes = {
+  quizAnalysis: PropTypes.shape({
+    created_timestamp: PropTypes.string,
+    metadata: PropTypes.shape({
+      quiz_title: PropTypes.string
+    }),
+    scores: PropTypes.shape({
+      decile_distribution: PropTypes.arrayOf(PropTypes.number),
+      cronbachs_alpha: PropTypes.number,
+      stddev: PropTypes.number,
+      median_percentage: PropTypes.number,
+      max_percentage: PropTypes.number,
+      min_percentage: PropTypes.number,
+      mean_percentage: PropTypes.number
+    }).isRequired,
+    attempts: PropTypes.shape({
+      mean_elapsed_sec: PropTypes.number,
+      students_completed: PropTypes.number,
+      students_not_finished: PropTypes.number,
+      students_without_attempt: PropTypes.number,
+      average_attempts: PropTypes.number
+    }).isRequired
+  }).isRequired
+}, _temp)) || _class);

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

@@ -0,0 +1,10 @@
+export default function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    metricGroupPaddingTop: spacing.medium,
+    viewPadding: spacing.small,
+    headingPadding: spacing.medium,
+    cardWrapperPadding: spacing.medium,
+    metricsColumnGap: '82px'
+  };
+}

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

@@ -6,11 +6,7 @@ import PropTypes from 'prop-types';
 import { Heading } from '@instructure/ui-heading';
 import { Metric, MetricGroup } from '@instructure/ui-metric';
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
-
-var _ref4 = /*#__PURE__*/React.createElement(Heading, {
-  level: "h3",
-  color: "primary"
-}, "Quiz analysis");
+import NewQuizAnalysis from "./NewQuizAnalysis/index.js";
 
 var _ref5 = /*#__PURE__*/React.createElement(Heading, {
   level: "h3",
@@ -95,26 +91,15 @@ export var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
     fetch();
   }, []);
 
+  var _ref4 = /*#__PURE__*/React.createElement(NewQuizAnalysis, {
+    quizAnalysis: quizAnalysis
+  });
+
   var renderContent = function renderContent() {
     /* eslint-disable react/jsx-no-literals */
     return /*#__PURE__*/React.createElement("div", {
       className: "fs-mask"
-    }, /*#__PURE__*/React.createElement(Heading, {
-      level: "h2",
-      color: "primary"
-    }, quizAnalysis.metadata.quiz_title), _ref4, /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(Metric, {
-      key: "highscore",
-      renderLabel: "HIGH SCORE",
-      renderValue: quizAnalysis.scores.max_percentage
-    }), /*#__PURE__*/React.createElement(Metric, {
-      key: "lowscore",
-      renderLabel: "LOW SCORE",
-      renderValue: quizAnalysis.scores.min_percentage
-    }), /*#__PURE__*/React.createElement(Metric, {
-      key: "meanscore",
-      renderLabel: "MEAN SCORE",
-      renderValue: quizAnalysis.scores.mean_percentage
-    })), _ref5, itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
+    }, _ref4, _ref5, itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
       return /*#__PURE__*/React.createElement(MetricGroup, {
         key: itemAnalysis.metadata.item_id
       }, /*#__PURE__*/React.createElement(Metric, {

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

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

package/lib/common/util/formatTimespan.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatTime = formatTime;
+exports.formatTimeToFullNumeric = formatTimeToFullNumeric;
 exports.formatTimespan = void 0;
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -65,4 +66,14 @@ function formatTime(time) {
     description: 'The character(s) inserted between "5 minutes" and "30 seconds" in ' + 'a timespan string like "5 minutes 30 seconds"'
   });
   return parts.join(separator);
+}
+
+function formatTimeToFullNumeric(seconds) {
+  var hours = Math.floor(seconds / 3600);
+  var minutes = Math.floor(seconds % 3600 / 60);
+  var secs = seconds % 60;
+  var hoursStr = hours < 10 ? '0' + hours : hours;
+  var minutesStr = minutes < 10 ? '0' + minutes : minutes;
+  var secsStr = secs < 10 ? '0' + secs : secs;
+  return "".concat(hoursStr, ":").concat(minutesStr, ":").concat(secsStr);
 }

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _presenter = require("./presenter.js");
+
+var _default = _presenter.MetricPopover;
+exports.default = _default;

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

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MetricPopover = 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 _uiView = require("@instructure/ui-view");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiPopover = require("@instructure/ui-popover");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fSfiS',
+  template: function template(theme) {
+    return "\n\n.fSfiS_CkEK{padding-bottom:".concat(theme.headerPaddingBottom || 'inherit', "}\n\n.fSfiS_fSpJ{display:flex;justify-content:flex-end;margin-right:-10px;margin-top:-10px}");
+  },
+  'headerContainer': 'fSfiS_CkEK',
+  'closeIconContainer': 'fSfiS_fSpJ'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconInfoLine, {
+  size: "x-small"
+});
+
+var MetricPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MetricPopover, _Component);
+
+  var _super = (0, _createSuper2.default)(MetricPopover);
+
+  function MetricPopover() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, MetricPopover);
+
+    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.state = {
+      isContentVisible: false
+    };
+
+    _this.showPopover = function () {
+      _this.setState({
+        isContentVisible: true
+      });
+    };
+
+    _this.hidePopover = function () {
+      _this.setState({
+        isContentVisible: false
+      });
+    };
+
+    _this.render = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
+        renderTrigger: _this.renderPopoverTrigger(),
+        on: "click",
+        screenReaderLabel: _this.props.screenReaderLabel,
+        shouldContainFocus: true,
+        shouldReturnFocus: true,
+        onShowContent: _this.showPopover,
+        onHideContent: _this.hidePopover,
+        isShowingContent: _this.state.isContentVisible
+      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        padding: "medium",
+        as: "div",
+        display: "block",
+        width: "248px"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.closeIconContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: _this.hidePopover,
+        screenReaderLabel: (0, _formatMessage.default)('Close popover')
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headerContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h3"
+      }, _this.props.title)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        theme: {
+          h5FontWeight: 700
+        },
+        level: "h5"
+      }, _this.props.subtitle), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, _this.props.body))));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(MetricPopover, [{
+    key: "renderPopoverTrigger",
+    value: function renderPopoverTrigger() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+        size: "small",
+        theme: {
+          smallHeight: '18px',
+          transform: 'translateY(-1px)'
+        },
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: (0, _formatMessage.default)('Metric tooltip'),
+        renderIcon: _ref
+      });
+    }
+  }]);
+  return MetricPopover;
+}(_react.Component), _class2.propTypes = {
+  screenReaderLabel: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired,
+  subtitle: _propTypes.default.string,
+  body: _propTypes.default.string.isRequired
+}, _class2.defaultProps = {
+  subtitle: ''
+}, _temp)) || _class);
+exports.MetricPopover = MetricPopover;

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _presenter = require("./presenter.js");
+
+var _default = _presenter.NewQuizAnalysis;
+exports.default = _default;

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

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewQuizAnalysis = 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 _uiHeading = require("@instructure/ui-heading");
+
+var _uiMetric = require("@instructure/ui-metric");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/ExpandButton/index.js"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _utils = require("../utils.js");
+
+var _index2 = _interopRequireDefault(require("../MetricPopover/index.js"));
+
+var _formatTimespan = require("../../../../../common/util/formatTimespan.js");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index3 = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'bsfUh',
+  template: function template(theme) {
+    return "\n\n.bsfUh_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.bsfUh_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bsfUh_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.bsfUh_eckF{text-transform:uppercase}\n\n.bsfUh_dPzc,.bsfUh_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}\n\n.bsfUh_dPzc{margin-left:-8px}\n\n.bsfUh_dqHR{padding-left:5px}\n\n.bsfUh_bTHH{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}");
+  },
+  'heading': 'bsfUh_eDnN',
+  'cardWrapper': 'bsfUh_eKXQ',
+  'container': 'bsfUh_crZr',
+  'metricLabel': 'bsfUh_eckF',
+  'metricGroup': 'bsfUh_dPzc',
+  'metricsWrapper': 'bsfUh_cpZE',
+  'popoverContainer': 'bsfUh_dqHR',
+  'expandButtonContainer': 'bsfUh_bTHH'
+};
+var stdDevPopoverTexts = {
+  metricLabel: 'standard deviation',
+  title: 'Lorem ipsum ',
+  subtitle: 'subtitle',
+  body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
+  screenReaderLabel: 'standard deviation tooltip'
+};
+var cronbachsAlphaPopoverTexts = {
+  metricLabel: 'cronbach\'s alpha',
+  title: 'Lorem ipsum ',
+  subtitle: 'subtitle',
+  body: 'cronbach\'s alpha description',
+  screenReaderLabel: 'cronbach\'s alpha tooltip'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+
+var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(NewQuizAnalysis, _Component);
+
+  var _super = (0, _createSuper2.default)(NewQuizAnalysis);
+
+  function NewQuizAnalysis() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, NewQuizAnalysis);
+
+    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.state = {
+      expanded: false
+    };
+
+    _this.handleToggle = function () {
+      _this.setState({
+        expanded: !_this.state.expanded
+      });
+    };
+
+    _this.renderExpanded = function () {
+      var scores = _this.props.quizAnalysis.scores;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.container
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricGroup
+      }, _this.renderMetric('median_percentage', (0, _formatMessage.default)('median score'), _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage), '%'), _this.renderMetricWithPopover('stddev', stdDevPopoverTexts, _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.stddev)), _this.renderMetricWithPopover('cronbachs_alpha', cronbachsAlphaPopoverTexts, _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha))));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NewQuizAnalysis, [{
+    key: "renderLabelWithPopover",
+    value: function renderLabelWithPopover(texts) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.metricLabel
+      }, texts.metricLabel, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.popoverContainer
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, texts)));
+    }
+  }, {
+    key: "renderMetric",
+    value: function renderMetric(key, label, value, suffix) {
+      return /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        theme: {
+          valueFontWeight: 500
+        },
+        textAlign: "start",
+        key: key,
+        renderLabel: /*#__PURE__*/_react.default.createElement("span", {
+          className: styles.metricLabel
+        }, label),
+        renderValue: (0, _utils.getSanitizedMetricValue)(value, suffix)
+      });
+    }
+  }, {
+    key: "renderMetricWithPopover",
+    value: function renderMetricWithPopover(key, texts, value) {
+      return /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        theme: {
+          valueFontWeight: 500
+        },
+        textAlign: "start",
+        key: key,
+        renderLabel: this.renderLabelWithPopover(texts),
+        renderValue: (0, _utils.getSanitizedMetricValue)(value)
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var quizAnalysis = this.props.quizAnalysis;
+      var scores = quizAnalysis.scores,
+          attempts = quizAnalysis.attempts,
+          metadata = quizAnalysis.metadata;
+      var expanded = this.state.expanded;
+      return /*#__PURE__*/_react.default.createElement(_index3.default, {
+        className: styles.cardWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.heading
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h4",
+        color: "primary"
+      }, (0, _formatMessage.default)('Quiz summary:'), " ", metadata === null || metadata === void 0 ? void 0 : metadata.quiz_title)), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricGroup
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricsWrapper
+      }, this.renderMetric('highscore', (0, _formatMessage.default)('high score'), scores === null || scores === void 0 ? void 0 : scores.max_percentage, '%'), this.renderMetric('lowscore', (0, _formatMessage.default)('low score'), scores === null || scores === void 0 ? void 0 : scores.min_percentage, '%'), this.renderMetric('meanscore', (0, _formatMessage.default)('mean score'), scores === null || scores === void 0 ? void 0 : scores.mean_percentage, '%')), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricsWrapper
+      }, this.renderMetric('average_attempts', (0, _formatMessage.default)('average attempts'), _formatMessage.default.number(attempts === null || attempts === void 0 ? void 0 : attempts.average_attempts)), this.renderMetric('mean_elapsed_sec', (0, _formatMessage.default)('mean elapsed time'), (0, _formatTimespan.formatTimeToFullNumeric)(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec))), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.expandButtonContainer
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        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(_uiText.Text, {
+        size: "x-small"
+      }, _ref, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Data Last Updated:')), "\xA0", _formatMessage.default.date(Date.parse(quizAnalysis.created_timestamp), 'medium')));
+    }
+  }]);
+  NewQuizAnalysis.displayName = "NewQuizAnalysis";
+  return NewQuizAnalysis;
+}(_react.Component), _class2.propTypes = {
+  quizAnalysis: _propTypes.default.shape({
+    created_timestamp: _propTypes.default.string,
+    metadata: _propTypes.default.shape({
+      quiz_title: _propTypes.default.string
+    }),
+    scores: _propTypes.default.shape({
+      decile_distribution: _propTypes.default.arrayOf(_propTypes.default.number),
+      cronbachs_alpha: _propTypes.default.number,
+      stddev: _propTypes.default.number,
+      median_percentage: _propTypes.default.number,
+      max_percentage: _propTypes.default.number,
+      min_percentage: _propTypes.default.number,
+      mean_percentage: _propTypes.default.number
+    }).isRequired,
+    attempts: _propTypes.default.shape({
+      mean_elapsed_sec: _propTypes.default.number,
+      students_completed: _propTypes.default.number,
+      students_not_finished: _propTypes.default.number,
+      students_without_attempt: _propTypes.default.number,
+      average_attempts: _propTypes.default.number
+    }).isRequired
+  }).isRequired
+}, _temp)) || _class);
+exports.NewQuizAnalysis = NewQuizAnalysis;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    metricGroupPaddingTop: spacing.medium,
+    viewPadding: spacing.small,
+    headingPadding: spacing.medium,
+    cardWrapperPadding: spacing.medium,
+    metricsColumnGap: '82px'
+  };
+}

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

@@ -25,10 +25,7 @@ var _uiMetric = require("@instructure/ui-metric");
 
 var _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-  level: "h3",
-  color: "primary"
-}, "Quiz analysis");
+var _index = _interopRequireDefault(require("./NewQuizAnalysis/index.js"));
 
 var _ref5 = /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
   level: "h3",
@@ -113,26 +110,15 @@ var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
     fetch();
   }, []);
 
+  var _ref4 = /*#__PURE__*/_react.default.createElement(_index.default, {
+    quizAnalysis: quizAnalysis
+  });
+
   var renderContent = function renderContent() {
     /* eslint-disable react/jsx-no-literals */
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "fs-mask"
-    }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-      level: "h2",
-      color: "primary"
-    }, quizAnalysis.metadata.quiz_title), _ref4, /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-      key: "highscore",
-      renderLabel: "HIGH SCORE",
-      renderValue: quizAnalysis.scores.max_percentage
-    }), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-      key: "lowscore",
-      renderLabel: "LOW SCORE",
-      renderValue: quizAnalysis.scores.min_percentage
-    }), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-      key: "meanscore",
-      renderLabel: "MEAN SCORE",
-      renderValue: quizAnalysis.scores.mean_percentage
-    })), _ref5, itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
+    }, _ref4, _ref5, itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
       return /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, {
         key: itemAnalysis.metadata.item_id
       }, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSanitizedMetricValue = void 0;
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var getSanitizedMetricValue = function getSanitizedMetricValue(value, suffix) {
+  if (value === null || value === void 0) {
+    return (0, _formatMessage.default)('N/A');
+  }
+
+  return value + (suffix ? suffix : '');
+};
+
+exports.getSanitizedMetricValue = getSanitizedMetricValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.56.1-rc.2+28040c2e3",
+  "version": "17.56.1-rc.3+1b3118f30",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,11 +41,11 @@
   ],
   "dependencies": {
     "@instructure/outcomes-ui": "^2.1.8",
-    "@instructure/quiz-common": "17.56.1-rc.2+28040c2e3",
-    "@instructure/quiz-i18n": "17.56.1-rc.2+28040c2e3",
-    "@instructure/quiz-interactions": "17.56.1-rc.2+28040c2e3",
-    "@instructure/quiz-number-input": "17.56.1-rc.2+28040c2e3",
-    "@instructure/quiz-rce": "17.56.1-rc.2+28040c2e3",
+    "@instructure/quiz-common": "17.56.1-rc.3+1b3118f30",
+    "@instructure/quiz-i18n": "17.56.1-rc.3+1b3118f30",
+    "@instructure/quiz-interactions": "17.56.1-rc.3+1b3118f30",
+    "@instructure/quiz-number-input": "17.56.1-rc.3+1b3118f30",
+    "@instructure/quiz-rce": "17.56.1-rc.3+1b3118f30",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +106,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.56.1-rc.2+28040c2e3",
+    "instructure-validations": "17.56.1-rc.3+1b3118f30",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -156,7 +156,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.56.1-rc.2+28040c2e3",
+    "quiz-presets": "17.56.1-rc.3+1b3118f30",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -172,5 +172,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "28040c2e39df566c886cfaa89d82b7aa3f1841aa"
+  "gitHead": "1b3118f30d640f7b28562671c8a68cd6545680b1"
 }