@pie-element/image-cloze-association 10.1.2-next.2 → 10.1.2

package/lib/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  types: {
+    response: 'react-dnd-response'
+  }
+};
+//# sourceMappingURL=constants.js.map

package/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["types","response"],"sources":["../src/constants.js"],"sourcesContent":["export default {\n  types: {\n    response: 'react-dnd-response',\n  },\n};\n"],"mappings":";;;;;;iCAAe;EACbA,KAAK,EAAE;IACLC,QAAQ,EAAE;EACZ;AACF,CAAC","ignoreList":[]}

package/lib/evaluation-icon.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _renderUi = require("@pie-lib/render-ui");
+const StyledIcon = (0, _styles.styled)('svg')(() => ({
+  '&.correctEmpty': {
+    color: _renderUi.color.correct()
+  },
+  '&.correctFilled': {
+    color: _renderUi.color.background(),
+    backgroundColor: _renderUi.color.correct()
+  },
+  '&.incorrectEmpty': {
+    color: _renderUi.color.incorrect()
+  },
+  '&.incorrectFilled': {
+    color: _renderUi.color.background(),
+    backgroundColor: _renderUi.color.incorrect()
+  }
+}));
+const getCorrectnessClass = (isCorrect, filled) => {
+  const correctness = isCorrect ? 'correct' : 'incorrect';
+  const fillState = filled ? 'Filled' : 'Empty';
+  return `${correctness}${fillState}`;
+};
+const EvaluationIcon = ({
+  containerStyle,
+  isCorrect,
+  filled
+}) => {
+  const Icon = isCorrect ? _Check.default : _Close.default;
+  const showCorrectness = isCorrect !== undefined;
+  const correctness = showCorrectness ? getCorrectnessClass(isCorrect, filled) : '';
+  return showCorrectness ? /*#__PURE__*/_react.default.createElement(Icon, {
+    component: StyledIcon,
+    className: correctness,
+    style: containerStyle
+  }) : null;
+};
+EvaluationIcon.propTypes = {
+  containerStyle: _propTypes.default.object,
+  filled: _propTypes.default.bool,
+  isCorrect: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number])
+};
+EvaluationIcon.defaultProps = {
+  containerStyle: {},
+  filled: false,
+  isCorrect: undefined
+};
+var _default = exports.default = EvaluationIcon;
+//# sourceMappingURL=evaluation-icon.js.map

