@pie-element/multiple-choice 5.8.0 → 5.8.1-beta.587

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","generateFormattedChoices","choices","choiceCount","length","formattedChoices","i","push","value","label","feedback","type","prepareCustomizationObject","config","model","configuration","sensibleDefaults","answerChoiceCount","MultipleChoice","_model","createDefaultModel","_configuration","onModelChanged","bind","onConfigurationChanged","s","_render","c","info","_disableSidePanel","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","dispatchModelUpdated","handler","InsertImageEvent","src","done","DeleteImageEvent","element","React","createElement","Main","disableSidePanel","imageSupport","add","insertImage","onDeleteImage","ReactDOM","render","HTMLElement","utils","normalizeChoices"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport {\n  DeleteImageEvent,\n  InsertImageEvent,\n  ModelUpdatedEvent\n} from '@pie-framework/pie-configure-events';\n\nimport Main from './main';\nimport { choiceUtils as utils } from '@pie-lib/config-ui';\nimport defaults from 'lodash/defaults';\n\nimport sensibleDefaults from './defaults';\n\nconst log = debug('multiple-choice:configure');\n\nconst generateFormattedChoices = (choices, choiceCount = 0) => {\n  if (!choices || choices.length === 0) {\n    let formattedChoices = [];\n\n    for (let i = 0; i < choiceCount; i++) {\n      formattedChoices.push({\n        value: `${i}`,\n        label: '',\n        feedback: {\n          type: 'none',\n          value: ''\n        }\n      });\n    }\n\n    return formattedChoices;\n  }\n\n  return choices;\n};\n\nconst prepareCustomizationObject = (config, model) => {\n  const configuration = defaults(config, sensibleDefaults.configuration);\n\n  return {\n    configuration,\n    model: {\n      ...model,\n      choices: generateFormattedChoices((model && model.choices) || [], configuration && configuration.answerChoiceCount)\n    }\n  };\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  static createDefaultModel = (model = {}) => utils.normalizeChoices({\n    ...sensibleDefaults.model,\n    ...model,\n    choices: generateFormattedChoices((model && model.choices) || [])\n  });\n\n  constructor() {\n    super();\n    this._model = MultipleChoice.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = MultipleChoice.createDefaultModel(s);\n\n    this._render();\n  }\n\n  set configuration(c) {\n    const info = prepareCustomizationObject(c, this._model);\n\n    this.onModelChanged(info.model);\n    this._configuration = info.configuration;\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this._render();\n    this.dispatchModelUpdated(reset);\n  }\n\n  onConfigurationChanged(c) {\n    this._configuration = prepareCustomizationObject(c, this._model).configuration;\n\n    if (this._model) {\n      this.onModelChanged(this._model);\n    }\n\n    this._render();\n  }\n\n  /** @param {done, progress, file} handler */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Main, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      disableSidePanel: this._disableSidePanel,\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this)\n      }\n    });\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","generateFormattedChoices","choices","choiceCount","length","formattedChoices","i","push","value","label","feedback","type","prepareCustomizationObject","config","model","configuration","sensibleDefaults","answerChoiceCount","MultipleChoice","_model","createDefaultModel","_configuration","onModelChanged","bind","onConfigurationChanged","s","_render","c","info","_disableSidePanel","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","dispatchModelUpdated","handler","InsertImageEvent","src","done","DeleteImageEvent","InsertSoundEvent","DeleteSoundEvent","element","React","createElement","Main","disableSidePanel","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","ReactDOM","render","HTMLElement","normalizedModel","utils","normalizeChoices","choicesLayout","verticalMode"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport {\n  DeleteImageEvent,\n  InsertImageEvent,\n  ModelUpdatedEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport Main from './main';\nimport { choiceUtils as utils } from '@pie-lib/config-ui';\nimport defaults from 'lodash/defaults';\n\nimport sensibleDefaults from './defaults';\n\nconst log = debug('multiple-choice:configure');\n\nconst generateFormattedChoices = (choices, choiceCount = 0) => {\n  if (!choices || choices.length === 0) {\n    let formattedChoices = [];\n\n    for (let i = 0; i < choiceCount; i++) {\n      formattedChoices.push({\n        value: `${i}`,\n        label: '',\n        feedback: {\n          type: 'none',\n          value: '',\n        },\n      });\n    }\n\n    return formattedChoices;\n  }\n\n  return choices;\n};\n\nconst prepareCustomizationObject = (config, model) => {\n  const configuration = defaults(config, sensibleDefaults.configuration);\n\n  return {\n    configuration,\n    model: {\n      ...model,\n      choices: generateFormattedChoices(\n        (model && model.choices) || [],\n        configuration && configuration.answerChoiceCount,\n      ),\n    },\n  };\n};\n\nexport default class MultipleChoice extends HTMLElement {\n  static createDefaultModel = (model = {}) => {\n    const normalizedModel = utils.normalizeChoices({\n      ...sensibleDefaults.model,\n      ...model,\n      choices: generateFormattedChoices((model && model.choices) || []),\n    });\n\n    // This is used for offering support for old models which have the property \"verticalMode\"\n    normalizedModel.choicesLayout =\n      model.choicesLayout || (model.verticalMode === false && 'horizontal') || sensibleDefaults.model.choicesLayout;\n\n    return normalizedModel;\n  };\n\n  constructor() {\n    super();\n    this._model = MultipleChoice.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = MultipleChoice.createDefaultModel(s);\n\n    this._render();\n  }\n\n  set configuration(c) {\n    const info = prepareCustomizationObject(c, this._model);\n\n    this.onModelChanged(info.model);\n    this._configuration = info.configuration;\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this._render();\n\n    this.dispatchModelUpdated(reset);\n  }\n\n  onConfigurationChanged(c) {\n    this._configuration = prepareCustomizationObject(c, this._model).configuration;\n\n    if (this._model) {\n      this.onModelChanged(this._model);\n    }\n\n    this._render();\n  }\n\n  /** @param {done, progress, file} handler */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Main, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      disableSidePanel: this._disableSidePanel,\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}

package/configure/lib/main.js

@@ -37,21 +37,28 @@ var _styles = require("@material-ui/core/styles");
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
 var _merge = _interopRequireDefault(require("lodash/merge"));
 
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _utils = require("./utils");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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) { (0, _defineProperty2["default"])(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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Panel = _configUi.settings.Panel,
     toggle = _configUi.settings.toggle,
-    radio = _configUi.settings.radio;
+    radio = _configUi.settings.radio,
+    dropdown = _configUi.settings.dropdown;
 var MAX_CHOICES = 9;
 
 var styles = function styles(theme) {
@@ -68,11 +75,14 @@ var styles = function styles(theme) {
     rationaleHolder: {
       width: '70%'
     },
+    accessibilityHolder: {
+      width: '70%'
+    },
     rationale: {
       paddingTop: theme.spacing.unit * 2
     },
-    design: {
-      paddingTop: theme.spacing.unit * 3
+    accessibility: {
+      paddingTop: theme.spacing.unit * 2
     },
     choiceConfigurationHolder: {
       display: 'flex',
@@ -89,6 +99,7 @@ var styles = function styles(theme) {
       margin: 0
     },
     addButton: {
+      marginTop: theme.spacing.unit * 3,
       "float": 'right'
     },
     disableButton: {
@@ -101,6 +112,28 @@ var styles = function styles(theme) {
       '&:focus': {
         backgroundColor: _renderUi.color.disabled()
       }
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: theme.spacing.unit
+    },
+    titleText: {
+      fontFamily: 'Cerebri Sans',
+      fontSize: theme.typography.fontSize + 2,
+      lineHeight: '19px',
+      color: '#495B8F',
+      marginRight: theme.spacing.unit
+    },
+    tooltip: {
+      fontSize: theme.typography.fontSize - 2,
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: theme.typography.fontSize - 2,
+      color: 'red',
+      paddingTop: theme.spacing.unit
     }
   };
 };
@@ -114,6 +147,7 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       onRemoveChoice = props.onRemoveChoice,
       onAddChoice = props.onAddChoice,
       imageSupport = props.imageSupport,
+      uploadSoundSupport = props.uploadSoundSupport,
       onChangeModel = props.onChangeModel,
       onConfigurationChanged = props.onConfigurationChanged,
       onTeacherInstructionsChanged = props.onTeacherInstructionsChanged;
@@ -123,8 +157,6 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
       _ref$addChoiceButton = _ref.addChoiceButton,
       addChoiceButton = _ref$addChoiceButton === void 0 ? {} : _ref$addChoiceButton,
-      _ref$limitChoicesNumb = _ref.limitChoicesNumber,
-      limitChoicesNumber = _ref$limitChoicesNumb === void 0 ? {} : _ref$limitChoicesNumb,
       _ref$feedback = _ref.feedback,
       feedback = _ref$feedback === void 0 ? {} : _ref$feedback,
       _ref$deleteChoice = _ref.deleteChoice,
@@ -143,21 +175,102 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       studentInstructions = _ref$studentInstructi === void 0 ? {} : _ref$studentInstructi,
       _ref$rationale = _ref.rationale,
       rationale = _ref$rationale === void 0 ? {} : _ref$rationale,
+      _ref$accessibility = _ref.accessibility,
+      accessibility = _ref$accessibility === void 0 ? {} : _ref$accessibility,
       _ref$scoringType = _ref.scoringType,
       scoringType = _ref$scoringType === void 0 ? {} : _ref$scoringType,
       _ref$sequentialChoice = _ref.sequentialChoiceLabels,
       sequentialChoiceLabels = _ref$sequentialChoice === void 0 ? {} : _ref$sequentialChoice,
       settingsPanelDisabled = _ref.settingsPanelDisabled,
-      verticalMode = _ref.verticalMode;
+      choicesLayout = _ref.choicesLayout,
+      _ref$spellCheck = _ref.spellCheck,
+      spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+      gridColumns = _ref.gridColumns,
+      _ref$maxImageWidth = _ref.maxImageWidth,
+      maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+      _ref$maxImageHeight = _ref.maxImageHeight,
+      maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
+      _ref$withRubric = _ref.withRubric,
+      withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric;
+
+  var _ref2 = configuration || {},
+      maxAnswerChoices = _ref2.maxAnswerChoices;
+
+  var _ref3 = model || {},
+      limitChoicesNumber = _ref3.limitChoicesNumber,
+      teacherInstructionsEnabled = _ref3.teacherInstructionsEnabled,
+      rationaleEnabled = _ref3.rationaleEnabled,
+      accessibilityLabelsEnabled = _ref3.accessibilityLabelsEnabled,
+      feedbackEnabled = _ref3.feedbackEnabled,
+      promptEnabled = _ref3.promptEnabled,
+      spellCheckEnabled = _ref3.spellCheckEnabled,
+      choices = _ref3.choices,
+      errors = _ref3.errors,
+      toolbarEditorPosition = _ref3.toolbarEditorPosition;
+
+  var _ref4 = errors || {},
+      choicesErrors = _ref4.choicesErrors,
+      correctResponseError = _ref4.correctResponseError,
+      answerChoicesError = _ref4.answerChoicesError;
+
+  var nrOfColumnsAvailable = choices !== null && choices !== void 0 && choices.length ? Array.from({
+    length: choices.length
+  }, function (_, i) {
+    return "".concat(i + 1);
+  }) : [];
+  var labelPlugins = {
+    audio: {
+      disabled: true
+    },
+    video: {
+      disabled: true
+    }
+  };
+  var toolbarOpts = {
+    position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+  }; // if old property is used, set maxAnswerChoices to 9
 
-  var _ref2 = model || {},
-      limitChoicesNumberModel = _ref2.limitChoicesNumber,
-      teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
-      rationaleEnabled = _ref2.rationaleEnabled,
-      feedbackEnabled = _ref2.feedbackEnabled,
-      promptEnabled = _ref2.promptEnabled;
+  if (limitChoicesNumber) {
+    maxAnswerChoices = MAX_CHOICES;
+  }
 
-  var Content = /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+  var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+  var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+  var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+  var addChoiceButtonTooltip = maxAnswerChoices && (choices === null || choices === void 0 ? void 0 : choices.length) >= maxAnswerChoices ? "Only ".concat(maxAnswerChoices, " allowed maximum") : '';
+  var panelSettings = {
+    choiceMode: choiceMode.settings && radio(choiceMode.label, ['checkbox', 'radio']),
+    'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
+    choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
+    partialScoring: partialScoring.settings && toggle(partialScoring.label),
+    lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+    feedbackEnabled: feedback.settings && toggle(feedback.label),
+    choicesLayout: choicesLayout.settings && dropdown(choicesLayout.label, ['vertical', 'grid', 'horizontal']),
+    gridColumns: choicesLayout.settings && model.choicesLayout === 'grid' && nrOfColumnsAvailable.length > 0 && dropdown(gridColumns.label, nrOfColumnsAvailable)
+  };
+  var panelProperties = {
+    teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+    studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+    promptEnabled: prompt.settings && toggle(prompt.label),
+    rationaleEnabled: rationale.settings && toggle(rationale.label),
+    spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+    accessibilityLabelsEnabled: accessibility.settings && toggle(accessibility.label),
+    scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+    rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label)
+  };
+  return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+    hideSettings: settingsPanelDisabled,
+    settings: /*#__PURE__*/_react["default"].createElement(Panel, {
+      model: model,
+      onChangeModel: onChangeModel,
+      configuration: configuration,
+      onChangeConfiguration: onConfigurationChanged,
+      groups: {
+        Settings: panelSettings,
+        Properties: panelProperties
+      }
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
     label: teacherInstructions.label,
     className: classes.promptHolder
   }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
@@ -165,7 +278,17 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
     markup: model.teacherInstructions || '',
     onChange: onTeacherInstructionsChanged,
     imageSupport: imageSupport,
-    nonEmpty: false
+    nonEmpty: false,
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheckEnabled,
+    maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+    maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }]
   })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
     label: prompt.label,
     className: classes.promptHolder
@@ -175,8 +298,33 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
     onChange: onPromptChanged,
     imageSupport: imageSupport,
     nonEmpty: false,
-    disableUnderline: true
-  })), model.choices.map(function (choice, index) {
+    disableUnderline: true,
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheckEnabled,
+    maxImageWidth: maxImageWidth && maxImageWidth.prompt,
+    maxImageHeight: maxImageHeight && maxImageHeight.prompt,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.flexContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: classes.titleText
+  }, "Choices"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    classes: {
+      tooltip: classes.tooltip
+    },
+    disableFocusListener: true,
+    disableTouchListener: true,
+    placement: 'right',
+    title: validationMessage
+  }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+    fontSize: 'small',
+    color: 'primary'
+  }))), choices.map(function (choice, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: "choice-".concat(index),
       className: classes.choiceConfigurationHolder
@@ -189,6 +337,7 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       data: choice,
       defaultFeedback: {},
       imageSupport: imageSupport,
+      disableImageAlignmentButtons: true,
       onDelete: function onDelete() {
         return onRemoveChoice(index);
       },
@@ -197,7 +346,14 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
       },
       allowFeedBack: feedbackEnabled,
       allowDelete: deleteChoice.settings,
-      noLabels: true
+      noLabels: true,
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      error: (choicesErrors === null || choicesErrors === void 0 ? void 0 : choicesErrors[choice.value]) || null,
+      noCorrectAnswerError: correctResponseError,
+      maxImageWidth: maxImageWidth && maxImageWidth.choices || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport
     }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
       key: "rationale-".concat(index),
       label: rationale.label,
