@pie-element/match 4.6.0 → 4.6.1-beta.587

package/docs/config-schema.json.md

@@ -98,6 +98,22 @@ 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
 
+# `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
+
 # `rationale` (object)
 
 Properties of the `rationale` object:
@@ -146,6 +162,86 @@ 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
 
+# `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
+
+## `rowTitles` (number)
+
+Indicates the max dimension for images in row labels
+
+# `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
+
+## `rowTitles` (number)
+
+Indicates the max dimension for images in row labels
+
+# `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
+
+# `minQuestions` (number)
+
+Indicates the minimum number of question rows
+
+# `maxQuestions` (number)
+
+Indicates the maximum number of question rows
+
+# `maxLengthQuestionsHeading` (number)
+
+Indicates the maximum length of question rows headings
+
+# `maxAnswers` (number)
+
+Indicates the maximum number of answer columns
+
+# `maxLengthAnswers` (number)
+
+Indicates the maximum length of answer columns headings
+
+# `maxLengthFirstColumnHeading` (number)
+
+Indicates the maximum length of first column headings
+
+# `width` (string, required)
+
+How large (in px) should match be
+
 # `showPrompt` (boolean)
 
 Determines whether prompt field will be displayed or not
@@ -180,4 +276,24 @@ 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
+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
+
+### `rowTitles` (number)
+
+Indicates the max dimension for images in row labels

package/docs/demo/config.js

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

package/docs/demo/generate.js

@@ -5,16 +5,16 @@ exports.model = (id, element) => ({
   feedback: {
     correct: {
       type: 'none',
-      default: 'Correct'
+      default: 'Correct',
     },
     partial: {
       type: 'none',
-      default: 'Nearly'
+      default: 'Nearly',
     },
     incorrect: {
       type: 'none',
-      default: 'Incorrect'
-    }
+      default: 'Incorrect',
+    },
   },
   headers: ['Column 1', 'Column 2', 'Column 3'],
   layout: 3,
@@ -25,24 +25,26 @@ exports.model = (id, element) => ({
     {
       id: 1,
       title: 'Question Text 1',
-      values: [false, false]
+      values: [false, false],
     },
     {
       id: 2,
       title: 'Question Text 2',
-      values: [false, false]
+      values: [false, false],
     },
     {
       id: 3,
       title: 'Question Text 3',
-      values: [false, false]
+      values: [false, false],
     },
     {
       id: 4,
       title: 'Question Text 4',
-      values: [false, false]
-    }
+      values: [false, false],
+    },
   ],
   promptEnabled: true,
   prompt: 'Select correct answers.',
+  toolbarEditorPosition: 'bottom',
+  rubricEnabled: false,
 });

package/docs/pie-schema.json

@@ -288,6 +288,11 @@
       "type": "boolean",
       "title": "rationaleEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
     "studentInstructionsEnabled": {
       "description": "Indicates if Student Instructions are enabled",
       "type": "boolean",
@@ -298,6 +303,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",
@@ -319,6 +339,8 @@
     "rationale",
     "rationaleEnabled",
     "rows",
+    "rubricEnabled",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
@@ -339,6 +361,32 @@
         }
       }
     },
