@pie-element/ebsr 14.2.1 → 14.2.2-next.1

package/configure/src/defaults.js

@@ -1,173 +0,0 @@
-import { cloneDeep } from 'lodash-es';
-
-const defaultConfig = {
-  addChoiceButton: {
-    settings: true,
-    label: 'Add a Choice',
-  },
-  choiceMode: {
-    settings: true,
-    label: 'Response Type',
-  },
-  choicePrefix: {
-    settings: true,
-    label: 'Choice Labels',
-  },
-  deleteChoice: {
-    settings: true,
-  },
-  feedback: {
-    settings: true,
-    label: 'Feedback',
-  },
-  lockChoiceOrder: {
-    settings: true,
-    label: 'Lock Choice Order',
-  },
-  prompt: {
-    settings: true,
-    label: 'Prompt',
-    inputConfiguration: {
-      audio: { disabled: false },
-      video: { disabled: false },
-      image: { disabled: false },
-    },
-    required: false,
-  },
-  rationale: {
-    settings: true,
-    label: 'Rationale',
-    inputConfiguration: {
-      audio: { disabled: false },
-      video: { disabled: false },
-      image: { disabled: false },
-    },
-    required: false,
-  },
-  settingsPanelDisabled: true,
-  studentInstructions: {
-    settings: false,
-    label: 'Student Instructions',
-  },
-  teacherInstructions: {
-    settings: true,
-    label: 'Teacher Instructions',
-    inputConfiguration: {
-      audio: { disabled: false },
-      video: { disabled: false },
-      image: { disabled: false },
-    },
-    required: false,
-  },
-  choicesLayout: {
-    settings: false,
-    label: 'Choices Layout',
-  },
-  gridColumns: {
-    label: 'Grid columns',
-  },
-  spellCheck: {
-    label: 'Spellcheck',
-    settings: false,
-    enabled: true,
-  },
-  maxImageWidth: {
-    teacherInstructions: 300,
-    prompt: 300,
-    rationale: 636,
-    choices: 636,
-  },
-  maxImageHeight: {
-    teacherInstructions: 300,
-    prompt: 300,
-    rationale: 300,
-    choices: 300,
-  },
-  mathMlOptions: {
-    mmlOutput: false,
-    mmlEditing: false,
-  },
-  choices: {
-    inputConfiguration: {
-      audio: { disabled: false },
-      video: { disabled: false },
-      image: { disabled: false },
-    },
-  },
-  baseInputConfiguration: {
-    h3: { disabled: true },
-    audio: { disabled: false },
-    video: { disabled: false },
-    image: { disabled: false },
-    textAlign: { disabled: true },
-    showParagraphs: { disabled: false },
-    separateParagraphs: { disabled: true },
-  },
-};
-
-const partModel = (base) => ({
-  choiceMode: 'radio',
-  choicePrefix: 'letters',
-  choices: [],
-  choicesLayout: 'vertical',
-  feedbackEnabled: false,
-  gridColumns: 2,
-  prompt: '',
-  promptEnabled: true,
-  rationale: '',
-  rationaleEnabled: true,
-  spellCheckEnabled: true,
-  studentInstructionsEnabled: true,
-  teacherInstructions: '',
-  teacherInstructionsEnabled: true,
-  toolbarEditorPosition: 'bottom',
-  ...base,
-});
-
-export default {
-  model: {
-    partLabels: false,
-    partLabelType: 'Letters',
-    // partialScoring: false,
-    partA: partModel(),
-    partB: partModel(),
-  },
-  configuration: {
-    baseInputConfiguration: {
-      h3: { disabled: true },
-      audio: { disabled: false },
-      video: { disabled: false },
-      image: { disabled: false },
-      textAlign: { disabled: true },
-      showParagraphs: { disabled: false },
-      separateParagraphs: { disabled: true },
-    },
-    partialScoring: {
-      label: 'Allow Partial Scoring',
-      // this will turn off partial scoring toggle in the settings tab by default for the interaction
-      // as we'd like partial scoring to be controlled from the environment entirely
-      // if any other consumers would like to enable it for themselves, they can do so from their model directly.
-      settings: false,
-    },
-    scoringType: {
-      settings: false,
-      label: 'Scoring Type',
-    },
-    partA: cloneDeep(defaultConfig),
-    partB: cloneDeep(defaultConfig),
-    partLabels: {
-      settings: true,
-      label: 'Part Labels',
-    },
-    settingsPanelDisabled: false,
-    language: {
-      settings: false,
-      label: 'Specify Language',
-      enabled: false,
-    },
-    languageChoices: {
-      label: 'Language Choices',
-      options: [],
-    },
-  },
-};

package/configure/src/index.js

