@pie-element/drawing-response 3.9.11 → 3.9.14

package/configure/src/image-container.jsx

@@ -17,7 +17,7 @@ export class ImageContainer extends Component {
       maxImageHeight: 0,
       dragEnabled: true,
       dropzoneActive: false,
-    }
+    };
   }
 
   componentDidMount() {
@@ -26,7 +26,7 @@ export class ImageContainer extends Component {
       const { height, width } = positionInfo;
       this.setState({
         maxImageWidth: width,
-        maxImageHeight: height
+        maxImageHeight: height,
       });
     }
   }
@@ -46,7 +46,7 @@ export class ImageContainer extends Component {
     this.handleFileRead(file);
   };
 
-  makeDropzoneActive= () => this.setState({ dropzoneActive: true });
+  makeDropzoneActive = () => this.setState({ dropzoneActive: true });
 
   makeDropzoneInactive = () => this.setState({ dropzoneActive: false });
 
@@ -90,7 +90,7 @@ export class ImageContainer extends Component {
 
     const dimensions = {
       height: offsetHeight,
-      width: offsetWidth
+      width: offsetWidth,
     };
 
     this.setState({ dimensions });
@@ -126,11 +126,19 @@ export class ImageContainer extends Component {
     const fitsContainer = x <= maxImageWidth + 5;
     const hasMinimumWidth = x > 150 && y > 150;
 
+    const keepAspectRatioWidth = x > y ? x : 'auto';
+    const keepAspectRatioHeight = x > y ? 'auto' : y;
+
     if (fitsContainer && hasMinimumWidth) {
-      box.style.width = `${x}px`;
-      box.style.height = `${y}px`;
+      box.style.width = `${keepAspectRatioWidth}px`;
+      box.style.height = `${keepAspectRatioHeight}px`;
 
-      this.setState({ dimensions: { height: y, width: x }});
+      this.setState({
+        dimensions: {
+          height: keepAspectRatioHeight,
+          width: keepAspectRatioWidth,
+        },
+      });
     }
 
     this.handleDisableDrag();
@@ -141,60 +149,80 @@ export class ImageContainer extends Component {
 
     return (
       <div>
-        <Button
-          label={label}
-          onClick={this.handleInputClick}
-        />
+        <Button label={label} onClick={this.handleInputClick} />
         <input
           accept="image/*"
           className={classes.input}
           onChange={this.handleUploadImage}
-          ref={ref => { this.input = ref; }}
+          ref={(ref) => {
+            this.input = ref;
+          }}
           type="file"
         />
       </div>
-    )
+    );
   }
 
   render() {
-    const {
-      classes,
-      imageUrl
-    } = this.props;
+    const { classes, imageUrl } = this.props;
     const {
       dropzoneActive,
       dragEnabled,
       maxImageHeight,
-      maxImageWidth
+      maxImageWidth,
+      dimensions,
     } = this.state;
 
     return (
-      <div className={classes.base} >
-        <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
-             {...dragEnabled ? {
-               onDragExit: this.handleOnDragExit,
-               onDragLeave: this.handleOnDragExit,
-               onDragOver: this.handleOnDragOver ,
-               onDrop: this.handleOnDrop
-             } : {}}
+      <div className={classes.base}>
+        <div
+          className={`${classes.box} ${
+            dropzoneActive ? classes.boxActive : ''
+          }`}
+          {...(dragEnabled
+            ? {
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+              }
+            : {})}
         >
           <div className={classes.toolbar}>
-            {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}
+            {this.renderUploadControl(
+              imageUrl ? 'Replace Image' : 'Upload Image'
+            )}
           </div>
 
-          <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>
+          <div
+            ref={(ref) => {
+              this.imageSection = ref;
+            }}
+            className={classes.drawableHeight}
+          >
             {imageUrl ? (
               <div className={classes.imageContainer}>
                 <img
                   className={classes.image}
                   height="auto"
                   onLoad={this.handleOnImageLoad}
-                  ref={ref => { this.image = ref; }}
+                  ref={(ref) => {
+                    this.image = ref;
+                  }}
                   src={imageUrl}
-                  style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}
-                  alt=''
+                  style={{
+                    maxWidth: maxImageWidth,
+                    maxHeight: maxImageHeight,
+                    ...dimensions,
+                  }}
+                  alt=""
+                />
+                <div
+                  ref={(ref) => {
+                    this.resize = ref;
+                  }}
+                  className={classes.resize}
                 />
-                <div ref={ref => { this.resize = ref; }} className={classes.resize} />
               </div>
             ) : (
               <div className={`${classes.drawableHeight} ${classes.centered}`}>
@@ -210,25 +238,25 @@ export class ImageContainer extends Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
   box: {
     border: '1px solid #E0E1E6',
-    borderRadius: '5px'
+    borderRadius: '5px',
   },
   boxActive: {
-    border: '1px solid #0032C2'
+    border: '1px solid #0032C2',
   },
   centered: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   drawableHeight: {
-    minHeight: 350
+    minHeight: 350,
   },
   image: {
     alignItems: 'center',
@@ -237,7 +265,7 @@ const styles = theme => ({
   },
   imageContainer: {
     position: 'relative',
-    width: 'fit-content'
+    width: 'fit-content',
   },
   resize: {
     borderBottom: '1px solid #727272',
@@ -247,10 +275,10 @@ const styles = theme => ({
     height: '10px',
     position: 'absolute',
     right: '-10px',
-    width: '10px'
+    width: '10px',
   },
   input: {
-    display: 'none'
+    display: 'none',
   },
   toolbar: {
     backgroundColor: '#ECEDF1',
@@ -258,15 +286,15 @@ const styles = theme => ({
     borderTopLeftRadius: '5px',
     borderTopRightRadius: '5px',
     display: 'flex',
-    padding: '12px 8px'
-  }
+    padding: '12px 8px',
+  },
 });
 
 ImageContainer.propTypes = {
   classes: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   onImageUpload: PropTypes.func.isRequired,
-  onUpdateImageDimension: PropTypes.func.isRequired
+  onUpdateImageDimension: PropTypes.func.isRequired,
 };
 
 export default withStyles(styles)(ImageContainer);

package/configure/src/index.js

@@ -49,12 +49,6 @@ export default class DrawableResponseConfigure extends HTMLElement {
   };
 
   onConfigurationChanged = (c) => {
-    if (!c.backgroundImage.enabled) {
-      this.onModelChanged({
-        ...this._model,
-        imageUrl: ''
-      });
-    }
     this._configuration = c;
     this._render();
   };

package/configure/src/root.jsx

@@ -11,22 +11,22 @@ import cloneDeep from 'lodash/cloneDeep';
 const { Panel, toggle } = settings;
 
 export class Root extends React.Component {
-  onPromptChanged = prompt => {
+  onPromptChanged = (prompt) => {
     const { model, onModelChanged } = this.props;
     const update = cloneDeep(model);
 
     onModelChanged({
       ...update,
-      prompt
+      prompt,
     });
   };
 
-  onTeacherInstructionsChanged = teacherInstructions => {
+  onTeacherInstructionsChanged = (teacherInstructions) => {
     const { model, onModelChanged } = this.props;
 
     onModelChanged({
       ...model,
-      teacherInstructions
+      teacherInstructions,
     });
   };
 
@@ -35,16 +35,16 @@ export class Root extends React.Component {
 
     onModelChanged({
       ...model,
-      imageDimensions: dimensions
+      imageDimensions: dimensions,
     });
   };
 
-  onImageUpload = imageUrl => {
+  onImageUpload = (imageUrl) => {
     const { model, onModelChanged } = this.props;
 
     onModelChanged({
       ...model,
-      imageUrl
+      imageUrl,
     });
   };
 
@@ -55,11 +55,15 @@ export class Root extends React.Component {
       model,
       imageSupport,
       onConfigurationChanged,
-      onModelChanged
+      onModelChanged,
     } = this.props;
-    const { backgroundImage = {}, prompt = {}, teacherInstructions = {} } =
-      configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled } =
+    const {
+      backgroundImage = {},
+      prompt = {},
+      teacherInstructions = {},
+      spellCheck = {},
+    } = configuration || {};
+    const { teacherInstructionsEnabled, promptEnabled, spellCheckEnabled, backgroundImageEnabled } =
       model || {};
     const toolbarOpts = {};
 
@@ -83,16 +87,16 @@ export class Root extends React.Component {
               onChangeConfiguration={onConfigurationChanged}
               groups={{
                 Settings: {
-                  'backgroundImage.enabled':
-                    backgroundImage.settings &&
-                    toggle(backgroundImage.label, true),
+                  backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
                   promptEnabled: prompt.settings && toggle(prompt.label)
                 },
                 Properties: {
                   teacherInstructionsEnabled:
                     teacherInstructions.settings &&
-                    toggle(teacherInstructions.label)
-                }
+                    toggle(teacherInstructions.label),
+                  spellCheckEnabled:
+                    spellCheck.settings && toggle(spellCheck.label),
+                },
               }}
             />
           }
@@ -109,6 +113,7 @@ export class Root extends React.Component {
                   imageSupport={imageSupport}
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
                 />
               </InputContainer>
             )}
@@ -119,11 +124,13 @@ export class Root extends React.Component {
                   markup={model.prompt}
                   onChange={this.onPromptChanged}
                   toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  imageSupport={imageSupport}
                 />
               </InputContainer>
             )}
 
-            {backgroundImage.enabled && (
+            {backgroundImageEnabled && (
               <div>
                 <Typography className={classes.label} variant="subheading">
                   Define Background Image
@@ -143,20 +150,20 @@ export class Root extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing.unit * 3,
   },
   label: {
-    marginTop: theme.spacing.unit * 4
+    marginTop: theme.spacing.unit * 4,
   },
   prompt: {
     paddingTop: theme.spacing.unit * 2,
-    width: '100%'
+    width: '100%',
   },
   regular: {
-    marginBottom: theme.spacing.unit * 3
-  }
+    marginBottom: theme.spacing.unit * 3,
+  },
 });
 
 Root.propTypes = {
@@ -165,7 +172,7 @@ Root.propTypes = {
   model: PropTypes.object.isRequired,
   imageSupport: PropTypes.shape({
     add: PropTypes.func,
-    delete: PropTypes.func
+    delete: PropTypes.func,
   }),
   onModelChanged: PropTypes.func.isRequired,
   onConfigurationChanged: PropTypes.func.isRequired,

package/controller/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.7...@pie-element/drawing-response-controller@3.2.8) (2022-03-22)
+
+**Note:** Version bump only for package @pie-element/drawing-response-controller
+
+
+
+
+
 ## [3.2.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.2...@pie-element/drawing-response-controller@3.2.4) (2021-11-11)
 
 **Note:** Version bump only for package @pie-element/drawing-response-controller

package/controller/lib/index.js

@@ -25,7 +25,8 @@ var normalize = function normalize(question) {
   return _objectSpread({
     promptEnabled: true,
     teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true
+    studentInstructionsEnabled: true,
+    backgroundImageEnabled: true
   }, question);
 };
 
@@ -36,14 +37,16 @@ function model(question, session, env) {
   var imageUrl = normalizedQuestion.imageUrl,
       imageDimensions = normalizedQuestion.imageDimensions,
       prompt = normalizedQuestion.prompt,
-      promptEnabled = normalizedQuestion.promptEnabled;
+      promptEnabled = normalizedQuestion.promptEnabled,
+      backgroundImageEnabled = normalizedQuestion.backgroundImageEnabled;
   return new Promise(function (resolve) {
     var out = {
       disabled: env.mode !== 'gather',
       mode: env.mode,
       imageDimensions: imageDimensions,
       imageUrl: imageUrl,
-      prompt: promptEnabled ? prompt : null
+      prompt: promptEnabled ? prompt : null,
+      backgroundImageEnabled: backgroundImageEnabled
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,QAAQ;AAAA;AAC/BC,IAAAA,aAAa,EAAE,IADgB;AAE/BC,IAAAA,0BAA0B,EAAE,IAFG;AAG/BC,IAAAA,0BAA0B,EAAE;AAHG,KAI5BH,QAJ4B;AAAA,CAA1B;;;;AAOA,SAASI,KAAT,CAAeJ,QAAf,EAAyBK,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGR,SAAS,CAACC,QAAD,CAApC;AACA,MACEQ,QADF,GAKID,kBALJ,CACEC,QADF;AAAA,MAEEC,eAFF,GAKIF,kBALJ,CAEEE,eAFF;AAAA,MAGEC,MAHF,GAKIH,kBALJ,CAGEG,MAHF;AAAA,MAIET,aAJF,GAKIM,kBALJ,CAIEN,aAJF;AAOA,SAAO,IAAIU,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAER,GAAG,CAACS,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAET,GAAG,CAACS,IAFA;AAGVN,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAET,aAAa,GAAGS,MAAH,GAAY;AALvB,KAAZ;;AAQA,QAAIJ,GAAG,CAACU,IAAJ,KAAa,YAAb,KAA8BV,GAAG,CAACS,IAAJ,KAAa,MAAb,IAAuBT,GAAG,CAACS,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BV,kBAAkB,CAACL,0BAAnB,GAAgDK,kBAAkB,CAACU,mBAAnE,GAAyF,IAAnH;AACD,KAFD,MAEO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAhBM,CAAP;AAiBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAAAC,OAAO,EAAI;AACrBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA,SAASgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5Bd,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAc,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    imageDimensions,\n    prompt,\n    promptEnabled\n  } = normalizedQuestion;\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    })\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise(resolve => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring'\n    });\n  });\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,QAAQ;AAAA;AAC/BC,IAAAA,aAAa,EAAE,IADgB;AAE/BC,IAAAA,0BAA0B,EAAE,IAFG;AAG/BC,IAAAA,0BAA0B,EAAE,IAHG;AAI/BC,IAAAA,sBAAsB,EAAE;AAJO,KAK5BJ,QAL4B;AAAA,CAA1B;;;;AAQA,SAASK,KAAT,CAAeL,QAAf,EAAyBM,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGT,SAAS,CAACC,QAAD,CAApC;AACA,MACES,QADF,GAMID,kBANJ,CACEC,QADF;AAAA,MAEEC,eAFF,GAMIF,kBANJ,CAEEE,eAFF;AAAA,MAGEC,MAHF,GAMIH,kBANJ,CAGEG,MAHF;AAAA,MAIEV,aAJF,GAMIO,kBANJ,CAIEP,aAJF;AAAA,MAKEG,sBALF,GAMII,kBANJ,CAKEJ,sBALF;AAQA,SAAO,IAAIQ,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAER,GAAG,CAACS,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAET,GAAG,CAACS,IAFA;AAGVN,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAEV,aAAa,GAAGU,MAAH,GAAY,IALvB;AAMVP,MAAAA,sBAAsB,EAAtBA;AANU,KAAZ;;AASA,QAAIG,GAAG,CAACU,IAAJ,KAAa,YAAb,KAA8BV,GAAG,CAACS,IAAJ,KAAa,MAAb,IAAuBT,GAAG,CAACS,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BV,kBAAkB,CAACN,0BAAnB,GAAgDM,kBAAkB,CAACU,mBAAnE,GAAyF,IAAnH;AACD,KAFD,MAEO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAjBM,CAAP;AAkBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAAAC,OAAO,EAAI;AACrBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA,SAASgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5Bf,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAe,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  backgroundImageEnabled: true,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    imageDimensions,\n    prompt,\n    promptEnabled,\n    backgroundImageEnabled\n  } = normalizedQuestion;\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    })\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise(resolve => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring'\n    });\n  });\n}\n"],"file":"index.js"}

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/drawing-response-controller",
   "private": true,
-  "version": "3.2.7",
+  "version": "3.2.8",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/controller/src/__tests__/index.test.js

@@ -12,7 +12,8 @@ describe('controller', () => {
         height: 0,
         width: 0
       },
-      teacherInstructions: 'Teacher Instructions'
+      teacherInstructions: 'Teacher Instructions',
+      backgroundImageEnabled: true
     };
   });
 
@@ -56,7 +57,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -69,7 +71,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: null,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -83,7 +86,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -96,7 +100,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: question.teacherInstructions
+          teacherInstructions: question.teacherInstructions,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -112,7 +117,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -125,7 +131,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -138,7 +145,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: question.teacherInstructions
+          teacherInstructions: question.teacherInstructions,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -154,7 +162,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
     });

package/controller/src/index.js

@@ -7,6 +7,7 @@ export const normalize = question => ({
   promptEnabled: true,
   teacherInstructionsEnabled: true,
   studentInstructionsEnabled: true,
+  backgroundImageEnabled: true,
   ...question,
 });
 
@@ -16,7 +17,8 @@ export function model(question, session, env) {
     imageUrl,
     imageDimensions,
     prompt,
-    promptEnabled
+    promptEnabled,
+    backgroundImageEnabled
   } = normalizedQuestion;
 
   return new Promise(resolve => {
@@ -26,6 +28,7 @@ export function model(question, session, env) {
       imageDimensions,
       imageUrl,
       prompt: promptEnabled ? prompt : null,
+      backgroundImageEnabled
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/docs/config-schema.json

@@ -40,6 +40,22 @@
         }
       }
     },
+    "spellCheck": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
     "studentInstructions": {
       "title": "ConfigureProp",
       "type": "object",

package/docs/config-schema.json.md

@@ -31,6 +31,18 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `spellCheck` (object)
+
+Properties of the `spellCheck` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
 # `studentInstructions` (object)
 
 Properties of the `studentInstructions` object:

package/docs/demo/generate.js

@@ -3,6 +3,7 @@ exports.model = (id, element) => ({
   element,
   prompt: 'This is the question prompt',
   promptEnabled: true,
+  backgroundImageEnabled: true,
   toolbarEditorPosition: 'bottom',
   imageUrl: '',
   imageDimensions: {

package/docs/pie-schema.json

@@ -63,6 +63,16 @@
       "type": "boolean",
       "title": "teacherInstructionsEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
+    "backgroundImageEnabled": {
+      "description": "Indicates if Background Image is enabled",
+      "type": "boolean",
+      "title": "backgroundImageEnabled"
+    },
     "toolbarEditorPosition": {
       "description": "Indicates the editor's toolbar position which can be 'bottom' or 'top'",
       "default": ": 'bottom'",
@@ -85,9 +95,11 @@
     }
   },
   "required": [
+    "backgroundImageEnabled",
     "element",
     "id",
     "imageDimensions",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],

package/docs/pie-schema.json.md

@@ -46,6 +46,14 @@ Indicates if Student Instructions are enabled
 
 Indicates if Teacher Instructions are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled
+
+# `backgroundImageEnabled` (boolean, required)
+
+Indicates if Background Image is enabled
+
 # `toolbarEditorPosition` (string, enum)
 
 Indicates the editor's toolbar position which can be 'bottom' or 'top'