@pie-element/image-cloze-association 10.1.2-next.2 → 10.1.2

package/configure/src/index.js

@@ -0,0 +1,114 @@
+import {
+  ModelUpdatedEvent,
+  DeleteImageEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-framework/pie-configure-events';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import debug from 'debug';
+
+import Root from './root';
+import sensibleDefaults from './defaults';
+
+const log = debug('image-cloze-association:configure');
+
+export default class ImageClozeAssociationConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...sensibleDefaults.model,
+    ...model,
+  });
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = ImageClozeAssociationConfigure.createDefaultModel();
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this._configuration = sensibleDefaults.configuration;
+  }
+
+  set model(s) {
+    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);
+    this._render();
+  }
+
+  set configuration(c) {
+    this._configuration = c;
+    this._render();
+  }
+
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = m;
+    this.dispatchModelUpdated(reset);
+    this._render();
+  }
+
+  onConfigurationChanged(config) {
+    this._configuration = config;
+    this._render();
+  }
+
+  /**
+   *
+   * @param {done, progress, file} handler
+   */
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    log('_render');
+
+    let element = React.createElement(Root, {
+      disableSidePanel: this._disableSidePanel,
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged.bind(this),
+      onConfigurationChanged: this.onConfigurationChanged.bind(this),
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this),
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
+    });
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/configure/src/root.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { settings, layout, InputContainer } from '@pie-lib/config-ui';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import { styled } from '@mui/material/styles';
+
+const { Panel, toggle, dropdown } = settings;
+
+const StyledInputContainer = styled(InputContainer)(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+}));
+
+const ErrorText = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
+export class Root extends React.Component {
+  onTeacherInstructionsChanged = (teacherInstructions) => {
+    this.props.onModelChanged({ ...this.props.model, teacherInstructions });
+  };
+
+  render() {
+    const { model, configuration, onModelChanged, onConfigurationChanged, imageSupport, uploadSoundSupport } =
+      this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+    } = configuration || {};
+    const { errors = {}, extraCSSRules, spellCheckEnabled } = model || {};
+    const { teacherInstructions: teacherInstructionsError } = errors;
+
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
+    };
+
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props,
+    });
+
+    return (
+      <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
+        dimensions={contentDimensions}
+        hideSettings={settingsPanelDisabled}
+        settings={
+          <Panel
+            model={model}
+            configuration={configuration}
+            onChangeModel={(model) => onModelChanged(model)}
+            onChangeConfiguration={(config) => onConfigurationChanged(config)}
+            groups={{
+              Properties: panelProperties,
+            }}
+          />
+        }
+      >
+        {model && model.teacherInstructionsEnabled && (
+          <StyledInputContainer label={teacherInstructions.label}>
+            <EditableHtml
+              markup={model.teacherInstructions || ''}
+              onChange={this.onTeacherInstructionsChanged}
+              imageSupport={imageSupport}
+              nonEmpty={false}
+              error={teacherInstructionsError}
+              spellCheck={spellCheckEnabled}
+              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}
+              maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions}
+              maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+          </StyledInputContainer>
+        )}
+
+        <div>Image cloze association</div>
+      </layout.ConfigLayout>
+    );
+  }
+}
+
+Root.propTypes = {
+  onModelChanged: PropTypes.func,
+  onConfigurationChanged: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+};
+
+export default Root;

package/controller/CHANGELOG.json

