@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
212 lines (210 loc) • 9.21 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 _uiA11yContent = require("@instructure/ui-a11y-content");
var _uiCheckbox = require("@instructure/ui-checkbox");
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 _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _MultipleAnswerResult;
/** @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: MultipleAnswer
---
Multiple Answer Result component
```jsx_example
<SettingsSwitcher locales={LOCALES}>
<MultipleAnswerResult
itemBody="Who was in the first cabinet of the USA?"
interactionData={{
choices: [
{ id: 'uuid1', position: 1, itemBody: '<p>Thomas Jefferson</p>' },
{ id: 'uuid2', position: 2, itemBody: '<p>John Marshall</p>' },
{ id: 'uuid3', position: 3, itemBody: '<p>John Knox</p>' },
{ id: 'uuid4', position: 4, itemBody: '<p>Alexander Hamilton</p>' },
{ id: 'uuid5', position: 5, itemBody: '<p>Aaron Burr</p>' },
{ id: 'uuid6', position: 6, itemBody: '<p>Ben Franklin</p>' }
]
}}
scoredData={{
correct: false,
value: {
uuid1: { resultScore: 1, userResponded: true },
uuid2: { resultScore: 1, userResponded: false },
uuid3: { resultScore: 0, userResponded: true }
}
}}
/>
</SettingsSwitcher>
```
**/
var MultipleAnswerResult = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_MultipleAnswerResult = /*#__PURE__*/function (_Component) {
function MultipleAnswerResult() {
var _this2;
(0, _classCallCheck2["default"])(this, MultipleAnswerResult);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, MultipleAnswerResult, [].concat(args));
(0, _defineProperty2["default"])(_this2, "renderPlainChoice", function (_ref, checked) {
var id = _ref.id,
itemBody = _ref.itemBody;
var srtext = (0, _formatMessage["default"])('Answer, ');
if (typeof checked !== 'undefined') {
srtext = checked ? (0, _formatMessage["default"])('Selected Answer, ') : (0, _formatMessage["default"])('Unselected Answer, ');
}
return (0, _emotion.jsx)("div", {
key: id,
css: _this2.props.styles.responseWrapper
}, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
value: id,
label: (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, srtext), (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
content: itemBody
})),
checked: checked,
onChange: function onChange() {},
readOnly: true
}));
});
(0, _defineProperty2["default"])(_this2, "renderFeedbackChoice", function (_ref2, checked, status) {
var id = _ref2.id,
itemBody = _ref2.itemBody;
var feedbackText,
wrapperStatus = 'unknown';
if (checked) {
if (status === 'correct') {
feedbackText = (0, _formatMessage["default"])('Selected Answer - Correct');
wrapperStatus = 'correct';
} else if (status === 'incorrect') {
feedbackText = (0, _formatMessage["default"])('Selected Answer - Incorrect');
wrapperStatus = 'incorrect';
}
} else if (status === 'correct') {
feedbackText = (0, _formatMessage["default"])('Missed Option - Incorrect');
wrapperStatus = 'incorrect';
}
return (0, _emotion.jsx)("div", {
key: id,
css: _this2.props.styles.responseWrapper
}, (0, _emotion.jsx)(_quizResultsFeedback.FeedbackWrapper, {
correctAnswer: feedbackText,
hiddenCorrectAnswerText: (0, _formatMessage["default"])('Correct answer: '),
hiddenIncorrectAnswerText: (0, _formatMessage["default"])('Incorrect answer: '),
status: wrapperStatus,
subTitleDescription: "",
richContent: true
}, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
value: id,
label: (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
content: itemBody
}),
checked: checked,
onChange: function onChange() {},
readOnly: true
})));
});
return _this2;
}
(0, _inherits2["default"])(MultipleAnswerResult, _Component);
return (0, _createClass2["default"])(MultipleAnswerResult, [{
key: "noResponseStatus",
value: function noResponseStatus() {
var correct = this.props.scoredData.correct;
if (typeof correct === 'undefined') return 'unknown';
return correct ? 'correct' : 'incorrect';
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var scoredData = this.props.scoredData;
var choices = this.props.interactionData.choices.map(function (choice) {
var choiceData = scoredData.value && scoredData.value[choice.id] || {};
var correct = choiceData.hasOwnProperty('correct') ? choiceData.correct : choiceData.resultScore;
var checked = choiceData.userResponded;
return {
choice: choice,
correct: correct,
checked: checked
};
});
var nothingSelected = choices.every(function (_ref3) {
var checked = _ref3.checked;
return !checked;
});
return (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, {
itemBody: this.props.itemBody
}, choices.map(function (_ref4) {
var choice = _ref4.choice,
correct = _ref4.correct,
checked = _ref4.checked;
var status;
if (typeof checked !== 'undefined') {
if (correct === true || correct > 0) {
status = 'correct';
} else if (correct === false || correct === 0) {
status = 'incorrect';
}
}
if (!status) {
// Choice has no feedback
return _this3.renderPlainChoice(choice, checked);
} else {
return _this3.renderFeedbackChoice(choice, checked, status);
}
}), nothingSelected && (0, _emotion.jsx)(_quizResultsFeedback.NoResponse, {
css: this.props.styles.noResponseWrapper,
responseHidden: !scoredData.value,
status: this.noResponseStatus()
}));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_MultipleAnswerResult, "displayName", 'MultipleAnswerResult'), (0, _defineProperty2["default"])(_MultipleAnswerResult, "componentId", "Quizzes".concat(_MultipleAnswerResult.displayName)), (0, _defineProperty2["default"])(_MultipleAnswerResult, "propTypes", {
interactionData: _propTypes["default"].shape({
choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
id: _propTypes["default"].string,
itemBody: _propTypes["default"].string,
position: _propTypes["default"].number
}))
}).isRequired,
itemBody: _propTypes["default"].string.isRequired,
scoredData: _propTypes["default"].shape({
correct: _propTypes["default"].bool,
value: _propTypes["default"].objectOf(_propTypes["default"].shape({
correct: _propTypes["default"].bool,
resultScore: _propTypes["default"].number,
userResponded: _propTypes["default"].bool
}))
}).isRequired,
styles: _propTypes["default"].object
}), _MultipleAnswerResult)) || _class);