@pie-element/image-cloze-association 6.2.2-next.9 → 6.2.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.2.1...@pie-element/image-cloze-association@6.2.2) (2024-11-15)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4401, PD-4441, PD-4319, PD-4394, PD-3687 ([f1f0af3](https://github.com/pie-framework/pie-elements/commit/f1f0af31f3c6fba54ca3a378dea3b8b32d8ebb87))
+* **ica:** Misalignment of answer choices and response areas PD-4386 ([c89b494](https://github.com/pie-framework/pie-elements/commit/c89b49441b65ea4c87091ff2fecdb74a5d9b0f38))
+
+
+
+
+
 ## [6.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.2.0...@pie-element/image-cloze-association@6.2.1) (2024-11-01)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.1.1...@pie-element/image-cloze-association-configure@6.1.2) (2024-11-15)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4401, PD-4441, PD-4319, PD-4394, PD-3687 ([f1f0af3](https://github.com/pie-framework/pie-elements/commit/f1f0af31f3c6fba54ca3a378dea3b8b32d8ebb87))
+
+
+
+
+
 ## [6.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.1.0...@pie-element/image-cloze-association-configure@6.1.1) (2024-11-01)
 
 

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-configure",
   "private": true,
-  "version": "6.1.1",
+  "version": "6.1.2",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.1.3",
+    "@pie-lib/pie-toolbox": "2.2.0",
     "debug": "^3.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.0.8...@pie-element/image-cloze-association-controller@5.0.9) (2024-11-15)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4401, PD-4441, PD-4319, PD-4394, PD-3687 ([f1f0af3](https://github.com/pie-framework/pie-elements/commit/f1f0af31f3c6fba54ca3a378dea3b8b32d8ebb87))
+
+
+
+
+
 ## [5.0.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.0.7...@pie-element/image-cloze-association-controller@5.0.8) (2024-11-01)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-controller",
   "private": true,
-  "version": "5.0.8",
+  "version": "5.0.9",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.1.3",
+    "@pie-lib/pie-toolbox": "2.2.0",
     "debug": "^4.1.1",
     "humps": "^2.0.1",
     "lodash": "^4.17.15"

package/lib/image-container.js

@@ -66,7 +66,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           responseAreaFill = _this$props.responseAreaFill,
           answerChoiceTransparency = _this$props.answerChoiceTransparency,
           responseContainerPadding = _this$props.responseContainerPadding,
-          imageDropTargetPadding = _this$props.imageDropTargetPadding;
+          imageDropTargetPadding = _this$props.imageDropTargetPadding,
+          maxResponsePerZone = _this$props.maxResponsePerZone;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("img", {
@@ -102,7 +103,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           responseAreaFill: responseAreaFill,
           answerChoiceTransparency: answerChoiceTransparency,
           responseContainerPadding: responseContainerPadding,
-          imageDropTargetPadding: imageDropTargetPadding
+          imageDropTargetPadding: imageDropTargetPadding,
+          maxResponsePerZone: maxResponsePerZone
         });
       }));
     }
@@ -124,7 +126,8 @@ ImageContainer.propTypes = {
   answerChoiceTransparency: _propTypes["default"].bool,
   responseAreaFill: _propTypes["default"].string,
   responseContainerPadding: _propTypes["default"].string,
-  imageDropTargetPadding: _propTypes["default"].string
+  imageDropTargetPadding: _propTypes["default"].string,
+  maxResponsePerZone: _propTypes["default"].number
 };
 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","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","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      image: { height, src, width } = {},\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n      responseAreaFill,\n      answerChoiceTransparency,\n      responseContainerPadding,\n      imageDropTargetPadding,\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <img src={src} height={height} width={width} alt={'Image not found'} />\n\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              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              answerChoiceTransparency={answerChoiceTransparency}\n              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\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  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  answerChoiceTransparency: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n};\n\nImageContainer.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  base: {\n    margin: theme.spacing.unit * 2,\n    position: 'relative',\n    width: 'fit-content',\n  },\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","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","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","number","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      image: { height, src, width } = {},\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n      responseAreaFill,\n      answerChoiceTransparency,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      maxResponsePerZone,\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <img src={src} height={height} width={width} alt={'Image not found'} />\n\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              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              answerChoiceTransparency={answerChoiceTransparency}\n              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\n              maxResponsePerZone={maxResponsePerZone}\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  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  answerChoiceTransparency: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nImageContainer.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  base: {\n    margin: theme.spacing.unit * 2,\n    position: 'relative',\n    width: 'fit-content',\n  },\n});\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}