@@ -0,0 +1,137 @@
+[
+  {
+    "type": "feat",
+    "scope": null,
+    "subject": "Added configuration, settings panel and support for teacher instructions.",
+    "merge": null,
+    "header": "feat: Added configuration, settings panel and support for teacher instructions.",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "b54170b24e397aa4fefd5eaa9a831c23455be7a9",
+    "gitTags": "",
+    "committerDate": "2019-07-09 00:10:49 +0300",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@1.1.0"
+  },
+  {
+    "type": "fix",
+    "scope": null,
+    "subject": "calculate correct partial when comes to duplicates and extra answers",
+    "merge": null,
+    "header": "fix: calculate correct partial when comes to duplicates and extra answers",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "a8b1677e48929c4027b090361f1200fffaca212b",
+    "gitTags": " (origin/sergiulucaci/ch1955/partial-scoring-fix)",
+    "committerDate": "2019-07-29 16:44:59 +0300",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@1.2.0"
+  },
+  {
+    "type": "feat",
+    "scope": null,
+    "subject": "support alternate correct answers",
+    "merge": null,
+    "header": "feat: support alternate correct answers",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "03b5ce0ad1db77ebfb86a0c3dcb0aaf02a0bbf5a",
+    "gitTags": " (origin/sergiulucaci/ch1955/ica-alternate-correct-answers)",
+    "committerDate": "2019-07-26 16:09:36 +0300",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@1.2.0"
+  },
+  {
+    "type": "feat",
+    "scope": null,
+    "subject": "Session null/empty check.",
+    "merge": null,
+    "header": "feat: Session null/empty check.",
+    "body": "Check for each interaction if: has outcome function, outcome function returns { score: 0, empty: true } if session null/empty/undefined, everywhere where session is used we handle if session is null/empty/undefined and test each function that uses session. [image-cloze-association, inline-choice, inline-dropdown]",
+    "footer": null,
+    "notes": [],
+    "hash": "35c2cab1f174e1ede63e9b68ae6c955d7ee12b82",
+    "gitTags": "",
+    "committerDate": "2019-08-25 15:44:31 +0300",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@1.3.0"
+  },
+  {
+    "type": "fix",
+    "scope": null,
+    "subject": "ch2766 fix unresolved promise (#366)",
+    "merge": null,
+    "header": "fix: ch2766 fix unresolved promise (#366)",
+    "body": "* fix:  resolve null when instructor is not role\n\n* chore: typo\n\n* chore: correct response resolve, match interaction\n\n* chore: correct response unresolved\n\n* chore: categorize resolve correct response\n\n* fix: createCorrectResponseSession unresolved promise\n\n* fix: createCorrectResponseSession resolve promise\n\n* fix: createCorrectResponseSession resolve promise\n\n* fix: ch2776 resolve  createCorrectResponse promise",
+    "footer": "* fix: Fixed createCorrectResponseSession and added tests for it. (#365)",
+    "notes": [],
+    "hash": "9057b7fd08e4f5b07e953a5acd053e1945df57f2",
+    "gitTags": " (origin/develop, origin/HEAD)",
+    "committerDate": "2019-10-16 15:50:55 -0400",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@3.0.1"
+  },
+  {
+    "type": "feat",
+    "scope": null,
+    "subject": "PIE-200 - add partialScoring",
+    "merge": null,
+    "header": "feat: PIE-200 - add partialScoring",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "4eb0b47230359f35513fc852ee95cd6845c4d156",
+    "gitTags": "",
+    "committerDate": "2019-12-06 12:22:05 +0000",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@3.1.0"
+  },
+  {
+    "type": "fix",
+    "scope": null,
+    "subject": "bump ui versions",
+    "merge": null,
+    "header": "fix: bump ui versions",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "5b9d99fe59c304bdd173c9336503eb558900d2a2",
+    "gitTags": "",
+    "committerDate": "2020-03-31 19:25:13 +0100",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@3.2.0"
+  },
+  {
+    "type": "fix",
+    "scope": null,
+    "subject": "bump all packages to avoid tag conflict",
+    "merge": null,
+    "header": "fix: bump all packages to avoid tag conflict",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "d9ec9a8689f0a391594b5e2f4ea958c6dc9f6d7b",
+    "gitTags": " (develop)",
+    "committerDate": "2020-04-10 20:01:37 +0100",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@3.2.1"
+  },
+  {
+    "type": "fix",
+    "scope": null,
+    "subject": "bump ui/lib versions",
+    "merge": null,
+    "header": "fix: bump ui/lib versions",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "3edb2321ebaefcaee70c3642aa6da8a50e8a99e5",
+    "gitTags": "",
+    "committerDate": "2020-04-14 15:36:44 +0100",
+    "isTagged": true,
+    "tag": "@pie-element/image-cloze-association-controller@3.2.3"
+  }
+]