@instructure/quiz-core 17.19.2-rc.3 → 17.19.3-rc.0

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

@@ -0,0 +1,340 @@
+"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.QuizAndItemAnalysis = 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 _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
+
+var _index = _interopRequireDefault(require("../../../../common/components/shared/Card/index.js"));
+
+var _index2 = _interopRequireDefault(require("../../../../common/components/shared/FormattedDuration/index.js"));
+
+var _index3 = _interopRequireDefault(require("../../../../reporting/components/itemAnalysis/ItemAnalysisRow/index.js"));
+
+var _QuizAnalysisOverview = _interopRequireDefault(require("../../../../reporting/components/quizAnalysis/QuizAnalysisOverview.js"));
+
+var _index4 = _interopRequireDefault(require("../../MetricsListItem/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cNnNG',
+  template: function template(theme) {
+    return "\n\n.cNnNG_nvdO{margin:".concat(theme.titleMarginTop || 'inherit', " ").concat(theme.titleMarginLeftRight || 'inherit', " ").concat(theme.titleMarginBottom || 'inherit', " ").concat(theme.titleMarginLeftRight || 'inherit', "}\n\n.cNnNG_bwKH{color:").concat(theme.emptyTextColor || 'inherit', ";font-size:").concat(theme.emptyTextFontSize || 'inherit', ";padding:").concat(theme.emptyTextPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .cNnNG_bwKH,[dir=rtl] .cNnNG_bwKH{text-align:center}\n\n.cNnNG_eiMu{justify-content:center}");
+  },
+  'title': 'cNnNG_nvdO',
+  'emptyText': 'cNnNG_bwKH',
+  'metric': 'cNnNG_eiMu'
+};
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+
+var QuizAndItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+  (0, _inherits2.default)(QuizAndItemAnalysis, _withI18nSupport);
+
+  var _super = (0, _createSuper2.default)(QuizAndItemAnalysis);
+
+  function QuizAndItemAnalysis() {
+    (0, _classCallCheck2.default)(this, QuizAndItemAnalysis);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(QuizAndItemAnalysis, [{
+    key: "getAnalyses",
+    value: function getAnalyses(activeQuizId) {
+      this.props.getExistingQuiz(activeQuizId);
+      this.props.getItemAnalyses(activeQuizId);
+      this.props.getQuizAnalysis(activeQuizId);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.getAnalyses(this.props.activeQuizId);
+    }
+  }, {
+    key: "componentWillUpdate",
+    value: function componentWillUpdate(nextProps) {
+      if (this.props.activeQuizId !== nextProps.activeQuizId) {
+        this.getAnalyses(nextProps.activeQuizId);
+      }
+    }
+  }, {
+    key: "generateItemAnalysisMetrics",
+    value: function generateItemAnalysisMetrics(itemAnalysis) {
+      var _this = this;
+
+      var metrics = [];
+
+      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: itemAnalysis.meanScore(this.locale) || 0,
+        possible: itemAnalysis.pointsPossible
+      });
+
+      this.props.itemMetrics.forEach(function (key) {
+        switch (key) {
+          case 'difficultyIndex':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "difficultyIndex",
+              renderLabel: (0, _formatMessage.default)('Difficulty Index'),
+              renderValue: itemAnalysis.difficultyIndex(_this.locale),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'discriminationIndex':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "discriminationIndex",
+              renderLabel: (0, _formatMessage.default)('Discrimination Index'),
+              renderValue: itemAnalysis.discriminationIndex(_this.locale),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'rpb':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "rpb",
+              renderLabel: (0, _formatMessage.default)('RPB'),
+              renderValue: itemAnalysis.pointBiserial(_this.locale),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'meanEarnedScore':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "meanEarnedScore",
+              renderLabel: (0, _formatMessage.default)('Mean Earned Score'),
+              renderValue: mean,
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+        }
+      });
+      return metrics;
+    }
+  }, {
+    key: "generateQuizAnalysisMetrics",
+    value: function generateQuizAnalysisMetrics(quizAnalysis) {
+      var metrics = [];
+
+      var formattedElapsedTime = /*#__PURE__*/_react.default.createElement(_index2.default, {
+        seconds: quizAnalysis.meanElapsedTime()
+      });
+
+      this.props.quizMetrics.forEach(function (key) {
+        switch (key) {
+          case 'highScore':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "highScore",
+              renderLabel: (0, _formatMessage.default)('High Score'),
+              renderValue: quizAnalysis.highScore(),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'lowScore':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "lowScore",
+              renderLabel: (0, _formatMessage.default)('Low Score'),
+              renderValue: quizAnalysis.lowScore(),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'meanScore':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "meanScore",
+              renderLabel: (0, _formatMessage.default)('Mean Score'),
+              renderValue: quizAnalysis.meanScore(),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'standardDeviation':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "standardDeviation",
+              renderLabel: (0, _formatMessage.default)('Standard Deviation'),
+              renderValue: quizAnalysis.standardDeviation(),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'meanElapsedTime':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "meanElapsedTime",
+              renderLabel: (0, _formatMessage.default)('Mean Elapsed Time'),
+              renderValue: formattedElapsedTime,
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+
+          case 'cronbachsAlpha':
+            metrics.push( /*#__PURE__*/_react.default.createElement(_index4.default, {
+              key: "cronbachsAlpha",
+              renderLabel: (0, _formatMessage.default)('Cronbach\'s Alpha'),
+              renderValue: quizAnalysis.cronbachsAlpha(),
+              className: styles.metric,
+              isGroupChild: true
+            }));
+            break;
+        }
+      });
+      return metrics;
+    }
+  }, {
+    key: "renderItemAnalysisRows",
+    value: function renderItemAnalysisRows() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          animateDelay = _this$props.animateDelay,
+          animateDuration = _this$props.animateDuration,
+          quiz = _this$props.quiz,
+          openRows = _this$props.openRows,
+          activeQuizId = _this$props.activeQuizId,
+          toggleItemAnalysisRowExpanded = _this$props.toggleItemAnalysisRowExpanded;
+      var itemAnalyses = quiz.getItemAnalyses();
+
+      if (itemAnalyses.size <= 0) {
+        return;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.title
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h3",
+        as: "h2",
+        color: "primary"
+      }, (0, _formatMessage.default)('Item Analysis'))), itemAnalyses.toArray().map(function (itemAnalysis, i) {
+        var itemMetrics = _this2.generateItemAnalysisMetrics(itemAnalysis);
+
+        return /*#__PURE__*/_react.default.createElement(_index3.default, {
+          animateDelay: animateDelay,
+          animateDuration: animateDuration,
+          expanded: openRows[itemAnalysis.itemId],
+          itemAnalysis: itemAnalysis,
+          itemId: itemAnalysis.itemId,
+          key: itemAnalysis.itemId,
+          position: i + 1,
+          quizId: activeQuizId,
+          toggleExpanded: toggleItemAnalysisRowExpanded,
+          outcomesEndpoint: _this2.props.outcomesEndpoint,
+          outcomesToken: _this2.props.outcomesToken
+        }, itemMetrics);
+      }));
+    }
+  }, {
+    key: "renderNotFound",
+    value: function renderNotFound() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        className: styles.emptyText
+      }, (0, _formatMessage.default)('No reports yet'));
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      var _this$props2 = this.props,
+          animateDelay = _this$props2.animateDelay,
+          animateDuration = _this$props2.animateDuration,
+          quiz = _this$props2.quiz,
+          quizAnalysis = _this$props2.quizAnalysis;
+      var quizMetrics = this.generateQuizAnalysisMetrics(quizAnalysis);
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_QuizAnalysisOverview.default, {
+        animateDelay: animateDelay,
+        animateDuration: animateDuration,
+        quizAnalysis: quizAnalysis,
+        quizTitle: quiz.title
+      }, quizMetrics), quizAnalysis.isPresent() && this.renderItemAnalysisRows());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.props.quizAnalysisNotFound) {
+        return this.renderNotFound();
+      } else if (this.props.quiz.isLoaded() && this.props.quizAnalysis && this.props.quizAnalysis.isLoaded()) {
+        return this.renderContent();
+      } else {
+        return _ref2;
+      }
+    }
+  }]);
+  QuizAndItemAnalysis.displayName = "QuizAndItemAnalysis";
+  return QuizAndItemAnalysis;
+}((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
+  animateDelay: _propTypes.default.number,
+  animateDuration: _propTypes.default.number,
+  activeQuizId: _propTypes.default.string.isRequired,
+  openRows: _propTypes.default.objectOf(_propTypes.default.bool),
+  outcomesEndpoint: _propTypes.default.string,
+  outcomesToken: _propTypes.default.string,
+  quiz: _reactImmutableProptypes.default.record.isRequired,
+  quizAnalysis: _reactImmutableProptypes.default.record.isRequired,
+  quizAnalysisNotFound: _propTypes.default.bool,
+  quizMetrics: _propTypes.default.arrayOf(_propTypes.default.oneOf(['highScore', 'lowScore', 'meanScore', 'standardDeviation', 'meanElapsedTime', 'cronbachsAlpha'])),
+  itemMetrics: _propTypes.default.arrayOf(_propTypes.default.oneOf(['difficultyIndex', 'discriminationIndex', 'rpb', 'meanEarnedScore'])),
+  toggleItemAnalysisRowExpanded: _propTypes.default.func.isRequired,
+  getExistingQuiz: _propTypes.default.func.isRequired,
+  getItemAnalyses: _propTypes.default.func.isRequired,
+  getQuizAnalysis: _propTypes.default.func.isRequired,
+  locale: _propTypes.default.string
+}, _class2.defaultProps = {
+  animateDelay: void 0,
+  animateDuration: void 0,
+  openRows: {},
+  outcomesEndpoint: null,
+  outcomesToken: null,
+  quizAnalysisNotFound: false,
+  quizMetrics: [],
+  itemMetrics: [],
+  locale: null
+}, _class2.contextTypes = {
+  locale: _propTypes.default.string
+}, _temp)) || _class);
+exports.QuizAndItemAnalysis = QuizAndItemAnalysis;
+var _default = QuizAndItemAnalysis;
+exports.default = _default;

