@instructure/quiz-core 17.50.2-rc.2 → 17.50.2-rc.4

package/es/building/components/layout/Sidebar/SidebarItem/presenter.js

@@ -2,14 +2,26 @@ 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 PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { themeable } from '@instructure/ui-themeable';
 import { chooseDragConnection, usingIE } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import DragHandle from "../../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
 import CommonSidebarItem from "../../../../../common/components/layout/sidebar/SidebarItem/index.js";
-export var BuildingSidebarItem = /*#__PURE__*/function (_Component) {
+var styles = {
+  componentId: 'beYOg',
+  template: function template(theme) {
+    return "\n\n.beYOg_cpvQ{transform:translateZ(0)}";
+  },
+  'sidebarItemWrapper': 'beYOg_cpvQ'
+};
+import theme from "./theme.js";
+export var BuildingSidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BuildingSidebarItem, _Component);
 
   var _super = _createSuper(BuildingSidebarItem);
@@ -69,7 +81,9 @@ export var BuildingSidebarItem = /*#__PURE__*/function (_Component) {
         draggingOver: draggingOver,
         draggingAboveHalf: draggingAboveHalf
       };
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.sidebarItemWrapper
+      }, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
       })), /*#__PURE__*/React.createElement(CommonSidebarItem, {
         itemId: this.props.itemId,
@@ -104,8 +118,7 @@ export var BuildingSidebarItem = /*#__PURE__*/function (_Component) {
 
   BuildingSidebarItem.displayName = "BuildingSidebarItem";
   return BuildingSidebarItem;
-}(Component);
-BuildingSidebarItem.propTypes = {
+}(Component), _class2.propTypes = {
   connectDragSource: PropTypes.func.isRequired,
   // inserted by React DnD
   connectDragPreview: PropTypes.func.isRequired,
@@ -127,10 +140,9 @@ BuildingSidebarItem.propTypes = {
   // Passed in by connect
   draggingOver: PropTypes.bool.isRequired,
   draggingAboveHalf: PropTypes.bool.isRequired
-};
-BuildingSidebarItem.defaultProps = {
+}, _class2.defaultProps = {
   disableDraggingOverride: false,
   inStimulus: false,
   itemBody: ''
-};
+}, _temp)) || _class);
 export default BuildingSidebarItem;

package/es/building/components/layout/Sidebar/SidebarItem/theme.js

@@ -0,0 +1,3 @@
+export default function generator() {
+  return {};
+}

package/es/building/components/layout/Sidebar/Stimulus/presenter.js

@@ -2,14 +2,26 @@ 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 PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { themeable } from '@instructure/ui-themeable';
 import { chooseDragConnection, usingIE } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import DragHandle from "../../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
 import CommonStimulus from "../../../../../common/components/layout/sidebar/Stimulus/index.js";
-export var BuildingStimulus = /*#__PURE__*/function (_Component) {
+var styles = {
+  componentId: 'fyovm',
+  template: function template(theme) {
+    return "\n\n.fyovm_drae{transform:translateZ(0)}";
+  },
+  'sidebarStimulusWrapper': 'fyovm_drae'
+};
+import theme from "./theme.js";
+export var BuildingStimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BuildingStimulus, _Component);
 
   var _super = _createSuper(BuildingStimulus);
@@ -84,7 +96,9 @@ export var BuildingStimulus = /*#__PURE__*/function (_Component) {
         draggingAboveHalf: this.props.draggingAboveHalf,
         dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
       };
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.sidebarStimulusWrapper
+      }, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
       })), this.renderStimulus(), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "in"
@@ -112,8 +126,7 @@ export var BuildingStimulus = /*#__PURE__*/function (_Component) {
 
   BuildingStimulus.displayName = "BuildingStimulus";
   return BuildingStimulus;
-}(Component);
-BuildingStimulus.propTypes = {
+}(Component), _class2.propTypes = {
   childEntries: ImmutablePropTypes.listOf(ImmutablePropTypes.record).isRequired,
   connectDragPreview: PropTypes.func.isRequired,
   // inserted by React DnD
@@ -135,10 +148,9 @@ BuildingStimulus.propTypes = {
   draggingAboveHalf: PropTypes.bool.isRequired,
   draggingOver: PropTypes.bool.isRequired,
   dropIntoEmptyStimulus: PropTypes.bool
-};
-BuildingStimulus.defaultProps = {
+}, _class2.defaultProps = {
   draggingAboveHalf: false,
   dropIntoEmptyStimulus: false,
   isOver: false
-};
+}, _temp)) || _class);
 export default BuildingStimulus;

