@pie-element/hotspot 4.8.4-next.133 → 4.8.4-next.1335

package/src/__tests__/rectangle.test.jsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import _ from 'lodash';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Konva from 'konva';
+import { Rect } from 'react-konva';
+
+import { shallowChild } from '@pie-lib/test-utils';
+
+import Rectangle from '../hotspot/rectangle';
+import Image from '../hotspot/image';
+import { faCorrect, faWrong } from '../hotspot/icons';
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
+Konva.isBrowser = false;
+
+describe('Rectangle', () => {
+  let onClick, wrapper;
+
+  const mkWrapper = (opts = {}) => {
+    opts = _.extend(
+      {
+        classes: {
+          base: 'base'
+        },
+        height: 200,
+        hotspotColor: 'rgba(137, 183, 244, 0.65)',
+        id: '1',
+        isCorrect: false,
+        isEvaluateMode: false,
+        evaluateText: null,
+        disabled: false,
+        outlineColor: 'blue',
+        selected: false,
+        width: 300,
+        x: 5,
+        y: 5
+      },
+      opts
+    );
+
+    return shallow(<Rectangle {...opts} onClick={onClick} />);
+  };
+
+  beforeEach(() => {
+    onClick = jest.fn();
+    wrapper = mkWrapper();
+  });
+
+  describe('snapshots', () => {
+    describe('outline color', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ outlineColor: 'red' });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+
+    describe('outline width', () => {
+      it('renders with default border width', () => {
+        const wrapper = mkWrapper();
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+
+      it('renders with given border width', () => {
+        const wrapper = mkWrapper({ strokeWidth: 10 });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+
+    describe('hotspot color', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ hotspotColor: 'rgba(217, 30, 24, 0.65)' });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+
+    describe('evaluate with correct answer', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ isEvaluateMode: true, isCorrect: true, evaluateText: 'Correctly\nselected' });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('in evaluate mode', () => {
+    const defaultModel = {
+      onClick,
+      id: '1',
+      height: 200,
+      hotspotColor: 'rgba(137, 183, 244, 0.65)',
+      disabled: true,
+      width: 300,
+      x: 5,
+      y: 5,
+      selected: false,
+      isCorrect: false,
+      isEvaluateMode: true,
+      evaluateText: null,
+      strokeWidth: 5,
+      outlineColor: 'blue',
+      markAsCorrect: false,
+      showCorrectEnabled: false
+    };
+
+    const getComponents = (model) => {
+      const testWrapper = shallowChild(Rectangle, {
+        ...defaultModel,
+        ...model
+      }, 1);
+      const rectangleComponent = testWrapper();
+      const rectComponent = rectangleComponent.find(Rect);
+      return {
+        rectangleComponent,
+        rectComponent
+      };
+    }
+
+    describe('when correctly selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: true,
+        isCorrect: true
+      });
+
+      it('should have a blue outline', () => {
+        expect(rectComponent.prop('stroke')).toEqual('blue');
+        expect(rectComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a green checkmark icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faCorrect);
+      });
+    });
+
+    describe('when correctly not selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: false,
+        isCorrect: true
+      });
+
+      it('should have no outline', () => {
+        expect(rectComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should have no icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(0);
+      });
+    });
+
+    describe('when incorrectly selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: true,
+        isCorrect: false
+      });
+
+      it('should have a red outline', () => {
+        expect(rectComponent.prop('stroke')).toEqual('red');
+        expect(rectComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a red x icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faWrong);
+      });
+    });
+
+    describe('when incorrectly not selected', () => {
+      const { rectangleComponent, rectComponent } = getComponents({
+        selected: false,
+        isCorrect: false
+      });
+
+      it('should have no outline', () => {
+        expect(rectComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should have a red x icon', () => {
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(1);
+        expect(imgComponent.prop('src')).toEqual(faWrong);
+      });
+    });
+
+    describe('when showing correct answer (showCorrectEnabled = true)', () => {
+      it('should have a green outline', () => {
+        const { rectComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: true
+        });
+        expect(rectComponent.prop('stroke')).toEqual('green');
+        expect(rectComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
+      });
+
+      it('should have a green checkmark icon', () => {
+        const { rectangleComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: true
+        });
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.prop('src')).toEqual(faCorrect);
+      });
+
+      it('should not be selected if the answer is incorrect', () => {
+        const { rectComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: false,
+          selected: true,
+          isCorrect: false
+        });
+        expect(rectComponent.prop('strokeWidth')).toEqual(0);
+      });
+
+      it('should not render an icon if the answer is incorrect', () => {
+        const { rectangleComponent } = getComponents({
+          showCorrectEnabled: true,
+          markAsCorrect: false,
+          selected: true,
+          isCorrect: false
+        });
+        const imgComponent = rectangleComponent.find(Image);
+        expect(imgComponent.length).toEqual(0);
+      });
+    });
+  });
+});

