@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
155 lines (153 loc) • 6.53 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = 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 _get = _interopRequireDefault(require("lodash/get"));
var _uiText = require("@instructure/ui-text");
var _emotion = require("@instructure/emotion");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _quizRce = require("@instructure/quiz-rce");
var _quizResultsFeedback = require("@instructure/quiz-results-feedback");
var _WordCount = require("../helpers/WordCount");
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _EssayResult;
/** @jsx jsx */
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;
}
}
derived = (0, _getPrototypeOf2["default"])(derived);
return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
/**
---
category: Essay
---
Essay Result component
```jsx_example
<SettingsSwitcher locales={LOCALES}>
<EssayResult
itemBody="Why did the Roman Empire fall?"
interactionData={{
rce: true,
spellCheck: true,
wordCount: true,
wordLimitEnabled: true,
wordLimitMax: 10,
wordLimitMin: 1
}}
scoredData={{ value: 'goths and food shortage', gradeStatus: 'waiting' }}
scoringData={{ value: 'these are the grading notes' }}
/>
</SettingsSwitcher>
```
**/
var EssayResult = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_EssayResult = /*#__PURE__*/function (_Component) {
function EssayResult() {
(0, _classCallCheck2["default"])(this, EssayResult);
return _callSuper(this, EssayResult, arguments);
}
(0, _inherits2["default"])(EssayResult, _Component);
return (0, _createClass2["default"])(EssayResult, [{
key: "getGradeStatus",
value: function getGradeStatus() {
var workingGradeStatus = (0, _get["default"])(this.props, ['itemResultsModifications', 'scoredData', 'gradeStatus']);
return workingGradeStatus || this.props.scoredData.gradeStatus;
}
}, {
key: "renderGradingNotes",
value: function renderGradingNotes() {
var gradingNotes = this.props.scoringData && this.props.scoringData.value;
if (gradingNotes) {
return (0, _emotion.jsx)("div", {
css: this.props.styles.gradingNotesWrapper
}, (0, _emotion.jsx)(_uiText.Text, {
color: "primary",
size: "small",
weight: "bold"
}, (0, _formatMessage["default"])('Grading Notes')), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
color: "primary",
size: "small"
}, gradingNotes)));
}
}
}, {
key: "renderEssay",
value: function renderEssay() {
var value = this.props.scoredData.value;
var content;
if (typeof value === 'undefined') {
content = (0, _formatMessage["default"])('(response not displayed)');
} else if (!value) {
content = (0, _formatMessage["default"])('(no answer)');
} else {
content = value;
}
if (this.props.interactionData.rce) {
return (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
customStyles: this.props.styles.userResponse,
content: content
});
}
return (0, _emotion.jsx)("div", {
css: this.props.styles.userResponse
}, (0, _emotion.jsx)(_uiText.Text, {
color: "primary",
size: "small"
}, content));
}
}, {
key: "render",
value: function render() {
var gradeStatus = this.getGradeStatus();
var interactionData = this.props.interactionData;
return (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, {
itemBody: this.props.itemBody
}, (0, _emotion.jsx)(_quizResultsFeedback.SubjectiveFeedback, {
gradeStatus: gradeStatus
}, this.renderEssay()), (0, _emotion.jsx)(_WordCount.WordCount, {
rce: interactionData.rce,
isEditing: false,
essay: this.props.scoredData.value,
wordCount: interactionData.wordCount,
wordLimitEnabled: interactionData.wordLimitEnabled,
wordLimitMin: interactionData.wordLimitMin,
wordLimitMax: interactionData.wordLimitMax
}), this.renderGradingNotes());
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_EssayResult, "displayName", 'EssayResult'), (0, _defineProperty2["default"])(_EssayResult, "componentId", "Quizzes".concat(_EssayResult.displayName)), (0, _defineProperty2["default"])(_EssayResult, "propTypes", {
interactionData: _propTypes["default"].object.isRequired,
itemBody: _propTypes["default"].string.isRequired,
scoredData: _propTypes["default"].shape({
gradeStatus: _propTypes["default"].oneOf(['waiting', 'graded', 'correct', 'incorrect']),
value: _propTypes["default"].string
}).isRequired,
scoringData: _propTypes["default"].object,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_EssayResult, "defaultProps", {
scoredData: {
value: 'waiting'
},
scoringData: void 0,
itemResultsModifications: void 0
}), _EssayResult)) || _class);