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

package/lib/root.js

@@ -0,0 +1,491 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageClozeAssociationComponent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+var _drag = require("@pie-lib/drag");
+var _reactTransitionGroup = require("react-transition-group");
+var _renderUi = require("@pie-lib/render-ui");
+var _styles = require("@mui/material/styles");
+var _NotInterested = _interopRequireDefault(require("@mui/icons-material/NotInterested"));
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+var _lodashEs = require("lodash-es");
+var _imageContainer = _interopRequireDefault(require("./image-container"));
+var _interactiveSection = _interopRequireDefault(require("./interactive-section"));
+var _possibleResponses2 = _interopRequireDefault(require("./possible-responses"));
+var _utilsCorrectness = require("./utils-correctness");
+var _possibleResponse = _interopRequireDefault(require("./possible-response"));
+const {
+  translator
+} = _translator.default;
+const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  position: 'relative',
+  '& img': {
+    maxWidth: '100%',
+    height: 'auto'
+  }
+});
+const StyledTeacherInstructions = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const StyledRationale = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2)
+}));
+class ImageClozeAssociationComponent extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onDragStart", event => {
+      const {
+        active
+      } = event;
+      if (active?.data?.current) {
+        this.setState({
+          draggingElement: active.data.current,
+          isValidDrop: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "onDragEnd", event => {
+      const {
+        active,
+        over
+      } = event;
+      const {
+        model
+      } = this.props;
+      const {
+        duplicateResponses
+      } = model || {};
+
+      // Check if drop is valid
+      const draggedItem = active?.data?.current;
+      const responseArea = over?.data?.current;
+      const isValidDrop = over && active && draggedItem && responseArea && responseArea.containerIndex !== undefined;
+      const shouldDisableAnimation = isValidDrop && duplicateResponses;
+      this.setState({
+        draggingElement: {
+          id: '',
+          value: ''
+        },
+        isValidDrop: shouldDisableAnimation
+      });
+      if (!over || !active) {
+        return;
+      }
+      if (!draggedItem) {
+        return;
+      }
+      if (over.id === 'ica-board') {
+        this.handleOnAnswerRemove(draggedItem);
+        return;
+      }
+      if (responseArea) {
+        this.handleOnAnswerSelect(draggedItem, responseArea.containerIndex);
+      }
+    });
+    (0, _defineProperty2.default)(this, "renderDragOverlay", () => {
+      const {
+        draggingElement
+      } = this.state;
+      const {
+        model
+      } = this.props;
+      if (!draggingElement.id) return null;
+
+      // check if the response contains an image
+      const imgRegex = /<img[^>]+src="([^">]+)"/;
+      const containsImage = imgRegex.test(draggingElement.value);
+      return /*#__PURE__*/_react.default.createElement(_possibleResponse.default, {
+        key: draggingElement.id,
+        canDrag: false,
+        data: draggingElement,
+        onDragBegin: () => {},
+        isOverlay: true,
+        containerStyle: {
+          ...(model.answerChoiceTransparency ? {
+            opacity: '0.8'
+          } : {}),
+          ...(!containsImage ? {
+            padding: '0 10px',
+            margin: '4px 6px !important'
+          } : {})
+        }
+      });
+    });
+    (0, _defineProperty2.default)(this, "filterPossibleAnswers", (possibleResponses, answer) => possibleResponses.filter(response => response.value !== answer.value));
+    (0, _defineProperty2.default)(this, "handleOnAnswerSelect", (answer, responseContainerIndex) => {
+      const {
+        model: {
+          duplicateResponses
+        },
+        updateAnswer
+      } = this.props;
+      const {
+        answers,
+        maxResponsePerZone
+      } = this.state;
+      let {
+        possibleResponses
+      } = this.state;
+      let answersToStore;
+      const answersInThisContainer = [];
+      const answersInOtherContainers = [];
+      answers.forEach(a => {
+        if (a.containerIndex === responseContainerIndex) {
+          answersInThisContainer.push(a);
+        } else {
+          answersInOtherContainers.push(a);
+        }
+      });
+      if (maxResponsePerZone === answersInThisContainer.length) {
+        const shiftedItem = answersInThisContainer[0];
+        if (maxResponsePerZone === 1) {
+          answersInThisContainer.shift(); // FIFO
+        } else {
+          this.setState({
+            maxResponsePerZoneWarning: true
+          });
+          return;
+        }
+
+        // if duplicates are not allowed, make sure to put the shifted value back in possible responses
+        if (!duplicateResponses) {
+          possibleResponses = Array.isArray(possibleResponses) ? possibleResponses : [];
+          possibleResponses.push({
+            ...shiftedItem,
+            containerIndex: undefined,
+            id: shiftedItem.id || generateId()
+          });
+        }
+
+        // answers will be:
+        // + shifted answers for the current container
+        // + if duplicatesAllowed, all the other answers from other containers
+        //   else: all the answers from other containers that are not having the same value
+        // + new answer
+        answersToStore = [...answersInThisContainer,
+        // shifted
+        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?
+        // if yes, this should do it: add a.id !== answer.id instead of 'true'
+        ...answersInOtherContainers.filter(a => duplicateResponses ? true : a.value !== answer.value),
+        // un-shifted
+        {
+          ...answer,
+          containerIndex: responseContainerIndex,
+          ...(duplicateResponses ? {
+            id: generateId()
+          } : {})
+        }];
+      } else {
+        // answers will be:
+        // + if duplicatesAllowed, all the other answers, except the one that was dragged
+        //   else: all the answers that are not having the same value
+        // + new answer
+        answersToStore = [
+        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?
+        // if yes, this should do it: add a.id !== answer.id instead of 'true'
+        ...answers.filter(a => duplicateResponses ? a.id !== answer.id : a.value !== answer.value), {
+          ...answer,
+          containerIndex: responseContainerIndex,
+          ...(duplicateResponses ? {
+            id: generateId()
+          } : {})
+        }];
+      }
+      this.setState({
+        maxResponsePerZoneWarning: false,
+        answers: answersToStore,
+        possibleResponses:
+        // for single response per container remove answer from possible responses
+        duplicateResponses ? possibleResponses : this.filterPossibleAnswers(possibleResponses, answer)
+      });
+      updateAnswer(answersToStore);
+    });
+    (0, _defineProperty2.default)(this, "handleOnAnswerRemove", answer => {
+      const {
+        model: {
+          duplicateResponses
+        },
+        updateAnswer
+      } = this.props;
+      const {
+        answers,
+        possibleResponses
+      } = this.state;
+      const answersToStore = answers.filter(a => a.id !== answer.id);
+      const shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses
+
+      this.setState({
+        maxResponsePerZoneWarning: false,
+        answers: answersToStore,
+        // push back into possible responses the removed answer if responses cannot be duplicated
+        possibleResponses: duplicateResponses || shouldNotPushInPossibleResponses ? possibleResponses : [...possibleResponses, {
+          ...answer,
+          containerIndex: undefined
+        }]
+      });
+      updateAnswer(answersToStore);
+    });
+    (0, _defineProperty2.default)(this, "toggleCorrect", showCorrect => this.setState({
+      showCorrect
+    }));
+    const {
+      model: {
+        possibleResponses: _possibleResponses,
+        responseContainers,
+        duplicateResponses: _duplicateResponses,
+        maxResponsePerZone: _maxResponsePerZone
+      },
+      session
+    } = props;
+    let {
+      answers: _answers
+    } = session || {};
+    // set id for each possible response
+    const possibleResponsesWithIds = (_possibleResponses || []).map((item, index) => ({
+      value: item,
+      id: `${index}`
+    }));
+    let groupedAnswers = (0, _lodashEs.groupBy)(_answers || [], 'containerIndex');
+    // keep only last maxResponsePerZone answers for each zone
+    let limitedAnswers = (0, _lodashEs.flatMap)(groupedAnswers, grp => grp.slice(-(_maxResponsePerZone || 1)));
+    _answers = limitedAnswers
+    // 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);
+    const possibleResponsesFiltered = possibleResponsesWithIds.filter(response => !_answers.find(answer => answer.value === response.value));
+    this.state = {
+      answers: _answers || [],
+      draggingElement: {
+        id: '',
+        value: ''
+      },
+      possibleResponses: _duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,
+      // set id for each response containers
+      responseContainers: (responseContainers || []).map((item, index) => ({
+        index,
+        ...item,
+        id: `${index}`
+      })),
+      maxResponsePerZone: _maxResponsePerZone || 1,
+      showCorrect: false,
+      isValidDrop: false
+    };
+  }
+  render() {
+    const {
+      model: {
+        disabled,
+        duplicateResponses,
+        extraCSSRules,
+        image,
+        responseAreaFill,
+        stimulus,
+        responseCorrect,
+        validation,
+        teacherInstructions,
+        prompt,
+        autoplayAudioEnabled,
+        showDashedBorder,
+        mode,
+        rationale,
+        language,
+        uiStyle = {},
+        answerChoiceTransparency,
+        responseContainerPadding,
+        imageDropTargetPadding,
+        fontSizeFactor,
+        customAudioButton
+      }
+    } = this.props;
+    const {
+      answers,
+      draggingElement,
+      possibleResponses,
+      responseContainers,
+      maxResponsePerZone,
+      maxResponsePerZoneWarning,
+      showCorrect,
+      isValidDrop
+    } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    const showToggle = isEvaluateMode && !responseCorrect;
+    const {
+      possibilityListPosition = 'bottom'
+    } = uiStyle || {};
+    const isVertical = possibilityListPosition === 'left' || possibilityListPosition === 'right';
+    const {
+      validResponse
+    } = validation || {};
+    const correctAnswers = [];
+    const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+    const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+    if (validResponse) {
+      (validResponse.value || []).forEach((container, i) => {
+        (container.images || []).forEach(v => {
+          correctAnswers.push({
+            value: v,
+            containerIndex: i,
+            isCorrect: true
+          });
+        });
+      });
+    }
+    const warningMessage = translator.t('imageClozeAssociation.reachedLimit_other', {
+      lng: language,
+      count: maxResponsePerZone
+    });
+    let answersToShow = responseCorrect !== undefined ? (0, _utilsCorrectness.getAnswersCorrectness)(answers, validation, duplicateResponses) : answers;
+    if (responseCorrect === false && maxResponsePerZone === 1) {
+      answersToShow = [...answersToShow, ...(0, _utilsCorrectness.getUnansweredAnswers)(answersToShow, validation)];
+    }
+    const sharedImageProps = {
+      draggingElement,
+      duplicateResponses,
+      image,
+      onAnswerSelect: this.handleOnAnswerSelect,
+      onDragAnswerBegin: this.onDragStart,
+      onDragAnswerEnd: this.onDragEnd,
+      responseContainers,
+      showDashedBorder,
+      responseAreaFill,
+      responseContainerPadding,
+      imageDropTargetPadding,
+      maxResponsePerZone
+    };
+    const renderImage = () => /*#__PURE__*/_react.default.createElement(_imageContainer.default, (0, _extends2.default)({}, sharedImageProps, {
+      canDrag: showCorrect && showToggle ? false : !disabled,
+      answers: showCorrect && showToggle ? correctAnswers : answersToShow,
+      answerChoiceTransparency: !(showCorrect && showToggle) ? answerChoiceTransparency : undefined
+    }));
+    const renderPossibleResponses = () => {
+      if (showCorrect && showToggle) return null;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, maxResponsePerZoneWarning && /*#__PURE__*/_react.default.createElement(WarningInfo, {
+        message: warningMessage
+      }), /*#__PURE__*/_react.default.createElement(_possibleResponses2.default, {
+        canDrag: !disabled,
+        data: possibleResponses,
+        onAnswerRemove: this.handleOnAnswerRemove,
+        onDragBegin: this.onDragStart,
+        answerChoiceTransparency: answerChoiceTransparency,
+        customStyle: {
+          minWidth: isVertical ? '130px' : image?.width || 'fit-content'
+        },
+        isVertical: isVertical,
+        minHeight: isVertical ? image?.height : undefined
+      }));
+    };
+    return /*#__PURE__*/_react.default.createElement(_drag.DragProvider, {
+      onDragStart: this.onDragStart,
+      onDragEnd: this.onDragEnd
+    }, /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      id: 'main-container',
+      fontSizeFactor: fontSizeFactor
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledTeacherInstructions, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: teacherInstructions
+    })), /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: prompt,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton
+    }), /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: stimulus
+    }), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showToggle,
+      toggled: showCorrect,
+      onToggle: this.toggleCorrect,
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(_interactiveSection.default, {
+      responseCorrect: showCorrect && showToggle ? true : responseCorrect,
+      uiStyle: uiStyle
+    }, renderImage(), renderPossibleResponses()), showRationale && /*#__PURE__*/_react.default.createElement(StyledRationale, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: rationale
+    }))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
+      dropAnimation: isValidDrop ? null : undefined
+    }, this.renderDragOverlay()));
+  }
+}
+exports.ImageClozeAssociationComponent = ImageClozeAssociationComponent;
+const WarningContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  margin: `0 ${theme.spacing(2)}`,
+  backgroundColor: '#dddddd',
+  padding: theme.spacing(1),
+  display: 'flex',
+  alignItems: 'center',
+  '& svg': {
+    height: '30px'
+  },
+  '& h1': {
+    padding: '0px',
+    margin: '0px'
+  }
+}));
+const WarningMessage = (0, _styles.styled)('span')(({
+  theme
+}) => ({
+  paddingLeft: theme.spacing(0.5),
+  userSelect: 'none'
+}));
+const WarningInfo = ({
+  message
+}) => {
+  const nodeRef = _react.default.useRef(null);
+  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    classNames: 'fb',
+    key: "fb",
+    timeout: 300,
+    nodeRef: nodeRef
+  }, /*#__PURE__*/_react.default.createElement(WarningContainer, {
+    ref: nodeRef,
+    key: "panel"
+  }, /*#__PURE__*/_react.default.createElement(_NotInterested.default, {
+    color: 'secondary',
+    fontSize: 'small'
+  }), /*#__PURE__*/_react.default.createElement(WarningMessage, {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }))));
+};
+WarningInfo.propTypes = {
+  message: _propTypes.default.string
+};
+ImageClozeAssociationComponent.propTypes = {
+  model: _propTypes.default.object.isRequired,
+  session: _propTypes.default.object,
+  updateAnswer: _propTypes.default.func.isRequired
+};
+var _default = exports.default = ImageClozeAssociationComponent;
+//# sourceMappingURL=root.js.map

