@pie-element/ebsr 7.0.13 → 7.0.15-beta.1443

package/configure/src/defaults.js

@@ -3,42 +3,43 @@ import cloneDeep from 'lodash/cloneDeep';
 const defaultConfig = {
   addChoiceButton: {
     settings: true,
-    label: 'Add a Choice'
+    label: 'Add a Choice',
   },
   choiceMode: {
     settings: true,
-    label: 'Response Type'
+    label: 'Response Type',
   },
   choicePrefix: {
     settings: true,
-    label: 'Choice Labels'
+    label: 'Choice Labels',
   },
   deleteChoice: {
-    settings: true
+    settings: true,
   },
   feedback: {
     settings: true,
-    label: 'Feedback'
+    label: 'Feedback',
   },
   lockChoiceOrder: {
     settings: true,
-    label: 'Lock Choice Order'
+    label: 'Lock Choice Order',
   },
   prompt: {
     settings: true,
-    label: 'Prompt'
+    label: 'Prompt',
   },
   rationale: {
     settings: true,
-    label: 'Rationale'
+    label: 'Rationale',
   },
+  settingsPanelDisabled: true,
   studentInstructions: {
     settings: false,
-    label: 'Student Instructions'
+    label: 'Student Instructions',
   },
   teacherInstructions: {
     settings: true,
-    label: 'Teacher Instructions'
+    label: 'Teacher Instructions',
   },
   choicesLayout: {
     settings: false,
@@ -47,9 +48,26 @@ const defaultConfig = {
   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,
+  },
 };
 
-const partModel = base => ({
+const partModel = (base) => ({
   choiceMode: 'radio',
   choices: [],
   choicePrefix: 'numbers',
@@ -61,18 +79,19 @@ const partModel = base => ({
   rationale: '',
   teacherInstructionsEnabled: true,
   studentInstructionsEnabled: true,
+  spellCheckEnabled: true,
   choicesLayout: 'vertical',
   gridColumns: '2',
-  ...base
+  ...base,
 });
 
 export default {
   model: {
     partLabels: true,
     partLabelType: 'Letters',
-    partialScoring: false,
+    // partialScoring: false,
     partA: partModel({ prompt: 'Prompt A' }),
-    partB: partModel({ prompt: 'Prompt B' })
+    partB: partModel({ prompt: 'Prompt B' }),
   },
   configuration: {
     partialScoring: {
@@ -80,18 +99,18 @@ export default {
       // 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
+      settings: false,
     },
     scoringType: {
       settings: false,
-      label: 'Scoring Type'
+      label: 'Scoring Type',
     },
     partA: cloneDeep(defaultConfig),
     partB: cloneDeep(defaultConfig),
     partLabels: {
       settings: true,
-      label: 'Part Labels'
+      label: 'Part Labels',
     },
-    settingsPanelDisabled: true
-  }
+    settingsPanelDisabled: false,
+  },
 };

package/configure/src/index.js

@@ -10,7 +10,7 @@ import sensibleDefaults from './defaults';
 const MODEL_UPDATED = ModelUpdatedEvent.TYPE;
 const MC_TAG_NAME = 'ebsr-multiple-choice-configure';
 
-class EbsrMCConfigure extends MultipleChoiceConfigure { }
+class EbsrMCConfigure extends MultipleChoiceConfigure {}
 
 const defineMultipleChoice = () => {
   if (!customElements.get(MC_TAG_NAME)) {
@@ -26,7 +26,7 @@ const prepareCustomizationObject = (config, model) => {
 
   return {
     configuration,
-    model
+    model,
   };
 };
 
@@ -39,12 +39,14 @@ export default class EbsrConfigure extends HTMLElement {
     partA: {
       ...defaults.partA,
       ...partA,
-      choicesLayout: partA.choicesLayout || (partA.verticalMode === false && 'horizontal') || defaults.partA.choicesLayout
+      choicesLayout:
+        partA.choicesLayout || (partA.verticalMode === false && 'horizontal') || defaults.partA.choicesLayout,
     },
     partB: {
       ...defaults.partB,
       ...partB,
-      choicesLayout: partB.choicesLayout || (partB.verticalMode === false && 'horizontal') || defaults.partB.choicesLayout
+      choicesLayout:
+        partB.choicesLayout || (partB.verticalMode === false && 'horizontal') || defaults.partB.choicesLayout,
     },
   });
 
@@ -74,7 +76,6 @@ export default class EbsrConfigure extends HTMLElement {
 
     this.dispatchModelUpdated(reset);
     this._render();
-
   };
 
   set configuration(c) {
@@ -94,8 +95,7 @@ export default class EbsrConfigure extends HTMLElement {
     this._render();
   }
 
-  onModelUpdated = e => {
-
+  onModelUpdated = (e) => {
     if (e.target === this) {
       return;
     }
@@ -130,6 +130,7 @@ export default class EbsrConfigure extends HTMLElement {
       onModelChanged: this.onModelChanged,
       onConfigurationChanged: this.onConfigurationChanged,
     });
+
     ReactDOM.render(element, this);
   }
 }

package/configure/src/main.jsx

@@ -2,19 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { settings, layout } from '@pie-lib/config-ui';
 import { withStyles } from '@material-ui/core/styles';
-import cloneDeep from 'lodash/cloneDeep';
 
 const { Panel, toggle, radio, dropdown } = settings;
 
-const styles = theme => ({
-  design: {
-    paddingTop: theme.spacing.unit * 3
-  },
+const styles = (theme) => ({
   part: {
     display: 'flex',
     flexDirection: 'column',
-    padding: '16px 0 32px'
-  }
+    '&:not(:first-child)': {
+      paddingTop: theme.spacing.unit * 4,
+    },
+  },
 });
 
 export class Main extends React.Component {
@@ -23,15 +21,16 @@ export class Main extends React.Component {
     configuration: PropTypes.object,
     model: PropTypes.object,
     onModelChanged: PropTypes.func,
-    onConfigurationChanged: PropTypes.func
+    onConfigurationChanged: PropTypes.func,
   };
 
   removeExtraChoices = (choices) => {
     let correctFound = false;
 
-     return (choices || []).map(choice => {
+    return (choices || []).map((choice) => {
       if (correctFound) {
         choice.correct = false;
+
         return choice;
       }
 
@@ -41,7 +40,7 @@ export class Main extends React.Component {
 
       return choice;
     });
-  }
+  };
 
   onModelChanged = (model, key) => {
     const { onModelChanged } = this.props;
@@ -59,17 +58,12 @@ export class Main extends React.Component {
     }
 
     return onModelChanged(model);
-  }
+  };
 
   render() {
-    const {
-      classes,
-      model,
-      configuration,
-      onConfigurationChanged
-    } = this.props;
+    const { classes, model, configuration, onConfigurationChanged } = this.props;
     const { partLabelType, partA: modelPartA, partB: modelPartB } = model;
-    const { partA, partB, partialScoring, scoringType, ...generalConfiguration } = configuration;
+    const { partA, partB, partialScoring, settingsPanelDisabled, scoringType, ...generalConfiguration } = configuration;
     const {
       feedback: feedbackA = {},
       choiceMode: choiceModeA = {},
@@ -80,7 +74,8 @@ export class Main extends React.Component {
       studentInstructions: studentInstructionsA = {},
       choicesLayout: choicesLayoutA = {},
       gridColumns: gridColumnsA = {},
-      rationale: rationaleA = {}
+      rationale: rationaleA = {},
+      spellCheck: spellCheckA = {},
     } = partA || {};
     const {
       feedback: feedbackB = {},
@@ -92,147 +87,139 @@ export class Main extends React.Component {
       studentInstructions: studentInstructionsB = {},
       choicesLayout: choicesLayoutB = {},
       gridColumns: gridColumnsB = {},
-      rationale: rationaleB = {}
+      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}`)) : [],
+      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']),
+    };
+
+    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 (
-      <div className={classes.design}>
-        <layout.ConfigLayout
-          settings={
-            <Panel
-              model={model}
-              onChangeModel={this.onModelChanged}
-              configuration={configuration}
-              onChangeConfiguration={onConfigurationChanged}
-              groups={{
-                'Settings for both': {
-                  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'])
-                },
-                [`Settings ${firstPart}`]: {
-                  '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)
-                },
-                [`Properties ${firstPart}`]: {
-                  '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)
-                },
-                [`Settings ${secondPart}`]: {
-                  '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)
-                },
-                [`Properties ${secondPart}`]: {
-                  '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)
+      <layout.ConfigLayout
+        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,
+            }}
+          />
+        }
+      >
+        <div>
+          <div className={classes.part}>
+            {model.partLabels && <div>{firstPart}</div>}
+            <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,
+                  };
+                }
+              }}
+            />
+          </div>
+
+          <div className={classes.part}>
+            {model.partLabels && <div>{secondPart}</div>}
+            <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,
+                  };
                 }
               }}
             />
-          }
-        >
-          <div>
-            <div className={classes.part}>
-              {model.partLabels && <p>{firstPart}</p>}
-              <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 = cloneDeep(this.props.model.partA);
-                    this.partA.configuration = {
-                      ...partA,
-                      ...generalConfiguration
-                    };
-                  }
-                }}
-              />
-            </div>
-
-            <div className={classes.part}>
-              {model.partLabels && <p>{secondPart}</p>}
-              <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 = cloneDeep(this.props.model.partB);
-                    this.partB.configuration = {
-                      ...partB,
-                      ...generalConfiguration
-                    };
-                  }
-                }}
-              />
-            </div>
           </div>
-        </layout.ConfigLayout>
-      </div>
+        </div>
+      </layout.ConfigLayout>
     );
   }
 }

package/controller/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/ebsr-controller@6.1.0...@pie-element/ebsr-controller@6.1.1) (2022-12-07)
+
+
+### Bug Fixes
+
+* trigger build (these versions were released in Nov 15 but code was not updated for some reason) ([3ddbbbd](https://github.com/pie-framework/pie-elements/commit/3ddbbbdb08f41642bb734af9559dcd9f1536439b))
+* update libs ([441f403](https://github.com/pie-framework/pie-elements/commit/441f403870b7bec0d61fab58b8d93dbe0ead4c32))
+
+
+
+
+
+## [6.0.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/ebsr-controller@6.0.4...@pie-element/ebsr-controller@6.0.5) (2022-05-30)
+
+**Note:** Version bump only for package @pie-element/ebsr-controller
+
+
+
+
+
 ## [6.0.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/ebsr-controller@6.0.0...@pie-element/ebsr-controller@6.0.1) (2021-09-01)
 
 **Note:** Version bump only for package @pie-element/ebsr-controller

package/controller/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["partA","choicePrefix","choices","value","label","prompt","disabled","partB"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,YAAY,EAAE,SADT;AAELC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,GADT;AAEEC,MAAAA,KAAK,EAAE;AAFT,KADO,CAFJ;AAQLC,IAAAA,MAAM,EAAE,UARH;AASLC,IAAAA,QAAQ,EAAE;AATL,GADM;AAYbC,EAAAA,KAAK,EAAE;AACLN,IAAAA,YAAY,EAAE,SADT;AAELC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,GADT;AAEEC,MAAAA,KAAK,EAAE;AAFT,KADO,CAFJ;AAQLC,IAAAA,MAAM,EAAE,UARH;AASLC,IAAAA,QAAQ,EAAE;AATL;AAZM,C","sourcesContent":["export default {\n  partA: {\n    choicePrefix: 'letters',\n    choices: [\n      {\n        value: 'a',\n        label: 'label a',\n      }\n    ],\n    prompt: 'prompt a',\n    disabled: false,\n  },\n  partB: {\n    choicePrefix: 'letters',\n    choices: [\n      {\n        value: 'b',\n        label: 'label b',\n      },\n    ],\n    prompt: 'prompt b',\n    disabled: false,\n  },\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["partA","choicePrefix","choices","value","label","prompt","disabled","partB"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,YAAY,EAAE,SADT;AAELC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,GADT;AAEEC,MAAAA,KAAK,EAAE;AAFT,KADO,CAFJ;AAQLC,IAAAA,MAAM,EAAE,UARH;AASLC,IAAAA,QAAQ,EAAE;AATL,GADM;AAYbC,EAAAA,KAAK,EAAE;AACLN,IAAAA,YAAY,EAAE,SADT;AAELC,IAAAA,OAAO,EAAE,CACP;AACEC,MAAAA,KAAK,EAAE,GADT;AAEEC,MAAAA,KAAK,EAAE;AAFT,KADO,CAFJ;AAQLC,IAAAA,MAAM,EAAE,UARH;AASLC,IAAAA,QAAQ,EAAE;AATL;AAZM,C","sourcesContent":["export default {\n  partA: {\n    choicePrefix: 'letters',\n    choices: [\n      {\n        value: 'a',\n        label: 'label a',\n      },\n    ],\n    prompt: 'prompt a',\n    disabled: false,\n  },\n  partB: {\n    choicePrefix: 'letters',\n    choices: [\n      {\n        value: 'b',\n        label: 'label b',\n      },\n    ],\n    prompt: 'prompt b',\n    disabled: false,\n  },\n};\n"],"file":"defaults.js"}