@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
220 lines (216 loc) • 10.1 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 _sortBy = _interopRequireDefault(require("lodash/fp/sortBy"));
var _flow = _interopRequireDefault(require("lodash/fp/flow"));
var _striptags = _interopRequireDefault(require("striptags"));
var _uiRadioInput = require("@instructure/ui-radio-input");
var _uiButtons = require("@instructure/ui-buttons");
var _uiIcons = require("@instructure/ui-icons");
var _emotion = require("@instructure/emotion");
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, _MultipleChoiceTake;
/** @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: MultipleChoice
---
Multiple Choice Take component
```jsx_example
function Example (props) {
const exampleProps = {
itemId: 'mc_type',
itemBody: 'Who was the first President of the United States?',
interactionData: {
choices: [
{ id: 'uuid1', itemBody: 'George Washington', position: 1 },
{ id: 'uuid2', itemBody: 'Alexander Hamilton.', position: 2 },
{
id: 'uuid3',
itemBody: `
<p>
John Adams
<iframe
src="//www.youtube.com/embed/nrvpZxMfKaU"
width="560"
height="314"
allowfullscreen="allowfullscreen"
></iframe>
</p>
`,
position: 3
},
{ id: 'uuid4', itemBody: 'Thomas Jefferson', position: 4 }
]
},
userResponse: { value: 'uuid1' }
}
return (
<MultipleChoiceTake {...exampleProps} {...props} />
)
}
<SettingsSwitcher locales={LOCALES}>
<TakeStateProvider>
<Example />
</TakeStateProvider>
</SettingsSwitcher>
```
**/
var MultipleChoiceTake = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_MultipleChoiceTake = /*#__PURE__*/function (_Component) {
function MultipleChoiceTake() {
var _this2;
(0, _classCallCheck2["default"])(this, MultipleChoiceTake);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, MultipleChoiceTake, [].concat(args));
(0, _defineProperty2["default"])(_this2, "handleChosenValChange", function (event, choiceId) {
_this2.props.handleResponseUpdate(choiceId, {
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, "clearSelection", function () {
_this2.props.handleResponseUpdate(null);
});
(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)(_uiRadioInput.RadioInput, {
key: choice.id,
value: choice.id,
"aria-label": showEliminations ? ariaEliminationLabel : ariaLabel,
label: showEliminations ? eliminationLabel : itemBody
});
});
return _this2;
}
(0, _inherits2["default"])(MultipleChoiceTake, _Component);
return (0, _createClass2["default"])(MultipleChoiceTake, [{
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() {
var chosenVal = this.props.userResponse.value;
return (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, null, (0, _emotion.jsx)("div", {
className: "fs-mask"
}, (0, _emotion.jsx)(_uiRadioInput.RadioInputGroup, {
defaultValue: chosenVal,
value: chosenVal,
onChange: this.handleChosenValChange,
name: "interaction_".concat(this.props.itemId),
readOnly: this.props.readOnly,
description: (0, _emotion.jsx)(_quizRce.RichContentRenderer, {
content: this.props.itemBody,
customStyles: this.props.styles.itemDescription
})
}, (0, _flow["default"])((0, _sortBy["default"])('position'), (0, _map["default"])(this.renderChoice))(this.props.interactionData.choices)), this.props.allowClearMcSelection && (0, _emotion.jsx)(_uiButtons.CondensedButton, {
onClick: this.clearSelection,
margin: "small 0 0 medium"
}, (0, _formatMessage["default"])('Clear my selection'))));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_MultipleChoiceTake, "displayName", 'MultipleChoiceTake'), (0, _defineProperty2["default"])(_MultipleChoiceTake, "componentId", "Quizzes".concat(_MultipleChoiceTake.displayName)), (0, _defineProperty2["default"])(_MultipleChoiceTake, "propTypes", {
allowClearMcSelection: _propTypes["default"].bool,
choiceElimination: _propTypes["default"].bool,
handleResponseUpdate: _propTypes["default"].func,
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,
userResponse: _propTypes["default"].shape({
value: _propTypes["default"].string,
properties: _propTypes["default"].shape({
eliminated: _propTypes["default"].array
})
}).isRequired,
readOnly: _propTypes["default"].bool,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_MultipleChoiceTake, "defaultProps", {
allowClearMcSelection: false,
choiceElimination: false,
handleResponseUpdate: Function.prototype,
itemId: void 0,
readOnly: false
}), _MultipleChoiceTake)) || _class);