@@ -1,174 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
-import MultipleChoiceConfigure from '@pie-element/multiple-choice/configure/lib';
-import { defaults } from 'lodash-es';
-import Main from './main';
-
-import sensibleDefaults from './defaults';
-
-const MODEL_UPDATED = ModelUpdatedEvent.TYPE;
-const MC_TAG_NAME = 'ebsr-multiple-choice-configure';
-
-class EbsrMCConfigure extends MultipleChoiceConfigure {}
-const defineMultipleChoice = () => {
-  if (!customElements.get(MC_TAG_NAME)) {
-    customElements.define(MC_TAG_NAME, EbsrMCConfigure);
-  }
-};
-
-defineMultipleChoice();
-
-const prepareCustomizationObject = (config, model) => {
-  const configuration = defaults(config, sensibleDefaults.configuration);
-
-  return {
-    configuration,
-    model,
-  };
-};
-
-const { model: modelDefault } = sensibleDefaults || {};
-
-export default class EbsrConfigure extends HTMLElement {
-  static createDefaultModel = ({ partA = {}, partB = {}, ...model } = {}, defaults = modelDefault) => ({
-    ...defaults,
-    ...model,
-    partA: {
-      ...defaults.partA,
-      ...partA,
-      choicesLayout:
-        partA.choicesLayout || (partA.verticalMode === false && 'horizontal') || defaults.partA.choicesLayout,
-    },
-    partB: {
-      ...defaults.partB,
-      ...partB,
-      choicesLayout:
-        partB.choicesLayout || (partB.verticalMode === false && 'horizontal') || defaults.partB.choicesLayout,
-    },
-  });
-
-  constructor() {
-    super();
-    this._root = null;
-
-    this._model = EbsrConfigure.createDefaultModel();
-
-    this._configuration = sensibleDefaults.configuration;
-    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
-  }
-
-  set model(m) {
-    this._model = EbsrConfigure.createDefaultModel(m, this._model);
-
-    this._render();
-  }
-
-  dispatchModelUpdated(reset) {
-    const resetValue = !!reset;
-
-    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
-  }
-
-  onModelChanged = (m, reset) => {
-    this._model = EbsrConfigure.createDefaultModel(m, this._model);
-
-    this.dispatchModelUpdated(reset);
-    this._render();
-  };
-
-  set configuration(c) {
-    const info = prepareCustomizationObject(c, this._model);
-
-    const newConfiguration = {
-      ...sensibleDefaults.configuration,
-      ...info.configuration,
-    };
-
-    this._configuration = newConfiguration;
-
-    // if language:enabled is true, then the corresponding default item model should include a language value;
-    // if it is false, then the language field should be omitted from the item model.
-    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
-    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
-    if (newConfiguration?.language?.enabled) {
-      if (newConfiguration?.languageChoices?.options?.length) {
-        this._model.language = newConfiguration?.languageChoices.options[0].value;
-      }
-    } else if (newConfiguration.language.settings && this._model.language) {
-      this._configuration.language.enabled = true;
-
-      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
-        this._configuration.languageChoices.options = [];
-      }
-
-      // check if the language is already included in the languageChoices.options array
-      // and if not, then add it.
-      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
-        this._configuration.languageChoices.options.push({
-          value: this._model.language,
-          label: this._model.language,
-        });
-      }
-    } else {
-      delete this._model.language;
-    }
-
-    this._render();
-  }
-
-  onConfigurationChanged(c) {
-    this._configuration = prepareCustomizationObject(c, this._model).configuration;
-
-    if (this._model) {
-      this.onModelChanged(this._model);
-    }
-
-    this._render();
-  }
-
-  onModelUpdated = (e) => {
-    if (e.target === this) {
-      return;
-    }
-
-    e.preventDefault();
-    e.stopImmediatePropagation();
-
-    const id = e.target && e.target.getAttribute('id');
-
-    if (id) {
-      if (e.update) {
-        this._model[`part${id}`] = e.update;
-      }
-
-      this.dispatchEvent(new ModelUpdatedEvent(this._model));
-    }
-  };
-
-  connectedCallback() {
-    this.addEventListener(MODEL_UPDATED, this.onModelUpdated);
-    this._render();
-  }
-
-  _render() {
-    let element = React.createElement(Main, {
-      model: this._model,
-      configuration: this._configuration,
-      onModelChanged: this.onModelChanged,
-      onConfigurationChanged: this.onConfigurationChanged,
-    });
-
-    if (!this._root) {
-      this._root = createRoot(this);
-    }
-    this._root.render(element);
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener(MODEL_UPDATED, this.onModelUpdated);
-    if (this._root) {
-      this._root.unmount();
-    }
-  }
-}

