@pie-element/image-cloze-association 6.11.3 → 6.11.4-next.10

package/configure/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.14.3",
+    "@pie-lib/pie-toolbox": "2.14.4",
     "debug": "^3.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

package/controller/package.json

@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.14.3",
+    "@pie-lib/pie-toolbox": "2.14.4",
     "debug": "^4.1.1",
     "humps": "^2.0.1",
     "lodash": "^4.17.15"

package/lib/evaluation-icon.js

@@ -20,11 +20,9 @@ var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
 
 var getCorrectnessClass = function getCorrectnessClass(isCorrect, filled) {
-  if (filled) {
-    return isCorrect ? 'correctFilled' : 'incorrectFilled';
-  }
-
-  return isCorrect ? 'correctEmpty' : 'incorrectEmpty';
+  var correctness = isCorrect ? 'correct' : 'incorrect';
+  var fillState = filled ? 'Filled' : 'Empty';
+  return "".concat(correctness).concat(fillState);
 };
 
 var EvaluationIcon = function EvaluationIcon(_ref) {

package/lib/evaluation-icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/evaluation-icon.jsx"],"names":["getCorrectnessClass","isCorrect","filled","EvaluationIcon","classes","containerStyle","Icon","Check","Close","showCorrectness","undefined","correctness","icon","propTypes","PropTypes","object","bool","oneOfType","number","defaultProps","styles","correctEmpty","color","correct","correctFilled","background","backgroundColor","incorrectEmpty","incorrect","incorrectFilled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,SAAD,EAAYC,MAAZ,EAAuB;AACjD,MAAIA,MAAJ,EAAY;AACV,WAAOD,SAAS,GAAG,eAAH,GAAqB,iBAArC;AACD;;AACD,SAAOA,SAAS,GAAG,cAAH,GAAoB,gBAApC;AACD,CALD;;AAOA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,OAAoD;AAAA,MAAjDC,OAAiD,QAAjDA,OAAiD;AAAA,MAAxCC,cAAwC,QAAxCA,cAAwC;AAAA,MAAxBJ,SAAwB,QAAxBA,SAAwB;AAAA,MAAbC,MAAa,QAAbA,MAAa;AACzE,MAAMI,IAAI,GAAGL,SAAS,GAAGM,iBAAH,GAAWC,iBAAjC;AACA,MAAMC,eAAe,GAAGR,SAAS,KAAKS,SAAtC;AACA,MAAMC,WAAW,GAAGF,eAAe,GAAGT,mBAAmB,CAACC,SAAD,EAAYC,MAAZ,CAAtB,GAA4C,EAA/E;AAEA,SAAOO,eAAe,gBAAG,gCAAC,IAAD;AAAM,IAAA,SAAS,YAAKL,OAAO,CAACQ,IAAb,cAAqBR,OAAO,CAACO,WAAD,CAA5B,CAAf;AAA4D,IAAA,KAAK,EAAEN;AAAnE,IAAH,GAA2F,IAAjH;AACD,CAND;;AAQAF,cAAc,CAACU,SAAf,GAA2B;AACzBT,EAAAA,OAAO,EAAEU,sBAAUC,MADM;AAEzBV,EAAAA,cAAc,EAAES,sBAAUC,MAFD;AAGzBb,EAAAA,MAAM,EAAEY,sBAAUE,IAHO;AAIzBf,EAAAA,SAAS,EAAEa,sBAAUG,SAAV,CAAoB,CAACH,sBAAUE,IAAX,EAAiBF,sBAAUI,MAA3B,CAApB;AAJc,CAA3B;AAOAf,cAAc,CAACgB,YAAf,GAA8B;AAC5Bf,EAAAA,OAAO,EAAE,EADmB;AAE5BC,EAAAA,cAAc,EAAE,EAFY;AAG5BH,EAAAA,MAAM,EAAE,KAHoB;AAI5BD,EAAAA,SAAS,EAAES;AAJiB,CAA9B;;AAOA,IAAMU,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAEA,gBAAMC,OAAN;AADK,KADM;AAIpBC,IAAAA,aAAa,EAAE;AACbF,MAAAA,KAAK,EAAEA,gBAAMG,UAAN,EADM;AAEbC,MAAAA,eAAe,EAAEJ,gBAAMC,OAAN;AAFJ,KAJK;AAQpBI,IAAAA,cAAc,EAAE;AACdL,MAAAA,KAAK,EAAEA,gBAAMM,SAAN;AADO,KARI;AAWpBC,IAAAA,eAAe,EAAE;AACfP,MAAAA,KAAK,EAAEA,gBAAMG,UAAN,EADQ;AAEfC,MAAAA,eAAe,EAAEJ,gBAAMM,SAAN;AAFF;AAXG,GAAP;AAAA,CAAf;;eAiBe,sBAAWR,MAAX,EAAmBjB,cAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst getCorrectnessClass = (isCorrect, filled) => {\n  if (filled) {\n    return isCorrect ? 'correctFilled' : 'incorrectFilled';\n  }\n  return isCorrect ? 'correctEmpty' : 'incorrectEmpty';\n};\n\nconst EvaluationIcon = ({ classes, containerStyle, isCorrect, filled }) => {\n  const Icon = isCorrect ? Check : Close;\n  const showCorrectness = isCorrect !== undefined;\n  const correctness = showCorrectness ? getCorrectnessClass(isCorrect, filled) : '';\n\n  return showCorrectness ? <Icon className={`${classes.icon} ${classes[correctness]}`} style={containerStyle} /> : null;\n};\n\nEvaluationIcon.propTypes = {\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object,\n  filled: PropTypes.bool,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n};\n\nEvaluationIcon.defaultProps = {\n  classes: {},\n  containerStyle: {},\n  filled: false,\n  isCorrect: undefined,\n};\n\nconst styles = () => ({\n  correctEmpty: {\n    color: color.correct(),\n  },\n  correctFilled: {\n    color: color.background(),\n    backgroundColor: color.correct(),\n  },\n  incorrectEmpty: {\n    color: color.incorrect(),\n  },\n  incorrectFilled: {\n    color: color.background(),\n    backgroundColor: color.incorrect(),\n  },\n});\n\nexport default withStyles(styles)(EvaluationIcon);\n"],"file":"evaluation-icon.js"}
+{"version":3,"sources":["../src/evaluation-icon.jsx"],"names":["getCorrectnessClass","isCorrect","filled","correctness","fillState","EvaluationIcon","classes","containerStyle","Icon","Check","Close","showCorrectness","undefined","icon","propTypes","PropTypes","object","bool","oneOfType","number","defaultProps","styles","correctEmpty","color","correct","correctFilled","background","backgroundColor","incorrectEmpty","incorrect","incorrectFilled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,SAAD,EAAYC,MAAZ,EAAuB;AACjD,MAAMC,WAAW,GAAGF,SAAS,GAAG,SAAH,GAAe,WAA5C;AACA,MAAMG,SAAS,GAAGF,MAAM,GAAG,QAAH,GAAc,OAAtC;AAEA,mBAAUC,WAAV,SAAwBC,SAAxB;AACD,CALD;;AAOA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAAoD;AAAA,MAAjDC,OAAiD,QAAjDA,OAAiD;AAAA,MAAxCC,cAAwC,QAAxCA,cAAwC;AAAA,MAAxBN,SAAwB,QAAxBA,SAAwB;AAAA,MAAbC,MAAa,QAAbA,MAAa;AACzE,MAAMM,IAAI,GAAGP,SAAS,GAAGQ,iBAAH,GAAWC,iBAAjC;AACA,MAAMC,eAAe,GAAGV,SAAS,KAAKW,SAAtC;AACA,MAAMT,WAAW,GAAGQ,eAAe,GAAGX,mBAAmB,CAACC,SAAD,EAAYC,MAAZ,CAAtB,GAA4C,EAA/E;AAEA,SAAOS,eAAe,gBAAG,gCAAC,IAAD;AAAM,IAAA,SAAS,YAAKL,OAAO,CAACO,IAAb,cAAqBP,OAAO,CAACH,WAAD,CAA5B,CAAf;AAA4D,IAAA,KAAK,EAAEI;AAAnE,IAAH,GAA2F,IAAjH;AACD,CAND;;AAQAF,cAAc,CAACS,SAAf,GAA2B;AACzBR,EAAAA,OAAO,EAAES,sBAAUC,MADM;AAEzBT,EAAAA,cAAc,EAAEQ,sBAAUC,MAFD;AAGzBd,EAAAA,MAAM,EAAEa,sBAAUE,IAHO;AAIzBhB,EAAAA,SAAS,EAAEc,sBAAUG,SAAV,CAAoB,CAACH,sBAAUE,IAAX,EAAiBF,sBAAUI,MAA3B,CAApB;AAJc,CAA3B;AAOAd,cAAc,CAACe,YAAf,GAA8B;AAC5Bd,EAAAA,OAAO,EAAE,EADmB;AAE5BC,EAAAA,cAAc,EAAE,EAFY;AAG5BL,EAAAA,MAAM,EAAE,KAHoB;AAI5BD,EAAAA,SAAS,EAAEW;AAJiB,CAA9B;;AAOA,IAAMS,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAEA,gBAAMC,OAAN;AADK,KADM;AAIpBC,IAAAA,aAAa,EAAE;AACbF,MAAAA,KAAK,EAAEA,gBAAMG,UAAN,EADM;AAEbC,MAAAA,eAAe,EAAEJ,gBAAMC,OAAN;AAFJ,KAJK;AAQpBI,IAAAA,cAAc,EAAE;AACdL,MAAAA,KAAK,EAAEA,gBAAMM,SAAN;AADO,KARI;AAWpBC,IAAAA,eAAe,EAAE;AACfP,MAAAA,KAAK,EAAEA,gBAAMG,UAAN,EADQ;AAEfC,MAAAA,eAAe,EAAEJ,gBAAMM,SAAN;AAFF;AAXG,GAAP;AAAA,CAAf;;eAiBe,sBAAWR,MAAX,EAAmBhB,cAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst getCorrectnessClass = (isCorrect, filled) => {\n  const correctness = isCorrect ? 'correct' : 'incorrect';\n  const fillState = filled ? 'Filled' : 'Empty';\n\n  return `${correctness}${fillState}`;\n};\n\nconst EvaluationIcon = ({ classes, containerStyle, isCorrect, filled }) => {\n  const Icon = isCorrect ? Check : Close;\n  const showCorrectness = isCorrect !== undefined;\n  const correctness = showCorrectness ? getCorrectnessClass(isCorrect, filled) : '';\n\n  return showCorrectness ? <Icon className={`${classes.icon} ${classes[correctness]}`} style={containerStyle} /> : null;\n};\n\nEvaluationIcon.propTypes = {\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object,\n  filled: PropTypes.bool,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n};\n\nEvaluationIcon.defaultProps = {\n  classes: {},\n  containerStyle: {},\n  filled: false,\n  isCorrect: undefined,\n};\n\nconst styles = () => ({\n  correctEmpty: {\n    color: color.correct(),\n  },\n  correctFilled: {\n    color: color.background(),\n    backgroundColor: color.correct(),\n  },\n  incorrectEmpty: {\n    color: color.incorrect(),\n  },\n  incorrectFilled: {\n    color: color.background(),\n    backgroundColor: color.incorrect(),\n  },\n});\n\nexport default withStyles(styles)(EvaluationIcon);\n"],"file":"evaluation-icon.js"}

package/lib/possible-response.js

@@ -35,6 +35,8 @@ var _evaluationIcon = _interopRequireDefault(require("./evaluation-icon"));
 
 var _constants = _interopRequireDefault(require("./constants"));
 
+var _staticHtmlSpan = _interopRequireDefault(require("./static-html-span"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -78,10 +80,9 @@ var PossibleResponse = /*#__PURE__*/function (_React$Component) {
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
         className: containerClassNames,
         style: containerStyle
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        defaultClassName: promptClassNames,
-        prompt: data.value,
-        tagName: "span"
+      }, /*#__PURE__*/_react["default"].createElement(_staticHtmlSpan["default"], {
+        html: data.value,
+        className: promptClassNames
       }), /*#__PURE__*/_react["default"].createElement(_evaluationIcon["default"], {
         isCorrect: data.isCorrect,
         containerStyle: evaluationStyle

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","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          defaultClassName={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"}
+{"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';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\nimport StaticHTMLSpan from './static-html-span';\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        <StaticHTMLSpan html={data.value} className={promptClassNames} />\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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ImageClozeAssociationComponent = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -105,15 +107,9 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "filterPossibleAnswers", function (possibleResponses, answer) {
-      var index = possibleResponses.findIndex(function (response) {
-        return response.value === answer.value;
+      return possibleResponses.filter(function (response) {
+        return response.value !== answer.value;
       });
-
-      if (index >= 0) {
-        return [].concat((0, _toConsumableArray2["default"])(possibleResponses.slice(0, index)), (0, _toConsumableArray2["default"])(possibleResponses.slice(index + 1)));
-      }
-
-      return possibleResponses;
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnAnswerSelect", function (answer, responseContainerIndex) {
       var _this$props = _this.props,
@@ -124,16 +120,17 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           maxResponsePerZone = _this$state.maxResponsePerZone;
       var possibleResponses = _this.state.possibleResponses;
       var answersToStore;
+      var answersInThisContainer = [];
+      var answersInOtherContainers = [];
+      answers.forEach(function (a) {
+        if (a.containerIndex === responseContainerIndex) {
+          answersInThisContainer.push(a);
+        } else {
+          answersInOtherContainers.push(a);
+        }
+      });
 
-      if (maxResponsePerZone === answers.filter(function (a) {
-        return a.containerIndex === responseContainerIndex;
-      }).length) {
-        var answersInThisContainer = answers.filter(function (a) {
-          return a.containerIndex === responseContainerIndex;
-        });
-        var answersInOtherContainers = answers.filter(function (b) {
-          return b.containerIndex !== responseContainerIndex;
-        });
+      if (maxResponsePerZone === answersInThisContainer.length) {
         var shiftedItem = answersInThisContainer[0];
 
         if (maxResponsePerZone === 1) {
@@ -160,7 +157,7 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         // + new answer
 
 
-        answersToStore = [].concat((0, _toConsumableArray2["default"])(answersInThisContainer), (0, _toConsumableArray2["default"])(answersInOtherContainers.filter(function (a) {
+        answersToStore = [].concat(answersInThisContainer, (0, _toConsumableArray2["default"])(answersInOtherContainers.filter(function (a) {
           return duplicateResponses ? true : a.value !== answer.value;
         })), [// un-shifted
         _objectSpread(_objectSpread({}, answer), {}, {
@@ -278,6 +275,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(ImageClozeAssociationComponent, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props3 = this.props,
           classes = _this$props3.classes,
           _this$props3$model = _this$props3.model,
@@ -347,6 +346,48 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         answersToShow = [].concat((0, _toConsumableArray2["default"])(answersToShow), (0, _toConsumableArray2["default"])((0, _utilsCorrectness.getUnansweredAnswers)(answersToShow, validation)));
       }
 
+      var sharedImageProps = {
+        draggingElement: draggingElement,
+        duplicateResponses: duplicateResponses,
+        image: image,
+        onAnswerSelect: this.handleOnAnswerSelect,
+        onDragAnswerBegin: this.beginDrag,
+        onDragAnswerEnd: this.handleOnDragEnd,
+        responseContainers: responseContainers,
+        showDashedBorder: showDashedBorder,
+        responseAreaFill: responseAreaFill,
+        responseContainerPadding: responseContainerPadding,
+        imageDropTargetPadding: imageDropTargetPadding,
+        maxResponsePerZone: maxResponsePerZone
+      };
+
+      var renderImage = function renderImage() {
+        return /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], (0, _extends2["default"])({}, sharedImageProps, {
+          canDrag: showCorrect && showToggle ? false : !disabled,
+          answers: showCorrect && showToggle ? correctAnswers : answersToShow,
+          answerChoiceTransparency: !(showCorrect && showToggle) ? answerChoiceTransparency : undefined
+        }));
+      };
+
+      var renderPossibleResponses = function renderPossibleResponses() {
+        if (showCorrect && showToggle) return null;
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, maxResponsePerZoneWarning && /*#__PURE__*/_react["default"].createElement(WarningInfo, {
+          message: warningMessage
+        }), /*#__PURE__*/_react["default"].createElement(_possibleResponses2["default"], {
+          canDrag: !disabled,
+          data: possibleResponses,
+          onAnswerRemove: _this2.handleOnAnswerRemove,
+          onDragBegin: _this2.beginDrag,
+          onDragEnd: _this2.handleOnDragEnd,
+          answerChoiceTransparency: answerChoiceTransparency,
+          customStyle: {
+            minWidth: isVertical ? '130px' : (image === null || image === void 0 ? void 0 : image.width) || 'fit-content'
+          },
+          isVertical: isVertical,
+          minHeight: isVertical ? image === null || image === void 0 ? void 0 : image.height : undefined
+        }));
+      };
+
       return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
         extraCSSRules: extraCSSRules,
         id: 'main-container',
@@ -372,58 +413,10 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         toggled: showCorrect,
         onToggle: this.toggleCorrect,
         language: language
-      }), showCorrect && showToggle ? /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
-        responseCorrect: true,
-        uiStyle: uiStyle
-      }, /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
-        canDrag: false,
-        answers: correctAnswers,
-        draggingElement: draggingElement,
-        duplicateResponses: duplicateResponses,
-        image: image,
-        onAnswerSelect: this.handleOnAnswerSelect,
-        onDragAnswerBegin: this.beginDrag,
-        onDragAnswerEnd: this.handleOnDragEnd,
-        responseContainers: responseContainers,
-        showDashedBorder: showDashedBorder,
-        responseAreaFill: responseAreaFill,
-        responseContainerPadding: responseContainerPadding,
-        imageDropTargetPadding: imageDropTargetPadding,
-        maxResponsePerZone: maxResponsePerZone
-      })) : /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
-        responseCorrect: responseCorrect,
+      }), /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
+        responseCorrect: showCorrect && showToggle ? true : responseCorrect,
         uiStyle: uiStyle
-      }, /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
-        canDrag: !disabled,
-        answers: answersToShow,
-        draggingElement: draggingElement,
-        duplicateResponses: duplicateResponses,
-        image: image,
-        onAnswerSelect: this.handleOnAnswerSelect,
-        onDragAnswerBegin: this.beginDrag,
-        onDragAnswerEnd: this.handleOnDragEnd,
-        responseContainers: responseContainers,
-        showDashedBorder: showDashedBorder,
-        responseAreaFill: responseAreaFill,
-        answerChoiceTransparency: answerChoiceTransparency,
-        responseContainerPadding: responseContainerPadding,
-        imageDropTargetPadding: imageDropTargetPadding,
-        maxResponsePerZone: maxResponsePerZone
-      }), maxResponsePerZoneWarning && /*#__PURE__*/_react["default"].createElement(WarningInfo, {
-        message: warningMessage
-      }), /*#__PURE__*/_react["default"].createElement(_possibleResponses2["default"], {
-        canDrag: !disabled,
-        data: possibleResponses,
-        onAnswerRemove: this.handleOnAnswerRemove,
-        onDragBegin: this.beginDrag,
-        onDragEnd: this.handleOnDragEnd,
-        answerChoiceTransparency: answerChoiceTransparency,
-        customStyle: {
-          minWidth: isVertical ? '130px' : (image === null || image === void 0 ? void 0 : image.width) || 'fit-content'
-        },
-        isVertical: isVertical,
-        minHeight: isVertical ? image === null || image === void 0 ? void 0 : image.height : undefined
-      })), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      }, renderImage(), renderPossibleResponses()), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         className: classes.rationale,
         labels: {
           hidden: 'Show Rationale',

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","position","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","autoplayAudioEnabled","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","fontSizeFactor","customAudioButton","isEvaluateMode","showToggle","possibilityListPosition","isVertical","validResponse","correctAnswers","forEach","container","i","images","v","isCorrect","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 { color, Collapsible, PreviewPrompt, UiLayout, hasText } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport NotInterestedIcon from '@material-ui/icons/NotInterested';\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    position: 'relative'\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        autoplayAudioEnabled,\n        showDashedBorder,\n        mode,\n        rationale,\n        language,\n        uiStyle = {},\n        answerChoiceTransparency,\n        responseContainerPadding,\n        imageDropTargetPadding,\n        fontSizeFactor,\n        customAudioButton\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            isCorrect: true\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} id={'main-container'} 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\n          className=\"prompt\"\n          prompt={prompt}\n          autoplayAudioEnabled={autoplayAudioEnabled}\n          customAudioButton={customAudioButton}\n        />\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    '& 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        <NotInterestedIcon color={'secondary'} fontSize={'small'}/>\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","position","teacherInstructions","marginBottom","spacing","unit","rationale","marginTop","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","possibleResponses","answer","filter","response","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","maxResponsePerZone","answersToStore","answersInThisContainer","answersInOtherContainers","forEach","a","containerIndex","push","length","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","undefined","filterPossibleAnswers","shouldNotPushInPossibleResponses","showCorrect","responseContainers","session","possibleResponsesWithIds","map","item","index","groupBy","grp","slice","flatMap","possibleResponsesFiltered","find","classes","disabled","extraCSSRules","image","responseAreaFill","stimulus","responseCorrect","validation","prompt","autoplayAudioEnabled","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","fontSizeFactor","customAudioButton","isEvaluateMode","showToggle","possibilityListPosition","isVertical","validResponse","correctAnswers","container","i","images","v","isCorrect","warningMessage","t","lng","count","answersToShow","sharedImageProps","onAnswerSelect","handleOnAnswerSelect","onDragAnswerBegin","beginDrag","onDragAnswerEnd","handleOnDragEnd","renderImage","renderPossibleResponses","handleOnAnswerRemove","minWidth","width","height","hidden","visible","toggleCorrect","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 { color, Collapsible, PreviewPrompt, UiLayout, hasText } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport NotInterestedIcon from '@material-ui/icons/NotInterested';\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    position: 'relative'\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    possibleResponses.filter(response => response.value !== answer.value);\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    const answersInThisContainer = [];\n    const answersInOtherContainers = [];\n\n    answers.forEach((a) => {\n      if (a.containerIndex === responseContainerIndex) {\n        answersInThisContainer.push(a);\n      } else {\n        answersInOtherContainers.push(a);\n      }\n    });\n\n    if (maxResponsePerZone === answersInThisContainer.length) {\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        autoplayAudioEnabled,\n        showDashedBorder,\n        mode,\n        rationale,\n        language,\n        uiStyle = {},\n        answerChoiceTransparency,\n        responseContainerPadding,\n        imageDropTargetPadding,\n        fontSizeFactor,\n        customAudioButton\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            isCorrect: true\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    const sharedImageProps = {\n      draggingElement,\n      duplicateResponses,\n      image,\n      onAnswerSelect: this.handleOnAnswerSelect,\n      onDragAnswerBegin: this.beginDrag,\n      onDragAnswerEnd: this.handleOnDragEnd,\n      responseContainers,\n      showDashedBorder,\n      responseAreaFill,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      maxResponsePerZone,\n    };\n\n    const renderImage = () => (\n      <Image\n        {...sharedImageProps}\n        canDrag={showCorrect && showToggle ? false : !disabled}\n        answers={showCorrect && showToggle ? correctAnswers : answersToShow}\n        answerChoiceTransparency={\n          !(showCorrect && showToggle) ? answerChoiceTransparency : undefined\n        }\n      />\n    );\n\n   const renderPossibleResponses = () => {\n      if (showCorrect && showToggle) return null;\n\n      return (\n        <React.Fragment>\n          {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}\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        </React.Fragment>\n      );\n    };\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} 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\n          className=\"prompt\"\n          prompt={prompt}\n          autoplayAudioEnabled={autoplayAudioEnabled}\n          customAudioButton={customAudioButton}\n        />\n\n        <PreviewPrompt prompt={stimulus} />\n\n        <CorrectAnswerToggle\n          show={showToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleCorrect}\n          language={language}\n        />\n\n        <InteractiveSection\n          responseCorrect={showCorrect && showToggle ? true : responseCorrect}\n          uiStyle={uiStyle}\n        >\n          {renderImage()}\n          {renderPossibleResponses()}\n        </InteractiveSection>\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    '& 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        <NotInterestedIcon color={'secondary'} fontSize={'small'}/>\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/lib/static-html-span.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var StaticHTMLSpan = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2["default"])(StaticHTMLSpan, _React$PureComponent);
+
+  var _super = _createSuper(StaticHTMLSpan);
+
+  function StaticHTMLSpan() {
+    (0, _classCallCheck2["default"])(this, StaticHTMLSpan);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(StaticHTMLSpan, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          html = _this$props.html,
+          className = _this$props.className;
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        className: className,
+        dangerouslySetInnerHTML: {
+          __html: html
+        }
+      });
+    }
+  }]);
+  return StaticHTMLSpan;
+}(_react["default"].PureComponent);
+
+StaticHTMLSpan.propTypes = {
+  html: _propTypes["default"].string.isRequired,
+  className: _propTypes["default"].string
+};
+StaticHTMLSpan.defaultProps = {
+  className: ''
+};
+var _default = StaticHTMLSpan;
+exports["default"] = _default;
+//# sourceMappingURL=static-html-span.js.map

