@pie-element/image-cloze-association 3.5.0 → 3.5.1-beta.587

package/src/__tests__/{possible-response-test.jsx → possible-response.test.jsx}

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
-import PossibleResponse from '../possible-response';
+import { PossibleResponse } from '../possible-response';
 
 describe('Possible Response', () => {
   let wrapper;
@@ -13,9 +13,11 @@ describe('Possible Response', () => {
       {
         canDrag: false,
         containerStyle: {},
-        data: {}
+        data: {},
+        onDragBegin: jest.fn(),
+        onDragEnd: jest.fn(),
       },
-      opts
+      opts,
     );
 
     return shallow(<PossibleResponse {...opts} />);

package/src/__tests__/{root-test.jsx → root.test.jsx}

@@ -19,7 +19,8 @@ const model = {
   responseContainers: [],
   possibleResponses: [],
   duplicateResponses: false,
-  maxResponsePerZone: 5
+  maxResponsePerZone: 5,
+  showDashedBorder: true,
 };
 
 describe('Root', () => {
@@ -29,9 +30,9 @@ describe('Root', () => {
     opts = _.extend(
       {
         model,
-        updateAnswer: () => {}
+        updateAnswer: () => {},
       },
-      opts
+      opts,
     );
 
     return shallow(<Root {...opts} />);

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

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

package/src/evaluation-icon.jsx

@@ -17,47 +17,38 @@ const EvaluationIcon = ({ classes, containerStyle, isCorrect, filled }) => {
   const showCorrectness = isCorrect !== undefined;
   const correctness = showCorrectness ? getCorrectnessClass(isCorrect, filled) : '';
 
-  return showCorrectness
-    ? (
-      <Icon
-        className={`${classes.icon} ${classes[correctness]}`}
-        style={containerStyle}
-      />
-    ) : null
+  return showCorrectness ? <Icon className={`${classes.icon} ${classes[correctness]}`} style={containerStyle} /> : null;
 };
 
 EvaluationIcon.propTypes = {
   classes: PropTypes.object,
   containerStyle: PropTypes.object,
   filled: PropTypes.bool,
-  isCorrect: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number
-  ])
+  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 };
 
 EvaluationIcon.defaultProps = {
   classes: {},
   containerStyle: {},
   filled: false,
-  isCorrect: undefined
+  isCorrect: undefined,
 };
 
 const styles = () => ({
   correctEmpty: {
-    color: color.correct()
+    color: color.correct(),
   },
   correctFilled: {
     color: color.background(),
-    backgroundColor: color.correct()
+    backgroundColor: color.correct(),
   },
   incorrectEmpty: {
-    color: color.incorrect()
+    color: color.incorrect(),
   },
   incorrectFilled: {
     color: color.background(),
-    backgroundColor: color.incorrect()
-  }
+    backgroundColor: color.incorrect(),
+  },
 });
 
 export default withStyles(styles)(EvaluationIcon);

package/src/image-container.jsx

@@ -12,30 +12,23 @@ class ImageContainer extends Component {
       classes,
       draggingElement,
       duplicateResponses,
-      image: {
-        height,
-        src,
-        width
-      },
+      image: { height, src, width },
       onAnswerSelect,
       onDragAnswerBegin,
       onDragAnswerEnd,
-      responseContainers
+      responseContainers,
+      showDashedBorder,
     } = this.props;
 
     return (
       <div className={classes.base}>
-        <img
-          src={src}
-          height={height}
-          width={width}
-        />
+        <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);
+          const answersParsed = answers.filter((a) => a.containerIndex === r.index);
 
           return (
             <ImageDropTarget
@@ -45,7 +38,7 @@ class ImageContainer extends Component {
                 height: rHeight,
                 width: rWidth,
                 left: rLeft,
-                top: rTop
+                top: rTop,
               }}
               duplicateResponses={duplicateResponses}
               key={r.id + i}
@@ -53,11 +46,12 @@ class ImageContainer extends Component {
               onDrop={(item) => onAnswerSelect(item, r.index)}
               onDragAnswerBegin={onDragAnswerBegin}
               onDragAnswerEnd={onDragAnswerEnd}
+              showDashedBorder={showDashedBorder}
             />
           );
         })}
       </div>
-    )
+    );
   }
 }
 
