@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
215 lines (211 loc) • 8.62 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _MultipleChoiceTake;
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 = _getPrototypeOf(derived);
return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
/** @jsx jsx */
import { Component } from 'react';
import PropTypes from 'prop-types';
import map from 'lodash/fp/map';
import sortBy from 'lodash/fp/sortBy';
import flow from 'lodash/fp/flow';
import striptags from 'striptags';
import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
import { CondensedButton, IconButton } from '@instructure/ui-buttons';
import { IconStrikethroughLine } from '@instructure/ui-icons';
import { jsx } from '@instructure/emotion';
import { ItemBodyWrapper, RichContentRenderer } from '@instructure/quiz-rce';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import t from '@instructure/quiz-i18n/es/format-message';
import { withStyleOverrides } from '@instructure/quiz-common';
/**
---
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 = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_MultipleChoiceTake = /*#__PURE__*/function (_Component) {
function MultipleChoiceTake() {
var _this2;
_classCallCheck(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));
_defineProperty(_this2, "handleChosenValChange", function (event, choiceId) {
_this2.props.handleResponseUpdate(choiceId, {
eliminated: _this2.getEliminations()
});
});
_defineProperty(_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(_toConsumableArray(currEliminations.slice(0, choiceIndex)), _toConsumableArray(currEliminations.slice(choiceIndex + 1)))
});
} else {
_this2.props.handleResponseUpdate(_this2.props.userResponse.value, {
eliminated: [].concat(_toConsumableArray(currEliminations), [choiceId])
});
}
};
});
_defineProperty(_this2, "clearSelection", function () {
_this2.props.handleResponseUpdate(null);
});
_defineProperty(_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 = jsx(RichContentRenderer, {
customStyles: _this2.props.styles.itemBody,
content: choice.itemBody
});
var showEliminations = !readOnly && choiceElimination;
var screenReaderLabel = eliminated ? t('Undo elimination of answer {choice}', {
choice: striptags(choice.itemBody)
}) : t('Eliminate answer {choice}', {
choice: striptags(choice.itemBody)
});
var eliminationLabel = jsx("div", {
css: _this2.props.styles.labelWrapper
}, eliminated ? jsx("s", null, itemBody) : itemBody, jsx(IconButton, {
withBackground: false,
withBorder: false,
onClick: _this2.toggleElimination(choice.id),
screenReaderLabel: screenReaderLabel
}, jsx(IconStrikethroughLine, null)));
var ariaLabel = t('Answer: {choice}', {
choice: striptags(choice.itemBody)
});
var ariaEliminationLabel = eliminated ? t('Eliminated Answer: {choice}', {
choice: striptags(choice.itemBody)
}) : ariaLabel;
return jsx(RadioInput, {
key: choice.id,
value: choice.id,
"aria-label": showEliminations ? ariaEliminationLabel : ariaLabel,
label: showEliminations ? eliminationLabel : itemBody
});
});
return _this2;
}
_inherits(MultipleChoiceTake, _Component);
return _createClass(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 jsx(ItemBodyWrapper, null, jsx("div", {
className: "fs-mask"
}, jsx(RadioInputGroup, {
defaultValue: chosenVal,
value: chosenVal,
onChange: this.handleChosenValChange,
name: "interaction_".concat(this.props.itemId),
readOnly: this.props.readOnly,
description: jsx(RichContentRenderer, {
content: this.props.itemBody,
customStyles: this.props.styles.itemDescription
})
}, flow(sortBy('position'), map(this.renderChoice))(this.props.interactionData.choices)), this.props.allowClearMcSelection && jsx(CondensedButton, {
onClick: this.clearSelection,
margin: "small 0 0 medium"
}, t('Clear my selection'))));
}
}]);
}(Component), _defineProperty(_MultipleChoiceTake, "displayName", 'MultipleChoiceTake'), _defineProperty(_MultipleChoiceTake, "componentId", "Quizzes".concat(_MultipleChoiceTake.displayName)), _defineProperty(_MultipleChoiceTake, "propTypes", {
allowClearMcSelection: PropTypes.bool,
choiceElimination: PropTypes.bool,
handleResponseUpdate: PropTypes.func,
interactionData: PropTypes.shape({
choices: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
itemBody: PropTypes.string,
position: PropTypes.number
}))
}).isRequired,
itemBody: PropTypes.string.isRequired,
itemId: PropTypes.string,
userResponse: PropTypes.shape({
value: PropTypes.string,
properties: PropTypes.shape({
eliminated: PropTypes.array
})
}).isRequired,
readOnly: PropTypes.bool,
styles: PropTypes.object
}), _defineProperty(_MultipleChoiceTake, "defaultProps", {
allowClearMcSelection: false,
choiceElimination: false,
handleResponseUpdate: Function.prototype,
itemId: void 0,
readOnly: false
}), _MultipleChoiceTake)) || _class);
export { MultipleChoiceTake as default };