@pie-element/ebsr 14.2.2-next.2 → 14.2.2

package/configure/src/defaults.js

@@ -0,0 +1,173 @@
+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

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,235 @@
+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;