@pie-element/hotspot 4.7.18-next.85 → 4.8.1-beta.587

package/src/hotspot/image.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Image } from 'react-konva';
+import { Group, Image, Text, Tag, Label } from 'react-konva';
 
 class ImageComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      image: null
+      image: null,
+      showTooltip: false,
     };
   }
 
@@ -34,22 +35,33 @@ class ImageComponent extends React.Component {
 
   handleLoad = () => {
     this.setState({
-      image: this.image
+      image: this.image,
     });
   };
 
   render() {
-    const { x, y } = this.props;
-    const { image } = this.state;
+    const { x, y, tooltip } = this.props;
+    const { image, showTooltip } = this.state;
 
     return (
-      <Image
-        width={20}
-        height={20}
-        x={x}
-        y={y}
-        image={image}
-      />
+      <Group>
+        <Image
+          width={20}
+          height={20}
+          x={x}
+          y={y}
+          image={image}
+          onMouseEnter={() => this.setState({ showTooltip: true })}
+          onMouseLeave={() => this.setState({ showTooltip: false })}
+        />
+
+        {showTooltip && tooltip && (
+          <Label x={x - 30} y={y + 25}>
+            <Tag fill="white" cornerRadius={5} opacity={0.9} />
+            <Text text={tooltip} padding={5} />
+          </Label>
+        )}
+      </Group>
     );
   }
 }
@@ -57,7 +69,8 @@ class ImageComponent extends React.Component {
 ImageComponent.propTypes = {
   src: PropTypes.string.isRequired,
   x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired
+  y: PropTypes.number.isRequired,
+  tooltip: PropTypes.string,
 };
 
 export default ImageComponent;

package/src/hotspot/index.jsx

@@ -1,18 +1,54 @@
 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 +69,37 @@ class HotspotComponent extends React.Component {
         dimensions,
         rationale,
         teacherInstructions,
-        strokeWidth
+        strokeWidth,
+        responseCorrect,
       },
       onSelectChoice,
-      classes
+      classes,
     } = this.props;
-
+    const { showCorrect } = this.state;
     const isEvaluateMode = mode === 'evaluate';
+    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
 
     return (
       <div>
-        {
-          teacherInstructions && hasText(teacherInstructions) && (
-            <Collapsible
-              labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
-              className={classes.collapsible}
-            >
-              <div dangerouslySetInnerHTML={{ __html: teacherInstructions }}/>
-            </Collapsible>
-          )
-        }
+        {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}
+          >
+            <PreviewPrompt className="prompt" prompt={teacherInstructions} />
+          </Collapsible>
+        )}
 
         <Typography className={classes.prompt}>
-          <span dangerouslySetInnerHTML={{ __html: prompt }} />
+          <PreviewPrompt className="prompt" prompt={prompt} />
         </Typography>
 
         {imageUrl ? (
@@ -71,20 +115,16 @@ class HotspotComponent extends React.Component {
             shapes={shapes}
             disabled={disabled}
             strokeWidth={strokeWidth}
+            scale={this.state.scale}
+            showCorrect={showCorrect}
           />
         ) : null}
 
-        {
-          rationale && hasText(rationale) && (
-            <Collapsible
-              labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}
-              className={classes.collapsible}
-            >
-              <div dangerouslySetInnerHTML={{ __html: rationale }} />
-            </Collapsible>
-          )
-        }
-
+        {rationale && hasText(rationale) && (
+          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>
+            <PreviewPrompt className="prompt" prompt={rationale} />
+          </Collapsible>
+        )}
       </div>
     );
   }
@@ -94,21 +134,21 @@ HotspotComponent.propTypes = {
   classes: PropTypes.object,
   model: PropTypes.object.isRequired,
   onSelectChoice: PropTypes.func.isRequired,
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
 };
 
 HotspotComponent.defaultProps = {
-  classes: {}
+  classes: {},
 };
 
