@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
149 lines (148 loc) • 5.52 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _EssayResult;
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 = _getPrototypeOf(derived);
return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
/** @jsx jsx */
import { Component } from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import { Text } from '@instructure/ui-text';
import { jsx } from '@instructure/emotion';
import t from '@instructure/quiz-i18n/es/format-message';
import { ItemBodyWrapper, RichContentRenderer } from '@instructure/quiz-rce';
import { SubjectiveFeedback } from '@instructure/quiz-results-feedback';
import { WordCount } from '../helpers/WordCount';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import { withStyleOverrides } from '@instructure/quiz-common';
/**
---
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 = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_EssayResult = /*#__PURE__*/function (_Component) {
function EssayResult() {
_classCallCheck(this, EssayResult);
return _callSuper(this, EssayResult, arguments);
}
_inherits(EssayResult, _Component);
return _createClass(EssayResult, [{
key: "getGradeStatus",
value: function getGradeStatus() {
var workingGradeStatus = get(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 jsx("div", {
css: this.props.styles.gradingNotesWrapper
}, jsx(Text, {
color: "primary",
size: "small",
weight: "bold"
}, t('Grading Notes')), jsx("div", null, jsx(Text, {
color: "primary",
size: "small"
}, gradingNotes)));
}
}
}, {
key: "renderEssay",
value: function renderEssay() {
var value = this.props.scoredData.value;
var content;
if (typeof value === 'undefined') {
content = t('(response not displayed)');
} else if (!value) {
content = t('(no answer)');
} else {
content = value;
}
if (this.props.interactionData.rce) {
return jsx(RichContentRenderer, {
customStyles: this.props.styles.userResponse,
content: content
});
}
return jsx("div", {
css: this.props.styles.userResponse
}, jsx(Text, {
color: "primary",
size: "small"
}, content));
}
}, {
key: "render",
value: function render() {
var gradeStatus = this.getGradeStatus();
var interactionData = this.props.interactionData;
return jsx(ItemBodyWrapper, {
itemBody: this.props.itemBody
}, jsx(SubjectiveFeedback, {
gradeStatus: gradeStatus
}, this.renderEssay()), jsx(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());
}
}]);
}(Component), _defineProperty(_EssayResult, "displayName", 'EssayResult'), _defineProperty(_EssayResult, "componentId", "Quizzes".concat(_EssayResult.displayName)), _defineProperty(_EssayResult, "propTypes", {
interactionData: PropTypes.object.isRequired,
itemBody: PropTypes.string.isRequired,
scoredData: PropTypes.shape({
gradeStatus: PropTypes.oneOf(['waiting', 'graded', 'correct', 'incorrect']),
value: PropTypes.string
}).isRequired,
scoringData: PropTypes.object,
styles: PropTypes.object
}), _defineProperty(_EssayResult, "defaultProps", {
scoredData: {
value: 'waiting'
},
scoringData: void 0,
itemResultsModifications: void 0
}), _EssayResult)) || _class);
export { EssayResult as default };