package/lib/evaluation-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"evaluation-icon.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_Check","_Close","_renderUi","StyledIcon","styled","color","correct","background","backgroundColor","incorrect","getCorrectnessClass","isCorrect","filled","correctness","fillState","EvaluationIcon","containerStyle","Icon","Check","Close","showCorrectness","undefined","default","createElement","component","className","style","propTypes","PropTypes","object","bool","oneOfType","number","defaultProps","_default","exports"],"sources":["../src/evaluation-icon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport Check from '@mui/icons-material/Check';\nimport Close from '@mui/icons-material/Close';\nimport { color } from '@pie-lib/render-ui';\n\nconst StyledIcon = styled('svg')(() => ({\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\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 = ({ 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 ? (\n    <Icon component={StyledIcon} className={correctness} style={containerStyle} />\n  ) : null;\n};\n\nEvaluationIcon.propTypes = {\n  containerStyle: PropTypes.object,\n  filled: PropTypes.bool,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n};\n\nEvaluationIcon.defaultProps = {\n  containerStyle: {},\n  filled: false,\n  isCorrect: undefined,\n};\n\nexport default EvaluationIcon;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAEA,MAAMM,UAAU,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EACtC,gBAAgB,EAAE;IAChBC,KAAK,EAAEA,eAAK,CAACC,OAAO,CAAC;EACvB,CAAC;EACD,iBAAiB,EAAE;IACjBD,KAAK,EAAEA,eAAK,CAACE,UAAU,CAAC,CAAC;IACzBC,eAAe,EAAEH,eAAK,CAACC,OAAO,CAAC;EACjC,CAAC;EACD,kBAAkB,EAAE;IAClBD,KAAK,EAAEA,eAAK,CAACI,SAAS,CAAC;EACzB,CAAC;EACD,mBAAmB,EAAE;IACnBJ,KAAK,EAAEA,eAAK,CAACE,UAAU,CAAC,CAAC;IACzBC,eAAe,EAAEH,eAAK,CAACI,SAAS,CAAC;EACnC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,mBAAmB,GAAGA,CAACC,SAAS,EAAEC,MAAM,KAAK;EACjD,MAAMC,WAAW,GAAGF,SAAS,GAAG,SAAS,GAAG,WAAW;EACvD,MAAMG,SAAS,GAAGF,MAAM,GAAG,QAAQ,GAAG,OAAO;EAE7C,OAAO,GAAGC,WAAW,GAAGC,SAAS,EAAE;AACrC,CAAC;AAED,MAAMC,cAAc,GAAGA,CAAC;EAAEC,cAAc;EAAEL,SAAS;EAAEC;AAAO,CAAC,KAAK;EAChE,MAAMK,IAAI,GAAGN,SAAS,GAAGO,cAAK,GAAGC,cAAK;EACtC,MAAMC,eAAe,GAAGT,SAAS,KAAKU,SAAS;EAC/C,MAAMR,WAAW,GAAGO,eAAe,GAAGV,mBAAmB,CAACC,SAAS,EAAEC,MAAM,CAAC,GAAG,EAAE;EAEjF,OAAOQ,eAAe,gBACpBzB,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACN,IAAI;IAACO,SAAS,EAAErB,UAAW;IAACsB,SAAS,EAAEZ,WAAY;IAACa,KAAK,EAAEV;EAAe,CAAE,CAAC,GAC5E,IAAI;AACV,CAAC;AAEDD,cAAc,CAACY,SAAS,GAAG;EACzBX,cAAc,EAAEY,kBAAS,CAACC,MAAM;EAChCjB,MAAM,EAAEgB,kBAAS,CAACE,IAAI;EACtBnB,SAAS,EAAEiB,kBAAS,CAACG,SAAS,CAAC,CAACH,kBAAS,CAACE,IAAI,EAAEF,kBAAS,CAACI,MAAM,CAAC;AACnE,CAAC;AAEDjB,cAAc,CAACkB,YAAY,GAAG;EAC5BjB,cAAc,EAAE,CAAC,CAAC;EAClBJ,MAAM,EAAE,KAAK;EACbD,SAAS,EAAEU;AACb,CAAC;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEaP,cAAc","ignoreList":[]}

package/lib/image-container.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _imageDropTarget = _interopRequireDefault(require("./image-drop-target"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  margin: theme.spacing(2),
+  position: 'relative',
+  width: 'fit-content'
+}));
+class ImageContainer extends _react.Component {
+  render() {
+    const {
+      answers,
+      canDrag,
+      draggingElement,
+      image: {
+        height,
+        src,
+        width
+      } = {},
+      onAnswerSelect,
+      onDragAnswerBegin,
+      onDragAnswerEnd,
+      responseContainers,
+      showDashedBorder,
+      responseAreaFill,
+      answerChoiceTransparency,
+      responseContainerPadding,
+      imageDropTargetPadding,
+      maxResponsePerZone
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement("img", {
+      src: src,
+      height: height,
+      width: width
+    }), (responseContainers || []).map((r, i) => {
+      const rHeight = r.height.replace('%', '') / 100 * height;
+      const rWidth = r.width.replace('%', '') / 100 * width;
+      const rLeft = r.x / 100 * width;
+      const rTop = r.y / 100 * height;
+      const answersParsed = answers.filter(a => a.containerIndex === r.index);
+      return /*#__PURE__*/_react.default.createElement(_imageDropTarget.default, {
+        answers: answersParsed,
+        canDrag: canDrag,
+        containerStyle: {
+          height: rHeight,
+          width: rWidth,
+          left: rLeft,
+          top: rTop
+        },
+        key: r.id + i,
+        draggingElement: draggingElement,
+        index: r.index,
+        onDrop: item => onAnswerSelect(item, r.index),
+        onDragAnswerBegin: onDragAnswerBegin,
+        onDragAnswerEnd: onDragAnswerEnd,
+        showDashedBorder: showDashedBorder,
+        responseAreaFill: responseAreaFill,
+        answerChoiceTransparency: answerChoiceTransparency,
+        responseContainerPadding: responseContainerPadding,
+        imageDropTargetPadding: imageDropTargetPadding,
+        maxResponsePerZone: maxResponsePerZone
+      });
+    }));
+  }
+}
+ImageContainer.propTypes = {
+  answers: _propTypes.default.array.isRequired,
+  canDrag: _propTypes.default.bool.isRequired,
+  draggingElement: _propTypes.default.shape({}).isRequired,
+  image: _propTypes.default.object.isRequired,
+  onAnswerSelect: _propTypes.default.func.isRequired,
+  onDragAnswerBegin: _propTypes.default.func.isRequired,
+  onDragAnswerEnd: _propTypes.default.func.isRequired,
+  responseContainers: _propTypes.default.array.isRequired,
+  showDashedBorder: _propTypes.default.bool,
+  answerChoiceTransparency: _propTypes.default.bool,
+  responseAreaFill: _propTypes.default.string,
+  responseContainerPadding: _propTypes.default.string,
+  imageDropTargetPadding: _propTypes.default.string,
+  maxResponsePerZone: _propTypes.default.number
+};
+var _default = exports.default = ImageContainer;
+//# sourceMappingURL=image-container.js.map

