@pie-element/hotspot 4.7.18-next.85 → 4.8.1-beta.587

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,46 +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,
-  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>',
+  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>',
+  rubricEnabled: false,
 });

package/docs/demo/session.js

@@ -6,6 +6,6 @@ module.exports = [
       // {
       //   id: '1'
       // }
-    ]
-  }
+    ],
+  },
 ];

package/docs/pie-schema.json

@@ -200,6 +200,11 @@
       "type": "boolean",
       "title": "studentInstructionsEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
     "strokeWidth": {
       "description": "Indicates the width of the outline for a selection",
       "type": "number",
@@ -210,6 +215,21 @@
       "type": "boolean",
       "title": "teacherInstructionsEnabled"
     },
+    "toolbarEditorPosition": {
+      "description": "Indicates the editor's toolbar position which can be 'bottom' or 'top'",
+      "default": ": 'bottom'",
+      "enum": [
+        "bottom",
+        "top"
+      ],
+      "type": "string",
+      "title": "toolbarEditorPosition"
+    },
+    "rubricEnabled": {
+      "description": "Indicates if Rubric is enabled",
+      "type": "boolean",
+      "title": "rubricEnabled"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -228,12 +248,51 @@
     "multipleCorrect",
     "partialScoring",
     "rationaleEnabled",
+    "rubricEnabled",
     "shapes",
+    "spellCheckEnabled",
     "strokeWidth",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
   "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"
+        }
+      }
+    },
     "Shape": {
       "title": "Shape",
       "type": "object",

package/docs/pie-schema.json.md

@@ -138,6 +138,10 @@ Indicates if Rationale are enabled
 
 Indicates if Student Instructions are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
 # `strokeWidth` (number, required)
 
 Indicates the width of the outline for a selection
@@ -146,6 +150,21 @@ Indicates the width of the outline for a selection
 
 Indicates if Teacher Instructions are enabled
 
+# `toolbarEditorPosition` (string, enum)
+
+Indicates the editor's toolbar position which can be 'bottom' or 'top'
+
+This element must be one of the following enum values:
+
+* `bottom`
+* `top`
+
+Default: `": 'bottom'"`
+
+# `rubricEnabled` (boolean, required)
+
+Indicates if Rubric is enabled
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -160,6 +179,34 @@ The html Element tag name
 
 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
+
 ## `Shape` (object)
 
 Properties of the `Shape` object: