@instructure/quiz-core 22.15.0 → 22.15.1

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

@@ -1,354 +1,438 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.SessionItemResult = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
-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 _emotion = require("@instructure/emotion");
-var _quizRce = require("@instructure/quiz-rce");
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/format-message"));
-var _PositionBox = _interopRequireDefault(require("../../positionBox/PositionBox"));
-var _quizCommon = require("@instructure/quiz-common");
-var _componentForItem = _interopRequireDefault(require("../../../../util/componentForItem"));
-var _CustomPropTypes = _interopRequireDefault(require("../../../../util/CustomPropTypes"));
-var _keyboardClickable = _interopRequireDefault(require("../../../../util/keyboardClickable"));
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _dec, _class, _SessionItemResult;
-/** @jsx jsx */
-/* eslint "jsx-a11y/click-events-have-key-events": "warn" */
-function _callSuper(_this, derived, args) {
-  function isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
-    try {
-      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (e) {
-      return false;
+/** @jsx jsx */ /* eslint "jsx-a11y/click-events-have-key-events": "warn" */ function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
-  }
-  derived = (0, _getPrototypeOf2["default"])(derived);
-  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+    return self;
 }
-var SessionItemResult = exports.SessionItemResult = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_SessionItemResult = /*#__PURE__*/function (_Component) {
-  function SessionItemResult() {
-    var _this2;
-    (0, _classCallCheck2["default"])(this, SessionItemResult);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, SessionItemResult, [].concat(args));
-    (0, _defineProperty2["default"])(_this2, "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 _this2;
-  }
-  (0, _inherits2["default"])(SessionItemResult, _Component);
-  return (0, _createClass2["default"])(SessionItemResult, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.makeStyles();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.props.makeStyles();
-    }
-  }, {
-    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: "questionNumber",
-    value: function questionNumber() {
-      return this.props.sessionItem.questionNumber;
-    }
-  }, {
-    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');
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
     }
-  }, {
-    key: "hasRegradeInfo",
-    value: function hasRegradeInfo() {
-      return this.props.sessionItemResult.regradeInfo && this.props.sessionItemResult.regradeInfo.size > 1;
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
     }
-  }, {
-    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
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
         });
-      }
-      return '';
-    }
-  }, {
-    key: "renderRegradeAlert",
-    value: function renderRegradeAlert() {
-      return (0, _emotion.jsx)(_uiAlerts.Alert, {
-        variant: "warning",
-        margin: "medium"
-      }, (0, _emotion.jsx)(_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 (0, _emotion.jsx)(_uiAlerts.Alert, {
-        variant: "warning",
-        margin: "medium"
-      }, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, message));
+    } else {
+        obj[key] = value;
     }
-  }, {
-    key: "renderRegradePoints",
-    value: function renderRegradePoints() {
-      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiView.View, {
-        as: "span",
-        size: "small",
-        margin: "small"
-      }, (0, _emotion.jsx)(_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')
-      }))), (0, _emotion.jsx)(_uiView.View, {
-        as: "span",
-        size: "small",
-        margin: "small"
-      }, (0, _emotion.jsx)(_uiText.Text, {
-        color: "alert"
-      }, (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')
-      }))));
+    return obj;
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
     }
-  }, {
-    key: "renderHeader",
-    value: function renderHeader() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sessionItemResultHeader
-      }, this.renderResultQuestionNumber(), !this.props.restrictQuantitativeData && (this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints()));
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
     }