package/lib/image-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_imageDropTarget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","theme","margin","spacing","position","width","ImageContainer","Component","render","answers","canDrag","draggingElement","image","height","src","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","props","createElement","map","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","containerStyle","left","top","key","id","onDrop","item","propTypes","PropTypes","array","isRequired","bool","shape","object","func","string","number","_default","exports"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport ImageDropTarget from './image-drop-target';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  margin: theme.spacing(2),\n  position: 'relative',\n  width: 'fit-content',\n}));\n\nclass ImageContainer extends Component {\n  render() {\n    const {\n      answers,\n      canDrag,\n      draggingElement,\n      image: { height, src, width } = {},\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n      responseAreaFill,\n      answerChoiceTransparency,\n      responseContainerPadding,\n      imageDropTargetPadding,\n      maxResponsePerZone,\n    } = this.props;\n\n    return (\n      <BaseContainer>\n        <img src={src} height={height} width={width} />\n\n        {(responseContainers || []).map((r, i) => {\n          const rHeight = (r.height.replace('%', '') / 100) * height;\n          const rWidth = (r.width.replace('%', '') / 100) * width;\n          const rLeft = (r.x / 100) * width;\n          const rTop = (r.y / 100) * height;\n          const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n          return (\n            <ImageDropTarget\n              answers={answersParsed}\n              canDrag={canDrag}\n              containerStyle={{\n                height: rHeight,\n                width: rWidth,\n                left: rLeft,\n                top: rTop,\n              }}\n              key={r.id + i}\n              draggingElement={draggingElement}\n              index={r.index}\n              onDrop={(item) => onAnswerSelect(item, r.index)}\n              onDragAnswerBegin={onDragAnswerBegin}\n              onDragAnswerEnd={onDragAnswerEnd}\n              showDashedBorder={showDashedBorder}\n              responseAreaFill={responseAreaFill}\n              answerChoiceTransparency={answerChoiceTransparency}\n              responseContainerPadding={responseContainerPadding}\n              imageDropTargetPadding={imageDropTargetPadding}\n              maxResponsePerZone={maxResponsePerZone}\n            />\n          );\n        })}\n      </BaseContainer>\n    );\n  }\n}\n\nImageContainer.propTypes = {\n  answers: PropTypes.array.isRequired,\n  canDrag: PropTypes.bool.isRequired,\n  draggingElement: PropTypes.shape({}).isRequired,\n  image: PropTypes.object.isRequired,\n  onAnswerSelect: PropTypes.func.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  responseContainers: PropTypes.array.isRequired,\n  showDashedBorder: PropTypes.bool,\n  answerChoiceTransparency: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageContainer;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAEA,IAAAI,gBAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAkD,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElD,MAAMkB,aAAa,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAClDC,MAAM,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC;EACxBC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,SAASC,gBAAS,CAAC;EACrCC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,OAAO;MACPC,OAAO;MACPC,eAAe;MACfC,KAAK,EAAE;QAAEC,MAAM;QAAEC,GAAG;QAAET;MAAM,CAAC,GAAG,CAAC,CAAC;MAClCU,cAAc;MACdC,iBAAiB;MACjBC,eAAe;MACfC,kBAAkB;MAClBC,gBAAgB;MAChBC,gBAAgB;MAChBC,wBAAwB;MACxBC,wBAAwB;MACxBC,sBAAsB;MACtBC;IACF,CAAC,GAAG,IAAI,CAACC,KAAK;IAEd,oBACEpD,MAAA,CAAAiB,OAAA,CAAAoC,aAAA,CAAC3B,aAAa,qBACZ1B,MAAA,CAAAiB,OAAA,CAAAoC,aAAA;MAAKZ,GAAG,EAAEA,GAAI;MAACD,MAAM,EAAEA,MAAO;MAACR,KAAK,EAAEA;IAAM,CAAE,CAAC,EAE9C,CAACa,kBAAkB,IAAI,EAAE,EAAES,GAAG,CAAC,CAAC5C,CAAC,EAAEI,CAAC,KAAK;MACxC,MAAMyC,OAAO,GAAI7C,CAAC,CAAC8B,MAAM,CAACgB,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAIhB,MAAM;MAC1D,MAAMiB,MAAM,GAAI/C,CAAC,CAACsB,KAAK,CAACwB,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAIxB,KAAK;MACvD,MAAM0B,KAAK,GAAIhD,CAAC,CAACiD,CAAC,GAAG,GAAG,GAAI3B,KAAK;MACjC,MAAM4B,IAAI,GAAIlD,CAAC,CAACmD,CAAC,GAAG,GAAG,GAAIrB,MAAM;MACjC,MAAMsB,aAAa,GAAG1B,OAAO,CAAC2B,MAAM,CAAEC,CAAC,IAAKA,CAAC,CAACC,cAAc,KAAKvD,CAAC,CAACwD,KAAK,CAAC;MAEzE,oBACElE,MAAA,CAAAiB,OAAA,CAAAoC,aAAA,CAAC/C,gBAAA,CAAAW,OAAe;QACdmB,OAAO,EAAE0B,aAAc;QACvBzB,OAAO,EAAEA,OAAQ;QACjB8B,cAAc,EAAE;UACd3B,MAAM,EAAEe,OAAO;UACfvB,KAAK,EAAEyB,MAAM;UACbW,IAAI,EAAEV,KAAK;UACXW,GAAG,EAAET;QACP,CAAE;QACFU,GAAG,EAAE5D,CAAC,CAAC6D,EAAE,GAAGzD,CAAE;QACdwB,eAAe,EAAEA,eAAgB;QACjC4B,KAAK,EAAExD,CAAC,CAACwD,KAAM;QACfM,MAAM,EAAGC,IAAI,IAAK/B,cAAc,CAAC+B,IAAI,EAAE/D,CAAC,CAACwD,KAAK,CAAE;QAChDvB,iBAAiB,EAAEA,iBAAkB;QACrCC,eAAe,EAAEA,eAAgB;QACjCE,gBAAgB,EAAEA,gBAAiB;QACnCC,gBAAgB,EAAEA,gBAAiB;QACnCC,wBAAwB,EAAEA,wBAAyB;QACnDC,wBAAwB,EAAEA,wBAAyB;QACnDC,sBAAsB,EAAEA,sBAAuB;QAC/CC,kBAAkB,EAAEA;MAAmB,CACxC,CAAC;IAEN,CAAC,CACY,CAAC;EAEpB;AACF;AAEAlB,cAAc,CAACyC,SAAS,GAAG;EACzBtC,OAAO,EAAEuC,kBAAS,CAACC,KAAK,CAACC,UAAU;EACnCxC,OAAO,EAAEsC,kBAAS,CAACG,IAAI,CAACD,UAAU;EAClCvC,eAAe,EAAEqC,kBAAS,CAACI,KAAK,CAAC,CAAC,CAAC,CAAC,CAACF,UAAU;EAC/CtC,KAAK,EAAEoC,kBAAS,CAACK,MAAM,CAACH,UAAU;EAClCnC,cAAc,EAAEiC,kBAAS,CAACM,IAAI,CAACJ,UAAU;EACzClC,iBAAiB,EAAEgC,kBAAS,CAACM,IAAI,CAACJ,UAAU;EAC5CjC,eAAe,EAAE+B,kBAAS,CAACM,IAAI,CAACJ,UAAU;EAC1ChC,kBAAkB,EAAE8B,kBAAS,CAACC,KAAK,CAACC,UAAU;EAC9C/B,gBAAgB,EAAE6B,kBAAS,CAACG,IAAI;EAChC9B,wBAAwB,EAAE2B,kBAAS,CAACG,IAAI;EACxC/B,gBAAgB,EAAE4B,kBAAS,CAACO,MAAM;EAClCjC,wBAAwB,EAAE0B,kBAAS,CAACO,MAAM;EAC1ChC,sBAAsB,EAAEyB,kBAAS,CAACO,MAAM;EACxC/B,kBAAkB,EAAEwB,kBAAS,CAACQ;AAChC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApE,OAAA,GAEagB,cAAc","ignoreList":[]}