package/lib/reporting/components/resources/QuizAndItemAnalysis/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;
+  return {
+    titleMarginTop: spacing.medium,
+    titleMarginLeftRight: spacing.small,
+    titleMarginBottom: spacing.xSmall,
+    emptyTextPadding: spacing.small,
+    emptyTextFontSize: typography.fontSizeLarge,
+    emptyTextColor: colors.ash
+  };
+}

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

@@ -0,0 +1,89 @@
+"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.ReportCard = 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 _uiText = require("@instructure/ui-text");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../../common/components/shared/Card/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'eRzKS',
+  template: function template(theme) {
+    return "\n\n.eRzKS_fbIL{border-radius:".concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;height:").concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eRzKS_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}");
+  },
+  'card': 'eRzKS_fbIL',
+  'details': 'eRzKS_ebWM'
+};
+var ReportCard = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ReportCard, _Component);
+
+  var _super = (0, _createSuper2.default)(ReportCard);
+
+  function ReportCard() {
+    (0, _classCallCheck2.default)(this, ReportCard);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ReportCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          name = _this$props.name,
+          details = _this$props.details,
+          href = _this$props.href;
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        className: styles.card
+      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        href: href
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "medium",
+        weight: "bold"
+      }, name)), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.details
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small",
+        color: "secondary"
+      }, details)));
+    }
+  }]);
+  ReportCard.displayName = "ReportCard";
+  return ReportCard;
+}(_react.Component), _class2.propTypes = {
+  name: _propTypes.default.node,
+  details: _propTypes.default.node,
+  href: _propTypes.default.string
+}, _class2.defaultProps = {
+  name: void 0,
+  details: void 0,
+  href: void 0
+}, _temp)) || _class);
+exports.ReportCard = ReportCard;
+var _default = ReportCard;
+exports.default = _default;