package/src/hotspot/container.jsx

@@ -34,7 +34,7 @@ export class Container extends React.Component {
   render() {
     const {
       classes,
-      dimensions: { width, height },
+      dimensions: { width: withProp, height: heightProp },
       disabled,
       hotspotColor,
       imageUrl,
@@ -42,9 +42,14 @@ export class Container extends React.Component {
       outlineColor,
       onSelectChoice,
       shapes: { rectangles, polygons },
-      strokeWidth
+      scale: SCALE,
+      strokeWidth,
+      showCorrect
     } = this.props;
 
+    const width = withProp * SCALE;
+    const height = heightProp * SCALE;
+
     return (
       <div
         className={classes.base}
@@ -53,6 +58,7 @@ export class Container extends React.Component {
         {imageUrl ? (
           <div className={classes.imageContainer}>
             <img
+              alt="hotspot-image"
               className={classes.image}
               height="auto"
               src={imageUrl}
@@ -73,9 +79,11 @@ export class Container extends React.Component {
               const selected = this.isSelected(shape);
               const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;
               const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;
+              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
 
               return (
                 <Rectangle
+                  scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={isCorrect}
                   evaluateText={evaluateText}
@@ -91,6 +99,8 @@ export class Container extends React.Component {
                   x={shape.x}
                   y={shape.y}
                   strokeWidth={strokeWidth}
+                  markAsCorrect={markAsCorrect}
+                  showCorrectEnabled={showCorrect}
                 />
               )
             })}
@@ -98,9 +108,11 @@ export class Container extends React.Component {
               const selected = this.isSelected(polygon);
               const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;
               const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;
+              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);
 
               return (
                 <Polygon
+                  scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={!!isCorrect}
                   evaluateText={evaluateText}
@@ -113,6 +125,8 @@ export class Container extends React.Component {
                   outlineColor={outlineColor}
                   points={polygon.points}
                   strokeWidth={strokeWidth}
+                  markAsCorrect={markAsCorrect}
+                  showCorrectEnabled={showCorrect}
                 />
               )
             })}
@@ -165,7 +179,13 @@ Container.propTypes = {
   outlineColor:PropTypes.string.isRequired,
   session:PropTypes.object.isRequired,
   shapes:PropTypes.object.isRequired,
-  strokeWidth: PropTypes.number
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  showCorrect: PropTypes.bool
+};
+
+Container.defaultProps = {
+  scale: 1
 };
 
 export default withStyles(styles)(Container);

package/src/hotspot/index.jsx

@@ -1,18 +1,57 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import { Collapsible, hasText } from '@pie-lib/render-ui';
-import Container from './container';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
+import {Collapsible, hasText, PreviewPrompt} from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
+import Container from './container';
+
 class HotspotComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showCorrect: false
+      showCorrect: false,
+      observer: null,
+      scale: 1
     };
   }
 
+  componentDidMount() {
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText
+        const zoom = target?.substring(
+          target.indexOf('--pie-zoom') + 11,
+          target.lastIndexOf('%')
+        );
+
+        const zoomParsed = zoom?.replace(/\s/g, '');
+        if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100,
+            })
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1,
+          });
+        }
+      });
+    });
+
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })
+    }
+  }
+
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+
   onToggle = () => {
     const { showCorrect } = this.state;
     this.setState({ showCorrect: !showCorrect });
@@ -33,29 +72,45 @@ class HotspotComponent extends React.Component {
         dimensions,
         rationale,
         teacherInstructions,
-        strokeWidth
+        strokeWidth,
+        responseCorrect
       },
       onSelectChoice,
       classes
     } = this.props;
-
+    const { showCorrect } = this.state;
     const isEvaluateMode = mode === 'evaluate';