package/es/building/components/layout/Sidebar/Stimulus/theme.js

@@ -0,0 +1,3 @@
+export default function generator() {
+  return {};
+}

package/es/reporting/api/newItemAnalyses.js

@@ -0,0 +1,38 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+export var getItemAnalyses = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(quizId) {
+    var response;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return fetch("http://".concat(window.ENV.API_HOST, "/api/quizzes/").concat(quizId, "/stats/new_item_analyses"));
+
+          case 3:
+            response = _context.sent;
+            _context.next = 6;
+            return response.json();
+
+          case 6:
+            return _context.abrupt("return", _context.sent);
+
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            console.error(_context.t0);
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+
+  return function getItemAnalyses(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/es/reporting/api/newQuizAnalysis.js

@@ -0,0 +1,38 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+export var getQuizAnalysis = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(quizId) {
+    var response;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return fetch("http://".concat(window.ENV.API_HOST, "/api/quizzes/").concat(quizId, "/stats/new_quiz_analysis"));
+
+          case 3:
+            response = _context.sent;
+            _context.next = 6;
+            return response.json();
+
+          case 6:
+            return _context.abrupt("return", _context.sent);
+
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            console.error(_context.t0);
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+
+  return function getQuizAnalysis(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

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

@@ -1,14 +1,12 @@
 import { NewQuizAndItemAnalysis as NewQuizAndItemAnalysisPresenter } from "./presenter.js";
 import { connect } from "../../../../common/react-redux.js";
-import { getActiveQuiz } from "../../../../common/selectors/quizzes.js";
-import { getExistingQuiz } from "../../../../common/api/quizzes.js";
-export function mapStateToProps(state) {
-  var activeQuiz = getActiveQuiz(state);
+import { getQuizAnalysis } from "../../../api/newQuizAnalysis.js";
+import { getItemAnalyses } from "../../../api/newItemAnalyses.js";
+export function mapStateToProps(_state) {
   return {
-    quiz: activeQuiz
+    getQuizAnalysis: getQuizAnalysis,
+    getItemAnalyses: getItemAnalyses
   };
 }
-export var NewQuizAndItemAnalysis = connect(mapStateToProps, {
-  getExistingQuiz: getExistingQuiz
-})(NewQuizAndItemAnalysisPresenter);
+export var NewQuizAndItemAnalysis = connect(mapStateToProps)(NewQuizAndItemAnalysisPresenter);
 export default NewQuizAndItemAnalysis;

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

@@ -1,79 +1,150 @@
-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";
-import React, { Component } from 'react';
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
 import { Metric, MetricGroup } from '@instructure/ui-metric';
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
-import { withI18nSupport } from '@instructure/quiz-common';
 
-var _ref = /*#__PURE__*/React.createElement(MetricGroup, null, /*#__PURE__*/React.createElement(Metric, {
-  renderLabel: "Example 1",
-  renderValue: "80%"
-}), /*#__PURE__*/React.createElement(Metric, {
-  renderLabel: "Example 2",
-  renderValue: "5"
-}), /*#__PURE__*/React.createElement(Metric, {
-  renderLabel: "Example 3",
-  renderValue: "Good"
-}));
+var _ref4 = /*#__PURE__*/React.createElement(Heading, {
+  level: "h3",
+  color: "primary"
+}, "Quiz analysis");
 
-var _ref2 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref5 = /*#__PURE__*/React.createElement(Heading, {
+  level: "h3",
+  color: "primary"
+}, "Item analysis");
 
-export var NewQuizAndItemAnalysis = /*#__PURE__*/function (_withI18nSupport) {
-  _inherits(NewQuizAndItemAnalysis, _withI18nSupport);
+var _ref6 = /*#__PURE__*/React.createElement(Spinner, null);
 
-  var _super = _createSuper(NewQuizAndItemAnalysis);
+export var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
+  var activeQuizId = _ref.activeQuizId,
+      getQuizAnalysis = _ref.getQuizAnalysis,
+      getItemAnalyses = _ref.getItemAnalyses;
 
-  function NewQuizAndItemAnalysis() {
-    _classCallCheck(this, NewQuizAndItemAnalysis);
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      quizAnalysis = _useState2[0],
+      setQuizAnalysis = _useState2[1];
 
-    return _super.apply(this, arguments);
-  }
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      itemAnalyses = _useState4[0],
+      setItemAnalyses = _useState4[1];
+
+  useEffect(function () {
+    var fetch = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var quizAnalysis;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return getQuizAnalysis(activeQuizId);
+
+              case 2:
+                quizAnalysis = _context.sent;
+                setQuizAnalysis(quizAnalysis);
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function fetch() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    fetch();
+  }, []);
+  useEffect(function () {
+    var fetch = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var itemAnalyses;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return getItemAnalyses(activeQuizId);
+
+              case 2:
+                itemAnalyses = _context2.sent;
+                setItemAnalyses(itemAnalyses);
+
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
 
-  _createClass(NewQuizAndItemAnalysis, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.getExistingQuiz(this.props.activeQuizId);
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var quiz = this.props.quiz;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "fs-mask"
-      }, /*#__PURE__*/React.createElement(Heading, {
-        level: "h3",
-        color: "primary"
-      }, quiz.title), _ref);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.props.quiz.isLoaded()) {
-        return this.renderContent();
-      } else {
-        return _ref2;
-      }
-    }
-  }]);
-
-  NewQuizAndItemAnalysis.displayName = "NewQuizAndItemAnalysis";
-  return NewQuizAndItemAnalysis;
-}(withI18nSupport(Component));
+      return function fetch() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    fetch();
+  }, []);
+
+  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) {
+      return /*#__PURE__*/React.createElement(MetricGroup, {
+        key: itemAnalysis.metadata.item_id
+      }, /*#__PURE__*/React.createElement(Metric, {
+        key: "itemdifficulty",
+        renderLabel: "ITEM DIFFICULTY",
+        renderValue: itemAnalysis.scores.difficulty
+      }), /*#__PURE__*/React.createElement(Metric, {
+        key: "responded",
+        renderLabel: "RESPONDED",
+        renderValue: itemAnalysis.attempts.students_responded
+      }), /*#__PURE__*/React.createElement(Metric, {
+        key: "skipped",
+        renderLabel: "SKIPPED/NO RESPONSE",
+        renderValue: itemAnalysis.attempts.students_without_response
+      }));
+    }));
+    /* eslint-enable react/jsx-no-literals */
+  }; // TODO: distinguish between loading and empty item analyses (eg. when there is no items in a quiz)
+  // once it is known how will be such a case handled by the backend
+
+
+  if (quizAnalysis && itemAnalyses) {
+    return renderContent();
+  } else {
+    return _ref6;
+  }
+};
 NewQuizAndItemAnalysis.propTypes = {
-  quiz: ImmutablePropTypes.record.isRequired,
   activeQuizId: PropTypes.string.isRequired,
-  getExistingQuiz: PropTypes.func.isRequired,
-  locale: PropTypes.string
-};
-NewQuizAndItemAnalysis.defaultProps = {
-  locale: null
-};
-NewQuizAndItemAnalysis.contextTypes = {
-  locale: PropTypes.string
+  getQuizAnalysis: PropTypes.func.isRequired,
+  getItemAnalyses: PropTypes.func.isRequired
 };
 export default NewQuizAndItemAnalysis;

