@pie-element/graphing 3.5.3 → 3.5.4-next.1016

package/docs/demo/generate.js

@@ -105,7 +105,12 @@ exports.model = (id, element) => ({
         }]
     }
   },
-  arrows: true,
+  arrows: {
+    left: true,
+    right: true,
+    up: true,
+    down: true
+  },
   backgroundMarks: [
     {
       type: 'point',
@@ -123,10 +128,12 @@ exports.model = (id, element) => ({
     labelStep: 1,
     axisLabel: 'x'
   },
+  defaultTool: 'point',
   graph: {
     width: 480,
     height: 480
   },
+  coordinatesOnHover: false,
   labels: { top: 'top', left: 'left', bottom: 'bottom', right: 'right' },
   padding: true,
   prompt: 'Here goes item stem !!!!!!',

package/docs/pie-schema.json

@@ -981,9 +981,36 @@
       "title": "answers"
     },
     "arrows": {
-      "description": "Indicates if arrows are enabled",
-      "type": "boolean",
-      "title": "arrows"
+      "title": "Arrows",
+      "type": "object",
+      "properties": {
+        "left": {
+          "description": "Indicates if left arrow is enabled",
+          "type": "boolean",
+          "title": "left"
+        },
+        "right": {
+          "description": "Indicates if right arrow is enabled",
+          "type": "boolean",
+          "title": "right"
+        },
+        "up": {
+          "description": "Indicates if up arrow is enabled",
+          "type": "boolean",
+          "title": "up"
+        },
+        "down": {
+          "description": "Indicates if down arrow is enabled",
+          "type": "boolean",
+          "title": "down"
+        }
+      },
+      "required": [
+        "down",
+        "left",
+        "right",
+        "up"
+      ]
     },
     "backgroundMarks": {
       "description": "Indicates marks that have to be displayed in background",
@@ -1453,6 +1480,27 @@
       },
       "title": "backgroundMarks"
     },
+    "coordinatesOnHover": {
+      "description": "Indicates if coordinates of a point are displayed on hover",
+      "type": "boolean",
+      "title": "coordinatesOnHover"
+    },
+    "defaultTool": {
+      "description": "Indicates the default selected tool for the graph",
+      "enum": [
+        "circle",
+        "line",
+        "parabola",
+        "point",
+        "polygon",
+        "ray",
+        "segment",
+        "sine",
+        "vector"
+      ],
+      "type": "string",
+      "title": "defaultTool"
+    },
     "domain": {
       "title": "GraphSettings",
       "type": "object",
@@ -1517,6 +1565,11 @@
         "width"
       ]
     },
+    "includeAxes": {
+      "description": "Indicates if the graph axes and labels are enabled",
+      "type": "boolean",
+      "title": "includeAxes"
+    },
     "labels": {
       "title": "Labels",
       "type": "object",
@@ -1684,6 +1737,16 @@
       "type": "boolean",
       "title": "rationaleEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
+    "standardGrid": {
+      "description": "Indicates if some domain values will be synched to the range values",
+      "type": "boolean",
+      "title": "standardGrid"
+    },
     "studentInstructionsEnabled": {
       "description": "Indicates if Student Instructions are enabled",
       "type": "boolean",
@@ -1708,12 +1771,14 @@
   "required": [
     "answers",
     "backgroundMarks",
+    "defaultTool",
     "domain",
     "element",
     "graph",
     "id",
     "range",
     "rationaleEnabled",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
@@ -1739,6 +1804,77 @@
         }
       }
     },