+    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
 
     return (
       <div>
+        {showCorrectAnswerToggle && (
+          <CorrectAnswerToggle
+            show={showCorrectAnswerToggle}
+            toggled={showCorrect}
+            onToggle={this.onToggle.bind(this)}
+          />
+        )}
+        {showCorrectAnswerToggle && <br />}
         {
           teacherInstructions && hasText(teacherInstructions) && (
             <Collapsible
               labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
               className={classes.collapsible}
             >
-              <div dangerouslySetInnerHTML={{ __html: teacherInstructions }}/>
+              <PreviewPrompt
+                className="prompt"
+                prompt={teacherInstructions}
+              />
             </Collapsible>
           )
         }
 
         <Typography className={classes.prompt}>
-          <span dangerouslySetInnerHTML={{ __html: prompt }} />
+          <PreviewPrompt
+            className="prompt"
+            prompt={prompt}
+          />
         </Typography>
 
         {imageUrl ? (
@@ -71,6 +126,8 @@ class HotspotComponent extends React.Component {
             shapes={shapes}
             disabled={disabled}
             strokeWidth={strokeWidth}
+            scale={this.state.scale}
+            showCorrect={showCorrect}
           />
         ) : null}
 
@@ -80,7 +137,10 @@ class HotspotComponent extends React.Component {
               labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}
               className={classes.collapsible}
             >
-              <div dangerouslySetInnerHTML={{ __html: rationale }} />
+              <PreviewPrompt
+                className="prompt"
+                prompt={rationale}
+              />
             </Collapsible>
           )
         }

package/src/hotspot/polygon.jsx

@@ -51,9 +51,9 @@ class PolygonComponent extends React.Component {
     document.body.style.cursor = 'default';
   };
 
-  getEvaluateOutlineColor = (isCorrect, outlineColor) => isCorrect ? outlineColor : 'red';
+  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) => markAsCorrect ? 'green' : (isCorrect ? outlineColor : 'red')
 
