quiz-interactions
Version:
A React UI component Library for quiz interaction types.
355 lines (308 loc) • 13.8 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 _classnames = _interopRequireDefault(require("classnames"));
var _uiElements = require("@instructure/ui-elements");
var _uiThemeable = require("@instructure/ui-themeable");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));
var _quizRce = require("@instructure/quiz-rce");
var _FeedbackWrapper = _interopRequireDefault(require("@instructure/quiz-results-feedback/lib/components/FeedbackWrapper"));
var _punctuation = require("../helpers/punctuation");
var _theme = _interopRequireDefault(require("./theme"));
var _dec, _class, _class2, _temp;
var styles = {
componentId: 'fxKoU',
template: function template(theme) {
return "\n\n.fxKoU_cloC{align-items:center;display:flex;flex-wrap:wrap;font-size:".concat(theme.stemFontSize || 'inherit', "}\n\n.fxKoU_bGBk{margin:0 ").concat(theme.rootMargin || 'inherit', ";padding-top:").concat(theme.rootPadding || 'inherit', "}\n\n.fxKoU_dROR{margin:0 ").concat(theme.feedbackWrapperMargin || 'inherit', "}\n\n.fxKoU_yIeY{align-items:center;display:flex}\n\n.fxKoU_dZuE{padding-top:").concat(theme.incorrectFeedbackWrapperPadding || 'inherit', "}\n\n.fxKoU_bLsK{padding-right:").concat(theme.userResponsePadding || 'inherit', ";white-space:pre-wrap}");
},
'stem': 'fxKoU_cloC',
'root': 'fxKoU_bGBk',
'feedbackWrapper': 'fxKoU_dROR',
'blank': 'fxKoU_yIeY',
'incorrectFeedbackWrapper': 'fxKoU_dZuE',
'userResponse': 'fxKoU_bLsK'
};
var FillBlankResult = (
/**
---
category: FillInTheBlank
---
Fill in the Blank Result component
```jsx_example
<SettingsSwitcher locales={LOCALES}>
<FillBlankResult
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: ' ! Where the people were ' },
{ id: 'stem_uuid12', position: 14, type: 'blank', blankId: 'fitb_uuid7' },
{ id: 'stem_uuid13', position: 15, 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'
}
]
}}
scoredData={{
value: {
fitb_uuid1: {
resultScore: 1,
userResponse: 'Christopfer',
correctAnswer: 'Christopher'
},
fitb_uuid2: {
resultScore: 1,
userResponse: '1492'
},
fitb_uuid3: {
value: {
Spain: { resultScore: 1, userResponded: false },
Espana: { resultScore: 1, userResponded: false },
'Kingdom of Spain': { resultScore: 1, userResponded: false },
Portugal: { resultScore: 0, userResponded: true }
}
},
fitb_uuid4: {
value:{
Europe: { resultScore: 1, userResponded: false },
Asia: { resultScore: 0, userResponded: true }
}
},
fitb_uuid5: {
resultScore: 1,
correctAnswer: 'Atlantic',
userResponse: 'Atlantic Ocean'
},
fitb_uuid6: {
value: {
choice_uuid13_america: {
resultScore: 1,
userResponded: true
}
}
},
fitb_uuid7: {
value: {
choice_uuid13_confused: {
resultScore: 1,
userResponded: false
},
choice_uuid11_peaceful: {
resultScore: 0,
userResponded: true
}
}
}
}
}}
/>
</SettingsSwitcher>
```
**/
_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(FillBlankResult, _Component);
function FillBlankResult() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, FillBlankResult);
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)(FillBlankResult)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.renderBlank = function (stemItem) {
var blankId = stemItem.blankId;
var punctuation = (0, _punctuation.getTrimmedPunctuation)(stemItem, _this.props.interactionData.stemItems);
var blankResult = _this.__getBlankScoredData(blankId);
var status;
if (blankResult && blankResult.resultScore > 0) {
status = 'correct';
} else if (blankResult && blankResult.resultScore <= 0 || _this.__correctnessKnown()) {
status = 'incorrect';
} else {
status = 'unknown';
}
var classes = (0, _classnames.default)(styles.feedbackWrapper, (0, _defineProperty2.default)({}, styles.incorrectFeedbackWrapper, status === 'incorrect'));
var responseText = blankResult && blankResult.userResponse;
return _react.default.createElement("div", {
key: blankId,
className: (0, _classnames.default)(styles.blank, styles.feedbackWrapper)
}, punctuation.start, _react.default.createElement("div", {
className: classes
}, _react.default.createElement(_FeedbackWrapper.default, {
userResponse: blankResult && blankResult.userResponse,
correctAnswer: blankResult && blankResult.correctAnswer,
hiddenCorrectAnswerText: (0, _formatMessage.default)('Correct answer:'),
hiddenIncorrectAnswerText: (0, _formatMessage.default)('Incorrect answer:'),
status: status
}, _react.default.createElement("div", {
className: styles.userResponse
}, _react.default.createElement(_uiElements.Text, {
color: "primary"
}, responseText || (_this.__responseHidden() ? (0, _formatMessage.default)('(response not displayed)') : (0, _formatMessage.default)('(no answer)')))))), punctuation.end);
};
_this.renderStemItem = function (stemItem) {
if (stemItem.type === 'text') {
return _react.default.createElement(_uiElements.Text, {
color: "primary",
key: stemItem.id
}, (0, _punctuation.trimPunctuation)(stemItem, _this.props.interactionData.stemItems));
}
return _this.renderBlank(stemItem);
};
return _this;
}
(0, _createClass2.default)(FillBlankResult, [{
key: "__multipleChoiceResult",
value: function __multipleChoiceResult(blank, blankResultValue, choiceResult) {
var pickedChoice = choiceResult.id && this.__getChoiceById(choiceResult.id);
var userResponseItemBody = pickedChoice && pickedChoice.itemBody;
var correctAnswerItemBody; // For dropdown and wordbank the resultScore is not present if the question was not answered.
if (!choiceResult.resultScore || choiceResult.resultScore <= 0) {
var correctAnswerKey = Object.keys(blankResultValue).find(function (choice) {
return blankResultValue[choice].resultScore === 1;
});
var correctAnswer = correctAnswerKey && this.__getChoiceById(correctAnswerKey);
correctAnswerItemBody = correctAnswer && correctAnswer.itemBody;
}
return {
resultScore: choiceResult.resultScore,
userResponse: userResponseItemBody,
correctAnswer: correctAnswerItemBody
};
}
}, {
key: "__specifiedAnswersResult",
value: function __specifiedAnswersResult(blank, blankResultValue, choiceResult) {
var correctAnswers = Object.keys(blankResultValue).filter(function (answer) {
return blankResultValue[answer].resultScore === 1;
});
return {
resultScore: choiceResult.resultScore,
userResponse: choiceResult.id,
correctAnswer: correctAnswers.join((0, _formatMessage.default)(', '))
};
}
}, {
key: "__getUserResponseFromChoices",
value: function __getUserResponseFromChoices(blankResultValue) {
if (!blankResultValue) return {};
var userResponseKey = Object.keys(blankResultValue).find(function (choiceKey) {
return blankResultValue[choiceKey].userResponded;
});
return Object.assign({}, blankResultValue[userResponseKey], {
id: userResponseKey
});
}
}, {
key: "__getBlankScoredData",
value: function __getBlankScoredData(blankId) {
var scoredData = this.props.scoredData;
var blankResult = scoredData.value ? scoredData.value[blankId] : {};
var blank = this.props.interactionData.blanks.find(function (blank) {
return blank.id === blankId;
});
var blankResultValue = blankResult && blankResult.value;
if (!blankResultValue) {
if (blankResult && Array.isArray(blankResult.correctAnswer)) {
blankResult.correctAnswer = blankResult.correctAnswer.join((0, _formatMessage.default)(', '));
}
return blankResult;
}
var choiceResult = this.__getUserResponseFromChoices(blankResultValue);
if (blank.answerType !== 'openEntry') {
return this.__multipleChoiceResult(blank, blankResultValue, choiceResult);
}
return this.__specifiedAnswersResult(blank, blankResultValue, choiceResult);
}
}, {
key: "__getChoiceById",
value: function __getChoiceById(choiceId) {
var blanks = this.props.interactionData.blanks || [];
var allChoices = blanks.reduce(function (choices, blank) {
return choices.concat(blank.choices || []);
}, []);
return allChoices.find(function (blank) {
return blank.id === choiceId;
});
}
}, {
key: "__responseHidden",
value: function __responseHidden() {
return !this.props.scoredData.value;
}
}, {
key: "__correctnessKnown",
value: function __correctnessKnown() {
return typeof this.props.scoredData.correct !== 'undefined';
} // =============
// RENDER
// =============
}, {
key: "render",
value: function render() {
return _react.default.createElement(_quizRce.ItemBodyWrapper, {
itemBody: this.props.interactionData.prompt
}, _react.default.createElement("div", {
className: styles.stem
}, (this.props.interactionData.stemItems || []).slice().sort(function (a, b) {
return a.position - b.position;
}).map(this.renderStemItem)));
}
}]);
FillBlankResult.displayName = "FillBlankResult";
return FillBlankResult;
}(_react.Component), _class2.propTypes = {
interactionData: _propTypes.default.object.isRequired,
scoredData: _propTypes.default.shape({
correct: _propTypes.default.bool,
value: _propTypes.default.objectOf(_propTypes.default.object)
}).isRequired
}, _temp)) || _class);
exports.default = FillBlankResult;