+    "ArrowsConfigProp": {
+      "title": "ArrowsConfigProp",
+      "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"
+        },
+        "left": {
+          "title": "ArrowsProp",
+          "type": "object",
+          "properties": {
+            "label": {
+              "description": "Indicates the label for the arrow that has to be displayed in the Settings Panel",
+              "type": "string",
+              "title": "label"
+            }
+          }
+        },
+        "right": {
+          "title": "ArrowsProp",
+          "type": "object",
+          "properties": {
+            "label": {
+              "description": "Indicates the label for the arrow that has to be displayed in the Settings Panel",
+              "type": "string",
+              "title": "label"
+            }
+          }
+        },
+        "up": {
+          "title": "ArrowsProp",
+          "type": "object",
+          "properties": {
+            "label": {
+              "description": "Indicates the label for the arrow that has to be displayed in the Settings Panel",
+              "type": "string",
+              "title": "label"
+            }
+          }
+        },
+        "down": {
+          "title": "ArrowsProp",
+          "type": "object",
+          "properties": {
+            "label": {
+              "description": "Indicates the label for the arrow that has to be displayed in the Settings Panel",
+              "type": "string",
+              "title": "label"
+            }
+          }
+        }
+      }
+    },
+    "ArrowsProp": {
+      "title": "ArrowsProp",
+      "type": "object",
+      "properties": {
+        "label": {
+          "description": "Indicates the label for the arrow that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
     "ConfigureProp": {
       "title": "ConfigureProp",
       "type": "object",
@@ -1755,6 +1891,63 @@
         }
       }
     },
+    "DimensionsConfigProp": {
+      "title": "DimensionsConfigProp",
+      "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"
+        },
+        "enabled": {
+          "description": "Indicates if the graph dimensions are included in the Grid Setup Panel",
+          "type": "boolean",
+          "title": "enabled"
+        },
+        "min": {
+          "description": "Indicates the minimum value for the graph width and height",
+          "type": "number",
+          "title": "min"
+        },
+        "max": {
+          "description": "Indicates the maximum value for the graph width and height",
+          "type": "number",
+          "title": "max"
+        },
+        "step": {
+          "description": "Indicates the increase/decrease value for the graph width and height",
+          "type": "number",
+          "title": "step"
+        }
+      }
+    },
+    "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"
+        }
+      }
+    },
     "Answer": {
       "title": "Answer",
       "type": "object",
@@ -2486,6 +2679,38 @@
         "y"
       ]
     },
