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

package/src/__tests__/utils.test.js

@@ -0,0 +1,207 @@
+import { getAnswersCorrectness } from '../utils-correctness';
+
+const rhomb = 'rhomb';
+const trapeze = 'trapeze';
+const hexagon = 'hexagon';
+
+const answer1 = {
+  containerIndex: 0,
+  id: 1,
+  value: rhomb,
+};
+const answer2 = {
+  containerIndex: 0,
+  id: 2,
+  value: rhomb,
+};
+const answer3 = {
+  containerIndex: 0,
+  id: 3,
+  value: trapeze,
+};
+
+const answer4 = {
+  containerIndex: 1,
+  id: 4,
+  value: hexagon,
+};
+
+describe('utils', () => {
+  let validResponses;
+
+  beforeEach(() => {
+    validResponses = {
+      validResponse: {
+        value: [{ images: [rhomb] }, { images: [rhomb, trapeze] }],
+      },
+    };
+  });
+
+  describe('correctness', () => {
+    it('marks correct answers as correct', () => {
+      const result = getAnswersCorrectness(
+        [
+          answer1,
+          {
+            ...answer3,
+            containerIndex: 1,
+          },
+        ],
+        validResponses,
+      );
+      expect(result).toEqual([
+        {
+          ...answer1,
+          isCorrect: true,
+        },
+        {
+          ...answer3,
+          isCorrect: true,
+          containerIndex: 1,
+        },
+      ]);
+    });
+
+    it('marks incorrect answers as incorrect', () => {
+      const result = getAnswersCorrectness([answer1, answer3], validResponses);
+      expect(result).toEqual([
+        {
+          ...answer1,
+          isCorrect: true,
+        },
+        {
+          ...answer3,
+          isCorrect: false,
+        },
+      ]);
+    });
+
+    it('marks duplicates as incorrect', () => {
+      const result = getAnswersCorrectness([answer1, answer2], validResponses);
+      expect(result).toEqual([
+        {
+          ...answer1,
+          isCorrect: true,
+        },
+        {
+          ...answer2,
+          isCorrect: false,
+        },
+      ]);
+    });
+
+    it('marks duplicates and incorrect as incorrect', () => {
+      const result = getAnswersCorrectness([answer1, answer2, answer3], validResponses);
+      expect(result).toEqual([
+        {
+          ...answer1,
+          isCorrect: true,
+        },
+        {
+          ...answer2,
+          isCorrect: false,
+        },
+        {
+          ...answer3,
+          isCorrect: false,
+        },
+      ]);
+    });
+
+    describe('alternate correct answers', () => {
+      describe('handles one option', () => {
+        it('marks correct answers as correct', () => {
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [rhomb] }, { images: [hexagon] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
+            {
+              ...answer1,
+              isCorrect: true,
+            },
+            {
+              ...answer4,
+              isCorrect: true,
+            },
+          ]);
+        });
+
+        it('marks incorrect answers as incorrect', () => {
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [hexagon] }, { images: [rhomb] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
+            {
+              ...answer1,
+              isCorrect: false,
+            },
+            {
+              ...answer4,
+              isCorrect: false,
+            },
+          ]);
+        });
+      });
+
+      describe('handles multiple options', () => {
+        it('marks correct answers as correct', () => {
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [hexagon] }, { images: [rhomb] }],
+              },
+              {
+                value: [{ images: [rhomb] }, { images: [hexagon] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
+            {
+              ...answer1,
+              isCorrect: true,
+            },
+            {
+              ...answer4,
+              isCorrect: true,
+            },
+          ]);
+        });
+
+        it('marks incorrect answers as incorrect', () => {
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [hexagon] }, { images: [rhomb] }],
+              },
+              {
+                value: [{ images: [hexagon] }, { images: [hexagon] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
+            {
+              ...answer1,
+              isCorrect: false,
+            },
+            {
+              ...answer4,
+              isCorrect: true,
+            },
+          ]);
+        });
+      });
+    });
+  });
+});

package/src/constants.js

@@ -0,0 +1,5 @@
+export default {
+  types: {
+    response: 'react-dnd-response',
+  },
+};

