@pie-element/categorize 0.1.0

package/src/author/design/index.tsx

@@ -0,0 +1,764 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { getPluginProps } from './utils.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { DragOverlay } from '@dnd-kit/core';
+import { FeedbackConfig, InputContainer, layout, settings } from '@pie-lib/config-ui';
+import {
+  countInAnswer,
+  ensureNoExtraChoicesInAnswer,
+  ensureNoExtraChoicesInAlternate,
+  moveChoiceToCategory,
+  moveChoiceToAlternate,
+  removeChoiceFromCategory,
+  removeChoiceFromAlternate,
+  verifyAllowMultiplePlacements,
+} from '@pie-lib/categorize';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import { DragProvider, uid } from '@pie-lib/drag';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+
+import Categories from './categories/index.js';
+import AlternateResponses from './categories/alternateResponses.js';
+import Choices from './choices/index.js';
+import Choice from './choices/choice.js';
+import ChoicePreview from './categories/choice-preview.js';
+import { buildAlternateResponses, buildCategories } from './builder.js';
+import Header from './header.js';
+import { getMaxCategoryChoices, multiplePlacements } from '../utils.js';
+import { AlertDialog } from '@pie-lib/config-ui';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+const { dropdown, Panel, toggle, radio, numberField } = settings;
+const { Provider: IdProvider } = uid;
+
+// Simple wrapper to render math in DragOverlay portal
+class DragPreviewWrapper extends React.Component {
+  containerRef = React.createRef();
+
+  componentDidMount() {
+    if (this.containerRef.current) {
+      setTimeout(() => renderMath(this.containerRef.current), 0);
+    }
+  }
+
+  render() {
+    return <div ref={this.containerRef}>{this.props.children}</div>;
+  }
+}
+
+const StyledHeader: any = styled(Header)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
+const StyledInputContainer: any = styled(InputContainer)(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
+export class Design extends React.Component {
+  static propTypes = {
+    configuration: PropTypes.object,
+    className: PropTypes.string,
+    onConfigurationChanged: PropTypes.func,
+    model: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    uid: PropTypes.string,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+  };
+
+  constructor(props) {
+    super(props);
+    this.uid = props.uid || uid.generateId();
+    this.state = {
+      activeDragItem: null,
+    };
+  }
+
+  updateModel: any = (props) => {
+    const { model, onChange } = this.props;
+
+    const updatedModel = {
+      ...model,
+      ...props,
+    };
+
+    updatedModel.choices = updatedModel.choices.map((c) => ({
+      ...c,
+      categoryCount: this.checkAllowMultiplePlacements(updatedModel.allowMultiplePlacementsEnabled, c),
+    }));
+
+    //Ensure that there are no extra choices in correctResponse, if the user has decided that only one choice may be used.
+    updatedModel.correctResponse = ensureNoExtraChoicesInAnswer(
+      updatedModel.correctResponse || [],
+      updatedModel.choices,
+    );
+
+    //Ensure that there are no extra choices in alternate responses, if the user has decided that only one choice may be used.
+    updatedModel.correctResponse = ensureNoExtraChoicesInAlternate(
+      updatedModel.correctResponse || [],
+      updatedModel.choices,
+    );
+
+    //clean categories
+    updatedModel.categories = updatedModel.categories.map((c) => ({
+      id: c.id,
+      label: c.label,
+    }));
+
+    updatedModel.choices = updatedModel.choices.map((h) => ({
+      id: h.id,
+      content: h.content,
+      categoryCount: h.categoryCount,
+    }));
+
+    // ensure that maxChoicesPerCategory is reset if author switch back the corresponding switch (allowMaxChoicesPerCategory)
+    updatedModel.maxChoicesPerCategory = updatedModel.allowMaxChoicesPerCategory
+      ? updatedModel.maxChoicesPerCategory
+      : 0;
+
+    onChange(updatedModel);
+  };
+
+  changeRationale: any = (rationale) => {
+    const { model, onChange } = this.props;
+
+    onChange({
+      ...model,
+      rationale,
+    });
+  };
+
+  changeTeacherInstructions: any = (teacherInstructions) => {
+    const { model, onChange } = this.props;
+
+    onChange({
+      ...model,
+      teacherInstructions,
+    });
+  };
+
+  changeFeedback: any = (feedback) => {
+    this.updateModel({ feedback });
+  };
+
+  onAddAlternateResponse: any = () => {
+    const {
+      model: { correctResponse },
+    } = this.props;
+
+    this.updateModel({
+      correctResponse: (correctResponse || []).map((cr) => ({
+        ...cr,
+        alternateResponses: [...(cr.alternateResponses || []), []],
+      })),
+    });
+  };
+
+  onPromptChanged = (prompt) => this.updateModel({ prompt });
+
+  onRemoveAlternateResponse: any = (index) => {
+    const {
+      model: { correctResponse },
+    } = this.props;
+
+    this.updateModel({
+      correctResponse: (correctResponse || []).map((cr) => ({
+        ...cr,
+        alternateResponses: (cr.alternateResponses || []).filter((alt, altIndex) => altIndex !== index),
+      })),
+    });
+  };
+
+  countChoiceInCorrectResponse: any = (choice) => {
+    const { model } = this.props;
+
+    return countInAnswer(choice.id, model.correctResponse);
+  };
+
+  checkAllowMultiplePlacements: any = (allowMultiplePlacements, c) => {
+    if (allowMultiplePlacements === multiplePlacements.enabled) {
+      return 0;
+    }
+
+    if (allowMultiplePlacements === multiplePlacements.disabled) {
+      return 1;
+    }
+
+    return c.categoryCount || 0;
+  };
+
+  isAlertModalOpened: any = () => {
+    const { model } = this.props;
+    const { maxChoicesPerCategory = 0 } = model || {};
+    const maxChoices = getMaxCategoryChoices(model);
+    // when maxChoicesPerCategory is set to 0, there is no limit so modal should not be opened
+    return maxChoicesPerCategory !== 0 ? maxChoices > maxChoicesPerCategory : false;
+  };
+
+  onAlertModalCancel: any = () => {
+    const { model } = this.props;
+    const maxChoices = getMaxCategoryChoices(model);
+    this.updateModel({ maxChoicesPerCategory: maxChoices });
+  };
+
+  onDragStart: any = (event) => {
+    const { active } = event;
+    const draggedItem = active.data.current;
+
+    this.setState({
+      activeDragItem: draggedItem,
+    });
+  };
+
+  onDragEnd: any = ({ active, over }) => {
+    this.setState({ activeDragItem: null });
+    if (!active) return;
+
+    const { model } = this.props;
+    const { allowAlternateEnabled, categories = [], choices = [] } = model;
+
+    const activeData = active?.data?.current;
+    const overData = over?.data?.current;
+
+    if (!activeData) return;
+
+    const choiceIndex = activeData.choiceIndex || 0;
+    const overType = overData?.type;
+    const isPreview = activeData.type === 'choice-preview';
+    const isNewChoice = activeData.type === 'choice';
+
+    const choiceId =
+      activeData.choice?.id || (typeof activeData.id === 'string' ? activeData.id.split('-')[0] : activeData.id);
+
+    if (isPreview && (!overData || overType === 'choice')) {
+      this.removeChoiceFromSource(activeData, choiceIndex, { allowAlternateEnabled, categories, choices });
+      return;
+    }
+
+    if (isPreview && overType === 'category') {
+      return this.moveChoice(choiceId, activeData.categoryId, overData.id, choiceIndex);
+    }
+
+    if (isNewChoice && overType === 'category') {
+      return this.addChoiceToCategory({ id: activeData.id }, overData.id);
+    }
+
+    if (isPreview && overType === 'category-alternate') {
+      return this.moveChoiceInAlternate(
+        choiceId,
+        activeData.categoryId,
+        overData.id,
+        choiceIndex,
+        overData.alternateResponseIndex,
+      );
+    }
+
+    if (allowAlternateEnabled && isNewChoice && overType === 'category-alternate') {
+      return this.addChoiceToAlternateCategory({ id: activeData.id }, overData.id, overData.alternateResponseIndex);
+    }
+  };
+
+  removeChoiceFromSource: any = (activeData, choiceIndex, { allowAlternateEnabled, categories, choices }) => {
+    const isAlternateSource = activeData.alternateResponseIndex !== undefined;
+
+    if (!isAlternateSource) {
+      this.deleteChoiceFromCategory(activeData.categoryId, activeData.choiceId, choiceIndex);
+      return;
+    }
+
+    if (!allowAlternateEnabled) return;
+
+    const category = categories?.find((c) => c.id === activeData.categoryId);
+    const choice = choices?.find((c) => c.id === activeData.choiceId);
+
+    if (category && choice) {
+      this.deleteChoiceFromAlternateCategory(category, choice, choiceIndex, activeData.alternateResponseIndex);
+    }
+  };
+
+  addChoiceToCategory: any = (addedChoice, categoryId) => {
+    const { model } = this.props;
+    let { choices = [], correctResponse = [], maxChoicesPerCategory = 0 } = model || {};
+    const choice = (choices || []).find((choice) => choice.id === addedChoice.id);
+
+    let newCorrectResponse = moveChoiceToCategory(addedChoice.id, undefined, categoryId, 0, correctResponse);
+
+    if (choice.categoryCount !== 0) {
+      newCorrectResponse = verifyAllowMultiplePlacements(addedChoice, categoryId, newCorrectResponse);
+    }
+    const maxCategoryChoices = getMaxCategoryChoices(model);
+
+    this.updateModel({
+      correctResponse: newCorrectResponse,
+      maxChoicesPerCategory:
+        maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices
+          ? maxChoicesPerCategory + 1
+          : maxChoicesPerCategory,
+    });
+  };
+
+  deleteChoiceFromCategory: any = (categoryId, choiceId, choiceIndex) => {
+    const { model } = this.props;
+    const correctResponse = removeChoiceFromCategory(choiceId, categoryId, choiceIndex, model.correctResponse);
+
+    this.updateModel({ correctResponse });
+  };
+
+  moveChoice: any = (choiceId, from, to, choiceIndex) => {
+    const { model } = this.props;
+    let { choices, correctResponse = [], maxChoicesPerCategory = 0 } = model || {};
+    const choice = (choices || []).find((choice) => choice.id === choiceId);
+    if (to === from || !choice) {
+      return;
+    }
+    if (choice.categoryCount !== 0) {
+      correctResponse = moveChoiceToCategory(choice.id, from, to, choiceIndex, correctResponse);
+      correctResponse = verifyAllowMultiplePlacements(choice, to, correctResponse);
+    } else if (choice.categoryCount === 0) {
+      correctResponse = moveChoiceToCategory(choice.id, undefined, to, 0, correctResponse);
+    }
+    const maxCategoryChoices = getMaxCategoryChoices(model);
+    // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+    this.updateModel({
+      correctResponse,
+      maxChoicesPerCategory:
+        maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices
+          ? maxChoicesPerCategory + 1
+          : maxChoicesPerCategory,
+    });
+  };
+
+  // methods for alternate responses
+  addChoiceToAlternateCategory: any = (addedChoice, categoryId, altIndex) => {
+    const { model } = this.props;
+    const { correctResponse, choices, maxChoicesPerCategory = 0 } = model;
+
+    const choice = choices.find((c) => c.id === addedChoice.id);
+
+    correctResponse.forEach((a) => {
+      if (a.category === categoryId) {
+        a.alternateResponses = a.alternateResponses || [];
+
+        if (a.alternateResponses[altIndex] === undefined) {
+          a.alternateResponses[altIndex] = [];
+        }
+
+        a.alternateResponses[altIndex].push(addedChoice.id);
+        if (choice.categoryCount && choice.categoryCount !== 0) {
+          a.alternateResponses[altIndex] = a.alternateResponses[altIndex].reduce((acc, currentValue) => {
+            if (currentValue === choice.id) {
+              const foundIndex = acc.findIndex((c) => c === choice.id);
+              if (foundIndex === -1) {
+                acc.push(currentValue);
+              }
+            } else {
+              acc.push(currentValue);
+            }
+
+            return acc;
+          }, []);
+        }
+
+        return a;
+      } else {
+        if (a.alternateResponses[altIndex] && choice.categoryCount !== 0) {
+          a.alternateResponses[altIndex] = a.alternateResponses[altIndex].filter((c) => c !== addedChoice.id);
+          return a;
+        }
+      }
+
+      return a;
+    });
+
+    const maxCategoryChoices = getMaxCategoryChoices(model);
+    // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+    this.updateModel({
+      correctResponse,
+      maxChoicesPerCategory:
+        maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices
+          ? maxChoicesPerCategory + 1
+          : maxChoicesPerCategory,
+    });
+  };
+
+  moveChoiceInAlternate: any = (choiceId, from, to, choiceIndex, alternateIndex) => {
+    const { model } = this.props;
+    let { choices, correctResponse = [], maxChoicesPerCategory = 0 } = model || {};
+    const choice = (choices || []).find((choice) => choice.id === choiceId);
+    correctResponse = moveChoiceToAlternate(
+      choiceId,
+      from,
+      to,
+      choiceIndex,
+      correctResponse,
+      alternateIndex,
+      choice?.categoryCount,
+    );
+
+    const maxCategoryChoices = getMaxCategoryChoices(model);
+    // when maxChoicesPerCategory is set to 0, there is no limit so it should not be updated
+    this.updateModel({
+      correctResponse,
+      maxChoicesPerCategory:
+        maxChoicesPerCategory !== 0 && maxChoicesPerCategory < maxCategoryChoices
+          ? maxChoicesPerCategory + 1
+          : maxChoicesPerCategory,
+    });
+  };
+
+  deleteChoiceFromAlternateCategory: any = (category, choice, choiceIndex, altIndex) => {
+    const { model } = this.props;
+
+    const correctResponse = removeChoiceFromAlternate(
+      choice.id,
+      category.id,
+      choiceIndex,
+      altIndex,
+      model.correctResponse,
+    );
+
+    this.updateModel({ correctResponse });
+  };
+
+  renderDragOverlay: any = () => {
+    const { activeDragItem } = this.state;
+    const { model, configuration } = this.props;
+
+    if (!activeDragItem) return null;
+
+    if (activeDragItem.type === 'choice') {
+      const choice = model.choices?.find((c) => c.id === activeDragItem.id);
+      if (!choice) return null;
+
+      return <Choice choice={choice} configuration={configuration} />;
+    } else if (activeDragItem.type === 'choice-preview' && activeDragItem.alternateResponseIndex === undefined) {
+      const choice = model.choices?.find((c) => c.id === activeDragItem.id);
+      if (!choice) return null;
+      return <ChoicePreview choice={choice} />;
+    } else if (activeDragItem.type === 'choice-preview' && activeDragItem.alternateResponseIndex !== undefined) {
+      const choice = model.choices?.find((c) => c.id === activeDragItem.id);
+      if (!choice) return null;
+      return <ChoicePreview choice={choice} alternateResponseIndex={activeDragItem.alternateResponseIndex} />;
+    }
+
+    return null;
+  };
+
+  render() {
+    const { configuration, imageSupport, model, uploadSoundSupport, onConfigurationChanged } = this.props;
+    const {
+      allowAlternate = {},
+      allowMultiplePlacements = {},
+      baseInputConfiguration = {},
+      categoriesPerRow = {},
+      choicesPosition = {},
+      contentDimensions = {},
+      feedback = {},
+      lockChoiceOrder = {},
+      maxImageHeight = {},
+      maxImageWidth = {},
+      maxPlacements = {},
+      minCategoriesPerRow = 1,
+      partialScoring = {},
+      prompt = {},
+      rationale = {},
+      scoringType = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      studentInstructions = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+      allowMaxAnswerChoices = {},
+    } = configuration || {};
+    const {
+      allowAlternateEnabled,
+      allowMaxChoicesPerCategory,
+      errors,
+      feedbackEnabled,
+      maxChoicesPerCategory,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+      extraCSSRules,
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      teacherInstructions: teacherInstructionsError,
+    } = errors || {};
+
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',
+    };
+
+    const config = model.config || {};
+    config.choices = config.choices || { label: '', columns: 2 };
+
+    const categories = buildCategories(model.categories || [], model.choices || [], model.correctResponse || []);
+
+    const alternateResponses = buildAlternateResponses(
+      model.categories || [],
+      model.choices || [],
+      model.correctResponse || [],
+    );
+
+    const choices = model.choices.map((c) => {
+      c.correctResponseCount = this.countChoiceInCorrectResponse(c);
+      // ensure categoryCount is set even though updatedModel hasn't been called
+      c.categoryCount = this.checkAllowMultiplePlacements(model.allowMultiplePlacementsEnabled, c);
+      return c;
+    });
+
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
+    const panelSettings = {
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+      categoriesPerRow:
+        categoriesPerRow.settings &&
+        numberField(categoriesPerRow.label, {
+          label: categoriesPerRow.label,
+          min: minCategoriesPerRow,
+          max: 6,
+        }),
+      choicesPosition: choicesPosition.settings && radio(choicesPosition.label, ['below', 'above', 'left', 'right']),
+      allowMultiplePlacementsEnabled:
+        allowMultiplePlacements.settings &&
+        dropdown(allowMultiplePlacements.label, [
+          multiplePlacements.enabled,
+          multiplePlacements.disabled,
+          multiplePlacements.perChoice,
+        ]),
+      maxAnswerChoices:
+        allowMaxAnswerChoices.settings &&
+        numberField(allowMaxAnswerChoices.label, {
+          label: '',
+          min: choices?.length || 0,
+          max: 30,
+        }),
+      allowMaxChoicesPerCategory: maxPlacements.settings && toggle(maxPlacements.label),
+      maxChoicesPerCategory:
+        allowMaxChoicesPerCategory === true &&
+        numberField(maxPlacements.label, {
+          label: '',
+          min: 0,
+          max: 30,
+        }),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      feedbackEnabled: feedback.settings && toggle(feedback.label),
+      allowAlternateEnabled: allowAlternate.settings && toggle(allowAlternate.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
+    };
+
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+    };
+
+    const isOpened = this.isAlertModalOpened();
+    const alertMaxChoicesMsg = translator.t('translation:categorize:maxChoicesPerCategoryRestriction', {
+      lng: model.language,
+      maxChoicesPerCategory,
+    });
+
+    return (
+      <DragProvider onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
+        <IdProvider value={this.uid}>
+          <layout.ConfigLayout
+            extraCSSRules={extraCSSRules}
+            dimensions={contentDimensions}
+            hideSettings={settingsPanelDisabled}
+            settings={
+              <Panel
+                model={model}
+                onChangeModel={this.updateModel}
+                configuration={configuration}
+                onChangeConfiguration={onConfigurationChanged}
+                groups={{
+                  Settings: panelSettings,
+                  Properties: panelProperties,
+                }}
+                modal={
+                  <AlertDialog
+                    title={'Warning'}
+                    text={alertMaxChoicesMsg}
+                    open={isOpened}
+                    onClose={this.onAlertModalCancel}
+                  />
+                }
+              />
+            }
+          >
+            {teacherInstructionsEnabled && (
+              <StyledInputContainer label={teacherInstructions.label}>
+                <EditableHtml
+                  markup={model.teacherInstructions || ''}
+                  onChange={this.changeTeacherInstructions}
+                  imageSupport={imageSupport}
+                  error={teacherInstructionsError}
+                  nonEmpty={false}
+                  toolbarOpts={toolbarOpts}
+                  pluginProps={getPluginProps(teacherInstructions?.inputConfiguration, baseInputConfiguration)}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+                  maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                  mathMlOptions={mathMlOptions}
+                />
+                {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+              </StyledInputContainer>
+            )}
+
+            {promptEnabled && (
+              <StyledInputContainer label={prompt.label}>
+                <EditableHtml
+                  markup={model.prompt || ''}
+                  onChange={this.onPromptChanged}
+                  imageSupport={imageSupport}
+                  error={promptError}
+                  nonEmpty={false}
+                  disableUnderline
+                  toolbarOpts={toolbarOpts}
+                  pluginProps={getPluginProps(prompt?.inputConfiguration, baseInputConfiguration)}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={maxImageWidth && maxImageWidth.prompt}
+                  maxImageHeight={maxImageHeight && maxImageHeight.prompt}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                  mathMlOptions={mathMlOptions}
+                />
+                {promptError && <ErrorText>{promptError}</ErrorText>}
+              </StyledInputContainer>
+            )}
+
+            <Categories
+              imageSupport={imageSupport}
+              uploadSoundSupport={uploadSoundSupport}
+              model={model}
+              categories={categories || []}
+              onModelChanged={this.updateModel}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              configuration={configuration}
+              defaultImageMaxWidth={defaultImageMaxWidth}
+              defaultImageMaxHeight={defaultImageMaxHeight}
+              mathMlOptions={mathMlOptions}
+            />
+
+            <Choices
+              imageSupport={imageSupport}
+              uploadSoundSupport={uploadSoundSupport}
+              choices={choices}
+              model={model}
+              onModelChanged={this.updateModel}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              configuration={configuration}
+              defaultImageMaxWidth={defaultImageMaxWidth}
+              defaultImageMaxHeight={defaultImageMaxHeight}
+            />
+
+            {allowAlternateEnabled && (
+              <StyledHeader
+                label="Alternate Responses"
+                buttonLabel="ADD AN ALTERNATE RESPONSE"
+                onAdd={this.onAddAlternateResponse}
+              />
+            )}
+            {allowAlternateEnabled &&
+              alternateResponses.map((categoriesList, index) => {
+                return (
+                  <React.Fragment key={index}>
+                    <StyledHeader
+                      variant={'subtitle1'}
+                      label="Alternate Response"
+                      buttonLabel="REMOVE ALTERNATE RESPONSE"
+                      onAdd={() => this.onRemoveAlternateResponse(index)}
+                    />
+                    <AlternateResponses
+                      altIndex={index}
+                      imageSupport={imageSupport}
+                      model={model}
+                      configuration={configuration}
+                      categories={categoriesList}
+                      onModelChanged={this.updateModel}
+                      uploadSoundSupport={uploadSoundSupport}
+                      mathMlOptions={mathMlOptions}
+                    />
+                  </React.Fragment>
+                );
+              })}
+
+            {rationaleEnabled && (
+              <StyledInputContainer label={rationale.label}>
+                <EditableHtml
+                  markup={model.rationale || ''}
+                  onChange={this.changeRationale}
+                  imageSupport={imageSupport}
+                  error={rationaleError}
+                  nonEmpty={false}
+                  toolbarOpts={toolbarOpts}
+                  pluginProps={getPluginProps(prompt?.inputConfiguration, baseInputConfiguration)}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
+                  maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                  mathMlOptions={mathMlOptions}
+                />
+                {rationaleError && <ErrorText>{rationaleError}</ErrorText>}
+              </StyledInputContainer>
+            )}
+
+            {feedbackEnabled && (
+              <FeedbackConfig feedback={model.feedback} onChange={this.changeFeedback} toolbarOpts={toolbarOpts} />
+            )}
+          </layout.ConfigLayout>
+          <DragOverlay>
+            <DragPreviewWrapper>{this.renderDragOverlay()}</DragPreviewWrapper>
+          </DragOverlay>
+        </IdProvider>
+      </DragProvider>
+    );
+  }
+}
+
+export default Design;