package/lib/building/components/layout/Sidebar/SidebarItem/presenter.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,6 +23,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
+var _uiThemeable = require("@instructure/ui-themeable");
+
 var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
 
 var _index = _interopRequireDefault(require("../../../../../common/components/shared/drag_and_drop/DragHandle/index.js"));
@@ -31,7 +33,18 @@ var _index2 = _interopRequireDefault(require("../../../../../common/components/s
 
 var _index3 = _interopRequireDefault(require("../../../../../common/components/layout/sidebar/SidebarItem/index.js"));
 
-var BuildingSidebarItem = /*#__PURE__*/function (_Component) {
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'beYOg',
+  template: function template(theme) {
+    return "\n\n.beYOg_cpvQ{transform:translateZ(0)}";
+  },
+  'sidebarItemWrapper': 'beYOg_cpvQ'
+};
+var BuildingSidebarItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingSidebarItem, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingSidebarItem);
@@ -90,7 +103,9 @@ var BuildingSidebarItem = /*#__PURE__*/function (_Component) {
         draggingOver: draggingOver,
         draggingAboveHalf: draggingAboveHalf
       };
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sidebarItemWrapper
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "above"
       })), /*#__PURE__*/_react.default.createElement(_index3.default, {
         itemId: this.props.itemId,
@@ -124,10 +139,7 @@ var BuildingSidebarItem = /*#__PURE__*/function (_Component) {
   }]);
   BuildingSidebarItem.displayName = "BuildingSidebarItem";
   return BuildingSidebarItem;