-const styles = theme => ({
+const styles = (theme) => ({
   collapsible: {
     paddingTop: theme.spacing.unit * 2,
     paddingBottom: theme.spacing.unit * 2,
   },
   prompt: {
-    fontSize: 'inherit'
-  }
+    fontSize: 'inherit',
+  },
 });
 
 export default withStyles(styles)(HotspotComponent);

package/src/hotspot/polygon.jsx

@@ -14,10 +14,10 @@ class PolygonComponent extends React.Component {
   getPolygonCenter = (points) => {
     const x = points.map(({ x }) => x);
     const y = points.map(({ y }) => y);
-    const minX = Math.min.apply (null, x);
-    const maxX = Math.max.apply (null, x);
-    const minY = Math.min.apply (null, y);
-    const maxY = Math.max.apply (null, y);
+    const minX = Math.min.apply(null, x);
+    const maxX = Math.max.apply(null, x);
+    const minY = Math.min.apply(null, y);
+    const maxY = Math.max.apply(null, y);
     return [(minX + maxX) / 2, (minY + maxY) / 2];
   };
 
@@ -51,20 +51,11 @@ 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;
-
-  getEvaluateText = (isCorrect, selected) => {
-    if (selected && isCorrect) {
-      return 'Correctly\nselected';
-    } else if (selected && !isCorrect) {
-      return 'Incorrectly\nselected';
-    } else if (!selected && isCorrect) {
-      return 'Correctly\nunselected';
-    }
-    return 'Incorrectly\nunselected';
-  };
+  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>
+    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;
 
   render() {
     const {
@@ -75,37 +66,57 @@ class PolygonComponent extends React.Component {
       outlineColor,
       selected,
       points,
-      strokeWidth
+      evaluateText,
+      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}
@@ -119,13 +130,7 @@ class PolygonComponent extends React.Component {
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
         />
-        {(isEvaluateMode && iconSrc) ? (
-          <Image
-            src={iconSrc}
-            x={iconX}
-            y={iconY}
-          />
-        ): null}
+        {isEvaluateMode && iconSrc ? <Image src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
   }
@@ -135,7 +140,7 @@ const styles = () => ({
   base: {
     cursor: 'pointer',
     opacity: 0.5,
-    position: 'relative'
+    position: 'relative',
   },
 });
 
@@ -150,11 +155,17 @@ PolygonComponent.propTypes = {
   outlineColor: PropTypes.string.isRequired,
   points: PropTypes.array.isRequired,
   selected: PropTypes.bool.isRequired,
-  strokeWidth: PropTypes.number
+  evaluateText: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  markAsCorrect: PropTypes.bool.isRequired,
+  showCorrectEnabled: PropTypes.bool.isRequired,
 };
 
 PolygonComponent.defaultProps = {
-  strokeWidth: 5
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1,
 };
 
 export default withStyles(styles)(PolygonComponent);

package/src/hotspot/rectangle.jsx

@@ -32,20 +32,11 @@ 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;
-
-  getEvaluateText = (isCorrect, selected) => {
-    if (selected && isCorrect) {
-      return 'Correctly\nselected';
-    } else if (selected && !isCorrect) {
-      return 'Incorrectly\nselected';
-    } else if (!selected && isCorrect) {
-      return 'Correctly\nunselected';
-    }
-    return 'Incorrectly\nunselected';
-  };
+  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>
+    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;
 
   render() {
     const {
@@ -59,36 +50,56 @@ class RectComponent extends React.Component {
       width,
       x,
       y,
-      strokeWidth
+      evaluateText,
+      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 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
+    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
+
+    const iconX = x + width / 2 - 10;
+    const iconY = y + height / 2 - 10;
+
+    // "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}
@@ -104,13 +115,7 @@ class RectComponent extends React.Component {
           x={x}
           y={y}
         />
-        {(isEvaluateMode && iconSrc) ? (
-          <Image
-            src={iconSrc}
-            x={iconX}
-            y={iconY}
-          />
-        ): null}
+        {isEvaluateMode && iconSrc ? <Image src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
     );
   }
@@ -120,7 +125,7 @@ const styles = () => ({
   base: {
     cursor: 'pointer',
     opacity: 0.5,
-    position: 'relative'
+    position: 'relative',
   },
 });
 
@@ -138,12 +143,18 @@ RectComponent.propTypes = {
   width: PropTypes.number.isRequired,
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
-  strokeWidth: PropTypes.number
+  evaluateText: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  markAsCorrect: PropTypes.bool.isRequired,
+  showCorrectEnabled: PropTypes.bool.isRequired,
 };
 
 RectComponent.defaultProps = {
   isCorrect: false,
-  strokeWidth: 5
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1,
 };
 
 export default withStyles(styles)(RectComponent);

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 {
-  SessionChangedEvent,
-  ModelSetEvent
-} from '@pie-framework/pie-player-events';
+import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
 
 import HotspotComponent from './hotspot';
 import { updateSessionValue } from './session-updater';
@@ -13,13 +10,7 @@ export default class Hotspot 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();
   }
 
@@ -28,9 +19,7 @@ export default class Hotspot 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) {
@@ -42,12 +31,14 @@ export default class Hotspot extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   onSelectChoice(data) {
     updateSessionValue(this._session, this._model, data);
 
-    this.dispatchEvent(
-      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())
-    );
+    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
 
     this._render();
   }
@@ -61,8 +52,9 @@ export default class Hotspot extends HTMLElement {
       const el = React.createElement(HotspotComponent, {
         model: this._model,
         session: this._session,
-        onSelectChoice: this.onSelectChoice.bind(this)
+        onSelectChoice: this.onSelectChoice.bind(this),
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });

package/src/session-updater.js

@@ -4,7 +4,7 @@ export function updateSessionValue(session, model, data) {
   session.answers = session.answers || [];
 
   if (!selected) {
-    session.answers = session.answers.filter(answer => answer.id !== id);
+    session.answers = session.answers.filter((answer) => answer.id !== id);
   } else {
     const item = { id };
     if (multipleCorrect) {

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}
-/>
-`;