@pie-element/image-cloze-association 6.4.1-next.4 → 6.5.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.4.0...@pie-element/image-cloze-association@6.5.0) (2024-12-10)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4388, PD-4548 ([0e7dad4](https://github.com/pie-framework/pie-elements/commit/0e7dad48f541e7c5c10212e58c6ae846c60be93c))
+* **categorize:** delete class PD-4389 ([a04fbf3](https://github.com/pie-framework/pie-elements/commit/a04fbf3663fadb6b094bbcd72cd3778f62568124))
+* conclude merge with develop ([522c122](https://github.com/pie-framework/pie-elements/commit/522c122050c2b2a9c158f838f8dffc8d77ff1fdf))
+* delete unused style ([66d9601](https://github.com/pie-framework/pie-elements/commit/66d96015f37a0c72bf7de6332db947661f3d68e3))
+
+
+### Features
+
+* **categorize, hotspot, image-cloze-association:** extent fontSizeFactor to new elements PD-4389 ([c6480fb](https://github.com/pie-framework/pie-elements/commit/c6480fb201b6fd35edf50f46ef8e50b9f711f4be))
+* **image-cloze-association:** increase padding and margins for non-image reponse PD-4375 ([a089e28](https://github.com/pie-framework/pie-elements/commit/a089e28aa7a4161e2dd14b87a848bfc9cdc85911))
+
+
+
+
+
 # [6.4.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.3.0...@pie-element/image-cloze-association@6.4.0) (2024-12-05)
 
 

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.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.1.4...@pie-element/image-cloze-association-configure@6.1.5) (2024-12-10)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4388, PD-4548 ([0e7dad4](https://github.com/pie-framework/pie-elements/commit/0e7dad48f541e7c5c10212e58c6ae846c60be93c))
+
+
+
+
+
 ## [6.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.1.3...@pie-element/image-cloze-association-configure@6.1.4) (2024-12-05)
 
 

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-configure",
   "private": true,
-  "version": "6.1.4",
+  "version": "6.1.5",
   "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.4.0",
+    "@pie-lib/pie-toolbox": "2.4.1",
     "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.12](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.0.11...@pie-element/image-cloze-association-controller@5.0.12) (2024-12-10)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4388, PD-4548 ([0e7dad4](https://github.com/pie-framework/pie-elements/commit/0e7dad48f541e7c5c10212e58c6ae846c60be93c))
+
+
+
+
+
 ## [5.0.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.0.10...@pie-element/image-cloze-association-controller@5.0.11) (2024-12-05)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-controller",
   "private": true,
-  "version": "5.0.11",
+  "version": "5.0.12",
   "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.4.0",
+    "@pie-lib/pie-toolbox": "2.4.1",
     "debug": "^4.1.1",
     "humps": "^2.0.1",
     "lodash": "^4.17.15"

package/docs/pie-schema.json

@@ -236,6 +236,11 @@
       "type": "string",
       "title": "imageDropTargetPadding"
     },
+    "fontSizeFactor": {
+      "description": "Indicates font size adjustment factor",
+      "type": "number",
+      "title": "fontSizeFactor"
+    },
     "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

@@ -188,6 +188,10 @@ Indicates padding of the response container
 
 Indicates the padding of the image drop target
 
+# `fontSizeFactor` (number)
+
+Indicates font size adjustment factor
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.

package/lib/possible-response.js

@@ -70,19 +70,16 @@ var PossibleResponse = /*#__PURE__*/function (_React$Component) {
         bottom: '3px',
         right: '3px'
       };
-      var correctnessClass;
-
-      if (isCorrect === true) {
-        correctnessClass = 'baseCorrect';
-      } else if (isCorrect === false) {
-        correctnessClass = 'baseIncorrect';
-      }
-
+      var correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;
+      var imgRegex = /<img[^>]+src="([^">]+)"/;
+      var containsImage = imgRegex.test(data.value);
+      var containerClassNames = (0, _classnames["default"])([classes.base, (_ref2 = {}, (0, _defineProperty2["default"])(_ref2, classes.answerChoiceTransparency, answerChoiceTransparency), (0, _defineProperty2["default"])(_ref2, classes[correctnessClass], !!correctnessClass), (0, _defineProperty2["default"])(_ref2, classes.textAnswerChoiceStyle, !containsImage), _ref2)]);
+      var promptClassNames = (0, _classnames["default"])([classes.span, (0, _defineProperty2["default"])({}, classes.hiddenSpan, data.hidden)]);
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])([classes.base, (_ref2 = {}, (0, _defineProperty2["default"])(_ref2, classes.answerChoiceTransparency, answerChoiceTransparency), (0, _defineProperty2["default"])(_ref2, classes[correctnessClass], !!correctnessClass), _ref2)]),
+        className: containerClassNames,
         style: containerStyle
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: (0, _classnames["default"])([classes.span, (0, _defineProperty2["default"])({}, classes.hiddenSpan, data.hidden)]),
+        className: promptClassNames,
         prompt: data.value,
         tagName: "span"
       }), /*#__PURE__*/_react["default"].createElement(_evaluationIcon["default"], {
@@ -129,6 +126,10 @@ var styles = function styles() {
         pointerEvents: 'none'
       }
     },
+    textAnswerChoiceStyle: {
+      padding: '0 10px',
+      margin: '4px 6px !important'
+    },
     answerChoiceTransparency: {
       border: 'none',
       backgroundColor: "".concat(_renderUi.color.transparent()),

package/lib/possible-response.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","connectDragSource","containerStyle","data","answerChoiceTransparency","isCorrect","evaluationStyle","fontSize","position","bottom","right","correctnessClass","base","span","hiddenSpan","hidden","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","pointerEvents","transparent","baseCorrect","correct","baseIncorrect","incorrect","background","visibility","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { DragSource } from '@pie-lib/pie-toolbox/drag';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport { PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n  render() {\n    const { classes, connectDragSource, containerStyle, data, answerChoiceTransparency } = this.props;\n    const { isCorrect } = data || {};\n    const evaluationStyle = {\n      fontSize: 14,\n      position: 'absolute',\n      bottom: '3px',\n      right: '3px',\n    };\n    let correctnessClass;\n\n    if (isCorrect === true) {\n      correctnessClass = 'baseCorrect';\n    } else if (isCorrect === false) {\n      correctnessClass = 'baseIncorrect';\n    }\n\n    return connectDragSource(\n      <div\n        className={classNames([\n          classes.base,\n          {\n            [classes.answerChoiceTransparency]: answerChoiceTransparency,\n            [classes[correctnessClass]]: !!correctnessClass,\n          },\n        ])}\n        style={containerStyle}\n      >\n        <PreviewPrompt\n          className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}\n          prompt={data.value}\n          tagName=\"span\"\n        />\n        <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n      </div>,\n    );\n  }\n}\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  connectDragSource: PropTypes.func,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  answerChoiceTransparency: PropTypes.bool,\n};\n\nPossibleResponse.defaultProps = {\n  classes: {},\n  connectDragSource: () => {},\n  containerStyle: {},\n};\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    backgroundColor: color.white(),\n    border: `1px solid ${color.borderDark()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    width: 'fit-content',\n    '& span img':{\n      // Added for touch devices, for image content.\n      // This will prevent the context menu from appearing and not allowing other interactions with the image.\n      // If interactions with the image in the token will be requested we should handle only the context Menu.\n      pointerEvents: 'none',\n    }\n  },\n  answerChoiceTransparency: {\n    border: 'none',\n    backgroundColor: `${color.transparent()}`,\n\n    '&:hover': {\n      border: `1px solid ${color.borderDark()}`,\n    },\n  },\n  baseCorrect: {\n    border: `2px solid ${color.correct()} !important`,\n  },\n  baseIncorrect: {\n    border: `2px solid ${color.incorrect()} !important`,\n  },\n  span: {\n    backgroundColor: color.background(),\n  },\n  hiddenSpan: {\n    visibility: 'hidden',\n  },\n});\n\nconst Styled = withStyles(styles)(PossibleResponse);\n\nconst tileSource = {\n  canDrag(props) {\n    const { canDrag } = props;\n    return canDrag;\n  },\n  beginDrag(props) {\n    const {\n      data,\n      data: { id, value, containerIndex },\n      onDragBegin,\n    } = props;\n    onDragBegin(data);\n    return {\n      id,\n      value,\n      containerIndex,\n    };\n  },\n  endDrag(props) {\n    props.onDragEnd();\n  },\n};\n\nexport default DragSource(c.types.response, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(Styled);\n"],"file":"possible-response.js"}
+{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","connectDragSource","containerStyle","data","answerChoiceTransparency","isCorrect","evaluationStyle","fontSize","position","bottom","right","correctnessClass","undefined","imgRegex","containsImage","test","value","containerClassNames","base","textAnswerChoiceStyle","promptClassNames","span","hiddenSpan","hidden","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","pointerEvents","padding","margin","transparent","baseCorrect","correct","baseIncorrect","incorrect","background","visibility","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { DragSource } from '@pie-lib/pie-toolbox/drag';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport { PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n  render() {\n    const { classes, connectDragSource, containerStyle, data, answerChoiceTransparency } = this.props;\n    const { isCorrect } = data || {};\n    const evaluationStyle = {\n      fontSize: 14,\n      position: 'absolute',\n      bottom: '3px',\n      right: '3px',\n    };\n    const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;\n\n    const imgRegex = /<img[^>]+src=\"([^\">]+)\"/;\n    const containsImage = imgRegex.test(data.value);\n\n    const containerClassNames = classNames([\n      classes.base,\n      {\n        [classes.answerChoiceTransparency]: answerChoiceTransparency,\n        [classes[correctnessClass]]: !!correctnessClass,\n        [classes.textAnswerChoiceStyle]: !containsImage,\n      },\n    ]);\n\n    const promptClassNames = classNames([\n      classes.span,\n      { [classes.hiddenSpan]: data.hidden },\n    ]);\n\n    return connectDragSource(\n      <div className={containerClassNames} style={containerStyle}>\n        <PreviewPrompt\n          className={promptClassNames}\n          prompt={data.value}\n          tagName=\"span\"\n        />\n        <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n      </div>,\n    );\n  }\n}\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  connectDragSource: PropTypes.func,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  answerChoiceTransparency: PropTypes.bool,\n};\n\nPossibleResponse.defaultProps = {\n  classes: {},\n  connectDragSource: () => {},\n  containerStyle: {},\n};\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    backgroundColor: color.white(),\n    border: `1px solid ${color.borderDark()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    width: 'fit-content',\n    '& span img':{\n      // Added for touch devices, for image content.\n      // This will prevent the context menu from appearing and not allowing other interactions with the image.\n      // If interactions with the image in the token will be requested we should handle only the context Menu.\n      pointerEvents: 'none',\n    }\n  },\n  textAnswerChoiceStyle: {\n    padding: '0 10px',\n    margin: '4px 6px !important',\n  },\n  answerChoiceTransparency: {\n    border: 'none',\n    backgroundColor: `${color.transparent()}`,\n\n    '&:hover': {\n      border: `1px solid ${color.borderDark()}`,\n    },\n  },\n  baseCorrect: {\n    border: `2px solid ${color.correct()} !important`,\n  },\n  baseIncorrect: {\n    border: `2px solid ${color.incorrect()} !important`,\n  },\n  span: {\n    backgroundColor: color.background(),\n  },\n  hiddenSpan: {\n    visibility: 'hidden',\n  },\n});\n\nconst Styled = withStyles(styles)(PossibleResponse);\n\nconst tileSource = {\n  canDrag(props) {\n    const { canDrag } = props;\n    return canDrag;\n  },\n  beginDrag(props) {\n    const {\n      data,\n      data: { id, value, containerIndex },\n      onDragBegin,\n    } = props;\n    onDragBegin(data);\n    return {\n      id,\n      value,\n      containerIndex,\n    };\n  },\n  endDrag(props) {\n    props.onDragEnd();\n  },\n};\n\nexport default DragSource(c.types.response, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(Styled);\n"],"file":"possible-response.js"}

package/lib/root.js

@@ -71,9 +71,6 @@ var styles = function styles(theme) {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background()
     },
-    stimulus: {
-      fontSize: theme.typography.fontSize
-    },
     teacherInstructions: {
       marginBottom: theme.spacing.unit * 2
     },
@@ -301,7 +298,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           uiStyle = _this$props3$model$ui === void 0 ? {} : _this$props3$model$ui,
           answerChoiceTransparency = _this$props3$model.answerChoiceTransparency,
           responseContainerPadding = _this$props3$model.responseContainerPadding,
-          imageDropTargetPadding = _this$props3$model.imageDropTargetPadding;
+          imageDropTargetPadding = _this$props3$model.imageDropTargetPadding,
+          fontSizeFactor = _this$props3$model.fontSizeFactor;
       var _this$state3 = this.state,
           answers = _this$state3.answers,
           draggingElement = _this$state3.draggingElement,
@@ -347,7 +345,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
         extraCSSRules: extraCSSRules,
-        className: classes.main
+        className: classes.main,
+        fontSizeFactor: fontSizeFactor
       }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         className: classes.teacherInstructions,
         labels: {
@@ -360,7 +359,6 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         className: "prompt",
         prompt: prompt
       }), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        defaultClassName: classes.stimulus,
         prompt: stimulus
       }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
         show: showToggle,

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","undefined","filterPossibleAnswers","shouldNotPushInPossibleResponses","showCorrect","responseContainers","session","possibleResponsesWithIds","map","item","groupBy","grp","flatMap","possibleResponsesFiltered","find","classes","disabled","extraCSSRules","image","responseAreaFill","responseCorrect","validation","prompt","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","isEvaluateMode","showToggle","possibilityListPosition","isVertical","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","minWidth","width","height","React","Component","WarningInfo","warning","margin","padding","display","alignItems","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\nexport class 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: undefined,\n          id: shiftedItem.id || generateId(),\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    const { possibilityListPosition = 'bottom' } = uiStyle || {};\n    const isVertical = possibilityListPosition === 'left' || possibilityListPosition === 'right';\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={{\n                minWidth: isVertical ? '130px' : image?.width || 'fit-content',\n              }}\n              isVertical={isVertical}\n              minHeight={isVertical ? image?.height : undefined}\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","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","undefined","filterPossibleAnswers","shouldNotPushInPossibleResponses","showCorrect","responseContainers","session","possibleResponsesWithIds","map","item","groupBy","grp","flatMap","possibleResponsesFiltered","find","classes","disabled","extraCSSRules","image","responseAreaFill","stimulus","responseCorrect","validation","prompt","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","fontSizeFactor","isEvaluateMode","showToggle","possibilityListPosition","isVertical","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","minWidth","width","height","React","Component","WarningInfo","warning","margin","padding","display","alignItems","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  teacherInstructions: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  rationale: {\n    marginTop: theme.spacing.unit * 2,\n  },\n});\n\nexport class 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: undefined,\n          id: shiftedItem.id || generateId(),\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        fontSizeFactor,\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    const { possibilityListPosition = 'bottom' } = uiStyle || {};\n    const isVertical = possibilityListPosition === 'left' || possibilityListPosition === 'right';\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} fontSizeFactor={fontSizeFactor}>\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 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={{\n                minWidth: isVertical ? '130px' : image?.width || 'fit-content',\n              }}\n              isVertical={isVertical}\n              minHeight={isVertical ? image?.height : undefined}\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.4.1-next.4+36c668546",
+  "version": "6.5.0",
   "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.4.0",
+    "@pie-lib/pie-toolbox": "2.4.1",
     "classnames": "^2.2.6",
     "humps": "^2.0.1",
     "prop-types": "^15.6.1",
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "36c668546ab8b387706539f5bdfe22528da94570",
+  "gitHead": "7bceba66380c80e9d918cb08c8646cede8de53c6",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/possible-response.jsx

@@ -19,27 +19,29 @@ export class PossibleResponse extends React.Component {
       bottom: '3px',
       right: '3px',
     };
-    let correctnessClass;
+    const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;
 
-    if (isCorrect === true) {
-      correctnessClass = 'baseCorrect';
-    } else if (isCorrect === false) {
-      correctnessClass = 'baseIncorrect';
-    }
+    const imgRegex = /<img[^>]+src="([^">]+)"/;
+    const containsImage = imgRegex.test(data.value);
+
+    const containerClassNames = classNames([
+      classes.base,
+      {
+        [classes.answerChoiceTransparency]: answerChoiceTransparency,
+        [classes[correctnessClass]]: !!correctnessClass,
+        [classes.textAnswerChoiceStyle]: !containsImage,
+      },
+    ]);
+
+    const promptClassNames = classNames([
+      classes.span,
+      { [classes.hiddenSpan]: data.hidden },
+    ]);
 
     return connectDragSource(
-      <div
-        className={classNames([
-          classes.base,
-          {
-            [classes.answerChoiceTransparency]: answerChoiceTransparency,
-            [classes[correctnessClass]]: !!correctnessClass,
-          },
-        ])}
-        style={containerStyle}
-      >
+      <div className={containerClassNames} style={containerStyle}>
         <PreviewPrompt
-          className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}
+          className={promptClassNames}
           prompt={data.value}
           tagName="span"
         />
@@ -83,6 +85,10 @@ const styles = () => ({
       pointerEvents: 'none',
     }
   },
+  textAnswerChoiceStyle: {
+    padding: '0 10px',
+    margin: '4px 6px !important',
+  },
   answerChoiceTransparency: {
     border: 'none',
     backgroundColor: `${color.transparent()}`,

package/src/root.jsx

@@ -22,9 +22,6 @@ const styles = (theme) => ({
     color: color.text(),
     backgroundColor: color.background(),
   },
-  stimulus: {
-    fontSize: theme.typography.fontSize,
-  },
   teacherInstructions: {
     marginBottom: theme.spacing.unit * 2,
   },
@@ -226,6 +223,7 @@ export class ImageClozeAssociationComponent extends React.Component {
         answerChoiceTransparency,
         responseContainerPadding,
         imageDropTargetPadding,
+        fontSizeFactor,
       },
     } = this.props;
     const {
@@ -269,7 +267,7 @@ export class ImageClozeAssociationComponent extends React.Component {
     }
 
     return (
-      <UiLayout extraCSSRules={extraCSSRules} className={classes.main}>
+      <UiLayout extraCSSRules={extraCSSRules} className={classes.main} fontSizeFactor={fontSizeFactor}>
         {teacherInstructions && hasText(teacherInstructions) && (
           <Collapsible
             className={classes.teacherInstructions}
@@ -284,7 +282,7 @@ export class ImageClozeAssociationComponent extends React.Component {
 
         <PreviewPrompt className="prompt" prompt={prompt} />
 
-        <PreviewPrompt defaultClassName={classes.stimulus} prompt={stimulus} />
+        <PreviewPrompt prompt={stimulus} />
 
         <CorrectAnswerToggle
           show={showToggle}