@instructure/quiz-grading
Version:
The Quiz React SDK by Instructure Inc.
286 lines (285 loc) • 13.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.RegradingModal = 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 _uiAlerts = require("@instructure/ui-alerts");
var _uiButtons = require("@instructure/ui-buttons");
var _uiText = require("@instructure/ui-text");
var _uiHeading = require("@instructure/ui-heading");
var _uiRadioInput = require("@instructure/ui-radio-input");
var _emotion = require("@instructure/emotion");
var _quizCommon = require("@instructure/quiz-common");
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _dec, _class, _RegradingModal;
/** @jsx jsx */
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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));
}
var RegradingModal = exports.RegradingModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_RegradingModal = /*#__PURE__*/function (_Component) {
function RegradingModal() {
var _this2;
(0, _classCallCheck2["default"])(this, RegradingModal);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, RegradingModal, [].concat(args));
(0, _defineProperty2["default"])(_this2, "state", {
hasGenericErrorFromApi: false
});
// Handlers
(0, _defineProperty2["default"])(_this2, "clearGenericErrorFromApi", function () {
_this2.setState({
hasGenericErrorFromApi: false
});
});
(0, _defineProperty2["default"])(_this2, "cancelAction", function () {
_this2.clearGenericErrorFromApi();
_this2.props.closeModal();
});
(0, _defineProperty2["default"])(_this2, "onSpeedgraderOptionChange", function (event, newValue) {
_this2.props.setScoreReconciliation(newValue);
});
(0, _defineProperty2["default"])(_this2, "onSubmit", function () {
var _this2$props = _this2.props,
createQuizEntryRegrade = _this2$props.createQuizEntryRegrade,
quizId = _this2$props.quizId,
regradingPayload = _this2$props.regradingPayload,
scoreReconciliation = _this2$props.scoreReconciliation;
_this2.clearGenericErrorFromApi();
createQuizEntryRegrade(quizId, _objectSpread(_objectSpread({}, regradingPayload), {}, {
scoreReconciliation: scoreReconciliation
})).then(function () {
_this2.props.toggleRegradingEditMode('');
_this2.props.addSuccess((0, _formatMessage["default"])('Regrade scheduled successfully; check back later to see it applied.'));
})["catch"](function (e) {
if (e.validationErrorsFromApi) {
// Close the modal so the user can view the input validation errors and correct them
_this2.cancelAction();
_this2.props.handleValidationErrorsFromApi(e.validationErrorsFromApi);
} else {
// Some other type of error occurred
_this2.setState({
hasGenericErrorFromApi: true
});
}
throw e;
});
});
return _this2;
}
(0, _inherits2["default"])(RegradingModal, _Component);
return (0, _createClass2["default"])(RegradingModal, [{
key: "optionInputs",
get:
// Getters
function get() {
return {
new_score: {
hint: (0, _formatMessage["default"])('some scores may be reduced, some may be raised'),
text: (0, _formatMessage["default"])('award points for correct answer only')
},
old_score: {
hint: (0, _formatMessage["default"])('no scores will be reduced'),
text: (0, _formatMessage["default"])('award points for both current and previous answers')
},
any_response: {
hint: (0, _formatMessage["default"])('everyone who answers gets full credit'),
text: (0, _formatMessage["default"])('award points for any submitted answer')
},
thrown_out: {
hint: (0, _formatMessage["default"])('full credit awarded to all who have submitted the quiz'),
text: (0, _formatMessage["default"])('give everyone full credit')
}
};
}
}, {
key: "scoreReconciliation",
get: function get() {
return this.props.scoreReconciliation;
}
}, {
key: "selectHint",
get: function get() {
var hint = this.optionInputs[this.scoreReconciliation].hint;
return [{
text: (0, _formatMessage["default"])('Result: {hint}', {
hint: hint
}),
type: 'hint'
}];
}
}, {
key: "cancelButton",
value:
// Rendering
function cancelButton() {
return (0, _emotion.jsx)(_uiButtons.Button, {
margin: _quizCommon.XSMALL_SIDE_MARGIN,
onClick: this.cancelAction,
ref: this.setRef('cancelImportButton')
}, (0, _formatMessage["default"])('Cancel'));
}
}, {
key: "regradeButton",
value: function regradeButton() {
return (0, _emotion.jsx)(_uiButtons.Button, {
margin: _quizCommon.XSMALL_SIDE_MARGIN,
onClick: this.onSubmit,
ref: this.setRef('confirmButton'),
color: "primary",
"data-automation": "sdk-regrade-button"
}, (0, _formatMessage["default"])('Regrade'));
}
}, {
key: "setRef",
value: function setRef(refName) {
var _this3 = this;
return function (node) {
_this3[refName] = node;
};
}
}, {
key: "renderOptionInputs",
value: function renderOptionInputs() {
return Object.entries(this.optionInputs).map(function (optionInput) {
return (0, _emotion.jsx)("option", {
key: optionInput[0],
value: optionInput[0]
}, optionInput[1].text);
});
}
}, {
key: "renderRadioInputs",
value: function renderRadioInputs() {
return Object.entries(this.optionInputs).map(function (optionInput) {
return (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
label: optionInput[1].text,
value: optionInput[0],
key: optionInput[0],
"data-automation": "sdk-regrade-option-".concat(optionInput[0])
});
});
}
}, {
key: "renderModalBody",
value: function renderModalBody() {
return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiAlerts.Alert, {
margin: "small 0",
transition: "none",
variant: "info"
}, (0, _emotion.jsx)("div", {
css: this.props.styles.alert
}, (0, _emotion.jsx)("span", null, _formatMessage["default"].rich("\n <0>Regrading only applies to completed submissions.</0>\n <1>If all students are affected please wait for all submissions before Regrading.</1>\n ", [function (_ref) {
var children = _ref.children;
return (0, _emotion.jsx)(_uiText.Text, {
as: "div",
weight: "bold",
key: "0"
}, children);
}, function (_ref2) {
var children = _ref2.children;
return (0, _emotion.jsx)(_uiText.Text, {
as: "span",
key: "1"
}, children);
}])))), (0, _emotion.jsx)("div", {
css: this.props.styles.radioInputGroup,
role: "form"
}, (0, _emotion.jsx)(_uiRadioInput.RadioInputGroup, {
description: (0, _formatMessage["default"])('Select how you would like to apply this regrade.'),
name: "scoring_reconciliation",
onChange: this.onSpeedgraderOptionChange,
messages: this.selectHint,
value: this.scoreReconciliation
}, this.renderRadioInputs())));
}
}, {
key: "renderErrorFromApi",
value: function renderErrorFromApi() {
if (this.state.hasGenericErrorFromApi) {
return (0, _emotion.jsx)("div", {
css: this.props.styles.errorAlert
}, (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
theme: {
componentOverrides: {
Alert: {
contentPadding: '0.4rem 1.5rem'
}
}
}
}, (0, _emotion.jsx)(_uiAlerts.Alert, {
margin: "0 0",
transition: "fade",
variant: "error"
}, (0, _emotion.jsx)(_uiText.Text, {
size: "small"
}, (0, _formatMessage["default"])('Regrade did not run due to server error. Please try again later!')))));
}
}
}, {
key: "render",
value: function render() {
return (0, _emotion.jsx)(_quizCommon.Modal, {
open: this.props.modalOpen,
size: "medium",
onDismiss: this.cancelAction,
label: (0, _formatMessage["default"])('Question Regrade Options'),
ref: this.setRef('modal'),
"data-automation": "sdk-regrade-modal",
shouldCloseOnDocumentClick: false
}, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
level: "reset",
as: "h2"
}, (0, _formatMessage["default"])('Question Regrade Options')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
onClick: this.cancelAction,
placement: "end",
offset: "medium",
screenReaderLabel: (0, _formatMessage["default"])('Close')
})), (0, _emotion.jsx)(_quizCommon.ModalBody, null, this.renderModalBody()), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.renderErrorFromApi(), this.cancelButton(), this.regradeButton()));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_RegradingModal, "displayName", 'RegradingModal'), (0, _defineProperty2["default"])(_RegradingModal, "componentId", "Quizzes".concat(_RegradingModal.displayName)), (0, _defineProperty2["default"])(_RegradingModal, "propTypes", {
addSuccess: _propTypes["default"].func.isRequired,
closeModal: _propTypes["default"].func.isRequired,
createQuizEntryRegrade: _propTypes["default"].func.isRequired,
modalOpen: _propTypes["default"].bool.isRequired,
quizId: _propTypes["default"].string.isRequired,
regradingPayload: _propTypes["default"].shape({
quizEntryId: _propTypes["default"].string.isRequired,
scoringAlgorithm: _propTypes["default"].string,
scoringData: _propTypes["default"].object
}).isRequired,
scoreReconciliation: _propTypes["default"].string.isRequired,
setScoreReconciliation: _propTypes["default"].func.isRequired,
toggleRegradingEditMode: _propTypes["default"].func.isRequired,
handleValidationErrorsFromApi: _propTypes["default"].func,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_RegradingModal, "defaultProps", {
handleValidationErrorsFromApi: Function.prototype
}), _RegradingModal)) || _class);
var _default = exports["default"] = RegradingModal;