package/lib/image-drop-target.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _possibleResponse = _interopRequireDefault(require("./possible-response"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const AnswersContainer = (0, _styles.styled)('div')(() => ({
+  display: 'flex',
+  flexWrap: 'wrap'
+}));
+const ResponseContainer = (0, _styles.styled)('div')(() => ({
+  position: 'absolute',
+  boxSizing: 'border-box',
+  '&.active': {
+    border: `2px solid ${_renderUi.color.text()}`,
+    backgroundColor: 'rgba(230, 242, 252, .8)'
+  },
+  '&.dashed': {
+    border: `2px dashed ${_renderUi.color.text()}`
+  },
+  '&.is-over': {
+    border: '1px solid rgb(158, 158, 158)',
+    backgroundColor: 'rgb(224, 224, 224)'
+  }
+}));
+const ImageDropTarget = ({
+  answers,
+  canDrag,
+  containerStyle,
+  draggingElement,
+  onDragAnswerBegin,
+  onDragAnswerEnd,
+  showDashedBorder,
+  responseAreaFill,
+  responseContainerPadding = '10px',
+  imageDropTargetPadding,
+  answerChoiceTransparency,
+  maxResponsePerZone,
+  onDrop,
+  index
+}) => {
+  const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = (0, _react.useState)(false);
+  const dropContainerRef = (0, _react.useRef)(null);
+  const dropContainerResponsesHeightRef = (0, _react.useRef)(null);
+  const {
+    setNodeRef,
+    isOver
+  } = (0, _core.useDroppable)({
+    id: `response-container-${index}`,
+    data: {
+      containerIndex: index,
+      onDrop
+    }
+  });
+  (0, _react.useEffect)(() => {
+    const container = dropContainerRef.current;
+    if (!container) return;
+    const handleTouchStart = e => {
+      e.preventDefault();
+    };
+    container.addEventListener('touchstart', handleTouchStart, {
+      passive: false
+    });
+    return () => {
+      container.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, []);
+  const isDraggingElement = !!draggingElement.id;
+  const containerClasses = (0, _classnames.default)({
+    'is-over': isOver,
+    dashed: showDashedBorder && !isDraggingElement,
+    active: isDraggingElement
+  });
+  const updatedContainerStyle = {
+    padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,
+    ...containerStyle,
+    ...(responseAreaFill && !isDraggingElement && {
+      backgroundColor: responseAreaFill
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(ResponseContainer, {
+    ref: ref => {
+      dropContainerRef.current = ref;
+      setNodeRef(ref);
+    },
+    className: containerClasses,
+    style: updatedContainerStyle
+  }, answers.length ? /*#__PURE__*/_react.default.createElement(AnswersContainer, {
+    ref: ref => {
+      dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;
+    }
+  }, answers.map(answer => /*#__PURE__*/_react.default.createElement(_possibleResponse.default, {
+    key: answer.id,
+    data: answer,
+    canDrag: canDrag,
+    onDragBegin: () => onDragAnswerBegin(answer),
+    onDragEnd: onDragAnswerEnd,
+    answerChoiceTransparency: answerChoiceTransparency,
+    containerStyle: {
+      padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px'
+    }
+  }))) : null);
+};
+ImageDropTarget.propTypes = {
+  answer: _propTypes.default.object,
+  answers: _propTypes.default.array,
+  canDrag: _propTypes.default.bool.isRequired,
+  containerStyle: _propTypes.default.object.isRequired,
+  draggingElement: _propTypes.default.object.isRequired,
+  onDragAnswerBegin: _propTypes.default.func.isRequired,
+  onDragAnswerEnd: _propTypes.default.func.isRequired,
+  onDrop: _propTypes.default.func.isRequired,
+  showDashedBorder: _propTypes.default.bool,
+  responseAreaFill: _propTypes.default.string,
+  answerChoiceTransparency: _propTypes.default.bool,
+  responseContainerPadding: _propTypes.default.string,
+  imageDropTargetPadding: _propTypes.default.string,
+  maxResponsePerZone: _propTypes.default.number
+};
+var _default = exports.default = ImageDropTarget;
+//# sourceMappingURL=image-drop-target.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-drop-target.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_renderUi","_classnames","_possibleResponse","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnswersContainer","styled","display","flexWrap","ResponseContainer","position","boxSizing","border","color","text","backgroundColor","ImageDropTarget","answers","canDrag","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","answerChoiceTransparency","maxResponsePerZone","onDrop","index","shouldHaveSmallPadding","setShouldHaveSmallPadding","useState","dropContainerRef","useRef","dropContainerResponsesHeightRef","setNodeRef","isOver","useDroppable","id","data","containerIndex","useEffect","container","current","handleTouchStart","preventDefault","addEventListener","passive","removeEventListener","isDraggingElement","containerClasses","cx","dashed","active","updatedContainerStyle","padding","createElement","ref","className","style","length","getBoundingClientRect","height","map","answer","key","onDragBegin","onDragEnd","propTypes","PropTypes","object","array","bool","isRequired","func","string","number","_default","exports"],"sources":["../src/image-drop-target.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\n\nconst AnswersContainer = styled('div')(() => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n}));\n\nconst ResponseContainer = styled('div')(() => ({\n  position: 'absolute',\n  boxSizing: 'border-box',\n  '&.active': {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  '&.dashed': {\n    border: `2px dashed ${color.text()}`,\n  },\n  '&.is-over': {\n    border: '1px solid rgb(158, 158, 158)',\n    backgroundColor: 'rgb(224, 224, 224)',\n  },\n}));\n\nconst ImageDropTarget = ({\n  answers,\n  canDrag,\n  containerStyle,\n  draggingElement,\n  onDragAnswerBegin,\n  onDragAnswerEnd,\n  showDashedBorder,\n  responseAreaFill,\n  responseContainerPadding = '10px',\n  imageDropTargetPadding,\n  answerChoiceTransparency,\n  maxResponsePerZone,\n  onDrop,\n  index,\n}) => {\n  const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);\n  const dropContainerRef = useRef(null);\n  const dropContainerResponsesHeightRef = useRef(null);\n\n  const { setNodeRef, isOver } = useDroppable({\n    id: `response-container-${index}`,\n    data: {\n      containerIndex: index,\n      onDrop,\n    },\n  });\n\n  useEffect(() => {\n    const container = dropContainerRef.current;\n\n    if (!container) return;\n\n    const handleTouchStart = (e) => {\n      e.preventDefault();\n    };\n\n    container.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n    return () => {\n      container.removeEventListener('touchstart', handleTouchStart);\n    };\n  }, []);\n\n  const isDraggingElement = !!draggingElement.id;\n\n  const containerClasses = cx({\n    'is-over': isOver,\n    dashed: showDashedBorder && !isDraggingElement,\n    active: isDraggingElement,\n  });\n\n  const updatedContainerStyle = {\n    padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n    ...containerStyle,\n    ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),\n  };\n\n  return (\n    <ResponseContainer\n      ref={(ref) => {\n        dropContainerRef.current = ref;\n        setNodeRef(ref);\n      }}\n      className={containerClasses}\n      style={updatedContainerStyle}\n    >\n      {answers.length ? (\n        <AnswersContainer\n          ref={(ref) => {\n            dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;\n          }}\n        >\n          {answers.map((answer) => (\n            <PossibleResponse\n              key={answer.id}\n              data={answer}\n              canDrag={canDrag}\n              onDragBegin={() => onDragAnswerBegin(answer)}\n              onDragEnd={onDragAnswerEnd}\n              answerChoiceTransparency={answerChoiceTransparency}\n              containerStyle={{\n                padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',\n              }}\n            />\n          ))}\n        </AnswersContainer>\n      ) : null}\n    </ResponseContainer>\n  );\n};\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  answers: PropTypes.array,\n  canDrag: PropTypes.bool.isRequired,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n  responseAreaFill: PropTypes.string,\n  answerChoiceTransparency: PropTypes.bool,\n  responseContainerPadding: PropTypes.string,\n  imageDropTargetPadding: PropTypes.string,\n  maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageDropTarget;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _renderUi = require("@pie-lib/render-ui");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _root = _interopRequireDefault(require("./root"));
+class ImageClozeAssociation extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+    this._render();
+  }
+  isComplete() {
+    const {
+      autoplayAudioEnabled,
+      completeAudioEnabled,
+      completeResponses,
+      duplicateResponses,
+      hasUnplacedChoices,
+      maxResponsePerZone,
+      responseAreasToBeFilled
+    } = this._model || {};
+    const elementContext = this;
+
+    // check audio completion if audio settings are enabled and audio actually exists
+    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
+      if (elementContext) {
+        const audio = elementContext.querySelector('audio');
+        const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+        // only require audio completion if audio exists and is inside the prompt
+        if (audio && isInsidePrompt) {
+          return false;
+        }
+      }
+    }
+    if (!this._session || !this._session.answers) {
+      return false;
+    }
+    const {
+      answers
+    } = this._session;
+    if (!Array.isArray(answers)) {
+      return false;
+    }
+
+    // filter answers by containerIndex and count the ones with content
+    const filledResponseAreas = [...new Map(answers.map(item => [item.containerIndex, item])).values()].length;
+    // check if an answer choice was added to at least as many response areas
+    // as the number of populated response areas in the correct answer
+    const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;
+    if (maxResponsePerZone > 1) {
+      if (duplicateResponses) {
+        // an answer choice can be used multiple times
+        return areResponseAreasFilled;
+      }
+
+      // any correct answer have any unplaced answer choices (by the author)
+      if (hasUnplacedChoices) {
+        return areResponseAreasFilled;
+      }
+      const allAnswersValue = answers.map(answer => answer.value);
+
+      // check if any correct answer have any unplaced answer choices (by the student)
+      const requiredAnswersPlaced = completeResponses.some(response => response.every(val => allAnswersValue.includes(val)));
+
+      // true - all choices (required for a correct response) were placed into a response area
+      return requiredAnswersPlaced;
+    }
+    return areResponseAreasFilled;
+  }
+  set session(s) {
+    if (s && !s.answers) {
+      s.answers = [];
+    }
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  updateAnswer(data) {
+    this._session.answers = data;
+    this._session.selector = 'Mouse';
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+    this._render();
+  }
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+    Object.assign(info.style, {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: 'white',
+      zIndex: '1000',
+      cursor: 'pointer'
+    });
+    const img = document.createElement('img');
+    img.src = _renderUi.EnableAudioAutoplayImage;
+    img.alt = 'Click anywhere to enable audio autoplay';
+    img.width = 500;
+    img.height = 300;
+    info.appendChild(img);
+    return info;
+  }
+  connectedCallback() {
+    this._render();
+
+    // Observation:  audio in Chrome will have the autoplay attribute,
+    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
+    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach(mutation => {
+        if (mutation.type === 'childList') {
+          const audio = this.querySelector('audio');
+          const isInsidePrompt = audio && audio.closest('#preview-prompt');
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
+          if (audio && !isInsidePrompt) return;
+          if (!audio) return;
+          const info = this._createAudioInfoToast();
+          const container = this.querySelector('#main-container');
+          const enableAudio = () => {
+            if (this.querySelector('#play-audio-info')) {
+              audio.play();
+              container.removeChild(info);
+            }
+            document.removeEventListener('click', enableAudio);
+          };
+
+          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
+          setTimeout(() => {
+            if (audio.paused && !this.querySelector('#play-audio-info')) {
+              // add info message as a toast to enable audio playback
+              container.appendChild(info);
+              document.addEventListener('click', enableAudio);
+            } else {
+              document.removeEventListener('click', enableAudio);
+            }
+          }, 500);
+
+          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+          const handlePlaying = () => {
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              container.removeChild(info);
+            }
+            audio.removeEventListener('playing', handlePlaying);
+          };
+          audio.addEventListener('playing', handlePlaying);
+
+          // we need to listen for the ended event to update the isComplete state
+          const handleEnded = () => {
+            this.audioComplete = true;
+            this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+            audio.removeEventListener('ended', handleEnded);
+          };
+          audio.addEventListener('ended', handleEnded);
+
+          // store references to remove later
+          this._audio = audio;
+          this._handlePlaying = handlePlaying;
+          this._handleEnded = handleEnded;
+          this._enableAudio = enableAudio;
+          observer.disconnect();
+        }
+      });
+    });
+    observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this._enableAudio);
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+  _render() {
+    if (this._model && this._session) {
+      const el = /*#__PURE__*/_react.default.createElement(_root.default, {
+        model: this._model,
+        session: this._session,
+        updateAnswer: this.updateAnswer.bind(this)
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
+    }
+  }
+}
+exports.default = ImageClozeAssociation;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_root","ImageClozeAssociation","HTMLElement","constructor","model","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","autoplayAudioEnabled","completeAudioEnabled","completeResponses","duplicateResponses","hasUnplacedChoices","maxResponsePerZone","responseAreasToBeFilled","elementContext","audioComplete","audio","querySelector","isInsidePrompt","closest","_session","answers","Array","isArray","filledResponseAreas","Map","map","item","containerIndex","values","length","areResponseAreasFilled","allAnswersValue","answer","value","requiredAnswersPlaced","some","response","every","val","includes","session","s","updateAnswer","data","selector","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","disconnectedCallback","unmount","el","React","ImageClozeAssociationComponent","bind","createRoot","render","queueMicrotask","renderMath","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    const {\n      autoplayAudioEnabled,\n      completeAudioEnabled,\n      completeResponses,\n      duplicateResponses,\n      hasUnplacedChoices,\n      maxResponsePerZone,\n      responseAreasToBeFilled,\n    } = this._model || {};\n    const elementContext = this;\n\n    // check audio completion if audio settings are enabled and audio actually exists\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      if (elementContext) {\n        const audio = elementContext.querySelector('audio');\n        const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n        // only require audio completion if audio exists and is inside the prompt\n        if (audio && isInsidePrompt) {\n          return false;\n        }\n      }\n    }\n\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    const { answers } = this._session;\n\n    if (!Array.isArray(answers)) {\n      return false;\n    }\n\n    // filter answers by containerIndex and count the ones with content\n    const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;\n    // check if an answer choice was added to at least as many response areas\n    // as the number of populated response areas in the correct answer\n    const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;\n\n    if (maxResponsePerZone > 1) {\n      if (duplicateResponses) {\n        // an answer choice can be used multiple times\n        return areResponseAreasFilled;\n      }\n\n      // any correct answer have any unplaced answer choices (by the author)\n      if (hasUnplacedChoices) {\n        return areResponseAreasFilled;\n      }\n\n      const allAnswersValue = answers.map((answer) => answer.value);\n\n      // check if any correct answer have any unplaced answer choices (by the student)\n      const requiredAnswersPlaced = completeResponses.some((response) =>\n        response.every((val) => allAnswersValue.includes(val)),\n      );\n\n      // true - all choices (required for a correct response) were placed into a response area\n      return requiredAnswersPlaced;\n    }\n\n    return areResponseAreasFilled;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  updateAnswer(data) {\n    this._session.answers = data;\n    this._session.selector = 'Mouse';\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width: '100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000',\n      cursor: 'pointer',\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.removeChild(info);\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            const info = this.querySelector('#play-audio-info');\n\n            if (info) {\n              container.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            this.audioComplete = true;\n            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\n\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(ImageClozeAssociationComponent, {\n        model: this._model,\n        session: this._session,\n        updateAnswer: this.updateAnswer.bind(this),\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}