UNPKG

@instructure/quiz-interactions

Version:

A React UI component Library for quiz interaction types.

650 lines (640 loc) • 26 kB
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 };