-  }, {
-    key: "renderResultQuestionNumber",
-    value: function renderResultQuestionNumber() {
-      var questionNumber = this.questionNumber();
-      var questionNumberText;
-      if (this.regraded() && this.unscorable()) {
-        questionNumberText = (0, _formatMessage["default"])('Results for question {questionNumber, number}. There was a problem grading this question. This question has been regraded.', {
-          questionNumber: questionNumber
-        });
-      } else if (this.regraded()) {
-        questionNumberText = (0, _formatMessage["default"])('Results for question {questionNumber, number}. This question has been regraded.', {
-          questionNumber: questionNumber
-        });
-      } else if (this.unscorable() && this.props.editGraderFeedback) {
-        questionNumberText = (0, _formatMessage["default"])('Results for question {questionNumber, number}. There was a problem grading this question.', {
-          questionNumber: questionNumber
-        });
-      } else if (this.unscorable()) {
-        questionNumberText = (0, _formatMessage["default"])('Results for question {questionNumber, number}. There was a problem grading this question. Please inform your instructor.', {
-          questionNumber: questionNumber
-        });
-      } else {
-        questionNumberText = (0, _formatMessage["default"])('Results for question {questionNumber, number}.', {
-          questionNumber: questionNumber
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+function _ts_decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Alert } from '@instructure/ui-alerts';
+import { Text } from '@instructure/ui-text';
+import { Heading } from '@instructure/ui-heading';
+import { View } from '@instructure/ui-view';
+import { PresentationContent } from '@instructure/ui-a11y-content';
+import { jsx } from '@instructure/emotion';
+import { RichContentRenderer } from '@instructure/quiz-rce';
+import t from '@instructure/quiz-i18n/format-message';
+import PositionBox from '../../positionBox/PositionBox';
+import { COMPONENT_RESULT, withStyleOverrides } from '@instructure/quiz-common';
+import componentForItem from '../../../../util/componentForItem';
+import CustomPropTypes from '../../../../util/CustomPropTypes';
+import keyboardClickable from '../../../../util/keyboardClickable';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+export var SessionItemResult = /*#__PURE__*/ function(Component) {
+    "use strict";
+    _inherits(SessionItemResult, Component);
+    function SessionItemResult() {
+        _class_call_check(this, SessionItemResult);
+        var _this;
+        _this = _call_super(this, SessionItemResult, arguments), _define_property(_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 (0, _emotion.jsx)(_PositionBox["default"], {
-        position: questionNumber,
-        headingLevel: "h3",
-        headingText: questionNumberText
-      });
-    }
-  }, {
-    key: "renderPoints",
-    value: function renderPoints() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.points,
-        className: "fs-mask"
-      }, this.pointsDisplayText);
-    }
-  }, {
-    key: "renderFeedbackBox",
-    value: function renderFeedbackBox(feedbackContent, formattedFeedbackTitle) {
-      if (feedbackContent) {
-        return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiHeading.Heading, {
-          level: "h4",
-          margin: "xx-small small"
-        }, formattedFeedbackTitle), (0, _emotion.jsx)("div", {
-          css: this.props.styles.textPadding
-        }, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
-          customStyles: this.props.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 (0, _emotion.jsx)("div", {
-          css: this.props.styles.itemFeedbackWrapper
-        }, (0, _emotion.jsx)(_uiHeading.Heading, {
-          level: "h3",
-          margin: "xx-small small medium"
-        }, (0, _formatMessage["default"])('Feedback')), (0, _emotion.jsx)("div", {
-          "data-automation": "sdk-answer-feedback-results-view"
-        }, this.props.shouldRenderAnswerFeedback && answerFeedback), correctFeedback, incorrectFeedback, neutralFeedback, graderFeedback);
-      }
+        return _this;
     }
-  }, {
-    key: "renderGraderFeedback",
-    value: function renderGraderFeedback(simpleSessionItemResult) {
-      var graderFeedback = simpleSessionItemResult.feedback && simpleSessionItemResult.feedback.graderFeedback || {};
-      if (!this.props.hideGraderFeedback && graderFeedback.content) {
-        if (this.props.editGraderFeedback) {
-          return (0, _emotion.jsx)("div", {
-            role: "button",
-            onClick: this.props.editGraderFeedback,
-            onKeyDown: _keyboardClickable["default"],
-            css: this.props.styles.itemFeedbackWrapper,
-            tabIndex: "0"
-          }, (0, _emotion.jsx)("div", {
-            css: this.props.styles.itemFeedbackLabel
-          }, (0, _formatMessage["default"])('Feedback from grader')), (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
-            customStyles: this.props.styles.itemFeedbackText,
-            content: graderFeedback.content
-          }));
-        } else {
-          return this.renderFeedbackBox(graderFeedback.content, (0, _formatMessage["default"])('Feedback from grader'));
+    _create_class(SessionItemResult, [
+        {
+            key: "componentDidMount",
+            value: function componentDidMount() {
+                this.props.makeStyles();
+            }
+        },
+        {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate() {
+                this.props.makeStyles();
+            }
+        },
+        {
+            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: "questionNumber",
+            value: function questionNumber() {
+                return this.props.sessionItem.questionNumber;
+            }
+        },
+        {
+            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: "pointsDisplayText",
+            get: function get() {
+                var points = this.points;
+                var possible = this.pointsPossible;
+                if (this.pointsPresent && this.pointsPossiblePresent) {
+                    return t("{ possible, plural,\n          one   {{points, number} / # point}\n          other {{points, number} / # points}\n        }", {
+                        points: points,
+                        possible: possible
+                    });
+                }
+                if (this.pointsPossiblePresent) {
+                    return t("{ possible, plural,\n          one   {# point}\n          other {# points}\n        } possible", {
+                        possible: possible
+                    });
+                }
+                if (this.pointsPresent) {
+                    return t("{ points, plural,\n          one   {# point}\n          other {# points}\n        } earned", {
+                        points: points
+                    });
+                }
+                return '';
+            }
+        },
+        {
+            key: "renderRegradeAlert",
+            value: function renderRegradeAlert() {
+                return /*#__PURE__*/ jsx(Alert, {
+                    variant: "warning",
+                    margin: "medium"
+                }, /*#__PURE__*/ jsx(PresentationContent, null, t('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 ? t('There was a problem grading this question.') : t('There was a problem grading this question. Please inform your instructor.');
+                return /*#__PURE__*/ jsx(Alert, {
+                    variant: "warning",
+                    margin: "medium"
+                }, /*#__PURE__*/ jsx(PresentationContent, null, message));
+            }
+        },
+        {
+            key: "renderRegradePoints",
+            value: function renderRegradePoints() {
+                return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(View, {
+                    as: "span",
+                    size: "small",
+                    margin: "small"
+                }, /*#__PURE__*/ jsx(Text, {
+                    color: "secondary"
+                }, t("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__*/ jsx(View, {
+                    as: "span",
+                    size: "small",
+                    margin: "small"
+                }, /*#__PURE__*/ jsx(Text, {
+                    color: "alert"
+                }, t("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__*/ jsx("div", {
+                    css: this.props.styles.sessionItemResultHeader
+                }, this.renderResultQuestionNumber(), !this.props.restrictQuantitativeData && (this.hasRegradeInfo() ? this.renderRegradePoints() : this.renderPoints()));
+            }
+        },
+        {
+            key: "renderResultQuestionNumber",
+            value: function renderResultQuestionNumber() {
+                var questionNumber = this.questionNumber();
+                var questionNumberText;
+                if (this.regraded() && this.unscorable()) {
+                    questionNumberText = t('Results for question {questionNumber, number}. There was a problem grading this question. This question has been regraded.', {
+                        questionNumber: questionNumber
+                    });
+                } else if (this.regraded()) {
+                    questionNumberText = t('Results for question {questionNumber, number}. This question has been regraded.', {
+                        questionNumber: questionNumber
+                    });
+                } else if (this.unscorable() && this.props.editGraderFeedback) {
+                    questionNumberText = t('Results for question {questionNumber, number}. There was a problem grading this question.', {
+                        questionNumber: questionNumber
+                    });
+                } else if (this.unscorable()) {
+                    questionNumberText = t('Results for question {questionNumber, number}. There was a problem grading this question. Please inform your instructor.', {
+                        questionNumber: questionNumber
+                    });
+                } else {
+                    questionNumberText = t('Results for question {questionNumber, number}.', {
+                        questionNumber: questionNumber
+                    });
+                }
+                return /*#__PURE__*/ jsx(PositionBox, {
+                    position: questionNumber,
+                    headingLevel: "h3",
+                    headingText: questionNumberText
+                });
+            }
+        },
+        {
+            key: "renderPoints",
+            value: function renderPoints() {
+                return /*#__PURE__*/ jsx("div", {
+                    css: this.props.styles.points,
+                    className: "fs-mask"
+                }, this.pointsDisplayText);
+            }
+        },
+        {
+            key: "renderFeedbackBox",
+            value: function renderFeedbackBox(feedbackContent, formattedFeedbackTitle) {
+                if (feedbackContent) {
+                    return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(Heading, {
+                        level: "h4",
+                        margin: "xx-small small"
+                    }, formattedFeedbackTitle), /*#__PURE__*/ jsx("div", {
+                        css: this.props.styles.textPadding
+                    }, /*#__PURE__*/ jsx(RichContentRenderer, {
+                        customStyles: this.props.styles.itemFeedbackText,
+                        content: feedbackContent
+                    })));
+                }
+            }
+        },
+        {
+            key: "renderItemFeedback",
+            value: function renderItemFeedback(simpleSessionItemResult) {
+                var itemFeedback = simpleSessionItemResult.feedback && simpleSessionItemResult.feedback.itemFeedback || {};
+                var correctFeedback = this.renderFeedbackBox(itemFeedback.correct, t('Based on answering correctly'));
+                var incorrectFeedback = this.renderFeedbackBox(itemFeedback.incorrect, t('Based on answering incorrectly'));
+                var neutralFeedback = this.renderFeedbackBox(itemFeedback.neutral, t('General Feedback'));
+                var graderFeedback = this.renderGraderFeedback(simpleSessionItemResult);
+                var answerFeedback = this.renderFeedbackBox(simpleSessionItemResult.answerFeedback, t('Based on your answer'));
+                var showAnswerFeedback = this.props.shouldRenderAnswerFeedback && answerFeedback;
+                var showFeedback = correctFeedback || incorrectFeedback || neutralFeedback || graderFeedback;
+                if (showAnswerFeedback || showFeedback) {
+                    return /*#__PURE__*/ jsx("div", {
+                        css: this.props.styles.itemFeedbackWrapper
+                    }, /*#__PURE__*/ jsx(Heading, {
+                        level: "h3",
+                        margin: "xx-small small medium"
+                    }, t('Feedback')), /*#__PURE__*/ jsx("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__*/ jsx("div", {
+                            role: "button",
+                            onClick: this.props.editGraderFeedback,
+                            onKeyDown: keyboardClickable,
+                            css: this.props.styles.itemFeedbackWrapper,
+                            tabIndex: "0"
+                        }, /*#__PURE__*/ jsx("div", {
+                            css: this.props.styles.itemFeedbackLabel
+                        }, t('Feedback from grader')), /*#__PURE__*/ jsx(RichContentRenderer, {
+                            customStyles: this.props.styles.itemFeedbackText,
+                            content: graderFeedback.content
+                        }));
+                    } else {
+                        return this.renderFeedbackBox(graderFeedback.content, t('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 = componentForItem(slug, COMPONENT_RESULT);
+                var simpleItem = item.toJS();
+                var simpleResultsModifications = itemResultsModifications && itemResultsModifications.toJS() || {};
+                var simpleSessionItem = sessionItem.toJS();
+                var simpleSessionItemResult = sessionItemResult.toJS();
+                return /*#__PURE__*/ jsx("div", {
+                    css: this.props.styles.result
+                }, /*#__PURE__*/ jsx("div", {
+                    css: this.props.styles.question
+                }, /*#__PURE__*/ jsx(ResultInteraction, {
+                    appContainer: appContainer,
+                    itemBody: simpleItem.itemBody,
+                    itemId: simpleSessionItem.id,
+                    interactionData: simpleItem.interactionData,
+                    properties: simpleItem.properties || {},
+                    scoringData: simpleSessionItem.scoringData,
+                    scoredData: simpleSessionItemResult.scoredData,
+                    itemResultsModifications: simpleResultsModifications[simpleSessionItem.id]
+                })), this.renderItemFeedback(simpleSessionItemResult));
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                return /*#__PURE__*/ jsx("div", {
+                    css: this.props.styles.sessionItemResult
+                }, this.regraded() ? this.renderRegradeAlert() : null, this.unscorable() ? this.renderUnscorableAlert() : null, this.renderHeader(), this.renderSessionItemResult());
+            }
         }
-      }
-    }
-  }, {
-    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 (0, _emotion.jsx)("div", {
-        css: this.props.styles.result
-      }, (0, _emotion.jsx)("div", {
-        css: this.props.styles.question
-      }, (0, _emotion.jsx)(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() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sessionItemResult
-      }, this.regraded() ? this.renderRegradeAlert() : null, this.unscorable() ? this.renderUnscorableAlert() : null, this.renderHeader(), this.renderSessionItemResult());
-    }
-  }]);
-}(_react.Component), (0, _defineProperty2["default"])(_SessionItemResult, "displayName", 'SessionItemResult'), (0, _defineProperty2["default"])(_SessionItemResult, "componentId", "Quizzes".concat(_SessionItemResult.displayName)), (0, _defineProperty2["default"])(_SessionItemResult, "propTypes", {
-  appContainer: _CustomPropTypes["default"].selectors.isRequired,
-  editGraderFeedback: _propTypes["default"].func,
-  hideGraderFeedback: _propTypes["default"].bool,
-  itemResultsModifications: _reactImmutableProptypes["default"].map,
-  restrictQuantitativeData: _propTypes["default"].bool,
-  sessionItem: _reactImmutableProptypes["default"].record.isRequired,
-  sessionItemResult: _reactImmutableProptypes["default"].record.isRequired,
-  shouldRenderAnswerFeedback: _propTypes["default"].bool,
-  shouldRenderTopBorder: _propTypes["default"].bool,
-  // used in styles.js
-  styles: _propTypes["default"].object,
-  makeStyles: _propTypes["default"].func
-}), (0, _defineProperty2["default"])(_SessionItemResult, "defaultProps", {
-  editGraderFeedback: null,
-  hideGraderFeedback: false,
-  itemResultsModifications: null,
-  restrictQuantitativeData: false,
-  shouldRenderAnswerFeedback: false,
-  shouldRenderTopBorder: true
-}), _SessionItemResult)) || _class);
-var _default = exports["default"] = SessionItemResult;
+    ]);
+    return SessionItemResult;
+}(Component);
+_define_property(SessionItemResult, "displayName", 'SessionItemResult');
+_define_property(SessionItemResult, "componentId", "Quizzes".concat(SessionItemResult.displayName));
+_define_property(SessionItemResult, "propTypes", {
+    appContainer: CustomPropTypes.selectors.isRequired,
+    editGraderFeedback: PropTypes.func,
+    hideGraderFeedback: PropTypes.bool,
+    itemResultsModifications: ImmutablePropTypes.map,
+    restrictQuantitativeData: PropTypes.bool,
+    sessionItem: ImmutablePropTypes.record.isRequired,
+    sessionItemResult: ImmutablePropTypes.record.isRequired,
+    shouldRenderAnswerFeedback: PropTypes.bool,
+    shouldRenderTopBorder: PropTypes.bool,
+    styles: PropTypes.object,
+    makeStyles: PropTypes.func
+});
+_define_property(SessionItemResult, "defaultProps", {
+    editGraderFeedback: null,
+    hideGraderFeedback: false,
+    itemResultsModifications: null,
+    restrictQuantitativeData: false,
+    shouldRenderAnswerFeedback: false,
+    shouldRenderTopBorder: true
+});
+SessionItemResult = _ts_decorate([
+    withStyleOverrides(generateStyle, generateComponentTheme)
+], SessionItemResult);
+export default SessionItemResult;