npm - @pie-element/image-cloze-association - Versions diffs - 5.23.2-next.5 → 5.23.2-next.8 - Mend

@pie-element/image-cloze-association 5.23.2-next.5 → 5.23.2-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/lib/image-container.js +2 -1
package/lib/image-container.js.map +1 -1
package/lib/interactive-section.js.map +1 -1
package/lib/possible-response.js.map +1 -1
package/lib/possible-responses.js +11 -4
package/lib/possible-responses.js.map +1 -1
package/lib/root.js +4 -1
package/lib/root.js.map +1 -1
package/package.json +2 -2
package/src/image-container.jsx +4 -1
package/src/interactive-section.jsx +4 -6
package/src/possible-response.jsx +17 -13
package/src/possible-responses.jsx +42 -39
package/src/root.jsx +18 -12

package/lib/image-container.js CHANGED Viewed

@@ -131,7 +131,8 @@ var styles = function styles(theme) {
   return {
     base: {
       margin: theme.spacing.unit * 2,
-      position: 'relative'
+      position: 'relative',
+      width: 'fit-content'
     }
   };
 };

package/lib/image-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/image-container.jsx"],"names":["ImageContainer","props","answers","canDrag","classes","draggingElement","duplicateResponses","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","base","map","r","i","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","left","top","id","item","Component","propTypes","PropTypes","array","isRequired","bool","object","shape","func","string","defaultProps","styles","theme","margin","spacing","unit","position"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;IAEMA,c;;;;;;;;;;;;WACJ,kBAAS;AACP,wBAcI,KAAKC,KAdT;AAAA,UACEC,OADF,eACEA,OADF;AAAA,UAEEC,OAFF,eAEEA,OAFF;AAAA,UAGEC,OAHF,eAGEA,OAHF;AAAA,UAIEC,eAJF,eAIEA,eAJF;AAAA,UAKEC,kBALF,eAKEA,kBALF;AAAA,0CAMEC,KANF;AAAA,yDAMkC,EANlC;AAAA,UAMWC,MANX,qBAMWA,MANX;AAAA,UAMmBC,GANnB,qBAMmBA,GANnB;AAAA,UAMwBC,KANxB,qBAMwBA,KANxB;AAAA,UAOEC,cAPF,eAOEA,cAPF;AAAA,UAQEC,iBARF,eAQEA,iBARF;AAAA,UASEC,eATF,eASEA,eATF;AAAA,UAUEC,kBAVF,eAUEA,kBAVF;AAAA,UAWEC,gBAXF,eAWEA,gBAXF;AAAA,UAYEC,gBAZF,eAYEA,gBAZF;AAAA,UAaEC,wBAbF,eAaEA,wBAbF;AAgBA,0BACE;AAAK,QAAA,SAAS,EAAEb,OAAO,CAACc;AAAxB,sBACE;AAAK,QAAA,GAAG,EAAET,GAAV;AAAe,QAAA,MAAM,EAAED,MAAvB;AAA+B,QAAA,KAAK,EAAEE;AAAtC,QADF,~~EAEG~~,CAACI,kBAAkB,IAAI,EAAvB,EAA2BK,GAA3B,CAA+B,UAACC,CAAD,EAAIC,CAAJ,EAAU;AACxC,YAAMC,OAAO,GAAIF,CAAC,CAACZ,MAAF,CAASe,OAAT,CAAiB,GAAjB,EAAsB,EAAtB,IAA4B,GAA7B,GAAoCf,MAApD;AACA,YAAMgB,MAAM,GAAIJ,CAAC,CAACV,KAAF,CAAQa,OAAR,CAAgB,GAAhB,EAAqB,EAArB,IAA2B,GAA5B,GAAmCb,KAAlD;AACA,YAAMe,KAAK,GAAIL,CAAC,CAACM,CAAF,GAAM,GAAP,GAAchB,KAA5B;AACA,YAAMiB,IAAI,GAAIP,CAAC,CAACQ,CAAF,GAAM,GAAP,GAAcpB,MAA3B;AACA,YAAMqB,aAAa,GAAG3B,OAAO,CAAC4B,MAAR,CAAe,UAACC,CAAD;AAAA,iBAAOA,CAAC,CAACC,cAAF,KAAqBZ,CAAC,CAACa,KAA9B;AAAA,SAAf,CAAtB;AAEA,4BACE,gCAAC,2BAAD;AACE,UAAA,OAAO,EAAEJ,aADX;AAEE,UAAA,OAAO,EAAE1B,OAFX;AAGE,UAAA,cAAc,EAAE;AACdK,YAAAA,MAAM,EAAEc,OADM;AAEdZ,YAAAA,KAAK,EAAEc,MAFO;AAGdU,YAAAA,IAAI,EAAET,KAHQ;AAIdU,YAAAA,GAAG,EAAER;AAJS,WAHlB;AASE,UAAA,kBAAkB,EAAErB,kBATtB;AAUE,UAAA,GAAG,EAAEc,CAAC,CAACgB,EAAF,GAAOf,CAVd;AAWE,UAAA,eAAe,EAAEhB,eAXnB;AAYE,UAAA,MAAM,EAAE,gBAACgC,IAAD;AAAA,mBAAU1B,cAAc,CAAC0B,IAAD,EAAOjB,CAAC,CAACa,KAAT,CAAxB;AAAA,WAZV;AAaE,UAAA,iBAAiB,EAAErB,iBAbrB;AAcE,UAAA,eAAe,EAAEC,eAdnB;AAeE,UAAA,gBAAgB,EAAEE,gBAfpB;AAgBE,UAAA,gBAAgB,EAAEC,gBAhBpB;AAiBE,UAAA,wBAAwB,EAAEC;AAjB5B,UADF;AAqBD,OA5BA,~~CAFH~~,CADF;~~AAkCD~~;;;~~EApD0BqB~~,gB;;~~AAuD7BtC~~,cAAc,CAACuC,SAAf,GAA2B;AACzBrC,EAAAA,OAAO,EAAEsC,sBAAUC,KAAV,CAAgBC,UADA;AAEzBvC,EAAAA,OAAO,EAAEqC,sBAAUG,IAAV,CAAeD,UAFC;AAGzBtC,EAAAA,OAAO,EAAEoC,sBAAUI,MAHM;AAIzBvC,EAAAA,eAAe,EAAEmC,sBAAUK,KAAV,CAAgB,EAAhB,EAAoBH,UAJZ;AAKzBpC,EAAAA,kBAAkB,EAAEkC,sBAAUG,IALL;AAMzBpC,EAAAA,KAAK,EAAEiC,sBAAUI,MAAV,CAAiBF,UANC;AAOzB/B,EAAAA,cAAc,EAAE6B,sBAAUM,IAAV,CAAeJ,UAPN;AAQzB9B,EAAAA,iBAAiB,EAAE4B,sBAAUM,IAAV,CAAeJ,UART;AASzB7B,EAAAA,eAAe,EAAE2B,sBAAUM,IAAV,CAAeJ,UATP;AAUzB5B,EAAAA,kBAAkB,EAAE0B,sBAAUC,KAAV,CAAgBC,UAVX;AAWzB3B,EAAAA,gBAAgB,EAAEyB,sBAAUG,IAXH;AAYzB1B,EAAAA,wBAAwB,EAAEuB,sBAAUG,IAZX;AAazB3B,EAAAA,gBAAgB,EAAEwB,sBAAUO;AAbH,CAA3B;AAgBA/C,cAAc,CAACgD,YAAf,GAA8B;AAC5B5C,EAAAA,OAAO,EAAE,EADmB;AAE5BE,EAAAA,kBAAkB,EAAE;AAFQ,CAA9B;;AAKA,IAAM2C,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBhC,IAAAA,IAAI,EAAE;AACJiC,MAAAA,MAAM,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADzB;AAEJC,MAAAA,QAAQ,EAAE;~~AAFN~~;AADmB,GAAZ;AAAA,CAAf;;~~eAMe~~,~~sBAAWL~~,MAAX,EAAmBjD,cAAnB,C","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport ImageDropTarget from './image-drop-target';\n\nclass ImageContainer extends Component {\n render() {\n const {\n answers,\n canDrag,\n classes,\n draggingElement,\n duplicateResponses,\n image: { height, src, width } = {},\n onAnswerSelect,\n onDragAnswerBegin,\n onDragAnswerEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n answerChoiceTransparency\n } = this.props;\n\n return (\n <div className={classes.base}>\n <img src={src} height={height} width={width} />\n {(responseContainers \|\| []).map((r, i) => {\n const rHeight = (r.height.replace('%', '') / 100) * height;\n const rWidth = (r.width.replace('%', '') / 100) * width;\n const rLeft = (r.x / 100) * width;\n const rTop = (r.y / 100) * height;\n const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n return (\n <ImageDropTarget\n answers={answersParsed}\n canDrag={canDrag}\n containerStyle={{\n height: rHeight,\n width: rWidth,\n left: rLeft,\n top: rTop,\n }}\n duplicateResponses={duplicateResponses}\n key={r.id + i}\n draggingElement={draggingElement}\n onDrop={(item) => onAnswerSelect(item, r.index)}\n onDragAnswerBegin={onDragAnswerBegin}\n onDragAnswerEnd={onDragAnswerEnd}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n answerChoiceTransparency={answerChoiceTransparency}\n />\n );\n })}\n </div>\n );\n }\n}\n\nImageContainer.propTypes = {\n answers: PropTypes.array.isRequired,\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n draggingElement: PropTypes.shape({}).isRequired,\n duplicateResponses: PropTypes.bool,\n image: PropTypes.object.isRequired,\n onAnswerSelect: PropTypes.func.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n responseContainers: PropTypes.array.isRequired,\n showDashedBorder: PropTypes.bool,\n answerChoiceTransparency: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n};\n\nImageContainer.defaultProps = {\n classes: {},\n duplicateResponses: false,\n};\n\nconst styles = (theme) => ({\n base: {\n margin: theme.spacing.unit * 2,\n position: 'relative',\n },\n});\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}
1	+ {"version":3,"sources":["../src/image-container.jsx"],"names":["ImageContainer","props","answers","canDrag","classes","draggingElement","duplicateResponses","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","base","map","r","i","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","left","top","id","item","Component","propTypes","PropTypes","array","isRequired","bool","object","shape","func","string","defaultProps","styles","theme","margin","spacing","unit","position"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport ImageDropTarget from './image-drop-target';\n\nclass ImageContainer extends Component {\n render() {\n const {\n answers,\n canDrag,\n classes,\n draggingElement,\n duplicateResponses,\n image: { height, src, width } = {},\n onAnswerSelect,\n onDragAnswerBegin,\n onDragAnswerEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n answerChoiceTransparency,\n } = this.props;\n\n return (\n <div className={classes.base}>\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 duplicateResponses={duplicateResponses}\n key={r.id + i}\n draggingElement={draggingElement}\n onDrop={(item) => onAnswerSelect(item, r.index)}\n onDragAnswerBegin={onDragAnswerBegin}\n onDragAnswerEnd={onDragAnswerEnd}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n answerChoiceTransparency={answerChoiceTransparency}\n />\n );\n })}\n </div>\n );\n }\n}\n\nImageContainer.propTypes = {\n answers: PropTypes.array.isRequired,\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n draggingElement: PropTypes.shape({}).isRequired,\n duplicateResponses: PropTypes.bool,\n image: PropTypes.object.isRequired,\n onAnswerSelect: PropTypes.func.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n responseContainers: PropTypes.array.isRequired,\n showDashedBorder: PropTypes.bool,\n answerChoiceTransparency: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n};\n\nImageContainer.defaultProps = {\n classes: {},\n duplicateResponses: false,\n};\n\nconst styles = (theme) => ({\n base: {\n margin: theme.spacing.unit * 2,\n position: 'relative',\n width: 'fit-content',\n },\n});\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}

