@pie-element/ebsr 6.5.0 → 6.5.1-beta.587

package/configure/src/defaults.js

@@ -3,46 +3,71 @@ 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,
+    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,
+  },
 };
 
-const partModel = base => ({
+const partModel = (base) => ({
   choiceMode: 'radio',
   choices: [],
   choicePrefix: 'numbers',
@@ -54,16 +79,19 @@ const partModel = base => ({
   rationale: '',
   teacherInstructionsEnabled: true,
   studentInstructionsEnabled: true,
-  ...base
+  spellCheckEnabled: true,
+  choicesLayout: 'vertical',
+  gridColumns: '2',
+  ...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: {
@@ -71,24 +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'
-    },
-    partA: {
-      ...cloneDeep(defaultConfig),
-      choiceMode: {
-        settings: false,
-        label: 'Response 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)) {
@@ -23,29 +23,30 @@ defineMultipleChoice();
 const prepareCustomizationObject = (config, model) => {
   const configuration = defaults(config, sensibleDefaults.configuration);
   configuration.settingsPanelDisabled = true;
-  // it is required for ebsr partA not to allow changing response type
-  configuration.partA.choiceMode = {
-    settings: false,
-    label: 'Response Type'
-  };
 
   return {
     configuration,
-    model
+    model,
   };
 };
 
+const { model: modelDefault } = sensibleDefaults || {};
+
 export default class EbsrConfigure extends HTMLElement {
-  static createDefaultModel = (model = {}) => ({
-    ...sensibleDefaults.model,
+  static createDefaultModel = ({ partA = {}, partB = {}, ...model } = {}, defaults = modelDefault) => ({
+    ...defaults,
     ...model,
     partA: {
-      ...sensibleDefaults.model.partA,
-      ...model.partA
+      ...defaults.partA,
+      ...partA,
+      choicesLayout:
+        partA.choicesLayout || (partA.verticalMode === false && 'horizontal') || defaults.partA.choicesLayout,
     },
     partB: {
-      ...sensibleDefaults.model.partB,
-      ...model.partB
+      ...defaults.partB,
+      ...partB,
+      choicesLayout:
+        partB.choicesLayout || (partB.verticalMode === false && 'horizontal') || defaults.partB.choicesLayout,
     },
   });
 
@@ -53,23 +54,13 @@ export default class EbsrConfigure extends HTMLElement {
     super();
 
     this._model = EbsrConfigure.createDefaultModel();
+
     this._configuration = sensibleDefaults.configuration;
     this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
   }
 
   set model(m) {
-    this._model = {
-      ...this._model,
-      ...m,
-      partA: {
-        ...this._model.partA,
-        ...m.partA,
-      },
-      partB: {
-        ...this._model.partB,
-        ...m.partB,
-      }
-    };
+    this._model = EbsrConfigure.createDefaultModel(m, this._model);
 
     this._render();
   }
@@ -81,22 +72,10 @@ export default class EbsrConfigure extends HTMLElement {
   }
 
   onModelChanged = (m, reset) => {
-    this._model = {
-      ...this._model,
-      ...m,
-      partA: {
-        ...this._model.partA,
-        ...m.partA,
-      },
-      partB: {
-        ...this._model.partB,
-        ...m.partB,
-      }
-    };
+    this._model = EbsrConfigure.createDefaultModel(m, this._model);
 
     this.dispatchModelUpdated(reset);
     this._render();
-
   };
 
   set configuration(c) {
@@ -116,7 +95,7 @@ export default class EbsrConfigure extends HTMLElement {
     this._render();
   }
 
-  onModelUpdated = e => {
+  onModelUpdated = (e) => {
     if (e.target === this) {
       return;
     }
@@ -151,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,48 +21,49 @@ export class Main extends React.Component {
     configuration: PropTypes.object,
     model: PropTypes.object,
     onModelChanged: PropTypes.func,
-    onConfigurationChanged: PropTypes.func
+    onConfigurationChanged: PropTypes.func,
   };
 
-  onModelChanged = (model, key) => {
-    const { onModelChanged } = this.props;
+  removeExtraChoices = (choices) => {
+    let correctFound = false;
 
-    if (key !== 'partB.choiceMode') {
-      return onModelChanged(model);
-    };
+    return (choices || []).map((choice) => {
+      if (correctFound) {
+        choice.correct = false;
+
+        return choice;
+      }
+
+      if (choice.correct) {
+        correctFound = true;
+      }
 
-    const value = model.partB.choiceMode;
+      return choice;
+    });
+  };
 
-    if (value === 'radio') {
-      let correctFound = false;
+  onModelChanged = (model, key) => {
+    const { onModelChanged } = this.props;
 
-      model.partB.choices = model.partB.choices.map(c => {
-        // keep only one (first defined) correct answer
-        if (correctFound) {
-          c.correct = false;
-          return c;
-        };
+    if (key === 'partA.choiceMode' && model.partA.choiceMode === 'radio') {
+      model.partA.choices = this.removeExtraChoices(model.partA.choices);
 
-        if (c.correct) {
-          correctFound = true;
-        };
+      return onModelChanged(model, true);
+    }
 
-        return c;
-      });
-    };
+    if (key === 'partB.choiceMode' && model.partB.choiceMode === 'radio') {
+      model.partB.choices = this.removeExtraChoices(model.partB.choices);
 
-    return onModelChanged(model, true);
-  }
+      return onModelChanged(model, true);
+    }
+
+    return onModelChanged(model);
+  };
 
   render() {
-    const {
-      classes,
-      model,
-      configuration,
-      onConfigurationChanged
-    } = this.props;
-    const { partLabelType } = model;
-    const { partA, partB, partialScoring, scoringType, ...generalConfiguration } = configuration;
+    const { classes, model, configuration, onConfigurationChanged } = this.props;
+    const { partLabelType, partA: modelPartA, partB: modelPartB } = model;
+    const { partA, partB, partialScoring, settingsPanelDisabled, scoringType, ...generalConfiguration } = configuration;
     const {
       feedback: feedbackA = {},
       choiceMode: choiceModeA = {},
@@ -73,7 +72,10 @@ export class Main extends React.Component {
       prompt: promptA = {},
       teacherInstructions: teacherInstructionsA = {},
       studentInstructions: studentInstructionsA = {},
-      rationale: rationaleA = {}
+      choicesLayout: choicesLayoutA = {},
+      gridColumns: gridColumnsA = {},
+      rationale: rationaleA = {},
+      spellCheck: spellCheckA = {},
     } = partA || {};
     const {
       feedback: feedbackB = {},
@@ -83,127 +85,141 @@ export class Main extends React.Component {
       prompt: promptB = {},
       teacherInstructions: teacherInstructionsB = {},
       studentInstructions: studentInstructionsB = {},
-      rationale: rationaleB = {}
+      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']),
+    };
+
+    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),
-                },
-                [`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)
-                },
-                [`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>
     );
   }
 }