@pie-element/image-cloze-association 5.21.7 → 5.21.8-next.5

package/docs/demo/generate.js

@@ -8,6 +8,7 @@ exports.model = (id, element) => ({
     scale: false, // this is not used
     height: 313,
   },
+  responseAreaFill: 'rgba(240,255,224,0.9)',
   response_container: {
     // this is not used
     wordwrap: true,
@@ -65,7 +66,6 @@ exports.model = (id, element) => ({
       ],
     },
   },
-  showDashedBorder: false,
   partialScoring: false,
   shuffle: true,
   rubricEnabled: false,

package/docs/pie-schema.json

@@ -216,6 +216,11 @@
       ],
       "title": "uiStyle"
     },
+    "responseAreaFill": {
+      "description": "Indicates the background color of the response area",
+      "type": "string",
+      "title": "responseAreaFill"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",

package/docs/pie-schema.json.md

@@ -172,6 +172,10 @@ This element must be one of the following enum values:
 
 ## `fontsize` (string, required)
 
+# `responseAreaFill` (string)
+
+Indicates the background color of the response area
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.

package/lib/image-container.js

@@ -63,7 +63,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           onDragAnswerBegin = _this$props.onDragAnswerBegin,
           onDragAnswerEnd = _this$props.onDragAnswerEnd,
           responseContainers = _this$props.responseContainers,
-          showDashedBorder = _this$props.showDashedBorder;
+          showDashedBorder = _this$props.showDashedBorder,
+          responseAreaFill = _this$props.responseAreaFill;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("img", {
@@ -95,7 +96,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           },
           onDragAnswerBegin: onDragAnswerBegin,
           onDragAnswerEnd: onDragAnswerEnd,
-          showDashedBorder: showDashedBorder
+          showDashedBorder: showDashedBorder,
+          responseAreaFill: responseAreaFill
         });
       }));
     }