+    "Arrows": {
+      "title": "Arrows",
+      "type": "object",
+      "properties": {
+        "left": {
+          "description": "Indicates if left arrow is enabled",
+          "type": "boolean",
+          "title": "left"
+        },
+        "right": {
+          "description": "Indicates if right arrow is enabled",
+          "type": "boolean",
+          "title": "right"
+        },
+        "up": {
+          "description": "Indicates if up arrow is enabled",
+          "type": "boolean",
+          "title": "up"
+        },
+        "down": {
+          "description": "Indicates if down arrow is enabled",
+          "type": "boolean",
+          "title": "down"
+        }
+      },
+      "required": [
+        "down",
+        "left",
+        "right",
+        "up"
+      ]
+    },
     "GraphSettings": {
       "title": "GraphSettings",
       "type": "object",

package/docs/pie-schema.json.md

@@ -40,9 +40,25 @@ Additional restrictions:
 
 * Minimum items: `1`
 
-# `arrows` (boolean)
+# `arrows` (object)
 
-Indicates if arrows are enabled
+Properties of the `arrows` object:
+
+## `left` (boolean, required)
+
+Indicates if left arrow is enabled
+
+## `right` (boolean, required)
+
+Indicates if right arrow is enabled
+
+## `up` (boolean, required)
+
+Indicates if up arrow is enabled
+
+## `down` (boolean, required)
+
+Indicates if down arrow is enabled
 
 # `backgroundMarks` (array, required)
 
@@ -52,6 +68,26 @@ Additional restrictions:
 
 * Minimum items: `1`
 
+# `coordinatesOnHover` (boolean)
+
+Indicates if coordinates of a point are displayed on hover
+
+# `defaultTool` (string, enum, required)
+
+Indicates the default selected tool for the graph
+
+This element must be one of the following enum values:
+
+* `circle`
+* `line`
+* `parabola`
+* `point`
+* `polygon`
+* `ray`
+* `segment`
+* `sine`
+* `vector`
+
 # `domain` (object, required)
 
 Properties of the `domain` object:
@@ -92,6 +128,10 @@ Width for graph representation
 
 Height for graph representation
 
+# `includeAxes` (boolean)
+
+Indicates if the graph axes and labels are enabled
+
 # `labels` (object)
 
 Properties of the `labels` object:
@@ -189,6 +229,14 @@ Additional restrictions:
 
 Indicates if Rationale are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
+# `standardGrid` (boolean)
+
+Indicates if some domain values will be synched to the range values
+
 # `studentInstructionsEnabled` (boolean, required)
 
 Indicates if Student Instructions are enabled
@@ -228,6 +276,58 @@ Indicates the label for the item that has to be displayed in the Settings Panel
 Indicates the value of the item if it affects config-ui
 (eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
 
+## `ArrowsConfigProp` (object)
+
+Properties of the `ArrowsConfigProp` 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
+
+### `left` (object)
+
+Properties of the `left` object:
+
+#### `label` (string)
+
+Indicates the label for the arrow that has to be displayed in the Settings Panel
+
+### `right` (object)
+
+Properties of the `right` object:
+
+#### `label` (string)
+
+Indicates the label for the arrow that has to be displayed in the Settings Panel
+
+### `up` (object)
+
+Properties of the `up` object:
+
+#### `label` (string)
+
+Indicates the label for the arrow that has to be displayed in the Settings Panel
+
+### `down` (object)
+
+Properties of the `down` object:
+
+#### `label` (string)
+
+Indicates the label for the arrow that has to be displayed in the Settings Panel
+
+## `ArrowsProp` (object)
+
+Properties of the `ArrowsProp` object:
+
+### `label` (string)
+
+Indicates the label for the arrow that has to be displayed in the Settings Panel
+
 ## `ConfigureProp` (object)
 
 Properties of the `ConfigureProp` object:
@@ -240,6 +340,50 @@ 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
 
+## `DimensionsConfigProp` (object)
+
+Properties of the `DimensionsConfigProp` 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
+
+### `enabled` (boolean)
+
+Indicates if the graph dimensions are included in the Grid Setup Panel
+
+### `min` (number)
+
+Indicates the minimum value for the graph width and height
+
+### `max` (number)
+
+Indicates the maximum value for the graph width and height
+
+### `step` (number)
+
+Indicates the increase/decrease value for the graph width and height
+
+## `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
+
 ## `Answer` (object)
 
 Properties of the `Answer` object:
@@ -392,6 +536,26 @@ Indicates x coordinate
 
 Indicates y coordinate
 
+## `Arrows` (object)
+
+Properties of the `Arrows` object:
+
+### `left` (boolean, required)
+
+Indicates if left arrow is enabled
+
+### `right` (boolean, required)
+
+Indicates if right arrow is enabled
+
+### `up` (boolean, required)
+
+Indicates if up arrow is enabled
+
+### `down` (boolean, required)
+
+Indicates if down arrow is enabled
+
 ## `GraphSettings` (object)
 
 Properties of the `GraphSettings` object:

package/lib/index.js

@@ -43,7 +43,7 @@ var _main = _interopRequireDefault(require("./main"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var Graphing = /*#__PURE__*/function (_HTMLElement) {
   (0, _inherits2["default"])(Graphing, _HTMLElement);
@@ -77,6 +77,9 @@ var Graphing = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       this._session = s;
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Graphing","answer","Array","isArray","length","_session","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","s","el","React","createElement","Main","model","session","onAnswersChange","changeAnswers","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAIqBA,Q;;;;;AACnB,sBAAc;AAAA;;AAAA;AACZ;AADY,mGAkBD,UAAAC,MAAM;AAAA,aAAIC,KAAK,CAACC,OAAN,CAAcF,MAAd,KAAyBA,MAAM,CAACG,MAAP,GAAgB,CAA7C;AAAA,KAlBL;AAAA,sGAoBE,UAAAH,MAAM,EAAI;AACxB,YAAKI,QAAL,CAAcJ,MAAd,GAAuB,iCAAqBA,MAArB,CAAvB;;AAEA,YAAKK,aAAL,CACE,IAAIC,oCAAJ,CACE,MAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,MAAKC,UAAL,CAAgB,MAAKL,QAAL,CAAcJ,MAA9B,CAFF,CADF;;AAOA,YAAKU,OAAL;AACD,KA/Ba;AAAA;AAEb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;;AACA,WAAKD,OAAL;AACD;;;SAED,aAAYG,CAAZ,EAAe;AACb,WAAKT,QAAL,GAAgBS,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAiBD,mBAAU;AAAA;;AACR,UAAI,CAAC,KAAKE,MAAN,IAAgB,CAAC,KAAKR,QAA1B,EAAoC;AAClC;AACD;;AAED,UAAMU,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,QAAAA,KAAK,EAAE,KAAKN,MADuB;AAEnCO,QAAAA,OAAO,EAAE,KAAKf,QAFqB;AAGnCgB,QAAAA,eAAe,EAAE,KAAKC;AAHa,OAA1B,CAAX;;AAMAC,2BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,uCAAW,MAAX;AACD,OAFD;AAGD;;;kDAhDmCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nimport {  removeInvalidAnswers } from './utils';\nimport Main from './main';\n\nexport { Main as Component };\n\nexport default class Graphing extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  isComplete = answer => Array.isArray(answer) && answer.length > 0;\n\n  changeAnswers = answer => {\n    this._session.answer = removeInvalidAnswers(answer);\n\n    this.dispatchEvent(\n      new SessionChangedEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(this._session.answer)\n      )\n    );\n\n    this._render();\n  };\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      onAnswersChange: this.changeAnswers\n    });\n\n    ReactDOM.render(el, this, () => {\n      renderMath(this);\n    });\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["Graphing","answer","Array","isArray","length","_session","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","s","el","React","createElement","Main","model","session","onAnswersChange","changeAnswers","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAIqBA,Q;;;;;AACnB,sBAAc;AAAA;;AAAA;AACZ;AADY,mGAsBD,UAAAC,MAAM;AAAA,aAAIC,KAAK,CAACC,OAAN,CAAcF,MAAd,KAAyBA,MAAM,CAACG,MAAP,GAAgB,CAA7C;AAAA,KAtBL;AAAA,sGAwBE,UAAAH,MAAM,EAAI;AACxB,YAAKI,QAAL,CAAcJ,MAAd,GAAuB,iCAAqBA,MAArB,CAAvB;;AAEA,YAAKK,aAAL,CACE,IAAIC,oCAAJ,CACE,MAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,MAAKC,UAAL,CAAgB,MAAKL,QAAL,CAAcJ,MAA9B,CAFF,CADF;;AAOA,YAAKU,OAAL;AACD,KAnCa;AAAA;AAEb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;;AACA,WAAKD,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKN,QAAZ;AACD,K;SAPD,aAAYS,CAAZ,EAAe;AACb,WAAKT,QAAL,GAAgBS,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WAMD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAiBD,mBAAU;AAAA;;AACR,UAAI,CAAC,KAAKE,MAAN,IAAgB,CAAC,KAAKR,QAA1B,EAAoC;AAClC;AACD;;AAED,UAAMU,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,QAAAA,KAAK,EAAE,KAAKN,MADuB;AAEnCO,QAAAA,OAAO,EAAE,KAAKf,QAFqB;AAGnCgB,QAAAA,eAAe,EAAE,KAAKC;AAHa,OAA1B,CAAX;;AAMAC,2BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,uCAAW,MAAX;AACD,OAFD;AAGD;;;kDApDmCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nimport {  removeInvalidAnswers } from './utils';\nimport Main from './main';\n\nexport { Main as Component };\n\nexport default class Graphing extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  isComplete = answer => Array.isArray(answer) && answer.length > 0;\n\n  changeAnswers = answer => {\n    this._session.answer = removeInvalidAnswers(answer);\n\n    this.dispatchEvent(\n      new SessionChangedEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(this._session.answer)\n      )\n    );\n\n    this._render();\n  };\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      onAnswersChange: this.changeAnswers\n    });\n\n    ReactDOM.render(el, this, () => {\n      renderMath(this);\n    });\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -33,13 +33,13 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var Main = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Main, _React$Component);
@@ -84,7 +84,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
           answersCorrected = _ref2.answersCorrected,
           arrows = _ref2.arrows,
           backgroundMarks = _ref2.backgroundMarks,
+          coordinatesOnHover = _ref2.coordinatesOnHover,
           correctResponse = _ref2.correctResponse,
+          defaultTool = _ref2.defaultTool,
           disabled = _ref2.disabled,
           domain = _ref2.domain,
           labels = _ref2.labels,
@@ -109,6 +111,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
           includeArrows: arrows
         },
         backgroundMarks: backgroundMarks,
+        coordinatesOnHover: coordinatesOnHover,
         disabled: true,
         domain: domain,
         labels: labels,
@@ -127,20 +130,18 @@ var Main = /*#__PURE__*/function (_React$Component) {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
-      })), /*#__PURE__*/_react["default"].createElement("br", null)), prompt && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.prompt,
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
+      })), /*#__PURE__*/_react["default"].createElement("br", null)), prompt && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        prompt: prompt
       }), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_graphing.GraphContainer, {
         axesSettings: {
           includeArrows: arrows
         },
         backgroundMarks: backgroundMarks,
+        coordinatesOnHover: coordinatesOnHover,
+        defaultTool: defaultTool,
         disabled: disabled,
         domain: domain,
         labels: labels,
@@ -155,10 +156,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
           hidden: 'Show Rationale',
           visible: 'Hide Rationale'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: rationale
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: rationale
       })));
     }
   }]);
@@ -182,9 +181,6 @@ var styles = function styles(theme) {
       padding: theme.spacing.unit,
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background()
-    },
-    prompt: {
-      verticalAlign: 'middle'
     }
   };
 };