package/lib/interactive-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/interactive-section.jsx"],"names":["InteractiveSection","props","classes","responseCorrect","styleProp","undefined","choicePosition","flexDirection","children","uiStyle","classname","getClassname","possibilityListPosition","style","getPositionDirection","evaluationStyle","display","margin","marginTop","React","Component","propTypes","PropTypes","object","oneOfType","element","array","isRequired","bool","number","defaultProps","styles","theme","baseInteractiveStyle","spacing","unit","width","interactiveDefault","border","color","disabled","interactiveCorrect","correct","interactiveIncorrect","incorrect"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;IAEMA,kB;;;;;;;;;;;;WACJ,wBAAe;AACb,wBAAqC,KAAKC,KAA1C;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,eAAjB,eAAiBA,eAAjB;AACA,UAAIC,SAAJ;;AAEA,cAAQD,eAAR;AACE,aAAKE,SAAL;AACED,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF,aAAK,IAAL;AACEA,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF;AACEA,UAAAA,SAAS,GAAG,sBAAZ;AACA;AATJ;;AAWA,aAAOF,OAAO,CAACE,SAAD,CAAd;AACD;;;WAED,~~8BAAsBE~~,~~cAAtB~~,~~EAAsC~~;~~AACpC~~,UAAIC,aAAJ;;AAEA,cAAQD,cAAR;AACE,aAAK,MAAL;AACEC,UAAAA,aAAa,GAAG,aAAhB;AACA;;AACF,aAAK,OAAL;AACEA,UAAAA,aAAa,GAAG,KAAhB;AACA;;AACF,aAAK,KAAL;AACEA,UAAAA,aAAa,GAAG,gBAAhB;AACA;;AACF;AACE;AACAA,UAAAA,aAAa,GAAG,QAAhB;AACA;AAbJ;;AAgBA,aAAOA,aAAP;AACD;;;WAED,kBAAS;AACP,yBAA+C,KAAKN,KAApD;AAAA,UAAQO,QAAR,gBAAQA,QAAR;AAAA,UAAkBL,eAAlB,gBAAkBA,eAAlB;AAAA,UAAmCM,OAAnC,gBAAmCA,OAAnC;AACA,UAAMC,SAAS,GAAG,KAAKC,YAAL,EAAlB;;AACA,~~iBAA8CF~~,OAAO,IAAI,~~EAAzD~~;AAAA,uCAAQG,uBAAR;AAAA,UAAQA,uBAAR,sCAAkC,QAAlC;;AACA,UAAMC,KAAK,GAAG;~~AACZN~~,QAAAA,aAAa,EAAE,KAAKO,oBAAL,CAA0BF,uBAA1B;~~AADH~~,OAAd;~~AAGA~~,UAAMG,eAAe,GAAG;AACtBC,QAAAA,OAAO,EAAE,MADa;AAEtBC,QAAAA,MAAM,EAAE,QAFc;AAGtBC,QAAAA,SAAS,EAAE,CAAC;AAHU,OAAxB;AAMA,0BACE;AAAK,QAAA,SAAS,EAAER,SAAhB;AAA2B,QAAA,KAAK,EAAEG;AAAlC,sBACE,gCAAC,0BAAD;AAAgB,QAAA,cAAc,EAAEE,eAAhC;AAAiD,QAAA,MAAM,MAAvD;AAAwD,QAAA,SAAS,EAAEZ;AAAnE,QADF,EAEGK,QAFH,CADF;AAMD;;;~~EA5D8BW~~,kBAAMC,S;;~~AA+DvCpB~~,kBAAkB,CAACqB,SAAnB,GAA+B;AAC7BnB,EAAAA,OAAO,EAAEoB,sBAAUC,MADU;AAE7Bf,EAAAA,QAAQ,EAAEc,sBAAUE,SAAV,CAAoB,CAACF,sBAAUG,OAAX,EAAoBH,sBAAUI,KAA9B,CAApB,EAA0DC,UAFvC;AAG7BxB,EAAAA,eAAe,EAAEmB,sBAAUE,SAAV,CAAoB,CAACF,sBAAUM,IAAX,EAAiBN,sBAAUO,MAA3B,CAApB,CAHY;AAI7BpB,EAAAA,OAAO,EAAEa,sBAAUC;AAJU,CAA/B;AAOAvB,kBAAkB,CAAC8B,YAAnB,GAAkC;AAChC5B,EAAAA,OAAO,EAAE,EADuB;AAEhCC,EAAAA,eAAe,EAAEE;AAFe,CAAlC;;AAKA,IAAM0B,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;AACxB,MAAMC,oBAAoB,GAAG;AAC3Bf,IAAAA,SAAS,EAAEc,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADL;AAE3BnB,IAAAA,OAAO,EAAE,MAFkB;AAG3BoB,IAAAA,KAAK,EAAE;AAHoB,GAA7B;AAMA,SAAO;AACLC,IAAAA,kBAAkB,kCACbJ,oBADa;AAEhBK,MAAAA,MAAM,sBAAeC,gBAAMC,QAAN,EAAf;AAFU,MADb;AAKLC,IAAAA,kBAAkB,kCACbR,oBADa;AAEhBK,MAAAA,MAAM,sBAAeC,gBAAMG,OAAN,EAAf;AAFU,MALb;AASLC,IAAAA,oBAAoB,kCACfV,oBADe;AAElBK,MAAAA,MAAM,sBAAeC,gBAAMK,SAAN,EAAf;AAFY;AATf,GAAP;AAcD,CArBD;;eAuBe,sBAAWb,MAAX,EAAmB/B,kBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\n\nclass InteractiveSection extends React.Component {\n getClassname() {\n const { classes, responseCorrect } = this.props;\n let styleProp;\n\n switch (responseCorrect) {\n case undefined:\n styleProp = 'interactiveDefault';\n break;\n case true:\n styleProp = 'interactiveCorrect';\n break;\n default:\n styleProp = 'interactiveIncorrect';\n break;\n }\n return classes[styleProp];\n }\n\n getPositionDirection (choicePosition) {\n let flexDirection;\n\n switch (choicePosition) {\n case 'left':\n flexDirection = 'row-reverse';\n break;\n case 'right':\n flexDirection = 'row';\n break;\n case 'top':\n flexDirection = 'column-reverse';\n break;\n default:\n // bottom\n flexDirection = 'column';\n break;\n }\n\n return flexDirection;\n };\n\n render() {\n const { children, responseCorrect, uiStyle } = this.props;\n const classname = this.getClassname();\n const { possibilityListPosition = 'bottom'} = uiStyle \|\| {};\n const style = {\n flexDirection: this.getPositionDirection(possibilityListPosition)~~,\n~~ };\n const evaluationStyle = {\n display: 'flex',\n margin: '0 auto',\n marginTop: -14,\n };\n\n return (\n <div className={classname} style={style}>\n <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />\n {children}\n </div>\n );\n }\n}\n\nInteractiveSection.propTypes = {\n classes: PropTypes.object,\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,\n responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n uiStyle: PropTypes.object,\n};\n\nInteractiveSection.defaultProps = {\n classes: {},\n responseCorrect: undefined,\n};\n\nconst styles = (theme) => {\n const baseInteractiveStyle = {\n marginTop: theme.spacing.unit * 2,\n display: 'flex',\n width: 'fit-content',\n };\n\n return {\n interactiveDefault: {\n ...baseInteractiveStyle,\n border: `1px solid ${color.disabled()}`,\n },\n interactiveCorrect: {\n ...baseInteractiveStyle,\n border: `2px solid ${color.correct()}`,\n },\n interactiveIncorrect: {\n ...baseInteractiveStyle,\n border: `2px solid ${color.incorrect()}`,\n },\n };\n};\n\nexport default withStyles(styles)(InteractiveSection);\n"],"file":"interactive-section.js"}
1	+ {"version":3,"sources":["../src/interactive-section.jsx"],"names":["InteractiveSection","props","classes","responseCorrect","styleProp","undefined","choicePosition","flexDirection","children","uiStyle","classname","getClassname","possibilityListPosition","style","getPositionDirection","evaluationStyle","display","margin","marginTop","React","Component","propTypes","PropTypes","object","oneOfType","element","array","isRequired","bool","number","defaultProps","styles","theme","baseInteractiveStyle","spacing","unit","width","interactiveDefault","border","color","disabled","interactiveCorrect","correct","interactiveIncorrect","incorrect"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\n\nclass InteractiveSection extends React.Component {\n getClassname() {\n const { classes, responseCorrect } = this.props;\n let styleProp;\n\n switch (responseCorrect) {\n case undefined:\n styleProp = 'interactiveDefault';\n break;\n case true:\n styleProp = 'interactiveCorrect';\n break;\n default:\n styleProp = 'interactiveIncorrect';\n break;\n }\n return classes[styleProp];\n }\n\n getPositionDirection(choicePosition) {\n let flexDirection;\n\n switch (choicePosition) {\n case 'left':\n flexDirection = 'row-reverse';\n break;\n case 'right':\n flexDirection = 'row';\n break;\n case 'top':\n flexDirection = 'column-reverse';\n break;\n default:\n // bottom\n flexDirection = 'column';\n break;\n }\n\n return flexDirection;\n }\n\n render() {\n const { children, responseCorrect, uiStyle } = this.props;\n const classname = this.getClassname();\n const { possibilityListPosition = 'bottom' } = uiStyle \|\| {};\n const style = { flexDirection: this.getPositionDirection(possibilityListPosition) };\n const evaluationStyle = {\n display: 'flex',\n margin: '0 auto',\n marginTop: -14,\n };\n\n return (\n <div className={classname} style={style}>\n <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />\n {children}\n </div>\n );\n }\n}\n\nInteractiveSection.propTypes = {\n classes: PropTypes.object,\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,\n responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n uiStyle: PropTypes.object,\n};\n\nInteractiveSection.defaultProps = {\n classes: {},\n responseCorrect: undefined,\n};\n\nconst styles = (theme) => {\n const baseInteractiveStyle = {\n marginTop: theme.spacing.unit * 2,\n display: 'flex',\n width: 'fit-content',\n };\n\n return {\n interactiveDefault: {\n ...baseInteractiveStyle,\n border: `1px solid ${color.disabled()}`,\n },\n interactiveCorrect: {\n ...baseInteractiveStyle,\n border: `2px solid ${color.correct()}`,\n },\n interactiveIncorrect: {\n ...baseInteractiveStyle,\n border: `2px solid ${color.incorrect()}`,\n },\n };\n};\n\nexport default withStyles(styles)(InteractiveSection);\n"],"file":"interactive-section.js"}

package/lib/possible-response.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","connectDragSource","containerStyle","data","answerChoiceTransparency","isCorrect","evaluationStyle","fontSize","position","bottom","right","correctnessClass","base","span","hiddenSpan","hidden","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","transparent","baseCorrect","correct","baseIncorrect","incorrect","background","pointerEvents","visibility","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAEaA,gB;;;;;;;;;;;;WACX,kBAAS;AAAA;;AACP,wBAAuF,KAAKC,KAA5F;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,iBAAjB,eAAiBA,iBAAjB;AAAA,UAAoCC,cAApC,eAAoCA,cAApC;AAAA,UAAoDC,IAApD,eAAoDA,IAApD;AAAA,UAA0DC,wBAA1D,eAA0DA,wBAA1D;;AACA,iBAAsBD,IAAI,IAAI,EAA9B;AAAA,UAAQE,SAAR,QAAQA,SAAR;;AACA,UAAMC,eAAe,GAAG;AACtBC,QAAAA,QAAQ,EAAE,EADY;AAEtBC,QAAAA,QAAQ,EAAE,UAFY;AAGtBC,QAAAA,MAAM,EAAE,KAHc;AAItBC,QAAAA,KAAK,EAAE;AAJe,OAAxB;AAMA,UAAIC,gBAAJ;;AAEA,cAAQN,SAAR;AACE,aAAK,IAAL;AACEM,UAAAA,gBAAgB,GAAG,aAAnB;AACA;;AACF,aAAK,KAAL;AACEA,UAAAA,gBAAgB,GAAG,eAAnB;AACA;;AACF;AACE;AARJ;;AAWA,aAAOV,iBAAiB,eACtB;~~AAAK~~,QAAA,SAAS,~~EACV~~,4BAAW,~~CACPD~~,OAAO,CAACY,~~IADD~~,~~uDAGFZ~~,OAAO,CAACI,~~wBAHN~~,~~EAGiCA~~,~~wBAHjC~~,~~2CAIFJ~~,OAAO,CAACW,gBAAD,~~CAJL~~,~~EAI0B~~,CAAC,CAACA,~~gBAJ5B~~,UAAX,~~CADJ~~;~~AAQK~~,QAAA,KAAK,EAAET;~~AARZ~~,sBAUE,gCAAC,uBAAD;~~AAAe~~,QAAA,SAAS,EAAE,4BAAW,CAACF,OAAO,CAACa,IAAT,uCAAkBb,OAAO,CAACc,UAA1B,EAAuCX,IAAI,CAACY,MAA5C,EAAX,~~CAA1B~~;~~AAA6F~~,QAAA,MAAM,EAAEZ,IAAI,CAACa,~~KAA1G~~;~~AAAiH~~,QAAA,OAAO,EAAC;~~AAAzH~~,QAVF,~~eAWE~~,gCAAC,0BAAD;AAAgB,QAAA,SAAS,EAAEb,IAAI,CAACE,SAAhC;AAA2C,QAAA,cAAc,EAAEC;AAA3D,~~QAXF~~,CADsB,CAAxB;~~AAeD~~;;;~~EAtCmCW~~,kBAAMC,S;;;~~AAyC5CpB~~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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport classNames from 'classnames';\nimport { PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n render() {\n const { classes, connectDragSource, containerStyle, data, answerChoiceTransparency } = this.props;\n const { isCorrect } = data \|\| {};\n const evaluationStyle = {\n fontSize: 14,\n position: 'absolute',\n bottom: '3px',\n right: '3px',\n };\n let correctnessClass;\n\n switch (isCorrect) {\n case true:\n correctnessClass = 'baseCorrect';\n break;\n case false:\n correctnessClass = 'baseIncorrect';\n break;\n default:\n break;\n }\n\n return connectDragSource(\n <div className={\n classNames([\n classes.base,\n {\n [classes.answerChoiceTransparency]: answerChoiceTransparency,\n [classes[correctnessClass]]: !!correctnessClass,\n }\n ])}\n style={containerStyle}\n >\n <PreviewPrompt className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])} prompt={data.value} tagName=\"span\" />\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 },\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 // 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 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"}
1	+ {"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","connectDragSource","containerStyle","data","answerChoiceTransparency","isCorrect","evaluationStyle","fontSize","position","bottom","right","correctnessClass","base","span","hiddenSpan","hidden","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","white","border","borderDark","display","alignItems","justifyContent","minHeight","width","transparent","baseCorrect","correct","baseIncorrect","incorrect","background","pointerEvents","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 { DragSource } from '@pie-lib/pie-toolbox/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport classNames from 'classnames';\nimport { PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n render() {\n const { classes, connectDragSource, containerStyle, data, answerChoiceTransparency } = this.props;\n const { isCorrect } = data \|\| {};\n const evaluationStyle = {\n fontSize: 14,\n position: 'absolute',\n bottom: '3px',\n right: '3px',\n };\n let correctnessClass;\n\n switch (isCorrect) {\n case true:\n correctnessClass = 'baseCorrect';\n break;\n case false:\n correctnessClass = 'baseIncorrect';\n break;\n default:\n break;\n }\n\n return connectDragSource(\n <div\n className={classNames([\n classes.base,\n {\n [classes.answerChoiceTransparency]: answerChoiceTransparency,\n [classes[correctnessClass]]: !!correctnessClass,\n },\n ])}\n style={containerStyle}\n >\n <PreviewPrompt\n className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}\n prompt={data.value}\n tagName=\"span\"\n />\n <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n </div>,\n );\n }\n}\n\nPossibleResponse.propTypes = {\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n connectDragSource: PropTypes.func,\n containerStyle: PropTypes.object,\n data: PropTypes.object.isRequired,\n onDragBegin: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n answerChoiceTransparency: PropTypes.bool,\n};\n\nPossibleResponse.defaultProps = {\n classes: {},\n connectDragSource: () => {},\n containerStyle: {},\n};\n\nconst styles = () => ({\n base: {\n position: 'relative',\n backgroundColor: color.white(),\n border: `1px solid ${color.borderDark()}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: '28px',\n width: 'fit-content',\n },\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 // 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 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/possible-responses.js CHANGED Viewed

@@ -26,10 +26,13 @@ var PossibleResponses = function PossibleResponses(_ref) {
       onAnswerRemove = _ref.onAnswerRemove,
       onDragBegin = _ref.onDragBegin,
       onDragEnd = _ref.onDragEnd,
-      answerChoiceTransparency = _ref.answerChoiceTransparency;
+      answerChoiceTransparency = _ref.answerChoiceTransparency,
+      customStyle = _ref.customStyle;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.base
+    className: classes.base,
+    style: customStyle
   }, /*#__PURE__*/_react["default"].createElement(_drag.ICADroppablePlaceholder, {
+    classes: classes.pool,
     disabled: !canDrag,
     onRemoveAnswer: onAnswerRemove
   }, (data || []).map(function (item) {
@@ -39,7 +42,10 @@ var PossibleResponses = function PossibleResponses(_ref) {
       data: item,
       onDragBegin: onDragBegin,
       onDragEnd: onDragEnd,
-      answerChoiceTransparency: answerChoiceTransparency
+      answerChoiceTransparency: answerChoiceTransparency,
+      containerStyle: {
+        margin: '4px'
+      }
     });
   })));
 };
@@ -63,7 +69,8 @@ var styles = function styles(theme) {
       backgroundColor: _renderUi.color.background(),
       padding: theme.spacing.unit * 2,
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      width: 'fit-content'
     }
   };
 };