@@ -114,7 +116,8 @@ ImageContainer.propTypes = {
   onDragAnswerBegin: _propTypes["default"].func.isRequired,
   onDragAnswerEnd: _propTypes["default"].func.isRequired,
   responseContainers: _propTypes["default"].array.isRequired,
-  showDashedBorder: _propTypes["default"].bool
+  showDashedBorder: _propTypes["default"].bool,
+  responseAreaFill: _propTypes["default"].string
 };
 ImageContainer.defaultProps = {
   classes: {},

package/lib/image-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-container.jsx"],"names":["ImageContainer","props","answers","canDrag","classes","draggingElement","duplicateResponses","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","base","map","r","i","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","left","top","id","item","Component","propTypes","PropTypes","array","isRequired","bool","object","shape","func","defaultProps","styles","theme","margin","spacing","unit","position"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport ImageDropTarget from './image-drop-target';\n\nclass ImageContainer extends Component {\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      draggingElement,\n      duplicateResponses,\n      image: { height, src, width } = {},\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <img src={src} height={height} width={width} />\n        {(responseContainers || []).map((r, i) => {\n          const rHeight = (r.height.replace('%', '') / 100) * height;\n          const rWidth = (r.width.replace('%', '') / 100) * width;\n          const rLeft = (r.x / 100) * width;\n          const rTop = (r.y / 100) * height;\n          const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n          return (\n            <ImageDropTarget\n              answers={answersParsed}\n              canDrag={canDrag}\n              containerStyle={{\n                height: rHeight,\n                width: rWidth,\n                left: rLeft,\n                top: rTop,\n              }}\n              duplicateResponses={duplicateResponses}\n              key={r.id + i}\n              draggingElement={draggingElement}\n              onDrop={(item) => onAnswerSelect(item, r.index)}\n              onDragAnswerBegin={onDragAnswerBegin}\n              onDragAnswerEnd={onDragAnswerEnd}\n              showDashedBorder={showDashedBorder}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n}\n\nImageContainer.propTypes = {\n  answers: PropTypes.array.isRequired,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  draggingElement: PropTypes.shape({}).isRequired,\n  duplicateResponses: PropTypes.bool,\n  image: PropTypes.object.isRequired,\n  onAnswerSelect: PropTypes.func.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  responseContainers: PropTypes.array.isRequired,\n  showDashedBorder: PropTypes.bool,\n};\n\nImageContainer.defaultProps = {\n  classes: {},\n  duplicateResponses: false,\n};\n\nconst styles = (theme) => ({\n  base: {\n    margin: theme.spacing.unit * 2,\n    position: 'relative',\n  },\n});\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}
+{"version":3,"sources":["../src/image-container.jsx"],"names":["ImageContainer","props","answers","canDrag","classes","draggingElement","duplicateResponses","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","base","map","r","i","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","left","top","id","item","Component","propTypes","PropTypes","array","isRequired","bool","object","shape","func","string","defaultProps","styles","theme","margin","spacing","unit","position"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport ImageDropTarget from './image-drop-target';\n\nclass ImageContainer extends Component {\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      draggingElement,\n      duplicateResponses,\n      image: { height, src, width } = {},\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n      responseAreaFill\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <img src={src} height={height} width={width} />\n        {(responseContainers || []).map((r, i) => {\n          const rHeight = (r.height.replace('%', '') / 100) * height;\n          const rWidth = (r.width.replace('%', '') / 100) * width;\n          const rLeft = (r.x / 100) * width;\n          const rTop = (r.y / 100) * height;\n          const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n          return (\n            <ImageDropTarget\n              answers={answersParsed}\n              canDrag={canDrag}\n              containerStyle={{\n                height: rHeight,\n                width: rWidth,\n                left: rLeft,\n                top: rTop,\n              }}\n              duplicateResponses={duplicateResponses}\n              key={r.id + i}\n              draggingElement={draggingElement}\n              onDrop={(item) => onAnswerSelect(item, r.index)}\n              onDragAnswerBegin={onDragAnswerBegin}\n              onDragAnswerEnd={onDragAnswerEnd}\n              showDashedBorder={showDashedBorder}\n              responseAreaFill={responseAreaFill}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n}\n\nImageContainer.propTypes = {\n  answers: PropTypes.array.isRequired,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  draggingElement: PropTypes.shape({}).isRequired,\n  duplicateResponses: PropTypes.bool,\n  image: PropTypes.object.isRequired,\n  onAnswerSelect: PropTypes.func.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  responseContainers: PropTypes.array.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n};\n\nImageContainer.defaultProps = {\n  classes: {},\n  duplicateResponses: false,\n};\n\nconst styles = (theme) => ({\n  base: {\n    margin: theme.spacing.unit * 2,\n    position: 'relative',\n  },\n});\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}

package/lib/image-drop-target.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,11 +19,19 @@ var _styles = require("@material-ui/core/styles");
 
 var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _possibleResponse = _interopRequireDefault(require("./possible-response"));
 
 var _constants = _interopRequireDefault(require("./constants"));
 
+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 = 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; }
+
 var ImageDropTarget = function ImageDropTarget(_ref) {
+  var _cx;
+
   var answers = _ref.answers,
       canDrag = _ref.canDrag,
       classes = _ref.classes,
@@ -31,10 +41,17 @@ var ImageDropTarget = function ImageDropTarget(_ref) {
       onDragAnswerBegin = _ref.onDragAnswerBegin,
       onDragAnswerEnd = _ref.onDragAnswerEnd,
       showDashedBorder = _ref.showDashedBorder,
+      responseAreaFill = _ref.responseAreaFill,
       connectDropTarget = _ref.connectDropTarget;
+  var containerClasses = (0, _classnames["default"])(classes.responseContainer, (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.responseContainerDashed, showDashedBorder && !draggingElement.id), (0, _defineProperty2["default"])(_cx, classes.responseContainerActive, draggingElement.id), _cx));
+
+  var updatedContainerStyle = _objectSpread(_objectSpread({}, containerStyle), responseAreaFill ? {
+    backgroundColor: responseAreaFill
+  } : {});
+
   return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
-    className: "\n        ".concat(classes.responseContainer, "\n        ").concat(showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : '', "\n        ").concat(draggingElement.id ? classes.responseContainerActive : '', "\n      "),
-    style: containerStyle
+    className: containerClasses,
+    style: updatedContainerStyle
   }, answers.length || duplicateResponses && answers.length ? /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.answers
   }, (answers || []).map(function (answer) {
@@ -62,7 +79,8 @@ ImageDropTarget.propTypes = {
   onDragAnswerBegin: _propTypes["default"].func.isRequired,
   onDragAnswerEnd: _propTypes["default"].func.isRequired,
   onDrop: _propTypes["default"].func.isRequired,
-  showDashedBorder: _propTypes["default"].bool
+  showDashedBorder: _propTypes["default"].bool,
+  responseAreaFill: _propTypes["default"].string
 };
 ImageDropTarget.defaultProps = {
   answer: {},

package/lib/image-drop-target.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","connectDropTarget","responseContainer","id","responseContainerDashed","responseContainerActive","length","map","answer","isCorrect","undefined","borderWidth","propTypes","PropTypes","object","bool","isRequired","func","onDrop","defaultProps","styles","display","flexWrap","dragOverContainer","backgroundColor","color","background","pointerEvents","width","position","border","text","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","item","getItem","c","types","response","connect","dropTarget","dragItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst ImageDropTarget = ({\n  answers,\n  canDrag,\n  classes,\n  containerStyle,\n  draggingElement,\n  duplicateResponses,\n  onDragAnswerBegin,\n  onDragAnswerEnd,\n  showDashedBorder,\n  // dnd-related props\n  connectDropTarget,\n}) =>\n  connectDropTarget(\n    <div\n      className={`\n        ${classes.responseContainer}\n        ${showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : ''}\n        ${draggingElement.id ? classes.responseContainerActive : ''}\n      `}\n      style={containerStyle}\n    >\n      {answers.length || (duplicateResponses && answers.length) ? (\n        <div className={classes.answers}>\n          {(answers || []).map((answer) => (\n            <PossibleResponse\n              canDrag={canDrag}\n              containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}\n              key={answer.id}\n              data={answer}\n              onDragBegin={() => onDragAnswerBegin(answer)}\n              onDragEnd={onDragAnswerEnd}\n            />\n          ))}\n        </div>\n      ) : null}\n    </div>,\n  );\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {},\n};\n\nconst styles = () => ({\n  answers: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  dragOverContainer: {\n    backgroundColor: color.background(),\n    pointerEvents: 'none',\n    width: 'fit-content',\n  },\n  responseContainer: {\n    position: 'absolute',\n  },\n  responseContainerActive: {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  responseContainerDashed: {\n    border: `2px dashed ${color.text()}`,\n  },\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onDrop(item);\n  },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n  dragItem: monitor.getItem(),\n}))(Styled);\n"],"file":"image-drop-target.js"}
+{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","connectDropTarget","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","backgroundColor","length","map","answer","isCorrect","undefined","borderWidth","propTypes","PropTypes","object","bool","isRequired","func","onDrop","string","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","border","text","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","item","getItem","c","types","response","connect","dropTarget","dragItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst ImageDropTarget = ({\n  answers,\n  canDrag,\n  classes,\n  containerStyle,\n  draggingElement,\n  duplicateResponses,\n  onDragAnswerBegin,\n  onDragAnswerEnd,\n  showDashedBorder,\n  responseAreaFill,\n  // dnd-related props\n  connectDropTarget,\n}) => {\n  const containerClasses = cx(classes.responseContainer, {\n    [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,\n    [classes.responseContainerActive]: draggingElement.id,\n  });\n\n  const updatedContainerStyle = {\n    ...containerStyle,\n    ...(responseAreaFill ? { backgroundColor: responseAreaFill } : {})\n  };\n\n  return connectDropTarget(\n    <div\n      className={containerClasses}\n      style={updatedContainerStyle}\n    >\n      {answers.length || (duplicateResponses && answers.length) ? (\n        <div className={classes.answers}>\n          {(answers || []).map((answer) => (\n            <PossibleResponse\n              canDrag={canDrag}\n              containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}\n              key={answer.id}\n              data={answer}\n              onDragBegin={() => onDragAnswerBegin(answer)}\n              onDragEnd={onDragAnswerEnd}\n            />\n          ))}\n        </div>\n      ) : null}\n    </div>,\n  );\n}\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {},\n};\n\nconst styles = () => ({\n  answers: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  dragOverContainer: {\n    backgroundColor: color.background(),\n    pointerEvents: 'none',\n    width: 'fit-content',\n  },\n  responseContainer: {\n    position: 'absolute',\n  },\n  responseContainerActive: {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  responseContainerDashed: {\n    border: `2px dashed ${color.text()}`,\n  },\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onDrop(item);\n  },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n  dragItem: monitor.getItem(),\n}))(Styled);\n"],"file":"image-drop-target.js"}

package/lib/root.js

@@ -292,6 +292,7 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props3$model.disabled,
           duplicateResponses = _this$props3$model.duplicateResponses,
           image = _this$props3$model.image,
+          responseAreaFill = _this$props3$model.responseAreaFill,
           stimulus = _this$props3$model.stimulus,
           responseCorrect = _this$props3$model.responseCorrect,
           validation = _this$props3$model.validation,
@@ -374,7 +375,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         onDragAnswerBegin: this.beginDrag,
         onDragAnswerEnd: this.handleOnDragEnd,
         responseContainers: responseContainers,
-        showDashedBorder: showDashedBorder
+        showDashedBorder: showDashedBorder,
+        responseAreaFill: responseAreaFill
       })) : /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
         responseCorrect: responseCorrect,
         uiStyle: uiStyle
@@ -388,7 +390,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         onDragAnswerBegin: this.beginDrag,
         onDragAnswerEnd: this.handleOnDragEnd,
         responseContainers: responseContainers,
-        showDashedBorder: showDashedBorder
+        showDashedBorder: showDashedBorder,
+        responseAreaFill: responseAreaFill
       }), maxResponsePerZoneWarning && /*#__PURE__*/_react["default"].createElement(WarningInfo, {
         message: warningMessage
       }), /*#__PURE__*/_react["default"].createElement(_possibleResponses2["default"], {

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","possibleResponses","answer","index","findIndex","response","slice","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","push","_","max","map","c","parseInt","isNaN","filterPossibleAnswers","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","groupBy","grp","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  filterPossibleAnswers = (possibleResponses, answer) => {\n    const index = possibleResponses.findIndex(response => response.value === answer.value);\n\n    if (index >= 0) {\n      return [\n        ...possibleResponses.slice(0, index),       // Elements before the found item\n        ...possibleResponses.slice(index + 1)       // Elements after the found item\n      ];\n    }\n\n    return possibleResponses;\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    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          : this.filterPossibleAnswers(possibleResponses, answer)\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"}
+{"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","possibleResponses","answer","index","findIndex","response","slice","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","push","_","max","map","c","parseInt","isNaN","filterPossibleAnswers","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","groupBy","grp","flatMap","possibleResponsesFiltered","find","classes","disabled","image","responseAreaFill","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  filterPossibleAnswers = (possibleResponses, answer) => {\n    const index = possibleResponses.findIndex(response => response.value === answer.value);\n\n    if (index >= 0) {\n      return [\n        ...possibleResponses.slice(0, index),       // Elements before the found item\n        ...possibleResponses.slice(index + 1)       // Elements after the found item\n      ];\n    }\n\n    return possibleResponses;\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    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          : this.filterPossibleAnswers(possibleResponses, answer)\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        responseAreaFill,\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              responseAreaFill={responseAreaFill}\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              responseAreaFill={responseAreaFill}\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.21.7",
+  "version": "5.21.8-next.5+4785339fe",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "9729f72c6add40499a7a42667ce7125e0c137004",
+  "gitHead": "4785339fe53a1da399e305bc1f97e7db81ebd00c",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/image-container.jsx

@@ -18,6 +18,7 @@ class ImageContainer extends Component {
       onDragAnswerEnd,
       responseContainers,
       showDashedBorder,
+      responseAreaFill
     } = this.props;
 
     return (
@@ -47,6 +48,7 @@ class ImageContainer extends Component {
               onDragAnswerBegin={onDragAnswerBegin}
               onDragAnswerEnd={onDragAnswerEnd}
               showDashedBorder={showDashedBorder}
+              responseAreaFill={responseAreaFill}
             />
           );
         })}
@@ -67,6 +69,7 @@ ImageContainer.propTypes = {
   onDragAnswerEnd: PropTypes.func.isRequired,
   responseContainers: PropTypes.array.isRequired,
   showDashedBorder: PropTypes.bool,
+  responseAreaFill: PropTypes.string,
 };
 
 ImageContainer.defaultProps = {

package/src/image-drop-target.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { DropTarget } from '@pie-lib/pie-toolbox/drag';
 import { withStyles } from '@material-ui/core/styles';
 import { color } from '@pie-lib/pie-toolbox/render-ui';
+import cx from 'classnames';
 
 import PossibleResponse from './possible-response';
 import c from './constants';
@@ -17,17 +18,24 @@ const ImageDropTarget = ({
   onDragAnswerBegin,
   onDragAnswerEnd,
   showDashedBorder,
+  responseAreaFill,
   // dnd-related props
   connectDropTarget,
-}) =>
-  connectDropTarget(
+}) => {
+  const containerClasses = cx(classes.responseContainer, {
+    [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,
+    [classes.responseContainerActive]: draggingElement.id,
+  });
+
+  const updatedContainerStyle = {
+    ...containerStyle,
+    ...(responseAreaFill ? { backgroundColor: responseAreaFill } : {})
+  };
+
+  return connectDropTarget(
     <div
-      className={`
-        ${classes.responseContainer}
-        ${showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : ''}
-        ${draggingElement.id ? classes.responseContainerActive : ''}
-      `}
-      style={containerStyle}
+      className={containerClasses}
+      style={updatedContainerStyle}
     >
       {answers.length || (duplicateResponses && answers.length) ? (
         <div className={classes.answers}>
@@ -45,6 +53,7 @@ const ImageDropTarget = ({
       ) : null}
     </div>,
   );
+}
 
 ImageDropTarget.propTypes = {
   answer: PropTypes.object,
@@ -56,6 +65,7 @@ ImageDropTarget.propTypes = {
   onDragAnswerEnd: PropTypes.func.isRequired,
   onDrop: PropTypes.func.isRequired,
   showDashedBorder: PropTypes.bool,
+  responseAreaFill: PropTypes.string
 };
 
 ImageDropTarget.defaultProps = {

package/src/root.jsx

@@ -212,6 +212,7 @@ class ImageClozeAssociationComponent extends React.Component {
         disabled,
         duplicateResponses,
         image,
+        responseAreaFill,
         stimulus,
         responseCorrect,
         validation,
@@ -293,6 +294,7 @@ class ImageClozeAssociationComponent extends React.Component {
               onDragAnswerEnd={this.handleOnDragEnd}
               responseContainers={responseContainers}
               showDashedBorder={showDashedBorder}
+              responseAreaFill={responseAreaFill}
             />
           </InteractiveSection>
         ) : (
@@ -308,6 +310,7 @@ class ImageClozeAssociationComponent extends React.Component {
               onDragAnswerEnd={this.handleOnDragEnd}
               responseContainers={responseContainers}
               showDashedBorder={showDashedBorder}
+              responseAreaFill={responseAreaFill}
             />
 
             {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}