package/src/evaluation-icon.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import { color } from '@pie-lib/render-ui';
+
+const StyledIcon = styled('svg')(() => ({
+  '&.correctEmpty': {
+    color: color.correct(),
+  },
+  '&.correctFilled': {
+    color: color.background(),
+    backgroundColor: color.correct(),
+  },
+  '&.incorrectEmpty': {
+    color: color.incorrect(),
+  },
+  '&.incorrectFilled': {
+    color: color.background(),
+    backgroundColor: color.incorrect(),
+  },
+}));
+
+const getCorrectnessClass = (isCorrect, filled) => {
+  const correctness = isCorrect ? 'correct' : 'incorrect';
+  const fillState = filled ? 'Filled' : 'Empty';
+
+  return `${correctness}${fillState}`;
+};
+
+const EvaluationIcon = ({ containerStyle, isCorrect, filled }) => {
+  const Icon = isCorrect ? Check : Close;
+  const showCorrectness = isCorrect !== undefined;
+  const correctness = showCorrectness ? getCorrectnessClass(isCorrect, filled) : '';
+
+  return showCorrectness ? (
+    <Icon component={StyledIcon} className={correctness} style={containerStyle} />
+  ) : null;
+};
+
+EvaluationIcon.propTypes = {
+  containerStyle: PropTypes.object,
+  filled: PropTypes.bool,
+  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+};
+
+EvaluationIcon.defaultProps = {
+  containerStyle: {},
+  filled: false,
+  isCorrect: undefined,
+};
+
+export default EvaluationIcon;

package/src/image-container.jsx

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+import ImageDropTarget from './image-drop-target';
+
+const BaseContainer = styled('div')(({ theme }) => ({
+  margin: theme.spacing(2),
+  position: 'relative',
+  width: 'fit-content',
+}));
+
+class ImageContainer extends Component {
+  render() {
+    const {
+      answers,
+      canDrag,
+      draggingElement,
+      image: { height, src, width } = {},
+      onAnswerSelect,
+      onDragAnswerBegin,
+      onDragAnswerEnd,
+      responseContainers,
+      showDashedBorder,
+      responseAreaFill,
+      answerChoiceTransparency,
+      responseContainerPadding,
+      imageDropTargetPadding,
+      maxResponsePerZone,
+    } = this.props;
+
+    return (
+      <BaseContainer>
+        <img src={src} height={height} width={width} />
+
+        {(responseContainers || []).map((r, i) => {
+          const rHeight = (r.height.replace('%', '') / 100) * height;
+          const rWidth = (r.width.replace('%', '') / 100) * width;
+          const rLeft = (r.x / 100) * width;
+          const rTop = (r.y / 100) * height;
+          const answersParsed = answers.filter((a) => a.containerIndex === r.index);
+
+          return (
+            <ImageDropTarget
+              answers={answersParsed}
+              canDrag={canDrag}
+              containerStyle={{
+                height: rHeight,
+                width: rWidth,
+                left: rLeft,
+                top: rTop,
+              }}
+              key={r.id + i}
+              draggingElement={draggingElement}
+              index={r.index}
+              onDrop={(item) => onAnswerSelect(item, r.index)}
+              onDragAnswerBegin={onDragAnswerBegin}
+              onDragAnswerEnd={onDragAnswerEnd}
+              showDashedBorder={showDashedBorder}
+              responseAreaFill={responseAreaFill}
+              answerChoiceTransparency={answerChoiceTransparency}
+              responseContainerPadding={responseContainerPadding}
+              imageDropTargetPadding={imageDropTargetPadding}
+              maxResponsePerZone={maxResponsePerZone}
+            />
+          );
+        })}
+      </BaseContainer>
+    );
+  }
+}
+
+ImageContainer.propTypes = {
+  answers: PropTypes.array.isRequired,
+  canDrag: PropTypes.bool.isRequired,
+  draggingElement: PropTypes.shape({}).isRequired,
+  image: PropTypes.object.isRequired,
+  onAnswerSelect: PropTypes.func.isRequired,
+  onDragAnswerBegin: PropTypes.func.isRequired,
+  onDragAnswerEnd: PropTypes.func.isRequired,
+  responseContainers: PropTypes.array.isRequired,
+  showDashedBorder: PropTypes.bool,
+  answerChoiceTransparency: PropTypes.bool,
+  responseAreaFill: PropTypes.string,
+  responseContainerPadding: PropTypes.string,
+  imageDropTargetPadding: PropTypes.string,
+  maxResponsePerZone: PropTypes.number,
+};
+
+export default ImageContainer;

package/src/image-drop-target.jsx

@@ -0,0 +1,140 @@
+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';
+
+const AnswersContainer = styled('div')(() => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const ResponseContainer = 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;