-}(_react.Component);
-
-exports.BuildingSidebarItem = BuildingSidebarItem;
-BuildingSidebarItem.propTypes = {
+}(_react.Component), _class2.propTypes = {
   connectDragSource: _propTypes.default.func.isRequired,
   // inserted by React DnD
   connectDragPreview: _propTypes.default.func.isRequired,
@@ -149,11 +161,11 @@ BuildingSidebarItem.propTypes = {
   // Passed in by connect
   draggingOver: _propTypes.default.bool.isRequired,
   draggingAboveHalf: _propTypes.default.bool.isRequired
-};
-BuildingSidebarItem.defaultProps = {
+}, _class2.defaultProps = {
   disableDraggingOverride: false,
   inStimulus: false,
   itemBody: ''
-};
+}, _temp)) || _class);
+exports.BuildingSidebarItem = BuildingSidebarItem;
 var _default = BuildingSidebarItem;
 exports.default = _default;

package/lib/building/components/layout/Sidebar/SidebarItem/theme.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {};
+}

package/lib/building/components/layout/Sidebar/Stimulus/presenter.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,6 +23,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
+var _uiThemeable = require("@instructure/ui-themeable");
+
 var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
 
 var _index = _interopRequireDefault(require("../../../../../common/components/shared/drag_and_drop/DragHandle/index.js"));
@@ -31,7 +33,18 @@ var _index2 = _interopRequireDefault(require("../../../../../common/components/s
 
 var _index3 = _interopRequireDefault(require("../../../../../common/components/layout/sidebar/Stimulus/index.js"));
 
-var BuildingStimulus = /*#__PURE__*/function (_Component) {
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fyovm',
+  template: function template(theme) {
+    return "\n\n.fyovm_drae{transform:translateZ(0)}";
+  },
+  'sidebarStimulusWrapper': 'fyovm_drae'
+};
+var BuildingStimulus = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingStimulus, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingStimulus);
@@ -105,7 +118,9 @@ var BuildingStimulus = /*#__PURE__*/function (_Component) {
         draggingAboveHalf: this.props.draggingAboveHalf,
         dropIntoEmptyStimulus: this.props.dropIntoEmptyStimulus
       };
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sidebarStimulusWrapper
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "above"
       })), this.renderStimulus(), /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "in"
@@ -132,10 +147,7 @@ var BuildingStimulus = /*#__PURE__*/function (_Component) {
   }]);
   BuildingStimulus.displayName = "BuildingStimulus";
   return BuildingStimulus;
-}(_react.Component);
-
-exports.BuildingStimulus = BuildingStimulus;
-BuildingStimulus.propTypes = {
+}(_react.Component), _class2.propTypes = {
   childEntries: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.record).isRequired,
   connectDragPreview: _propTypes.default.func.isRequired,
   // inserted by React DnD
@@ -157,11 +169,11 @@ BuildingStimulus.propTypes = {
   draggingAboveHalf: _propTypes.default.bool.isRequired,
   draggingOver: _propTypes.default.bool.isRequired,
   dropIntoEmptyStimulus: _propTypes.default.bool
-};
-BuildingStimulus.defaultProps = {
+}, _class2.defaultProps = {
   draggingAboveHalf: false,
   dropIntoEmptyStimulus: false,
   isOver: false
-};
+}, _temp)) || _class);
+exports.BuildingStimulus = BuildingStimulus;
 var _default = BuildingStimulus;
 exports.default = _default;

