quiz-interactions
Version:
A React UI component Library for quiz interaction types.
231 lines (194 loc) • 8.93 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(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 _uiThemeable = require("@instructure/ui-themeable");
var _quizRce = require("@instructure/quiz-rce");
var _Wordbank = _interopRequireDefault(require("../drag_components/Wordbank"));
var _TakeStem = _interopRequireDefault(require("./take_components/TakeStem"));
var _theme = _interopRequireDefault(require("./theme"));
var _dec, _class, _class2, _temp;
var styles = {
componentId: 'fsErr',
template: function template(theme) {
return "\n\n.fsErr_cSuF{box-sizing:border-box;cursor:pointer;padding:".concat(theme.questionPaddingTop || 'inherit', " ").concat(theme.questionPaddingSide || 'inherit', " ").concat(theme.questionPaddingBottom || 'inherit', ";width:100%}\n\n.fsErr_VpyP{align-items:center;display:flex;flex-direction:row}\n\n.fsErr_tuUw{align-items:center;color:").concat(theme.questionPositionColor || 'inherit', ";flex:1 1 0;font-size:1.4rem}\n\n.fsErr_cwte{align-items:center;display:flex;flex:2 2 auto;justify-content:flex-end;padding-right:5px}");
},
'question': 'fsErr_cSuF',
'headerSection': 'fsErr_VpyP',
'questionPosition': 'fsErr_tuUw',
'points': 'fsErr_cwte'
};
var FillBlankTake = (
/**
---
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>
```
**/
_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(FillBlankTake, _Component);
function FillBlankTake() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, FillBlankTake);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(FillBlankTake)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.moveChoiceToWordbank = function (blankId, choiceId) {
var responses = _this.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)(_this.props.userResponse.value, 'id'), blankId);
var newResponses = (0, _immutabilityHelper.default)(responses, (0, _defineProperty2.default)({}, blankIndex, {
$merge: {
value: null
}
}));
_this.props.handleResponseUpdate(newResponses);
}
};
return _this;
}
(0, _createClass2.default)(FillBlankTake, [{
key: "renderWordbank",
value: function renderWordbank() {
var blanks = this.props.interactionData.blanks || [];
if ((0, _find.default)(blanks, {
answerType: 'wordbank'
})) {
return _react.default.createElement(_Wordbank.default, {
blanks: blanks,
response: this.props.userResponse.value,
returnChoiceToWordbank: this.moveChoiceToWordbank
});
}
}
}, {
key: "render",
value: function render() {
return _react.default.createElement(_quizRce.ItemBodyWrapper, {
itemBody: this.props.interactionData.prompt
}, _react.default.createElement("div", {
className: styles.question
}, _react.default.createElement("div", {
className: styles.headerSection
}, _react.default.createElement(_TakeStem.default, {
onUpdate: this.props.handleResponseUpdate,
interactionData: this.props.interactionData,
returnChoiceToWordbank: this.moveChoiceToWordbank,
userResponses: this.props.userResponse.value,
readOnly: this.props.readOnly
})), this.renderWordbank()));
}
}]);
FillBlankTake.displayName = "FillBlankTake";
return FillBlankTake;
}(_react.Component), _class2.propTypes = {
handleResponseUpdate: _propTypes.default.func,
interactionData: _propTypes.default.object.isRequired,
userResponse: _propTypes.default.object.isRequired,
readOnly: _propTypes.default.bool
}, _class2.defaultProps = {
handleResponseUpdate: void 0,
readOnly: false
}, _temp)) || _class);
exports.default = FillBlankTake;