@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
236 lines (230 loc) • 11.1 kB
JavaScript
"use strict";
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 _uiAlerts = require("@instructure/ui-alerts");
var _uiText = require("@instructure/ui-text");
var _emotion = require("@instructure/emotion");
var _quizRce = require("@instructure/quiz-rce");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _Wordbank = _interopRequireDefault(require("../drag_components/Wordbank"));
var _TakeStem = _interopRequireDefault(require("./take_components/TakeStem"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _FillBlankTake;
/** @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: FillInTheBlank
---
Fill in the Blank Take component
```jsx_example
const WrappedExample = DragDropContext(HTML5Backend)(FillBlankTake)
function Example (props) {
const exampleProps = {
interactionData: {
prompt: '<p><strong>Please</strong> fill in all the blanks</p>',
stemItems: [
{ id: 'stem_uuid-1', position: 1, type: 'text', value: ' ... ' },
{ id: 'stem_uuid0', position: 2, type: 'blank', blankId: 'fitb_uuid1' },
{ id: 'stem_uuid1', position: 3, type: 'text', value: ' Columbus sailed in ' },
{ id: 'stem_uuid2', position: 4, type: 'blank', blankId: 'fitb_uuid2' },
{ id: 'stem_uuid3', position: 5, type: 'text', value: ' , from the country of ' },
{ id: 'stem_uuid4', position: 6, type: 'blank', blankId: 'fitb_uuid3' },
{ id: 'stem_uuid5', position: 7, type: 'text', value: ' , on the continent of ' },
{ id: 'stem_uuid6', position: 8, type: 'blank', blankId: 'fitb_uuid4' },
{ id: 'stem_uuid7', position: 9, type: 'text', value: ' , across the ' },
{ id: 'stem_uuid8', position: 10, type: 'blank', blankId: 'fitb_uuid5' },
{ id: 'stem_uuid9', position: 11, type: 'text', value: ' , and found... ' },
{ id: 'stem_uuid10', position: 12, type: 'blank', blankId: 'fitb_uuid6' },
{ id: 'stem_uuid11', position: 13, type: 'text', value: ' !!! ' },
{ id: 'stem_uuid12', position: 14, type: 'text', value: ' Where the people were " ' },
{ id: 'stem_uuid13', position: 15, type: 'blank', blankId: 'fitb_uuid7' },
{ id: 'stem_uuid14', position: 16, type: 'text', value: ' " ' }
],
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 FillBlankTake = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_FillBlankTake = /*#__PURE__*/function (_Component) {
function FillBlankTake() {
var _this2;
(0, _classCallCheck2["default"])(this, FillBlankTake);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, FillBlankTake, [].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 only if choice is selected response for blank
if (blank && blank.value === choiceId) {
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);
}
});
return _this2;
}
(0, _inherits2["default"])(FillBlankTake, _Component);
return (0, _createClass2["default"])(FillBlankTake, [{
key: "remainingWordBankChoices",
value: function remainingWordBankChoices() {
var wordbankBlanks = this.props.interactionData.blanks.filter(function (blank) {
return blank.answerType === 'wordbank';
});
var choices = (0, _toConsumableArray2["default"])(wordbankBlanks.map(function (blank) {
return blank.choices;
}).flat());
// filter the choices which are already used
this.props.userResponse.value.forEach(function (response) {
var choiceIndex = choices.findIndex(function (choice) {
return choice.id === 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,
returnChoiceToWordbank: this.moveChoiceToWordbank,
wordBankChoices: this.remainingWordBankChoices()
});
}
}
}, {
key: "renderDeprecationWarning",
value: function renderDeprecationWarning() {
return (0, _emotion.jsx)(_uiAlerts.Alert, {
variant: "error"
}, (0, _emotion.jsx)(_uiText.Text, {
color: "primary"
}, (0, _emotion.jsx)("b", null, (0, _formatMessage["default"])('This question type is deprecated'))), (0, _emotion.jsx)("ul", null, (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Quizzes containing deprecated question types will fail to copy.')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('This question was unable to be automatically upgraded due to malformed data.')), (0, _emotion.jsx)("li", null, (0, _formatMessage["default"])('Please delete this question and recreate it using the current Fill in the Blank question type.'))));
}
}, {
key: "render",
value: function render() {
return (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, {
itemBody: this.props.interactionData.prompt
}, this.props.readOnly && this.renderDeprecationWarning(), (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,
interactionData: this.props.interactionData,
returnChoiceToWordbank: this.moveChoiceToWordbank,
userResponses: this.props.userResponse.value,
readOnly: this.props.readOnly,
wordBankChoices: this.remainingWordBankChoices()
})), this.renderWordbank()));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_FillBlankTake, "displayName", 'FillBlankTake'), (0, _defineProperty2["default"])(_FillBlankTake, "componentId", "Quizzes".concat(_FillBlankTake.displayName)), (0, _defineProperty2["default"])(_FillBlankTake, "propTypes", {
handleResponseUpdate: _propTypes["default"].func,
interactionData: _propTypes["default"].object.isRequired,
userResponse: _propTypes["default"].object.isRequired,
readOnly: _propTypes["default"].bool,
styles: _propTypes["default"].object
}), (0, _defineProperty2["default"])(_FillBlankTake, "defaultProps", {
handleResponseUpdate: void 0,
readOnly: false
}), _FillBlankTake)) || _class);