@pie-element/image-cloze-association 3.6.11-next.0 → 3.6.15

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.6.15](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.14...@pie-element/image-cloze-association@3.6.15) (2021-12-13)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association
+
+
+
+
+
+## [3.6.12](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.11...@pie-element/image-cloze-association@3.6.12) (2021-11-29)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association
+
+
+
+
+
+## [3.6.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.7...@pie-element/image-cloze-association@3.6.11) (2021-11-11)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association
+
+
+
+
+
 ## [3.6.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.2...@pie-element/image-cloze-association@3.6.10) (2021-11-11)
 
 
@@ -24,6 +48,44 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+
+## [3.6.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.6...@pie-element/image-cloze-association@3.6.7) (2021-11-01)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association
+
+
+
+
+
+## [3.6.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.5...@pie-element/image-cloze-association@3.6.6) (2021-10-04)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association
+
+
+
+
+
+## [3.6.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.4...@pie-element/image-cloze-association@3.6.5) (2021-09-20)
+
+
+### Bug Fixes
+
+* pie-lib updates ([e521c2f](https://github.com/pie-framework/pie-elements/commit/e521c2f1a44aa7f3e14f82a1cee05ceb484ed0a6))
+* Updated pie-lib versions ([2fe4c5d](https://github.com/pie-framework/pie-elements/commit/2fe4c5d0be2d40f5fdb34815855695a7f1087f56))
+* Updated pie-lib versions ([1c23830](https://github.com/pie-framework/pie-elements/commit/1c23830fc75d1de5f7bb3bb16de3c665ae5fa350))
+
+
+
+
+
+## [3.6.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.3...@pie-element/image-cloze-association@3.6.4) (2021-09-01)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association
+
+
+
+
+
 ## [3.6.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@3.6.2...@pie-element/image-cloze-association@3.6.3) (2021-08-05)
 
 

package/configure/CHANGELOG.md

@@ -3,7 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.1.28](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@3.1.26...@pie-element/image-cloze-association-configure@3.1.28) (2021-11-11)
+## [3.1.33](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@3.1.32...@pie-element/image-cloze-association-configure@3.1.33) (2021-12-13)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association-configure
+
+
+
+
+
+## [3.1.30](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@3.1.29...@pie-element/image-cloze-association-configure@3.1.30) (2021-11-29)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association-configure
+
+
+
+
+
+## [3.1.29](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@3.1.28...@pie-element/image-cloze-association-configure@3.1.29) (2021-10-04)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association-configure
+
+
+
+
+
+## [3.1.28](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@3.1.27...@pie-element/image-cloze-association-configure@3.1.28) (2021-09-20)
 
 
 ### Bug Fixes

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-configure",
   "private": true,
-  "version": "3.1.28",
+  "version": "3.1.33",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.10.11",
+    "@pie-lib/config-ui": "^10.10.13",
     "debug": "^3.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

package/controller/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.19](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@3.2.17...@pie-element/image-cloze-association-controller@3.2.19) (2021-11-11)
+
+**Note:** Version bump only for package @pie-element/image-cloze-association-controller
+
+
+
+
+
 ## [3.2.18](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@3.2.16...@pie-element/image-cloze-association-controller@3.2.18) (2021-11-11)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-controller",
   "private": true,
-  "version": "3.2.18",
+  "version": "3.2.21",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/lib/root.js

@@ -307,10 +307,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
       })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement("span", {
         dangerouslySetInnerHTML: {
           __html: stimulus

package/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","answer","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","possibleResponses","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","push","_","max","map","c","parseInt","isNaN","response","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","index","groupBy","grp","slice","flatMap","possibleResponsesFiltered","find","disabled","image","stimulus","responseCorrect","validation","teacherInstructions","prompt","showDashedBorder","mode","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","answersToShow","hidden","visible","__html","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","WarningInfo","warning","margin","backgroundColor","padding","display","alignItems","width","height","message","paddingLeft","userSelect","classes","propTypes","PropTypes","string","object","isRequired","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withDragContext } from '@pie-lib/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/icons';\nimport { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\n\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 = () =>\n  Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nclass ImageClozeAssociationComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    const {\n      model: {\n        possibleResponses,\n        responseContainers,\n        duplicateResponses,\n        maxResponsePerZone,\n      },\n      session,\n    } = props;\n    let { answers } = session || {};\n    // set id for each possible response\n    const possibleResponsesWithIds = (possibleResponses || []).map(\n      (item, index) => ({\n        value: item,\n        id: `${index}`,\n      })\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\n        ? possibleResponsesWithIds\n        : 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  handleOnAnswerSelect = (answer, responseContainerIndex) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses, maxResponsePerZone } = this.state;\n    let answersToStore;\n\n    if (\n      maxResponsePerZone ===\n      answers.filter((a) => a.containerIndex === responseContainerIndex).length\n    ) {\n      const answersInThisContainer = answers.filter(\n        (a) => a.containerIndex === responseContainerIndex\n      );\n      const answersInOtherContainers = answers.filter(\n        (b) => b.containerIndex !== responseContainerIndex\n      );\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.push({\n          ...shiftedItem,\n          containerIndex: '',\n          id: `${\n            _.max(\n              possibleResponses\n                .map((c) => parseInt(c.id))\n                .filter((id) => !isNaN(id))\n            ) + 1\n          }`,\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) =>\n          duplicateResponses ? true : a.value !== answer.value\n        ), // 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) =>\n          duplicateResponses ? a.id !== answer.id : a.value !== answer.value\n        ),\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\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          : possibleResponses.filter(\n              (response) => response.value !== answer.value\n            ),\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 =\n      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      model: {\n        disabled,\n        duplicateResponses,\n        image,\n        stimulus,\n        responseCorrect,\n        validation,\n        teacherInstructions,\n        prompt,\n        showDashedBorder,\n        mode,\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 =\n      `You’ve reached the limit of ${maxResponsePerZone} responses per area.` +\n      'To add another response, one must first be removed.';\n\n    let answersToShow =\n      responseCorrect !== undefined\n        ? getAnswersCorrectness(answers, validation, duplicateResponses)\n        : answers;\n\n    if (responseCorrect === false && maxResponsePerZone === 1) {\n      answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n    }\n\n    return (\n      <div>\n        <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n        {teacherInstructions && (\n          <Collapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <div dangerouslySetInnerHTML={{ __html: teacherInstructions }} />\n          </Collapsible>\n        )}\n\n        <Typography>\n          <span dangerouslySetInnerHTML={{ __html: stimulus }} />\n        </Typography>\n\n        <CorrectAnswerToggle\n          show={showToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleCorrect}\n        />\n        <br/>\n\n        {(showCorrect && showToggle) ? (\n          <InteractiveSection responseCorrect={true}>\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            />\n          </InteractiveSection>\n        ) : (\n          <InteractiveSection responseCorrect={responseCorrect}>\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            />\n\n            {maxResponsePerZoneWarning && (\n              <WarningInfo message={warningMessage}/>\n            )}\n\n            <PossibleResponses\n              canDrag={!disabled}\n              data={possibleResponses}\n              onAnswerRemove={this.handleOnAnswerRemove}\n              onDragBegin={this.beginDrag}\n              onDragEnd={this.handleOnDragEnd}\n            />\n          </InteractiveSection>)}\n      </div>\n    );\n  }\n}\n\nconst WarningInfo = withStyles({\n  warning: {\n    margin: '0 16px',\n    backgroundColor: '#dddddd',\n    padding: '10px',\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: '5px',\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\n          className={classes.message}\n          dangerouslySetInnerHTML={{ __html: message }}\n        />\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\nexport default withDragContext(ImageClozeAssociationComponent);\n"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","answer","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","possibleResponses","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","push","_","max","map","c","parseInt","isNaN","response","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","index","groupBy","grp","slice","flatMap","possibleResponsesFiltered","find","disabled","image","stimulus","responseCorrect","validation","teacherInstructions","prompt","showDashedBorder","mode","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","answersToShow","hidden","visible","__html","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","WarningInfo","warning","margin","backgroundColor","padding","display","alignItems","width","height","message","paddingLeft","userSelect","classes","propTypes","PropTypes","string","object","isRequired","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withDragContext } from '@pie-lib/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/icons';\nimport { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\n\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 = () =>\n  Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nclass ImageClozeAssociationComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    const {\n      model: {\n        possibleResponses,\n        responseContainers,\n        duplicateResponses,\n        maxResponsePerZone,\n      },\n      session,\n    } = props;\n    let { answers } = session || {};\n    // set id for each possible response\n    const possibleResponsesWithIds = (possibleResponses || []).map(\n      (item, index) => ({\n        value: item,\n        id: `${index}`,\n      })\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\n        ? possibleResponsesWithIds\n        : 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  handleOnAnswerSelect = (answer, responseContainerIndex) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses, maxResponsePerZone } = this.state;\n    let answersToStore;\n\n    if (\n      maxResponsePerZone ===\n      answers.filter((a) => a.containerIndex === responseContainerIndex).length\n    ) {\n      const answersInThisContainer = answers.filter(\n        (a) => a.containerIndex === responseContainerIndex\n      );\n      const answersInOtherContainers = answers.filter(\n        (b) => b.containerIndex !== responseContainerIndex\n      );\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.push({\n          ...shiftedItem,\n          containerIndex: '',\n          id: `${\n            _.max(\n              possibleResponses\n                .map((c) => parseInt(c.id))\n                .filter((id) => !isNaN(id))\n            ) + 1\n          }`,\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) =>\n          duplicateResponses ? true : a.value !== answer.value\n        ), // 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) =>\n          duplicateResponses ? a.id !== answer.id : a.value !== answer.value\n        ),\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\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          : possibleResponses.filter(\n              (response) => response.value !== answer.value\n            ),\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 =\n      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      model: {\n        disabled,\n        duplicateResponses,\n        image,\n        stimulus,\n        responseCorrect,\n        validation,\n        teacherInstructions,\n        prompt,\n        showDashedBorder,\n        mode,\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 =\n      `You’ve reached the limit of ${maxResponsePerZone} responses per area.` +\n      'To add another response, one must first be removed.';\n\n    let answersToShow =\n      responseCorrect !== undefined\n        ? getAnswersCorrectness(answers, validation, duplicateResponses)\n        : answers;\n\n    if (responseCorrect === false && maxResponsePerZone === 1) {\n      answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n    }\n\n    return (\n      <div>\n        <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n        {teacherInstructions && (\n          <Collapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        <Typography>\n          <span dangerouslySetInnerHTML={{ __html: stimulus }} />\n        </Typography>\n\n        <CorrectAnswerToggle\n          show={showToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleCorrect}\n        />\n        <br/>\n\n        {(showCorrect && showToggle) ? (\n          <InteractiveSection responseCorrect={true}>\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            />\n          </InteractiveSection>\n        ) : (\n          <InteractiveSection responseCorrect={responseCorrect}>\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            />\n\n            {maxResponsePerZoneWarning && (\n              <WarningInfo message={warningMessage}/>\n            )}\n\n            <PossibleResponses\n              canDrag={!disabled}\n              data={possibleResponses}\n              onAnswerRemove={this.handleOnAnswerRemove}\n              onDragBegin={this.beginDrag}\n              onDragEnd={this.handleOnDragEnd}\n            />\n          </InteractiveSection>)}\n      </div>\n    );\n  }\n}\n\nconst WarningInfo = withStyles({\n  warning: {\n    margin: '0 16px',\n    backgroundColor: '#dddddd',\n    padding: '10px',\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: '5px',\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\n          className={classes.message}\n          dangerouslySetInnerHTML={{ __html: message }}\n        />\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\nexport default withDragContext(ImageClozeAssociationComponent);\n"],"file":"root.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "3.6.11-next.0+d2dc19035",
+  "version": "3.6.15",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -10,10 +10,10 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.3.31",
+    "@pie-lib/correct-answer-toggle": "^2.3.33",
     "@pie-lib/drag": "^1.1.52",
-    "@pie-lib/math-rendering": "^2.3.11",
-    "@pie-lib/render-ui": "^4.12.2",
+    "@pie-lib/math-rendering": "^2.3.12",
+    "@pie-lib/render-ui": "^4.12.4",
     "classnames": "^2.2.6",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -21,7 +21,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "d2dc19035d4961c1c47b2b41dca50c756915da76",
+  "gitHead": "a1c13d49a8db2188145733261dd177cfb6b617fb",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/root.jsx

@@ -269,7 +269,7 @@ class ImageClozeAssociationComponent extends React.Component {
               visible: 'Hide Teacher Instructions',
             }}
           >
-            <div dangerouslySetInnerHTML={{ __html: teacherInstructions }} />
+            <PreviewPrompt prompt={teacherInstructions} />
           </Collapsible>
         )}