package/lib/possible-responses.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","data","onAnswerRemove","onDragBegin","onDragEnd","answerChoiceTransparency","base","map","item","id","propTypes","PropTypes","bool","isRequired","object","array","func","defaultProps","styles","theme","backgroundColor","color","background","padding","spacing","unit","display","alignItems"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,~~MACKC~~,~~OADL~~,~~QACKA~~,~~OADL~~;AAAA,~~MAEKC~~,~~OAFL~~,~~QAEKA~~,~~OAFL~~;AAAA,~~MAGKC~~,~~IAHL~~,~~QAGKA~~,~~IAHL~~;AAAA,~~MAIKC~~,~~cAJL~~,~~QAIKA~~,~~cAJL~~;AAAA,~~MAKKC~~,~~WALL~~,~~QAKKA~~,~~WALL~~;AAAA,~~MAMKC~~,~~SANL~~,~~QAMKA~~,~~SANL~~;AAAA,~~MAOKC~~,~~wBAPL~~,~~QAOKA~~,~~wBAPL~~;AAAA,~~sBAStB~~;AAAK,IAAA,SAAS,~~EAAEL~~,OAAO,~~CAACM~~;~~AAAxB~~,~~kBACI~~,gCAAC,6BAAD;AAAyB,IAAA,QAAQ,EAAE,~~CAACP~~,~~OAApC~~;~~AAA6C~~,IAAA,cAAc,EAAEG;~~AAA7D~~,~~KACK~~,CAACD,IAAI,IAAI,EAAT,~~EAAaM~~,GAAb,CAAiB,UAACC,IAAD;AAAA,~~wBACd~~,gCAAC,4BAAD;~~AACI~~,MAAA,OAAO,~~EAAET~~,~~OADb~~;~~AAEI~~,MAAA,GAAG,~~EAAES~~,IAAI,CAACC,~~EAFd~~;~~AAGI~~,MAAA,IAAI,EAAED,~~IAHV~~;~~AAII~~,MAAA,WAAW,~~EAAEL~~,~~WAJjB~~;~~AAKI~~,MAAA,SAAS,EAAEC,~~SALf~~;~~AAMI~~,MAAA,wBAAwB,EAAEC;~~AAN9B~~,~~MADc~~;AAAA,GAAjB,~~CADL~~,~~CADJ~~,~~CATsB~~;AAAA,CAA1B;;~~AAyBAP~~,iBAAiB,~~CAACY~~,SAAlB,GAA8B;~~AAC1BX~~,EAAAA,OAAO,~~EAAEY~~,sBAAUC,IAAV,CAAeC,~~UADE~~;~~AAE1Bb~~,EAAAA,OAAO,~~EAAEW~~,sBAAUG,~~MAFO~~;~~AAG1Bb~~,EAAAA,IAAI,~~EAAEU~~,sBAAUI,KAAV,CAAgBF,~~UAHI~~;~~AAI1BX~~,EAAAA,cAAc,~~EAAES~~,sBAAUK,IAAV,CAAeH,~~UAJL~~;~~AAK1BV~~,EAAAA,WAAW,~~EAAEQ~~,sBAAUK,IAAV,CAAeH,~~UALF~~;~~AAM1BT~~,EAAAA,SAAS,~~EAAEO~~,sBAAUK,IAAV,CAAeH,~~UANA~~;~~AAO1BR~~,EAAAA,wBAAwB,~~EAAEM~~,sBAAUC;~~AAPV~~,CAA9B;~~AAUAd~~,iBAAiB,~~CAACmB~~,YAAlB,GAAiC;~~AAC7BjB~~,EAAAA,OAAO,EAAE;~~AADoB~~,CAAjC;;AAIA,~~IAAMkB~~,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;~~AACvBb~~,IAAAA,IAAI,EAAE;~~AACFc~~,MAAAA,eAAe,EAAEC,gBAAMC,UAAN,~~EADf~~;~~AAEFC~~,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,~~CAF5B~~;~~AAGFC~~,MAAAA,OAAO,EAAE,~~MAHP~~;~~AAIFC~~,MAAAA,UAAU,EAAE;~~AAJV~~;~~AADiB~~,GAAZ;AAAA,CAAf;;~~eASe~~,~~sBAAWT~~,MAAX,~~EAAmBpB~~,iBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {withStyles} from '@material-ui/core';\nimport {color} from '@pie-lib/pie-toolbox/render-ui';\nimport {ICADroppablePlaceholder} from '@pie-lib/pie-toolbox/drag';\n\nimport PossibleResponse from './possible-response';\n\nconst PossibleResponses = ({\n canDrag,\n classes,\n data,\n onAnswerRemove,\n onDragBegin,\n onDragEnd,\n answerChoiceTransparency\n }) => (\n <div className={classes.base}>\n <ICADroppablePlaceholder disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>\n {(data \|\| []).map((item) => (\n <PossibleResponse\n canDrag={canDrag}\n key={item.id}\n data={item}\n onDragBegin={onDragBegin}\n onDragEnd={onDragEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n />\n ))}\n </ICADroppablePlaceholder>\n </div>\n);\n\nPossibleResponses.propTypes = {\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n data: PropTypes.array.isRequired,\n onAnswerRemove: PropTypes.func.isRequired,\n onDragBegin: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n answerChoiceTransparency: PropTypes.bool,\n};\n\nPossibleResponses.defaultProps = {\n classes: {},\n};\n\nconst styles = (theme) => ({\n base: {\n backgroundColor: color.background(),\n padding: theme.spacing.unit * 2,\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nexport default withStyles(styles)(PossibleResponses);\n"],"file":"possible-responses.js"}
1	+ {"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","data","onAnswerRemove","onDragBegin","onDragEnd","answerChoiceTransparency","customStyle","base","pool","map","item","id","margin","propTypes","PropTypes","bool","isRequired","object","array","func","defaultProps","styles","theme","backgroundColor","color","background","padding","spacing","unit","display","alignItems","width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,MACxBC,OADwB,QACxBA,OADwB;AAAA,MAExBC,OAFwB,QAExBA,OAFwB;AAAA,MAGxBC,IAHwB,QAGxBA,IAHwB;AAAA,MAIxBC,cAJwB,QAIxBA,cAJwB;AAAA,MAKxBC,WALwB,QAKxBA,WALwB;AAAA,MAMxBC,SANwB,QAMxBA,SANwB;AAAA,MAOxBC,wBAPwB,QAOxBA,wBAPwB;AAAA,MAQxBC,WARwB,QAQxBA,WARwB;AAAA,sBAUxB;AAAK,IAAA,SAAS,EAAEN,OAAO,CAACO,IAAxB;AAA8B,IAAA,KAAK,EAAED;AAArC,kBACE,gCAAC,6BAAD;AAAyB,IAAA,OAAO,EAAEN,OAAO,CAACQ,IAA1C;AAAgD,IAAA,QAAQ,EAAE,CAACT,OAA3D;AAAoE,IAAA,cAAc,EAAEG;AAApF,KACG,CAACD,IAAI,IAAI,EAAT,EAAaQ,GAAb,CAAiB,UAACC,IAAD;AAAA,wBAChB,gCAAC,4BAAD;AACE,MAAA,OAAO,EAAEX,OADX;AAEE,MAAA,GAAG,EAAEW,IAAI,CAACC,EAFZ;AAGE,MAAA,IAAI,EAAED,IAHR;AAIE,MAAA,WAAW,EAAEP,WAJf;AAKE,MAAA,SAAS,EAAEC,SALb;AAME,MAAA,wBAAwB,EAAEC,wBAN5B;AAOE,MAAA,cAAc,EAAE;AAAEO,QAAAA,MAAM,EAAE;AAAV;AAPlB,MADgB;AAAA,GAAjB,CADH,CADF,CAVwB;AAAA,CAA1B;;AA2BAd,iBAAiB,CAACe,SAAlB,GAA8B;AAC5Bd,EAAAA,OAAO,EAAEe,sBAAUC,IAAV,CAAeC,UADI;AAE5BhB,EAAAA,OAAO,EAAEc,sBAAUG,MAFS;AAG5BhB,EAAAA,IAAI,EAAEa,sBAAUI,KAAV,CAAgBF,UAHM;AAI5Bd,EAAAA,cAAc,EAAEY,sBAAUK,IAAV,CAAeH,UAJH;AAK5Bb,EAAAA,WAAW,EAAEW,sBAAUK,IAAV,CAAeH,UALA;AAM5BZ,EAAAA,SAAS,EAAEU,sBAAUK,IAAV,CAAeH,UANE;AAO5BX,EAAAA,wBAAwB,EAAES,sBAAUC;AAPR,CAA9B;AAUAjB,iBAAiB,CAACsB,YAAlB,GAAiC;AAC/BpB,EAAAA,OAAO,EAAE;AADsB,CAAjC;;AAIA,IAAMqB,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBf,IAAAA,IAAI,EAAE;AACJgB,MAAAA,eAAe,EAAEC,gBAAMC,UAAN,EADb;AAEJC,MAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IAAd,GAAqB,CAF1B;AAGJC,MAAAA,OAAO,EAAE,MAHL;AAIJC,MAAAA,UAAU,EAAE,QAJR;AAKJC,MAAAA,KAAK,EAAE;AALH;AADmB,GAAZ;AAAA,CAAf;;eAUe,sBAAWV,MAAX,EAAmBvB,iBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\nimport { ICADroppablePlaceholder } from '@pie-lib/pie-toolbox/drag';\n\nimport PossibleResponse from './possible-response';\n\nconst PossibleResponses = ({\n canDrag,\n classes,\n data,\n onAnswerRemove,\n onDragBegin,\n onDragEnd,\n answerChoiceTransparency,\n customStyle,\n}) => (\n <div className={classes.base} style={customStyle}>\n <ICADroppablePlaceholder classes={classes.pool} disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>\n {(data \|\| []).map((item) => (\n <PossibleResponse\n canDrag={canDrag}\n key={item.id}\n data={item}\n onDragBegin={onDragBegin}\n onDragEnd={onDragEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={{ margin: '4px' }}\n />\n ))}\n </ICADroppablePlaceholder>\n </div>\n);\n\nPossibleResponses.propTypes = {\n canDrag: PropTypes.bool.isRequired,\n classes: PropTypes.object,\n data: PropTypes.array.isRequired,\n onAnswerRemove: PropTypes.func.isRequired,\n onDragBegin: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n answerChoiceTransparency: PropTypes.bool,\n};\n\nPossibleResponses.defaultProps = {\n classes: {},\n};\n\nconst styles = (theme) => ({\n base: {\n backgroundColor: color.background(),\n padding: theme.spacing.unit * 2,\n display: 'flex',\n alignItems: 'center',\n width: 'fit-content',\n },\n});\n\nexport default withStyles(styles)(PossibleResponses);\n"],"file":"possible-responses.js"}