package/lib/static-html-span.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/static-html-span.jsx"],"names":["StaticHTMLSpan","props","html","className","__html","React","PureComponent","propTypes","PropTypes","string","isRequired","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;;;IAEMA,c;;;;;;;;;;;;WACJ,iCAAwB;AACtB,aAAO,KAAP;AACD;;;WAED,kBAAS;AACP,wBAA4B,KAAKC,KAAjC;AAAA,UAAQC,IAAR,eAAQA,IAAR;AAAA,UAAcC,SAAd,eAAcA,SAAd;AAEA,0BACE;AACE,QAAA,SAAS,EAAEA,SADb;AAEE,QAAA,uBAAuB,EAAE;AAAEC,UAAAA,MAAM,EAAEF;AAAV;AAF3B,QADF;AAMD;;;EAd0BG,kBAAMC,a;;AAiBnCN,cAAc,CAACO,SAAf,GAA2B;AACzBL,EAAAA,IAAI,EAAEM,sBAAUC,MAAV,CAAiBC,UADE;AAEzBP,EAAAA,SAAS,EAAEK,sBAAUC;AAFI,CAA3B;AAKAT,cAAc,CAACW,YAAf,GAA8B;AAC5BR,EAAAA,SAAS,EAAE;AADiB,CAA9B;eAIeH,c","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nclass StaticHTMLSpan extends React.PureComponent {\n  shouldComponentUpdate() {\n    return false;\n  }\n\n  render() {\n    const { html, className } = this.props;\n\n    return (\n      <span\n        className={className}\n        dangerouslySetInnerHTML={{ __html: html }}\n      />\n    );\n  }\n}\n\nStaticHTMLSpan.propTypes = {\n  html: PropTypes.string.isRequired,\n  className: PropTypes.string,\n};\n\nStaticHTMLSpan.defaultProps = {\n  className: '',\n};\n\nexport default StaticHTMLSpan;\n"],"file":"static-html-span.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "6.11.3",
+  "version": "6.11.4-next.10+090ee16f9",
   "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.14.3",