package/lib/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["_react","_interopRequireDefault","require","_propTypes","_core","_drag","_reactTransitionGroup","_renderUi","_styles","_NotInterested","_correctAnswerToggle","_translator","_lodashEs","_imageContainer","_interactiveSection","_possibleResponses2","_utilsCorrectness","_possibleResponse","translator","Translator","generateId","Math","random","toString","substring","Date","getTime","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","maxWidth","height","StyledTeacherInstructions","Collapsible","theme","marginBottom","spacing","StyledRationale","marginTop","ImageClozeAssociationComponent","React","Component","constructor","props","_defineProperty2","default","event","active","data","current","setState","draggingElement","isValidDrop","over","model","duplicateResponses","draggedItem","responseArea","containerIndex","undefined","shouldDisableAnimation","id","value","handleOnAnswerRemove","handleOnAnswerSelect","state","imgRegex","containsImage","test","createElement","key","canDrag","onDragBegin","isOverlay","containerStyle","answerChoiceTransparency","opacity","padding","margin","possibleResponses","answer","filter","response","responseContainerIndex","updateAnswer","answers","maxResponsePerZone","answersToStore","answersInThisContainer","answersInOtherContainers","forEach","a","push","length","shiftedItem","shift","maxResponsePerZoneWarning","Array","isArray","filterPossibleAnswers","shouldNotPushInPossibleResponses","showCorrect","responseContainers","session","possibleResponsesWithIds","map","item","index","groupedAnswers","groupBy","limitedAnswers","flatMap","grp","slice","possibleResponsesFiltered","find","render","disabled","extraCSSRules","image","responseAreaFill","stimulus","responseCorrect","validation","teacherInstructions","prompt","autoplayAudioEnabled","showDashedBorder","mode","rationale","language","uiStyle","responseContainerPadding","imageDropTargetPadding","fontSizeFactor","customAudioButton","isEvaluateMode","showToggle","possibilityListPosition","isVertical","validResponse","correctAnswers","showRationale","hasText","hasMedia","showTeacherInstructions","container","i","images","v","isCorrect","warningMessage","t","lng","count","answersToShow","getAnswersCorrectness","getUnansweredAnswers","sharedImageProps","onAnswerSelect","onDragAnswerBegin","onDragStart","onDragAnswerEnd","onDragEnd","renderImage","_extends2","renderPossibleResponses","Fragment","WarningInfo","message","onAnswerRemove","customStyle","minWidth","width","minHeight","DragProvider","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","toggleCorrect","DragOverlay","dropAnimation","renderDragOverlay","exports","WarningContainer","display","alignItems","WarningMessage","paddingLeft","userSelect","nodeRef","useRef","TransitionGroup","CSSTransition","classNames","timeout","ref","fontSize","dangerouslySetInnerHTML","__html","propTypes","PropTypes","string","object","isRequired","func","_default"],"sources":["../src/root.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragOverlay } from '@dnd-kit/core';\nimport { DragProvider } from '@pie-lib/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { color, Collapsible, PreviewPrompt, UiLayout, hasText, hasMedia } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\nimport NotInterestedIcon from '@mui/icons-material/NotInterested';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport Translator from '@pie-lib/translator';\nimport { flatMap, groupBy } from 'lodash-es';\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 PossibleResponse from './possible-response';\n\nconst generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nconst StyledUiLayout = styled(UiLayout)({\n  color: color.text(),\n  backgroundColor: color.background(),\n  position: 'relative',\n  '& img': {\n    maxWidth: '100%',\n    height: 'auto',\n  },\n});\n\nconst StyledTeacherInstructions = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst StyledRationale = styled(Collapsible)(({ theme }) => ({\n  marginTop: theme.spacing(2),\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      isValidDrop: false,\n    };\n  }\n\n  onDragStart = (event) => {\n    const { active } = event;\n\n    if (active?.data?.current) {\n      this.setState({\n        draggingElement: active.data.current,\n        isValidDrop: false,\n      });\n    }\n  };\n\n  onDragEnd = (event) => {\n    const { active, over } = event;\n    const { model } = this.props;\n    const { duplicateResponses } = model || {};\n\n    // Check if drop is valid\n    const draggedItem = active?.data?.current;\n    const responseArea = over?.data?.current;\n    const isValidDrop =\n      over &&\n      active &&\n      draggedItem &&\n      responseArea &&\n      responseArea.containerIndex !== undefined;\n\n    const shouldDisableAnimation = isValidDrop && duplicateResponses;\n\n    this.setState({\n      draggingElement: { id: '', value: '' },\n      isValidDrop: shouldDisableAnimation,\n    });\n\n    if (!over || !active) {\n      return;\n    }\n\n    if (!draggedItem) {\n      return;\n    }\n\n    if (over.id === 'ica-board') {\n      this.handleOnAnswerRemove(draggedItem);\n      return;\n    }\n\n    if (responseArea) {\n      this.handleOnAnswerSelect(draggedItem, responseArea.containerIndex);\n    }\n  };\n\n  renderDragOverlay = () => {\n    const { draggingElement } = this.state;\n    const { model } = this.props;\n\n    if (!draggingElement.id) return null;\n\n    // check if the response contains an image\n    const imgRegex = /<img[^>]+src=\"([^\">]+)\"/;\n    const containsImage = imgRegex.test(draggingElement.value);\n\n    return (\n      <PossibleResponse\n        key={draggingElement.id}\n        canDrag={false}\n        data={draggingElement}\n        onDragBegin={() => {}}\n        isOverlay\n        containerStyle={{\n          ...(model.answerChoiceTransparency ? { opacity: '0.8' } : {}),\n          ...(!containsImage ? { padding: '0 10px', margin: '4px 6px !important' } : {}),\n        }}\n      />\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      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      isValidDrop,\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 =\n      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.onDragStart,\n      onDragAnswerEnd: this.onDragEnd,\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={!(showCorrect && showToggle) ? answerChoiceTransparency : undefined}\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.onDragStart}\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      <DragProvider onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>\n        <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>\n          {showTeacherInstructions && (\n            <StyledTeacherInstructions\n              labels={{\n                hidden: 'Show Teacher Instructions',\n                visible: 'Hide Teacher Instructions',\n              }}\n            >\n              <PreviewPrompt prompt={teacherInstructions} />\n            </StyledTeacherInstructions>\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 responseCorrect={showCorrect && showToggle ? true : responseCorrect} uiStyle={uiStyle}>\n            {renderImage()}\n            {renderPossibleResponses()}\n          </InteractiveSection>\n\n          {showRationale && (\n            <StyledRationale\n              labels={{\n                hidden: 'Show Rationale',\n                visible: 'Hide Rationale',\n              }}\n            >\n              <PreviewPrompt prompt={rationale} />\n            </StyledRationale>\n          )}\n        </StyledUiLayout>\n        {/* Disable drop animation for valid drops to prevent visual snap-back */}\n        {/* Keep default animation for invalid drops to show visual feedback */}\n        <DragOverlay dropAnimation={isValidDrop ? null : undefined}>\n          {this.renderDragOverlay()}\n        </DragOverlay>\n      </DragProvider>\n    );\n  }\n}\n\nconst WarningContainer = styled('div')(({ theme }) => ({\n  margin: `0 ${theme.spacing(2)}`,\n  backgroundColor: '#dddddd',\n  padding: theme.spacing(1),\n  display: 'flex',\n  alignItems: 'center',\n  '& svg': {\n    height: '30px',\n  },\n  '& h1': {\n    padding: '0px',\n    margin: '0px',\n  },\n}));\n\nconst WarningMessage = styled('span')(({ theme }) => ({\n  paddingLeft: theme.spacing(0.5),\n  userSelect: 'none',\n}));\n\nconst WarningInfo = ({ message }) => {\n  const nodeRef = React.useRef(null);\n\n  return (\n    <TransitionGroup>\n      <CSSTransition classNames={'fb'} key=\"fb\" timeout={300} nodeRef={nodeRef}>\n        <WarningContainer ref={nodeRef} key=\"panel\">\n          <NotInterestedIcon color={'secondary'} fontSize={'small'} />\n          <WarningMessage dangerouslySetInnerHTML={{ __html: message }} />\n        </WarningContainer>\n      </CSSTransition>\n    </TransitionGroup>\n  );\n};\n\nWarningInfo.propTypes = {\n  message: PropTypes.string,\n};\n\nImageClozeAssociationComponent.propTypes = {\n  model: PropTypes.object.isRequired,\n  session: PropTypes.object,\n  updateAnswer: PropTypes.func.isRequired,\n};\n\nexport default ImageClozeAssociationComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/static-html-span.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+class StaticHTMLSpan extends _react.default.PureComponent {
+  shouldComponentUpdate() {
+    return false;
+  }
+  render() {
+    const {
+      html,
+      className
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: className,
+      dangerouslySetInnerHTML: {
+        __html: html
+      }
+    });
+  }
+}
+StaticHTMLSpan.propTypes = {
+  html: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string
+};
+StaticHTMLSpan.defaultProps = {
+  className: ''
+};
+var _default = exports.default = StaticHTMLSpan;
+//# sourceMappingURL=static-html-span.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"static-html-span.js","names":["_react","_interopRequireDefault","require","_propTypes","StaticHTMLSpan","React","PureComponent","shouldComponentUpdate","render","html","className","props","default","createElement","dangerouslySetInnerHTML","__html","propTypes","PropTypes","string","isRequired","defaultProps","_default","exports"],"sources":["../src/static-html-span.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nclass StaticHTMLSpan extends React.PureComponent {\n  shouldComponentUpdate() {\n    return false;\n  }\n\n  render() {\n    const { html, className } = this.props;\n\n    return (\n      <span\n        className={className}\n        dangerouslySetInnerHTML={{ __html: html }}\n      />\n    );\n  }\n}\n\nStaticHTMLSpan.propTypes = {\n  html: PropTypes.string.isRequired,\n  className: PropTypes.string,\n};\n\nStaticHTMLSpan.defaultProps = {\n  className: '',\n};\n\nexport default StaticHTMLSpan;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,MAAME,cAAc,SAASC,cAAK,CAACC,aAAa,CAAC;EAC/CC,qBAAqBA,CAAA,EAAG;IACtB,OAAO,KAAK;EACd;EAEAC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,IAAI;MAAEC;IAAU,CAAC,GAAG,IAAI,CAACC,KAAK;IAEtC,oBACEX,MAAA,CAAAY,OAAA,CAAAC,aAAA;MACEH,SAAS,EAAEA,SAAU;MACrBI,uBAAuB,EAAE;QAAEC,MAAM,EAAEN;MAAK;IAAE,CAC3C,CAAC;EAEN;AACF;AAEAL,cAAc,CAACY,SAAS,GAAG;EACzBP,IAAI,EAAEQ,kBAAS,CAACC,MAAM,CAACC,UAAU;EACjCT,SAAS,EAAEO,kBAAS,CAACC;AACvB,CAAC;AAEDd,cAAc,CAACgB,YAAY,GAAG;EAC5BV,SAAS,EAAE;AACb,CAAC;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAV,OAAA,GAEaR,cAAc","ignoreList":[]}