@pie-element/inline-dropdown 3.8.3-next.133 → 3.8.3-next.1335

package/docs/config-schema.json

@@ -83,6 +83,38 @@
         }
       }
     },
+    "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"
+        }
+      }
+    },
+    "choiceRationale": {
+      "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"
+        }
+      }
+    },
     "scoringType": {
       "title": "ConfigureProp",
       "type": "object",
@@ -131,6 +163,74 @@
         }
       }
     },
+    "maxResponseAreas": {
+      "description": "Maximum number of response areas",
+      "type": "number",
+      "title": "maxResponseAreas"
+    },
+    "maxResponseAreaChoices": {
+      "description": "Maximum number of choices per response area",
+      "type": "number",
+      "title": "maxResponseAreaChoices"
+    },
+    "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,
@@ -166,6 +266,27 @@
           "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

@@ -62,6 +62,30 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `spellCheck` (object)
+
+Properties of the `spellCheck` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `choiceRationale` (object)
+
+Properties of the `choiceRationale` 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
+
 # `scoringType` (object)
 
 Properties of the `scoringType` object:
@@ -98,6 +122,58 @@ 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
 
+# `maxResponseAreas` (number)
+
+Maximum number of response areas
+
+# `maxResponseAreaChoices` (number)
+
+Maximum number of choices per response area
+
+# `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
@@ -132,4 +208,20 @@ 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

package/docs/demo/generate.js

@@ -13,55 +13,66 @@ exports.model = (id, element) => ({
       {
         label: 'cow ',
         value: '0',
-        correct: true
+        correct: true,
+        rationale: 'rationale cow'
       },
       {
         label: 'dog ',
         value: '1',
-        correct: false
+        correct: false,
+        rationale: 'rationale dog'
       },
       {
         label: 'cat ',
         value: '2',
-        correct: false
+        correct: false,
+        rationale: 'rationale car'
       }
     ],
     '1': [
       {
         label: 'over ',
         value: '0',
-        correct: true
+        correct: true,
+        rationale: 'rationale over'
       },
       {
         label: 'under ',
         value: '1',
-        correct: false
+        correct: false,
+        rationale: 'rationale under'
       },
       {
         label: 'across ',
         value: '2',
-        correct: false
+        correct: false,
+        rationale: 'rationale across'
       }
     ],
     '2': [
       {
         label: 'moon ',
         value: '0',
-        correct: true
+        correct: true,
+        rationale: 'rationale moon'
       },
       {
         label: 'sun',
         value: '2',
-        correct: false
+        correct: false,
+        rationale: 'rationale sun'
       },
       {
         label: 'house ',
         value: '3',
-        correct: false
+        correct: false,
+        rationale: 'rationale house'
       }
     ]
   },
   alternateResponse: {
     '2': ['2']
-  }
+  },
+  choiceRationaleEnabled: false,
+  rubricEnabled: false
 });

package/docs/pie-schema.json

@@ -28,6 +28,11 @@
                 "description": "Indicates if choice is correct",
                 "type": "boolean",
                 "title": "correct"
+              },
+              "rationale": {
+                "description": "Rationale for the choice",
+                "type": "string",
+                "title": "rationale"
               }
             },
             "required": [
@@ -107,6 +112,16 @@
       "type": "boolean",
       "title": "rationaleEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
+    "choiceRationaleEnabled": {
+      "description": "Indicates if Choice Level Rationales are enabled",
+      "type": "boolean",
+      "title": "choiceRationaleEnabled"
+    },
     "studentInstructionsEnabled": {
       "description": "Indicates if Student Instructions are enabled",
       "type": "boolean",
@@ -117,6 +132,11 @@
       "type": "boolean",
       "title": "teacherInstructionsEnabled"
     },
+    "displayType": {
+      "description": "Indicates display type for the container of the pie-ui element",
+      "type": "string",
+      "title": "displayType"
+    },
     "toolbarEditorPosition": {
       "description": "Indicates the editor's toolbar position which can be 'bottom' or 'top'",
       "default": ": 'bottom'",
@@ -127,6 +147,11 @@
       "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",
@@ -140,7 +165,9 @@
   },
   "required": [
     "alternateResponses",
+    "choiceRationaleEnabled",
     "choices",
+    "displayType",
     "element",
     "id",
     "lockChoiceOrder",
@@ -148,7 +175,9 @@
     "partialScoring",
     "rationale",
     "rationaleEnabled",
+    "rubricEnabled",
     "scoringType",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
@@ -169,6 +198,27 @@
         }
       }
     },
