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

@pie-element/image-cloze-association 6.12.6-next.5 → 6.13.0

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 (12) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [6.13.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.12.5...@pie-element/image-cloze-association@6.13.0) (2025-09-02)
+### Bug Fixes
+* update pie-lib/pie-toolbox PD-4579, PD-4430 ([277d2a6](https://github.com/pie-framework/pie-elements/commit/277d2a6bad2fc884ab9d980f71774ba9eca8dbb5))
+* **image-cloze-association:** add maxWidth to images PD-5174 ([ebc3dc2](https://github.com/pie-framework/pie-elements/commit/ebc3dc295a48e21d8591e22626693f81a733cf56))
+### Features
+* update audio completion checks only to be applied if the item has audio PD-5176 ([4c519b0](https://github.com/pie-framework/pie-elements/commit/4c519b08068328635ae2f6e9d5bdf82374a0637e))
 ## [6.12.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@6.12.4...@pie-element/image-cloze-association@6.12.5) (2025-08-15)

package/configure/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.5.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.5.5...@pie-element/image-cloze-association-configure@6.5.6) (2025-09-02)
+### Bug Fixes
+* update pie-lib/pie-toolbox PD-4579, PD-4430 ([277d2a6](https://github.com/pie-framework/pie-elements/commit/277d2a6bad2fc884ab9d980f71774ba9eca8dbb5))
 ## [6.5.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@6.5.4...@pie-element/image-cloze-association-configure@6.5.5) (2025-08-15)

package/configure/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-configure",
   "private": true,
-  "version": "6.5.5",
+  "version": "6.5.6",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.23.2",
+    "@pie-lib/pie-toolbox": "2.23.3",
     "debug": "^3.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

package/controller/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [5.2.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.2.5...@pie-element/image-cloze-association-controller@5.2.6) (2025-09-02)
+### Bug Fixes
+* update pie-lib/pie-toolbox PD-4579, PD-4430 ([277d2a6](https://github.com/pie-framework/pie-elements/commit/277d2a6bad2fc884ab9d980f71774ba9eca8dbb5))
 ## [5.2.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@5.2.4...@pie-element/image-cloze-association-controller@5.2.5) (2025-08-15)

package/controller/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/image-cloze-association-controller",
   "private": true,
-  "version": "5.2.5",
+  "version": "5.2.6",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.23.2",
+    "@pie-lib/pie-toolbox": "2.23.3",
     "debug": "^4.1.1",
     "humps": "^2.0.1",
     "lodash": "^4.17.15"

package/lib/index.js CHANGED Viewed

@@ -60,8 +60,17 @@ var ImageClozeAssociation = /*#__PURE__*/function (_HTMLElement) {
           autoplayAudioEnabled = _ref.autoplayAudioEnabled,
           completeAudioEnabled = _ref.completeAudioEnabled;
+      var elementContext = this; // check audio completion if audio settings are enabled and audio actually exists
       if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
-        return false;
+        if (elementContext) {
+          var audio = elementContext.querySelector('audio');
+          var isInsidePrompt = audio && audio.closest('#preview-prompt'); // only require audio completion if audio exists and is inside the prompt
+          if (audio && isInsidePrompt) {
+            return false;
+          }
+        }
       }
       if (!this._session || !this._session.answers) {

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.js"],"names":["ImageClozeAssociation","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","autoplayAudioEnabled","completeAudioEnabled","audioComplete","_session","answers","Array","isArray","length","s","data","selector","SessionChangedEvent","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","isInsidePrompt","closest","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","el","React","ImageClozeAssociationComponent","model","session","updateAnswer","bind","ReactDOM","render","HTMLElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/pie-toolbox/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n set model(m) {\n this._model = m;\n\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n this._render();\n }\n\n isComplete() {\n const { autoplayAudioEnabled, completeAudioEnabled } =this._model \|\| {};\n\n if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n return false;\n }\n if (!this._session \|\| !this._session.answers) {\n return false;\n }\n\n if (!Array.isArray(this._session.answers)) {\n return false;\n }\n\n return Array.isArray(this._session.answers) && this._session.answers.length > 0;\n }\n\n set session(s) {\n if (s && !s.answers) {\n s.answers = [];\n }\n\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n updateAnswer(data) {\n this._session.answers = data;\n this._session.selector = 'Mouse';\n\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n this._render();\n }\n\n _createAudioInfoToast() {\n const info = document.createElement('div');\n info.id = 'play-audio-info';\n\n Object.assign(info.style, {\n position: 'absolute',\n top: 0,\n width:'100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'white',\n zIndex: '1000',\n cursor: 'pointer'\n });\n\n const img = document.createElement('img');\n img.src = EnableAudioAutoplayImage;\n img.alt = 'Click anywhere to enable audio autoplay';\n img.width = 500;\n img.height = 300;\n\n info.appendChild(img);\n return info;\n }\n\n connectedCallback() {\n this._render();\n\n // Observation: audio in Chrome will have the autoplay attribute,\n // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n const observer = new MutationObserver((mutationsList, observer) => {\n mutationsList.forEach((mutation) => {\n if (mutation.type === 'childList') {\n const audio = this.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n if (!this._model) return;\n if (!this._model.autoplayAudioEnabled) return;\n if (audio && !isInsidePrompt) return;\n if (!audio) return;\n\n const info = this._createAudioInfoToast();\n const container = this.querySelector('#main-container');\n const enableAudio = () => {\n if (this.querySelector('#play-audio-info')) {\n audio.play();\n container.removeChild(info);\n }\n\n document.removeEventListener('click', enableAudio);\n };\n\n // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n setTimeout(() => {\n if (audio.paused && !this.querySelector('#play-audio-info')) {\n // add info message as a toast to enable audio playback\n container.appendChild(info);\n document.addEventListener('click', enableAudio);\n } else {\n document.removeEventListener('click', enableAudio);\n }\n }, 500);\n\n // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n const handlePlaying = () => {\n const info = this.querySelector('#play-audio-info');\n\n if (info) {\n container.removeChild(info);\n }\n\n audio.removeEventListener('playing', handlePlaying);\n };\n\n audio.addEventListener('playing', handlePlaying);\n\n // we need to listen for the ended event to update the isComplete state\n const handleEnded = () => {\n this.audioComplete = true;\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n audio.removeEventListener('ended', handleEnded);\n };\n\n audio.addEventListener('ended', handleEnded);\n\n // store references to remove later\n this._audio = audio;\n this._handlePlaying = handlePlaying;\n this._handleEnded = handleEnded;\n this._enableAudio = enableAudio;\n\n observer.disconnect();\n }\n });\n });\n\n observer.observe(this, { childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._enableAudio);\n\n if (this._audio) {\n this._audio.removeEventListener('playing', this._handlePlaying);\n this._audio.removeEventListener('ended', this._handleEnded);\n this._audio = null;\n }\n }\n\n _render() {\n if (this._model && this._session) {\n const el = React.createElement(ImageClozeAssociationComponent, {\n model: this._model,\n session: this._session,\n updateAnswer: this.updateAnswer.bind(this),\n });\n\n ReactDOM.render(el, this, () => {\n renderMath(this);\n });\n }\n }\n}\n"],"file":"index.js"}
1	+ {"version":3,"sources":["../src/index.js"],"names":["ImageClozeAssociation","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","autoplayAudioEnabled","completeAudioEnabled","elementContext","audioComplete","audio","querySelector","isInsidePrompt","closest","_session","answers","Array","isArray","length","s","data","selector","SessionChangedEvent","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","el","React","ImageClozeAssociationComponent","model","session","updateAnswer","bind","ReactDOM","render","HTMLElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/pie-toolbox/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n set model(m) {\n this._model = m;\n\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n this._render();\n }\n\n isComplete() {\n const { autoplayAudioEnabled, completeAudioEnabled } = this._model \|\| {};\n const elementContext = this;\n\n // check audio completion if audio settings are enabled and audio actually exists\n if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n if (elementContext) {\n const audio = elementContext.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n // only require audio completion if audio exists and is inside the prompt\n if (audio && isInsidePrompt) {\n return false;\n }\n }\n }\n\n if (!this._session \|\| !this._session.answers) {\n return false;\n }\n\n if (!Array.isArray(this._session.answers)) {\n return false;\n }\n\n return Array.isArray(this._session.answers) && this._session.answers.length > 0;\n }\n\n set session(s) {\n if (s && !s.answers) {\n s.answers = [];\n }\n\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n updateAnswer(data) {\n this._session.answers = data;\n this._session.selector = 'Mouse';\n\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n this._render();\n }\n\n _createAudioInfoToast() {\n const info = document.createElement('div');\n info.id = 'play-audio-info';\n\n Object.assign(info.style, {\n position: 'absolute',\n top: 0,\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'white',\n zIndex: '1000',\n cursor: 'pointer'\n });\n\n const img = document.createElement('img');\n img.src = EnableAudioAutoplayImage;\n img.alt = 'Click anywhere to enable audio autoplay';\n img.width = 500;\n img.height = 300;\n\n info.appendChild(img);\n return info;\n }\n\n connectedCallback() {\n this._render();\n\n // Observation: audio in Chrome will have the autoplay attribute,\n // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n const observer = new MutationObserver((mutationsList, observer) => {\n mutationsList.forEach((mutation) => {\n if (mutation.type === 'childList') {\n const audio = this.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n if (!this._model) return;\n if (!this._model.autoplayAudioEnabled) return;\n if (audio && !isInsidePrompt) return;\n if (!audio) return;\n\n const info = this._createAudioInfoToast();\n const container = this.querySelector('#main-container');\n const enableAudio = () => {\n if (this.querySelector('#play-audio-info')) {\n audio.play();\n container.removeChild(info);\n }\n\n document.removeEventListener('click', enableAudio);\n };\n\n // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n setTimeout(() => {\n if (audio.paused && !this.querySelector('#play-audio-info')) {\n // add info message as a toast to enable audio playback\n container.appendChild(info);\n document.addEventListener('click', enableAudio);\n } else {\n document.removeEventListener('click', enableAudio);\n }\n }, 500);\n\n // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n const handlePlaying = () => {\n const info = this.querySelector('#play-audio-info');\n\n if (info) {\n container.removeChild(info);\n }\n\n audio.removeEventListener('playing', handlePlaying);\n };\n\n audio.addEventListener('playing', handlePlaying);\n\n // we need to listen for the ended event to update the isComplete state\n const handleEnded = () => {\n this.audioComplete = true;\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n audio.removeEventListener('ended', handleEnded);\n };\n\n audio.addEventListener('ended', handleEnded);\n\n // store references to remove later\n this._audio = audio;\n this._handlePlaying = handlePlaying;\n this._handleEnded = handleEnded;\n this._enableAudio = enableAudio;\n\n observer.disconnect();\n }\n });\n });\n\n observer.observe(this, { childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._enableAudio);\n\n if (this._audio) {\n this._audio.removeEventListener('playing', this._handlePlaying);\n this._audio.removeEventListener('ended', this._handleEnded);\n this._audio = null;\n }\n }\n\n _render() {\n if (this._model && this._session) {\n const el = React.createElement(ImageClozeAssociationComponent, {\n model: this._model,\n session: this._session,\n updateAnswer: this.updateAnswer.bind(this),\n });\n\n ReactDOM.render(el, this, () => {\n renderMath(this);\n });\n }\n }\n}\n"],"file":"index.js"}

package/lib/root.js CHANGED Viewed

@@ -74,7 +74,11 @@ var styles = function styles(theme) {
     main: {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background(),
-      position: 'relative'
+      position: 'relative',
+      '& img': {
+        maxWidth: '100%',
+        height: 'auto'
+      }
     },
     teacherInstructions: {
       marginBottom: theme.spacing.unit * 2

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","position","teacherInstructions","marginBottom","spacing","unit","rationale","marginTop","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","possibleResponses","answer","filter","response","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","maxResponsePerZone","answersToStore","answersInThisContainer","answersInOtherContainers","forEach","a","containerIndex","push","length","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","undefined","filterPossibleAnswers","shouldNotPushInPossibleResponses","showCorrect","responseContainers","session","possibleResponsesWithIds","map","item","index","groupedAnswers","limitedAnswers","grp","slice","possibleResponsesFiltered","find","classes","disabled","extraCSSRules","image","responseAreaFill","stimulus","responseCorrect","validation","prompt","autoplayAudioEnabled","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","fontSizeFactor","customAudioButton","isEvaluateMode","showToggle","possibilityListPosition","isVertical","validResponse","correctAnswers","showRationale","showTeacherInstructions","container","i","images","v","isCorrect","warningMessage","t","lng","count","answersToShow","sharedImageProps","onAnswerSelect","handleOnAnswerSelect","onDragAnswerBegin","beginDrag","onDragAnswerEnd","handleOnDragEnd","renderImage","renderPossibleResponses","handleOnAnswerRemove","minWidth","width","height","hidden","visible","toggleCorrect","React","Component","WarningInfo","warning","margin","padding","display","alignItems","message","paddingLeft","userSelect","__html","propTypes","PropTypes","string","object","isRequired","func","defaultProps","StyledComponent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { color, Collapsible, PreviewPrompt, UiLayout, hasText, hasMedia } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport NotInterestedIcon from '@material-ui/icons/NotInterested';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport Translator from '@pie-lib/pie-toolbox/translator';\nimport groupBy from 'lodash/groupBy';\nimport flatMap from 'lodash/flatMap';\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';\n\nconst generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n position: 'relative'\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n rationale: {\n marginTop: theme.spacing.unit * 2,\n },\n});\n\nexport class ImageClozeAssociationComponent extends React.Component {\n constructor(props) {\n super(props);\n const {\n model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },\n session,\n } = props;\n let { answers } = session \|\| {};\n // set id for each possible response\n const possibleResponsesWithIds = (possibleResponses \|\| []).map((item, index) => ({\n value: item,\n id: `${index}`,\n }));\n\n let groupedAnswers = groupBy(answers \|\| [], 'containerIndex');\n // keep only last maxResponsePerZone answers for each zone\n let limitedAnswers = flatMap(groupedAnswers, (grp) => grp.slice(-(maxResponsePerZone \|\| 1)));\n answers = limitedAnswers\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 \n const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n (response) => !answers.find((answer) => answer.value === response.value),\n );\n this.state = {\n answers: answers \|\| [],\n draggingElement: { id: '', value: '' },\n possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,\n // set id for each response containers\n responseContainers: (responseContainers \|\| []).map((item, index) => ({\n index,\n ...item,\n id: `${index}`,\n })),\n maxResponsePerZone: maxResponsePerZone \|\| 1,\n showCorrect: false,\n };\n }\n\n beginDrag = (draggingElement) => {\n this.setState({\n draggingElement,\n });\n };\n\n handleOnDragEnd = () => {\n this.setState({\n draggingElement: { id: '', value: '' },\n });\n };\n\n filterPossibleAnswers = (possibleResponses, answer) =>\n possibleResponses.filter(response => response.value !== answer.value);\n\n handleOnAnswerSelect = (answer, responseContainerIndex) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, maxResponsePerZone } = this.state;\n let { possibleResponses } = this.state;\n let answersToStore;\n\n const answersInThisContainer = [];\n const answersInOtherContainers = [];\n\n answers.forEach((a) => {\n if (a.containerIndex === responseContainerIndex) {\n answersInThisContainer.push(a);\n } else {\n answersInOtherContainers.push(a);\n }\n });\n\n if (maxResponsePerZone === answersInThisContainer.length) {\n const shiftedItem = answersInThisContainer[0];\n if (maxResponsePerZone === 1) {\n answersInThisContainer.shift(); // FIFO\n } else {\n this.setState({ maxResponsePerZoneWarning: true });\n return;\n }\n\n // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n if (!duplicateResponses) {\n possibleResponses = Array.isArray(possibleResponses) ? possibleResponses : [];\n\n possibleResponses.push({\n ...shiftedItem,\n containerIndex: undefined,\n id: shiftedItem.id \|\| generateId(),\n });\n }\n\n // answers will be:\n // + shifted answers for the current container\n // + if duplicatesAllowed, all the other answers from other containers\n // else: all the answers from other containers that are not having the same value\n // + new answer\n answersToStore = [\n ...answersInThisContainer, // shifted\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answersInOtherContainers.filter((a) => (duplicateResponses ? true : a.value !== answer.value)), // un-shifted\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n } else {\n // answers will be:\n // + if duplicatesAllowed, all the other answers, except the one that was dragged\n // else: all the answers that are not having the same value\n // + new answer\n answersToStore = [\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answers.filter((a) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n }\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n possibleResponses:\n // for single response per container remove answer from possible responses\n duplicateResponses ? possibleResponses : this.filterPossibleAnswers(possibleResponses, answer),\n });\n updateAnswer(answersToStore);\n };\n\n handleOnAnswerRemove = (answer) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, possibleResponses } = this.state;\n const answersToStore = answers.filter((a) => a.id !== answer.id);\n const shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses\n\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n // push back into possible responses the removed answer if responses cannot be duplicated\n possibleResponses:\n duplicateResponses \|\| shouldNotPushInPossibleResponses\n ? possibleResponses\n : [\n ...possibleResponses,\n {\n ...answer,\n containerIndex: undefined,\n },\n ],\n });\n updateAnswer(answersToStore);\n };\n\n toggleCorrect = (showCorrect) => this.setState({ showCorrect });\n\n render() {\n const {\n classes,\n model: {\n disabled,\n duplicateResponses,\n extraCSSRules,\n image,\n responseAreaFill,\n stimulus,\n responseCorrect,\n validation,\n teacherInstructions,\n prompt,\n autoplayAudioEnabled,\n showDashedBorder,\n mode,\n rationale,\n language,\n uiStyle = {},\n answerChoiceTransparency,\n responseContainerPadding,\n imageDropTargetPadding,\n fontSizeFactor,\n customAudioButton\n },\n } = this.props;\n const {\n answers,\n draggingElement,\n possibleResponses,\n responseContainers,\n maxResponsePerZone,\n maxResponsePerZoneWarning,\n showCorrect,\n } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showToggle = isEvaluateMode && !responseCorrect;\n const { possibilityListPosition = 'bottom' } = uiStyle \|\| {};\n const isVertical = possibilityListPosition === 'left' \|\| possibilityListPosition === 'right';\n\n const { validResponse } = validation \|\| {};\n const correctAnswers = [];\n const showRationale = rationale && (hasText(rationale) \|\| hasMedia(rationale));\n const showTeacherInstructions = teacherInstructions && (hasText(teacherInstructions) \|\| hasMedia(teacherInstructions));\n\n if (validResponse) {\n (validResponse.value \|\| []).forEach((container, i) => {\n (container.images \|\| []).forEach((v) => {\n correctAnswers.push({\n value: v,\n containerIndex: i,\n isCorrect: true\n });\n });\n });\n }\n\n const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other', {\n lng: language,\n count: maxResponsePerZone,\n });\n\n let answersToShow =\n responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;\n\n if (responseCorrect === false && maxResponsePerZone === 1) {\n answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n }\n\n const sharedImageProps = {\n draggingElement,\n duplicateResponses,\n image,\n onAnswerSelect: this.handleOnAnswerSelect,\n onDragAnswerBegin: this.beginDrag,\n onDragAnswerEnd: this.handleOnDragEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding,\n imageDropTargetPadding,\n maxResponsePerZone,\n };\n\n const renderImage = () => (\n <Image\n {...sharedImageProps}\n canDrag={showCorrect && showToggle ? false : !disabled}\n answers={showCorrect && showToggle ? correctAnswers : answersToShow}\n answerChoiceTransparency={\n !(showCorrect && showToggle) ? answerChoiceTransparency : undefined\n }\n />\n );\n\n const renderPossibleResponses = () => {\n if (showCorrect && showToggle) return null;\n\n return (\n <React.Fragment>\n {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}\n <PossibleResponses\n canDrag={!disabled}\n data={possibleResponses}\n onAnswerRemove={this.handleOnAnswerRemove}\n onDragBegin={this.beginDrag}\n onDragEnd={this.handleOnDragEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n customStyle={{\n minWidth: isVertical ? '130px' : image?.width \|\| 'fit-content',\n }}\n isVertical={isVertical}\n minHeight={isVertical ? image?.height : undefined}\n />\n </React.Fragment>\n );\n };\n\n return (\n <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} className={classes.main} fontSizeFactor={fontSizeFactor}>\n {showTeacherInstructions && (\n <Collapsible\n className={classes.teacherInstructions}\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n <PreviewPrompt prompt={teacherInstructions} />\n </Collapsible>\n )}\n\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n\n <PreviewPrompt prompt={stimulus} />\n\n <CorrectAnswerToggle\n show={showToggle}\n toggled={showCorrect}\n onToggle={this.toggleCorrect}\n language={language}\n />\n\n <InteractiveSection\n responseCorrect={showCorrect && showToggle ? true : responseCorrect}\n uiStyle={uiStyle}\n >\n {renderImage()}\n {renderPossibleResponses()}\n </InteractiveSection>\n\n {showRationale && (\n <Collapsible\n className={classes.rationale}\n labels={{\n hidden: 'Show Rationale',\n visible: 'Hide Rationale',\n }}\n >\n <PreviewPrompt prompt={rationale} />\n </Collapsible>\n )}\n </UiLayout>\n );\n }\n}\n\nconst WarningInfo = withStyles((theme) => ({\n warning: {\n margin: `0 ${theme.spacing.unit * 2}px`,\n backgroundColor: '#dddddd',\n padding: theme.spacing.unit,\n display: 'flex',\n alignItems: 'center',\n '& svg': {\n height: '30px',\n },\n '& h1': {\n padding: '0px',\n margin: '0px',\n },\n },\n message: {\n paddingLeft: theme.spacing.unit / 2,\n userSelect: 'none',\n },\n}))(({ classes, message }) => (\n <TransitionGroup>\n <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n <div key=\"panel\" className={classes.warning}>\n <NotInterestedIcon color={'secondary'} fontSize={'small'} />\n <span className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />\n </div>\n </CSSTransition>\n </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n message: PropTypes.string,\n classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n classes: PropTypes.object,\n model: PropTypes.object.isRequired,\n session: PropTypes.object,\n updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n classes: {},\n};\n\nconst StyledComponent = withStyles(styles)(ImageClozeAssociationComponent);\n\nexport default withDragContext(StyledComponent);\n"],"file":"root.js"}
1	+ {"version":3,"sources":["../src/root.jsx"],"names":["translator","Translator","generateId","Math","random","toString","substring","Date","getTime","styles","theme","main","color","text","backgroundColor","background","position","maxWidth","height","teacherInstructions","marginBottom","spacing","unit","rationale","marginTop","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","possibleResponses","answer","filter","response","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","maxResponsePerZone","answersToStore","answersInThisContainer","answersInOtherContainers","forEach","a","containerIndex","push","length","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","undefined","filterPossibleAnswers","shouldNotPushInPossibleResponses","showCorrect","responseContainers","session","possibleResponsesWithIds","map","item","index","groupedAnswers","limitedAnswers","grp","slice","possibleResponsesFiltered","find","classes","disabled","extraCSSRules","image","responseAreaFill","stimulus","responseCorrect","validation","prompt","autoplayAudioEnabled","showDashedBorder","mode","language","uiStyle","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","fontSizeFactor","customAudioButton","isEvaluateMode","showToggle","possibilityListPosition","isVertical","validResponse","correctAnswers","showRationale","showTeacherInstructions","container","i","images","v","isCorrect","warningMessage","t","lng","count","answersToShow","sharedImageProps","onAnswerSelect","handleOnAnswerSelect","onDragAnswerBegin","beginDrag","onDragAnswerEnd","handleOnDragEnd","renderImage","renderPossibleResponses","handleOnAnswerRemove","minWidth","width","hidden","visible","toggleCorrect","React","Component","WarningInfo","warning","margin","padding","display","alignItems","message","paddingLeft","userSelect","__html","propTypes","PropTypes","string","object","isRequired","func","defaultProps","StyledComponent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { color, Collapsible, PreviewPrompt, UiLayout, hasText, hasMedia } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport NotInterestedIcon from '@material-ui/icons/NotInterested';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport Translator from '@pie-lib/pie-toolbox/translator';\nimport groupBy from 'lodash/groupBy';\nimport flatMap from 'lodash/flatMap';\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';\n\nconst generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n position: 'relative',\n '& img': {\n maxWidth: '100%',\n height: 'auto',\n }\n },\n teacherInstructions: {\n marginBottom: theme.spacing.unit * 2,\n },\n rationale: {\n marginTop: theme.spacing.unit * 2,\n },\n});\n\nexport class ImageClozeAssociationComponent extends React.Component {\n constructor(props) {\n super(props);\n const {\n model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },\n session,\n } = props;\n let { answers } = session \|\| {};\n // set id for each possible response\n const possibleResponsesWithIds = (possibleResponses \|\| []).map((item, index) => ({\n value: item,\n id: `${index}`,\n }));\n\n let groupedAnswers = groupBy(answers \|\| [], 'containerIndex');\n // keep only last maxResponsePerZone answers for each zone\n let limitedAnswers = flatMap(groupedAnswers, (grp) => grp.slice(-(maxResponsePerZone \|\| 1)));\n answers = limitedAnswers\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\n const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n (response) => !answers.find((answer) => answer.value === response.value),\n );\n this.state = {\n answers: answers \|\| [],\n draggingElement: { id: '', value: '' },\n possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,\n // set id for each response containers\n responseContainers: (responseContainers \|\| []).map((item, index) => ({\n index,\n ...item,\n id: `${index}`,\n })),\n maxResponsePerZone: maxResponsePerZone \|\| 1,\n showCorrect: false,\n };\n }\n\n beginDrag = (draggingElement) => {\n this.setState({\n draggingElement,\n });\n };\n\n handleOnDragEnd = () => {\n this.setState({\n draggingElement: { id: '', value: '' },\n });\n };\n\n filterPossibleAnswers = (possibleResponses, answer) =>\n possibleResponses.filter(response => response.value !== answer.value);\n\n handleOnAnswerSelect = (answer, responseContainerIndex) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, maxResponsePerZone } = this.state;\n let { possibleResponses } = this.state;\n let answersToStore;\n\n const answersInThisContainer = [];\n const answersInOtherContainers = [];\n\n answers.forEach((a) => {\n if (a.containerIndex === responseContainerIndex) {\n answersInThisContainer.push(a);\n } else {\n answersInOtherContainers.push(a);\n }\n });\n\n if (maxResponsePerZone === answersInThisContainer.length) {\n const shiftedItem = answersInThisContainer[0];\n if (maxResponsePerZone === 1) {\n answersInThisContainer.shift(); // FIFO\n } else {\n this.setState({ maxResponsePerZoneWarning: true });\n return;\n }\n\n // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n if (!duplicateResponses) {\n possibleResponses = Array.isArray(possibleResponses) ? possibleResponses : [];\n\n possibleResponses.push({\n ...shiftedItem,\n containerIndex: undefined,\n id: shiftedItem.id \|\| generateId(),\n });\n }\n\n // answers will be:\n // + shifted answers for the current container\n // + if duplicatesAllowed, all the other answers from other containers\n // else: all the answers from other containers that are not having the same value\n // + new answer\n answersToStore = [\n ...answersInThisContainer, // shifted\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answersInOtherContainers.filter((a) => (duplicateResponses ? true : a.value !== answer.value)), // un-shifted\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n } else {\n // answers will be:\n // + if duplicatesAllowed, all the other answers, except the one that was dragged\n // else: all the answers that are not having the same value\n // + new answer\n answersToStore = [\n // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n // if yes, this should do it: add a.id !== answer.id instead of 'true'\n ...answers.filter((a) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),\n {\n ...answer,\n containerIndex: responseContainerIndex,\n ...(duplicateResponses ? { id: generateId() } : {}),\n },\n ];\n }\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n possibleResponses:\n // for single response per container remove answer from possible responses\n duplicateResponses ? possibleResponses : this.filterPossibleAnswers(possibleResponses, answer),\n });\n updateAnswer(answersToStore);\n };\n\n handleOnAnswerRemove = (answer) => {\n const {\n model: { duplicateResponses },\n updateAnswer,\n } = this.props;\n const { answers, possibleResponses } = this.state;\n const answersToStore = answers.filter((a) => a.id !== answer.id);\n const shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses\n\n this.setState({\n maxResponsePerZoneWarning: false,\n answers: answersToStore,\n // push back into possible responses the removed answer if responses cannot be duplicated\n possibleResponses:\n duplicateResponses \|\| shouldNotPushInPossibleResponses\n ? possibleResponses\n : [\n ...possibleResponses,\n {\n ...answer,\n containerIndex: undefined,\n },\n ],\n });\n updateAnswer(answersToStore);\n };\n\n toggleCorrect = (showCorrect) => this.setState({ showCorrect });\n\n render() {\n const {\n classes,\n model: {\n disabled,\n duplicateResponses,\n extraCSSRules,\n image,\n responseAreaFill,\n stimulus,\n responseCorrect,\n validation,\n teacherInstructions,\n prompt,\n autoplayAudioEnabled,\n showDashedBorder,\n mode,\n rationale,\n language,\n uiStyle = {},\n answerChoiceTransparency,\n responseContainerPadding,\n imageDropTargetPadding,\n fontSizeFactor,\n customAudioButton\n },\n } = this.props;\n const {\n answers,\n draggingElement,\n possibleResponses,\n responseContainers,\n maxResponsePerZone,\n maxResponsePerZoneWarning,\n showCorrect,\n } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showToggle = isEvaluateMode && !responseCorrect;\n const { possibilityListPosition = 'bottom' } = uiStyle \|\| {};\n const isVertical = possibilityListPosition === 'left' \|\| possibilityListPosition === 'right';\n\n const { validResponse } = validation \|\| {};\n const correctAnswers = [];\n const showRationale = rationale && (hasText(rationale) \|\| hasMedia(rationale));\n const showTeacherInstructions = teacherInstructions && (hasText(teacherInstructions) \|\| hasMedia(teacherInstructions));\n\n if (validResponse) {\n (validResponse.value \|\| []).forEach((container, i) => {\n (container.images \|\| []).forEach((v) => {\n correctAnswers.push({\n value: v,\n containerIndex: i,\n isCorrect: true\n });\n });\n });\n }\n\n const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other', {\n lng: language,\n count: maxResponsePerZone,\n });\n\n let answersToShow =\n responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;\n\n if (responseCorrect === false && maxResponsePerZone === 1) {\n answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n }\n\n const sharedImageProps = {\n draggingElement,\n duplicateResponses,\n image,\n onAnswerSelect: this.handleOnAnswerSelect,\n onDragAnswerBegin: this.beginDrag,\n onDragAnswerEnd: this.handleOnDragEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding,\n imageDropTargetPadding,\n maxResponsePerZone,\n };\n\n const renderImage = () => (\n <Image\n {...sharedImageProps}\n canDrag={showCorrect && showToggle ? false : !disabled}\n answers={showCorrect && showToggle ? correctAnswers : answersToShow}\n answerChoiceTransparency={\n !(showCorrect && showToggle) ? answerChoiceTransparency : undefined\n }\n />\n );\n\n const renderPossibleResponses = () => {\n if (showCorrect && showToggle) return null;\n\n return (\n <React.Fragment>\n {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}\n <PossibleResponses\n canDrag={!disabled}\n data={possibleResponses}\n onAnswerRemove={this.handleOnAnswerRemove}\n onDragBegin={this.beginDrag}\n onDragEnd={this.handleOnDragEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n customStyle={{\n minWidth: isVertical ? '130px' : image?.width \|\| 'fit-content',\n }}\n isVertical={isVertical}\n minHeight={isVertical ? image?.height : undefined}\n />\n </React.Fragment>\n );\n };\n\n return (\n <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} className={classes.main} fontSizeFactor={fontSizeFactor}>\n {showTeacherInstructions && (\n <Collapsible\n className={classes.teacherInstructions}\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n <PreviewPrompt prompt={teacherInstructions} />\n </Collapsible>\n )}\n\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n\n <PreviewPrompt prompt={stimulus} />\n\n <CorrectAnswerToggle\n show={showToggle}\n toggled={showCorrect}\n onToggle={this.toggleCorrect}\n language={language}\n />\n\n <InteractiveSection\n responseCorrect={showCorrect && showToggle ? true : responseCorrect}\n uiStyle={uiStyle}\n >\n {renderImage()}\n {renderPossibleResponses()}\n </InteractiveSection>\n\n {showRationale && (\n <Collapsible\n className={classes.rationale}\n labels={{\n hidden: 'Show Rationale',\n visible: 'Hide Rationale',\n }}\n >\n <PreviewPrompt prompt={rationale} />\n </Collapsible>\n )}\n </UiLayout>\n );\n }\n}\n\nconst WarningInfo = withStyles((theme) => ({\n warning: {\n margin: `0 ${theme.spacing.unit * 2}px`,\n backgroundColor: '#dddddd',\n padding: theme.spacing.unit,\n display: 'flex',\n alignItems: 'center',\n '& svg': {\n height: '30px',\n },\n '& h1': {\n padding: '0px',\n margin: '0px',\n },\n },\n message: {\n paddingLeft: theme.spacing.unit / 2,\n userSelect: 'none',\n },\n}))(({ classes, message }) => (\n <TransitionGroup>\n <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n <div key=\"panel\" className={classes.warning}>\n <NotInterestedIcon color={'secondary'} fontSize={'small'} />\n <span className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />\n </div>\n </CSSTransition>\n </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n message: PropTypes.string,\n classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n classes: PropTypes.object,\n model: PropTypes.object.isRequired,\n session: PropTypes.object,\n updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n classes: {},\n};\n\nconst StyledComponent = withStyles(styles)(ImageClozeAssociationComponent);\n\nexport default withDragContext(StyledComponent);\n"],"file":"root.js"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "6.12.6-next.5+cdce4e762",
+  "version": "6.13.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.23.2",
+    "@pie-lib/pie-toolbox": "2.23.3",
     "classnames": "^2.2.6",
     "humps": "^2.0.1",
     "prop-types": "^15.6.1",
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "cdce4e762f1e646e2295307d578ac15d51c554bc",
+  "gitHead": "bef1b851f70ca272ca37ee987d36750f1783781b",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/index.js CHANGED Viewed

@@ -15,11 +15,22 @@ export default class ImageClozeAssociation extends HTMLElement {
   }
   isComplete() {
-    const { autoplayAudioEnabled, completeAudioEnabled } =this._model || {};
+    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};
+    const elementContext = this;
+    // check audio completion if audio settings are enabled and audio actually exists
     if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
-      return false;
+      if (elementContext) {
+        const audio = elementContext.querySelector('audio');
+        const isInsidePrompt = audio && audio.closest('#preview-prompt');
+        // only require audio completion if audio exists and is inside the prompt
+        if (audio && isInsidePrompt) {
+          return false;
+        }
+      }
     }
     if (!this._session || !this._session.answers) {
       return false;
     }
@@ -60,7 +71,7 @@ export default class ImageClozeAssociation extends HTMLElement {
     Object.assign(info.style, {
       position: 'absolute',
       top: 0,
-      width:'100%',
+      width: '100%',
       height: '100%',
       display: 'flex',
       justifyContent: 'center',

package/src/root.jsx CHANGED Viewed

@@ -22,7 +22,11 @@ const styles = (theme) => ({
   main: {
     color: color.text(),
     backgroundColor: color.background(),
-    position: 'relative'
+    position: 'relative',
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+    }
   },
   teacherInstructions: {
     marginBottom: theme.spacing.unit * 2,
@@ -53,8 +57,8 @@ export class ImageClozeAssociationComponent extends React.Component {
       // set id for each answer
       .map((answer, index) => ({ ...answer, id: `${index}` }))
       // return only answer which have a valid container index
-      .filter((answer) => answer.containerIndex < responseContainers.length);
+      .filter((answer) => answer.containerIndex < responseContainers.length);
     const possibleResponsesFiltered = possibleResponsesWithIds.filter(
       (response) => !answers.find((answer) => answer.value === response.value),
     );