package/lib/root.js CHANGED Viewed

@@ -400,7 +400,10 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         onAnswerRemove: this.handleOnAnswerRemove,
         onDragBegin: this.beginDrag,
         onDragEnd: this.handleOnDragEnd,
-        answerChoiceTransparency: answerChoiceTransparency
+        answerChoiceTransparency: answerChoiceTransparency,
+        customStyle: {
+          minWidth: (image === null || image === void 0 ? void 0 : image.width) || 'fit-content'
+        }
       })), rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         className: classes.rationale,
         labels: {

package/lib/root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/root.jsx"],"names":["translator","Translator","generateId","Math","random","toString","substring","Date","getTime","styles","theme","main","color","text","backgroundColor","background","stimulus","fontSize","typography","teacherInstructions","marginBottom","spacing","unit","rationale","marginTop","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","possibleResponses","answer","index","findIndex","response","slice","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","push","_","max","map","c","parseInt","isNaN","filterPossibleAnswers","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","groupBy","grp","flatMap","possibleResponsesFiltered","find","classes","disabled","image","responseAreaFill","responseCorrect","validation","prompt","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","WarningInfo","warning","margin","padding","display","alignItems","width","height","message","paddingLeft","userSelect","__html","propTypes","PropTypes","string","object","isRequired","func","defaultProps","StyledComponent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/pie-toolbox/icons';\nimport { color, Collapsible, PreviewPrompt, hasText } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nconst { translator } = Translator;\nimport Image from './image-container';\nimport InteractiveSection from './interactive-section';\nimport PossibleResponses from './possible-responses';\nimport { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';\nimport _ from 'lodash';\n\nconst generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n },\n stimulus: {\n fontSize: theme.typography.fontSize,\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n rationale: {\n marginTop: theme.spacing.unit * 2,\n }\n});\n\nclass ImageClozeAssociationComponent extends React.Component {\n constructor(props) {\n super(props);\n const {\n model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },\n session,\n } = props;\n let { answers } = session \|\| {};\n // set id for each possible response\n const possibleResponsesWithIds = (possibleResponses \|\| []).map((item, index) => ({\n value: item,\n id: `${index}`,\n }));\n\n answers = _(answers \|\| [])\n .groupBy('containerIndex')\n // keep only last maxResponsePerZone answers for each zone\n .map((grp) => grp.slice(-(maxResponsePerZone \|\| 1)))\n .flatMap()\n // set id for each answer\n .map((answer, index) => ({ ...answer, id: `${index}` }))\n // return only answer which have a valid container index\n .filter((answer) => answer.containerIndex < responseContainers.length)\n .value();\n\n const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n (response) => !answers.find((answer) => answer.value === response.value),\n );\n this.state = {\n answers: answers \|\| [],\n draggingElement: { id: '', value: '' },\n possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,\n // set id for each response containers\n responseContainers: (responseContainers \|\| []).map((item, index) => ({\n index,\n ...item,\n id: `${index}`,\n })),\n maxResponsePerZone: maxResponsePerZone \|\| 1,\n showCorrect: false,\n };\n }\n\n beginDrag = (draggingElement) => {\n this.setState({\n draggingElement,\n });\n };\n\n handleOnDragEnd = () => {\n this.setState({\n draggingElement: { id: '', value: '' },\n });\n };\n\n filterPossibleAnswers = (possibleResponses, answer) => {\n const index = possibleResponses.findIndex(response => response.value === answer.value);\n\n if (index >= 0) {\n return [\n ...possibleResponses.slice(0, index), // Elements before the found item\n ...possibleResponses.slice(index + 1) // Elements after the found item\n ];\n }\n\n return possibleResponses;\n };\n\n handleOnAnswerSelect = (answer, responseContainerIndex) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, maxResponsePerZone } = this.state;\n let { possibleResponses } = this.state;\n let answersToStore;\n\n if (maxResponsePerZone === answers.filter((a) => a.containerIndex === responseContainerIndex).length) {\n const answersInThisContainer = answers.filter((a) => a.containerIndex === responseContainerIndex);\n const answersInOtherContainers = answers.filter((b) => b.containerIndex !== responseContainerIndex);\n\n const shiftedItem = answersInThisContainer[0];\n if (maxResponsePerZone === 1) {\n answersInThisContainer.shift(); // FIFO\n } else {\n this.setState({ maxResponsePerZoneWarning: true });\n return;\n }\n\n // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n if (!duplicateResponses) {\n possibleResponses = Array.isArray(possibleResponses) ? possibleResponses : [];\n\n possibleResponses.push({\n ...shiftedItem,\n containerIndex: '',\n id: `${_.max(possibleResponses.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) + 1}`,\n });\n }\n\n // answers will be:\n // + shifted answers for the current container\n // + if duplicatesAllowed, all the other answers from other containers\n // else: all the answers from other containers that are not having the same value\n // + new answer\n answersToStore = [\n ...answersInThisContainer, // shifted\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answersInOtherContainers.filter((a) => (duplicateResponses ? true : a.value !== answer.value)), // un-shifted\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n } else {\n // answers will be:\n // + if duplicatesAllowed, all the other answers, except the one that was dragged\n // else: all the answers that are not having the same value\n // + new answer\n answersToStore = [\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answers.filter((a) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n }\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n possibleResponses:\n // for single response per container remove answer from possible responses\n duplicateResponses\n ? possibleResponses\n : this.filterPossibleAnswers(possibleResponses, answer)\n });\n updateAnswer(answersToStore);\n };\n\n handleOnAnswerRemove = (answer) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, possibleResponses } = this.state;\n const answersToStore = answers.filter((a) => a.id !== answer.id);\n const shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses\n\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n // push back into possible responses the removed answer if responses cannot be duplicated\n possibleResponses:\n duplicateResponses \|\| shouldNotPushInPossibleResponses\n ? possibleResponses\n : [\n ...possibleResponses,\n {\n ...answer,\n containerIndex: undefined,\n },\n ],\n });\n updateAnswer(answersToStore);\n };\n\n toggleCorrect = (showCorrect) => this.setState({ showCorrect });\n\n render() {\n const {\n classes,\n model: {\n disabled,\n duplicateResponses,\n image,\n responseAreaFill,\n stimulus,\n responseCorrect,\n validation,\n teacherInstructions,\n prompt,\n showDashedBorder,\n mode,\n rationale,\n language,\n uiStyle = {},\n answerChoiceTransparency\n },\n } = this.props;\n const {\n answers,\n draggingElement,\n possibleResponses,\n responseContainers,\n maxResponsePerZone,\n maxResponsePerZoneWarning,\n showCorrect,\n } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showToggle = isEvaluateMode && !responseCorrect;\n\n const { validResponse } = validation \|\| {};\n const correctAnswers = [];\n\n if (validResponse) {\n (validResponse.value \|\| []).forEach((container, i) => {\n (container.images \|\| []).forEach((v) => {\n correctAnswers.push({\n value: v,\n containerIndex: i,\n });\n });\n });\n }\n\n const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other',\n { lng: language, count: maxResponsePerZone });\n\n let answersToShow =\n responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;\n\n if (responseCorrect === false && maxResponsePerZone === 1) {\n answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n }\n\n return (\n <div className={classes.main}>\n {teacherInstructions && hasText(teacherInstructions) && (\n <Collapsible\n className={classes.teacherInstructions}\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n <PreviewPrompt prompt={teacherInstructions} />\n </Collapsible>\n )}\n\n <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n <PreviewPrompt defaultClassName={classes.stimulus} prompt={stimulus} />\n\n <CorrectAnswerToggle show={showToggle} toggled={showCorrect} onToggle={this.toggleCorrect} language={language}/>\n\n {showCorrect && showToggle ? (\n <InteractiveSection responseCorrect={true} uiStyle={uiStyle}>\n <Image\n canDrag={false}\n answers={correctAnswers}\n draggingElement={draggingElement}\n duplicateResponses={duplicateResponses}\n image={image}\n onAnswerSelect={this.handleOnAnswerSelect}\n onDragAnswerBegin={this.beginDrag}\n onDragAnswerEnd={this.handleOnDragEnd}\n responseContainers={responseContainers}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n />\n </InteractiveSection>\n ) : (\n <InteractiveSection responseCorrect={responseCorrect} uiStyle={uiStyle}>\n <Image\n canDrag={!disabled}\n answers={answersToShow}\n draggingElement={draggingElement}\n duplicateResponses={duplicateResponses}\n image={image}\n onAnswerSelect={this.handleOnAnswerSelect}\n onDragAnswerBegin={this.beginDrag}\n onDragAnswerEnd={this.handleOnDragEnd}\n responseContainers={responseContainers}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n answerChoiceTransparency={answerChoiceTransparency}\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 />\n </InteractiveSection>\n )}\n\n {rationale && hasText(rationale) && (\n <Collapsible\n className={classes.rationale}\n labels={{\n hidden: 'Show Rationale',\n visible: 'Hide Rationale',\n }}\n >\n <PreviewPrompt prompt={rationale} />\n </Collapsible>\n )}\n </div>\n );\n }\n}\n\nconst WarningInfo = withStyles((theme) => ({\n warning: {\n margin: `0 ${theme.spacing.unit * 2}px`,\n backgroundColor: '#dddddd',\n padding: theme.spacing.unit,\n display: 'flex',\n alignItems: 'center',\n width: 'fit-content',\n '& svg': {\n height: '30px',\n },\n '& h1': {\n padding: '0px',\n margin: '0px',\n },\n },\n message: {\n paddingLeft: theme.spacing.unit / 2,\n userSelect: 'none',\n },\n}))(({ classes, message }) => (\n <TransitionGroup>\n <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n <div key=\"panel\" className={classes.warning}>\n <ShowRationale iconSet=\"emoji\" shape=\"square\" />\n <span className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />\n </div>\n </CSSTransition>\n </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n message: PropTypes.string,\n classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n classes: PropTypes.object,\n model: PropTypes.object.isRequired,\n session: PropTypes.object,\n updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n classes: {},\n};\n\nconst StyledComponent = withStyles(styles)(ImageClozeAssociationComponent);\n\nexport default withDragContext(StyledComponent);\n"],"file":"root.js"}
1	+ {"version":3,"sources":["../src/root.jsx"],"names":["translator","Translator","generateId","Math","random","toString","substring","Date","getTime","styles","theme","main","color","text","backgroundColor","background","stimulus","fontSize","typography","teacherInstructions","marginBottom","spacing","unit","rationale","marginTop","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","possibleResponses","answer","index","findIndex","response","slice","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","push","_","max","map","c","parseInt","isNaN","filterPossibleAnswers","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","groupBy","grp","flatMap","possibleResponsesFiltered","find","classes","disabled","image","responseAreaFill","responseCorrect","validation","prompt","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","t","lng","count","answersToShow","hidden","visible","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","minWidth","width","React","Component","WarningInfo","warning","margin","padding","display","alignItems","height","message","paddingLeft","userSelect","__html","propTypes","PropTypes","string","object","isRequired","func","defaultProps","StyledComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AALA,IAAQA,UAAR,GAAuBC,sBAAvB,CAAQD,UAAR;;AAOA,IAAME,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAMC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,SAA3B,CAAqC,CAArC,IAA0C,IAAIC,IAAJ,GAAWC,OAAX,GAAqBH,QAArB,CAA8B,EAA9B,CAAhD;AAAA,CAAnB;;AAEA,IAAMI,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,KAAK,EAAEA,gBAAMC,IAAN,EADH;AAEJC,MAAAA,eAAe,EAAEF,gBAAMG,UAAN;AAFb,KADmB;AAKzBC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,QAAQ,EAAEP,KAAK,CAACQ,UAAN,CAAiBD;AADnB,KALe;AAQzBE,IAAAA,mBAAmB,EAAE;AACnBC,MAAAA,YAAY,EAAEV,KAAK,CAACW,OAAN,CAAcC,IAAd,GAAqB;AADhB,KARI;AAWzBC,IAAAA,SAAS,EAAE;AACTC,MAAAA,SAAS,EAAEd,KAAK,CAACW,OAAN,CAAcC,IAAd,GAAqB;AADvB;AAXc,GAAZ;AAAA,CAAf;;IAgBMG,8B;;;;;AACJ,0CAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,kGA0CP,UAACC,eAAD,EAAqB;AAC/B,YAAKC,QAAL,CAAc;AACZD,QAAAA,eAAe,EAAfA;AADY,OAAd;AAGD,KA9CkB;AAAA,wGAgDD,YAAM;AACtB,YAAKC,QAAL,CAAc;AACZD,QAAAA,eAAe,EAAE;AAAEE,UAAAA,EAAE,EAAE,EAAN;AAAUC,UAAAA,KAAK,EAAE;AAAjB;AADL,OAAd;AAGD,KApDkB;AAAA,8GAsDK,UAACC,iBAAD,EAAoBC,MAApB,EAA+B;AACrD,UAAMC,KAAK,GAAGF,iBAAiB,CAACG,SAAlB,CAA4B,UAACC,QAAD;AAAA,eAAcA,QAAQ,CAACL,KAAT,KAAmBE,MAAM,CAACF,KAAxC;AAAA,OAA5B,CAAd;;AAEA,UAAIG,KAAK,IAAI,CAAb,EAAgB;AACd,6DACKF,iBAAiB,CAACK,KAAlB,CAAwB,CAAxB,EAA2BH,KAA3B,CADL,uCAEKF,iBAAiB,CAACK,KAAlB,CAAwBH,KAAK,GAAG,CAAhC,CAFL;AAID;;AAED,aAAOF,iBAAP;AACD,KAjEkB;AAAA,6GAmEI,UAACC,MAAD,EAASK,sBAAT,EAAoC;AACzD,wBAGI,MAAKX,KAHT;AAAA,UACWY,kBADX,eACEC,KADF,CACWD,kBADX;AAAA,UAEEE,YAFF,eAEEA,YAFF;AAIA,wBAAwC,MAAKC,KAA7C;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,kBAAjB,eAAiBA,kBAAjB;AACA,UAAMZ,iBAAN,GAA4B,MAAKU,KAAjC,CAAMV,iBAAN;AACA,UAAIa,cAAJ;;AAEA,UAAID,kBAAkB,KAAKD,OAAO,CAACG,MAAR,CAAe,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACC,cAAF,KAAqBV,sBAA5B;AAAA,OAAf,EAAmEW,MAA9F,EAAsG;AACpG,YAAMC,sBAAsB,GAAGP,OAAO,CAACG,MAAR,CAAe,UAACC,CAAD;AAAA,iBAAOA,CAAC,CAACC,cAAF,KAAqBV,sBAA5B;AAAA,SAAf,CAA/B;AACA,YAAMa,wBAAwB,GAAGR,OAAO,CAACG,MAAR,CAAe,UAACM,CAAD;AAAA,iBAAOA,CAAC,CAACJ,cAAF,KAAqBV,sBAA5B;AAAA,SAAf,CAAjC;AAEA,YAAMe,WAAW,GAAGH,sBAAsB,CAAC,CAAD,CAA1C;;AACA,YAAIN,kBAAkB,KAAK,CAA3B,EAA8B;AAC5BM,UAAAA,sBAAsB,CAACI,KAAvB,GAD4B,CACI;AACjC,SAFD,MAEO;AACL,gBAAKzB,QAAL,CAAc;AAAE0B,YAAAA,yBAAyB,EAAE;AAA7B,WAAd;;AACA;AACD,SAVmG,CAYpG;;;AACA,YAAI,CAAChB,kBAAL,EAAyB;AACvBP,UAAAA,iBAAiB,GAAGwB,KAAK,CAACC,OAAN,CAAczB,iBAAd,IAAmCA,iBAAnC,GAAuD,EAA3E;AAEAA,UAAAA,iBAAiB,CAAC0B,IAAlB,iCACKL,WADL;AAEEL,YAAAA,cAAc,EAAE,EAFlB;AAGElB,YAAAA,EAAE,YAAK6B,mBAAEC,GAAF,CAAM5B,iBAAiB,CAAC6B,GAAlB,CAAsB,UAACC,CAAD;AAAA,qBAAOC,QAAQ,CAACD,CAAC,CAAChC,EAAH,CAAf;AAAA,aAAtB,EAA6CgB,MAA7C,CAAoD,UAAChB,EAAD;AAAA,qBAAQ,CAACkC,KAAK,CAAClC,EAAD,CAAd;AAAA,aAApD,CAAN,IAAiF,CAAtF;AAHJ;AAKD,SArBmG,CAuBpG;AACA;AACA;AACA;AACA;;;AACAe,QAAAA,cAAc,iDACTK,sBADS,uCAITC,wBAAwB,CAACL,MAAzB,CAAgC,UAACC,CAAD;AAAA,iBAAQR,kBAAkB,GAAG,IAAH,GAAUQ,CAAC,CAAChB,KAAF,KAAYE,MAAM,CAACF,KAAvD;AAAA,SAAhC,CAJS,IAIuF;AAJvF,wCAMPE,MANO;AAOVe,UAAAA,cAAc,EAAEV;AAPN,WAQNC,kBAAkB,GAAG;AAAET,UAAAA,EAAE,EAAE3B,UAAU;AAAhB,SAAH,GAA0B,EARtC,GAAd;AAWD,OAvCD,MAuCO;AACL;AACA;AACA;AACA;AACA0C,QAAAA,cAAc,iDAGTF,OAAO,CAACG,MAAR,CAAe,UAACC,CAAD;AAAA,iBAAQR,kBAAkB,GAAGQ,CAAC,CAACjB,EAAF,KAASG,MAAM,CAACH,EAAnB,GAAwBiB,CAAC,CAAChB,KAAF,KAAYE,MAAM,CAACF,KAArE;AAAA,SAAf,CAHS,oCAKPE,MALO;AAMVe,UAAAA,cAAc,EAAEV;AANN,WAONC,kBAAkB,GAAG;AAAET,UAAAA,EAAE,EAAE3B,UAAU;AAAhB,SAAH,GAA0B,EAPtC,GAAd;AAUD;;AACD,YAAK0B,QAAL,CAAc;AACZ0B,QAAAA,yBAAyB,EAAE,KADf;AAEZZ,QAAAA,OAAO,EAAEE,cAFG;AAGZb,QAAAA,iBAAiB,EACf;AACAO,QAAAA,kBAAkB,GAAGP,iBAAH,GAAuB,MAAKiC,qBAAL,CAA2BjC,iBAA3B,EAA8CC,MAA9C;AAL/B,OAAd;;AAOAQ,MAAAA,YAAY,CAACI,cAAD,CAAZ;AACD,KA3IkB;AAAA,6GA6II,UAACZ,MAAD,EAAY;AACjC,yBAGI,MAAKN,KAHT;AAAA,UACWY,kBADX,gBACEC,KADF,CACWD,kBADX;AAAA,UAEEE,YAFF,gBAEEA,YAFF;AAIA,yBAAuC,MAAKC,KAA5C;AAAA,UAAQC,OAAR,gBAAQA,OAAR;AAAA,UAAiBX,iBAAjB,gBAAiBA,iBAAjB;AACA,UAAMa,cAAc,GAAGF,OAAO,CAACG,MAAR,CAAe,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACjB,EAAF,KAASG,MAAM,CAACH,EAAvB;AAAA,OAAf,CAAvB;AACA,UAAMoC,gCAAgC,GAAGjC,MAAM,CAACe,cAAP,KAA0BmB,SAAnE,CAPiC,CAO6C;;AAE9E,YAAKtC,QAAL,CAAc;AACZ0B,QAAAA,yBAAyB,EAAE,KADf;AAEZZ,QAAAA,OAAO,EAAEE,cAFG;AAGZ;AACAb,QAAAA,iBAAiB,EACfO,kBAAkB,IAAI2B,gCAAtB,GACIlC,iBADJ,iDAGSA,iBAHT,oCAKWC,MALX;AAMQe,UAAAA,cAAc,EAAEmB;AANxB;AALU,OAAd;;AAeA1B,MAAAA,YAAY,CAACI,cAAD,CAAZ;AACD,KAtKkB;AAAA,sGAwKH,UAACuB,WAAD;AAAA,aAAiB,MAAKvC,QAAL,CAAc;AAAEuC,QAAAA,WAAW,EAAXA;AAAF,OAAd,CAAjB;AAAA,KAxKG;AAEjB,uBAGIzC,KAHJ,CACEa,KADF;AAAA,QACWR,kBADX,gBACWA,iBADX;AAAA,QAC8BqC,kBAD9B,gBAC8BA,kBAD9B;AAAA,QACkD9B,mBADlD,gBACkDA,kBADlD;AAAA,QACsEK,mBADtE,gBACsEA,kBADtE;AAAA,QAEE0B,OAFF,GAGI3C,KAHJ,CAEE2C,OAFF;;AAIA,eAAkBA,OAAO,IAAI,EAA7B;AAAA,QAAM3B,QAAN,QAAMA,OAAN,CANiB,CAOjB;;;AACA,QAAM4B,wBAAwB,GAAG,CAACvC,kBAAiB,IAAI,EAAtB,EAA0B6B,GAA1B,CAA8B,UAACW,IAAD,EAAOtC,KAAP;AAAA,aAAkB;AAC/EH,QAAAA,KAAK,EAAEyC,IADwE;AAE/E1C,QAAAA,EAAE,YAAKI,KAAL;AAF6E,OAAlB;AAAA,KAA9B,CAAjC;;AAKAS,IAAAA,QAAO,GAAG,wBAAEA,QAAO,IAAI,EAAb,EACP8B,OADO,CACC,gBADD,EAER;AAFQ,KAGPZ,GAHO,CAGH,UAACa,GAAD;AAAA,aAASA,GAAG,CAACrC,KAAJ,CAAU,EAAEO,mBAAkB,IAAI,CAAxB,CAAV,CAAT;AAAA,KAHG,EAIP+B,OAJO,GAKR;AALQ,KAMPd,GANO,CAMH,UAAC5B,MAAD,EAASC,KAAT;AAAA,6CAAyBD,MAAzB;AAAiCH,QAAAA,EAAE,YAAKI,KAAL;AAAnC;AAAA,KANG,EAOR;AAPQ,KAQPY,MARO,CAQA,UAACb,MAAD;AAAA,aAAYA,MAAM,CAACe,cAAP,GAAwBqB,kBAAkB,CAACpB,MAAvD;AAAA,KARA,EASPlB,KATO,EAAV;AAWA,QAAM6C,yBAAyB,GAAGL,wBAAwB,CAACzB,MAAzB,CAChC,UAACV,QAAD;AAAA,aAAc,CAACO,QAAO,CAACkC,IAAR,CAAa,UAAC5C,MAAD;AAAA,eAAYA,MAAM,CAACF,KAAP,KAAiBK,QAAQ,CAACL,KAAtC;AAAA,OAAb,CAAf;AAAA,KADgC,CAAlC;AAGA,UAAKW,KAAL,GAAa;AACXC,MAAAA,OAAO,EAAEA,QAAO,IAAI,EADT;AAEXf,MAAAA,eAAe,EAAE;AAAEE,QAAAA,EAAE,EAAE,EAAN;AAAUC,QAAAA,KAAK,EAAE;AAAjB,OAFN;AAGXC,MAAAA,iBAAiB,EAAEO,mBAAkB,GAAGgC,wBAAH,GAA8BK,yBAHxD;AAIX;AACAP,MAAAA,kBAAkB,EAAE,CAACA,kBAAkB,IAAI,EAAvB,EAA2BR,GAA3B,CAA+B,UAACW,IAAD,EAAOtC,KAAP;AAAA;AACjDA,UAAAA,KAAK,EAALA;AADiD,WAE9CsC,IAF8C;AAGjD1C,UAAAA,EAAE,YAAKI,KAAL;AAH+C;AAAA,OAA/B,CALT;AAUXU,MAAAA,kBAAkB,EAAEA,mBAAkB,IAAI,CAV/B;AAWXwB,MAAAA,WAAW,EAAE;AAXF,KAAb;AA3BiB;AAwClB;;;;WAkID,kBAAS;AACP,yBAmBI,KAAKzC,KAnBT;AAAA,UACEmD,OADF,gBACEA,OADF;AAAA,4CAEEtC,KAFF;AAAA,UAGIuC,QAHJ,sBAGIA,QAHJ;AAAA,UAIIxC,kBAJJ,sBAIIA,kBAJJ;AAAA,UAKIyC,KALJ,sBAKIA,KALJ;AAAA,UAMIC,gBANJ,sBAMIA,gBANJ;AAAA,UAOIhE,QAPJ,sBAOIA,QAPJ;AAAA,UAQIiE,eARJ,sBAQIA,eARJ;AAAA,UASIC,UATJ,sBASIA,UATJ;AAAA,UAUI/D,mBAVJ,sBAUIA,mBAVJ;AAAA,UAWIgE,MAXJ,sBAWIA,MAXJ;AAAA,UAYIC,gBAZJ,sBAYIA,gBAZJ;AAAA,UAaIC,IAbJ,sBAaIA,IAbJ;AAAA,UAcI9D,SAdJ,sBAcIA,SAdJ;AAAA,UAeI+D,QAfJ,sBAeIA,QAfJ;AAAA,qDAgBIC,OAhBJ;AAAA,UAgBIA,OAhBJ,sCAgBc,EAhBd;AAAA,UAiBIC,wBAjBJ,sBAiBIA,wBAjBJ;AAoBA,yBAQI,KAAK/C,KART;AAAA,UACEC,OADF,gBACEA,OADF;AAAA,UAEEf,eAFF,gBAEEA,eAFF;AAAA,UAGEI,iBAHF,gBAGEA,iBAHF;AAAA,UAIEqC,kBAJF,gBAIEA,kBAJF;AAAA,UAKEzB,kBALF,gBAKEA,kBALF;AAAA,UAMEW,yBANF,gBAMEA,yBANF;AAAA,UAOEa,WAPF,gBAOEA,WAPF;AASA,UAAMsB,cAAc,GAAGJ,IAAI,KAAK,UAAhC;AACA,UAAMK,UAAU,GAAGD,cAAc,IAAI,CAACR,eAAtC;;AAEA,kBAA0BC,UAAU,IAAI,EAAxC;AAAA,UAAQS,aAAR,SAAQA,aAAR;;AACA,UAAMC,cAAc,GAAG,EAAvB;;AAEA,UAAID,aAAJ,EAAmB;AACjB,SAACA,aAAa,CAAC7D,KAAd,IAAuB,EAAxB,EAA4B+D,OAA5B,CAAoC,UAACC,SAAD,EAAYC,CAAZ,EAAkB;AACpD,WAACD,SAAS,CAACE,MAAV,IAAoB,EAArB,EAAyBH,OAAzB,CAAiC,UAACI,CAAD,EAAO;AACtCL,YAAAA,cAAc,CAACnC,IAAf,CAAoB;AAClB3B,cAAAA,KAAK,EAAEmE,CADW;AAElBlD,cAAAA,cAAc,EAAEgD;AAFE,aAApB;AAID,WALD;AAMD,SAPD;AAQD;;AAED,UAAMG,cAAc,GAAGlG,UAAU,CAACmG,CAAX,CAAa,0CAAb,EAAyD;AAC9EC,QAAAA,GAAG,EAAEd,QADyE;AAE9Ee,QAAAA,KAAK,EAAE1D;AAFuE,OAAzD,CAAvB;AAKA,UAAI2D,aAAa,GACfrB,eAAe,KAAKf,SAApB,GAAgC,6CAAsBxB,OAAtB,EAA+BwC,UAA/B,EAA2C5C,kBAA3C,CAAhC,GAAiGI,OADnG;;AAGA,UAAIuC,eAAe,KAAK,KAApB,IAA6BtC,kBAAkB,KAAK,CAAxD,EAA2D;AACzD2D,QAAAA,aAAa,iDAAOA,aAAP,uCAAyB,4CAAqBA,aAArB,EAAoCpB,UAApC,CAAzB,EAAb;AACD;;AAED,0BACE;AAAK,QAAA,SAAS,EAAEL,OAAO,CAAClE;AAAxB,SACGQ,mBAAmB,IAAI,uBAAQA,mBAAR,CAAvB,iBACC,gCAAC,qBAAD;AACE,QAAA,SAAS,EAAE0D,OAAO,CAAC1D,mBADrB;AAEE,QAAA,MAAM,EAAE;AACNoF,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AAFV,sBAOE,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAErF;AAAvB,QAPF,CAFJ,eAaE,gCAAC,uBAAD;AAAe,QAAA,SAAS,EAAC,QAAzB;AAAkC,QAAA,MAAM,EAAEgE;AAA1C,QAbF,eAeE,gCAAC,uBAAD;AAAe,QAAA,gBAAgB,EAAEN,OAAO,CAAC7D,QAAzC;AAAmD,QAAA,MAAM,EAAEA;AAA3D,QAfF,eAiBE,gCAAC,wCAAD;AACE,QAAA,IAAI,EAAE0E,UADR;AAEE,QAAA,OAAO,EAAEvB,WAFX;AAGE,QAAA,QAAQ,EAAE,KAAKsC,aAHjB;AAIE,QAAA,QAAQ,EAAEnB;AAJZ,QAjBF,EAwBGnB,WAAW,IAAIuB,UAAf,gBACC,gCAAC,8BAAD;AAAoB,QAAA,eAAe,EAAE,IAArC;AAA2C,QAAA,OAAO,EAAEH;AAApD,sBACE,gCAAC,0BAAD;AACE,QAAA,OAAO,EAAE,KADX;AAEE,QAAA,OAAO,EAAEK,cAFX;AAGE,QAAA,eAAe,EAAEjE,eAHnB;AAIE,QAAA,kBAAkB,EAAEW,kBAJtB;AAKE,QAAA,KAAK,EAAEyC,KALT;AAME,QAAA,cAAc,EAAE,KAAK2B,oBANvB;AAOE,QAAA,iBAAiB,EAAE,KAAKC,SAP1B;AAQE,QAAA,eAAe,EAAE,KAAKC,eARxB;AASE,QAAA,kBAAkB,EAAExC,kBATtB;AAUE,QAAA,gBAAgB,EAAEgB,gBAVpB;AAWE,QAAA,gBAAgB,EAAEJ;AAXpB,QADF,CADD,gBAiBC,gCAAC,8BAAD;AAAoB,QAAA,eAAe,EAAEC,eAArC;AAAsD,QAAA,OAAO,EAAEM;AAA/D,sBACE,gCAAC,0BAAD;AACE,QAAA,OAAO,EAAE,CAACT,QADZ;AAEE,QAAA,OAAO,EAAEwB,aAFX;AAGE,QAAA,eAAe,EAAE3E,eAHnB;AAIE,QAAA,kBAAkB,EAAEW,kBAJtB;AAKE,QAAA,KAAK,EAAEyC,KALT;AAME,QAAA,cAAc,EAAE,KAAK2B,oBANvB;AAOE,QAAA,iBAAiB,EAAE,KAAKC,SAP1B;AAQE,QAAA,eAAe,EAAE,KAAKC,eARxB;AASE,QAAA,kBAAkB,EAAExC,kBATtB;AAUE,QAAA,gBAAgB,EAAEgB,gBAVpB;AAWE,QAAA,gBAAgB,EAAEJ,gBAXpB;AAYE,QAAA,wBAAwB,EAAEQ;AAZ5B,QADF,EAgBGlC,yBAAyB,iBAAI,gCAAC,WAAD;AAAa,QAAA,OAAO,EAAE4C;AAAtB,QAhBhC,eAkBE,gCAAC,8BAAD;AACE,QAAA,OAAO,EAAE,CAACpB,QADZ;AAEE,QAAA,IAAI,EAAE/C,iBAFR;AAGE,QAAA,cAAc,EAAE,KAAK8E,oBAHvB;AAIE,QAAA,WAAW,EAAE,KAAKF,SAJpB;AAKE,QAAA,SAAS,EAAE,KAAKC,eALlB;AAME,QAAA,wBAAwB,EAAEpB,wBAN5B;AAOE,QAAA,WAAW,EAAE;AAAEsB,UAAAA,QAAQ,EAAE,CAAA/B,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEgC,KAAP,KAAgB;AAA5B;AAPf,QAlBF,CAzCJ,EAuEGxF,SAAS,IAAI,uBAAQA,SAAR,CAAb,iBACC,gCAAC,qBAAD;AACE,QAAA,SAAS,EAAEsD,OAAO,CAACtD,SADrB;AAEE,QAAA,MAAM,EAAE;AACNgF,UAAAA,MAAM,EAAE,gBADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AAFV,sBAOE,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAEjF;AAAvB,QAPF,CAxEJ,CADF;AAqFD;;;EA3T0CyF,kBAAMC,S;;AA8TnD,IAAMC,WAAW,GAAG,wBAAW,UAACxG,KAAD;AAAA,SAAY;AACzCyG,IAAAA,OAAO,EAAE;AACPC,MAAAA,MAAM,cAAO1G,KAAK,CAACW,OAAN,CAAcC,IAAd,GAAqB,CAA5B,OADC;AAEPR,MAAAA,eAAe,EAAE,SAFV;AAGPuG,MAAAA,OAAO,EAAE3G,KAAK,CAACW,OAAN,CAAcC,IAHhB;AAIPgG,MAAAA,OAAO,EAAE,MAJF;AAKPC,MAAAA,UAAU,EAAE,QALL;AAMPR,MAAAA,KAAK,EAAE,aANA;AAOP,eAAS;AACPS,QAAAA,MAAM,EAAE;AADD,OAPF;AAUP,cAAQ;AACNH,QAAAA,OAAO,EAAE,KADH;AAEND,QAAAA,MAAM,EAAE;AAFF;AAVD,KADgC;AAgBzCK,IAAAA,OAAO,EAAE;AACPC,MAAAA,WAAW,EAAEhH,KAAK,CAACW,OAAN,CAAcC,IAAd,GAAqB,CAD3B;AAEPqG,MAAAA,UAAU,EAAE;AAFL;AAhBgC,GAAZ;AAAA,CAAX,EAoBhB;AAAA,MAAG9C,OAAH,SAAGA,OAAH;AAAA,MAAY4C,OAAZ,SAAYA,OAAZ;AAAA,sBACF,gCAAC,qCAAD,qBACE,gCAAC,mCAAD;AAAe,IAAA,UAAU,EAAE,IAA3B;AAAiC,IAAA,GAAG,EAAC,IAArC;AAA0C,IAAA,OAAO,EAAE;AAAnD,kBACE;AAAK,IAAA,GAAG,EAAC,OAAT;AAAiB,IAAA,SAAS,EAAE5C,OAAO,CAACsC;AAApC,kBACE,gCAAC,oBAAD;AAAe,IAAA,OAAO,EAAC,OAAvB;AAA+B,IAAA,KAAK,EAAC;AAArC,IADF,eAEE;AAAM,IAAA,SAAS,EAAEtC,OAAO,CAAC4C,OAAzB;AAAkC,IAAA,uBAAuB,EAAE;AAAEG,MAAAA,MAAM,EAAEH;AAAV;AAA3D,IAFF,CADF,CADF,CADE;AAAA,CApBgB,CAApB;AA+BAP,WAAW,CAACW,SAAZ,GAAwB;AACtBJ,EAAAA,OAAO,EAAEK,sBAAUC,MADG;AAEtBlD,EAAAA,OAAO,EAAEiD,sBAAUE,MAAV,CAAiBC;AAFJ,CAAxB;AAKAxG,8BAA8B,CAACoG,SAA/B,GAA2C;AACzChD,EAAAA,OAAO,EAAEiD,sBAAUE,MADsB;AAEzCzF,EAAAA,KAAK,EAAEuF,sBAAUE,MAAV,CAAiBC,UAFiB;AAGzC5D,EAAAA,OAAO,EAAEyD,sBAAUE,MAHsB;AAIzCxF,EAAAA,YAAY,EAAEsF,sBAAUI,IAAV,CAAeD;AAJY,CAA3C;AAOAxG,8BAA8B,CAAC0G,YAA/B,GAA8C;AAC5CtD,EAAAA,OAAO,EAAE;AADmC,CAA9C;AAIA,IAAMuD,eAAe,GAAG,wBAAW3H,MAAX,EAAmBgB,8BAAnB,CAAxB;;eAEe,2BAAgB2G,eAAhB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/pie-toolbox/icons';\nimport { color, Collapsible, PreviewPrompt, hasText } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport Translator from '@pie-lib/pie-toolbox/translator';\n\nconst { translator } = Translator;\nimport Image from './image-container';\nimport InteractiveSection from './interactive-section';\nimport PossibleResponses from './possible-responses';\nimport { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';\nimport _ from 'lodash';\n\nconst generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n },\n stimulus: {\n fontSize: theme.typography.fontSize,\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n rationale: {\n marginTop: theme.spacing.unit * 2,\n },\n});\n\nclass ImageClozeAssociationComponent extends React.Component {\n constructor(props) {\n super(props);\n const {\n model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },\n session,\n } = props;\n let { answers } = session \|\| {};\n // set id for each possible response\n const possibleResponsesWithIds = (possibleResponses \|\| []).map((item, index) => ({\n value: item,\n id: `${index}`,\n }));\n\n answers = _(answers \|\| [])\n .groupBy('containerIndex')\n // keep only last maxResponsePerZone answers for each zone\n .map((grp) => grp.slice(-(maxResponsePerZone \|\| 1)))\n .flatMap()\n // set id for each answer\n .map((answer, index) => ({ ...answer, id: `${index}` }))\n // return only answer which have a valid container index\n .filter((answer) => answer.containerIndex < responseContainers.length)\n .value();\n\n const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n (response) => !answers.find((answer) => answer.value === response.value),\n );\n this.state = {\n answers: answers \|\| [],\n draggingElement: { id: '', value: '' },\n possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,\n // set id for each response containers\n responseContainers: (responseContainers \|\| []).map((item, index) => ({\n index,\n ...item,\n id: `${index}`,\n })),\n maxResponsePerZone: maxResponsePerZone \|\| 1,\n showCorrect: false,\n };\n }\n\n beginDrag = (draggingElement) => {\n this.setState({\n draggingElement,\n });\n };\n\n handleOnDragEnd = () => {\n this.setState({\n draggingElement: { id: '', value: '' },\n });\n };\n\n filterPossibleAnswers = (possibleResponses, answer) => {\n const index = possibleResponses.findIndex((response) => response.value === answer.value);\n\n if (index >= 0) {\n return [\n ...possibleResponses.slice(0, index), // Elements before the found item\n ...possibleResponses.slice(index + 1), // Elements after the found item\n ];\n }\n\n return possibleResponses;\n };\n\n handleOnAnswerSelect = (answer, responseContainerIndex) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, maxResponsePerZone } = this.state;\n let { possibleResponses } = this.state;\n let answersToStore;\n\n if (maxResponsePerZone === answers.filter((a) => a.containerIndex === responseContainerIndex).length) {\n const answersInThisContainer = answers.filter((a) => a.containerIndex === responseContainerIndex);\n const answersInOtherContainers = answers.filter((b) => b.containerIndex !== responseContainerIndex);\n\n const shiftedItem = answersInThisContainer[0];\n if (maxResponsePerZone === 1) {\n answersInThisContainer.shift(); // FIFO\n } else {\n this.setState({ maxResponsePerZoneWarning: true });\n return;\n }\n\n // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n if (!duplicateResponses) {\n possibleResponses = Array.isArray(possibleResponses) ? possibleResponses : [];\n\n possibleResponses.push({\n ...shiftedItem,\n containerIndex: '',\n id: `${_.max(possibleResponses.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) + 1}`,\n });\n }\n\n // answers will be:\n // + shifted answers for the current container\n // + if duplicatesAllowed, all the other answers from other containers\n // else: all the answers from other containers that are not having the same value\n // + new answer\n answersToStore = [\n ...answersInThisContainer, // shifted\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answersInOtherContainers.filter((a) => (duplicateResponses ? true : a.value !== answer.value)), // un-shifted\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n } else {\n // answers will be:\n // + if duplicatesAllowed, all the other answers, except the one that was dragged\n // else: all the answers that are not having the same value\n // + new answer\n answersToStore = [\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answers.filter((a) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n }\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n possibleResponses:\n // for single response per container remove answer from possible responses\n duplicateResponses ? possibleResponses : this.filterPossibleAnswers(possibleResponses, answer),\n });\n updateAnswer(answersToStore);\n };\n\n handleOnAnswerRemove = (answer) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, possibleResponses } = this.state;\n const answersToStore = answers.filter((a) => a.id !== answer.id);\n const shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses\n\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n // push back into possible responses the removed answer if responses cannot be duplicated\n possibleResponses:\n duplicateResponses \|\| shouldNotPushInPossibleResponses\n ? possibleResponses\n : [\n ...possibleResponses,\n {\n ...answer,\n containerIndex: undefined,\n },\n ],\n });\n updateAnswer(answersToStore);\n };\n\n toggleCorrect = (showCorrect) => this.setState({ showCorrect });\n\n render() {\n const {\n classes,\n model: {\n disabled,\n duplicateResponses,\n image,\n responseAreaFill,\n stimulus,\n responseCorrect,\n validation,\n teacherInstructions,\n prompt,\n showDashedBorder,\n mode,\n rationale,\n language,\n uiStyle = {},\n answerChoiceTransparency,\n },\n } = this.props;\n const {\n answers,\n draggingElement,\n possibleResponses,\n responseContainers,\n maxResponsePerZone,\n maxResponsePerZoneWarning,\n showCorrect,\n } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showToggle = isEvaluateMode && !responseCorrect;\n\n const { validResponse } = validation \|\| {};\n const correctAnswers = [];\n\n if (validResponse) {\n (validResponse.value \|\| []).forEach((container, i) => {\n (container.images \|\| []).forEach((v) => {\n correctAnswers.push({\n value: v,\n containerIndex: i,\n });\n });\n });\n }\n\n const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other', {\n lng: language,\n count: maxResponsePerZone,\n });\n\n let answersToShow =\n responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;\n\n if (responseCorrect === false && maxResponsePerZone === 1) {\n answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n }\n\n return (\n <div className={classes.main}>\n {teacherInstructions && hasText(teacherInstructions) && (\n <Collapsible\n className={classes.teacherInstructions}\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n <PreviewPrompt prompt={teacherInstructions} />\n </Collapsible>\n )}\n\n <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n <PreviewPrompt defaultClassName={classes.stimulus} prompt={stimulus} />\n\n <CorrectAnswerToggle\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 />\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 />\n\n {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}\n\n <PossibleResponses\n canDrag={!disabled}\n data={possibleResponses}\n onAnswerRemove={this.handleOnAnswerRemove}\n onDragBegin={this.beginDrag}\n onDragEnd={this.handleOnDragEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n customStyle={{ minWidth: image?.width \|\| 'fit-content' }}\n />\n </InteractiveSection>\n )}\n\n {rationale && hasText(rationale) && (\n <Collapsible\n className={classes.rationale}\n labels={{\n hidden: 'Show Rationale',\n visible: 'Hide Rationale',\n }}\n >\n <PreviewPrompt prompt={rationale} />\n </Collapsible>\n )}\n </div>\n );\n }\n}\n\nconst WarningInfo = withStyles((theme) => ({\n warning: {\n margin: `0 ${theme.spacing.unit * 2}px`,\n backgroundColor: '#dddddd',\n padding: theme.spacing.unit,\n display: 'flex',\n alignItems: 'center',\n width: 'fit-content',\n '& svg': {\n height: '30px',\n },\n '& h1': {\n padding: '0px',\n margin: '0px',\n },\n },\n message: {\n paddingLeft: theme.spacing.unit / 2,\n userSelect: 'none',\n },\n}))(({ classes, message }) => (\n <TransitionGroup>\n <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n <div key=\"panel\" className={classes.warning}>\n <ShowRationale iconSet=\"emoji\" shape=\"square\" />\n <span className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />\n </div>\n </CSSTransition>\n </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n message: PropTypes.string,\n classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n classes: PropTypes.object,\n model: PropTypes.object.isRequired,\n session: PropTypes.object,\n updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n classes: {},\n};\n\nconst StyledComponent = withStyles(styles)(ImageClozeAssociationComponent);\n\nexport default withDragContext(StyledComponent);\n"],"file":"root.js"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "5.23.2-next.5+65ce45e40",
+  "version": "5.23.2-next.8+978892f46",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "65ce45e40e0c7b89a8be1ac286217ec738065240",
+  "gitHead": "978892f46571bee67faf199fc0dbf34213719d65",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/image-container.jsx CHANGED Viewed

@@ -19,12 +19,13 @@ class ImageContainer extends Component {
       responseContainers,
       showDashedBorder,
       responseAreaFill,
-      answerChoiceTransparency
+      answerChoiceTransparency,
     } = this.props;
     return (
       <div className={classes.base}>
         <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;
@@ -84,6 +85,8 @@ const styles = (theme) => ({
   base: {
     margin: theme.spacing.unit * 2,
     position: 'relative',
+    width: 'fit-content',
   },
 });
 export default withStyles(styles)(ImageContainer);

package/src/interactive-section.jsx CHANGED Viewed

@@ -24,7 +24,7 @@ class InteractiveSection extends React.Component {
     return classes[styleProp];
   }
-  getPositionDirection (choicePosition) {
+  getPositionDirection(choicePosition) {
     let flexDirection;
     switch (choicePosition) {
@@ -44,15 +44,13 @@ class InteractiveSection extends React.Component {
     }
     return flexDirection;
-  };
+  }
   render() {
     const { children, responseCorrect, uiStyle } = this.props;
     const classname = this.getClassname();
-    const { possibilityListPosition = 'bottom'} = uiStyle || {};
-    const style = {
-      flexDirection: this.getPositionDirection(possibilityListPosition),
-    };
+    const { possibilityListPosition = 'bottom' } = uiStyle || {};
+    const style = { flexDirection: this.getPositionDirection(possibilityListPosition) };
     const evaluationStyle = {
       display: 'flex',
       margin: '0 auto',

package/src/possible-response.jsx CHANGED Viewed

@@ -32,17 +32,21 @@ export class PossibleResponse extends React.Component {
     }
     return connectDragSource(
-      <div className={
-          classNames([
-              classes.base,
-              {
-                  [classes.answerChoiceTransparency]: answerChoiceTransparency,
-                  [classes[correctnessClass]]: !!correctnessClass,
-              }
-            ])}
-           style={containerStyle}
+      <div
+        className={classNames([
+          classes.base,
+          {
+            [classes.answerChoiceTransparency]: answerChoiceTransparency,
+            [classes[correctnessClass]]: !!correctnessClass,
+          },
+        ])}
+        style={containerStyle}
       >
-        <PreviewPrompt className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])} prompt={data.value} tagName="span" />
+        <PreviewPrompt
+          className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}
+          prompt={data.value}
+          tagName="span"
+        />
         <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />
       </div>,
     );
@@ -57,7 +61,7 @@ PossibleResponse.propTypes = {
   data: PropTypes.object.isRequired,
   onDragBegin: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,
-  answerChoiceTransparency: PropTypes.bool
+  answerChoiceTransparency: PropTypes.bool,
 };
 PossibleResponse.defaultProps = {
@@ -82,8 +86,8 @@ const styles = () => ({
     backgroundColor: `${color.transparent()}`,
     '&:hover': {
-      border: `1px solid ${color.borderDark()}`
-    }
+      border: `1px solid ${color.borderDark()}`,
+    },
   },
   baseCorrect: {
     border: `2px solid ${color.correct()} !important`,

package/src/possible-responses.jsx CHANGED Viewed

@@ -1,57 +1,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {withStyles} from '@material-ui/core';
-import {color} from '@pie-lib/pie-toolbox/render-ui';
-import {ICADroppablePlaceholder} from '@pie-lib/pie-toolbox/drag';
+import { withStyles } from '@material-ui/core';
+import { color } from '@pie-lib/pie-toolbox/render-ui';
+import { ICADroppablePlaceholder } from '@pie-lib/pie-toolbox/drag';
 import PossibleResponse from './possible-response';
 const PossibleResponses = ({
-                               canDrag,
-                               classes,
-                               data,
-                               onAnswerRemove,
-                               onDragBegin,
-                               onDragEnd,
-                               answerChoiceTransparency
-                           }) => (
-    <div className={classes.base}>
-        <ICADroppablePlaceholder disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>
-            {(data || []).map((item) => (
-                <PossibleResponse
-                    canDrag={canDrag}
-                    key={item.id}
-                    data={item}
-                    onDragBegin={onDragBegin}
-                    onDragEnd={onDragEnd}
-                    answerChoiceTransparency={answerChoiceTransparency}
-                />
-            ))}
-        </ICADroppablePlaceholder>
-    </div>
+  canDrag,
+  classes,
+  data,
+  onAnswerRemove,
+  onDragBegin,
+  onDragEnd,
+  answerChoiceTransparency,
+  customStyle,
+}) => (
+  <div className={classes.base} style={customStyle}>
+    <ICADroppablePlaceholder classes={classes.pool} disabled={!canDrag} onRemoveAnswer={onAnswerRemove}>
+      {(data || []).map((item) => (
+        <PossibleResponse
+          canDrag={canDrag}
+          key={item.id}
+          data={item}
+          onDragBegin={onDragBegin}
+          onDragEnd={onDragEnd}
+          answerChoiceTransparency={answerChoiceTransparency}
+          containerStyle={{ margin: '4px' }}
+        />
+      ))}
+    </ICADroppablePlaceholder>
+  </div>
 );
 PossibleResponses.propTypes = {
-    canDrag: PropTypes.bool.isRequired,
-    classes: PropTypes.object,
-    data: PropTypes.array.isRequired,
-    onAnswerRemove: PropTypes.func.isRequired,
-    onDragBegin: PropTypes.func.isRequired,
-    onDragEnd: PropTypes.func.isRequired,
-    answerChoiceTransparency: PropTypes.bool,
+  canDrag: PropTypes.bool.isRequired,
+  classes: PropTypes.object,
+  data: PropTypes.array.isRequired,
+  onAnswerRemove: PropTypes.func.isRequired,
+  onDragBegin: PropTypes.func.isRequired,
+  onDragEnd: PropTypes.func.isRequired,
+  answerChoiceTransparency: PropTypes.bool,
 };
 PossibleResponses.defaultProps = {
-    classes: {},
+  classes: {},
 };
 const styles = (theme) => ({
-    base: {
-        backgroundColor: color.background(),
-        padding: theme.spacing.unit * 2,
-        display: 'flex',
-        alignItems: 'center',
-    },
+  base: {
+    backgroundColor: color.background(),
+    padding: theme.spacing.unit * 2,
+    display: 'flex',
+    alignItems: 'center',
+    width: 'fit-content',
+  },
 });
 export default withStyles(styles)(PossibleResponses);

package/src/root.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { ShowRationale } from '@pie-lib/pie-toolbox/icons';
 import { color, Collapsible, PreviewPrompt, hasText } from '@pie-lib/pie-toolbox/render-ui';
 import { withStyles } from '@material-ui/core/styles';
-import {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';
+import { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';
 import Translator from '@pie-lib/pie-toolbox/translator';
 const { translator } = Translator;
@@ -30,7 +30,7 @@ const styles = (theme) => ({
   },
   rationale: {
     marginTop: theme.spacing.unit * 2,
-  }
+  },
 });
 class ImageClozeAssociationComponent extends React.Component {
@@ -89,12 +89,12 @@ class ImageClozeAssociationComponent extends React.Component {
   };
   filterPossibleAnswers = (possibleResponses, answer) => {
-    const index = possibleResponses.findIndex(response => response.value === answer.value);
+    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
+        ...possibleResponses.slice(0, index), // Elements before the found item
+        ...possibleResponses.slice(index + 1), // Elements after the found item
       ];
     }
@@ -170,9 +170,7 @@ class ImageClozeAssociationComponent extends React.Component {
       answers: answersToStore,
       possibleResponses:
         // for single response per container remove answer from possible responses
-        duplicateResponses
-          ? possibleResponses
-          : this.filterPossibleAnswers(possibleResponses, answer)
+        duplicateResponses ? possibleResponses : this.filterPossibleAnswers(possibleResponses, answer),
     });
     updateAnswer(answersToStore);
   };
@@ -224,7 +222,7 @@ class ImageClozeAssociationComponent extends React.Component {
         rationale,
         language,
         uiStyle = {},
-        answerChoiceTransparency
+        answerChoiceTransparency,
       },
     } = this.props;
     const {
@@ -253,8 +251,10 @@ class ImageClozeAssociationComponent extends React.Component {
       });
     }
-    const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other',
-      { lng: language, count: maxResponsePerZone });
+    const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other', {
+      lng: language,
+      count: maxResponsePerZone,
+    });
     let answersToShow =
       responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;
@@ -281,7 +281,12 @@ class ImageClozeAssociationComponent extends React.Component {
         <PreviewPrompt defaultClassName={classes.stimulus} prompt={stimulus} />
-        <CorrectAnswerToggle show={showToggle} toggled={showCorrect} onToggle={this.toggleCorrect} language={language}/>
+        <CorrectAnswerToggle
+          show={showToggle}
+          toggled={showCorrect}
+          onToggle={this.toggleCorrect}
+          language={language}
+        />
         {showCorrect && showToggle ? (
           <InteractiveSection responseCorrect={true} uiStyle={uiStyle}>
@@ -325,6 +330,7 @@ class ImageClozeAssociationComponent extends React.Component {
               onDragBegin={this.beginDrag}
               onDragEnd={this.handleOnDragEnd}
               answerChoiceTransparency={answerChoiceTransparency}
+              customStyle={{ minWidth: image?.width || 'fit-content' }}
             />
           </InteractiveSection>
         )}