package/lib/reporting/components/resources/ReportCard/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      borders = _ref.borders;
+  return {
+    cardHeight: '6rem',
+    cardWidth: '16rem',
+    cardPadding: spacing.medium,
+    cardMargin: spacing.xSmall,
+    cardBoxShadow: '1px 1px 3px 0 #ddd',
+    cardBorderRadius: borders.radiusMedium,
+    detailPadding: borders.xxSmall
+  };
+}

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

@@ -0,0 +1,84 @@
+"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.ReportList = 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 _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'Gqfpp',
+  template: function template(theme) {
+    return "\n\n.Gqfpp_xNcP{background-color:".concat(theme.backgroundColor || 'inherit', ";box-sizing:border-box;height:100%;padding:").concat(theme.pagePadding || 'inherit', "}\n\n.Gqfpp_biBD{display:flex;flex-wrap:wrap;margin:").concat(theme.childrenMargin || 'inherit', "}\n\n.Gqfpp_nvdO{margin-bottom:").concat(theme.titleMarginBottom || 'inherit', "}");
+  },
+  'page': 'Gqfpp_xNcP',
+  'children': 'Gqfpp_biBD',
+  'title': 'Gqfpp_nvdO'
+};
+var ReportList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ReportList, _Component);
+
+  var _super = (0, _createSuper2.default)(ReportList);
+
+  function ReportList() {
+    (0, _classCallCheck2.default)(this, ReportList);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ReportList, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          headingLevel = _this$props.headingLevel,
+          headingAs = _this$props.headingAs;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.page
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.title
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: headingLevel,
+        as: headingAs
+      }, (0, _formatMessage.default)('Reports'))), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.children
+      }, children));
+    }
+  }]);
+  ReportList.displayName = "ReportList";
+  return ReportList;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
+  headingAs: _propTypes.default.elementType
+}, _class2.defaultProps = {
+  headingLevel: 'h2',
+  headingAs: 'h1'
+}, _temp)) || _class);
+exports.ReportList = ReportList;
+var _default = ReportList;
+exports.default = _default;

package/lib/reporting/components/resources/ReportList/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors;
+  return {
+    backgroundColor: colors.porcelain,
+    pagePadding: spacing.large,
+    childrenMargin: spacing.xSmall,
+    titleMarginBottom: spacing.xSmall
+  };
+}