package/lib/image-drop-target.js

@@ -85,12 +85,13 @@ var ImageDropTarget = /*#__PURE__*/function (_React$Component) {
           responseContainerPadding = _this$props.responseContainerPadding,
           imageDropTargetPadding = _this$props.imageDropTargetPadding,
           connectDropTarget = _this$props.connectDropTarget,
-          answerChoiceTransparency = _this$props.answerChoiceTransparency;
+          answerChoiceTransparency = _this$props.answerChoiceTransparency,
+          maxResponsePerZone = _this$props.maxResponsePerZone;
       var shouldHaveSmallPadding = this.state.shouldHaveSmallPadding;
       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({
-        padding: responseContainerPadding
+        padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding
       }, containerStyle), responseAreaFill && {
         backgroundColor: responseAreaFill
       });
@@ -149,7 +150,8 @@ ImageDropTarget.propTypes = {
   responseAreaFill: _propTypes["default"].string,
   answerChoiceTransparency: _propTypes["default"].bool,
   responseContainerPadding: _propTypes["default"].string,
-  imageDropTargetPadding: _propTypes["default"].string
+  imageDropTargetPadding: _propTypes["default"].string,
+  maxResponsePerZone: _propTypes["default"].number
 };
 ImageDropTarget.defaultProps = {
   answer: {},

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","shouldHaveSmallPadding","props","answers","canDrag","classes","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","connectDropTarget","answerChoiceTransparency","state","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","padding","backgroundColor","ref","dropContainerHeight","getBoundingClientRect","height","dropContainerResponsesHeight","setState","length","map","answer","React","Component","propTypes","PropTypes","object","array","bool","isRequired","func","onDrop","string","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","boxSizing","border","text","Styled","tileSource","hover","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\nclass ImageDropTarget extends React.Component {\n  state = {\n    shouldHaveSmallPadding: false,\n  }\n\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      containerStyle,\n      draggingElement,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      showDashedBorder,\n      responseAreaFill,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      // dnd-related props\n      connectDropTarget,\n      answerChoiceTransparency\n    } = this.props;\n    const { shouldHaveSmallPadding } = this.state;\n\n    const containerClasses = cx(classes.responseContainer, {\n      [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,\n      [classes.responseContainerActive]: !!draggingElement.id,\n    });\n\n    const updatedContainerStyle = {\n      padding: responseContainerPadding,\n      ...containerStyle,\n      ...(responseAreaFill && { backgroundColor: responseAreaFill })\n    };\n\n    return connectDropTarget(\n      <div\n        className={containerClasses}\n        style={updatedContainerStyle}\n        ref={ref => {\n          this.dropContainerHeight = ref?.getBoundingClientRect().height;\n\n          // If answers area is higher than the initial established response zone,\n          // then make sure to use a smaller padding.\n          // Only reset the state if needed to prevent maximum callstack exceeded\n          if (this.dropContainerHeight < this.dropContainerResponsesHeight && !shouldHaveSmallPadding) {\n            this.setState({ shouldHaveSmallPadding: true });\n          }\n        }}\n      >\n        {answers.length ? (\n          <div\n            className={classes.answers}\n            ref={ref => {\n              this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;\n            }}\n          >\n            {answers.map((answer) => (\n              <PossibleResponse\n                key={answer.id}\n                data={answer}\n                canDrag={canDrag}\n                onDragBegin={() => onDragAnswerBegin(answer)}\n                onDragEnd={onDragAnswerEnd}\n                answerChoiceTransparency={answerChoiceTransparency}\n                containerStyle={{\n                  padding: imageDropTargetPadding\n                    ? imageDropTargetPadding\n                    : shouldHaveSmallPadding\n                      ? '2px'\n                      : '6px 10px',\n                }}\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>,\n    );\n  }\n}\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  answers: PropTypes.array,\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  connectDropTarget: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  answerChoiceTransparency: PropTypes.bool,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {},\n  responseContainerPadding: '10px',\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    boxSizing: 'border-box'\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","shouldHaveSmallPadding","props","answers","canDrag","classes","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","connectDropTarget","answerChoiceTransparency","maxResponsePerZone","state","containerClasses","responseContainer","responseContainerDashed","id","responseContainerActive","updatedContainerStyle","padding","backgroundColor","ref","dropContainerHeight","getBoundingClientRect","height","dropContainerResponsesHeight","setState","length","map","answer","React","Component","propTypes","PropTypes","object","array","bool","isRequired","func","onDrop","string","number","defaultProps","styles","display","flexWrap","dragOverContainer","color","background","pointerEvents","width","position","boxSizing","border","text","Styled","tileSource","hover","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\nclass ImageDropTarget extends React.Component {\n  state = {\n    shouldHaveSmallPadding: false,\n  }\n\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      containerStyle,\n      draggingElement,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      showDashedBorder,\n      responseAreaFill,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      // dnd-related props\n      connectDropTarget,\n      answerChoiceTransparency,\n      maxResponsePerZone,\n    } = this.props;\n    const { shouldHaveSmallPadding } = this.state;\n\n    const containerClasses = cx(classes.responseContainer, {\n      [classes.responseContainerDashed]: showDashedBorder && !draggingElement.id,\n      [classes.responseContainerActive]: !!draggingElement.id,\n    });\n\n    const updatedContainerStyle = {\n      padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n      ...containerStyle,\n      ...(responseAreaFill && { backgroundColor: responseAreaFill })\n    };\n\n    return connectDropTarget(\n      <div\n        className={containerClasses}\n        style={updatedContainerStyle}\n        ref={ref => {\n          this.dropContainerHeight = ref?.getBoundingClientRect().height;\n\n          // If answers area is higher than the initial established response zone,\n          // then make sure to use a smaller padding.\n          // Only reset the state if needed to prevent maximum callstack exceeded\n          if (this.dropContainerHeight < this.dropContainerResponsesHeight && !shouldHaveSmallPadding) {\n            this.setState({ shouldHaveSmallPadding: true });\n          }\n        }}\n      >\n        {answers.length ? (\n          <div\n            className={classes.answers}\n            ref={ref => {\n              this.dropContainerResponsesHeight = ref?.getBoundingClientRect().height;\n            }}\n          >\n            {answers.map((answer) => (\n              <PossibleResponse\n                key={answer.id}\n                data={answer}\n                canDrag={canDrag}\n                onDragBegin={() => onDragAnswerBegin(answer)}\n                onDragEnd={onDragAnswerEnd}\n                answerChoiceTransparency={answerChoiceTransparency}\n                containerStyle={{\n                  padding: imageDropTargetPadding\n                    ? imageDropTargetPadding\n                    : shouldHaveSmallPadding\n                      ? '2px'\n                      : '6px 10px',\n                }}\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>,\n    );\n  }\n}\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  answers: PropTypes.array,\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  connectDropTarget: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  answerChoiceTransparency: PropTypes.bool,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {},\n  responseContainerPadding: '10px',\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    boxSizing: 'border-box'\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

@@ -381,7 +381,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         showDashedBorder: showDashedBorder,
         responseAreaFill: responseAreaFill,
         responseContainerPadding: responseContainerPadding,
-        imageDropTargetPadding: imageDropTargetPadding
+        imageDropTargetPadding: imageDropTargetPadding,
+        maxResponsePerZone: maxResponsePerZone
       })) : /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
         responseCorrect: responseCorrect,
         uiStyle: uiStyle
