@pie-element/image-cloze-association 0.1.0

package/src/delivery/image-drop-target.tsx

@@ -0,0 +1,150 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/image-drop-target.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDroppable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import cx from 'classnames';
+
+import PossibleResponse from './possible-response.js';
+
+const AnswersContainer: any = styled('div')(() => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const ResponseContainer: any = styled('div')(() => ({
+  position: 'absolute',
+  boxSizing: 'border-box',
+  '&.active': {
+    border: `2px solid ${color.text()}`,
+    backgroundColor: 'rgba(230, 242, 252, .8)',
+  },
+  '&.dashed': {
+    border: `2px dashed ${color.text()}`,
+  },
+  '&.is-over': {
+    border: '1px solid rgb(158, 158, 158)',
+    backgroundColor: 'rgb(224, 224, 224)',
+  },
+}));
+
+const ImageDropTarget = ({
+  answers,
+  canDrag,
+  containerStyle,
+  draggingElement,
+  onDragAnswerBegin,
+  onDragAnswerEnd,
+  showDashedBorder,
+  responseAreaFill,
+  responseContainerPadding = '10px',
+  imageDropTargetPadding,
+  answerChoiceTransparency,
+  maxResponsePerZone,
+  onDrop,
+  index,
+}) => {
+  const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);
+  const dropContainerRef = useRef(null);
+  const dropContainerResponsesHeightRef = useRef(null);
+
+  const { setNodeRef, isOver } = useDroppable({
+    id: `response-container-${index}`,
+    data: {
+      containerIndex: index,
+      onDrop,
+    },
+  });
+
+  useEffect(() => {
+    const container = dropContainerRef.current;
+
+    if (!container) return;
+
+    const handleTouchStart = (e) => {
+      e.preventDefault();
+    };
+
+    container.addEventListener('touchstart', handleTouchStart, { passive: false });
+
+    return () => {
+      container.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, []);
+
+  const isDraggingElement = !!draggingElement.id;
+
+  const containerClasses = cx({
+    'is-over': isOver,
+    dashed: showDashedBorder && !isDraggingElement,
+    active: isDraggingElement,
+  });
+
+  const updatedContainerStyle = {
+    padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,
+    ...containerStyle,
+    ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),
+  };
+
+  return (
+    <ResponseContainer
+      ref={(ref) => {
+        dropContainerRef.current = ref;
+        setNodeRef(ref);
+      }}
+      className={containerClasses}
+      style={updatedContainerStyle}
+    >
+      {answers.length ? (
+        <AnswersContainer
+          ref={(ref) => {
+            dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;
+          }}
+        >
+          {answers.map((answer) => (
+            <PossibleResponse
+              key={answer.id}
+              data={answer}
+              canDrag={canDrag}
+              onDragBegin={() => onDragAnswerBegin(answer)}
+              onDragEnd={onDragAnswerEnd}
+              answerChoiceTransparency={answerChoiceTransparency}
+              containerStyle={{
+                padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',
+              }}
+            />
+          ))}
+        </AnswersContainer>
+      ) : null}
+    </ResponseContainer>
+  );
+};
+
+ImageDropTarget.propTypes = {
+  answer: PropTypes.object,
+  answers: PropTypes.array,
+  canDrag: PropTypes.bool.isRequired,
+  containerStyle: PropTypes.object.isRequired,
+  draggingElement: PropTypes.object.isRequired,
+  onDragAnswerBegin: PropTypes.func.isRequired,
+  onDragAnswerEnd: PropTypes.func.isRequired,
+  onDrop: PropTypes.func.isRequired,
+  showDashedBorder: PropTypes.bool,
+  responseAreaFill: PropTypes.string,
+  answerChoiceTransparency: PropTypes.bool,
+  responseContainerPadding: PropTypes.string,
+  imageDropTargetPadding: PropTypes.string,
+  maxResponsePerZone: PropTypes.number,
+};
+
+export default ImageDropTarget;

package/src/delivery/index.ts

@@ -0,0 +1,283 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import { EnableAudioAutoplayImage as EnableAudioAutoplayImageImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const EnableAudioAutoplayImage = unwrapReactInteropSymbol(EnableAudioAutoplayImageImport, 'EnableAudioAutoplayImage') || unwrapReactInteropSymbol(renderUi.EnableAudioAutoplayImage, 'EnableAudioAutoplayImage');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import { ModelSetEvent, SessionChangedEvent } from '@pie-element/shared-player-events';
+
+import ImageClozeAssociationComponent from './root.js';
+
+export default class ImageClozeAssociation extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+
+  set model(m) {
+    this._model = m;
+
+    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+    this._render();
+  }
+
+  isComplete() {
+    const {
+      autoplayAudioEnabled,
+      completeAudioEnabled,
+      completeResponses,
+      duplicateResponses,
+      hasUnplacedChoices,
+      maxResponsePerZone,
+      responseAreasToBeFilled,
+    } = this._model || {};
+    const elementContext = this;
+
+    // check audio completion if audio settings are enabled and audio actually exists
+    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
+      if (elementContext) {
+        const audio = elementContext.querySelector('audio');
+        const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+        // only require audio completion if audio exists and is inside the prompt
+        if (audio && isInsidePrompt) {
+          return false;
+        }
+      }
+    }
+
+    if (!this._session || !this._session.answers) {
+      return false;
+    }
+
+    const { answers } = this._session;
+
+    if (!Array.isArray(answers)) {
+      return false;
+    }
+
+    // filter answers by containerIndex and count the ones with content
+    const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;
+    // check if an answer choice was added to at least as many response areas
+    // as the number of populated response areas in the correct answer
+    const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;
+
+    if (maxResponsePerZone > 1) {
+      if (duplicateResponses) {
+        // an answer choice can be used multiple times
+        return areResponseAreasFilled;
+      }
+
+      // any correct answer have any unplaced answer choices (by the author)
+      if (hasUnplacedChoices) {
+        return areResponseAreasFilled;
+      }
+
+      const allAnswersValue = answers.map((answer) => answer.value);
+
+      // check if any correct answer have any unplaced answer choices (by the student)
+      const requiredAnswersPlaced = completeResponses.some((response) =>
+        response.every((val) => allAnswersValue.includes(val)),
+      );
+
+      // true - all choices (required for a correct response) were placed into a response area
+      return requiredAnswersPlaced;
+    }
+
+    return areResponseAreasFilled;
+  }
+
+  set session(s) {
+    if (s && !s.answers) {
+      s.answers = [];
+    }
+
+    this._session = s;
+    this._render();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  updateAnswer(data) {
+    this._session.answers = data;
+    this._session.selector = 'Mouse';
+
+    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+
+    this._render();
+  }
+
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+
+    Object.assign(info.style, {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: 'white',
+      zIndex: '1000',
+      cursor: 'pointer',
+    });
+
+    const img = document.createElement('img');
+    img.src = EnableAudioAutoplayImage;
+    img.alt = 'Click anywhere to enable audio autoplay';
+    img.width = 500;
+    img.height = 300;
+
+    info.appendChild(img);
+    return info;
+  }
+
+  connectedCallback() {
+    this._render();
+
+    // Observation:  audio in Chrome will have the autoplay attribute,
+    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
+    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          const audio = this.querySelector('audio');
+          const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
+          if (audio && !isInsidePrompt) return;
+          if (!audio) return;
+
+          const info = this._createAudioInfoToast();
+          const container = this.querySelector('#main-container');
+          const enableAudio = () => {
+            if (this.querySelector('#play-audio-info')) {
+              audio.play();
+              container.removeChild(info);
+            }
+
+            document.removeEventListener('click', enableAudio);
+          };
+
+          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
+          setTimeout(() => {
+            if (audio.paused && !this.querySelector('#play-audio-info')) {
+              // add info message as a toast to enable audio playback
+              container.appendChild(info);
+              document.addEventListener('click', enableAudio);
+            } else {
+              document.removeEventListener('click', enableAudio);
+            }
+          }, 500);
+
+          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+          const handlePlaying = () => {
+            const info = this.querySelector('#play-audio-info');
+
+            if (info) {
+              container.removeChild(info);
+            }
+
+            audio.removeEventListener('playing', handlePlaying);
+          };
+
+          audio.addEventListener('playing', handlePlaying);
+
+          // we need to listen for the ended event to update the isComplete state
+          const handleEnded = () => {
+            this.audioComplete = true;
+            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+
+            audio.removeEventListener('ended', handleEnded);
+          };
+
+          audio.addEventListener('ended', handleEnded);
+
+          // store references to remove later
+          this._audio = audio;
+          this._handlePlaying = handlePlaying;
+          this._handleEnded = handleEnded;
+          this._enableAudio = enableAudio;
+
+          observer.disconnect();
+        }
+      });
+    });
+
+    observer.observe(this, { childList: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._enableAudio);
+
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+
+  _render() {
+    if (this._model && this._session) {
+      const el = React.createElement(ImageClozeAssociationComponent, {
+        model: this._model,
+        session: this._session,
+        updateAnswer: this.updateAnswer.bind(this),
+      });
+
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        renderMath(this);
+      });
+    }
+  }
+}