package/lib/building/components/layout/Sidebar/Stimulus/theme.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {};
+}

package/lib/reporting/api/newItemAnalyses.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemAnalyses = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var getItemAnalyses = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(quizId) {
+    var response;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return fetch("http://".concat(window.ENV.API_HOST, "/api/quizzes/").concat(quizId, "/stats/new_item_analyses"));
+
+          case 3:
+            response = _context.sent;
+            _context.next = 6;
+            return response.json();
+
+          case 6:
+            return _context.abrupt("return", _context.sent);
+
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            console.error(_context.t0);
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+
+  return function getItemAnalyses(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.getItemAnalyses = getItemAnalyses;

package/lib/reporting/api/newQuizAnalysis.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getQuizAnalysis = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var getQuizAnalysis = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(quizId) {
+    var response;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return fetch("http://".concat(window.ENV.API_HOST, "/api/quizzes/").concat(quizId, "/stats/new_quiz_analysis"));
+
+          case 3:
+            response = _context.sent;
+            _context.next = 6;
+            return response.json();
+
+          case 6:
+            return _context.abrupt("return", _context.sent);
+
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            console.error(_context.t0);
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+
+  return function getQuizAnalysis(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.getQuizAnalysis = getQuizAnalysis;

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

@@ -10,20 +10,18 @@ var _presenter = require("./presenter.js");
 
 var _reactRedux = require("../../../../common/react-redux.js");
 
-var _quizzes = require("../../../../common/selectors/quizzes.js");
+var _newQuizAnalysis = require("../../../api/newQuizAnalysis.js");
 
-var _quizzes2 = require("../../../../common/api/quizzes.js");
+var _newItemAnalyses = require("../../../api/newItemAnalyses.js");
 
-function mapStateToProps(state) {
-  var activeQuiz = (0, _quizzes.getActiveQuiz)(state);
+function mapStateToProps(_state) {
   return {
-    quiz: activeQuiz
+    getQuizAnalysis: _newQuizAnalysis.getQuizAnalysis,
+    getItemAnalyses: _newItemAnalyses.getItemAnalyses
   };
 }
 
-var NewQuizAndItemAnalysis = (0, _reactRedux.connect)(mapStateToProps, {
-  getExistingQuiz: _quizzes2.getExistingQuiz
-})(_presenter.NewQuizAndItemAnalysis);
+var NewQuizAndItemAnalysis = (0, _reactRedux.connect)(mapStateToProps)(_presenter.NewQuizAndItemAnalysis);
 exports.NewQuizAndItemAnalysis = NewQuizAndItemAnalysis;
 var _default = NewQuizAndItemAnalysis;
 exports.default = _default;

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

@@ -9,93 +9,163 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.NewQuizAndItemAnalysis = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 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 _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
 
-var _quizCommon = require("@instructure/quiz-common");
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, null, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-  renderLabel: "Example 1",
-  renderValue: "80%"
-}), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-  renderLabel: "Example 2",
-  renderValue: "5"
-}), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-  renderLabel: "Example 3",
-  renderValue: "Good"
-}));
-
-var _ref2 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
-
-var NewQuizAndItemAnalysis = /*#__PURE__*/function (_withI18nSupport) {
-  (0, _inherits2.default)(NewQuizAndItemAnalysis, _withI18nSupport);
-
-  var _super = (0, _createSuper2.default)(NewQuizAndItemAnalysis);
-
-  function NewQuizAndItemAnalysis() {
-    (0, _classCallCheck2.default)(this, NewQuizAndItemAnalysis);
-    return _super.apply(this, arguments);
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+  level: "h3",
+  color: "primary"
+}, "Quiz analysis");
+
+var _ref5 = /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+  level: "h3",
+  color: "primary"
+}, "Item analysis");
+
+var _ref6 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+
+var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
+  var activeQuizId = _ref.activeQuizId,
+      getQuizAnalysis = _ref.getQuizAnalysis,
+      getItemAnalyses = _ref.getItemAnalyses;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      quizAnalysis = _useState2[0],
+      setQuizAnalysis = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      itemAnalyses = _useState4[0],
+      setItemAnalyses = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var fetch = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var quizAnalysis;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return getQuizAnalysis(activeQuizId);
+
+              case 2:
+                quizAnalysis = _context.sent;
+                setQuizAnalysis(quizAnalysis);
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function fetch() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    fetch();
+  }, []);
+  (0, _react.useEffect)(function () {
+    var fetch = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var itemAnalyses;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return getItemAnalyses(activeQuizId);
+
+              case 2:
+                itemAnalyses = _context2.sent;
+                setItemAnalyses(itemAnalyses);
+
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function fetch() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    fetch();
+  }, []);
+
+  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) {
+      return /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, {
+        key: itemAnalysis.metadata.item_id
+      }, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        key: "itemdifficulty",
+        renderLabel: "ITEM DIFFICULTY",
+        renderValue: itemAnalysis.scores.difficulty
+      }), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        key: "responded",
+        renderLabel: "RESPONDED",
+        renderValue: itemAnalysis.attempts.students_responded
+      }), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        key: "skipped",
+        renderLabel: "SKIPPED/NO RESPONSE",
+        renderValue: itemAnalysis.attempts.students_without_response
+      }));
+    }));
+    /* eslint-enable react/jsx-no-literals */
+  }; // TODO: distinguish between loading and empty item analyses (eg. when there is no items in a quiz)
+  // once it is known how will be such a case handled by the backend
+
+
+  if (quizAnalysis && itemAnalyses) {
+    return renderContent();
+  } else {
+    return _ref6;
   }