@@ -399,7 +400,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         responseAreaFill: responseAreaFill,
         answerChoiceTransparency: answerChoiceTransparency,
         responseContainerPadding: responseContainerPadding,
-        imageDropTargetPadding: imageDropTargetPadding
+        imageDropTargetPadding: imageDropTargetPadding,
+        maxResponsePerZone: maxResponsePerZone
       }), 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","extraCSSRules","image","responseAreaFill","responseCorrect","validation","prompt","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","minWidth","width","React","Component","WarningInfo","warning","margin","padding","display","alignItems","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, UiLayout, 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, maxResponsePerZone } = this.state;\n    let { possibleResponses } = 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 ? possibleResponses : 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        extraCSSRules,\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        answerChoiceTransparency,\n        responseContainerPadding,\n        imageDropTargetPadding,\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,\n      count: maxResponsePerZone,\n    });\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      <UiLayout extraCSSRules={extraCSSRules} 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\n          show={showToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleCorrect}\n          language={language}\n        />\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              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\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              answerChoiceTransparency={answerChoiceTransparency}\n              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\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              answerChoiceTransparency={answerChoiceTransparency}\n              customStyle={{ minWidth: image?.width || 'fit-content' }}\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      </UiLayout>\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","extraCSSRules","image","responseAreaFill","responseCorrect","validation","prompt","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","minWidth","width","React","Component","WarningInfo","warning","margin","padding","display","alignItems","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, UiLayout, 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, maxResponsePerZone } = this.state;\n    let { possibleResponses } = 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 ? possibleResponses : 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        extraCSSRules,\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        answerChoiceTransparency,\n        responseContainerPadding,\n        imageDropTargetPadding,\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,\n      count: maxResponsePerZone,\n    });\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      <UiLayout extraCSSRules={extraCSSRules} 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\n          show={showToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleCorrect}\n          language={language}\n        />\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              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\n              maxResponsePerZone={maxResponsePerZone}\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              answerChoiceTransparency={answerChoiceTransparency}\n              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\n              maxResponsePerZone={maxResponsePerZone}\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              answerChoiceTransparency={answerChoiceTransparency}\n              customStyle={{ minWidth: image?.width || 'fit-content' }}\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      </UiLayout>\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": "6.2.2-next.9+ace661f34",