package/src/delivery/interactive-section.tsx

@@ -0,0 +1,104 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/interactive-section.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+
+import EvaluationIcon from './evaluation-icon.js';
+
+const StyledContainer: any = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  display: 'flex',
+  width: 'fit-content',
+  '&.default': {
+    border: `1px solid ${color.disabled()}`,
+  },
+  '&.correct': {
+    border: `2px solid ${color.correct()}`,
+  },
+  '&.incorrect': {
+    border: `2px solid ${color.incorrect()}`,
+  },
+}));
+
+class InteractiveSection extends React.Component {
+  getClassname() {
+    const { responseCorrect } = this.props;
+    let styleProp;
+
+    switch (responseCorrect) {
+      case undefined:
+        styleProp = 'default';
+        break;
+      case true:
+        styleProp = 'correct';
+        break;
+      default:
+        styleProp = 'incorrect';
+        break;
+    }
+    return styleProp;
+  }
+
+  getPositionDirection(choicePosition) {
+    let flexDirection;
+
+    switch (choicePosition) {
+      case 'left':
+        flexDirection = 'row-reverse';
+        break;
+      case 'right':
+        flexDirection = 'row';
+        break;
+      case 'top':
+        flexDirection = 'column-reverse';
+        break;
+      default:
+        // bottom
+        flexDirection = 'column';
+        break;
+    }
+
+    return flexDirection;
+  }
+
+  render() {
+    const { children, responseCorrect, uiStyle } = this.props;
+    const classname = this.getClassname();
+    const { possibilityListPosition = 'bottom' } = uiStyle || {};
+    const style = { flexDirection: this.getPositionDirection(possibilityListPosition) };
+    const evaluationStyle = {
+      display: 'flex',
+      margin: '0 auto',
+      marginTop: -14,
+    };
+
+    return (
+      <StyledContainer className={classname} style={style}>
+        <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />
+        {children}
+      </StyledContainer>
+    );
+  }
+}
+
+InteractiveSection.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,
+  responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  uiStyle: PropTypes.object,
+};
+
+InteractiveSection.defaultProps = {
+  responseCorrect: undefined,
+};
+
+export default InteractiveSection;