-
-  (0, _createClass2.default)(NewQuizAndItemAnalysis, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.getExistingQuiz(this.props.activeQuizId);
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var quiz = this.props.quiz;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "fs-mask"
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        level: "h3",
-        color: "primary"
-      }, quiz.title), _ref);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.props.quiz.isLoaded()) {
-        return this.renderContent();
-      } else {
-        return _ref2;
-      }
-    }
-  }]);
-  NewQuizAndItemAnalysis.displayName = "NewQuizAndItemAnalysis";
-  return NewQuizAndItemAnalysis;
-}((0, _quizCommon.withI18nSupport)(_react.Component));
+};
 
 exports.NewQuizAndItemAnalysis = NewQuizAndItemAnalysis;
 NewQuizAndItemAnalysis.propTypes = {
-  quiz: _reactImmutableProptypes.default.record.isRequired,
   activeQuizId: _propTypes.default.string.isRequired,
-  getExistingQuiz: _propTypes.default.func.isRequired,
-  locale: _propTypes.default.string
-};
-NewQuizAndItemAnalysis.defaultProps = {
-  locale: null
-};
-NewQuizAndItemAnalysis.contextTypes = {
-  locale: _propTypes.default.string
+  getQuizAnalysis: _propTypes.default.func.isRequired,
+  getItemAnalyses: _propTypes.default.func.isRequired
 };
 var _default = NewQuizAndItemAnalysis;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.50.2-rc.2+d049180db",
+  "version": "17.50.2-rc.4+76b30427e",
   "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.2",
-    "@instructure/quiz-common": "17.50.2-rc.2+d049180db",
-    "@instructure/quiz-i18n": "17.50.2-rc.2+d049180db",
-    "@instructure/quiz-interactions": "17.50.2-rc.2+d049180db",
-    "@instructure/quiz-number-input": "17.50.2-rc.2+d049180db",
-    "@instructure/quiz-rce": "17.50.2-rc.2+d049180db",
+    "@instructure/quiz-common": "17.50.2-rc.4+76b30427e",
+    "@instructure/quiz-i18n": "17.50.2-rc.4+76b30427e",
+    "@instructure/quiz-interactions": "17.50.2-rc.4+76b30427e",
+    "@instructure/quiz-number-input": "17.50.2-rc.4+76b30427e",
+    "@instructure/quiz-rce": "17.50.2-rc.4+76b30427e",
     "@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.50.2-rc.2+d049180db",
+    "instructure-validations": "17.50.2-rc.4+76b30427e",
     "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.50.2-rc.2+d049180db",
+    "quiz-presets": "17.50.2-rc.4+76b30427e",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -172,5 +172,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d049180db6fd8dcffe1ae4f30fa80bda64ae0dd4"
+  "gitHead": "76b30427eba0ae9274af07b949123c13101adc6b"
 }