@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
199 lines (196 loc) • 8.83 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.correctChoice = 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 _uiRadioInput = require("@instructure/ui-radio-input");
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, _MultipleChoiceResult;
/** @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));
}
var correctChoice = exports.correctChoice = function correctChoice(_ref) {
var interactionData = _ref.interactionData,
scoredData = _ref.scoredData;
return interactionData.choices.find(function (item) {
var choiceData = scoredData.value && scoredData.value[item.id] || {};
return choiceData.hasOwnProperty('correct') ? choiceData.correct : choiceData.resultScore;
}) || {};
};
/**
---
category: MultipleChoice
---
Multiple Choice Result component
```jsx_example
<SettingsSwitcher locales={LOCALES}>
<MultipleChoiceResult
itemBody="<p>Who was the first <strong>President</strong> of the United States?</p>"
itemId="44"
interactionData={{
choices: [{
id: 'uuid1',
position: 1,
itemBody: '<p>George Washington</p><p>was the first</p><p>president</p>'
},
{ id: 'uuid2', position: 2, itemBody: '<p>Alexander Hamilton</p>' },
{ id: 'uuid3', position: 3, itemBody: '<p>John Adams</p>' },
{ id: 'uuid4', position: 4, itemBody: '<p>Thomas Jefferson</p>' }
]
}}
scoredData={{
correct: false,
value: {
uuid1: { resultScore: 1, correct: true },
uuid2: { resultScore: 0, userResponded: true }
}
}}
/>
</SettingsSwitcher>
```
**/
var MultipleChoiceResult = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_MultipleChoiceResult = /*#__PURE__*/function (_Component) {
function MultipleChoiceResult() {
var _this2;
(0, _classCallCheck2["default"])(this, MultipleChoiceResult);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, MultipleChoiceResult, [].concat(args));
(0, _defineProperty2["default"])(_this2, "renderFeedbackChoice", function (_ref2, status) {
var id = _ref2.id,
itemBody = _ref2.itemBody;
return (0, _emotion.jsx)("div", {
key: id,
css: _this2.props.styles.responseWrapper
}, (0, _emotion.jsx)(_quizResultsFeedback.FeedbackWrapper, {
correctAnswer: correctChoice(_this2.props).itemBody,
hiddenCorrectAnswerText: (0, _formatMessage["default"])('Correct answer: '),
hiddenIncorrectAnswerText: (0, _formatMessage["default"])('Incorrect answer: '),
status: status,
richContent: true
}, (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
value: id,
name: "interaction_".concat(_this2.props.itemId),
label: (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
content: itemBody
}),
checked: true,
readOnly: true
})));
});
(0, _defineProperty2["default"])(_this2, "renderUngradedChoice", function (_ref3, checked) {
var id = _ref3.id,
itemBody = _ref3.itemBody;
return (0, _emotion.jsx)("div", {
key: id,
css: [_this2.props.styles.responseWrapper, _this2.props.styles.radioWrapper]
}, (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
value: id,
name: "interaction_".concat(_this2.props.itemId),
label: (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
content: itemBody
}), !checked && (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])(', Not Selected'))),
checked: checked,
readOnly: true
}));
});
return _this2;
}
(0, _inherits2["default"])(MultipleChoiceResult, _Component);
return (0, _createClass2["default"])(MultipleChoiceResult, [{
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 noResponse = choices.every(function (_ref4) {
var checked = _ref4.checked;
return !checked;
});
var correctnessKnown = typeof scoredData.correct !== 'undefined';
return (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, {
itemBody: this.props.itemBody
}, (0, _emotion.jsx)("div", null, choices.map(function (_ref5) {
var choice = _ref5.choice,
correct = _ref5.correct,
checked = _ref5.checked;
var status;
if (correct === true || correct > 0) {
status = 'correct';
} else if (correctnessKnown && checked) {
status = 'incorrect';
}
if (!status || !checked) {
// Choice has no feedback
return _this3.renderUngradedChoice(choice, checked);
}
return _this3.renderFeedbackChoice(choice, status);
})), noResponse && (0, _emotion.jsx)(_quizResultsFeedback.NoResponse, {
css: this.props.styles.noResponseWrapper,
correctAnswerLabel: correctChoice(this.props).itemBody,
responseHidden: !scoredData.value,
richContent: true,
status: correctnessKnown ? 'incorrect' : 'unknown'
}));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_MultipleChoiceResult, "displayName", 'MultipleChoiceResult'), (0, _defineProperty2["default"])(_MultipleChoiceResult, "componentId", "Quizzes".concat(_MultipleChoiceResult.displayName)), (0, _defineProperty2["default"])(_MultipleChoiceResult, "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,
itemId: _propTypes["default"].string,
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
}), (0, _defineProperty2["default"])(_MultipleChoiceResult, "defaultProps", {
itemId: void 0
}), _MultipleChoiceResult)) || _class);