package/src/delivery/possible-response.tsx

@@ -0,0 +1,162 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/possible-response.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
+import { useDraggable } from '@dnd-kit/core';
+import { color } from '@pie-lib/render-ui';
+
+import EvaluationIcon from './evaluation-icon.js';
+import StaticHTMLSpan from './static-html-span.js';
+
+const BaseContainer: any = styled('div')(() => ({
+  position: 'relative',
+  backgroundColor: color.white(),
+  border: `1px solid ${color.borderDark()}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '28px',
+  width: 'fit-content',
+  '& span img': {
+    // Added for touch devices, for image content.
+    // This will prevent the context menu from appearing and not allowing other interactions with the image.
+    // If interactions with the image in the token will be requested we should handle only the context Menu.
+    pointerEvents: 'none',
+  },
+  '&.textAnswerChoiceStyle': {
+    padding: '0 10px',
+    margin: '4px 6px !important',
+  },
+  '&.answerChoiceTransparency': {
+    border: 'none',
+    backgroundColor: `${color.transparent()}`,
+    '&:hover': {
+      border: `1px solid ${color.borderDark()}`,
+    },
+  },
+  '&.baseCorrect': {
+    border: `2px solid ${color.correct()} !important`,
+  },
+  '&.baseIncorrect': {
+    border: `2px solid ${color.incorrect()} !important`,
+  },
+}));
+
+const StyledSpan: any = styled(StaticHTMLSpan)(() => ({
+  cursor: 'grab',
+  backgroundColor: color.background(),
+  '&.hiddenSpan': {
+    visibility: 'hidden',
+  },
+}));
+
+const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }) => {
+  const rootRef = useRef(null);
+  const longPressTimer = useRef(null);
+
+  const { setNodeRef, attributes, listeners, isDragging } = useDraggable({
+    id: `possible-response-${data.id}`,
+    data: {
+      id: data.id,
+      value: data.value,
+      containerIndex: data.containerIndex,
+    },
+    disabled: !canDrag,
+  });
+
+  const handleTouchEnd = () => {
+    clearTimeout(longPressTimer.current);
+  };
+
+  const handleTouchMove = () => {
+    clearTimeout(longPressTimer.current);
+  };
+
+  const handleTouchStart = (e) => {
+    e.preventDefault();
+    longPressTimer.current = setTimeout(() => {
+      if (canDrag && rootRef.current) {
+        onDragBegin(data);
+      }
+    }, 500); // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices
+  };
+
+  useEffect(() => {
+    const node = rootRef.current;
+
+    if (!node) return;
+
+    node.addEventListener('touchstart', handleTouchStart, { passive: false });
+    node.addEventListener('touchend', handleTouchEnd);
+    node.addEventListener('touchmove', handleTouchMove, { passive: false });
+
+    return () => {
+      node.removeEventListener('touchstart', handleTouchStart);
+      node.removeEventListener('touchend', handleTouchEnd);
+      node.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [canDrag, data]);
+
+  const { isCorrect } = data || {};
+  const evaluationStyle = {
+    fontSize: 14,
+    position: 'absolute',
+    bottom: '3px',
+    right: '3px',
+  };
+  const correctnessClass = isCorrect === true ? 'baseCorrect' : isCorrect === false ? 'baseIncorrect' : undefined;
+
+  const imgRegex = /<img[^>]+src="([^">]+)"/;
+  const containsImage = imgRegex.test(data.value);
+
+  const containerClassNames = classNames({
+    answerChoiceTransparency: answerChoiceTransparency && !isDragging,
+    [correctnessClass]: !!correctnessClass,
+    textAnswerChoiceStyle: !containsImage && !isOverlay,
+  });
+
+  const promptClassNames = classNames({ hiddenSpan: data.hidden });
+
+  return (
+    <BaseContainer
+      className={containerClassNames}
+      style={containerStyle}
+      ref={(ref) => {
+        rootRef.current = ref;
+        setNodeRef(ref);
+      }}
+      {...listeners}
+      {...attributes}
+    >
+      <StyledSpan html={data.value} className={promptClassNames} />
+      <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />
+    </BaseContainer>
+  );
+};
+
+PossibleResponse.propTypes = {
+  canDrag: PropTypes.bool.isRequired,
+  containerStyle: PropTypes.object,
+  data: PropTypes.object.isRequired,
+  onDragBegin: PropTypes.func.isRequired,
+  answerChoiceTransparency: PropTypes.bool,
+  isOverlay: PropTypes.bool,
+};
+
+PossibleResponse.defaultProps = {
+  containerStyle: {},
+  answerChoiceTransparency: false,
+  isOverlay: false,
+};
+
+export default PossibleResponse;