@@ -210,52 +366,60 @@ var Design = (0, _styles.withStyles)(styles)(function (props) {
           rationale: c
         }));
       },
-      imageSupport: imageSupport
+      imageSupport: imageSupport,
+      toolbarOpts: toolbarOpts,
+      pluginProps: labelPlugins,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }]
+    })), accessibilityLabelsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+      key: "accessibility-".concat(index),
+      label: accessibility.label,
+      className: classes.accessibilityHolder
+    }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+      className: classes.accessibility,
+      markup: choice.accessibility || '',
+      onChange: function onChange(c) {
+        return onChoiceChanged(index, _objectSpread(_objectSpread({}, choice), {}, {
+          accessibility: c
+        }));
+      },
+      imageSupport: imageSupport,
+      pluginProps: labelPlugins,
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.choices || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }]
     })));
-  }), /*#__PURE__*/_react["default"].createElement("br", null), addChoiceButton.settings && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-    title: limitChoicesNumberModel && model.choices.length >= MAX_CHOICES ? "Only ".concat(MAX_CHOICES, " allowed maximum") : '',
+  }), correctResponseError && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.errorText
+  }, correctResponseError), answerChoicesError && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.errorText
+  }, answerChoicesError), addChoiceButton.settings && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    title: addChoiceButtonTooltip,
     classes: {
       tooltip: classes.tooltip
     }
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     classes: {
-      root: limitChoicesNumberModel && model.choices.length >= MAX_CHOICES ? classes.disableButton : undefined
+      root: maxAnswerChoices && (choices === null || choices === void 0 ? void 0 : choices.length) >= maxAnswerChoices && classes.disableButton
     },
     className: classes.addButton,
     variant: "contained",
     color: "primary",
     onClick: onAddChoice