-  getOutlineWidth = (selected, strokeWidth) => selected ? strokeWidth : 0;
+  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) => markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;
 
   render() {
     const {
@@ -65,37 +65,56 @@ class PolygonComponent extends React.Component {
       selected,
       points,
       evaluateText,
-      strokeWidth
+      strokeWidth,
+      scale,
+      markAsCorrect,
+      showCorrectEnabled
     } = this.props;
 
     const outlineColorParsed = isEvaluateMode
-      ? this.getEvaluateOutlineColor(isCorrect, outlineColor)
+      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
       : outlineColor;
-    const outlineWidth = this.getOutlineWidth(selected, strokeWidth);
+    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
 
     const pointsParsed = this.parsePointsForKonva(points);
     const center = this.getPolygonCenter(points);
     const iconX = center[0];
     const iconY = center[1];
 
-    // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)
-    // Correctly not selected hotspot: none
-    // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red
-    // Incorrectly not selected hotspot: white “X” in red circle
+    // "Show Correct Answer" Enabled:
+    //   - Correctly Selected: white checkmark in green circle
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected: none
+    //   - Incorrectly Not Selected: white checkmark in green circle
+    // "Show Correct Answer" Disabled:
+    //   - Correctly Selected:
+    //     - white checkmark in green circle
+    //     - heavy outline, as on “Gather”
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected:
+    //     - white "X" in red circle
+    //     - heavy outline around the selection should appear in red
+    //   - Incorrectly Not Selected: white "X" in red circle
     let iconSrc;
 
-    if (selected) {
-      if (isCorrect) {
+    if (showCorrectEnabled) {
+      if ((selected && isCorrect) || (!selected && !isCorrect)) {
         iconSrc = faCorrect;
-      } else {
+      }
+    } else {
+      if (selected) {
+        if (isCorrect) {
+          iconSrc = faCorrect;
+        } else {
+          iconSrc = faWrong;
+        }
+      } else if (!isCorrect) {
         iconSrc = faWrong;
       }
-    } else if (!isCorrect) {
-      iconSrc = faWrong;
     }
 
     return (
-      <Group>
+      <Group scaleX={scale} scaleY={scale}>
         <Line
           points={pointsParsed}
           closed={true}
@@ -142,12 +161,16 @@ PolygonComponent.propTypes = {
   points: PropTypes.array.isRequired,
   selected: PropTypes.bool.isRequired,
   evaluateText: PropTypes.string,
-  strokeWidth: PropTypes.number
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  markAsCorrect: PropTypes.bool.isRequired,
+  showCorrectEnabled: PropTypes.bool.isRequired
 };
 
 PolygonComponent.defaultProps = {
   evaluateText: null,
-  strokeWidth: 5
+  strokeWidth: 5,
+  scale: 1
 };
 
 export default withStyles(styles)(PolygonComponent);

package/src/hotspot/rectangle.jsx

@@ -32,9 +32,9 @@ class RectComponent extends React.Component {
     document.body.style.cursor = 'default';
   };
 
-  getEvaluateOutlineColor = (isCorrect, outlineColor) => isCorrect ? outlineColor : 'red';
+  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) => markAsCorrect ? 'green' : (isCorrect ? outlineColor : 'red')
 
-  getOutlineWidth = (selected, strokeWidth) => selected ? strokeWidth : 0;
+  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) => markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;
 
   render() {
     const {
@@ -49,36 +49,55 @@ class RectComponent extends React.Component {
       x,
       y,
       evaluateText,
-      strokeWidth
+      strokeWidth,
+      scale,
+      markAsCorrect,
+      showCorrectEnabled
     } = this.props;
 
     const outlineColorParsed = isEvaluateMode
-      ? this.getEvaluateOutlineColor(isCorrect, outlineColor)
+      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
       : outlineColor;
 
-    const outlineWidth = this.getOutlineWidth(selected, strokeWidth);
+    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
 
     const iconX = (x + (width / 2)) - 10;
     const iconY = (y + (height / 2)) - 10;
 
-    // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)
-    // Correctly not selected hotspot: none
-    // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red
-    // Incorrectly not selected hotspot: white “X” in red circle
+    // "Show Correct Answer" Enabled:
+    //   - Correctly Selected: white checkmark in green circle
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected: none
+    //   - Incorrectly Not Selected: white checkmark in green circle
+    // "Show Correct Answer" Disabled:
+    //   - Correctly Selected:
+    //     - white checkmark in green circle
+    //     - heavy outline, as on “Gather”
+    //   - Correctly Not Selected: none
+    //   - Incorrectly Selected:
+    //     - white "X" in red circle
+    //     - heavy outline around the selection should appear in red
+    //   - Incorrectly Not Selected: white "X" in red circle
     let iconSrc;
 
-    if (selected) {
-      if (isCorrect) {
+    if (showCorrectEnabled) {
+      if ((selected && isCorrect) || (!selected && !isCorrect)) {
         iconSrc = faCorrect;
-      } else {
+      }
+    } else {
+      if (selected) {
+        if (isCorrect) {
+          iconSrc = faCorrect;
+        } else {
+          iconSrc = faWrong;
+        }
+      } else if (!isCorrect) {
         iconSrc = faWrong;
       }
-    } else if (!isCorrect) {
-      iconSrc = faWrong;
     }
 
     return (
-      <Group>
+      <Group scaleX={scale} scaleY={scale}>
         <Rect
           classes={classes.base}
           width={width}
@@ -130,13 +149,17 @@ RectComponent.propTypes = {
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
   evaluateText: PropTypes.string,
-  strokeWidth: PropTypes.number
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  markAsCorrect: PropTypes.bool.isRequired,
+  showCorrectEnabled: PropTypes.bool.isRequired
 };
 
 RectComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
-  strokeWidth: 5
+  strokeWidth: 5,
+  scale: 1
 };
 
 export default withStyles(styles)(RectComponent);

package/src/index.js

@@ -42,6 +42,10 @@ export default class Hotspot extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   onSelectChoice(data) {
     updateSessionValue(this._session, this._model, data);
 
@@ -63,6 +67,7 @@ export default class Hotspot extends HTMLElement {
         session: this._session,
         onSelectChoice: this.onSelectChoice.bind(this)
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });

package/src/__tests__/__snapshots__/image-test.jsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image snapshots image renders 1`] = `
-<Image
-  height={20}
-  image={null}
-  width={20}
-  x={5}
-  y={5}
-/>
-`;
-
-exports[`Image snapshots x y position renders 1`] = `
-<Image
-  height={20}
-  image={null}
-  width={20}
-  x={10}
-  y={10}
-/>
-`;