@instructure/quiz-core 17.19.2 → 17.20.0

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

@@ -0,0 +1,392 @@
+"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.SessionItemResult = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _quizRce = require("@instructure/quiz-rce");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _PositionBox = _interopRequireDefault(require("../../positionBox/PositionBox.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _componentForItem = _interopRequireDefault(require("../../../../util/componentForItem.js"));
+
+var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes.js"));
+
+var _keyboardClickable = _interopRequireDefault(require("../../../../util/keyboardClickable.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cQHeE',
+  template: function template(theme) {
+    return "\n\n.cQHeE_bvdE{padding:".concat(theme.sessionItemResultPadding || 'inherit', "}\n\n.cQHeE_ebwZ{border-top:solid ").concat(theme.topBorderWidth || 'inherit', " ").concat(theme.topBorderColor || 'inherit', "}\n\n.cQHeE_czRh{margin:").concat(theme.resultMargin || 'inherit', "}\n\n.cQHeE_cwte{color:").concat(theme.pointsColor || 'inherit', ";font-size:").concat(theme.pointFontSize || 'inherit', "}\n\n.cQHeE_cSuF{font-size:").concat(theme.questionFontSize || 'inherit', "}\n\n.cQHeE_fqsT{align-items:center;display:flex}\n\n.cQHeE_cgkp{border-color:").concat(theme.itemFeedbackWrapperBorderColor || 'inherit', ";border-radius:").concat(theme.itemFeedbackWrapperBorderRadius || 'inherit', ";border-style:").concat(theme.itemFeedbackWrapperStyle || 'inherit', ";border-width:").concat(theme.itemFeedbackWrapperBorderWidth || 'inherit', ";font-size:").concat(theme.itemFeedbackWrapperFontSize || 'inherit', ";margin-top:").concat(theme.itemFeedbackWrapperMargin || 'inherit', ";padding:").concat(theme.itemFeedbackWrapperPadding || 'inherit', ";white-space:pre-wrap}\n\n.cQHeE_dpDn{padding-bottom:").concat(theme.textPaddingBottom || 'inherit', ";padding-left:").concat(theme.textPaddingLeft || 'inherit', "}\n\n.cQHeE_couS{color:").concat(theme.itemFeedbackLabelColor || 'inherit', ";font-size:").concat(theme.itemFeedbackLabelFontSize || 'inherit', ";margin-bottom:").concat(theme.itemFeedbackMargin || 'inherit', "}\n\n.cQHeE_bcAI{font-size:").concat(theme.itemFeedbackTextSize || 'inherit', ";margin-top:").concat(theme.itemFeedbackTextMargin || 'inherit', "}");
+  },
+  'sessionItemResult': 'cQHeE_bvdE',
+  'topBorder': 'cQHeE_ebwZ',
+  'result': 'cQHeE_czRh',
+  'points': 'cQHeE_cwte',
+  'question': 'cQHeE_cSuF',
+  'sessionItemResultHeader': 'cQHeE_fqsT',
+  'itemFeedbackWrapper': 'cQHeE_cgkp',
+  'textPadding': 'cQHeE_dpDn',
+  'itemFeedbackLabel': 'cQHeE_couS',
+  'itemFeedbackText': 'cQHeE_bcAI'
+};
+var SessionItemResult = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(SessionItemResult, _Component);
+
+  var _super = (0, _createSuper2.default)(SessionItemResult);
+
+  function SessionItemResult() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, SessionItemResult);
+
+    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.getWorkingInstance = function (sessionItemResult) {
+      // Check for getWorkingInstance because it does not exist on results page object
+      // and is only needed on the grading page
+      if (sessionItemResult.getWorkingInstance) {
+        return sessionItemResult.getWorkingInstance().toJS();
+      }
+
+      return sessionItemResult.toJS();
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(SessionItemResult, [{
+    key: "position",
+    value: function position() {
+      return this.props.sessionItem.position;
+    }
+  }, {
+    key: "unscorable",
+    value: function unscorable() {
+      return this.props.sessionItemResult.scoredData.get('unscorable');
+    }
+  }, {
+    key: "regraded",
+    value: function regraded() {
+      return this.props.sessionItemResult.regradeInfo && this.props.sessionItemResult.regradeInfo.get('regraded');
+    }
+  }, {
+    key: "hasRegradeInfo",
+    value: function hasRegradeInfo() {
+      return this.props.sessionItemResult.regradeInfo && this.props.sessionItemResult.regradeInfo.size > 1;
+    }
+  }, {
+    key: "renderRegradeAlert",
+    value: function renderRegradeAlert() {
+      return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        variant: "warning",
+        margin: "medium"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, (0, _formatMessage.default)('This question has been regraded.')));
+    }
+  }, {
+    key: "renderUnscorableAlert",
+    value: function renderUnscorableAlert() {
+      // If they can edit grader feedback they should see the teacher message
+      var message = this.props.editGraderFeedback ? (0, _formatMessage.default)('There was a problem grading this question.') : (0, _formatMessage.default)('There was a problem grading this question. Please inform your instructor.');
+      return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        variant: "warning",
+        margin: "medium"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, message));
+    }
+  }, {
+    key: "renderRegradePoints",
+    value: function renderRegradePoints() {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "span",
+        size: "small",
+        margin: "small"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "secondary"
+      }, (0, _formatMessage.default)("Previous score { possible, plural,\n              one   {{points, number} / # point}\n              other {{points, number} / # points}\n            }", {
+        points: this.props.sessionItemResult.regradeInfo.get('originalScore') || 0,
+        possible: this.props.sessionItemResult.regradeInfo.get('originalPointsPossible')
+      }))), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "span",
+        size: "small",
+        margin: "small"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "warning"
+      }, (0, _formatMessage.default)("Regrade score { possible, plural,\n              one   {{points, number} / # point}\n              other {{points, number} / # points}\n            }", {
+        points: this.props.sessionItemResult.regradeInfo.get('newScore') || 0,
+        possible: this.props.sessionItemResult.regradeInfo.get('newPointsPossible')
+      }))));
+    }
+  }, {
+    key: "renderHeader",
+    value: function renderHeader() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sessionItemResultHeader
+      }, this.renderResultPosition(), this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints());
+    }
+  }, {
+    key: "renderResultPosition",
+    value: function renderResultPosition() {
+      var position = this.position();
+      var positionText;
+
+      if (this.regraded() && this.unscorable()) {
+        positionText = (0, _formatMessage.default)('Results for item {position, number}. There was a problem grading this question. This question has been regraded.', {
+          position: position
+        });
+      } else if (this.regraded()) {
+        positionText = (0, _formatMessage.default)('Results for item {position, number}. This question has been regraded.', {
+          position: position
+        });
+      } else if (this.unscorable() && this.props.editGraderFeedback) {
+        positionText = (0, _formatMessage.default)('Results for item {position, number}. There was a problem grading this question.', {
+          position: position
+        });
+      } else if (this.unscorable()) {
+        positionText = (0, _formatMessage.default)('Results for item {position, number}. There was a problem grading this question. Please inform your instructor.', {
+          position: position
+        });
+      } else {
+        positionText = (0, _formatMessage.default)('Results for item {position, number}.', {
+          position: position
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_PositionBox.default, {
+        position: position,
+        headingLevel: "h3",
+        headingText: positionText
+      });
+    }
+  }, {
+    key: "renderPoints",
+    value: function renderPoints() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.points
+      }, this.pointsDisplayText);
+    }
+  }, {
+    key: "renderFeedbackBox",
+    value: function renderFeedbackBox(feedbackContent, formattedFeedbackTitle) {
+      if (feedbackContent) {
+        return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+          level: "h4",
+          margin: "xx-small small"
+        }, formattedFeedbackTitle), /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.textPadding
+        }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+          customStyles: styles.itemFeedbackText,
+          content: feedbackContent
+        })));
+      }
+    }
+  }, {
+    key: "renderItemFeedback",
+    value: function renderItemFeedback(simpleSessionItemResult) {
+      var itemFeedback = simpleSessionItemResult.feedback && simpleSessionItemResult.feedback.itemFeedback || {};
+      var correctFeedback = this.renderFeedbackBox(itemFeedback.correct, (0, _formatMessage.default)('Based on answering correctly'));
+      var incorrectFeedback = this.renderFeedbackBox(itemFeedback.incorrect, (0, _formatMessage.default)('Based on answering incorrectly'));
+      var neutralFeedback = this.renderFeedbackBox(itemFeedback.neutral, (0, _formatMessage.default)('General Feedback'));
+      var graderFeedback = this.renderGraderFeedback(simpleSessionItemResult);
+      var answerFeedback = this.renderFeedbackBox(simpleSessionItemResult.answerFeedback, (0, _formatMessage.default)('Based on your answer'));
+      var showAnswerFeedback = this.props.shouldRenderAnswerFeedback && answerFeedback;
+      var showFeedback = correctFeedback || incorrectFeedback || neutralFeedback || graderFeedback;
+
+      if (showAnswerFeedback || showFeedback) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.itemFeedbackWrapper
+        }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+          level: "h3",
+          margin: "xx-small small medium"
+        }, (0, _formatMessage.default)('Feedback')), /*#__PURE__*/_react.default.createElement("div", {
+          "data-automation": "sdk-answer-feedback-results-view"
+        }, this.props.shouldRenderAnswerFeedback && answerFeedback), correctFeedback, incorrectFeedback, neutralFeedback, graderFeedback);
+      }
+    }
+  }, {
+    key: "renderGraderFeedback",
+    value: function renderGraderFeedback(simpleSessionItemResult) {
+      var graderFeedback = simpleSessionItemResult.feedback && simpleSessionItemResult.feedback.graderFeedback || {};
+
+      if (!this.props.hideGraderFeedback && graderFeedback.content) {
+        if (this.props.editGraderFeedback) {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            role: "button",
+            onClick: this.props.editGraderFeedback,
+            onKeyDown: _keyboardClickable.default,
+            className: styles.itemFeedbackWrapper,
+            tabIndex: "0"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: styles.itemFeedbackLabel
+          }, (0, _formatMessage.default)('Feedback from grader')), /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
+            customStyles: styles.itemFeedbackText,
+            content: graderFeedback.content
+          }));
+        } else {
+          return this.renderFeedbackBox(graderFeedback.content, (0, _formatMessage.default)('Feedback from grader'));
+        }
+      }
+    }
+  }, {
+    key: "renderSessionItemResult",
+    value: function renderSessionItemResult() {
+      var _this$props = this.props,
+          appContainer = _this$props.appContainer,
+          sessionItem = _this$props.sessionItem,
+          sessionItemResult = _this$props.sessionItemResult,
+          itemResultsModifications = _this$props.itemResultsModifications;
+
+      if (!sessionItemResult.isLoaded()) {
+        return null;
+      }
+
+      var item = sessionItem.getItem();
+      var slug = item.getInteractionType && item.getInteractionType().slug;
+      var ResultInteraction = (0, _componentForItem.default)(slug, _quizCommon.COMPONENT_RESULT);
+      var simpleItem = item.toJS();
+      var simpleResultsModifications = itemResultsModifications && itemResultsModifications.toJS() || {};
+      var simpleSessionItem = sessionItem.toJS();
+      var simpleSessionItemResult = sessionItemResult.toJS();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.result
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.question
+      }, /*#__PURE__*/_react.default.createElement(ResultInteraction, {
+        appContainer: appContainer,
+        itemBody: simpleItem.itemBody,
+        itemId: simpleSessionItem.id // needed for input group name
+        ,
+        interactionData: simpleItem.interactionData,
+        properties: simpleItem.properties || {},
+        scoringData: simpleSessionItem.scoringData,
+        scoredData: simpleSessionItemResult.scoredData,
+        itemResultsModifications: simpleResultsModifications[simpleSessionItem.id]
+      })), this.renderItemFeedback(simpleSessionItemResult));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var classes = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.sessionItemResult, true), (0, _defineProperty2.default)(_classNames, styles.topBorder, this.props.shouldRenderTopBorder), _classNames));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes
+      }, this.regraded() ? this.renderRegradeAlert() : null, this.unscorable() ? this.renderUnscorableAlert() : null, this.renderHeader(), this.renderSessionItemResult());
+    }
+  }, {
+    key: "points",
+    get: function get() {
+      var sessionItemResult = this.props.sessionItemResult;
+      var normalizedSessionItemResult = sessionItemResult && sessionItemResult.toJS() || {};
+      return normalizedSessionItemResult.score;
+    }
+  }, {
+    key: "pointsPresent",
+    get: function get() {
+      return typeof this.points === 'number';
+    }
+  }, {
+    key: "pointsPossible",
+    get: function get() {
+      return this.props.sessionItemResult.pointsPossible;
+    }
+  }, {
+    key: "pointsPossiblePresent",
+    get: function get() {
+      return typeof this.pointsPossible === 'number';
+    }
+  }, {
+    key: "pointsDisplayText",
+    get: function get() {
+      var points = this.points;
+      var possible = this.pointsPossible;
+
+      if (this.pointsPresent && this.pointsPossiblePresent) {
+        return (0, _formatMessage.default)("{ possible, plural,\n          one   {{points, number} / # point}\n          other {{points, number} / # points}\n        }", {
+          points: points,
+          possible: possible
+        });
+      }
+
+      if (this.pointsPossiblePresent) {
+        return (0, _formatMessage.default)("{ possible, plural,\n          one   {# point}\n          other {# points}\n        } possible", {
+          possible: possible
+        });
+      }
+
+      if (this.pointsPresent) {
+        return (0, _formatMessage.default)("{ points, plural,\n          one   {# point}\n          other {# points}\n        } earned", {
+          points: points
+        });
+      }
+
+      return '';
+    }
+  }]);
+  SessionItemResult.displayName = "SessionItemResult";
+  return SessionItemResult;
+}(_react.Component), _class2.propTypes = {
+  appContainer: _CustomPropTypes.default.selectors.isRequired,
+  editGraderFeedback: _propTypes.default.func,
+  hideGraderFeedback: _propTypes.default.bool,
+  itemResultsModifications: _reactImmutableProptypes.default.map,
+  sessionItem: _reactImmutableProptypes.default.record.isRequired,
+  sessionItemResult: _reactImmutableProptypes.default.record.isRequired,
+  shouldRenderAnswerFeedback: _propTypes.default.bool,
+  shouldRenderTopBorder: _propTypes.default.bool
+}, _class2.defaultProps = {
+  editGraderFeedback: null,
+  hideGraderFeedback: false,
+  itemResultsModifications: null,
+  shouldRenderAnswerFeedback: false,
+  shouldRenderTopBorder: true
+}, _temp)) || _class);
+exports.SessionItemResult = SessionItemResult;
+var _default = SessionItemResult;
+exports.default = _default;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      typography = _ref.typography,
+      colors = _ref.colors,
+      borders = _ref.borders;
+  return {
+    sessionItemResultPadding: spacing.small,
+    topBorderWidth: borders.widthSmall,
+    topBorderColor: colors.tiara,
+    resultMargin: spacing.small,
+    pointsColor: colors.ash,
+    pointFontSize: typography.fontSizeXSmall,
+    questionFontSize: typography.fontSizeMedium,
+    itemFeedbackWrapperMargin: spacing.small,
+    itemFeedbackWrapperPadding: spacing.xSmall,
+    itemFeedbackWrapperBorderRadius: borders.radiusMedium,
+    itemFeedbackWrapperFontSize: typography.fontSizeSmall,
+    itemFeedbackWrapperBorderStyle: borders.borderStyle,
+    itemFeedbackWrapperBorderWidth: borders.widthSmall,
+    itemFeedbackWrapperBorderColor: colors.tiara,
+    itemFeedbackWrapperStyle: borders.style,
+    itemFeedbackLabelColor: colors.oxford,
+    itemFeedbackLabelFontSize: typography.fontSizeXSmall,
+    itemFeedbackMargin: spacing.xxSmall,
+    itemFeedbackTextSize: typography.fontSizeMedium,
+    itemFeedbackTextMargin: spacing.xxxSmall,
+    textPaddingLeft: spacing.small,
+    textPaddingBottom: spacing.small
+  };
+}

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

