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

package/src/index.js

@@ -0,0 +1,245 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderMath } from '@pie-lib/math-rendering';
+import { EnableAudioAutoplayImage } from '@pie-lib/render-ui';
+import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
+
+import ImageClozeAssociationComponent from './root';
+
+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/interactive-section.jsx

@@ -0,0 +1,94 @@
+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';
+
+const StyledContainer = 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/possible-response.jsx

@@ -0,0 +1,152 @@
+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';
+import StaticHTMLSpan from './static-html-span';
+
+const BaseContainer = 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 = 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;

package/src/possible-responses.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import { ICADroppablePlaceholder } from '@pie-lib/drag';
+
+import PossibleResponse from './possible-response';
+
+const BaseContainer = styled('div')(({ theme }) => ({
+  backgroundColor: color.background(),
+  margin: theme.spacing(2),
+  display: 'flex',
+  alignItems: 'center',
+  width: 'fit-content',
+}));
+
+const PossibleResponses = ({
+  canDrag,
+  data,
+  onDragBegin,
+  answerChoiceTransparency,
+  customStyle,
+  isVertical,
+  minHeight,
+}) => (
+  <BaseContainer style={customStyle}>
+    <ICADroppablePlaceholder id="ica-board" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>
+      {(data || []).map((item) => (
+        <PossibleResponse
+          canDrag={canDrag}
+          key={item.id}
+          data={item}
+          onDragBegin={onDragBegin}
+          answerChoiceTransparency={answerChoiceTransparency}
+          containerStyle={{ margin: '4px' }}
+        />
+      ))}
+    </ICADroppablePlaceholder>
+  </BaseContainer>
+);
+
+PossibleResponses.propTypes = {
+  canDrag: PropTypes.bool.isRequired,
+  data: PropTypes.array.isRequired,
+  onDragBegin: PropTypes.func.isRequired,
+  answerChoiceTransparency: PropTypes.bool,
+  customStyle: PropTypes.object,
+  isVertical: PropTypes.bool,
+  minHeight: PropTypes.number,
+};
+
+export default PossibleResponses;