@pie-element/image-cloze-association 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@5.3.0...@pie-element/image-cloze-association@5.4.0) (2024-01-09)
+
+
+### Features
+
+* **image-cloze-association:** add conf to determine the position of the pool PD-3103 ([bf020fa](https://github.com/pie-framework/pie-elements/commit/bf020fa10fea4fe3083b3a287c2fafdcfccd84ba))
+* **image-cloze-association:** add styling for response container PD-3103 ([4cb7165](https://github.com/pie-framework/pie-elements/commit/4cb716571e85a4ccac2f3d5b1575b4344f78db3e))
+* **image-cloze-association:** delete console log PD-3103 ([9f43235](https://github.com/pie-framework/pie-elements/commit/9f4323591b77ab0af38ea12ff755dcc9da9150f2))
+* **image-cloze-association:** delete console log PD-3103 ([ee2c9d5](https://github.com/pie-framework/pie-elements/commit/ee2c9d56e0da71b66ea8325e031b771fc67a4e38))
+
+
+
+
+
 # [5.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@5.2.2...@pie-element/image-cloze-association@5.3.0) (2024-01-08)
 
 

package/docs/demo/generate.js

@@ -43,6 +43,7 @@ exports.model = (id, element) => ({
   metadatadistractor_rationale:
     '<p>A correct response is shown below.&#160;This response best shows how this decision will likely affect the number tire pieces collected.<img alt="image 03de38019abe41b1bc95d1199658327f" id="03de38019abe41b1bc95d1199658327f" src="https://localhost:8443/ia/image/03de38019abe41b1bc95d1199658327f" /></p>',
   ui_style: {
+   possibility_list_position: 'bottom',
     // this is not used
     fontsize: 'small',
   },

package/docs/pie-schema.json

@@ -192,6 +192,30 @@
       "type": "string",
       "title": "language"
     },
+    "uiStyle": {
+      "description": "Indicates style options of the component\nSupported options: fontsize, possibilityListPosition (top, bottom, left, right)",
+      "type": "object",
+      "properties": {
+        "possibilityListPosition": {
+          "title": "ChoicesPosition",
+          "enum": [
+            "bottom",
+            "left",
+            "right",
+            "top"
+          ],
+          "type": "string"
+        },
+        "fontsize": {
+          "type": "string",
+          "title": "fontsize"
+        }
+      },
+      "required": [
+        "fontsize"
+      ],
+      "title": "uiStyle"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -423,6 +447,16 @@
           "title": "value"
         }
       }
+    },
+    "ChoicesPosition": {
+      "title": "ChoicesPosition",
+      "enum": [
+        "bottom",
+        "left",
+        "right",
+        "top"
+      ],
+      "type": "string"
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/docs/pie-schema.json.md

@@ -154,6 +154,24 @@ Indicates if the possible responses have to be shuffled in the player
 Indicates the language of the component
 Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX
 
+# `uiStyle` (object)
+
+Indicates style options of the component
+Supported options: fontsize, possibilityListPosition (top, bottom, left, right)
+
+Properties of the `uiStyle` object:
+
+## `possibilityListPosition` (string, enum)
+
+This element must be one of the following enum values:
+
+* `bottom`
+* `left`
+* `right`
+* `top`
+
+## `fontsize` (string, required)
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -330,4 +348,6 @@ Properties of the `value` object:
 
 An array containing a string that is a img tag
 
-The object is an array with all elements of the type `string`.
+The object is an array with all elements of the type `string`.
+
+## `ChoicesPosition` (string)

package/lib/interactive-section.js

@@ -65,20 +65,56 @@ var InteractiveSection = /*#__PURE__*/function (_React$Component) {
 
       return classes[styleProp];
     }
+  }, {
+    key: "getPositionDirection",
+    value: function getPositionDirection(choicePosition) {
+      var flexDirection;
+
+      switch (choicePosition) {
+        case 'left':
+          flexDirection = 'row-reverse';
+          break;
+
+        case 'right':
+          flexDirection = 'row';
+          break;
+
+        case 'top':
+          flexDirection = 'column-reverse';
+          break;
+
+        default:
+          // bottom
+          flexDirection = 'column';
+          break;
+      }
+
+      return flexDirection;
+    }
   }, {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
           children = _this$props2.children,
-          responseCorrect = _this$props2.responseCorrect;
+          responseCorrect = _this$props2.responseCorrect,
+          uiStyle = _this$props2.uiStyle;
       var classname = this.getClassname();
+
+      var _ref = uiStyle || {},
+          _ref$possibilityListP = _ref.possibilityListPosition,
+          possibilityListPosition = _ref$possibilityListP === void 0 ? 'bottom' : _ref$possibilityListP;
+
+      var style = {
+        flexDirection: this.getPositionDirection(possibilityListPosition)
+      };
       var evaluationStyle = {
         display: 'flex',
         margin: '0 auto',
         marginTop: -14
       };
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classname
+        className: classname,
+        style: style
       }, /*#__PURE__*/_react["default"].createElement(_evaluationIcon["default"], {
         containerStyle: evaluationStyle,
         filled: true,
@@ -92,7 +128,8 @@ var InteractiveSection = /*#__PURE__*/function (_React$Component) {
 InteractiveSection.propTypes = {
   classes: _propTypes["default"].object,
   children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].array]).isRequired,
-  responseCorrect: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].number])
+  responseCorrect: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].number]),
+  uiStyle: _propTypes["default"].object
 };
 InteractiveSection.defaultProps = {
   classes: {},
@@ -103,15 +140,18 @@ var styles = function styles(theme) {
   return {
     interactiveDefault: {
       marginTop: theme.spacing.unit * 2,
-      border: "1px solid ".concat(_renderUi.color.disabled())
+      border: "1px solid ".concat(_renderUi.color.disabled()),
+      display: 'flex'
     },
     interactiveCorrect: {
       marginTop: theme.spacing.unit * 2,
-      border: "2px solid ".concat(_renderUi.color.correct())
+      border: "2px solid ".concat(_renderUi.color.correct()),
+      display: 'flex'
     },
     interactiveIncorrect: {
       marginTop: theme.spacing.unit * 2,
-      border: "2px solid ".concat(_renderUi.color.incorrect())
+      border: "2px solid ".concat(_renderUi.color.incorrect()),
+      display: 'flex'
     }
   };
 };

package/lib/interactive-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interactive-section.jsx"],"names":["InteractiveSection","props","classes","responseCorrect","styleProp","undefined","children","classname","getClassname","evaluationStyle","display","margin","marginTop","React","Component","propTypes","PropTypes","object","oneOfType","element","array","isRequired","bool","number","defaultProps","styles","theme","interactiveDefault","spacing","unit","border","color","disabled","interactiveCorrect","correct","interactiveIncorrect","incorrect"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEMA,kB;;;;;;;;;;;;WACJ,wBAAe;AACb,wBAAqC,KAAKC,KAA1C;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,eAAjB,eAAiBA,eAAjB;AACA,UAAIC,SAAJ;;AAEA,cAAQD,eAAR;AACE,aAAKE,SAAL;AACED,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF,aAAK,IAAL;AACEA,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF;AACEA,UAAAA,SAAS,GAAG,sBAAZ;AACA;AATJ;;AAWA,aAAOF,OAAO,CAACE,SAAD,CAAd;AACD;;;WAED,kBAAS;AACP,yBAAsC,KAAKH,KAA3C;AAAA,UAAQK,QAAR,gBAAQA,QAAR;AAAA,UAAkBH,eAAlB,gBAAkBA,eAAlB;AACA,UAAMI,SAAS,GAAG,KAAKC,YAAL,EAAlB;AACA,UAAMC,eAAe,GAAG;AACtBC,QAAAA,OAAO,EAAE,MADa;AAEtBC,QAAAA,MAAM,EAAE,QAFc;AAGtBC,QAAAA,SAAS,EAAE,CAAC;AAHU,OAAxB;AAMA,0BACE;AAAK,QAAA,SAAS,EAAEL;AAAhB,sBACE,gCAAC,0BAAD;AAAgB,QAAA,cAAc,EAAEE,eAAhC;AAAiD,QAAA,MAAM,MAAvD;AAAwD,QAAA,SAAS,EAAEN;AAAnE,QADF,EAEGG,QAFH,CADF;AAMD;;;EAlC8BO,kBAAMC,S;;AAqCvCd,kBAAkB,CAACe,SAAnB,GAA+B;AAC7Bb,EAAAA,OAAO,EAAEc,sBAAUC,MADU;AAE7BX,EAAAA,QAAQ,EAAEU,sBAAUE,SAAV,CAAoB,CAACF,sBAAUG,OAAX,EAAoBH,sBAAUI,KAA9B,CAApB,EAA0DC,UAFvC;AAG7BlB,EAAAA,eAAe,EAAEa,sBAAUE,SAAV,CAAoB,CAACF,sBAAUM,IAAX,EAAiBN,sBAAUO,MAA3B,CAApB;AAHY,CAA/B;AAMAvB,kBAAkB,CAACwB,YAAnB,GAAkC;AAChCtB,EAAAA,OAAO,EAAE,EADuB;AAEhCC,EAAAA,eAAe,EAAEE;AAFe,CAAlC;;AAKA,IAAMoB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,kBAAkB,EAAE;AAClBf,MAAAA,SAAS,EAAEc,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADd;AAElBC,MAAAA,MAAM,sBAAeC,gBAAMC,QAAN,EAAf;AAFY,KADK;AAKzBC,IAAAA,kBAAkB,EAAE;AAClBrB,MAAAA,SAAS,EAAEc,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADd;AAElBC,MAAAA,MAAM,sBAAeC,gBAAMG,OAAN,EAAf;AAFY,KALK;AASzBC,IAAAA,oBAAoB,EAAE;AACpBvB,MAAAA,SAAS,EAAEc,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADZ;AAEpBC,MAAAA,MAAM,sBAAeC,gBAAMK,SAAN,EAAf;AAFc;AATG,GAAZ;AAAA,CAAf;;eAee,sBAAWX,MAAX,EAAmBzB,kBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\n\nclass InteractiveSection extends React.Component {\n  getClassname() {\n    const { classes, responseCorrect } = this.props;\n    let styleProp;\n\n    switch (responseCorrect) {\n      case undefined:\n        styleProp = 'interactiveDefault';\n        break;\n      case true:\n        styleProp = 'interactiveCorrect';\n        break;\n      default:\n        styleProp = 'interactiveIncorrect';\n        break;\n    }\n    return classes[styleProp];\n  }\n\n  render() {\n    const { children, responseCorrect } = this.props;\n    const classname = this.getClassname();\n    const evaluationStyle = {\n      display: 'flex',\n      margin: '0 auto',\n      marginTop: -14,\n    };\n\n    return (\n      <div className={classname}>\n        <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />\n        {children}\n      </div>\n    );\n  }\n}\n\nInteractiveSection.propTypes = {\n  classes: PropTypes.object,\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,\n  responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n};\n\nInteractiveSection.defaultProps = {\n  classes: {},\n  responseCorrect: undefined,\n};\n\nconst styles = (theme) => ({\n  interactiveDefault: {\n    marginTop: theme.spacing.unit * 2,\n    border: `1px solid ${color.disabled()}`,\n  },\n  interactiveCorrect: {\n    marginTop: theme.spacing.unit * 2,\n    border: `2px solid ${color.correct()}`,\n  },\n  interactiveIncorrect: {\n    marginTop: theme.spacing.unit * 2,\n    border: `2px solid ${color.incorrect()}`,\n  },\n});\n\nexport default withStyles(styles)(InteractiveSection);\n"],"file":"interactive-section.js"}
+{"version":3,"sources":["../src/interactive-section.jsx"],"names":["InteractiveSection","props","classes","responseCorrect","styleProp","undefined","choicePosition","flexDirection","children","uiStyle","classname","getClassname","possibilityListPosition","style","getPositionDirection","evaluationStyle","display","margin","marginTop","React","Component","propTypes","PropTypes","object","oneOfType","element","array","isRequired","bool","number","defaultProps","styles","theme","interactiveDefault","spacing","unit","border","color","disabled","interactiveCorrect","correct","interactiveIncorrect","incorrect"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEMA,kB;;;;;;;;;;;;WACJ,wBAAe;AACb,wBAAqC,KAAKC,KAA1C;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,eAAjB,eAAiBA,eAAjB;AACA,UAAIC,SAAJ;;AAEA,cAAQD,eAAR;AACE,aAAKE,SAAL;AACED,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF,aAAK,IAAL;AACEA,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF;AACEA,UAAAA,SAAS,GAAG,sBAAZ;AACA;AATJ;;AAWA,aAAOF,OAAO,CAACE,SAAD,CAAd;AACD;;;WAED,8BAAsBE,cAAtB,EAAsC;AACpC,UAAIC,aAAJ;;AAEA,cAAQD,cAAR;AACE,aAAK,MAAL;AACEC,UAAAA,aAAa,GAAG,aAAhB;AACA;;AACF,aAAK,OAAL;AACEA,UAAAA,aAAa,GAAG,KAAhB;AACA;;AACF,aAAK,KAAL;AACEA,UAAAA,aAAa,GAAG,gBAAhB;AACA;;AACF;AACE;AACAA,UAAAA,aAAa,GAAG,QAAhB;AACA;AAbJ;;AAgBA,aAAOA,aAAP;AACD;;;WAED,kBAAS;AACP,yBAA+C,KAAKN,KAApD;AAAA,UAAQO,QAAR,gBAAQA,QAAR;AAAA,UAAkBL,eAAlB,gBAAkBA,eAAlB;AAAA,UAAmCM,OAAnC,gBAAmCA,OAAnC;AACA,UAAMC,SAAS,GAAG,KAAKC,YAAL,EAAlB;;AACA,iBAA8CF,OAAO,IAAI,EAAzD;AAAA,uCAAQG,uBAAR;AAAA,UAAQA,uBAAR,sCAAkC,QAAlC;;AACA,UAAMC,KAAK,GAAG;AACZN,QAAAA,aAAa,EAAE,KAAKO,oBAAL,CAA0BF,uBAA1B;AADH,OAAd;AAGA,UAAMG,eAAe,GAAG;AACtBC,QAAAA,OAAO,EAAE,MADa;AAEtBC,QAAAA,MAAM,EAAE,QAFc;AAGtBC,QAAAA,SAAS,EAAE,CAAC;AAHU,OAAxB;AAMA,0BACE;AAAK,QAAA,SAAS,EAAER,SAAhB;AAA2B,QAAA,KAAK,EAAEG;AAAlC,sBACE,gCAAC,0BAAD;AAAgB,QAAA,cAAc,EAAEE,eAAhC;AAAiD,QAAA,MAAM,MAAvD;AAAwD,QAAA,SAAS,EAAEZ;AAAnE,QADF,EAEGK,QAFH,CADF;AAMD;;;EA5D8BW,kBAAMC,S;;AA+DvCpB,kBAAkB,CAACqB,SAAnB,GAA+B;AAC7BnB,EAAAA,OAAO,EAAEoB,sBAAUC,MADU;AAE7Bf,EAAAA,QAAQ,EAAEc,sBAAUE,SAAV,CAAoB,CAACF,sBAAUG,OAAX,EAAoBH,sBAAUI,KAA9B,CAApB,EAA0DC,UAFvC;AAG7BxB,EAAAA,eAAe,EAAEmB,sBAAUE,SAAV,CAAoB,CAACF,sBAAUM,IAAX,EAAiBN,sBAAUO,MAA3B,CAApB,CAHY;AAI7BpB,EAAAA,OAAO,EAAEa,sBAAUC;AAJU,CAA/B;AAOAvB,kBAAkB,CAAC8B,YAAnB,GAAkC;AAChC5B,EAAAA,OAAO,EAAE,EADuB;AAEhCC,EAAAA,eAAe,EAAEE;AAFe,CAAlC;;AAKA,IAAM0B,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,kBAAkB,EAAE;AAClBf,MAAAA,SAAS,EAAEc,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADd;AAElBC,MAAAA,MAAM,sBAAeC,gBAAMC,QAAN,EAAf,CAFY;AAGlBtB,MAAAA,OAAO,EAAE;AAHS,KADK;AAMzBuB,IAAAA,kBAAkB,EAAE;AAClBrB,MAAAA,SAAS,EAAEc,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADd;AAElBC,MAAAA,MAAM,sBAAeC,gBAAMG,OAAN,EAAf,CAFY;AAGlBxB,MAAAA,OAAO,EAAE;AAHS,KANK;AAWzByB,IAAAA,oBAAoB,EAAE;AACpBvB,MAAAA,SAAS,EAAEc,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADZ;AAEpBC,MAAAA,MAAM,sBAAeC,gBAAMK,SAAN,EAAf,CAFc;AAGpB1B,MAAAA,OAAO,EAAE;AAHW;AAXG,GAAZ;AAAA,CAAf;;eAkBe,sBAAWe,MAAX,EAAmB/B,kBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\n\nclass InteractiveSection extends React.Component {\n  getClassname() {\n    const { classes, responseCorrect } = this.props;\n    let styleProp;\n\n    switch (responseCorrect) {\n      case undefined:\n        styleProp = 'interactiveDefault';\n        break;\n      case true:\n        styleProp = 'interactiveCorrect';\n        break;\n      default:\n        styleProp = 'interactiveIncorrect';\n        break;\n    }\n    return classes[styleProp];\n  }\n\n  getPositionDirection (choicePosition) {\n    let flexDirection;\n\n    switch (choicePosition) {\n      case 'left':\n        flexDirection = 'row-reverse';\n        break;\n      case 'right':\n        flexDirection = 'row';\n        break;\n      case 'top':\n        flexDirection = 'column-reverse';\n        break;\n      default:\n        // bottom\n        flexDirection = 'column';\n        break;\n    }\n\n    return flexDirection;\n  };\n\n  render() {\n    const { children, responseCorrect, uiStyle } = this.props;\n    const classname = this.getClassname();\n    const { possibilityListPosition = 'bottom'} = uiStyle || {};\n    const style = {\n      flexDirection: this.getPositionDirection(possibilityListPosition),\n    };\n    const evaluationStyle = {\n      display: 'flex',\n      margin: '0 auto',\n      marginTop: -14,\n    };\n\n    return (\n      <div className={classname} style={style}>\n        <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />\n        {children}\n      </div>\n    );\n  }\n}\n\nInteractiveSection.propTypes = {\n  classes: PropTypes.object,\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,\n  responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n  uiStyle: PropTypes.object,\n};\n\nInteractiveSection.defaultProps = {\n  classes: {},\n  responseCorrect: undefined,\n};\n\nconst styles = (theme) => ({\n  interactiveDefault: {\n    marginTop: theme.spacing.unit * 2,\n    border: `1px solid ${color.disabled()}`,\n    display: 'flex',\n  },\n  interactiveCorrect: {\n    marginTop: theme.spacing.unit * 2,\n    border: `2px solid ${color.correct()}`,\n    display: 'flex',\n  },\n  interactiveIncorrect: {\n    marginTop: theme.spacing.unit * 2,\n    border: `2px solid ${color.incorrect()}`,\n    display: 'flex',\n  },\n});\n\nexport default withStyles(styles)(InteractiveSection);\n"],"file":"interactive-section.js"}

package/lib/possible-responses.js

@@ -58,7 +58,9 @@ var styles = function styles(theme) {
   return {
     base: {
       backgroundColor: _renderUi.color.background(),
-      padding: theme.spacing.unit * 2
+      padding: theme.spacing.unit * 2,
+      display: 'flex',
+      alignItems: 'center'
     }
   };
 };

package/lib/possible-responses.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","data","onAnswerRemove","onDragBegin","onDragEnd","base","map","item","id","propTypes","PropTypes","bool","isRequired","object","array","func","defaultProps","styles","theme","backgroundColor","color","background","padding","spacing","unit"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,OAAZ,QAAYA,OAAZ;AAAA,MAAqBC,IAArB,QAAqBA,IAArB;AAAA,MAA2BC,cAA3B,QAA2BA,cAA3B;AAAA,MAA2CC,WAA3C,QAA2CA,WAA3C;AAAA,MAAwDC,SAAxD,QAAwDA,SAAxD;AAAA,sBACxB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE,gCAAC,6BAAD;AAAyB,IAAA,QAAQ,EAAE,CAACN,OAApC;AAA6C,IAAA,cAAc,EAAEG;AAA7D,KACGD,IAAI,CAACK,GAAL,CAAS,UAACC,IAAD;AAAA,wBACR,gCAAC,4BAAD;AAAkB,MAAA,OAAO,EAAER,OAA3B;AAAoC,MAAA,GAAG,EAAEQ,IAAI,CAACC,EAA9C;AAAkD,MAAA,IAAI,EAAED,IAAxD;AAA8D,MAAA,WAAW,EAAEJ,WAA3E;AAAwF,MAAA,SAAS,EAAEC;AAAnG,MADQ;AAAA,GAAT,CADH,CADF,CADwB;AAAA,CAA1B;;AAUAN,iBAAiB,CAACW,SAAlB,GAA8B;AAC5BV,EAAAA,OAAO,EAAEW,sBAAUC,IAAV,CAAeC,UADI;AAE5BZ,EAAAA,OAAO,EAAEU,sBAAUG,MAFS;AAG5BZ,EAAAA,IAAI,EAAES,sBAAUI,KAAV,CAAgBF,UAHM;AAI5BV,EAAAA,cAAc,EAAEQ,sBAAUK,IAAV,CAAeH,UAJH;AAK5BT,EAAAA,WAAW,EAAEO,sBAAUK,IAAV,CAAeH,UALA;AAM5BR,EAAAA,SAAS,EAAEM,sBAAUK,IAAV,CAAeH;AANE,CAA9B;AASAd,iBAAiB,CAACkB,YAAlB,GAAiC;AAC/BhB,EAAAA,OAAO,EAAE;AADsB,CAAjC;;AAIA,IAAMiB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBb,IAAAA,IAAI,EAAE;AACJc,MAAAA,eAAe,EAAEC,gBAAMC,UAAN,EADb;AAEJC,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB;AAF1B;AADmB,GAAZ;AAAA,CAAf;;eAOe,sBAAWP,MAAX,EAAmBnB,iBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport { ICADroppablePlaceholder } from '@pie-lib/pie-toolbox/drag';\n\nimport PossibleResponse from './possible-response';\n\nconst PossibleResponses = ({ canDrag, classes, data, onAnswerRemove, onDragBegin, onDragEnd }) => (\n  <div className={classes.base}>\n    <ICADroppablePlaceholder disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>\n      {data.map((item) => (\n        <PossibleResponse canDrag={canDrag} key={item.id} data={item} onDragBegin={onDragBegin} onDragEnd={onDragEnd} />\n      ))}\n    </ICADroppablePlaceholder>\n  </div>\n);\n\nPossibleResponses.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  data: PropTypes.array.isRequired,\n  onAnswerRemove: PropTypes.func.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n};\n\nPossibleResponses.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  base: {\n    backgroundColor: color.background(),\n    padding: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(PossibleResponses);\n"],"file":"possible-responses.js"}
+{"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","data","onAnswerRemove","onDragBegin","onDragEnd","base","map","item","id","propTypes","PropTypes","bool","isRequired","object","array","func","defaultProps","styles","theme","backgroundColor","color","background","padding","spacing","unit","display","alignItems"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,OAAZ,QAAYA,OAAZ;AAAA,MAAqBC,IAArB,QAAqBA,IAArB;AAAA,MAA2BC,cAA3B,QAA2BA,cAA3B;AAAA,MAA2CC,WAA3C,QAA2CA,WAA3C;AAAA,MAAwDC,SAAxD,QAAwDA,SAAxD;AAAA,sBACxB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE,gCAAC,6BAAD;AAAyB,IAAA,QAAQ,EAAE,CAACN,OAApC;AAA6C,IAAA,cAAc,EAAEG;AAA7D,KACGD,IAAI,CAACK,GAAL,CAAS,UAACC,IAAD;AAAA,wBACR,gCAAC,4BAAD;AAAkB,MAAA,OAAO,EAAER,OAA3B;AAAoC,MAAA,GAAG,EAAEQ,IAAI,CAACC,EAA9C;AAAkD,MAAA,IAAI,EAAED,IAAxD;AAA8D,MAAA,WAAW,EAAEJ,WAA3E;AAAwF,MAAA,SAAS,EAAEC;AAAnG,MADQ;AAAA,GAAT,CADH,CADF,CADwB;AAAA,CAA1B;;AAUAN,iBAAiB,CAACW,SAAlB,GAA8B;AAC5BV,EAAAA,OAAO,EAAEW,sBAAUC,IAAV,CAAeC,UADI;AAE5BZ,EAAAA,OAAO,EAAEU,sBAAUG,MAFS;AAG5BZ,EAAAA,IAAI,EAAES,sBAAUI,KAAV,CAAgBF,UAHM;AAI5BV,EAAAA,cAAc,EAAEQ,sBAAUK,IAAV,CAAeH,UAJH;AAK5BT,EAAAA,WAAW,EAAEO,sBAAUK,IAAV,CAAeH,UALA;AAM5BR,EAAAA,SAAS,EAAEM,sBAAUK,IAAV,CAAeH;AANE,CAA9B;AASAd,iBAAiB,CAACkB,YAAlB,GAAiC;AAC/BhB,EAAAA,OAAO,EAAE;AADsB,CAAjC;;AAIA,IAAMiB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBb,IAAAA,IAAI,EAAE;AACJc,MAAAA,eAAe,EAAEC,gBAAMC,UAAN,EADb;AAEJC,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAF1B;AAGJC,MAAAA,OAAO,EAAE,MAHL;AAIJC,MAAAA,UAAU,EAAE;AAJR;AADmB,GAAZ;AAAA,CAAf;;eASe,sBAAWT,MAAX,EAAmBnB,iBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport { ICADroppablePlaceholder } from '@pie-lib/pie-toolbox/drag';\n\nimport PossibleResponse from './possible-response';\n\nconst PossibleResponses = ({ canDrag, classes, data, onAnswerRemove, onDragBegin, onDragEnd }) => (\n  <div className={classes.base}>\n    <ICADroppablePlaceholder disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>\n      {data.map((item) => (\n        <PossibleResponse canDrag={canDrag} key={item.id} data={item} onDragBegin={onDragBegin} onDragEnd={onDragEnd} />\n      ))}\n    </ICADroppablePlaceholder>\n  </div>\n);\n\nPossibleResponses.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  data: PropTypes.array.isRequired,\n  onAnswerRemove: PropTypes.func.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n};\n\nPossibleResponses.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  base: {\n    backgroundColor: color.background(),\n    padding: theme.spacing.unit * 2,\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport default withStyles(styles)(PossibleResponses);\n"],"file":"possible-responses.js"}

package/lib/root.js

@@ -291,7 +291,9 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           showDashedBorder = _this$props3$model.showDashedBorder,
           mode = _this$props3$model.mode,
           rationale = _this$props3$model.rationale,
-          language = _this$props3$model.language;
+          language = _this$props3$model.language,
+          _this$props3$model$ui = _this$props3$model.uiStyle,
+          uiStyle = _this$props3$model$ui === void 0 ? {} : _this$props3$model$ui;
       var _this$state3 = this.state,
           answers = _this$state3.answers,
           draggingElement = _this$state3.draggingElement,
@@ -351,7 +353,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         onToggle: this.toggleCorrect,
         language: language
       }), showCorrect && showToggle ? /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
-        responseCorrect: true
+        responseCorrect: true,
+        uiStyle: uiStyle
       }, /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
         canDrag: false,
         answers: correctAnswers,
@@ -364,7 +367,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         responseContainers: responseContainers,
         showDashedBorder: showDashedBorder
       })) : /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
