@pie-element/hotspot 4.10.10 → 4.10.11-beta.1445

package/controller/src/index.js

@@ -8,7 +8,7 @@ import defaults from './defaults';
 
 const log = debug('pie-elements:hotspot:controller');
 
-export const normalize = question => ({
+export const normalize = (question) => ({
   promptEnabled: true,
   rationaleEnabled: true,
   teacherInstructionsEnabled: true,
@@ -19,19 +19,11 @@ export const normalize = question => ({
 
 export function model(question, session, env) {
   const normalizedQuestion = normalize(question);
-  const {
-    imageUrl,
-    dimensions,
-    hotspotColor,
-    multipleCorrect,
-    outlineColor,
-    partialScoring,
-    prompt,
-    shapes
-  } = normalizedQuestion;
+  const { imageUrl, dimensions, hotspotColor, multipleCorrect, outlineColor, partialScoring, prompt, shapes } =
+    normalizedQuestion;
   const { rectangles, polygons } = shapes || {};
 
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const out = {
       disabled: env.mode !== 'gather',
       mode: env.mode,
@@ -46,17 +38,16 @@ export function model(question, session, env) {
         // eslint-disable-next-line no-unused-vars
         rectangles: (rectangles || []).map(({ index, ...rectProps }) => ({ ...rectProps })),
         // eslint-disable-next-line no-unused-vars
-        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps }))
+        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps })),
       },
-      responseCorrect:
-        env.mode === 'evaluate'
-          ? isResponseCorrect(normalizedQuestion, session)
-          : undefined
+      responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : undefined,
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
       out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;
-      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
+      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
+        ? normalizedQuestion.teacherInstructions
+        : null;
     } else {
       out.rationale = null;
       out.teacherInstructions = null;
@@ -71,7 +62,7 @@ export function model(question, session, env) {
 }
 
 export const createDefaultModel = (model = {}) =>
-  new Promise(resolve => {
+  new Promise((resolve) => {
     resolve({
       ...defaults,
       ...model,
@@ -97,14 +88,14 @@ const getScore = (config, session, env = {}) => {
 
   const choices = [...rectangles, ...polygons];
 
-  const correctChoices = choices.filter(choice => choice.correct);
+  const correctChoices = choices.filter((choice) => choice.correct);
 
-  choices.forEach(shape => {
-    const selected = answers && answers.filter(answer => answer.id === shape.id)[0];
+  choices.forEach((shape) => {
+    const selected = answers && answers.filter((answer) => answer.id === shape.id)[0];
     const correctlySelected = shape.correct && selected;
 
-    if(selected) {
-      selectedChoices +=1;
+    if (selected) {
+      selectedChoices += 1;
     }
 
     if (correctlySelected) {
@@ -121,7 +112,7 @@ const getScore = (config, session, env = {}) => {
 };
 
 export function outcome(config, session, env = {}) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     log('outcome...');
 
     if (!session || isEmpty(session)) {
@@ -132,7 +123,7 @@ export function outcome(config, session, env = {}) {
       const score = getScore(config, session, env);
       resolve({ score });
     } else {
-      resolve({score: 0, empty: true})
+      resolve({ score: 0, empty: true });
     }
   });
 }
@@ -140,7 +131,7 @@ export function outcome(config, session, env = {}) {
 const returnShapesCorrect = (shapes) => {
   let answers = [];
 
-  shapes.forEach(i => {
+  shapes.forEach((i) => {
     const { correct, id } = i;
     if (correct) {
       answers.push({ id });
@@ -150,7 +141,7 @@ const returnShapesCorrect = (shapes) => {
 };
 
 export const createCorrectResponseSession = (question, env) => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     if (env.mode !== 'evaluate' && env.role === 'instructor') {
       const { shapes: { rectangles = [], polygons = {} } = {} } = question;
 
@@ -158,14 +149,37 @@ export const createCorrectResponseSession = (question, env) => {
       const polygonsCorrect = returnShapesCorrect(polygons);
 
       resolve({
-        answers: [
-          ...rectangleCorrect,
-          ...polygonsCorrect
-        ],
-        id: '1'
+        answers: [...rectangleCorrect, ...polygonsCorrect],
+        id: '1',
       });
     } else {
       resolve(null);
     }
   });
 };
+
+export const validate = (model = {}, config = {}) => {
+  const { shapes } = model;
+  const { minShapes = 2, maxShapes, maxSelections } = config;
+  const errors = {};
+
+  const allShapes = Object.values(shapes || {}).reduce((acc, shape) => [...acc, ...shape], []);
+
+  const nbOfSelections = (allShapes || []).reduce((acc, shape) => (shape.correct ? acc + 1 : acc), 0);
+
+  const nbOfShapes = (allShapes || []).length;
+
+  if (nbOfShapes < minShapes) {
+    errors.shapesError = `There should be at least ${minShapes} shapes defined.`;
+  } else if (nbOfShapes > maxShapes) {
+    errors.shapesError = `No more than ${maxShapes} shapes should be defined.`;
+  }
+
+  if (nbOfSelections < 1) {
+    errors.selectionsError = 'There should be at least 1 shape selected.';
+  } else if (nbOfSelections > maxSelections) {
+    errors.selectionsError = `No more than ${maxSelections} shapes should be selected.`;
+  }
+
+  return errors;
+};

package/controller/src/utils.js

@@ -1,13 +1,16 @@
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 
-export const getCorrectResponse = (choices) => choices
-  .filter(c => c.correct)
-  .map(c => c.id)
-  .sort();
+export const getCorrectResponse = (choices) =>
+  choices
+    .filter((c) => c.correct)
+    .map((c) => c.id)
+    .sort();
 
 export const isResponseCorrect = (question, session) => {
-  const { shapes: { rectangles, polygons } } = question;
+  const {
+    shapes: { rectangles, polygons },
+  } = question;
   const choices = [...rectangles, ...polygons];
   let correctResponseIds = getCorrectResponse(choices);
 
@@ -16,7 +19,7 @@ export const isResponseCorrect = (question, session) => {
   }
 
   if (session.answers && session.answers.length) {
-    let answerIds = (session.answers || []).map(a => a.id);
+    let answerIds = (session.answers || []).map((a) => a.id);
 
     return isEqual(answerIds.sort(), correctResponseIds);
   } else if (!(correctResponseIds && correctResponseIds.length)) {

package/docs/config-schema.json

@@ -0,0 +1,217 @@
+{
+  "description": "Config Object for @pie-elements/hotspot",
+  "additionalProperties": false,
+  "type": "object",
+  "properties": {
+    "multipleCorrect": {
+      "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"
+        }
+      }
+    },
+    "partialScoring": {
+      "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"
+        }
+      }
+    },
+    "rationale": {
+      "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"
+        }
+      }
+    },
+    "settingsPanelDisabled": {
+      "description": "Indicates if the settings panel is not available",
+      "type": "boolean",
+      "title": "settingsPanelDisabled"
+    },
+    "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"
+        }
+      }
+    },
+    "preserveAspectRatio": {
+      "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"
+        }
+      }
+    },
+    "minShapes": {
+      "description": "Minimum number of shapes",
+      "type": "number",
+      "title": "minShapes"
+    },
+    "maxShapes": {
+      "description": "Maximum number of shapes",
+      "type": "number",
+      "title": "maxShapes"
+    },
+    "maxSelections": {
+      "description": "Maximum number of selected shapes in correct answer",
+      "type": "number",
+      "title": "maxSelections"
+    },
+    "maxImageWidth": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
+    "maxImageHeight": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
+    "withRubric": {
+      "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"
+        }
+      }
+    },
+    "showPrompt": {
+      "description": "Determines whether prompt field will be displayed or not",
+      "default": true,
+      "type": "boolean",
+      "title": "showPrompt"
+    },
+    "promptLabel": {
+      "description": "The label for the item stem/prompt field",
+      "default": "Item Stemm",
+      "type": "string",
+      "title": "promptLabel"
+    }
+  },
+  "definitions": {
+    "ConfigureProp": {
+      "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"
+        }
+      }
+    },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    }
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

package/docs/config-schema.json.md

@@ -0,0 +1,169 @@
+Config Object for @pie-elements/hotspot
+
+The schema defines the following properties:
+
+# `multipleCorrect` (object)
+
+Properties of the `multipleCorrect` 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
+
+# `partialScoring` (object)
+
+Properties of the `partialScoring` 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
+
+# `rationale` (object)
+
+Properties of the `rationale` 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
+
+# `settingsPanelDisabled` (boolean)
+
+Indicates if the settings panel is not available
+
+# `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
+
+# `preserveAspectRatio` (object)
+
+Properties of the `preserveAspectRatio` 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
+
+# `minShapes` (number)
+
+Minimum number of shapes
+
+# `maxShapes` (number)
+
+Maximum number of shapes
+
+# `maxSelections` (number)
+
+Maximum number of selected shapes in correct answer
+
+# `maxImageWidth` (object)
+
+Properties of the `maxImageWidth` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+# `maxImageHeight` (object)
+
+Properties of the `maxImageHeight` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+# `withRubric` (object)
+
+Properties of the `withRubric` 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
+
+# `showPrompt` (boolean)
+
+Determines whether prompt field will be displayed or not
+
+Default: `true`
+
+# `promptLabel` (string)
+
+The label for the item stem/prompt field
+
+Default: `"Item Stemm"`
+
+---
+
+# Sub Schemas
+
+The schema defines the following additional types:
+
+## `ConfigureProp` (object)
+
+Properties of the `ConfigureProp` 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
+
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale

package/docs/demo/config.js

@@ -2,7 +2,7 @@ const { model } = require('./generate');
 
 module.exports = {
   elements: {
-    'hotspot-element': '../..'
+    'hotspot-element': '../..',
   },
-  models: [model('1', 'hotspot-element')]
+  models: [model('1', 'hotspot-element')],
 };

package/docs/demo/generate.js

@@ -4,12 +4,14 @@ exports.model = (id, element) => ({
   disabled: false,
   mode: 'gather',
   dimensions: { height: 291, width: 410 },
-  imageUrl: 'https://store-images.s-microsoft.com/image/apps.2544.13768621950225582.167ba0c8-6eb8-47bb-96fe-278c89bf0dc9.ea440c13-fd1d-4705-b62c-9bfd9054b8b3?w=672&h=378&q=80&mode=letterbox&background=%23FFE4E4E4&format=jpg',
-  hotspotColor: 'rgba(137, 183, 244, 0.65)',
+  imageUrl:
+    'https://store-images.s-microsoft.com/image/apps.2544.13768621950225582.167ba0c8-6eb8-47bb-96fe-278c89bf0dc9.ea440c13-fd1d-4705-b62c-9bfd9054b8b3?w=672&h=378&q=80&mode=letterbox&background=%23FFE4E4E4&format=jpg',
+  hotspotColor: 'rgba(137, 183, 244, 0.25)',
   hotspotList: [
-    'rgba(137, 183, 244, 0.65)',
-    'rgba(217, 30, 24, 0.65)',
-    'rgba(254, 241, 96, 0.65)'
+    'rgba(137, 183, 244, 0.25)',
+    'rgba(217, 30, 24, 0.25)',
+    'rgba(254, 241, 96, 0.25)',
+    'rgba(0, 0, 0, 0.1)',
   ],
   outlineColor: 'blue',
   outlineList: ['blue', 'red', 'yellow'],
@@ -22,47 +24,63 @@ exports.model = (id, element) => ({
         width: 130,
         x: 1,
         y: 1,
-        correct: true
-      }, {
+        correct: true,
+      },
+      {
         id: 'd41',
         height: 140,
         width: 130,
         x: 140,
-        y: 1
-      }, {
+        y: 1,
+      },
+      {
         id: 'aaaa42',
         height: 140,
         width: 130,
         x: 280,
-        y: 1
-      }
+        y: 1,
+      },
+    ],
+    polygons: [
+      {
+        // triangle
+        id: '3',
+        points: [
+          { x: 65, y: 148 },
+          { x: 1, y: 288 },
+          { y: 288, x: 129 },
+        ],
+        correct: true,
+      },
+      {
+        // triangle
+        id: 'g74',
+        points: [
+          { y: 151, x: 141 },
+          { y: 289, x: 205 },
+          { x: 269, y: 151 },
+        ],
+        correct: false,
+      },
+      {
+        // hexagon
+        id: 'j35',
+        points: [
+          { x: 300, y: 150 },
+          { x: 279, y: 220 },
+          { x: 300, y: 289 },
+          { x: 386, y: 289 },
+          { x: 407, y: 220 },
+          { x: 386, y: 150 },
+        ],
+        correct: false,
+      },
     ],
-    polygons: [{
-      // triangle
-      id: '3',
-      points: [{ x: 65, y: 148 }, { x: 1, y: 288 }, { y: 288, x: 129 }],
-      correct: true
-    }, {
-      // triangle
-      id: 'g74',
-      points: [{ y: 151, x: 141 }, { y: 289, x: 205 }, { x: 269, y: 151 }],
-      correct: false
-    }, {
-      // hexagon
-      id: 'j35',
-      points: [
-        { x: 300, y: 150 },
-        { x: 279, y: 220 },
-        { x: 300, y: 289 },
-        { x: 386, y: 289 },
-        { x: 407, y: 220 },
-        { x: 386, y: 150 }
-      ],
-      correct: false
-    }]
   },
   rationale: null,
   teacherInstructions: null,
   toolbarEditorPosition: 'bottom',
-  prompt: '<div><audio controls="controls" src="https://storage.googleapis.com/pie-prod-221718-assets/audio/77f3f61e-5f2d-425f-80a5-fb814dfa5e4c"></audio><br><br>Choose ALL of the words with the long /o/ sound.</div>',
+  prompt:
+    '<div><audio controls="controls" src="https://storage.googleapis.com/pie-prod-221718-assets/audio/77f3f61e-5f2d-425f-80a5-fb814dfa5e4c"></audio><br><br>Choose ALL of the words with the long /o/ sound.</div>',
+  rubricEnabled: false,
 });