+    "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"
+        },
+        "rowTitles": {
+          "description": "Indicates the max dimension for images in row labels",
+          "type": "number",
+          "title": "rowTitles"
+        }
+      }
+    },
     "ComplexFeedbackType": {
       "title": "ComplexFeedbackType",
       "type": "object",

package/docs/pie-schema.json.md

@@ -108,6 +108,10 @@ Indicates if Feedback is enabled
 
 Indicates if Rationale are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
 # `studentInstructionsEnabled` (boolean, required)
 
 Indicates if Student Instructions are enabled
@@ -116,6 +120,21 @@ Indicates if Student Instructions are enabled
 
 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.
@@ -142,6 +161,26 @@ 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
 
+## `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
+
+### `rowTitles` (number)
+
+Indicates the max dimension for images in row labels
+
 ## `ComplexFeedbackType` (object)
 
 Properties of the `ComplexFeedbackType` object:

package/lib/answer-grid.js

@@ -37,13 +37,13 @@ var _styles = require("@material-ui/core/styles");
 
 var _renderUi = require("@pie-lib/render-ui");
 
-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 AnswerGrid = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(AnswerGrid, _React$Component);
@@ -96,7 +96,6 @@ var AnswerGrid = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
 
       var _this$props2 = this.props,
-          allowFeedback = _this$props2.allowFeedback,
           classes = _this$props2.classes,
           showCorrect = _this$props2.showCorrect,
           headers = _this$props2.headers,
@@ -106,6 +105,7 @@ var AnswerGrid = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props2.disabled,
           view = _this$props2.view;
       var Tag = choiceMode === 'radio' ? _Radio["default"] : _Checkbox["default"];
+      var evaluate = disabled && !view;
 
       if (!rows || rows.length === 0) {
         return /*#__PURE__*/_react["default"].createElement("div", {
@@ -120,11 +120,11 @@ var AnswerGrid = /*#__PURE__*/function (_React$Component) {
         className: classes.controlsContainer
       }, /*#__PURE__*/_react["default"].createElement("table", {
         className: classes.table
-      }, /*#__PURE__*/_react["default"].createElement("colgroup", null, headers.map(function (header, idx) {
+      }, /*#__PURE__*/_react["default"].createElement("colgroup", null, (headers || []).map(function (header, idx) {
         return /*#__PURE__*/_react["default"].createElement("col", {
           key: "col-".concat(idx)
         });
-      })), /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, headers.map(function (header, idx) {
+      })), /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, (headers || []).map(function (header, idx) {
         return /*#__PURE__*/_react["default"].createElement("th", {
           className: classes.rowHeader,
           key: "th-".concat(idx),
@@ -136,7 +136,7 @@ var AnswerGrid = /*#__PURE__*/function (_React$Component) {
             __html: header
           }
         }));
-      }))), rows.map(function (row, idx) {
+      }))), (rows || []).map(function (row, idx) {
         return /*#__PURE__*/_react["default"].createElement("tbody", {
           key: "row-".concat(idx),
           role: "group"
@@ -150,7 +150,7 @@ var AnswerGrid = /*#__PURE__*/function (_React$Component) {
           dangerouslySetInnerHTML: {
             __html: row.title
           }
-        })), answers[row.id].map(function (rowItem, answerIndex) {
+        })), (answers[row.id] || []).map(function (rowItem, answerIndex) {
           var _cx2;
 
           return /*#__PURE__*/_react["default"].createElement("td", {
@@ -160,7 +160,7 @@ var AnswerGrid = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/_react["default"].createElement("div", {
             className: classes.rowItem
           }, /*#__PURE__*/_react["default"].createElement(Tag, {
-            className: (0, _classnames["default"])((_cx2 = {}, (0, _defineProperty2["default"])(_cx2, classes.correct, allowFeedback && (showCorrect && rowItem === true || disabled && !view && _this2.answerIsCorrect(row.id, rowItem, answerIndex))), (0, _defineProperty2["default"])(_cx2, classes.tag, true), (0, _defineProperty2["default"])(_cx2, classes.checked, rowItem === true), (0, _defineProperty2["default"])(_cx2, classes.tagDisabled, disabled), (0, _defineProperty2["default"])(_cx2, classes.incorrect, allowFeedback && disabled && !view && _this2.answerIsIncorrect(row.id, rowItem, answerIndex)), _cx2)),
+            className: (0, _classnames["default"])((_cx2 = {}, (0, _defineProperty2["default"])(_cx2, classes.correct, showCorrect && rowItem === true || evaluate && _this2.answerIsCorrect(row.id, rowItem, answerIndex)), (0, _defineProperty2["default"])(_cx2, classes.tag, true), (0, _defineProperty2["default"])(_cx2, classes.checked, rowItem === true && !evaluate), (0, _defineProperty2["default"])(_cx2, classes.tagDisabled, disabled), (0, _defineProperty2["default"])(_cx2, classes.incorrect, evaluate && _this2.answerIsIncorrect(row.id, rowItem, answerIndex)), _cx2)),
             disabled: disabled,
             onChange: _this2.onRowValueChange(row.id, answerIndex),
             checked: rowItem === true
@@ -174,7 +174,6 @@ var AnswerGrid = /*#__PURE__*/function (_React$Component) {
 
 exports.AnswerGrid = AnswerGrid;
 (0, _defineProperty2["default"])(AnswerGrid, "propTypes", {
-  allowFeedback: _propTypes["default"].bool.isRequired,
   classes: _propTypes["default"].object.isRequired,
   correctAnswers: _propTypes["default"].object,
   view: _propTypes["default"].bool.isRequired,
@@ -196,7 +195,7 @@ var styles = function styles(theme) {
       marginBottom: theme.spacing.unit
     },
     column: {
-      padding: '10px 20px 0'
+      padding: '5px 0'
     },
     correct: {
       color: "".concat(_renderUi.color.correct(), " !important")
@@ -215,7 +214,7 @@ var styles = function styles(theme) {
       padding: 0
     },
     rowItem: {
-      padding: '6px 12px',
+      padding: '12px',
       textAlign: 'center'
     },
     separator: {
@@ -224,6 +223,7 @@ var styles = function styles(theme) {
       width: '100%'
     },
     tag: {
+      padding: '6px',
       color: _renderUi.color.text(),
       '&:hover': {
         color: _renderUi.color.primaryLight()

package/lib/answer-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/answer-grid.jsx"],"names":["AnswerGrid","rowId","answerIndex","event","props","onAnswerChange","choiceMode","answers","newAnswers","i","length","target","checked","rowValue","rowValueIndex","correctAnswers","allowFeedback","classes","showCorrect","headers","rows","disabled","view","Tag","Radio","Checkbox","controlsContainer","empty","table","map","header","idx","rowHeader","rowItem","questionText","__html","row","separator","title","id","column","correct","answerIsCorrect","tag","tagDisabled","incorrect","answerIsIncorrect","onRowValueChange","React","Component","PropTypes","bool","isRequired","object","func","string","array","styles","theme","marginLeft","marginRight","marginTop","spacing","unit","marginBottom","padding","color","margin","rowContainer","display","alignItems","textAlign","border","borderTop","primaryLight","width","text","primary","cursor","pointerEvents","opacity","backgroundColor","background","borderCollapse","borderSpacing"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport Radio from '@material-ui/core/Radio';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nexport class AnswerGrid extends React.Component {\n  static propTypes = {\n    allowFeedback: PropTypes.bool.isRequired,\n    classes: PropTypes.object.isRequired,\n    correctAnswers: PropTypes.object,\n    view: PropTypes.bool.isRequired,\n    showCorrect: PropTypes.bool.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onAnswerChange: PropTypes.func.isRequired,\n    choiceMode: PropTypes.string.isRequired,\n    rows: PropTypes.array.isRequired,\n    headers: PropTypes.array.isRequired,\n    answers: PropTypes.object.isRequired\n  };\n\n  onRowValueChange = (rowId, answerIndex) => event => {\n    const { onAnswerChange, choiceMode, answers } = this.props;\n    const newAnswers = { ...answers };\n\n    if (choiceMode === 'radio') {\n      for (let i = 0; i < newAnswers[rowId].length; i++) {\n        newAnswers[rowId][i] = false;\n      }\n    }\n\n    newAnswers[rowId][answerIndex] = event.target.checked;\n\n    onAnswerChange(newAnswers);\n  };\n\n  answerIsCorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return correctAnswers[rowId][rowValueIndex] === rowValue && rowValue === true;\n  };\n\n  // needs a separate method because what isn't correct isn't necessarily incorrect\n  answerIsIncorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return correctAnswers[rowId][rowValueIndex] === true && rowValue === false\n      || correctAnswers[rowId][rowValueIndex] === false && rowValue === true;\n  };\n\n  render() {\n    const { allowFeedback, classes, showCorrect, headers, rows, choiceMode, answers, disabled, view } = this.props;\n    const Tag = choiceMode === 'radio' ? Radio : Checkbox;\n\n    if (!rows || rows.length === 0) {\n      return (\n        <div className={classes.controlsContainer}>\n          <Typography className={classes.empty} component=\"div\">\n            There are currently no questions to show.\n          </Typography>\n        </div>);\n    }\n\n    return (\n      <div className={classes.controlsContainer}>\n        <table className={classes.table}>\n          <colgroup>\n            {headers.map((header, idx) => (<col key={`col-${idx}`}/>))}\n          </colgroup>\n\n          <thead>\n          <tr>\n            {headers.map((header, idx) => (\n              <th\n                className={classes.rowHeader}\n                key={`th-${idx}`}\n                data-colno={`${idx}`}\n                scope=\"row\"\n              >\n                <div\n                  className={cx(classes.rowItem, { [classes.questionText]: idx === 0 })}\n                  dangerouslySetInnerHTML={{ __html: header }}\n                />\n              </th>\n            ))}\n          </tr>\n          </thead>\n\n          {rows.map((row, idx) => (\n            <tbody key={`row-${idx}`} role=\"group\">\n            <tr className={classes.separator}>\n              <td\n                key={`td-title-${idx}`}\n                data-colno={'0'}\n              >\n                <div\n                  className={cx(classes.rowItem, classes.questionText)}\n                  dangerouslySetInnerHTML={{ __html: row.title }}\n                />\n              </td>\n\n              {answers[row.id].map((rowItem, answerIndex) => (\n                <td\n                  key={`td-${idx}-${answerIndex}`}\n                  className={classes.column}\n                  data-colno={`${answerIndex + 1}`}\n                >\n                  <div className={classes.rowItem}>\n                    <Tag\n                      className={cx({\n                        [classes.correct]: allowFeedback && (\n                          (showCorrect && rowItem === true) ||\n                          (disabled && !view && this.answerIsCorrect(row.id, rowItem, answerIndex))\n                        ),\n                        [classes.tag]: true,\n                        [classes.checked]: rowItem === true,\n                        [classes.tagDisabled]: disabled,\n                        [classes.incorrect]: allowFeedback && disabled && !view && this.answerIsIncorrect(row.id, rowItem, answerIndex)\n                      })}\n                      disabled={disabled}\n                      onChange={this.onRowValueChange(row.id, answerIndex)}\n                      checked={rowItem === true}\n                    />\n                  </div>\n                </td>\n              ))}\n            </tr>\n            </tbody>\n          ))}\n        </table>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  controlsContainer: {\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    marginTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit\n  },\n  column: {\n    padding: '10px 20px 0',\n  },\n  correct: {\n    color: `${color.correct()} !important`\n  },\n  incorrect: {\n    color: `${color.incorrect()} !important`\n  },\n  empty: {\n    margin: theme.spacing.unit * 2\n  },\n  rowContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  rowHeader: {\n    padding: 0\n  },\n  rowItem: {\n    padding: '6px 12px',\n    textAlign: 'center'\n  },\n  separator: {\n    border: 0,\n    borderTop: `2.5px solid ${color.primaryLight()}`,\n    width: '100%'\n  },\n  tag: {\n    color: color.text(),\n    '&:hover': {\n      color: color.primaryLight()\n    }\n  },\n  checked: {\n    color: `${color.primary()} !important`\n  },\n  tagDisabled: {\n    color: color.disabled(),\n    cursor: 'not-allowed !important',\n    pointerEvents: 'initial !important',\n    opacity: 0.7,\n    '&:hover': {\n      color: color.disabled()\n    }\n  },\n  table: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n    marginBottom: 0\n  },\n  questionText: {\n    textAlign: 'left'\n  },\n});\n\nexport default withStyles(styles)(AnswerGrid);\n"],"file":"answer-grid.js"}
+{"version":3,"sources":["../src/answer-grid.jsx"],"names":["AnswerGrid","rowId","answerIndex","event","props","onAnswerChange","choiceMode","answers","newAnswers","i","length","target","checked","rowValue","rowValueIndex","correctAnswers","classes","showCorrect","headers","rows","disabled","view","Tag","Radio","Checkbox","evaluate","controlsContainer","empty","table","map","header","idx","rowHeader","rowItem","questionText","__html","row","separator","title","id","column","correct","answerIsCorrect","tag","tagDisabled","incorrect","answerIsIncorrect","onRowValueChange","React","Component","PropTypes","object","isRequired","bool","func","string","array","styles","theme","marginLeft","marginRight","marginTop","spacing","unit","marginBottom","padding","color","margin","rowContainer","display","alignItems","textAlign","border","borderTop","primaryLight","width","text","primary","cursor","pointerEvents","opacity","backgroundColor","background","borderCollapse","borderSpacing"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport Radio from '@material-ui/core/Radio';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nexport class AnswerGrid extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correctAnswers: PropTypes.object,\n    view: PropTypes.bool.isRequired,\n    showCorrect: PropTypes.bool.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onAnswerChange: PropTypes.func.isRequired,\n    choiceMode: PropTypes.string.isRequired,\n    rows: PropTypes.array.isRequired,\n    headers: PropTypes.array.isRequired,\n    answers: PropTypes.object.isRequired,\n  };\n\n  onRowValueChange = (rowId, answerIndex) => (event) => {\n    const { onAnswerChange, choiceMode, answers } = this.props;\n    const newAnswers = { ...answers };\n\n    if (choiceMode === 'radio') {\n      for (let i = 0; i < newAnswers[rowId].length; i++) {\n        newAnswers[rowId][i] = false;\n      }\n    }\n\n    newAnswers[rowId][answerIndex] = event.target.checked;\n\n    onAnswerChange(newAnswers);\n  };\n\n  answerIsCorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return correctAnswers[rowId][rowValueIndex] === rowValue && rowValue === true;\n  };\n\n  // needs a separate method because what isn't correct isn't necessarily incorrect\n  answerIsIncorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return (\n      (correctAnswers[rowId][rowValueIndex] === true && rowValue === false) ||\n      (correctAnswers[rowId][rowValueIndex] === false && rowValue === true)\n    );\n  };\n\n  render() {\n    const { classes, showCorrect, headers, rows, choiceMode, answers, disabled, view } = this.props;\n    const Tag = choiceMode === 'radio' ? Radio : Checkbox;\n    const evaluate = disabled && !view;\n\n    if (!rows || rows.length === 0) {\n      return (\n        <div className={classes.controlsContainer}>\n          <Typography className={classes.empty} component=\"div\">\n            There are currently no questions to show.\n          </Typography>\n        </div>\n      );\n    }\n\n    return (\n      <div className={classes.controlsContainer}>\n        <table className={classes.table}>\n          <colgroup>\n            {(headers || []).map((header, idx) => (\n              <col key={`col-${idx}`} />\n            ))}\n          </colgroup>\n\n          <thead>\n            <tr>\n              {(headers || []).map((header, idx) => (\n                <th className={classes.rowHeader} key={`th-${idx}`} data-colno={`${idx}`} scope=\"row\">\n                  <div\n                    className={cx(classes.rowItem, { [classes.questionText]: idx === 0 })}\n                    dangerouslySetInnerHTML={{ __html: header }}\n                  />\n                </th>\n              ))}\n            </tr>\n          </thead>\n\n          {(rows || []).map((row, idx) => (\n            <tbody key={`row-${idx}`} role=\"group\">\n              <tr className={classes.separator}>\n                <td key={`td-title-${idx}`} data-colno={'0'}>\n                  <div\n                    className={cx(classes.rowItem, classes.questionText)}\n                    dangerouslySetInnerHTML={{ __html: row.title }}\n                  />\n                </td>\n\n                {(answers[row.id] || []).map((rowItem, answerIndex) => (\n                  <td key={`td-${idx}-${answerIndex}`} className={classes.column} data-colno={`${answerIndex + 1}`}>\n                    <div className={classes.rowItem}>\n                      <Tag\n                        className={cx({\n                          [classes.correct]:\n                            (showCorrect && rowItem === true) ||\n                            (evaluate && this.answerIsCorrect(row.id, rowItem, answerIndex)),\n                          [classes.tag]: true,\n                          [classes.checked]: rowItem === true && !evaluate,\n                          [classes.tagDisabled]: disabled,\n                          [classes.incorrect]: evaluate && this.answerIsIncorrect(row.id, rowItem, answerIndex),\n                        })}\n                        disabled={disabled}\n                        onChange={this.onRowValueChange(row.id, answerIndex)}\n                        checked={rowItem === true}\n                      />\n                    </div>\n                  </td>\n                ))}\n              </tr>\n            </tbody>\n          ))}\n        </table>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  controlsContainer: {\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    marginTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit,\n  },\n  column: {\n    padding: '5px 0',\n  },\n  correct: {\n    color: `${color.correct()} !important`,\n  },\n  incorrect: {\n    color: `${color.incorrect()} !important`,\n  },\n  empty: {\n    margin: theme.spacing.unit * 2,\n  },\n  rowContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  rowHeader: {\n    padding: 0,\n  },\n  rowItem: {\n    padding: '12px',\n    textAlign: 'center',\n  },\n  separator: {\n    border: 0,\n    borderTop: `2.5px solid ${color.primaryLight()}`,\n    width: '100%',\n  },\n  tag: {\n    padding: '6px',\n    color: color.text(),\n    '&:hover': {\n      color: color.primaryLight(),\n    },\n  },\n  checked: {\n    color: `${color.primary()} !important`,\n  },\n  tagDisabled: {\n    color: color.disabled(),\n    cursor: 'not-allowed !important',\n    pointerEvents: 'initial !important',\n    opacity: 0.7,\n    '&:hover': {\n      color: color.disabled(),\n    },\n  },\n  table: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n    marginBottom: 0,\n  },\n  questionText: {\n    textAlign: 'left',\n  },\n});\n\nexport default withStyles(styles)(AnswerGrid);\n"],"file":"answer-grid.js"}

package/lib/index.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "Component", {
     return _main["default"];
   }
 });
-exports["default"] = exports.isComplete = void 0;
+exports.isComplete = exports["default"] = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -39,7 +39,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 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 isComplete = function isComplete(session, model) {
   var rows = (0, _get["default"])(model, 'config.rows');
@@ -78,6 +78,9 @@ var Match = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       this._session = s;
 
@@ -89,6 +92,8 @@ var Match = /*#__PURE__*/function (_HTMLElement) {
       this._session.answers = s.answers;
       var complete = isComplete(this._session, this._model);
       this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), complete));
+
+      this._render();
     }
   }, {
     key: "connectedCallback",

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["isComplete","session","model","rows","ids","map","r","id","reduce","acc","arr","answers","hasChoice","Array","isArray","includes","Match","m","_model","_render","s","_session","complete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","el","React","createElement","Main","onSessionChange","sessionChanged","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAIO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,OAAD,EAAUC,KAAV,EAAoB;AAC5C,MAAMC,IAAI,GAAG,qBAAID,KAAJ,EAAW,aAAX,CAAb;AACA,MAAME,GAAG,GAAGD,IAAI,CAACE,GAAL,CAAS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACC,EAAN;AAAA,GAAV,CAAZ;AACA,SAAOH,GAAG,CAACI,MAAJ,CAAW,UAACC,GAAD,EAAMF,EAAN,EAAa;AAC7B,QAAI,CAACE,GAAL,EAAU;AACR,aAAO,KAAP;AACD;;AACD,QAAMC,GAAG,GAAGT,OAAO,CAACU,OAAR,IAAmBV,OAAO,CAACU,OAAR,CAAgBJ,EAAhB,CAA/B;AACA,QAAMK,SAAS,GAAGC,KAAK,CAACC,OAAN,CAAcJ,GAAd,KAAsBA,GAAG,CAACK,QAAJ,CAAa,IAAb,CAAxC;AACA,WAAOH,SAAS,IAAIH,GAApB;AACD,GAPM,EAOJ,IAPI,CAAP;AAQD,CAXM;;;;IAacO,K;;;;;AACnB,mBAAc;AAAA;AAAA;AAEb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;;AACA,WAAKE,OAAL;AACD;;;SAED,aAAYC,CAAZ,EAAe;AACb,WAAKC,QAAL,GAAgBD,CAAhB;;AACA,WAAKD,OAAL;AACD;;;WAED,wBAAeC,CAAf,EAAkB;AAChB,WAAKC,QAAL,CAAcV,OAAd,GAAwBS,CAAC,CAACT,OAA1B;AACA,UAAMW,QAAQ,GAAGtB,UAAU,CAAC,KAAKqB,QAAN,EAAgB,KAAKH,MAArB,CAA3B;AACA,WAAKK,aAAL,CACE,IAAIC,oCAAJ,CAAwB,KAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoDJ,QAApD,CADF;AAGD;;;WAED,6BAAoB;AAClB,WAAKH,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,CAAC,KAAKD,MAAN,IAAgB,CAAC,KAAKG,QAA1B,EAAoC;AAClC;AACD;;AAED,UAAMM,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnC5B,QAAAA,KAAK,EAAE,KAAKgB,MADuB;AAEnCjB,QAAAA,OAAO,EAAE,KAAKoB,QAFqB;AAGnCU,QAAAA,eAAe,EAAE,KAAKC,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAHkB,OAA1B,CAAX;;AAMAC,2BAASC,MAAT,CAAgBR,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,uCAAW,KAAX;AACD,OAFD;AAGD;;;kDAzCgCS,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Main from './main';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nimport get from 'lodash/get';\n\nexport { Main as Component };\n\nexport const isComplete = (session, model) => {\n  const rows = get(model, 'config.rows');\n  const ids = rows.map(r => r.id);\n  return ids.reduce((acc, id) => {\n    if (!acc) {\n      return false;\n    }\n    const arr = session.answers && session.answers[id];\n    const hasChoice = Array.isArray(arr) && arr.includes(true);\n    return hasChoice && acc;\n  }, true);\n};\n\nexport default class Match 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  sessionChanged(s) {\n    this._session.answers = s.answers;\n    const complete = isComplete(this._session, this._model);\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), complete)\n    );\n  }\n\n  connectedCallback() {\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      onSessionChange: this.sessionChanged.bind(this)\n    });\n\n    ReactDOM.render(el, this, () => {\n      renderMath(this);\n    });\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["isComplete","session","model","rows","ids","map","r","id","reduce","acc","arr","answers","hasChoice","Array","isArray","includes","Match","m","_model","_render","_session","s","complete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","el","React","createElement","Main","onSessionChange","sessionChanged","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAIO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,OAAD,EAAUC,KAAV,EAAoB;AAC5C,MAAMC,IAAI,GAAG,qBAAID,KAAJ,EAAW,aAAX,CAAb;AACA,MAAME,GAAG,GAAGD,IAAI,CAACE,GAAL,CAAS,UAACC,CAAD;AAAA,WAAOA,CAAC,CAACC,EAAT;AAAA,GAAT,CAAZ;AACA,SAAOH,GAAG,CAACI,MAAJ,CAAW,UAACC,GAAD,EAAMF,EAAN,EAAa;AAC7B,QAAI,CAACE,GAAL,EAAU;AACR,aAAO,KAAP;AACD;;AACD,QAAMC,GAAG,GAAGT,OAAO,CAACU,OAAR,IAAmBV,OAAO,CAACU,OAAR,CAAgBJ,EAAhB,CAA/B;AACA,QAAMK,SAAS,GAAGC,KAAK,CAACC,OAAN,CAAcJ,GAAd,KAAsBA,GAAG,CAACK,QAAJ,CAAa,IAAb,CAAxC;AACA,WAAOH,SAAS,IAAIH,GAApB;AACD,GAPM,EAOJ,IAPI,CAAP;AAQD,CAXM;;;;IAacO,K;;;;;AACnB,mBAAc;AAAA;AAAA;AAEb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;;AACA,WAAKE,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKC,QAAZ;AACD,K;SAPD,aAAYC,CAAZ,EAAe;AACb,WAAKD,QAAL,GAAgBC,CAAhB;;AACA,WAAKF,OAAL;AACD;;;WAMD,wBAAeE,CAAf,EAAkB;AAChB,WAAKD,QAAL,CAAcT,OAAd,GAAwBU,CAAC,CAACV,OAA1B;AACA,UAAMW,QAAQ,GAAGtB,UAAU,CAAC,KAAKoB,QAAN,EAAgB,KAAKF,MAArB,CAA3B;AAEA,WAAKK,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,KAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoDJ,QAApD,CAAnB;;AAEA,WAAKH,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,CAAC,KAAKD,MAAN,IAAgB,CAAC,KAAKE,QAA1B,EAAoC;AAClC;AACD;;AAED,UAAMO,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnC5B,QAAAA,KAAK,EAAE,KAAKgB,MADuB;AAEnCjB,QAAAA,OAAO,EAAE,KAAKmB,QAFqB;AAGnCW,QAAAA,eAAe,EAAE,KAAKC,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAHkB,OAA1B,CAAX;;AAMAC,2BAASC,MAAT,CAAgBR,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,uCAAW,KAAX;AACD,OAFD;AAGD;;;kDA9CgCS,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Main from './main';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport get from 'lodash/get';\n\nexport { Main as Component };\n\nexport const isComplete = (session, model) => {\n  const rows = get(model, 'config.rows');\n  const ids = rows.map((r) => r.id);\n  return ids.reduce((acc, id) => {\n    if (!acc) {\n      return false;\n    }\n    const arr = session.answers && session.answers[id];\n    const hasChoice = Array.isArray(arr) && arr.includes(true);\n    return hasChoice && acc;\n  }, true);\n};\n\nexport default class Match 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  sessionChanged(s) {\n    this._session.answers = s.answers;\n    const complete = isComplete(this._session, this._model);\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n\n    this._render();\n  }\n\n  connectedCallback() {\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      onSessionChange: this.sessionChanged.bind(this),\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 _answerGrid = _interopRequireDefault(require("./answer-grid"));
 
 var _styles = require("@material-ui/core/styles");
 
-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);
@@ -136,6 +136,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       var _this$state = this.state,
           showCorrect = _this$state.showCorrect,
           session = _this$state.session;
+      var _model$correctness = model.correctness,
+          correctness = _model$correctness === void 0 ? {} : _model$correctness;
+      var showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.mainContainer
       }, model.teacherInstructions && (0, _renderUi.hasText)(model.teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
@@ -144,25 +147,20 @@ var Main = /*#__PURE__*/function (_React$Component) {
           visible: 'Hide Teacher Instructions'
         },
         className: classes.collapsible
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: model.teacherInstructions
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: model.teacherInstructions
       })), model.prompt && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.prompt,
-        dangerouslySetInnerHTML: {
-          __html: model.prompt
-        }
-      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.prompt
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: model.prompt
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.main
       }, /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        className: classes.toggle,
-        show: model.correctness && model.correctness.correctness && model.correctness.correctness !== 'correct',
+        show: showCorrectAnswerToggle,
         toggled: showCorrect,
         onToggle: this.toggleShowCorrect
-      }), /*#__PURE__*/_react["default"].createElement(_answerGrid["default"], {
+      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_answerGrid["default"], {
         showCorrect: showCorrect,
-        allowFeedback: model.allowFeedback,
         correctAnswers: model.correctResponse,
         disabled: model.disabled,
         view: model.view,
@@ -177,10 +175,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
           visible: 'Hide Rationale'
         },
         className: classes.collapsible
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: model.rationale
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: model.rationale
       })), model.feedback && /*#__PURE__*/_react["default"].createElement(_renderUi.Feedback, {
         correctness: model.correctness.correctness,
         feedback: model.feedback