-        responseCorrect: responseCorrect
+        responseCorrect: responseCorrect,
+        uiStyle: uiStyle
       }, /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
         canDrag: !disabled,
         answers: answersToShow,

package/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["translator","Translator","generateId","Math","random","toString","substring","Date","getTime","styles","theme","main","color","text","backgroundColor","background","stimulus","fontSize","typography","teacherInstructions","marginBottom","spacing","unit","rationale","marginTop","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","answer","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","possibleResponses","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","push","_","max","map","c","parseInt","isNaN","response","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","index","groupBy","grp","slice","flatMap","possibleResponsesFiltered","find","classes","disabled","image","responseCorrect","validation","prompt","showDashedBorder","mode","language","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","WarningInfo","warning","margin","padding","display","alignItems","width","height","message","paddingLeft","userSelect","__html","propTypes","PropTypes","string","object","isRequired","func","defaultProps","StyledComponent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/pie-toolbox/icons';\nimport { color, Collapsible, PreviewPrompt, hasText } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nconst { translator } = Translator;\nimport Image from './image-container';\nimport InteractiveSection from './interactive-section';\nimport PossibleResponses from './possible-responses';\nimport { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';\nimport _ from 'lodash';\n\nconst generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  stimulus: {\n    fontSize: theme.typography.fontSize,\n  },\n  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  rationale: {\n    marginTop: theme.spacing.unit * 2,\n  }\n});\n\nclass ImageClozeAssociationComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    const {\n      model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },\n      session,\n    } = props;\n    let { answers } = session || {};\n    // set id for each possible response\n    const possibleResponsesWithIds = (possibleResponses || []).map((item, index) => ({\n      value: item,\n      id: `${index}`,\n    }));\n\n    answers = _(answers || [])\n      .groupBy('containerIndex')\n      // keep only last maxResponsePerZone answers for each zone\n      .map((grp) => grp.slice(-(maxResponsePerZone || 1)))\n      .flatMap()\n      // set id for each answer\n      .map((answer, index) => ({ ...answer, id: `${index}` }))\n      // return only answer which have a valid container index\n      .filter((answer) => answer.containerIndex < responseContainers.length)\n      .value();\n\n    const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n      (response) => !answers.find((answer) => answer.value === response.value),\n    );\n    this.state = {\n      answers: answers || [],\n      draggingElement: { id: '', value: '' },\n      possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,\n      // set id for each response containers\n      responseContainers: (responseContainers || []).map((item, index) => ({\n        index,\n        ...item,\n        id: `${index}`,\n      })),\n      maxResponsePerZone: maxResponsePerZone || 1,\n      showCorrect: false,\n    };\n  }\n\n  beginDrag = (draggingElement) => {\n    this.setState({\n      draggingElement,\n    });\n  };\n\n  handleOnDragEnd = () => {\n    this.setState({\n      draggingElement: { id: '', value: '' },\n    });\n  };\n\n  handleOnAnswerSelect = (answer, responseContainerIndex) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses, maxResponsePerZone } = this.state;\n    let answersToStore;\n\n    if (maxResponsePerZone === answers.filter((a) => a.containerIndex === responseContainerIndex).length) {\n      const answersInThisContainer = answers.filter((a) => a.containerIndex === responseContainerIndex);\n      const answersInOtherContainers = answers.filter((b) => b.containerIndex !== responseContainerIndex);\n\n      const shiftedItem = answersInThisContainer[0];\n      if (maxResponsePerZone === 1) {\n        answersInThisContainer.shift(); // FIFO\n      } else {\n        this.setState({ maxResponsePerZoneWarning: true });\n        return;\n      }\n\n      // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n      if (!duplicateResponses) {\n        possibleResponses = Array.isArray(possibleResponses) ? possibleResponses : [];\n\n        possibleResponses.push({\n          ...shiftedItem,\n          containerIndex: '',\n          id: `${_.max(possibleResponses.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) + 1}`,\n        });\n      }\n\n      // answers will be:\n      // + shifted answers for the current container\n      // + if duplicatesAllowed, all the other answers from other containers\n      //   else: all the answers from other containers that are not having the same value\n      // + new answer\n      answersToStore = [\n        ...answersInThisContainer, // shifted\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answersInOtherContainers.filter((a) => (duplicateResponses ? true : a.value !== answer.value)), // un-shifted\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    } else {\n      // answers will be:\n      // + if duplicatesAllowed, all the other answers, except the one that was dragged\n      //   else: all the answers that are not having the same value\n      // + new answer\n      answersToStore = [\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answers.filter((a) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    }\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      possibleResponses:\n        // for single response per container remove answer from possible responses\n        duplicateResponses\n          ? possibleResponses\n          : possibleResponses.filter((response) => response.value !== answer.value),\n    });\n    updateAnswer(answersToStore);\n  };\n\n  handleOnAnswerRemove = (answer) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses } = this.state;\n    const answersToStore = answers.filter((a) => a.id !== answer.id);\n    const shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      // push back into possible responses the removed answer if responses cannot be duplicated\n      possibleResponses:\n        duplicateResponses || shouldNotPushInPossibleResponses\n          ? possibleResponses\n          : [\n              ...possibleResponses,\n              {\n                ...answer,\n                containerIndex: undefined,\n              },\n            ],\n    });\n    updateAnswer(answersToStore);\n  };\n\n  toggleCorrect = (showCorrect) => this.setState({ showCorrect });\n\n  render() {\n    const {\n      classes,\n      model: {\n        disabled,\n        duplicateResponses,\n        image,\n        stimulus,\n        responseCorrect,\n        validation,\n        teacherInstructions,\n        prompt,\n        showDashedBorder,\n        mode,\n        rationale,\n        language\n      },\n    } = this.props;\n    const {\n      answers,\n      draggingElement,\n      possibleResponses,\n      responseContainers,\n      maxResponsePerZone,\n      maxResponsePerZoneWarning,\n      showCorrect,\n    } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showToggle = isEvaluateMode && !responseCorrect;\n\n    const { validResponse } = validation || {};\n    const correctAnswers = [];\n\n    if (validResponse) {\n      (validResponse.value || []).forEach((container, i) => {\n        (container.images || []).forEach((v) => {\n          correctAnswers.push({\n            value: v,\n            containerIndex: i,\n          });\n        });\n      });\n    }\n\n    const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other',\n      { lng: language, count: maxResponsePerZone });\n\n    let answersToShow =\n      responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;\n\n    if (responseCorrect === false && maxResponsePerZone === 1) {\n      answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n    }\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            className={classes.teacherInstructions}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n        <PreviewPrompt defaultClassName={classes.stimulus} prompt={stimulus} />\n\n        <CorrectAnswerToggle show={showToggle} toggled={showCorrect} onToggle={this.toggleCorrect} language={language}/>\n\n        {showCorrect && showToggle ? (\n          <InteractiveSection responseCorrect={true}>\n            <Image\n              canDrag={false}\n              answers={correctAnswers}\n              draggingElement={draggingElement}\n              duplicateResponses={duplicateResponses}\n              image={image}\n              onAnswerSelect={this.handleOnAnswerSelect}\n              onDragAnswerBegin={this.beginDrag}\n              onDragAnswerEnd={this.handleOnDragEnd}\n              responseContainers={responseContainers}\n              showDashedBorder={showDashedBorder}\n            />\n          </InteractiveSection>\n        ) : (\n          <InteractiveSection responseCorrect={responseCorrect}>\n            <Image\n              canDrag={!disabled}\n              answers={answersToShow}\n              draggingElement={draggingElement}\n              duplicateResponses={duplicateResponses}\n              image={image}\n              onAnswerSelect={this.handleOnAnswerSelect}\n              onDragAnswerBegin={this.beginDrag}\n              onDragAnswerEnd={this.handleOnDragEnd}\n              responseContainers={responseContainers}\n              showDashedBorder={showDashedBorder}\n            />\n\n            {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}\n\n            <PossibleResponses\n              canDrag={!disabled}\n              data={possibleResponses}\n              onAnswerRemove={this.handleOnAnswerRemove}\n              onDragBegin={this.beginDrag}\n              onDragEnd={this.handleOnDragEnd}\n            />\n          </InteractiveSection>\n        )}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible\n            className={classes.rationale}\n            labels={{\n              hidden: 'Show Rationale',\n              visible: 'Hide Rationale',\n            }}\n          >\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nconst WarningInfo = withStyles((theme) => ({\n  warning: {\n    margin: `0 ${theme.spacing.unit * 2}px`,\n    backgroundColor: '#dddddd',\n    padding: theme.spacing.unit,\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n    '& svg': {\n      height: '30px',\n    },\n    '& h1': {\n      padding: '0px',\n      margin: '0px',\n    },\n  },\n  message: {\n    paddingLeft: theme.spacing.unit / 2,\n    userSelect: 'none',\n  },\n}))(({ classes, message }) => (\n  <TransitionGroup>\n    <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n      <div key=\"panel\" className={classes.warning}>\n        <ShowRationale iconSet=\"emoji\" shape=\"square\" />\n        <span className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />\n      </div>\n    </CSSTransition>\n  </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n  message: PropTypes.string,\n  classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  session: PropTypes.object,\n  updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n  classes: {},\n};\n\nconst StyledComponent = withStyles(styles)(ImageClozeAssociationComponent);\n\nexport default withDragContext(StyledComponent);\n"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["translator","Translator","generateId","Math","random","toString","substring","Date","getTime","styles","theme","main","color","text","backgroundColor","background","stimulus","fontSize","typography","teacherInstructions","marginBottom","spacing","unit","rationale","marginTop","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","answer","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","possibleResponses","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","push","_","max","map","c","parseInt","isNaN","response","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","index","groupBy","grp","slice","flatMap","possibleResponsesFiltered","find","classes","disabled","image","responseCorrect","validation","prompt","showDashedBorder","mode","language","uiStyle","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","WarningInfo","warning","margin","padding","display","alignItems","width","height","message","paddingLeft","userSelect","__html","propTypes","PropTypes","string","object","isRequired","func","defaultProps","StyledComponent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/pie-toolbox/icons';\nimport { color, Collapsible, PreviewPrompt, hasText } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nconst { translator } = Translator;\nimport Image from './image-container';\nimport InteractiveSection from './interactive-section';\nimport PossibleResponses from './possible-responses';\nimport { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';\nimport _ from 'lodash';\n\nconst generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  stimulus: {\n    fontSize: theme.typography.fontSize,\n  },\n  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  rationale: {\n    marginTop: theme.spacing.unit * 2,\n  }\n});\n\nclass ImageClozeAssociationComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    const {\n      model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },\n      session,\n    } = props;\n    let { answers } = session || {};\n    // set id for each possible response\n    const possibleResponsesWithIds = (possibleResponses || []).map((item, index) => ({\n      value: item,\n      id: `${index}`,\n    }));\n\n    answers = _(answers || [])\n      .groupBy('containerIndex')\n      // keep only last maxResponsePerZone answers for each zone\n      .map((grp) => grp.slice(-(maxResponsePerZone || 1)))\n      .flatMap()\n      // set id for each answer\n      .map((answer, index) => ({ ...answer, id: `${index}` }))\n      // return only answer which have a valid container index\n      .filter((answer) => answer.containerIndex < responseContainers.length)\n      .value();\n\n    const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n      (response) => !answers.find((answer) => answer.value === response.value),\n    );\n    this.state = {\n      answers: answers || [],\n      draggingElement: { id: '', value: '' },\n      possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,\n      // set id for each response containers\n      responseContainers: (responseContainers || []).map((item, index) => ({\n        index,\n        ...item,\n        id: `${index}`,\n      })),\n      maxResponsePerZone: maxResponsePerZone || 1,\n      showCorrect: false,\n    };\n  }\n\n  beginDrag = (draggingElement) => {\n    this.setState({\n      draggingElement,\n    });\n  };\n\n  handleOnDragEnd = () => {\n    this.setState({\n      draggingElement: { id: '', value: '' },\n    });\n  };\n\n  handleOnAnswerSelect = (answer, responseContainerIndex) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses, maxResponsePerZone } = this.state;\n    let answersToStore;\n\n    if (maxResponsePerZone === answers.filter((a) => a.containerIndex === responseContainerIndex).length) {\n      const answersInThisContainer = answers.filter((a) => a.containerIndex === responseContainerIndex);\n      const answersInOtherContainers = answers.filter((b) => b.containerIndex !== responseContainerIndex);\n\n      const shiftedItem = answersInThisContainer[0];\n      if (maxResponsePerZone === 1) {\n        answersInThisContainer.shift(); // FIFO\n      } else {\n        this.setState({ maxResponsePerZoneWarning: true });\n        return;\n      }\n\n      // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n      if (!duplicateResponses) {\n        possibleResponses = Array.isArray(possibleResponses) ? possibleResponses : [];\n\n        possibleResponses.push({\n          ...shiftedItem,\n          containerIndex: '',\n          id: `${_.max(possibleResponses.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) + 1}`,\n        });\n      }\n\n      // answers will be:\n      // + shifted answers for the current container\n      // + if duplicatesAllowed, all the other answers from other containers\n      //   else: all the answers from other containers that are not having the same value\n      // + new answer\n      answersToStore = [\n        ...answersInThisContainer, // shifted\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answersInOtherContainers.filter((a) => (duplicateResponses ? true : a.value !== answer.value)), // un-shifted\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    } else {\n      // answers will be:\n      // + if duplicatesAllowed, all the other answers, except the one that was dragged\n      //   else: all the answers that are not having the same value\n      // + new answer\n      answersToStore = [\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answers.filter((a) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    }\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      possibleResponses:\n        // for single response per container remove answer from possible responses\n        duplicateResponses\n          ? possibleResponses\n          : possibleResponses.filter((response) => response.value !== answer.value),\n    });\n    updateAnswer(answersToStore);\n  };\n\n  handleOnAnswerRemove = (answer) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses } = this.state;\n    const answersToStore = answers.filter((a) => a.id !== answer.id);\n    const shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      // push back into possible responses the removed answer if responses cannot be duplicated\n      possibleResponses:\n        duplicateResponses || shouldNotPushInPossibleResponses\n          ? possibleResponses\n          : [\n              ...possibleResponses,\n              {\n                ...answer,\n                containerIndex: undefined,\n              },\n            ],\n    });\n    updateAnswer(answersToStore);\n  };\n\n  toggleCorrect = (showCorrect) => this.setState({ showCorrect });\n\n  render() {\n    const {\n      classes,\n      model: {\n        disabled,\n        duplicateResponses,\n        image,\n        stimulus,\n        responseCorrect,\n        validation,\n        teacherInstructions,\n        prompt,\n        showDashedBorder,\n        mode,\n        rationale,\n        language,\n        uiStyle = {},\n      },\n    } = this.props;\n    const {\n      answers,\n      draggingElement,\n      possibleResponses,\n      responseContainers,\n      maxResponsePerZone,\n      maxResponsePerZoneWarning,\n      showCorrect,\n    } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showToggle = isEvaluateMode && !responseCorrect;\n\n    const { validResponse } = validation || {};\n    const correctAnswers = [];\n\n    if (validResponse) {\n      (validResponse.value || []).forEach((container, i) => {\n        (container.images || []).forEach((v) => {\n          correctAnswers.push({\n            value: v,\n            containerIndex: i,\n          });\n        });\n      });\n    }\n\n    const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other',\n      { lng: language, count: maxResponsePerZone });\n\n    let answersToShow =\n      responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;\n\n    if (responseCorrect === false && maxResponsePerZone === 1) {\n      answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n    }\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            className={classes.teacherInstructions}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n        <PreviewPrompt defaultClassName={classes.stimulus} prompt={stimulus} />\n\n        <CorrectAnswerToggle show={showToggle} toggled={showCorrect} onToggle={this.toggleCorrect} language={language}/>\n\n        {showCorrect && showToggle ? (\n          <InteractiveSection responseCorrect={true} uiStyle={uiStyle}>\n            <Image\n              canDrag={false}\n              answers={correctAnswers}\n              draggingElement={draggingElement}\n              duplicateResponses={duplicateResponses}\n              image={image}\n              onAnswerSelect={this.handleOnAnswerSelect}\n              onDragAnswerBegin={this.beginDrag}\n              onDragAnswerEnd={this.handleOnDragEnd}\n              responseContainers={responseContainers}\n              showDashedBorder={showDashedBorder}\n            />\n          </InteractiveSection>\n        ) : (\n          <InteractiveSection responseCorrect={responseCorrect} uiStyle={uiStyle}>\n            <Image\n              canDrag={!disabled}\n              answers={answersToShow}\n              draggingElement={draggingElement}\n              duplicateResponses={duplicateResponses}\n              image={image}\n              onAnswerSelect={this.handleOnAnswerSelect}\n              onDragAnswerBegin={this.beginDrag}\n              onDragAnswerEnd={this.handleOnDragEnd}\n              responseContainers={responseContainers}\n              showDashedBorder={showDashedBorder}\n            />\n\n            {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}\n\n            <PossibleResponses\n              canDrag={!disabled}\n              data={possibleResponses}\n              onAnswerRemove={this.handleOnAnswerRemove}\n              onDragBegin={this.beginDrag}\n              onDragEnd={this.handleOnDragEnd}\n            />\n          </InteractiveSection>\n        )}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible\n            className={classes.rationale}\n            labels={{\n              hidden: 'Show Rationale',\n              visible: 'Hide Rationale',\n            }}\n          >\n            <PreviewPrompt prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nconst WarningInfo = withStyles((theme) => ({\n  warning: {\n    margin: `0 ${theme.spacing.unit * 2}px`,\n    backgroundColor: '#dddddd',\n    padding: theme.spacing.unit,\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n    '& svg': {\n      height: '30px',\n    },\n    '& h1': {\n      padding: '0px',\n      margin: '0px',\n    },\n  },\n  message: {\n    paddingLeft: theme.spacing.unit / 2,\n    userSelect: 'none',\n  },\n}))(({ classes, message }) => (\n  <TransitionGroup>\n    <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n      <div key=\"panel\" className={classes.warning}>\n        <ShowRationale iconSet=\"emoji\" shape=\"square\" />\n        <span className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />\n      </div>\n    </CSSTransition>\n  </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n  message: PropTypes.string,\n  classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  session: PropTypes.object,\n  updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n  classes: {},\n};\n\nconst StyledComponent = withStyles(styles)(ImageClozeAssociationComponent);\n\nexport default withDragContext(StyledComponent);\n"],"file":"root.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "e80a1f288db09e54bc9ca1b4b10cc01ee25af577",
+  "gitHead": "9f18fde2044a55c58d0b6bc21681828e8d4f2c04",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/interactive-section.jsx

@@ -24,9 +24,35 @@ class InteractiveSection extends React.Component {
     return classes[styleProp];
   }
 
+  getPositionDirection (choicePosition) {
+    let flexDirection;
+
+    switch (choicePosition) {
+      case 'left':
+        flexDirection = 'row-reverse';
+        break;
+      case 'right':
+        flexDirection = 'row';
+        break;
+      case 'top':
+        flexDirection = 'column-reverse';
+        break;
+      default:
+        // bottom
+        flexDirection = 'column';
+        break;
+    }
+
+    return flexDirection;
+  };
+
   render() {
-    const { children, responseCorrect } = this.props;
+    const { children, responseCorrect, uiStyle } = this.props;
     const classname = this.getClassname();
+    const { possibilityListPosition = 'bottom'} = uiStyle || {};
+    const style = {
+      flexDirection: this.getPositionDirection(possibilityListPosition),
+    };
     const evaluationStyle = {
       display: 'flex',
       margin: '0 auto',
@@ -34,7 +60,7 @@ class InteractiveSection extends React.Component {
     };
 
     return (
-      <div className={classname}>
+      <div className={classname} style={style}>
         <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />
         {children}
       </div>
@@ -46,6 +72,7 @@ InteractiveSection.propTypes = {
   classes: PropTypes.object,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,
   responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  uiStyle: PropTypes.object,
 };
 
 InteractiveSection.defaultProps = {
@@ -57,14 +84,17 @@ const styles = (theme) => ({
   interactiveDefault: {
     marginTop: theme.spacing.unit * 2,
     border: `1px solid ${color.disabled()}`,
+    display: 'flex',
   },
   interactiveCorrect: {
     marginTop: theme.spacing.unit * 2,
     border: `2px solid ${color.correct()}`,
+    display: 'flex',
   },
   interactiveIncorrect: {
     marginTop: theme.spacing.unit * 2,
     border: `2px solid ${color.incorrect()}`,
+    display: 'flex',
   },
 });
 

package/src/possible-responses.jsx

@@ -33,6 +33,8 @@ const styles = (theme) => ({
   base: {
     backgroundColor: color.background(),
     padding: theme.spacing.unit * 2,
+    display: 'flex',
+    alignItems: 'center',
   },
 });
 

package/src/root.jsx

@@ -208,7 +208,8 @@ class ImageClozeAssociationComponent extends React.Component {
         showDashedBorder,
         mode,
         rationale,
-        language
+        language,
+        uiStyle = {},
       },
     } = this.props;
     const {
@@ -268,7 +269,7 @@ class ImageClozeAssociationComponent extends React.Component {
         <CorrectAnswerToggle show={showToggle} toggled={showCorrect} onToggle={this.toggleCorrect} language={language}/>
 
         {showCorrect && showToggle ? (
-          <InteractiveSection responseCorrect={true}>
+          <InteractiveSection responseCorrect={true} uiStyle={uiStyle}>
             <Image
               canDrag={false}
               answers={correctAnswers}
@@ -283,7 +284,7 @@ class ImageClozeAssociationComponent extends React.Component {
             />
           </InteractiveSection>
         ) : (
-          <InteractiveSection responseCorrect={responseCorrect}>
+          <InteractiveSection responseCorrect={responseCorrect} uiStyle={uiStyle}>
             <Image
               canDrag={!disabled}
               answers={answersToShow}