@pie-element/image-cloze-association 0.1.0

package/src/delivery/possible-responses.tsx

@@ -0,0 +1,62 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/possible-responses.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 { ICADroppablePlaceholder } from '@pie-lib/drag';
+
+import PossibleResponse from './possible-response.js';
+
+const BaseContainer: any = styled('div')(({ theme }) => ({
+  backgroundColor: color.background(),
+  padding: 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;

package/src/delivery/root.tsx

@@ -0,0 +1,530 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/root.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 { DragOverlay } from '@dnd-kit/core';
+import { DragProvider } from '@pie-lib/drag';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { color, Collapsible as CollapsibleImport, PreviewPrompt as PreviewPromptImport, UiLayout as UiLayoutImport, hasText, hasMedia } 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 UiLayout = unwrapReactInteropSymbol(UiLayoutImport, 'UiLayout') || unwrapReactInteropSymbol(renderUi.UiLayout, 'UiLayout');
+const PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt') || unwrapReactInteropSymbol(renderUi.PreviewPrompt, 'PreviewPrompt');
+const Collapsible = unwrapReactInteropSymbol(CollapsibleImport, 'Collapsible') || unwrapReactInteropSymbol(renderUi.Collapsible, 'Collapsible');
+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 { styled } from '@mui/material/styles';
+import NotInterestedIcon from '@mui/icons-material/NotInterested';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
+import Translator from '@pie-lib/translator';
+import { flatMap, groupBy } from 'lodash-es';
+
+const { translator } = Translator;
+import Image from './image-container.js';
+import InteractiveSection from './interactive-section.js';
+import PossibleResponses from './possible-responses.js';
+import { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness.js';
+import PossibleResponse from './possible-response.js';
+
+const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
+
+const StyledUiLayout: any = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: color.background(),
+  position: 'relative',
+  '& img': {
+    maxWidth: '100%',
+    height: 'auto',
+  },
+});
+
+const StyledTeacherInstructions: any = styled(Collapsible)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
+const StyledRationale: any = styled(Collapsible)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+}));
+
+export class ImageClozeAssociationComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    const {
+      model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },
+      session,
+    } = props;
+    let { answers } = session || {};
+    // set id for each possible response
+    const possibleResponsesWithIds = (possibleResponses || []).map((item, index) => ({
+      value: item,
+      id: `${index}`,
+    }));
+
+    let groupedAnswers = groupBy(answers || [], 'containerIndex');
+    // keep only last maxResponsePerZone answers for each zone
+    let limitedAnswers = 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,
+    };
+  }
+
+  onDragStart: any = (event) => {
+    const { active } = event;
+
+    if (active?.data?.current) {
+      this.setState({
+        draggingElement: active.data.current,
+        isValidDrop: false,
+      });
+    }
+  };
+
+  onDragEnd: any = (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);
+    }
+  };
+
+  renderDragOverlay: any = () => {
+    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 (
+      <PossibleResponse
+        key={draggingElement.id}
+        canDrag={false}
+        data={draggingElement}
+        onDragBegin={() => {}}
+        isOverlay
+        containerStyle={{
+          ...(model.answerChoiceTransparency ? { opacity: '0.8' } : {}),
+          ...(!containsImage ? { padding: '0 10px', margin: '4px 6px !important' } : {}),
+        }}
+      />
+    );
+  };
+
+  filterPossibleAnswers = (possibleResponses, answer) =>
+    possibleResponses.filter((response) => response.value !== answer.value);
+
+  handleOnAnswerSelect: any = (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);
+  };
+
+  handleOnAnswerRemove: any = (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);
+  };
+
+  toggleCorrect = (showCorrect) => this.setState({ showCorrect });
+
+  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 && (hasText(rationale) || hasMedia(rationale));
+    const showTeacherInstructions =
+      teacherInstructions && (hasText(teacherInstructions) || 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 ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;
+
+    if (responseCorrect === false && maxResponsePerZone === 1) {
+      answersToShow = [...answersToShow, ...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 = () => (
+      <Image
+        {...sharedImageProps}
+        canDrag={showCorrect && showToggle ? false : !disabled}
+        answers={showCorrect && showToggle ? correctAnswers : answersToShow}
+        answerChoiceTransparency={!(showCorrect && showToggle) ? answerChoiceTransparency : undefined}
+      />
+    );
+
+    const renderPossibleResponses = () => {
+      if (showCorrect && showToggle) return null;
+
+      return (
+        <React.Fragment>
+          {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}
+          <PossibleResponses
+            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}
+          />
+        </React.Fragment>
+      );
+    };
+
+    return (
+      <DragProvider onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
+        <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>
+          {showTeacherInstructions && (
+            <StyledTeacherInstructions
+              labels={{
+                hidden: 'Show Teacher Instructions',
+                visible: 'Hide Teacher Instructions',
+              }}
+            >
+              <PreviewPrompt prompt={teacherInstructions} />
+            </StyledTeacherInstructions>
+          )}
+
+          <PreviewPrompt
+            className="prompt"
+            prompt={prompt}
+            autoplayAudioEnabled={autoplayAudioEnabled}
+            customAudioButton={customAudioButton}
+          />
+
+          <PreviewPrompt prompt={stimulus} />
+
+          <CorrectAnswerToggle
+            show={showToggle}
+            toggled={showCorrect}
+            onToggle={this.toggleCorrect}
+            language={language}
+          />
+
+          <InteractiveSection responseCorrect={showCorrect && showToggle ? true : responseCorrect} uiStyle={uiStyle}>
+            {renderImage()}
+            {renderPossibleResponses()}
+          </InteractiveSection>
+
+          {showRationale && (
+            <StyledRationale
+              labels={{
+                hidden: 'Show Rationale',
+                visible: 'Hide Rationale',
+              }}
+            >
+              <PreviewPrompt prompt={rationale} />
+            </StyledRationale>
+          )}
+        </StyledUiLayout>
+        {/* Disable drop animation for valid drops to prevent visual snap-back */}
+        {/* Keep default animation for invalid drops to show visual feedback */}
+        <DragOverlay dropAnimation={isValidDrop ? null : undefined}>
+          {this.renderDragOverlay()}
+        </DragOverlay>
+      </DragProvider>
+    );
+  }
+}
+
+const WarningContainer: any = 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: any = styled('span')(({ theme }) => ({
+  paddingLeft: theme.spacing(0.5),
+  userSelect: 'none',
+}));
+
+const WarningInfo = ({ message }) => {
+  const nodeRef = React.useRef(null);
+
+  return (
+    <TransitionGroup>
+      <CSSTransition classNames={'fb'} key="fb" timeout={300} nodeRef={nodeRef}>
+        <WarningContainer ref={nodeRef} key="panel">
+          <NotInterestedIcon color={'secondary'} fontSize={'small'} />
+          <WarningMessage dangerouslySetInnerHTML={{ __html: message }} />
+        </WarningContainer>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+};
+
+WarningInfo.propTypes = {
+  message: PropTypes.string,
+};
+
+ImageClozeAssociationComponent.propTypes = {
+  model: PropTypes.object.isRequired,
+  session: PropTypes.object,
+  updateAnswer: PropTypes.func.isRequired,
+};
+
+export default ImageClozeAssociationComponent;

package/src/delivery/static-html-span.tsx

@@ -0,0 +1,40 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/static-html-span.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';
+
+class StaticHTMLSpan extends React.PureComponent {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const { html, className } = this.props;
+
+    return (
+      <span
+        className={className}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+}
+
+StaticHTMLSpan.propTypes = {
+  html: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+StaticHTMLSpan.defaultProps = {
+  className: '',
+};
+
+export default StaticHTMLSpan;