-  }, addChoiceButton.label)));
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.design
-  }, settingsPanelDisabled ? Content : /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-    settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-      model: model,
-      onChangeModel: onChangeModel,
-      configuration: configuration,
-      onChangeConfiguration: onConfigurationChanged,
-      groups: {
-        Settings: {
-          choiceMode: choiceMode.settings && radio(choiceMode.label, ['checkbox', 'radio']),
-          'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
-          choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
-          partialScoring: partialScoring.settings && toggle(partialScoring.label),
-          limitChoicesNumber: limitChoicesNumber.settings && toggle(limitChoicesNumber.label),
-          lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
-          feedbackEnabled: feedback.settings && toggle(feedback.label),
-          verticalMode: verticalMode.settings && toggle(verticalMode.label)
-        },
-        Properties: {
-          teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-          studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
-          promptEnabled: prompt.settings && toggle(prompt.label),
-          rationaleEnabled: rationale.settings && toggle(rationale.label),
-          scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
-        }
-      }
-    })
-  }, Content));
+  }, addChoiceButton.label))));
 });
 
 var Main = /*#__PURE__*/function (_React$Component) {
@@ -273,31 +437,65 @@ var Main = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      showWarning: false
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRemoveChoice", function (index) {
-      var model = _this.props.model;
-      model.choices.splice(index, 1);
+      var _this$props = _this.props,
+          model = _this$props.model,
+          configuration = _this$props.configuration,
+          onModelChanged = _this$props.onModelChanged;
+
+      var _ref5 = configuration || {},
+          minAnswerChoices = _ref5.minAnswerChoices;
+
+      if (minAnswerChoices && model.choices.length === minAnswerChoices) {
+        _this.setState({
+          showWarning: true
+        });
+
+        return;
+      }
 
-      _this.props.onModelChanged(model);
+      model.choices.splice(index, 1);
+      onModelChanged(model);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onAddChoice", function () {
-      var model = _this.props.model;
-
-      if (!model.limitChoicesNumber || model.limitChoicesNumber && model.choices.length < MAX_CHOICES) {
-        model.choices.push({
-          label: '',
-          value: _configUi.choiceUtils.firstAvailableIndex(model.choices.map(function (c) {
-            return c.value;
-          }), 0),
-          feedback: {
-            type: 'none'
-          }
-        });
+      var _this$props2 = _this.props,
+          model = _this$props2.model,
+          configuration = _this$props2.configuration,
+          onModelChanged = _this$props2.onModelChanged;
+
+      var _ref6 = configuration || {},
+          maxAnswerChoices = _ref6.maxAnswerChoices;
+
+      var _ref7 = model || {},
+          limitChoicesNumber = _ref7.limitChoicesNumber; // if old property is used, set maxAnswerChoices to 9
+
 
-        _this.props.onModelChanged(model);
+      if (limitChoicesNumber) {
+        maxAnswerChoices = MAX_CHOICES;
       }
+
+      if (maxAnswerChoices && model.choices.length >= maxAnswerChoices) {
+        return;
+      }
+
+      model.choices.push({
+        label: '',
+        value: _configUi.choiceUtils.firstAvailableIndex(model.choices.map(function (c) {
+          return c.value;
+        }), 0),
+        feedback: {
+          type: 'none'
+        }
+      });
+      onModelChanged(model);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChoiceChanged", function (index, choice) {
-      var model = _this.props.model;
+      var _this$props3 = _this.props,
+          model = _this$props3.model,
+          onModelChanged = _this$props3.onModelChanged;
 
       if (choice.correct && model.choiceMode === 'radio') {
         model.choices = model.choices.map(function (c) {
@@ -308,8 +506,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }
 
       model.choices.splice(index, 1, choice);
-
-      _this.props.onModelChanged(model);
+      onModelChanged(model);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPromptChanged", function (prompt) {
       _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
@@ -360,14 +557,29 @@ var Main = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(Main, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react["default"].createElement(Design, (0, _extends2["default"])({}, this.props, {
+      var _this2 = this;
+
+      var _this$props$configura = this.props.configuration;
+      _this$props$configura = _this$props$configura === void 0 ? {} : _this$props$configura;
+      var minAnswerChoices = _this$props$configura.minAnswerChoices;
+      var showWarning = this.state.showWarning;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: showWarning,
+        title: "Warning",
+        text: "There can't be less than ".concat(minAnswerChoices || 0, " choices."),
+        onConfirm: function onConfirm() {
+          return _this2.setState({
+            showWarning: false
+          });
+        }
+      }), /*#__PURE__*/_react["default"].createElement(Design, (0, _extends2["default"])({}, this.props, {
         onChangeModel: this.onModelChanged,
         onRemoveChoice: this.onRemoveChoice,
         onChoiceChanged: this.onChoiceChanged,
         onAddChoice: this.onAddChoice,
         onPromptChanged: this.onPromptChanged,
         onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
-      }));
+      })));
     }
   }]);
   return Main;
@@ -376,6 +588,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
 exports.Main = Main;
 (0, _defineProperty2["default"])(Main, "propTypes", {
   model: _propTypes["default"].object.isRequired,
+  configuration: _propTypes["default"].object.isRequired,
   disableSidePanel: _propTypes["default"].bool,
   onModelChanged: _propTypes["default"].func.isRequired,
   onConfigurationChanged: _propTypes["default"].func.isRequired,