@pie-element/image-cloze-association 4.3.3-next.8 → 4.3.3-next.90

package/src/__tests__/utils.test.js

@@ -5,25 +5,25 @@ const trapeze = 'trapeze';
 const hexagon = 'hexagon';
 
 const answer1 = {
-  containerIndex: 0
,
-  id: 1,
-  value: rhomb
+  containerIndex: 0
,
+  id: 1,
+  value: rhomb,
 };
 const answer2 = {
-  containerIndex: 0
,
-  id: 2,
-  value: rhomb
+  containerIndex: 0
,
+  id: 2,
+  value: rhomb,
 };
 const answer3 = {
-  containerIndex: 0
,
-  id: 3,
-  value: trapeze
+  containerIndex: 0
,
+  id: 3,
+  value: trapeze,
 };
 
 const answer4 = {
-  containerIndex: 1
,
-  id: 4,
-  value: hexagon,
+  containerIndex: 1
,
+  id: 4,
+  value: hexagon,
 };
 
 describe('utils', () => {
@@ -32,178 +32,174 @@ describe('utils', () => {
   beforeEach(() => {
     validResponses = {
       validResponse: {
-        value: [
-          { images: [rhomb] },
-          { images: [rhomb, trapeze] }
-        ]
-      }
+        value: [{ images: [rhomb] }, { images: [rhomb, trapeze] }],
+      },
     };
   });
 
   describe('correctness', () => {
     it('marks correct answers as correct', () => {
       const result = getAnswersCorrectness(
-        [answer1, {
-          ...answer3,
-          containerIndex: 1
-        }],
-        validResponses
+        [
+          answer1,
+          {
+            ...answer3,
+            containerIndex: 1,
+          },
+        ],
+        validResponses,
       );
-      expect(result).toEqual([{
-        ...answer1,
-        isCorrect: true
-      },{
-        ...answer3,
-        isCorrect: true,
-        containerIndex: 1
-      }]);
+      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
-      }]);
+      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
-      }]);
+      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
-      }]);
+      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],
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [rhomb] }, { images: [hexagon] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
+            {
+              ...answer1,
+              isCorrect: true,
+            },
             {
-              ...validResponses,
-              altResponses: [{
-                value: [
-                  { images: [rhomb] },
-                  { images: [hexagon] }
-                ]
-              }]
-            }
-          );
-          expect(result).toEqual([{
-            ...answer1,
-            isCorrect: true
-          },{
-            ...answer4,
-            isCorrect: true
-          }]);
+              ...answer4,
+              isCorrect: true,
+            },
+          ]);
         });
 
         it('marks incorrect answers as incorrect', () => {
-          const result = getAnswersCorrectness(
-            [answer1, answer4],
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [hexagon] }, { images: [rhomb] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
             {
-              ...validResponses,
-              altResponses: [{
-                value: [
-                  { images: [hexagon] },
-                  { images: [rhomb] },
-                ]
-              }]
-            }
-          );
-          expect(result).toEqual([{
-            ...answer1,
-            isCorrect: false
-          },{
-            ...answer4,
-            isCorrect: false
-          }]);
+              ...answer1,
+              isCorrect: false,
+            },
+            {
+              ...answer4,
+              isCorrect: false,
+            },
+          ]);
         });
       });
 
       describe('handles multiple options', () => {
         it('marks correct answers as correct', () => {
-          const result = getAnswersCorrectness(
-            [answer1, answer4],
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [hexagon] }, { images: [rhomb] }],
+              },
+              {
+                value: [{ images: [rhomb] }, { images: [hexagon] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
+            {
+              ...answer1,
+              isCorrect: true,
+            },
             {
-              ...validResponses,
-              altResponses: [{
-                value: [
-                  { images: [hexagon] },
-                  { images: [rhomb] },
-                ]
-              }, {
-                value: [
-                  { images: [rhomb] },
-                  { images: [hexagon] },
-                ]
-              }]
-            }
-          );
-          expect(result).toEqual([{
-            ...answer1,
-            isCorrect: true
-          },{
-            ...answer4,
-            isCorrect: true
-          }]);
+              ...answer4,
+              isCorrect: true,
+            },
+          ]);
         });
 
         it('marks incorrect answers as incorrect', () => {
-          const result = getAnswersCorrectness(
-            [answer1, answer4],
+          const result = getAnswersCorrectness([answer1, answer4], {
+            ...validResponses,
+            altResponses: [
+              {
+                value: [{ images: [hexagon] }, { images: [rhomb] }],
+              },
+              {
+                value: [{ images: [hexagon] }, { images: [hexagon] }],
+              },
+            ],
+          });
+          expect(result).toEqual([
+            {
+              ...answer1,
+              isCorrect: false,
+            },
             {
-              ...validResponses,
-              altResponses: [{
-                value: [
-                  { images: [hexagon] },
-                  { images: [rhomb] },
-                ]
-              }, {
-                value: [
-                  { images: [hexagon] },
-                  { images: [hexagon] },
-                ]
-              }]
-            }
-          );
-          expect(result).toEqual([{
-            ...answer1,
-            isCorrect: false
-          },{
-            ...answer4,
-            isCorrect: true
-          }]);
+              ...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,31 +12,23 @@ class ImageContainer extends Component {
       classes,
       draggingElement,
       duplicateResponses,
-      image: {
-        height,
-        src,
-        width
-      },
+      image: { height, src, width },
       onAnswerSelect,
       onDragAnswerBegin,
       onDragAnswerEnd,
       responseContainers,
-      showDashedBorder
+      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
@@ -46,7 +38,7 @@ class ImageContainer extends Component {
                 height: rHeight,
                 width: rWidth,
                 left: rLeft,
-                top: rTop
+                top: rTop,
               }}
               duplicateResponses={duplicateResponses}
               key={r.id + i}
@@ -59,7 +51,7 @@ class ImageContainer extends Component {
           );
         })}
       </div>
-    )
+    );
   }
 }
 
@@ -74,18 +66,18 @@ ImageContainer.propTypes = {
   onDragAnswerBegin: PropTypes.func.isRequired,
   onDragAnswerEnd: PropTypes.func.isRequired,
   responseContainers: PropTypes.array.isRequired,
-  showDashedBorder: PropTypes.bool
+  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

@@ -19,40 +19,41 @@ const ImageDropTarget = ({
   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,
@@ -63,34 +64,34 @@ ImageDropTarget.propTypes = {
   onDragAnswerBegin: PropTypes.func.isRequired,
   onDragAnswerEnd: PropTypes.func.isRequired,
   onDrop: PropTypes.func.isRequired,
-  showDashedBorder: PropTypes.bool
+  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()}`
-  }
+    border: `2px dashed ${color.text()}`,
+  },
 });
 
 const Styled = withStyles(styles)(ImageDropTarget);
@@ -102,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) {
@@ -48,9 +37,7 @@ export default class ImageClozeAssociation extends HTMLElement {
   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();
   }
@@ -64,7 +51,7 @@ 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, () => {