+    "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"
+        }
+      }
+    },
     "Choice": {
       "title": "Choice",
       "type": "object",
@@ -187,6 +237,11 @@
           "description": "Indicates if choice is correct",
           "type": "boolean",
           "title": "correct"
+        },
+        "rationale": {
+          "description": "Rationale for the choice",
+          "type": "string",
+          "title": "rationale"
         }
       },
       "required": [

package/docs/pie-schema.json.md

@@ -56,6 +56,14 @@ Indicates teacher instructions
 
 Indicates if Rationale are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
+# `choiceRationaleEnabled` (boolean, required)
+
+Indicates if Choice Level Rationales are enabled
+
 # `studentInstructionsEnabled` (boolean, required)
 
 Indicates if Student Instructions are enabled
@@ -64,6 +72,10 @@ Indicates if Student Instructions are enabled
 
 Indicates if Teacher Instructions are enabled
 
+# `displayType` (string, required)
+
+Indicates display type for the container of the pie-ui element
+
 # `toolbarEditorPosition` (string, enum)
 
 Indicates the editor's toolbar position which can be 'bottom' or 'top'
@@ -75,6 +87,10 @@ This element must be one of the following enum values:
 
 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.
@@ -101,6 +117,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
 
+## `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
+
 ## `Choice` (object)
 
 Properties of the `Choice` object:
@@ -115,4 +147,8 @@ The label of the choice
 
 ### `correct` (boolean)
 
-Indicates if choice is correct
+Indicates if choice is correct
+
+### `rationale` (string)
+
+Rationale for the choice

package/lib/index.js

@@ -35,7 +35,7 @@ var _inlineDropdown = _interopRequireDefault(require("./inline-dropdown"));
 
 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 RootInlineDropdown = /*#__PURE__*/function (_HTMLElement) {
   (0, _inherits2["default"])(RootInlineDropdown, _HTMLElement);
@@ -54,6 +54,7 @@ var RootInlineDropdown = /*#__PURE__*/function (_HTMLElement) {
           rationale: _this._model.rationale,
           teacherInstructions: _this._model.teacherInstructions,
           disabled: _this._model.disabled,
+          displayType: _this._model.displayType,
           markup: _this._model.markup,
           mode: _this._model.mode,
           choices: _this._model.choices,

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["RootInlineDropdown","_model","_session","elem","React","createElement","InlineDropdown","prompt","rationale","teacherInstructions","disabled","markup","mode","choices","value","feedback","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","dispatchChangedEvent","_render","m","ModelSetEvent","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;IAEqBA,kB;;;;;AACnB,gCAAc;AAAA;;AAAA;AACZ;AADY,gGA4BJ,YAAM;AACd,UAAI,MAAKC,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIC,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,0BAApB,EAAoC;AAC7CC,UAAAA,MAAM,EAAE,MAAKN,MAAL,CAAYM,MADyB;AAE7CC,UAAAA,SAAS,EAAE,MAAKP,MAAL,CAAYO,SAFsB;AAG7CC,UAAAA,mBAAmB,EAAE,MAAKR,MAAL,CAAYQ,mBAHY;AAI7CC,UAAAA,QAAQ,EAAE,MAAKT,MAAL,CAAYS,QAJuB;AAK7CC,UAAAA,MAAM,EAAE,MAAKV,MAAL,CAAYU,MALyB;AAM7CC,UAAAA,IAAI,EAAE,MAAKX,MAAL,CAAYW,IAN2B;AAO7CC,UAAAA,OAAO,EAAE,MAAKZ,MAAL,CAAYY,OAPwB;AAQ7CC,UAAAA,KAAK,EAAE,MAAKZ,QAAL,CAAcY,KARwB;AAS7CC,UAAAA,QAAQ,EAAE,MAAKd,MAAL,CAAYc,QATuB;AAU7CC,UAAAA,QAAQ,EAAE,MAAKC;AAV8B,SAApC,CAAX;;AAYAC,6BAASC,MAAT,CAAgBhB,IAAhB,kDAA4B,YAAM;AAChC;AACD,SAFD;AAGD;AACF,KA9Ca;AAAA,6GAgDS,YAAM;AAC3B,YAAKiB,aAAL,CACE,IAAIC,oCAAJ,CACE,MAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,MAAKC,OAAL,IAAgB,CAAC,CAAC,MAAKA,OAAL,CAAaV,KAFjC,CADF;AAMD,KAvDa;AAAA,sGAyDE,UAAAA,KAAK,EAAI;AACvB,YAAKU,OAAL,CAAaV,KAAb,GAAqBA,KAArB;;AACA,YAAKW,oBAAL;;AACA,YAAKC,OAAL;AACD,KA7Da;AAEZ,UAAKzB,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SAED,aAAUyB,CAAV,EAAa;AACX,WAAK1B,MAAL,GAAc0B,CAAd;AACA,WAAKP,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,OAAL,IAAgB,CAAC,CAAC,KAAKA,OAAL,CAAaV,KAFjC,EAGE,CAAC,CAAC,KAAKb,MAHT,CADF;;AAQA,WAAKyB,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKxB,QAAZ;AACD,K;SAPD,aAAY2B,CAAZ,EAAe;AACb,WAAK3B,QAAL,GAAgB2B,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WAyCD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;kDAlE6CI,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n  ModelSetEvent,\n  SessionChangedEvent\n} from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport InlineDropdown from './inline-dropdown';\n\nexport default class RootInlineDropdown extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.session && !!this.session.value,\n        !!this._model\n      )\n    );\n\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  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(InlineDropdown, {\n        prompt: this._model.prompt,\n        rationale: this._model.rationale,\n        teacherInstructions: this._model.teacherInstructions,\n        disabled: this._model.disabled,\n        markup: this._model.markup,\n        mode: this._model.mode,\n        choices: this._model.choices,\n        value: this._session.value,\n        feedback: this._model.feedback,\n        onChange: this.changeSession\n      });\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(\n      new SessionChangedEvent(\n        this.tagName.toLowerCase(),\n        this.session && !!this.session.value\n      )\n    );\n  };\n\n  changeSession = value => {\n    this.session.value = value;\n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this._render();\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["RootInlineDropdown","_model","_session","elem","React","createElement","InlineDropdown","prompt","rationale","teacherInstructions","disabled","displayType","markup","mode","choices","value","feedback","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","session","dispatchChangedEvent","_render","m","ModelSetEvent","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;IAEqBA,kB;;;;;AACnB,gCAAc;AAAA;;AAAA;AACZ;AADY,gGA4BJ,YAAM;AACd,UAAI,MAAKC,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIC,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,0BAApB,EAAoC;AAC7CC,UAAAA,MAAM,EAAE,MAAKN,MAAL,CAAYM,MADyB;AAE7CC,UAAAA,SAAS,EAAE,MAAKP,MAAL,CAAYO,SAFsB;AAG7CC,UAAAA,mBAAmB,EAAE,MAAKR,MAAL,CAAYQ,mBAHY;AAI7CC,UAAAA,QAAQ,EAAE,MAAKT,MAAL,CAAYS,QAJuB;AAK7CC,UAAAA,WAAW,EAAE,MAAKV,MAAL,CAAYU,WALoB;AAM7CC,UAAAA,MAAM,EAAE,MAAKX,MAAL,CAAYW,MANyB;AAO7CC,UAAAA,IAAI,EAAE,MAAKZ,MAAL,CAAYY,IAP2B;AAQ7CC,UAAAA,OAAO,EAAE,MAAKb,MAAL,CAAYa,OARwB;AAS7CC,UAAAA,KAAK,EAAE,MAAKb,QAAL,CAAca,KATwB;AAU7CC,UAAAA,QAAQ,EAAE,MAAKf,MAAL,CAAYe,QAVuB;AAW7CC,UAAAA,QAAQ,EAAE,MAAKC;AAX8B,SAApC,CAAX;;AAcAC,6BAASC,MAAT,CAAgBjB,IAAhB,kDAA4B,YAAM;AAChC;AACD,SAFD;AAGD;AACF,KAhDa;AAAA,6GAkDS,YAAM;AAC3B,YAAKkB,aAAL,CACE,IAAIC,oCAAJ,CACE,MAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,MAAKC,OAAL,IAAgB,CAAC,CAAC,MAAKA,OAAL,CAAaV,KAFjC,CADF;AAMD,KAzDa;AAAA,sGA2DE,UAAAA,KAAK,EAAI;AACvB,YAAKU,OAAL,CAAaV,KAAb,GAAqBA,KAArB;;AACA,YAAKW,oBAAL;;AACA,YAAKC,OAAL;AACD,KA/Da;AAEZ,UAAK1B,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SAED,aAAU0B,CAAV,EAAa;AACX,WAAK3B,MAAL,GAAc2B,CAAd;AACA,WAAKP,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,OAAL,IAAgB,CAAC,CAAC,KAAKA,OAAL,CAAaV,KAFjC,EAGE,CAAC,CAAC,KAAKd,MAHT,CADF;;AAQA,WAAK0B,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKzB,QAAZ;AACD,K;SAPD,aAAY4B,CAAZ,EAAe;AACb,WAAK5B,QAAL,GAAgB4B,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WA2CD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;kDApE6CI,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n  ModelSetEvent,\n  SessionChangedEvent\n} from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport InlineDropdown from './inline-dropdown'; \n\nexport default class RootInlineDropdown extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.session && !!this.session.value,\n        !!this._model\n      )\n    );\n\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  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(InlineDropdown, {\n        prompt: this._model.prompt,\n        rationale: this._model.rationale,\n        teacherInstructions: this._model.teacherInstructions,\n        disabled: this._model.disabled,\n        displayType: this._model.displayType,\n        markup: this._model.markup,\n        mode: this._model.mode,\n        choices: this._model.choices,\n        value: this._session.value,\n        feedback: this._model.feedback,\n        onChange: this.changeSession\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(\n      new SessionChangedEvent(\n        this.tagName.toLowerCase(),\n        this.session && !!this.session.value\n      )\n    );\n  };\n\n  changeSession = value => {\n    this.session.value = value;\n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this._render();\n  }\n}\n"],"file":"index.js"}

package/lib/inline-dropdown.js

@@ -41,9 +41,11 @@ var _mathRendering = require("@pie-lib/math-rendering");
 
 var _styles = require("@material-ui/core/styles");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 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 InlineDropdown = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(InlineDropdown, _React$Component);
@@ -97,39 +99,70 @@ var InlineDropdown = /*#__PURE__*/function (_React$Component) {
           prompt = _this$props.prompt,
           mode = _this$props.mode,
           rationale = _this$props.rationale,
-          teacherInstructions = _this$props.teacherInstructions;
+          teacherInstructions = _this$props.teacherInstructions,
+          choices = _this$props.choices,
+          displayType = _this$props.displayType;
       var showCorrectAnswerToggle = mode === 'evaluate';
+      var choiceRationalesHaveText = false;
+      var choiceRationales = (Object.keys(choices) || []).map(function (key) {
+        return (choices[key] || []).reduce(function (acc, currentValue) {
+          if (currentValue.rationale && (0, _renderUi.hasText)(currentValue.rationale)) {
+            choiceRationalesHaveText = true;
+            acc.push(currentValue);
+          }
+
+          return acc;
+        }, []);
+      });
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.mainContainer
+        className: classes.mainContainer,
+        style: {
+          display: "".concat(displayType)
+        }
       }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
       })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
         show: showCorrectAnswerToggle,
         toggled: showCorrectAnswer,
         onToggle: this.toggleShowCorrect
