@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
650 lines (640 loc) • 26 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
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 _class, _MultipleChoiceEdit;
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));
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import striptags from 'striptags';
import { v4 as uuid } from 'uuid';
import getOr from 'lodash/fp/getOr';
import set from 'lodash/fp/set';
import sortBy from 'lodash/fp/sortBy';
import findIndex from 'lodash/fp/findIndex';
import find from 'lodash/fp/find';
import filter from 'lodash/fp/filter';
import last from 'lodash/fp/last';
import map from 'lodash/fp/map';
import xor from 'lodash/fp/xor';
import remove from 'lodash/fp/remove';
import { Checkbox } from '@instructure/ui-checkbox';
import { RadioInput } from '@instructure/ui-radio-input';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import ChoiceInput from '../../common/edit/components/ChoiceInput';
import Footer from '../../common/edit/components/Footer';
import MultipleChoiceInteractionType from '../../../records/interactions/multiple_choice';
import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer';
import QuestionContainer from '../../common/edit/components/QuestionContainer';
import withEditTools from '../../../util/withEditTools';
import interactionPoints from '../../../util/interactionPoints';
import t from '@instructure/quiz-i18n/es/format-message';
import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel';
import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert';
import { FormFieldGroup } from '@instructure/quiz-common';
import { normalizeErrors } from '../../../util/normalizeErrors';
/**
---
category: MultipleChoice
---
Multiple Choice Edit component
```jsx_example
function Example (props) {
const exampleProps = {
itemBody: 'Who was the first President of the United States?',
interactionData: {
choices: [
{ id: 'uuid1', itemBody: 'George Washington', position: 1 },
{ id: 'uuid2', itemBody: 'Alexander Hamilton.', position: 2 },
{ id: 'uuid3', itemBody: 'John Adams', position: 3 },
{ id: 'uuid4', itemBody: 'Thomas Jefferson', position: 4 }
]
},
properties: {
varyPointsByAnswer: false,
shuffleRules: {
choices: {
shuffled: true,
toLock: [0, 1]
}
}
},
scoringData: {
value: 'uuid1'
},
additionalOptions: [{
key: 'outcomes',
title: 'Align to Outcomes',
component: 'Placeholder'
}]
}
return (
<MultipleChoiceEdit {...exampleProps} {...props} />
)
}
<SettingsSwitcher locales={LOCALES}>
<EditStateProvider>
<Example />
</EditStateProvider>
</SettingsSwitcher>
```
**/
var MultipleChoiceEdit = withEditTools(_class = (_MultipleChoiceEdit = /*#__PURE__*/function (_Component) {
function MultipleChoiceEdit() {
var _this2;
_classCallCheck(this, MultipleChoiceEdit);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, MultipleChoiceEdit, [].concat(args));
_defineProperty(_this2, "state", {
expanded: _this2.getChoices().reduce(function (expand, choice) {
expand[choice.id] = false; // eslint-disable-line no-param-reassign
return expand;
}, {})
});
_defineProperty(_this2, "stemElement", null);
_defineProperty(_this2, "choiceRefs", []);
_defineProperty(_this2, "_timeouts", []);
_defineProperty(_this2, "_choiceWasCreated", false);
// ===========
// HANDLERS
// ===========
_defineProperty(_this2, "handleAnswerFeedbackToggle", function (choiceId) {
_this2.setState(function (state) {
return {
expanded: Object.assign({}, state.expanded, _defineProperty({}, choiceId, !state.expanded[choiceId]))
};
});
});
_defineProperty(_this2, "handleStemRef", function (node) {
_this2.stemElement = node;
});
_defineProperty(_this2, "handleCalculatorTypeChange", function (e, value) {
_this2.props.changeItemState({
calculatorType: value
});
});
_defineProperty(_this2, "handleRemoveChoice", function (choiceId, index) {
_this2.updateFocusOnRemove(index);
// Update scoringData
var choices = _this2.getChoices();
var scoringData = {};
if (_this2.props.scoringData.value === choiceId) {
scoringData.value = null;
}
if (_this2.shouldVaryPoints()) {
scoringData.values = remove({
value: choiceId
}, _this2.props.scoringData.values);
}
_this2.updateScoringData(scoringData);
// Update interactionData and properties
var shuffleRules = _this2.props.properties.shuffleRules;
// Move the locks in conjuntion with the answers
var toLock = map(function (value) {
return value < index ? value : value - 1;
}, filter(function (lock) {
return lock !== index;
}, shuffleRules.choices.toLock));
var localFeedback = Object.assign({}, _this2.props.answerFeedback);
delete localFeedback[choiceId];
_this2.props.changeItemState({
interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
choices: remove({
id: choiceId
}, choices)
}),
properties: _objectSpread(_objectSpread({}, _this2.props.properties), {}, {
shuffleRules: set('choices.toLock', toLock, shuffleRules)
}),
answerFeedback: localFeedback
});
});
_defineProperty(_this2, "handleInputChange", function (choiceId, event, _ref) {
var editorContent = _ref.editorContent;
var choices = _this2.getChoices();
var index = findIndex({
id: choiceId
}, choices);
_this2.props.changeItemState({
interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
choices: set("[".concat(index, "].itemBody"), editorContent, choices)
})
});
});
_defineProperty(_this2, "handleCreateChoice", function () {
var id = _this2.props.newId();
if (_this2.shouldVaryPoints()) {
_this2.updateScoringData({
values: [].concat(_toConsumableArray(_this2.props.scoringData.values), [{
value: id,
points: 0
}])
});
}
_this2._choiceWasCreated = true;
_this2.props.changeItemState({
interactionData: _objectSpread(_objectSpread({}, _this2.props.interactionData), {}, {
choices: [].concat(_toConsumableArray(_this2.getChoices()), [{
id: id,
itemBody: '',
position: Math.max.apply(Math, [-1].concat(_toConsumableArray(map('position', _this2.getChoices())))) + 1
}])
})
});
});
_defineProperty(_this2, "handleVaryPointsByAnswerChange", function (event) {
_this2.toggleVaryPointsByAnswer(event);
});
_defineProperty(_this2, "handleShuffleChange", function (event) {
_this2.toggleShuffleChoices();
});
_defineProperty(_this2, "focusErrors", function () {
var stemErrors = getOr([], 'itemBody', _this2.props.errors);
var groupErrors = getOr([], 'scoringData.value', _this2.props.errors);
var choiceErrors = getOr([], 'interactionData.choices', _this2.props.errors);
var choiceErrorsKeys = Object.keys(choiceErrors).map(Number);
if (stemErrors.length) {
_this2.stemElement.focus();
} else if (groupErrors.length) {
_this2.choiceRefs[0].focusOnAnswerInput();
} else if (choiceErrorsKeys.length) {
var index = Math.min.apply(Math, _toConsumableArray(choiceErrorsKeys));
_this2.choiceRefs[index].focusOnAnswerInput();
}
});
return _this2;
}
_inherits(MultipleChoiceEdit, _Component);
return _createClass(MultipleChoiceEdit, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._timeouts.forEach(clearTimeout);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (this._choiceWasCreated) {
this._choiceWasCreated = false;
last(this.choiceRefs).focusOnAnswerInput();
}
}
// ===========
// HELPERS
// ===========
}, {
key: "getChoices",
value: function getChoices() {
return getOr([], 'interactionData.choices', this.props);
}
}, {
key: "isShuffled",
value: function isShuffled() {
return getOr(false, 'properties.shuffleRules.choices.shuffled', this.props);
}
}, {
key: "shouldVaryPoints",
value: function shouldVaryPoints() {
return getOr(false, 'properties.varyPointsByAnswer', this.props);
}
}, {
key: "isChoiceLocked",
value: function isChoiceLocked(choiceId) {
var index = findIndex({
id: choiceId
}, this.getChoices());
var lockedChoices = getOr(false, 'properties.shuffleRules.choices.toLock', this.props);
if (lockedChoices) {
return lockedChoices.includes(index);
}
return false;
}
}, {
key: "getScoringDataValues",
value: function getScoringDataValues() {
return this.props.scoringData.values || map(function (_ref2) {
var id = _ref2.id;
return {
value: id,
points: 0
};
}, this.getChoices());
}
}, {
key: "updateScoringData",
value: function updateScoringData(changes) {
var scoringData = Object.assign({}, this.props.scoringData, changes);
// Only calls pointsChange when necessary
if (this.shouldVaryPoints()) {
if (scoringData.values === null) {
// TODO should values be allowed to be undefined?
delete scoringData.values;
}
// TODO Raising pointsChange with undefined would allow consumer to reset to points of their choice
this.props.pointsChange(interactionPoints({
properties: this.props.properties,
scoringData: scoringData
}) || 1);
}
this.props.changeItemState({
scoringData: scoringData
}, {
scoringData: changes
});
}
}, {
key: "updateFocusOnRemove",
value: function updateFocusOnRemove(index) {
var _this3 = this;
if (index === 0) {
// if removing the first choice, focus on stem
this.stemElement.focus();
} else if (this.getChoices().length === 2) {
// if removing the second choice out of two choices
this._timeouts = [].concat(_toConsumableArray(this._timeouts), [setTimeout(function () {
return _this3.choiceRefs[index - 1].focusLast();
})]);
} else {
// all the other cases
this.choiceRefs[index - 1].focusLast();
}
}
}, {
key: "override",
value: function override() {
return this.props.overrideEditableForItem || this.props.overrideEditableForRegrading;
}
}, {
key: "toggleVaryPointsByAnswer",
value: function toggleVaryPointsByAnswer(event) {
var scoringAlgorithm;
if (event.target.checked) {
scoringAlgorithm = 'VaryPointsByAnswer';
this.updateScoringData({
values: this.getScoringDataValues()
});
} else {
scoringAlgorithm = 'Equivalence';
this.updateScoringData({
values: null
});
}
var update = {
scoringAlgorithm: scoringAlgorithm,
properties: {
varyPointsByAnswer: event.target.checked
}
};
this.props.changeItemState(_objectSpread(_objectSpread({}, update), {}, {
properties: _objectSpread(_objectSpread({}, this.props.properties), update.properties)
}), update);
}
}, {
key: "toggleShuffleChoices",
value: function toggleShuffleChoices() {
var newShuffled = !this.isShuffled();
var properties;
if (this.props.properties.shuffleRules !== void 0) {
properties = set('shuffleRules.choices.shuffled', newShuffled, this.props.properties);
} else {
properties = {
shuffleRules: {
choices: {
shuffled: newShuffled
}
}
};
}
var messageForScreenreader = newShuffled ? t('Shuffling turned on. Navigate to a choice to lock it in place.') : t('Shuffling turned off.');
this.props.notifyScreenreader(messageForScreenreader);
this.props.changeItemState({
properties: properties
}, {
properties: {
shuffleRules: {
choices: {
shuffled: newShuffled
}
}
}
});
}
}, {
key: "makeAnswerPointsChangeHandler",
value: function makeAnswerPointsChangeHandler(choiceId) {
var _this4 = this;
return function (points) {
_this4.updateScoringData({
values: map(function (item) {
return item.value !== choiceId ? item : {
value: choiceId,
points: points
};
}, _this4.getScoringDataValues())
});
};
}
}, {
key: "makeChoiceLockedToggler",
value: function makeChoiceLockedToggler(choiceId) {
var _this5 = this;
return function () {
var index = findIndex({
id: choiceId
}, _this5.getChoices());
var toLock = xor([index], _this5.props.properties.shuffleRules.choices.toLock);
var properties = set('shuffleRules.choices.toLock', toLock, _this5.props.properties);
var messageForScreenreader = _this5.isChoiceLocked(choiceId) ? t('Choice unlocked') : t('Choice locked');
_this5.props.notifyScreenreader(messageForScreenreader);
_this5.props.changeItemState({
properties: properties
}, {
properties: {
shuffleRules: {
choices: {
toLock: toLock
}
}
}
});
};
}
// ===========
// RENDERS
// ===========
}, {
key: "renderChoice",
value: function renderChoice(choice, name, index) {
var _this6 = this;
var shouldVaryPoints = this.shouldVaryPoints();
var disabledFields = [].concat(_toConsumableArray(this.override() ? ['answerInput'] : []), _toConsumableArray(this.props.overrideEditableForRegrading ? ['lockChoiceButton'] : []));
var choiceInputProps = {
disabledFields: disabledFields,
key: choice.id,
id: choice.id,
itemBody: choice.itemBody,
ref: function ref(node) {
_this6.choiceRefs[index] = node;
},
errors: this.props.getErrors("interactionData.choices.".concat(index, ".itemBody")),
noRCE: !this.props.enableRichContentEditor,
onAnswerPointsChange: this.makeAnswerPointsChangeHandler(choice.id),
onInputChange: this.handleInputChange,
onModalClose: this.props.onModalClose,
onModalOpen: this.props.onModalOpen,
onRemoveChoice: function onRemoveChoice() {
return _this6.handleRemoveChoice(choice.id, index);
},
parentType: this.props.parentType,
shouldRenderRemoveChoice: !this.override() && this.getChoices().length !== 1,
shouldRenderAnswerPoints: shouldVaryPoints,
shouldRenderAnswerFeedback: !this.override() && this.props.answerFeedbackEnabled,
openImportModal: this.props.openImportModal,
readOnlyFields: this.override() ? ['answerInput'] : [],
handleAnswerFeedbackToggle: this.handleAnswerFeedbackToggle.bind(this),
expanded: this.state.expanded[choice.id],
changeItemState: this.props.changeItemState,
answerFeedback: this.props.answerFeedback,
notifyScreenreader: this.props.notifyScreenreader,
removeButtonScreenReaderText: t('Remove Answer Value: { choice }', {
choice: striptags(choice.itemBody)
}),
isRequired: true,
automationData: "sdk-multiple-choice-".concat(index)
};
if (shouldVaryPoints) {
var answerValue = find({
value: choice.id
}, this.props.scoringData.values) || {};
choiceInputProps.answerPoints = answerValue.points || 0;
}
if (this.isShuffled()) {
choiceInputProps.showLock = true;
choiceInputProps.isLocked = this.isChoiceLocked(choice.id);
choiceInputProps.toggleChoiceLocked = this.makeChoiceLockedToggler(choice.id);
}
var labelText = choice.itemBody.trim() === '' ? t('Radio button for blank answer') : t('Radio button for answer { answer }', {
answer: striptags(choice.itemBody)
});
var radioName = "".concat(name, "_").concat(choice.id);
var renderRadioButton = function renderRadioButton() {
return /*#__PURE__*/React.createElement(RadioInput, {
disabled: _this6.props.overrideEditableForItem,
onChange: function onChange() {
return _this6.updateScoringData({
value: choice.id
});
},
name: radioName,
label: /*#__PURE__*/React.createElement(ScreenReaderContent, null, labelText),
value: choice.id,
checked: _this6.props.scoringData.value === choice.id
});
};
return /*#__PURE__*/React.createElement(ChoiceInput, Object.assign({}, choiceInputProps, {
renderBeforeComponent: renderRadioButton()
}));
}
}, {
key: "renderInputGroup",
value: function renderInputGroup() {
var _this7 = this;
var choices = sortBy('position', this.getChoices());
var name = "edit_interaction_".concat(this.props.itemId);
var errors = [].concat(_toConsumableArray(this.props.getErrors('interactionData.choices.$errors')), _toConsumableArray(this.props.getErrors('scoringData.value')));
return /*#__PURE__*/React.createElement(FormFieldGroup, {
rowSpacing: "small",
name: name,
description: t('Possible answers'),
messages: normalizeErrors(errors)
}, choices.map(function (choice, index) {
return _this7.renderChoice(choice, name, index);
}));
}
}, {
key: "renderOptionsDescription",
value: function renderOptionsDescription() {
return /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Multiple choice options'));
}
}, {
key: "render",
value: function render() {
// clean up the references to ChoiceInputs
this.choiceRefs = [];
var varyPointsByAnswerLabel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t('Vary points by answer')), /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('New points possible text inputs are displayed for each option when checked')));
var shuffleChoicesLabel = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, t('Shuffle Choices')), /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Lock distractor position buttons are displayed for each option when checked')));
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(QuestionContainer, {
disabled: this.override(),
enableRichContentEditor: this.props.enableRichContentEditor,
itemBody: this.props.itemBody,
onDescriptionChange: this.props.onDescriptionChange,
onModalClose: this.props.onModalClose,
onModalOpen: this.props.onModalOpen,
openImportModal: this.props.openImportModal,
readOnly: this.override(),
stemErrors: this.props.getErrors('itemBody'),
textareaRef: this.handleStemRef
}, this.renderInputGroup(), !this.override() && /*#__PURE__*/React.createElement(Footer, {
onCreateChoice: this.handleCreateChoice,
notifyScreenreader: this.props.notifyScreenreader
})), /*#__PURE__*/React.createElement(QuestionSettingsContainer, {
additionalOptions: this.props.additionalOptions
}, /*#__PURE__*/React.createElement(QuestionSettingsPanel, {
label: t('Options'),
defaultExpanded: true
}, /*#__PURE__*/React.createElement(FormFieldGroup, {
rowSpacing: "small",
description: this.renderOptionsDescription()
}, this.props.showCalculatorOption && /*#__PURE__*/React.createElement(CalculatorOptionWithOqaatAlert, {
disabled: this.props.overrideEditableForRegrading,
calculatorValue: this.props.calculatorType,
onCalculatorTypeChange: this.handleCalculatorTypeChange,
oqaatChecked: this.props.oneQuestionAtATime,
onOqaatChange: this.props.setOneQuestionAtATime
}), /*#__PURE__*/React.createElement(Checkbox, {
label: varyPointsByAnswerLabel,
onChange: this.handleVaryPointsByAnswerChange,
checked: this.shouldVaryPoints(),
disabled: this.props.overrideEditableForRegrading,
"data-automation": "sdk-vary-points-by-answer-checkbox"
}), /*#__PURE__*/React.createElement(Checkbox, {
label: shuffleChoicesLabel,
onChange: this.handleShuffleChange,
checked: this.isShuffled(),
disabled: this.props.overrideEditableForRegrading,
"data-automation": "sdk-multiple-choice-shuffle-choices-checkbox"
})))));
}
}]);
}(Component), _defineProperty(_MultipleChoiceEdit, "interactionType", MultipleChoiceInteractionType), _defineProperty(_MultipleChoiceEdit, "propTypes", _objectSpread(_objectSpread({
additionalOptions: QuestionSettingsContainer.propTypes.additionalOptions,
answerFeedbackEnabled: PropTypes.bool,
answerFeedback: ChoiceInput.propTypes.answerFeedback,
calculatorType: PropTypes.string,
changeItemState: PropTypes.func,
enableRichContentEditor: PropTypes.bool,
errors: PropTypes.object,
// TODO: This appears unused, figure out if we can delete it
errorsAreShowing: PropTypes.bool,
interactionData: PropTypes.shape({
choices: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
itemBody: PropTypes.string,
position: PropTypes.number
}))
}).isRequired,
itemBody: PropTypes.string,
itemId: PropTypes.string,
newId: PropTypes.func,
notifyScreenreader: PropTypes.func,
onModalClose: PropTypes.func,
onModalOpen: PropTypes.func,
oneQuestionAtATime: PropTypes.bool,
overrideEditableForItem: PropTypes.bool,
overrideEditableForRegrading: PropTypes.bool,
parentType: PropTypes.string,
pointsChange: PropTypes.func,
properties: PropTypes.shape({
varyPointsByAnswer: PropTypes.bool,
shuffleRules: PropTypes.shape({
choices: PropTypes.shape({
shuffled: PropTypes.bool,
toLock: PropTypes.arrayOf(PropTypes.number)
})
})
}).isRequired,
scoringData: PropTypes.shape({
value: PropTypes.string,
values: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.string,
points: PropTypes.number
}))
}).isRequired,
openImportModal: PropTypes.func,
setOneQuestionAtATime: PropTypes.func
}, withEditTools.injectedProps), {}, {
showCalculatorOption: PropTypes.bool
})), _defineProperty(_MultipleChoiceEdit, "defaultProps", {
answerFeedbackEnabled: false,
answerFeedback: {},
calculatorType: 'none',
enableRichContentEditor: true,
newId: uuid,
notifyScreenreader: Function.prototype,
oneQuestionAtATime: false,
overrideEditableForItem: false,
overrideEditableForRegrading: false,
parentType: '',
pointsChange: Function.prototype,
additionalOptions: void 0,
changeItemState: void 0,
errors: void 0,
errorsAreShowing: void 0,
itemBody: void 0,
itemId: void 0,
onModalClose: void 0,
onModalOpen: void 0,
openImportModal: void 0,
setOneQuestionAtATime: void 0,
showCalculatorOption: true
}), _MultipleChoiceEdit)) || _class;
export { MultipleChoiceEdit as default };