@@ -0,0 +1,123 @@
+"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.SessionItemResultsList = 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 _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 _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes.js"));
+
+var _index = _interopRequireDefault(require("../SessionItemResult/index.js"));
+
+var _index2 = _interopRequireDefault(require("../ResultStimulus/index.js"));
+
+var _generateDisplayPositions = _interopRequireDefault(require("../../../../util/generateDisplayPositions.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'tONnG',
+  template: function template(theme) {
+    return "\n\n.tONnG_fnuh{margin:".concat(theme.sessionItemResultsListHeaderWrapperMarginTopBottom || 'inherit', " ").concat(theme.sessionItemResultsListHeaderWrapperMarginLeftRight || 'inherit', ";text-align:left}\n\n[dir=ltr] .tONnG_fnuh,[dir=rtl] .tONnG_fnuh{text-align:left}\n\n.tONnG_crKU{font-size:").concat(theme.sessionItemResultsListHeaderFontSize || 'inherit', "}\n\n.tONnG_cMxE{border-bottom:solid ").concat(theme.sessionItemResultsListBorderWidth || 'inherit', " ").concat(theme.sessionItemResultsListBorderColor || 'inherit', ";margin-top:").concat(theme.sessionItemResultsListMargin || 'inherit', "}");
+  },
+  'sessionItemResultsListHeaderWrapper': 'tONnG_fnuh',
+  'sessionItemResultsListHeader': 'tONnG_crKU',
+  'sessionItemResultsList': 'tONnG_cMxE'
+};
+var SessionItemResultsList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(SessionItemResultsList, _Component);
+
+  var _super = (0, _createSuper2.default)(SessionItemResultsList);
+
+  function SessionItemResultsList() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, SessionItemResultsList);
+
+    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.renderSessionItem = function (sessionItem, shouldRenderTopBorder) {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        appContainer: _this.props.appContainer,
+        key: sessionItem.id,
+        sessionItem: sessionItem,
+        sessionItemResult: sessionItem.sessionItemResult,
+        shouldRenderTopBorder: shouldRenderTopBorder
+      });
+    };
+
+    _this.renderItems = function () {
+      return (0, _generateDisplayPositions.default)(_this.props.sessionItems).map(function (si) {
+        return _this.renderItem(si.record);
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(SessionItemResultsList, [{
+    key: "renderItem",
+    value: function renderItem(sessionItem) {
+      if (sessionItem.isStimulus) {
+        return /*#__PURE__*/_react.default.createElement(_index2.default, {
+          key: sessionItem.id,
+          renderItem: this.renderSessionItem,
+          stimulus: sessionItem.stimulusRecord,
+          sessionItem: sessionItem
+        });
+      }
+
+      return this.renderSessionItem(sessionItem, true);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sessionItemResultsListHeaderWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sessionItemResultsListHeader,
+        "data-automation": "sdk-session-item-results-list-header"
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h2"
+      }, (0, _formatMessage.default)('Your Answers:')))), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sessionItemResultsList
+      }, this.renderItems()));
+    }
+  }]);
+  SessionItemResultsList.displayName = "SessionItemResultsList";
+  return SessionItemResultsList;
+}(_react.Component), _class2.propTypes = {
+  appContainer: _CustomPropTypes.default.selectors.isRequired,
+  sessionItems: _reactImmutableProptypes.default.list.isRequired
+}, _temp)) || _class);
+exports.SessionItemResultsList = SessionItemResultsList;
+var _default = SessionItemResultsList;
+exports.default = _default;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      typography = _ref.typography,
+      colors = _ref.colors,
+      borders = _ref.borders;
+  return {
+    sessionItemResultsListHeaderWrapperMarginTopBottom: spacing.small,
+    sessionItemResultsListHeaderWrapperMarginLeftRight: spacing.large,
+    sessionItemResultsListHeaderFontSize: typography.fontSizeXLarge,
+    sessionItemResultsListMargin: spacing.xSmall,
+    sessionItemResultsListBorderColor: colors.tiara,
+    sessionItemResultsListBorderWidth: borders.widthSmall
+  };
+}

package/lib/common/components/resources/stimulus/Stimulus/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var _modal = require("../../../../actions/modal.js");
+
+var _ui = require("../../../../actions/ui.js");
+
+var _featureCheck = require("../../../../../common/util/featureCheck.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  var dndPosition = state.getIn(['dragAndDrop', 'position']);
+  var draggingAboveHalf = state.getIn(['dragAndDrop', 'aboveHalf'], false);
+  var dropIntoEmptyStimulus = state.getIn(['dragAndDrop', 'intoEmptyStimulus']);
+  var draggingOver = props.draggingOnBuild && dndPosition === props.quizEntry.position;
+  return {
+    childEntries: props.quizEntry.getNestedEntries(),
+    dropIntoEmptyStimulus: draggingOver && dropIntoEmptyStimulus,
+    draggingOver: draggingOver,
+    draggingAboveHalf: draggingOver && draggingAboveHalf,
+    stimulusOrientationEnabled: (0, _featureCheck.featureOn)('customizable_stimulus_orientation')
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    openDeleteStimulusModal: (0, _redux.bindActionCreators)(_modal.openDeleteStimulusModal, dispatch),
+    setUi: (0, _redux.bindActionCreators)(_ui.set, dispatch)
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;