UNPKG

@instructure/quiz-interactions

Version:

A React UI component Library for quiz interaction types.

704 lines (703 loc) • 32.6 kB
function _array_like_to_array(arr, len) { if (len == null || len > arr.length) len = arr.length; for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i]; return arr2; } function _array_without_holes(arr) { if (Array.isArray(arr)) return _array_like_to_array(arr); } function _assert_this_initialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _call_super(_this, derived, args) { derived = _get_prototype_of(derived); return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args)); } function _class_call_check(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for(var i = 0; i < props.length; i++){ var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _create_class(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _define_property(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _get_prototype_of(o) { _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _get_prototype_of(o); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _set_prototype_of(subClass, superClass); } function _iterable_to_array(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _non_iterable_spread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _object_spread(target) { for(var i = 1; i < arguments.length; i++){ var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === "function") { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function(key) { _define_property(target, key, source[key]); }); } return target; } 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 _object_spread_props(target, source) { source = source != null ? source : {}; 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 _possible_constructor_return(self, call) { if (call && (_type_of(call) === "object" || typeof call === "function")) { return call; } return _assert_this_initialized(self); } function _set_prototype_of(o, p) { _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _set_prototype_of(o, p); } function _to_consumable_array(arr) { return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread(); } function _type_of(obj) { "@swc/helpers - typeof"; return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; } function _unsupported_iterable_to_array(o, minLen) { if (!o) return; if (typeof o === "string") return _array_like_to_array(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen); } function _is_native_reflect_construct() { try { var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})); } catch (_) {} return (_is_native_reflect_construct = function() { return !!result; })(); } function _ts_decorate(decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; } 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 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 { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input'; import { Checkbox } from '@instructure/ui-checkbox'; import { ScreenReaderContent } from '@instructure/ui-a11y-content'; import { IconButton } from '@instructure/ui-buttons'; import { IconQuestionLine } from '@instructure/ui-icons'; import { View } from '@instructure/ui-view'; import { Link } from '@instructure/ui-link'; import { Text } from '@instructure/ui-text'; import { SimpleModal, FormFieldGroup } from '@instructure/quiz-common'; import ChoiceInput from '../../common/edit/components/ChoiceInput'; import Footer from '../../common/edit/components/Footer'; import MultipleAnswerInteractionType from '../../../records/interactions/multiple_answer'; import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer'; import QuestionContainer from '../../common/edit/components/QuestionContainer'; import withEditTools from '../../../util/withEditTools'; import t from '@instructure/quiz-i18n/format-message'; import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel'; import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert'; import { normalizeErrors } from '../../../util/normalizeErrors'; // Scoring Algorithms: var ALL_OR_NOTHING = 'AllOrNothing'; var PARTIAL_SCORE = 'PartialScore'; var MultipleAnswerEdit = /*#__PURE__*/ function(Component) { "use strict"; _inherits(MultipleAnswerEdit, Component); function MultipleAnswerEdit() { _class_call_check(this, MultipleAnswerEdit); var _this; _this = _call_super(this, MultipleAnswerEdit, arguments), _define_property(_this, "state", { isModalOpen: false }), _define_property(_this, "_choiceWasCreated", false), _define_property(_this, "stemElement", null), _define_property(_this, "choiceRefs", []), _define_property(_this, "_timeouts", []), // =========== // HANDLERS // =========== _define_property(_this, "handleScoringAlgoChange", function(e, value) { _this.props.changeItemState({ scoringAlgorithm: value }, { scoringAlgorithm: value }); }), _define_property(_this, "handleCloseModal", function() { _this.setState({ isModalOpen: false }); }), _define_property(_this, "handleOpenModal", function() { _this.setState({ isModalOpen: true }); }), _define_property(_this, "handleCalculatorTypeChange", function(e, value) { _this.props.changeItemState({ calculatorType: value }); }), _define_property(_this, "handleStemRef", function(node) { _this.stemElement = node; }), _define_property(_this, "handleRemoveChoice", function(choiceId, index) { var choices = _this.getChoices(); var shuffleRules = _this.props.properties.shuffleRules; _this.updateFocusOnRemove(index); // 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)); _this.props.changeItemState({ interactionData: _object_spread_props(_object_spread({}, _this.props.interactionData), { choices: remove({ id: choiceId }, choices) }), scoringData: _object_spread_props(_object_spread({}, _this.props.scoringData), { value: filter(function(v) { return v !== choiceId; }, _this.props.scoringData.value) }), properties: _object_spread_props(_object_spread({}, _this.props.properties), { shuffleRules: set('choices.toLock', toLock, shuffleRules) }) }); }), _define_property(_this, "handleInputChange", function(choiceId, event, param) { var editorContent = param.editorContent; var choices = _this.getChoices(); var index = findIndex({ id: choiceId }, choices); _this.props.changeItemState({ interactionData: _object_spread_props(_object_spread({}, _this.props.interactionData), { choices: set("[".concat(index, "].itemBody"), editorContent, choices) }) }); }), _define_property(_this, "handleCreateChoice", function() { var _Math; _this._choiceWasCreated = true; _this.props.changeItemState({ interactionData: _object_spread_props(_object_spread({}, _this.props.interactionData), { choices: _to_consumable_array(_this.getChoices()).concat([ { id: _this.props.newId(), itemBody: '', position: (_Math = Math).max.apply(_Math, [ -1 ].concat(_to_consumable_array(map('position', _this.getChoices())))) + 1 } ]) }) }); }), _define_property(_this, "handleShuffleChange", function(event) { _this.toggleShuffleChoices(); }), _define_property(_this, "focusErrors", function() { var stemErrors = getOr([], 'itemBody', _this.props.errors); var groupErrors = getOr([], 'scoringData.value', _this.props.errors); var choiceErrors = getOr([], 'interactionData.choices', _this.props.errors); var choiceErrorsKeys = Object.keys(choiceErrors).map(Number); if (stemErrors.length) { _this.stemElement.focus(); } else if (groupErrors.length) { _this.choiceRefs[0].focusOnAnswerInput(); } else if (choiceErrorsKeys.length) { var _Math; var index = (_Math = Math).min.apply(_Math, _to_consumable_array(choiceErrorsKeys)); _this.choiceRefs[index].focusOnAnswerInput(); } }); return _this; } _create_class(MultipleAnswerEdit, [ { key: "componentDidMount", value: function componentDidMount() { this.setDefaultScoringAlgorithm(); } }, { key: "componentWillUnmount", value: function componentWillUnmount() { // prevent timeouts from being called after unmount this._timeouts.forEach(clearTimeout); } }, { key: "componentDidUpdate", value: function componentDidUpdate() { if (this._choiceWasCreated) { this._choiceWasCreated = false; last(this.choiceRefs).focusOnAnswerInput(); } this.setDefaultScoringAlgorithm(); } }, { key: "setDefaultScoringAlgorithm", value: function setDefaultScoringAlgorithm() { // ALL_OR_NOTHING is the default, // but we want PARTIAL_SCORE to be the default when enabled if (!this.props.scoringAlgorithm && this.props.partialScoringEnabled) { this.props.changeItemState({ scoringAlgorithm: PARTIAL_SCORE }); } } }, { key: "overrideEditable", value: function overrideEditable() { return this.props.overrideEditableForItem || this.props.overrideEditableForRegrading; } }, { // =========== // 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: "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: "updateFocusOnRemove", value: function updateFocusOnRemove(index) { var _this = 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 = _to_consumable_array(this._timeouts).concat([ setTimeout(function() { return _this.choiceRefs[index - 1].focusLast(); }) ]); } else { // all the other cases this.choiceRefs[index - 1].focusLast(); } } }, { 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: "makeCheckAnswerToggler", value: function makeCheckAnswerToggler(choiceId) { var _this = this; return function() { _this.props.changeItemState({ scoringData: _object_spread_props(_object_spread({}, _this.props.scoringData), { value: xor([ choiceId ], _this.props.scoringData.value) }) }); }; } }, { key: "makeChoiceLockedToggler", value: function makeChoiceLockedToggler(choiceId) { var _this = this; return function() { var index = findIndex({ id: choiceId }, _this.getChoices()); var toLock = xor([ index ], _this.props.properties.shuffleRules.choices.toLock); var properties = set('shuffleRules.choices.toLock', toLock, _this.props.properties); var messageForScreenreader = _this.isChoiceLocked(choiceId) ? t('Distractor unlocked') : t('Distractor locked'); _this.props.notifyScreenreader(messageForScreenreader); _this.props.changeItemState({ properties: properties }, { properties: { shuffleRules: { choices: { toLock: toLock } } } }); }; } }, { // =========== // RENDERS // =========== key: "renderChoice", value: function renderChoice(choice, index) { var _this = this; var choiceErrors = this.props.getErrors("interactionData.choices.".concat(index, ".itemBody")); var shouldRenderRemoveChoice = this.getChoices().length !== 1 && !this.overrideEditable(); var disabledFields = _to_consumable_array(this.overrideEditable() ? [ 'answerInput' ] : []).concat(_to_consumable_array(this.props.overrideEditableForRegrading ? [ 'lockChoiceButton' ] : [])); var choiceInputProps = { disabledFields: disabledFields, errors: choiceErrors, key: choice.id, id: choice.id, ref: function(node) { _this.choiceRefs[index] = node; }, itemBody: choice.itemBody, noRCE: !this.props.enableRichContentEditor, notifyScreenreader: this.props.notifyScreenreader, onInputChange: this.handleInputChange, onRemoveChoice: function() { return _this.handleRemoveChoice(choice.id, index); }, onModalClose: this.props.onModalClose, onModalOpen: this.props.onModalOpen, openImportModal: this.props.openImportModal, removeButtonScreenReaderText: t('Remove Answer Value: { choice }', { choice: striptags(choice.itemBody) }), shouldRenderRemoveChoice: shouldRenderRemoveChoice, isRequired: true, automationData: "sdk-multiple-answer-".concat(index) }; if (this.isShuffled()) { choiceInputProps.showLock = true; choiceInputProps.isLocked = this.isChoiceLocked(choice.id); choiceInputProps.toggleChoiceLocked = this.makeChoiceLockedToggler(choice.id); } var checked = this.props.scoringData.value.includes(choice.id); var onCheckboxChange = this.makeCheckAnswerToggler(choice.id); var labelText = choice.itemBody.trim() === '' ? t('Checkbox for blank distractor') : t('Checkbox for distractor { distractor }', { distractor: striptags(choice.itemBody) }); var renderCheckBox = function() { return /*#__PURE__*/ React.createElement(Checkbox, { disabled: _this.props.overrideEditableForItem, onChange: onCheckboxChange, checked: checked, key: choice.id, label: /*#__PURE__*/ React.createElement(ScreenReaderContent, null, labelText), value: choice.id }); }; return /*#__PURE__*/ React.createElement(ChoiceInput, _object_spread_props(_object_spread({}, choiceInputProps), { renderBeforeComponent: !this.props.isSurvey ? renderCheckBox() : null })); } }, { key: "renderInputGroup", value: function renderInputGroup() { var _this = this; var choices = sortBy('position', this.getChoices()); var name = "edit_interaction_".concat(this.props.itemId); var errors = _to_consumable_array(this.props.getErrors('interactionData.choices.$errors')).concat(_to_consumable_array(this.props.getErrors('scoringData.value.$errors'))); return /*#__PURE__*/ React.createElement(FormFieldGroup, { rowSpacing: "small", name: name, description: t('Possible answers'), messages: normalizeErrors(errors) }, choices.map(function(choice, index) { return _this.renderChoice(choice, index); })); } }, { key: "renderOptionsDescription", value: function renderOptionsDescription() { return /*#__PURE__*/ React.createElement(ScreenReaderContent, null, t('Multiple answer options')); } }, { key: "renderGradingOptionsModal", value: function renderGradingOptionsModal() { return /*#__PURE__*/ React.createElement(SimpleModal, { size: "small", title: t('Grading'), label: t('Grading'), isModalOpen: this.state.isModalOpen, onModalDismiss: this.handleCloseModal }, /*#__PURE__*/ React.createElement(Text, { weight: "bold", lineHeight: "double" }, t('Partial credit with penalty')), /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement(Text, null, t('Students are awarded points for every correct answer selected and deducted points for every incorrect answer selected.'), "\xa0", /*#__PURE__*/ React.createElement(Link, { target: "_blank", href: "https://community.canvaslms.com/docs/DOC-15039-4152780608" }, t('Learn More'))), /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement(Text, { weight: "bold", lineHeight: "double" }, t('Exact match')), /*#__PURE__*/ React.createElement("br", null), /*#__PURE__*/ React.createElement(Text, null, t('Students are awarded full credit if all correct answers are selected and no incorrect answers are selected.'))); } }, { key: "render", value: function render() { // clean up the references to ChoiceInputs this.choiceRefs = []; 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.overrideEditable(), enableRichContentEditor: this.props.enableRichContentEditor, itemBody: this.props.itemBody, onDescriptionChange: this.props.onDescriptionChange, onModalClose: this.props.onModalClose, onModalOpen: this.props.onModalOpen, openImportModal: this.props.openImportModal, stemErrors: this.props.getErrors('itemBody'), textareaRef: this.handleStemRef }, this.renderInputGroup(), !this.overrideEditable() && /*#__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: shuffleChoicesLabel, onChange: this.handleShuffleChange, checked: this.isShuffled(), disabled: this.props.overrideEditableForRegrading, "data-automation": "sdk-multiple-answer-shuffle-choices-checkbox" }), !this.props.isSurvey && this.props.partialScoringEnabled && /*#__PURE__*/ React.createElement(View, { as: "div", margin: "medium 0", position: "relative" }, /*#__PURE__*/ React.createElement(RadioInputGroup, { onChange: this.handleScoringAlgoChange, name: t('Grading'), value: this.props.scoringAlgorithm, description: /*#__PURE__*/ React.createElement("span", null, t('Grading'), /*#__PURE__*/ React.createElement(IconButton, { size: "small", withBackground: false, withBorder: false, renderIcon: IconQuestionLine, onClick: this.handleOpenModal, screenReaderLabel: t('Open grading option information') })) }, /*#__PURE__*/ React.createElement(RadioInput, { value: PARTIAL_SCORE, label: t('Partial credit with penalty'), "data-automation": "sdk-matching-partial" }), /*#__PURE__*/ React.createElement(RadioInput, { value: ALL_OR_NOTHING, label: t('Exact Match'), "data-automation": "sdk-matching-exact" })))))), this.renderGradingOptionsModal()); } } ]); return MultipleAnswerEdit; }(Component); _define_property(MultipleAnswerEdit, "interactionType", MultipleAnswerInteractionType); _define_property(MultipleAnswerEdit, "propTypes", _object_spread_props(_object_spread({ additionalOptions: QuestionSettingsContainer.propTypes.additionalOptions, calculatorType: PropTypes.string, changeItemState: PropTypes.func, // TODO: This appears to be unused, can we remove it? Hard to tell with all of the indirection (i.e. withEditTools) errors: PropTypes.object, errorsAreShowing: PropTypes.bool, enableRichContentEditor: PropTypes.bool, interactionData: PropTypes.shape({ choices: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string, itemBody: PropTypes.string, position: PropTypes.number })) }).isRequired, itemBody: PropTypes.string.isRequired, itemId: PropTypes.string, newId: PropTypes.func, notifyScreenreader: PropTypes.func, onModalClose: PropTypes.func, onModalOpen: PropTypes.func, oneQuestionAtATime: PropTypes.bool, overrideEditableForItem: PropTypes.bool, overrideEditableForRegrading: PropTypes.bool, partialScoringEnabled: PropTypes.bool, properties: PropTypes.shape({ shuffleRules: PropTypes.shape({ choices: PropTypes.shape({ shuffled: PropTypes.bool, toLock: PropTypes.arrayOf(PropTypes.number) }) }) }).isRequired, scoringAlgorithm: PropTypes.string, scoringData: PropTypes.shape({ value: PropTypes.arrayOf(PropTypes.string) }).isRequired, setOneQuestionAtATime: PropTypes.func, openImportModal: PropTypes.func }, withEditTools.injectedProps), { showCalculatorOption: PropTypes.bool, isSurvey: PropTypes.bool })); _define_property(MultipleAnswerEdit, "defaultProps", { calculatorType: 'none', enableRichContentEditor: true, oneQuestionAtATime: false, overrideEditableForItem: false, overrideEditableForRegrading: false, partialScoringEnabled: false, newId: uuid, notifyScreenreader: Function.prototype, setOneQuestionAtATime: Function.prototype, additionalOptions: void 0, changeItemState: void 0, errors: void 0, errorsAreShowing: void 0, itemId: void 0, onModalClose: void 0, onModalOpen: void 0, openImportModal: void 0, scoringAlgorithm: null, showCalculatorOption: true }); export { MultipleAnswerEdit as default }; MultipleAnswerEdit = _ts_decorate([ withEditTools ], MultipleAnswerEdit);