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

package/src/root.jsx

@@ -0,0 +1,490 @@
+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, PreviewPrompt, UiLayout, hasText, hasMedia } from '@pie-lib/render-ui';
+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';
+import InteractiveSection from './interactive-section';
+import PossibleResponses from './possible-responses';
+import { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';
+import PossibleResponse from './possible-response';
+
+const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
+
+const StyledUiLayout = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: color.background(),
+  position: 'relative',
+  '& img': {
+    maxWidth: '100%',
+    height: 'auto',
+  },
+});
+
+const StyledTeacherInstructions = styled(Collapsible)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
+const StyledRationale = 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 = (event) => {
+    const { active } = event;
+
+    if (active?.data?.current) {
+      this.setState({
+        draggingElement: active.data.current,
+        isValidDrop: false,
+      });
+    }
+  };
+
+  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);
+    }
+  };
+
+  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 (
+      <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 = (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 = (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 = 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 = 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/static-html-span.jsx

@@ -0,0 +1,30 @@
+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;

package/src/utils-correctness.js

@@ -0,0 +1,95 @@
+// functions also used in controller/src/utils.js
+// camelize keys is needed to convert the keys from snake_case to camelCase
+// this is also done in the controller
+import { camelizeKeys } from 'humps';
+
+const getAllCorrectAnswers = (answers, responses) =>
+  (answers || []).map((answer) => ({
+    ...answer,
+    isCorrect: ((responses[answer.containerIndex] && responses[answer.containerIndex].images) || []).includes(
+      answer.value,
+    ),
+  }));
+
+const getValidAnswer = (answer, response) =>
+  (response[answer.containerIndex].images || []).filter((res) => res === answer.value);
+
+const getUniqueCorrectAnswers = (answers, validResponses) => {
+  let finalAnswers = answers;
+
+  answers.forEach((answer1) => {
+    const valuesToParse = answers.filter(
+      (answer2) => answer2.value === answer1.value && answer2.containerIndex === answer1.containerIndex,
+    );
+
+    if (valuesToParse.length > 1) {
+      // point only to duplicates but first
+      valuesToParse.shift();
+      // mark duplicates as incorrect
+      valuesToParse.forEach((value, index) => {
+        finalAnswers = (finalAnswers || []).map((finalAnswer) => {
+          if (finalAnswer.id === value.id) {
+            let valid = getValidAnswer(finalAnswer, validResponses);
+
+            return {
+              ...finalAnswer,
+              isCorrect: valid.length > index + 1,
+            };
+          }
+          return finalAnswer;
+        });
+      });
+    }
+  });
+  return finalAnswers;
+};
+
+export const getUnansweredAnswers = (answers, validation) => {
+  const camelizedValidation = camelizeKeys(validation);
+  const { validResponse: { value } = {} } = camelizedValidation;
+
+  return (value || []).reduce((unanswered, response, index) => {
+    const isAnswered = !!answers.find((answer) => answer.containerIndex === index);
+    response.images = response.images || [];
+
+    if (!isAnswered) {
+      return [
+        ...unanswered,
+        {
+          id: `unanswered-${index}`,
+          value: response.images[0] || '',
+          containerIndex: index,
+          isCorrect: !response.images.length ? undefined : false,
+          hidden: true,
+        },
+      ];
+    }
+
+    return unanswered;
+  }, []);
+};
+
+export const getAnswersCorrectness = (answers, validation) => {
+  const camelizedValidation = camelizeKeys(validation);
+  const {
+    validResponse: { value },
+    altResponses,
+  } = camelizedValidation;
+
+  const allCorrect = getAllCorrectAnswers(answers, value);
+  const uniqueAnswers = getUniqueCorrectAnswers(allCorrect, value);
+  const noOfCorrect = uniqueAnswers.filter((answer) => answer.isCorrect).length;
+
+  // Look for alternate correct responses if there are incorrect responses.
+  if (noOfCorrect < uniqueAnswers.length && altResponses && altResponses.length) {
+    const altUniqueStack = (altResponses || []).map((altResponse) => {
+      const altValue = altResponse.value;
+
+      const altAllCorrect = getAllCorrectAnswers(answers, altValue);
+      return getUniqueCorrectAnswers(altAllCorrect, altValue);
+    });
+    // Return the one with most correct answers.
+    return altUniqueStack.sort((a, b) => b.filter((c) => c.isCorrect).length - a.filter((c) => c.isCorrect).length)[0];
+  }
+  return uniqueAnswers;
+};

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';

package/dist/author/defaults.d.ts

@@ -1,88 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/configure/src/defaults.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.
- */
-declare const _default: {
-    model: {
-        rationale: string;
-        rationaleEnabled: boolean;
-        studentInstructionsEnabled: boolean;
-        teacherInstructions: string;
-        teacherInstructionsEnabled: boolean;
-    };
-    configuration: {
-        baseInputConfiguration: {
-            h3: {
-                disabled: boolean;
-            };
-            audio: {
-                disabled: boolean;
-            };
-            video: {
-                disabled: boolean;
-            };
-            image: {
-                disabled: boolean;
-            };
-            textAlign: {
-                disabled: boolean;
-            };
-            showParagraphs: {
-                disabled: boolean;
-            };
-            separateParagraphs: {
-                disabled: boolean;
-            };
-        };
-        maxImageWidth: {
-            teacherInstructions: number;
-        };
-        maxImageHeight: {
-            teacherInstructions: number;
-        };
-        settingsPanelDisabled: boolean;
-        spellCheck: {
-            label: string;
-            settings: boolean;
-            enabled: boolean;
-        };
-        teacherInstructions: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        withRubric: {
-            settings: boolean;
-            label: string;
-        };
-        mathMlOptions: {
-            mmlOutput: boolean;
-            mmlEditing: boolean;
-        };
-        language: {
-            settings: boolean;
-            label: string;
-            enabled: boolean;
-        };
-        languageChoices: {
-            label: string;
-            options: never[];
-        };
-    };
-};
-export default _default;