@@ -71,18 +65,19 @@ ImageContainer.propTypes = {
   onAnswerSelect: PropTypes.func.isRequired,
   onDragAnswerBegin: PropTypes.func.isRequired,
   onDragAnswerEnd: PropTypes.func.isRequired,
-  responseContainers: PropTypes.array.isRequired
+  responseContainers: PropTypes.array.isRequired,
+  showDashedBorder: PropTypes.bool,
 };
 
 ImageContainer.defaultProps = {
   classes: {},
-  duplicateResponses: false
+  duplicateResponses: false,
 };
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
     margin: theme.spacing.unit * 2,
-    position: 'relative'
-  }
+    position: 'relative',
+  },
 });
 export default withStyles(styles)(ImageContainer);

package/src/image-drop-target.jsx

@@ -16,41 +16,44 @@ const ImageDropTarget = ({
   duplicateResponses,
   onDragAnswerBegin,
   onDragAnswerEnd,
+  showDashedBorder,
   // dnd-related props
   connectDropTarget,
-  isOverCurrent
-}) => connectDropTarget(
-  <div
-    className={`
+  isOverCurrent,
+}) =>
+  connectDropTarget(
+    <div
+      className={`
         ${classes.responseContainer}
+        ${showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : ''}
         ${draggingElement.id ? classes.responseContainerActive : ''}
       `}
-    style={containerStyle}
-  >
-    {/* HOVER */}
-    {isOverCurrent && !duplicateResponses ? (
-      <div className={classes.dragOverContainer}>
-        <span dangerouslySetInnerHTML={{ __html: draggingElement.value }} />
-      </div>
-    ) : null}
+      style={containerStyle}
+    >
+      {/* HOVER */}
+      {isOverCurrent && !duplicateResponses ? (
+        <div className={classes.dragOverContainer}>
+          <span dangerouslySetInnerHTML={{ __html: draggingElement.value }} />
+        </div>
+      ) : null}
 
-    {/* EXISTING ANSWERS */}
-    {(!isOverCurrent && answers.length) || (duplicateResponses && answers.length) ? (
-      <div className={classes.answers}>
-        {answers.map(answer => (
-          <PossibleResponse
-            canDrag={canDrag}
-            containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}
-            key={answer.id}
-            data={answer}
-            onDragBegin={() => onDragAnswerBegin(answer)}
-            onDragEnd={onDragAnswerEnd}
-          />
-        ))}
-      </div>
-    ) : null}
-  </div>
-);
+      {/* EXISTING ANSWERS */}
+      {(!isOverCurrent && answers.length) || (duplicateResponses && answers.length) ? (
+        <div className={classes.answers}>
+          {answers.map((answer) => (
+            <PossibleResponse
+              canDrag={canDrag}
+              containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}
+              key={answer.id}
+              data={answer}
+              onDragBegin={() => onDragAnswerBegin(answer)}
+              onDragEnd={onDragAnswerEnd}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>,
+  );
 
 ImageDropTarget.propTypes = {
   answer: PropTypes.object,
@@ -60,31 +63,35 @@ ImageDropTarget.propTypes = {
   draggingElement: PropTypes.object.isRequired,
   onDragAnswerBegin: PropTypes.func.isRequired,
   onDragAnswerEnd: PropTypes.func.isRequired,
-  onDrop: PropTypes.func.isRequired
+  onDrop: PropTypes.func.isRequired,
+  showDashedBorder: PropTypes.bool,
 };
 
 ImageDropTarget.defaultProps = {
   answer: {},
-  classes: {}
+  classes: {},
 };
 
 const styles = () => ({
   answers: {
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   dragOverContainer: {
     backgroundColor: color.background(),
     pointerEvents: 'none',
-    width: 'fit-content'
+    width: 'fit-content',
   },
   responseContainer: {
-    position: 'absolute'
+    position: 'absolute',
   },
   responseContainerActive: {
     border: `2px solid ${color.text()}`,
-    backgroundColor: 'rgba(230, 242, 252, .8)'
-  }
+    backgroundColor: 'rgba(230, 242, 252, .8)',
+  },
+  responseContainerDashed: {
+    border: `2px dashed ${color.text()}`,
+  },
 });
 
 const Styled = withStyles(styles)(ImageDropTarget);
@@ -96,10 +103,10 @@ const tileSource = {
   drop(props, monitor) {
     const item = monitor.getItem();
     props.onDrop(item);
-  }
+  },
 };
 
 export default DropTarget(c.types.response, tileSource, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
-  isOverCurrent: monitor.isOver({ shallow: true })
+  isOverCurrent: monitor.isOver({ shallow: true }),
 }))(Styled);

package/src/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { renderMath } from '@pie-lib/math-rendering';
-import {
-  ModelSetEvent,
-  SessionChangedEvent
-} from '@pie-framework/pie-player-events';
+import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
 
 import ImageClozeAssociationComponent from './root';
 
@@ -12,13 +9,7 @@ export default class ImageClozeAssociation extends HTMLElement {
   set model(m) {
     this._model = m;
 
-    this.dispatchEvent(
-      new ModelSetEvent(
-        this.tagName.toLowerCase(),
-        this.isComplete(),
-        !!this._model
-      )
-    );
+    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
     this._render();
   }
 
@@ -27,9 +18,7 @@ export default class ImageClozeAssociation extends HTMLElement {
       return false;
     }
 
-    return (
-      Array.isArray(this._session.answers) && this._session.answers.length > 0
-    );
+    return Array.isArray(this._session.answers) && this._session.answers.length > 0;
   }
 
   set session(s) {
@@ -41,12 +30,14 @@ export default class ImageClozeAssociation extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   updateAnswer(data) {
     this._session.answers = data;
 
-    this.dispatchEvent(
-      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())
-    );
+    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
 
     this._render();
   }
@@ -60,8 +51,9 @@ export default class ImageClozeAssociation extends HTMLElement {
       const el = React.createElement(ImageClozeAssociationComponent, {
         model: this._model,
         session: this._session,
-        updateAnswer: this.updateAnswer.bind(this)
+        updateAnswer: this.updateAnswer.bind(this),
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });

package/src/interactive-section.jsx

@@ -12,11 +12,14 @@ class InteractiveSection extends React.Component {
 
     switch (responseCorrect) {
       case undefined:
-        styleProp = 'interactiveDefault'; break;
+        styleProp = 'interactiveDefault';
+        break;
       case true:
-        styleProp = 'interactiveCorrect'; break;
+        styleProp = 'interactiveCorrect';
+        break;
       default:
-        styleProp = 'interactiveIncorrect'; break;
+        styleProp = 'interactiveIncorrect';
+        break;
     }
     return classes[styleProp];
   }
@@ -27,16 +30,12 @@ class InteractiveSection extends React.Component {
     const evaluationStyle = {
       display: 'flex',
       margin: '0 auto',
-      marginTop: -14
+      marginTop: -14,
     };
 
     return (
       <div className={classname}>
-        <EvaluationIcon
-          containerStyle={evaluationStyle}
-          filled
-          isCorrect={responseCorrect}
-        />
+        <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />
         {children}
       </div>
     );
@@ -45,31 +44,25 @@ class InteractiveSection extends React.Component {
 
 InteractiveSection.propTypes = {
   classes: PropTypes.object,
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.array
-  ]).isRequired,
-  responseCorrect: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number
-  ])
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,
+  responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 };
 
 InteractiveSection.defaultProps = {
   classes: {},
-  responseCorrect: undefined
+  responseCorrect: undefined,
 };
 
 const styles = () => ({
   interactiveDefault: {
-    border: `1px solid ${color.disabled()}`
+    border: `1px solid ${color.disabled()}`,
   },
   interactiveCorrect: {
-    border: `2px solid ${color.correct()}`
+    border: `2px solid ${color.correct()}`,
   },
   interactiveIncorrect: {
-    border: `2px solid ${color.incorrect()}`
-  }
+    border: `2px solid ${color.incorrect()}`,
+  },
 });
 
 export default withStyles(styles)(InteractiveSection);