@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
198 lines (194 loc) • 9.28 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _map = _interopRequireDefault(require("lodash/fp/map"));
var _striptags = _interopRequireDefault(require("striptags"));
var _emotion = require("@instructure/emotion");
var _uiCheckbox = require("@instructure/ui-checkbox");
var _uiButtons = require("@instructure/ui-buttons");
var _uiIcons = require("@instructure/ui-icons");
var _quizRce = require("@instructure/quiz-rce");
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _MultipleAnswerTake;
/** @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 Take component
```jsx_example
function Example (props) {
const exampleProps = {
itemBody: 'Who was in the first cabinet of the USA?',
interactionData: {
choices: [
{ id: 'uuid1', itemBody: 'Thomas Jefferson', position: 1 },
{ id: 'uuid2', itemBody: 'John Marshall', position: 2 },
{ id: 'uuid3', itemBody: 'John Knox', position: 3 },
{ id: 'uuid4', itemBody: 'Alexander Hamilton', position: 4 },
{ id: 'uuid5', itemBody: 'Aaron Burr', position: 5 },
{ id: 'uuid6', itemBody: 'Ben Franklin', position: 6 }
]
},
scoringData: { value: ['uuid1', 'uuid3', 'uuid4'] },
userResponse: { value: ['uuid1', 'uuid6'] }
}
return (
<MultipleAnswerTake {...exampleProps} {...props} />
)
}
<SettingsSwitcher locales={LOCALES}>
<TakeStateProvider>
<Example />
</TakeStateProvider>
</SettingsSwitcher>
```
**/
var MultipleAnswerTake = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_MultipleAnswerTake = /*#__PURE__*/function (_Component) {
function MultipleAnswerTake() {
var _this2;
(0, _classCallCheck2["default"])(this, MultipleAnswerTake);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, MultipleAnswerTake, [].concat(args));
(0, _defineProperty2["default"])(_this2, "handleCheckboxGroupChange", function (value) {
if (!_this2.props.readOnly) {
_this2.props.handleResponseUpdate(value, {
eliminated: _this2.getEliminations()
});
}
});
(0, _defineProperty2["default"])(_this2, "toggleElimination", function (choiceId) {
return function (event) {
event.preventDefault();
var currEliminations = _this2.getEliminations();
if (currEliminations.includes(choiceId)) {
var choiceIndex = currEliminations.indexOf(choiceId);
_this2.props.handleResponseUpdate(_this2.props.userResponse.value, {
eliminated: [].concat((0, _toConsumableArray2["default"])(currEliminations.slice(0, choiceIndex)), (0, _toConsumableArray2["default"])(currEliminations.slice(choiceIndex + 1)))
});
} else {
_this2.props.handleResponseUpdate(_this2.props.userResponse.value, {
eliminated: [].concat((0, _toConsumableArray2["default"])(currEliminations), [choiceId])
});
}
};
});
(0, _defineProperty2["default"])(_this2, "renderChoice", function (choice) {
var _this2$props = _this2.props,
readOnly = _this2$props.readOnly,
choiceElimination = _this2$props.choiceElimination;
var eliminated = _this2.getEliminations().includes(choice.id);
var itemBody = (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
customStyles: _this2.props.styles.itemBody,
content: choice.itemBody
});
var showEliminations = !readOnly && choiceElimination;
var screenReaderLabel = eliminated ? (0, _formatMessage["default"])('Undo elimination of answer {choice}', {
choice: (0, _striptags["default"])(choice.itemBody)
}) : (0, _formatMessage["default"])('Eliminate answer {choice}', {
choice: (0, _striptags["default"])(choice.itemBody)
});
var eliminationLabel = (0, _emotion.jsx)("div", {
css: _this2.props.styles.labelWrapper
}, eliminated ? (0, _emotion.jsx)("s", null, itemBody) : itemBody, (0, _emotion.jsx)(_uiButtons.IconButton, {
withBackground: false,
withBorder: false,
onClick: _this2.toggleElimination(choice.id),
screenReaderLabel: screenReaderLabel
}, (0, _emotion.jsx)(_uiIcons.IconStrikethroughLine, null)));
var ariaLabel = (0, _formatMessage["default"])('Answer: {choice}', {
choice: (0, _striptags["default"])(choice.itemBody)
});
var ariaEliminationLabel = eliminated ? (0, _formatMessage["default"])('Eliminated Answer: {choice}', {
choice: (0, _striptags["default"])(choice.itemBody)
}) : ariaLabel;
return (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
key: choice.id,
value: choice.id,
"aria-label": showEliminations ? ariaEliminationLabel : ariaLabel,
label: showEliminations ? eliminationLabel : itemBody
});
});
return _this2;
}
(0, _inherits2["default"])(MultipleAnswerTake, _Component);
return (0, _createClass2["default"])(MultipleAnswerTake, [{
key: "getEliminations",
value: function getEliminations() {
var _this$props$userRespo;
return ((_this$props$userRespo = this.props.userResponse.properties) === null || _this$props$userRespo === void 0 ? void 0 : _this$props$userRespo.eliminated) || [];
}
}, {
key: "render",
value: function render() {
return (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, null, (0, _emotion.jsx)("div", {
className: "fs-mask"
}, (0, _emotion.jsx)(_uiCheckbox.CheckboxGroup, {
value: this.props.userResponse.value || [],
name: "interaction_".concat(this.props.itemId),
onChange: this.handleCheckboxGroupChange,
readOnly: this.props.readOnly,
description: (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
content: this.props.itemBody,
customStyles: this.props.styles.itemDescription
})
}, (0, _map["default"])(this.renderChoice, this.props.interactionData.choices))));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_MultipleAnswerTake, "displayName", 'MultipleAnswerTake'), (0, _defineProperty2["default"])(_MultipleAnswerTake, "componentId", "Quizzes".concat(_MultipleAnswerTake.displayName)), (0, _defineProperty2["default"])(_MultipleAnswerTake, "propTypes", {
choiceElimination: _propTypes["default"].bool,
handleResponseUpdate: _propTypes["default"].func.isRequired,
itemId: _propTypes["default"].string,
itemBody: _propTypes["default"].string.isRequired,
interactionData: _propTypes["default"].shape({
choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
id: _propTypes["default"].string,
itemBody: _propTypes["default"].string
}))
}).isRequired,
userResponse: _propTypes["default"].shape({
value: _propTypes["default"].arrayOf(_propTypes["default"].string),
properties: _propTypes["default"].shape({
eliminated: _propTypes["default"].array
})
}),
readOnly: _propTypes["default"].bool,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_MultipleAnswerTake, "defaultProps", {
choiceElimination: false,
itemId: void 0,
readOnly: false,
userResponse: {},
handleResponseUpdate: Function.prototype
}), _MultipleAnswerTake)) || _class);