@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
223 lines (217 loc) • 8.64 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, _RichFillBlankTake;
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/map';
import find from 'lodash/find';
import indexOf from 'lodash/indexOf';
import update from 'immutability-helper';
import { jsx } from '@instructure/emotion';
import Wordbank from '../../fill_blank/drag_components/Wordbank';
import TakeStem from '../../fill_blank/Take/take_components/TakeStem';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import { withStyleOverrides } from '@instructure/quiz-common';
/**
---
category: RichFillInTheBlank
---
Rich Fill in the Blank Take component
```jsx_example
const WrappedExample = DragDropContext(HTML5Backend)(FillBlankTake)
function Example (props) {
const exampleProps = {
itemBody: `<p><span id="blank_fitb_uuid1"></span> Columbus sailed in
<span id="blank_fitb_uuid2"></span> from the country of
<span id="blank_fitb_uuid3"></span> on the continent of
<span id="blank_fitb_uuid4"></span> across the
<span id="blank_fitb_uuid5"></span> and found...
<span id="blank_fitb_uuid6"></span>!!! Where the people were "
<span id="blank_fitb_uuid7"></span>"</p>`,
interactionData: {
blanks: [{
id: 'fitb_uuid1',
answerType: 'openEntry'
}, {
id: 'fitb_uuid2',
answerType: 'openEntry'
}, {
id: 'fitb_uuid3',
answerType: 'openEntry'
}, {
id: 'fitb_uuid4',
answerType: 'openEntry'
}, {
id: 'fitb_uuid5',
answerType: 'openEntry'
}, {
id: 'fitb_uuid6',
choices: [
{ id: 'choice_uuid11_brazil', position: 1, itemBody: 'Brazil' },
{ id: 'choice_uuid12_austria', position: 2, itemBody: 'Austria' },
{ id: 'choice_uuid13_america', position: 3, itemBody: 'America' }
],
answerType: 'wordbank'
}, {
id: 'fitb_uuid7',
choices: [
{ id: 'choice_uuid11_peaceful', position: 1, itemBody: 'peaceful' },
{ id: 'choice_uuid12_war-torn', position: 2, itemBody: 'war-torn' },
{ id: 'choice_uuid13_confused', position: 3, itemBody: 'confused' }
],
answerType: 'dropdown'
}]
},
userResponse: {
value: [
{ id: 'fitb_uuid1', value: 'Christopher', type: 'Text'},
{ id: 'fitb_uuid2', value: '1493', type: 'Text'},
{ id: 'fitb_uuid3', value: 'Span', type: 'Text'},
{ id: 'fitb_uuid4', value: 'Europe', type: 'Text'},
{ id: 'fitb_uuid5', value: 'Atlantic', type: 'Text'},
{ id: 'fitb_uuid6', value: 'choice_uuid12_austria', type: 'Text'},
{ id: 'fitb_uuid7', value: 'choice_uuid13_confused', type: 'Text'}
]
}
}
return (
<WrappedExample {...exampleProps} {...props} />
)
}
<SettingsSwitcher locales={LOCALES}>
<TakeStateProvider>
<Example />
</TakeStateProvider>
</SettingsSwitcher>
```
**/
var RichFillBlankTake = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_RichFillBlankTake = /*#__PURE__*/function (_Component) {
function RichFillBlankTake() {
var _this2;
_classCallCheck(this, RichFillBlankTake);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, RichFillBlankTake, [].concat(args));
_defineProperty(_this2, "moveChoiceToWordbank", function (blankId, choiceId) {
var responses = _this2.props.userResponse.value;
var blank = find(responses, {
id: blankId
});
// Removes the answer for blank
if (blank) {
var blankIndex = indexOf(map(_this2.props.userResponse.value, 'id'), blankId);
var newResponses = update(responses, _defineProperty({}, blankIndex, {
$merge: {
value: null
}
}));
_this2.props.handleResponseUpdate(newResponses);
}
});
_defineProperty(_this2, "allWordBankChoices", function () {
if (_this2.props.interactionData.wordBankChoices) {
return _this2.props.interactionData.wordBankChoices;
}
var wordbankBlanks = _this2.props.interactionData.blanks.filter(function (blank) {
return blank.answerType === 'wordbank';
});
return wordbankBlanks.map(function (blank) {
return blank.choices;
}).flat();
});
return _this2;
}
_inherits(RichFillBlankTake, _Component);
return _createClass(RichFillBlankTake, [{
key: "remainingWordBankChoices",
value: function remainingWordBankChoices() {
var choices = _toConsumableArray(this.allWordBankChoices());
if (this.props.interactionData.reuseWordBankChoices) {
// only unique choices (by itemBody)
choices = choices.filter(function (value, index, array) {
return array.findIndex(function (choice) {
return choice.itemBody === value.itemBody;
}) === index;
});
} else {
// filter the choices which are already used
this.props.userResponse.value.forEach(function (response) {
var choiceIndex = choices.findIndex(function (choice) {
return [choice.id, choice.itemBody].includes(response.value);
});
if (choiceIndex > -1) {
choices.splice(choiceIndex, 1);
}
});
}
return choices;
}
}, {
key: "renderWordbank",
value: function renderWordbank() {
var blanks = this.props.interactionData.blanks || [];
if (blanks.find(function (blank) {
return ['wordbank', 'dropdown'].includes(blank.answerType);
})) {
return jsx(Wordbank, {
blanks: blanks,
response: this.props.userResponse.value,
reuseWordBankChoices: this.props.interactionData.reuseWordBankChoices,
returnChoiceToWordbank: this.moveChoiceToWordbank,
wordBankChoices: this.remainingWordBankChoices()
});
}
}
}, {
key: "render",
value: function render() {
return jsx("div", {
css: this.props.styles.question
}, jsx("div", {
css: this.props.styles.headerSection
}, jsx(TakeStem, {
onUpdate: this.props.handleResponseUpdate,
itemBody: this.props.itemBody,
interactionData: this.props.interactionData,
readOnly: this.props.readOnly,
returnChoiceToWordbank: this.moveChoiceToWordbank,
richFITB: true,
userResponses: this.props.userResponse.value,
wordBankChoices: this.remainingWordBankChoices()
})), this.renderWordbank());
}
}]);
}(Component), _defineProperty(_RichFillBlankTake, "displayName", 'RichFillBlankTake'), _defineProperty(_RichFillBlankTake, "componentId", "Quizzes".concat(_RichFillBlankTake.displayName)), _defineProperty(_RichFillBlankTake, "propTypes", {
handleResponseUpdate: PropTypes.func,
interactionData: PropTypes.object.isRequired,
itemBody: PropTypes.string.isRequired,
userResponse: PropTypes.object.isRequired,
readOnly: PropTypes.bool,
styles: PropTypes.object
}), _defineProperty(_RichFillBlankTake, "defaultProps", {
handleResponseUpdate: void 0,
readOnly: false
}), _RichFillBlankTake)) || _class);
export { RichFillBlankTake as default };