package/configure/src/main.jsx

@@ -1,235 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { settings, layout } from '@pie-lib/config-ui';
-import { styled } from '@mui/material/styles';
-
-const { Panel, toggle, radio, dropdown } = settings;
-
-const PartLabel = styled('div')(({ theme }) => ({
-  paddingBottom: theme.spacing(2),
-}));
-
-const Divider = styled('div')(({ theme }) => ({
-  flex: 1,
-  height: theme.spacing(2.5),
-}));
-
-export class Main extends React.Component {
-  static propTypes = {
-    configuration: PropTypes.object,
-    model: PropTypes.object,
-    onModelChanged: PropTypes.func,
-    onConfigurationChanged: PropTypes.func,
-  };
-
-  removeExtraChoices = (choices) => {
-    let correctFound = false;
-
-    return (choices || []).map((choice) => {
-      if (correctFound) {
-        choice.correct = false;
-
-        return choice;
-      }
-
-      if (choice.correct) {
-        correctFound = true;
-      }
-
-      return choice;
-    });
-  };
-
-  onModelChanged = (model, key) => {
-    const { onModelChanged } = this.props;
-
-    if (key === 'partA.choiceMode' && model.partA.choiceMode === 'radio') {
-      model.partA.choices = this.removeExtraChoices(model.partA.choices);
-
-      return onModelChanged(model, true);
-    }
-
-    if (key === 'partB.choiceMode' && model.partB.choiceMode === 'radio') {
-      model.partB.choices = this.removeExtraChoices(model.partB.choices);
-
-      return onModelChanged(model, true);
-    }
-
-    return onModelChanged(model);
-  };
-
-  render() {
-    const { model, configuration, onConfigurationChanged } = this.props;
-    const { partLabelType, partA: modelPartA, partB: modelPartB, extraCSSRules } = model;
-    const {
-      contentDimensions = {},
-      partA = {},
-      partB = {},
-      partialScoring = {},
-      settingsPanelDisabled,
-      scoringType = {},
-      language = {},
-      languageChoices = {},
-      ...generalConfiguration
-    } = configuration;
-    const {
-      feedback: feedbackA = {},
-      choiceMode: choiceModeA = {},
-      choicePrefix: choicePrefixA = {},
-      lockChoiceOrder: lockChoiceOrderA = {},
-      prompt: promptA = {},
-      teacherInstructions: teacherInstructionsA = {},
-      studentInstructions: studentInstructionsA = {},
-      choicesLayout: choicesLayoutA = {},
-      gridColumns: gridColumnsA = {},
-      rationale: rationaleA = {},
-      spellCheck: spellCheckA = {},
-    } = partA || {};
-    const {
-      feedback: feedbackB = {},
-      choiceMode: choiceModeB = {},
-      choicePrefix: choicePrefixB = {},
-      lockChoiceOrder: lockChoiceOrderB = {},
-      prompt: promptB = {},
-      teacherInstructions: teacherInstructionsB = {},
-      studentInstructions: studentInstructionsB = {},
-      choicesLayout: choicesLayoutB = {},
-      gridColumns: gridColumnsB = {},
-      rationale: rationaleB = {},
-      spellCheck: spellCheckB = {},
-    } = partB || {};
-
-    const type = partLabelType || 'Numbers';
-    const typeIsNumber = type === 'Numbers';
-    const firstPart = `Part ${typeIsNumber ? '1' : 'A'}`;
-    const secondPart = `Part ${typeIsNumber ? '2' : 'B'}`;
-    const nrOfColumnsAvailable = {
-      partA:
-        modelPartA.choices && modelPartA.choices.length
-          ? Array.from({ length: modelPartA.choices.length }, (_, i) => `${i + 1}`)
-          : [],
-      partB:
-        modelPartB.choices && modelPartB.choices.length
-          ? Array.from({ length: modelPartB.choices.length }, (_, i) => `${i + 1}`)
-          : [],
-    };
-
-    const panelSettings = {
-      partLabels: generalConfiguration.partLabels.settings && toggle(generalConfiguration.partLabels.label),
-      partLabelType: model.partLabels && dropdown('', ['Numbers', 'Letters']),
-      partialScoring: partialScoring.settings && toggle(partialScoring.label),
-      scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
-      'language.enabled': language.settings && toggle(language.label, true),
-      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
-    };
-
-    const panelSettingsPartA = {
-      'partA.choiceMode': choiceModeA.settings && radio(choiceModeA.label, ['checkbox', 'radio']),
-      'partA.choicePrefix': choicePrefixA.settings && radio(choicePrefixA.label, ['numbers', 'letters']),
-      'partA.lockChoiceOrder': lockChoiceOrderA.settings && toggle(lockChoiceOrderA.label),
-      'partA.choicesLayout':
-        choicesLayoutA.settings && dropdown(choicesLayoutA.label, ['vertical', 'grid', 'horizontal']),
-      'partA.gridColumns':
-        choicesLayoutA.settings &&
-        modelPartA.choicesLayout === 'grid' &&
-        nrOfColumnsAvailable.partA.length > 0 &&
-        dropdown(gridColumnsA.label, nrOfColumnsAvailable.partA),
-    };
-    const panelPropertiesPartA = {
-      'partA.feedbackEnabled': feedbackA.settings && toggle(feedbackA.label),
-      'partA.promptEnabled': promptA.settings && toggle(promptA.label),
-      'partA.teacherInstructionsEnabled': teacherInstructionsA.settings && toggle(teacherInstructionsA.label),
-      'partA.studentInstructionsEnabled': studentInstructionsA.settings && toggle(studentInstructionsA.label),
-      'partA.rationaleEnabled': rationaleA.settings && toggle(rationaleA.label),
-      'partA.spellCheckEnabled': spellCheckA.settings && toggle(spellCheckA.label),
-    };
-
-    const panelSettingsPartB = {
-      'partB.choiceMode': choiceModeB.settings && radio(choiceModeB.label, ['checkbox', 'radio']),
-      'partB.choicePrefix': choicePrefixB.settings && radio(choicePrefixB.label, ['numbers', 'letters']),
-      'partB.lockChoiceOrder': lockChoiceOrderB.settings && toggle(lockChoiceOrderB.label),
-      'partB.choicesLayout':
-        choicesLayoutB.settings && dropdown(choicesLayoutB.label, ['vertical', 'grid', 'horizontal']),
-      'partB.gridColumns':
-        choicesLayoutB.settings &&
-        modelPartB.choicesLayout === 'grid' &&
-        nrOfColumnsAvailable.partB.length > 0 &&
-        dropdown(gridColumnsB.label, nrOfColumnsAvailable.partB),
-    };
-    const panelPropertiesPartB = {
-      'partB.feedbackEnabled': feedbackB.settings && toggle(feedbackB.label),
-      'partB.promptEnabled': promptB.settings && toggle(promptB.label),
-      'partB.teacherInstructionsEnabled': teacherInstructionsB.settings && toggle(teacherInstructionsB.label),
-      'partB.studentInstructionsEnabled': studentInstructionsB.settings && toggle(studentInstructionsB.label),
-      'partB.rationaleEnabled': rationaleB.settings && toggle(rationaleB.label),
-      'partB.spellCheckEnabled': spellCheckB.settings && toggle(spellCheckB.label),
-    };
-
-    return (
-      <layout.ConfigLayout
-        extraCSSRules={extraCSSRules}
-        dimensions={contentDimensions}
-        hideSettings={settingsPanelDisabled}
-        settings={
-          <Panel
-            model={model}
-            onChangeModel={this.onModelChanged}
-            configuration={configuration}
-            onChangeConfiguration={onConfigurationChanged}
-            groups={{
-              'Settings for both': panelSettings,
-              [`Settings ${firstPart}`]: panelSettingsPartA,
-              [`Properties ${firstPart}`]: panelPropertiesPartA,
-              [`Settings ${secondPart}`]: panelSettingsPartB,
-              [`Properties ${secondPart}`]: panelPropertiesPartB,
-            }}
-          />
-        }
-      >
-        {model.partLabels && <PartLabel>{firstPart}</PartLabel>}
-        <ebsr-multiple-choice-configure
-          id="A"
-          key="partA"
-          ref={(ref) => {
-            if (ref) {
-              // do not use destructuring to get model from props
-              this.partA = ref;
-              this.partA._model = {
-                ...this.props.model.partA,
-                errors: (this.props.model.errors && this.props.model.errors.partA) || {},
-              };
-              this.partA.configuration = {
-                ...partA,
-                ...generalConfiguration,
-              };
-            }
-          }}
-        />
-
-        <Divider />
-
-        {model.partLabels && <PartLabel>{secondPart}</PartLabel>}
-        <ebsr-multiple-choice-configure
-          id="B"
-          key="partB"
-          ref={(ref) => {
-            if (ref) {
-              // do not use destructuring to get model from props
-              this.partB = ref;
-              this.partB._model = {
-                ...this.props.model.partB,
-                errors: (this.props.model.errors && this.props.model.errors.partB) || {},
-              };
-              this.partB.configuration = {
-                ...partB,
-                ...generalConfiguration,
-              };
-            }
-          }}
-        />
-      </layout.ConfigLayout>
-    );
-  }
-}
-
-export default Main;