-      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), prompt && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
-      }), /*#__PURE__*/_react["default"].createElement("br", null)), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), prompt && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: prompt
+      }), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_maskMarkup.InlineDropdown, (0, _extends2["default"])({}, this.props, {
+        showCorrectAnswer: showCorrectAnswer
+      })), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Rationale',
           visible: 'Hide Rationale'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: rationale
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: rationale
+      })), choiceRationalesHaveText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        labels: {
+          hidden: 'Show Rationale for choices',
+          visible: 'Hide Rationale for choices'
         }
-      })), /*#__PURE__*/_react["default"].createElement(_maskMarkup.InlineDropdown, (0, _extends2["default"])({}, this.props, {
-        showCorrectAnswer: showCorrectAnswer
-      })));
+      }, /*#__PURE__*/_react["default"].createElement("div", null, choiceRationales.map(function (choices, index) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: index
+        }, choices && choices.length > 0 && choices.map(function (choice) {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.choiceRationale,
+            key: choice.label
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: (0, _classnames["default"])(classes.choiceRationaleLabel, choice.correct ? 'correct' : 'incorrect'),
+            dangerouslySetInnerHTML: {
+              __html: "".concat(choice.label, ": ")
+            }
+          }), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+            prompt: choice.rationale
+          }));
+        }), choices && choices.length > 0 && /*#__PURE__*/_react["default"].createElement("br", null));
+      })))));
     }
   }]);
   return InlineDropdown;
@@ -142,6 +175,7 @@ exports.InlineDropdown = InlineDropdown;
   disabled: _propTypes["default"].bool,
   markup: _propTypes["default"].string,
   mode: _propTypes["default"].string,
+  displayType: _propTypes["default"].string,
   rationale: _propTypes["default"].string,
   teacherInstructions: _propTypes["default"].string,
   choices: _propTypes["default"].object,
@@ -159,6 +193,19 @@ var styles = function styles(theme) {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
       padding: theme.spacing.unit
+    },
+    choiceRationale: {
+      display: 'flex',
+      whiteSpace: 'break-spaces'
+    },
+    choiceRationaleLabel: {
+      display: 'flex',
+      '&.correct': {
+        color: _renderUi.color.correct()
+      },
+      '&.incorrect': {
+        color: _renderUi.color.incorrect()
+      }
     }
   };
 };