@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
228 lines (222 loc) • 9.71 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/map"));
var _find = _interopRequireDefault(require("lodash/find"));
var _indexOf = _interopRequireDefault(require("lodash/indexOf"));
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _emotion = require("@instructure/emotion");
var _Wordbank = _interopRequireDefault(require("../../fill_blank/drag_components/Wordbank"));
var _TakeStem = _interopRequireDefault(require("../../fill_blank/Take/take_components/TakeStem"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _RichFillBlankTake;
/** @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: 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 = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_RichFillBlankTake = /*#__PURE__*/function (_Component) {
function RichFillBlankTake() {
var _this2;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])(_this2, "moveChoiceToWordbank", function (blankId, choiceId) {
var responses = _this2.props.userResponse.value;
var blank = (0, _find["default"])(responses, {
id: blankId
});
// Removes the answer for blank
if (blank) {
var blankIndex = (0, _indexOf["default"])((0, _map["default"])(_this2.props.userResponse.value, 'id'), blankId);
var newResponses = (0, _immutabilityHelper["default"])(responses, (0, _defineProperty2["default"])({}, blankIndex, {
$merge: {
value: null
}
}));
_this2.props.handleResponseUpdate(newResponses);
}
});
(0, _defineProperty2["default"])(_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;
}
(0, _inherits2["default"])(RichFillBlankTake, _Component);
return (0, _createClass2["default"])(RichFillBlankTake, [{
key: "remainingWordBankChoices",
value: function remainingWordBankChoices() {
var choices = (0, _toConsumableArray2["default"])(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 (0, _emotion.jsx)(_Wordbank["default"], {
blanks: blanks,
response: this.props.userResponse.value,
reuseWordBankChoices: this.props.interactionData.reuseWordBankChoices,
returnChoiceToWordbank: this.moveChoiceToWordbank,
wordBankChoices: this.remainingWordBankChoices()
});
}
}
}, {
key: "render",
value: function render() {
return (0, _emotion.jsx)("div", {
css: this.props.styles.question
}, (0, _emotion.jsx)("div", {
css: this.props.styles.headerSection
}, (0, _emotion.jsx)(_TakeStem["default"], {
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());
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_RichFillBlankTake, "displayName", 'RichFillBlankTake'), (0, _defineProperty2["default"])(_RichFillBlankTake, "componentId", "Quizzes".concat(_RichFillBlankTake.displayName)), (0, _defineProperty2["default"])(_RichFillBlankTake, "propTypes", {
handleResponseUpdate: _propTypes["default"].func,
interactionData: _propTypes["default"].object.isRequired,
itemBody: _propTypes["default"].string.isRequired,
userResponse: _propTypes["default"].object.isRequired,
readOnly: _propTypes["default"].bool,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_RichFillBlankTake, "defaultProps", {
handleResponseUpdate: void 0,
readOnly: false
}), _RichFillBlankTake)) || _class);