@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
365 lines (363 loc) • 15.9 kB
JavaScript
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, _FillBlankResult;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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 ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { v4 as uuid } from 'uuid';
import { Text } from '@instructure/ui-text';
import { jsx } from '@instructure/emotion';
import t from '@instructure/quiz-i18n/es/format-message';
import { ItemBodyWrapper } from '@instructure/quiz-rce';
import { FeedbackWrapper } from '@instructure/quiz-results-feedback';
import { trimPunctuation, getTrimmedPunctuation } from '../helpers/punctuation';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import { withStyleOverrides } from '@instructure/quiz-common';
/**
---
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>
```
**/
var FillBlankResult = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_FillBlankResult = /*#__PURE__*/function (_Component) {
function FillBlankResult() {
var _this2;
_classCallCheck(this, FillBlankResult);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, FillBlankResult, [].concat(args));
_defineProperty(_this2, "state", {
isMounted: false
});
_defineProperty(_this2, "itemBodyWrapperId", uuid());
// =============
// RENDER
// =============
_defineProperty(_this2, "getBlankStatus", function (blankId) {
var blankResult = _this2.__getBlankScoredData(blankId);
var status;
if (blankResult && blankResult.resultScore > 0) {
status = 'correct';
} else if (blankResult && blankResult.resultScore <= 0 || _this2.__correctnessKnown()) {
status = 'incorrect';
} else {
status = 'unknown';
}
return status;
});
_defineProperty(_this2, "renderBlank", function (blankId) {
var renderBefore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var renderAfer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var blankResult = _this2.__getBlankScoredData(blankId);
var status = _this2.getBlankStatus(blankId);
var innerStyle = _objectSpread({}, _this2.props.styles.feedbackWrapper);
var mergedStyle = status === 'incorrect' ? _objectSpread(_objectSpread({}, innerStyle), _this2.props.styles.incorrectFeedbackWrapper) : innerStyle;
var responseText = blankResult && blankResult.userResponse;
return jsx("div", {
key: blankId,
css: _this2.props.styles.blank
}, renderBefore, jsx("div", {
css: mergedStyle
}, jsx(FeedbackWrapper, {
userResponse: blankResult && blankResult.userResponse,
correctAnswer: blankResult && blankResult.correctAnswer,
hiddenCorrectAnswerText: t('Correct answer:'),
hiddenIncorrectAnswerText: t('Incorrect answer:'),
status: status
}, jsx("div", {
css: _this2.props.styles.userResponse
}, jsx(Text, {
wrap: "break-word",
color: "primary"
}, responseText || (_this2.__responseHidden() ? t('(response not displayed)') : t('(no answer)')))))), renderAfer);
});
_defineProperty(_this2, "renderStemItemBlank", function (stemItem) {
var punctuation = getTrimmedPunctuation(stemItem, _this2.props.interactionData.stemItems);
return _this2.renderBlank(stemItem.blankId, punctuation.start, punctuation.end);
});
_defineProperty(_this2, "renderRichBlanks", function () {
var itemBodyWrapper = document.getElementById(_this2.itemBodyWrapperId);
if (!itemBodyWrapper) return null;
return _this2.props.interactionData.blanks.map(function (blank) {
var targetEl = itemBodyWrapper.querySelector("#blank_".concat(blank.id));
return targetEl ? ReactDOM.createPortal(_this2.renderBlank(blank.id), targetEl, blank.id) : null;
}).filter(Boolean);
});
_defineProperty(_this2, "renderStemItem", function (stemItem) {
if (stemItem.type === 'text') {
return jsx(Text, {
wrap: "break-word",
color: "primary",
key: stemItem.id
}, trimPunctuation(stemItem, _this2.props.interactionData.stemItems));
}
return _this2.renderStemItemBlank(stemItem);
});
return _this2;
}
_inherits(FillBlankResult, _Component);
return _createClass(FillBlankResult, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
this.props.makeStyles();
if (this.props.interactionData.blanks !== prevProps.interactionData.blanks) {
this.renderRichBlanks();
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.props.makeStyles();
this.setState({
isMounted: true
});
}
}, {
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(t(', '))
};
}
}, {
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(t(', '));
}
return blankResult;
}
var choiceResult = this.__getUserResponseFromChoices(blankResultValue);
if (blank.answerType !== 'openEntry' && !this.__malformedWordBankBlankResult(blank, blankResult)) {
return this.__multipleChoiceResult(blank, blankResultValue, choiceResult);
}
return this.__specifiedAnswersResult(blank, blankResultValue, choiceResult);
}
}, {
key: "__malformedWordBankBlankResult",
value: function __malformedWordBankBlankResult(blank, blankResult) {
return blank.answerType === 'wordbank' && 'value' in blankResult && !blank['choices'];
}
}, {
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';
}
}, {
key: "render",
value: function render() {
if (this.props.richFITB) {
return jsx(ItemBodyWrapper, {
id: this.itemBodyWrapperId,
itemBody: this.props.itemBody
}, this.renderRichBlanks());
}
return jsx(ItemBodyWrapper, {
itemBody: this.props.interactionData.prompt
}, jsx("div", {
css: this.props.styles.stem
}, (this.props.interactionData.stemItems || []).slice().sort(function (a, b) {
return a.position - b.position;
}).map(this.renderStemItem)));
}
}]);
}(Component), _defineProperty(_FillBlankResult, "displayName", 'FillBlankResult'), _defineProperty(_FillBlankResult, "componentId", "Quizzes".concat(_FillBlankResult.displayName)), _defineProperty(_FillBlankResult, "propTypes", {
interactionData: PropTypes.object.isRequired,
itemBody: PropTypes.string,
richFITB: PropTypes.bool,
scoredData: PropTypes.shape({
correct: PropTypes.bool,
value: PropTypes.objectOf(PropTypes.object)
}).isRequired,
makeStyles: PropTypes.func,
styles: PropTypes.object
}), _defineProperty(_FillBlankResult, "defaultProps", {
itemBody: '',
richFITB: false
}), _FillBlankResult)) || _class);
export { FillBlankResult as default };