+  "version": "6.2.2",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.1.3",
+    "@pie-lib/pie-toolbox": "2.2.0",
     "classnames": "^2.2.6",
     "humps": "^2.0.1",
     "prop-types": "^15.6.1",
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "ace661f34b6e59271949e848ce2474dce65c4d64",
+  "gitHead": "20cc12d3d06ad5318bfa4c6994cf7c7614dfed2f",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/image-container.jsx

@@ -21,6 +21,7 @@ class ImageContainer extends Component {
       answerChoiceTransparency,
       responseContainerPadding,
       imageDropTargetPadding,
+      maxResponsePerZone,
     } = this.props;
 
     return (
@@ -54,6 +55,7 @@ class ImageContainer extends Component {
               answerChoiceTransparency={answerChoiceTransparency}
               responseContainerPadding={responseContainerPadding}
               imageDropTargetPadding={imageDropTargetPadding}
+              maxResponsePerZone={maxResponsePerZone}
             />
           );
         })}
@@ -77,6 +79,7 @@ ImageContainer.propTypes = {
   responseAreaFill: PropTypes.string,
   responseContainerPadding: PropTypes.string,
   imageDropTargetPadding: PropTypes.string,
+  maxResponsePerZone: PropTypes.number,
 };
 
 ImageContainer.defaultProps = {

package/src/image-drop-target.jsx

@@ -28,7 +28,8 @@ class ImageDropTarget extends React.Component {
       imageDropTargetPadding,
       // dnd-related props
       connectDropTarget,
-      answerChoiceTransparency
+      answerChoiceTransparency,
+      maxResponsePerZone,
     } = this.props;
     const { shouldHaveSmallPadding } = this.state;
 
@@ -38,7 +39,7 @@ class ImageDropTarget extends React.Component {
     });
 
     const updatedContainerStyle = {
-      padding: responseContainerPadding,
+      padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,
       ...containerStyle,
       ...(responseAreaFill && { backgroundColor: responseAreaFill })
     };
@@ -105,6 +106,7 @@ ImageDropTarget.propTypes = {
   answerChoiceTransparency: PropTypes.bool,
   responseContainerPadding: PropTypes.string,
   imageDropTargetPadding: PropTypes.string,
+  maxResponsePerZone: PropTypes.number,
 };
 
 ImageDropTarget.defaultProps = {

package/src/root.jsx

@@ -307,6 +307,7 @@ class ImageClozeAssociationComponent extends React.Component {
               responseAreaFill={responseAreaFill}
               responseContainerPadding={responseContainerPadding}
               imageDropTargetPadding={imageDropTargetPadding}
+              maxResponsePerZone={maxResponsePerZone}
             />
           </InteractiveSection>
         ) : (
@@ -326,6 +327,7 @@ class ImageClozeAssociationComponent extends React.Component {
               answerChoiceTransparency={answerChoiceTransparency}
               responseContainerPadding={responseContainerPadding}
               imageDropTargetPadding={imageDropTargetPadding}
+              maxResponsePerZone={maxResponsePerZone}
             />
 
             {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}