+    "@pie-lib/pie-toolbox": "2.14.4",
     "classnames": "^2.2.6",
     "humps": "^2.0.1",
     "prop-types": "^15.6.1",
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c7c2d84547f58086065b501fea2916126e0e81ce",
+  "gitHead": "090ee16f9cb71ea0d499d0b5affa5cec11cb410e",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/evaluation-icon.jsx

@@ -6,10 +6,10 @@ import Close from '@material-ui/icons/Close';
 import { color } from '@pie-lib/pie-toolbox/render-ui';
 
 const getCorrectnessClass = (isCorrect, filled) => {
-  if (filled) {
-    return isCorrect ? 'correctFilled' : 'incorrectFilled';
-  }
-  return isCorrect ? 'correctEmpty' : 'incorrectEmpty';
+  const correctness = isCorrect ? 'correct' : 'incorrect';
+  const fillState = filled ? 'Filled' : 'Empty';
+
+  return `${correctness}${fillState}`;
 };
 
 const EvaluationIcon = ({ classes, containerStyle, isCorrect, filled }) => {

package/src/possible-response.jsx

@@ -4,10 +4,10 @@ import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { DragSource } from '@pie-lib/pie-toolbox/drag';
 import { color } from '@pie-lib/pie-toolbox/render-ui';
-import { PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';
 
 import EvaluationIcon from './evaluation-icon';
 import c from './constants';
+import StaticHTMLSpan from './static-html-span';
 
 export class PossibleResponse extends React.Component {
   render() {
@@ -40,11 +40,7 @@ export class PossibleResponse extends React.Component {
 
     return connectDragSource(
       <div className={containerClassNames} style={containerStyle}>
-        <PreviewPrompt
-          defaultClassName={promptClassNames}
-          prompt={data.value}
-          tagName="span"
-        />
+        <StaticHTMLSpan html={data.value} className={promptClassNames} />
         <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />
       </div>,
     );

package/src/root.jsx

@@ -86,18 +86,8 @@ export class ImageClozeAssociationComponent extends React.Component {
     });
   };
 
-  filterPossibleAnswers = (possibleResponses, answer) => {
-    const index = possibleResponses.findIndex((response) => response.value === answer.value);
-
-    if (index >= 0) {
-      return [
-        ...possibleResponses.slice(0, index), // Elements before the found item
-        ...possibleResponses.slice(index + 1), // Elements after the found item
-      ];
-    }
-
-    return possibleResponses;
-  };
+  filterPossibleAnswers = (possibleResponses, answer) =>
+    possibleResponses.filter(response => response.value !== answer.value);
 
   handleOnAnswerSelect = (answer, responseContainerIndex) => {
     const {
@@ -108,10 +98,18 @@ export class ImageClozeAssociationComponent extends React.Component {
     let { possibleResponses } = this.state;
     let answersToStore;
 
-    if (maxResponsePerZone === answers.filter((a) => a.containerIndex === responseContainerIndex).length) {
-      const answersInThisContainer = answers.filter((a) => a.containerIndex === responseContainerIndex);
-      const answersInOtherContainers = answers.filter((b) => b.containerIndex !== responseContainerIndex);
+    const answersInThisContainer = [];
+    const answersInOtherContainers = [];
 
+    answers.forEach((a) => {
+      if (a.containerIndex === responseContainerIndex) {
+        answersInThisContainer.push(a);
+      } else {
+        answersInOtherContainers.push(a);
+      }
+    });
+
+    if (maxResponsePerZone === answersInThisContainer.length) {
       const shiftedItem = answersInThisContainer[0];
       if (maxResponsePerZone === 1) {
         answersInThisContainer.shift(); // FIFO
@@ -270,6 +268,55 @@ export class ImageClozeAssociationComponent extends React.Component {
       answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];
     }
 
+    const sharedImageProps = {
+      draggingElement,
+      duplicateResponses,
+      image,
+      onAnswerSelect: this.handleOnAnswerSelect,
+      onDragAnswerBegin: this.beginDrag,
+      onDragAnswerEnd: this.handleOnDragEnd,
+      responseContainers,
+      showDashedBorder,
+      responseAreaFill,
+      responseContainerPadding,
+      imageDropTargetPadding,
+      maxResponsePerZone,
+    };
+
+    const renderImage = () => (
+      <Image
+        {...sharedImageProps}
+        canDrag={showCorrect && showToggle ? false : !disabled}
+        answers={showCorrect && showToggle ? correctAnswers : answersToShow}
+        answerChoiceTransparency={
+          !(showCorrect && showToggle) ? answerChoiceTransparency : undefined
+        }
+      />
+    );
+
+   const renderPossibleResponses = () => {
+      if (showCorrect && showToggle) return null;
+
+      return (
+        <React.Fragment>
+          {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}
+          <PossibleResponses
+            canDrag={!disabled}
+            data={possibleResponses}
+            onAnswerRemove={this.handleOnAnswerRemove}
+            onDragBegin={this.beginDrag}
+            onDragEnd={this.handleOnDragEnd}
+            answerChoiceTransparency={answerChoiceTransparency}
+            customStyle={{
+              minWidth: isVertical ? '130px' : image?.width || 'fit-content',
+            }}
+            isVertical={isVertical}
+            minHeight={isVertical ? image?.height : undefined}
+          />
+        </React.Fragment>
+      );
+    };
+
     return (
       <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} className={classes.main} fontSizeFactor={fontSizeFactor}>
         {teacherInstructions && hasText(teacherInstructions) && (
@@ -300,62 +347,13 @@ export class ImageClozeAssociationComponent extends React.Component {
           language={language}
         />
 
-        {showCorrect && showToggle ? (
-          <InteractiveSection responseCorrect={true} uiStyle={uiStyle}>
-            <Image
-              canDrag={false}
-              answers={correctAnswers}
-              draggingElement={draggingElement}
-              duplicateResponses={duplicateResponses}
-              image={image}
-              onAnswerSelect={this.handleOnAnswerSelect}
-              onDragAnswerBegin={this.beginDrag}
-              onDragAnswerEnd={this.handleOnDragEnd}
-              responseContainers={responseContainers}
-              showDashedBorder={showDashedBorder}
-              responseAreaFill={responseAreaFill}
-              responseContainerPadding={responseContainerPadding}
-              imageDropTargetPadding={imageDropTargetPadding}
-              maxResponsePerZone={maxResponsePerZone}
-            />
-          </InteractiveSection>
-        ) : (
-          <InteractiveSection responseCorrect={responseCorrect} uiStyle={uiStyle}>
-            <Image
-              canDrag={!disabled}
-              answers={answersToShow}
-              draggingElement={draggingElement}
-              duplicateResponses={duplicateResponses}
-              image={image}
-              onAnswerSelect={this.handleOnAnswerSelect}
-              onDragAnswerBegin={this.beginDrag}
-              onDragAnswerEnd={this.handleOnDragEnd}
-              responseContainers={responseContainers}
-              showDashedBorder={showDashedBorder}
-              responseAreaFill={responseAreaFill}
-              answerChoiceTransparency={answerChoiceTransparency}
-              responseContainerPadding={responseContainerPadding}
-              imageDropTargetPadding={imageDropTargetPadding}
-              maxResponsePerZone={maxResponsePerZone}
-            />
-
-            {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}
-
-            <PossibleResponses
-              canDrag={!disabled}
-              data={possibleResponses}
-              onAnswerRemove={this.handleOnAnswerRemove}
-              onDragBegin={this.beginDrag}
-              onDragEnd={this.handleOnDragEnd}
-              answerChoiceTransparency={answerChoiceTransparency}
-              customStyle={{
-                minWidth: isVertical ? '130px' : image?.width || 'fit-content',
-              }}
-              isVertical={isVertical}
-              minHeight={isVertical ? image?.height : undefined}
-            />
-          </InteractiveSection>
-        )}
+        <InteractiveSection
+          responseCorrect={showCorrect && showToggle ? true : responseCorrect}
+          uiStyle={uiStyle}
+        >
+          {renderImage()}
+          {renderPossibleResponses()}
+        </InteractiveSection>
 
         {rationale && hasText(rationale) && (
           <Collapsible

package/src/static-html-span.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class StaticHTMLSpan extends React.PureComponent {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const { html, className } = this.props;
+
+    return (
+      <span
+        className={className}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+}
+
+StaticHTMLSpan.propTypes = {
+  html: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+StaticHTMLSpan.defaultProps = {
+  className: '',
+};
+
+export default StaticHTMLSpan;