@pie-element/hotspot 11.1.1-next.1 → 11.1.1-next.101

package/lib/index.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _renderUi = require("@pie-lib/render-ui");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _hotspot = _interopRequireDefault(require("./hotspot"));
+var _sessionUpdater = require("./session-updater");
+class Hotspot extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+    this._audioInitialized = false;
+    this.audioComplete = false;
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+    this._audioInitialized = false;
+    this._render();
+  }
+  isComplete() {
+    if (!this._session || !this._session.answers) {
+      return false;
+    }
+    const {
+      autoplayAudioEnabled,
+      completeAudioEnabled
+    } = this._model || {};
+    const elementContext = this;
+
+    // check audio completion if audio settings are enabled and audio actually exists
+    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
+      if (elementContext) {
+        const audio = elementContext.querySelector('audio');
+        const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+        // only require audio completion if audio exists and is inside the prompt
+        if (audio && isInsidePrompt) {
+          return false;
+        }
+      }
+    }
+    if (!Array.isArray(this._session.answers)) {
+      return false;
+    }
+    return this._session.answers.length > 0;
+  }
+  set session(s) {
+    if (s && !s.answers) {
+      s.answers = [];
+    }
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  onSelectChoice(data) {
+    (0, _sessionUpdater.updateSessionValue)(this._session, this._model, data);
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+    this._render();
+  }
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+    Object.assign(info.style, {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: 'white',
+      zIndex: '1000',
+      cursor: 'pointer'
+    });
+    const img = document.createElement('img');
+    img.src = _renderUi.EnableAudioAutoplayImage;
+    img.alt = 'Click anywhere to enable audio autoplay';
+    img.width = 500;
+    img.height = 300;
+    info.appendChild(img);
+    return info;
+  }
+  connectedCallback() {
+    this._render();
+
+    // Observation:  audio in Chrome will have the autoplay attribute,
+    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
+    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach(mutation => {
+        if (mutation.type === 'childList') {
+          if (this._audioInitialized) return;
+          const audio = this.querySelector('audio');
+          const isInsidePrompt = audio && audio.closest('#preview-prompt');
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
+          if (audio && !isInsidePrompt) return;
+          if (!audio) return;
+          const info = this._createAudioInfoToast();
+          const container = this.querySelector('#main-container');
+          const enableAudio = () => {
+            if (this.querySelector('#play-audio-info')) {
+              audio.play();
+              container.removeChild(info);
+            }
+            document.removeEventListener('click', enableAudio);
+          };
+
+          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
+          setTimeout(() => {
+            if (audio.paused && !this.querySelector('#play-audio-info')) {
+              // add info message as a toast to enable audio playback
+              container.appendChild(info);
+              document.addEventListener('click', enableAudio);
+            } else {
+              document.removeEventListener('click', enableAudio);
+            }
+          }, 500);
+
+          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+          const handlePlaying = () => {
+            //timestamp when auto-played audio started playing
+            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
+              audioStartTime: new Date().getTime()
+            });
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              container.removeChild(info);
+            }
+            audio.removeEventListener('playing', handlePlaying);
+          };
+          audio.addEventListener('playing', handlePlaying);
+
+          // we need to listen for the ended event to update the isComplete state
+          const handleEnded = () => {
+            //timestamp when auto-played audio completed playing
+            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
+              audioEndTime: new Date().getTime()
+            });
+            let {
+              audioStartTime,
+              audioEndTime,
+              waitTime
+            } = this._session;
+            if (!waitTime && audioStartTime && audioEndTime) {
+              // waitTime is elapsed time the user waited for auto-played audio to finish
+              this._session.waitTime = audioEndTime - audioStartTime;
+            }
+            this.audioComplete = true;
+            this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+            audio.removeEventListener('ended', handleEnded);
+          };
+          audio.addEventListener('ended', handleEnded);
+
+          // store references to remove later
+          this._audio = audio;
+          this._handlePlaying = handlePlaying;
+          this._handleEnded = handleEnded;
+          this._enableAudio = enableAudio;
+          // set to true to prevent multiple initializations
+          this._audioInitialized = true;
+          observer.disconnect();
+        }
+      });
+    });
+    observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+  _render() {
+    if (this._model && this._session) {
+      const el = /*#__PURE__*/_react.default.createElement(_hotspot.default, {
+        model: this._model,
+        session: this._session,
+        onSelectChoice: this.onSelectChoice.bind(this)
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
+    }
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this._enableAudio);
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+    if (this._root) {
+      this._root.unmount();
+      this._root = null;
+    }
+  }
+}
+exports.default = Hotspot;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_hotspot","_sessionUpdater","Hotspot","HTMLElement","constructor","_model","_session","_audioInitialized","audioComplete","_root","model","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","answers","autoplayAudioEnabled","completeAudioEnabled","elementContext","audio","querySelector","isInsidePrompt","closest","Array","isArray","length","session","s","onSelectChoice","data","updateSessionValue","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","updateSessionMetadata","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","el","React","HotspotComponent","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this._audioInitialized = false;\n    this.audioComplete = false;\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._audioInitialized = false;\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};\n    const elementContext = this;\n\n    // check audio completion if audio settings are enabled and audio actually exists\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      if (elementContext) {\n        const audio = elementContext.querySelector('audio');\n        const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n        // only require audio completion if audio exists and is inside the prompt\n        if (audio && isInsidePrompt) {\n          return false;\n        }\n      }\n    }\n\n    if (!Array.isArray(this._session.answers)) {\n      return false;\n    }\n\n    return this._session.answers.length > 0;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width: '100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000',\n      cursor: 'pointer',\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          if (this._audioInitialized) return;\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.removeChild(info);\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            //timestamp when auto-played audio started playing\n            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n\n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              container.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            //timestamp when auto-played audio completed playing\n            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });\n\n            let { audioStartTime, audioEndTime, waitTime } = this._session;\n            if (!waitTime && audioStartTime && audioEndTime) {\n              // waitTime is elapsed time the user waited for auto-played audio to finish\n              this._session.waitTime = audioEndTime - audioStartTime;\n            }\n\n            this.audioComplete = true;\n            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n          // set to true to prevent multiple initializations\n          this._audioInitialized = true;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this),\n      });\n\n      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(el);\n      queueMicrotask(() => {\n        renderMath(this);\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\n\n    if (this._root) {\n      this._root.unmount();\n      this._root = null;\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/session-updater.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateSessionMetadata = updateSessionMetadata;
+exports.updateSessionValue = updateSessionValue;
+function updateSessionValue(session, model, data) {
+  const {
+    id,
+    selected
+  } = data;
+  const {
+    multipleCorrect
+  } = model || {};
+  session.answers = session.answers || [];
+  if (!selected) {
+    session.answers = session.answers.filter(answer => answer.id !== id);
+  } else {
+    const item = {
+      id
+    };
+    if (multipleCorrect) {
+      session.answers.push(item);
+    } else {
+      session.answers = [item];
+    }
+
+    //update session metadata
+    session.selector = data.selector;
+  }
+}
+function updateSessionMetadata(session, metadata) {
+  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
+  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
+
+  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
+    // waitTime is elapsed time the user waited for auto-played audio to finish
+    session.waitTime = session.audioEndTime - session.audioStartTime;
+  }
+}
+//# sourceMappingURL=session-updater.js.map

package/lib/session-updater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-updater.js","names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n\n    //update session metadata\n    session.selector = data.selector;\n  }\n}\n\nexport function updateSessionMetadata(session, metadata) {\n  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing\n  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing\n\n  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {\n    // waitTime is elapsed time the user waited for auto-played audio to finish\n    session.waitTime = session.audioEndTime - session.audioStartTime;\n  }\n}\n"],"mappings":";;;;;;;AAAO,SAASA,kBAAkBA,CAACC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAE;EACvD,MAAM;IAAEC,EAAE;IAAEC;EAAS,CAAC,GAAGF,IAAI;EAC7B,MAAM;IAAEG;EAAgB,CAAC,GAAGJ,KAAK,IAAI,CAAC,CAAC;EACvCD,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,IAAI,EAAE;EAEvC,IAAI,CAACF,QAAQ,EAAE;IACbJ,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,CAACC,MAAM,CAAEC,MAAM,IAAKA,MAAM,CAACL,EAAE,KAAKA,EAAE,CAAC;EACxE,CAAC,MAAM;IACL,MAAMM,IAAI,GAAG;MAAEN;IAAG,CAAC;IACnB,IAAIE,eAAe,EAAE;MACnBL,OAAO,CAACM,OAAO,CAACI,IAAI,CAACD,IAAI,CAAC;IAC5B,CAAC,MAAM;MACLT,OAAO,CAACM,OAAO,GAAG,CAACG,IAAI,CAAC;IAC1B;;IAEA;IACAT,OAAO,CAACW,QAAQ,GAAGT,IAAI,CAACS,QAAQ;EAClC;AACF;AAEO,SAASC,qBAAqBA,CAACZ,OAAO,EAAEa,QAAQ,EAAE;EACvDb,OAAO,CAACc,cAAc,GAAGd,OAAO,CAACc,cAAc,IAAID,QAAQ,CAACC,cAAc,CAAC,CAAC;EAC5Ed,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACe,YAAY,IAAIF,QAAQ,CAACE,YAAY,CAAC,CAAC;;EAEtE,IAAI,CAACf,OAAO,CAACgB,QAAQ,IAAIhB,OAAO,CAACc,cAAc,IAAId,OAAO,CAACe,YAAY,EAAE;IACvE;IACAf,OAAO,CAACgB,QAAQ,GAAGhB,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACc,cAAc;EAClE;AACF","ignoreList":[]}

package/package.json

@@ -1,71 +1,33 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "11.1.1-next.1",
+  "repository": "pie-framework/pie-elements",
+  "version": "11.1.1-next.101+900426416",
   "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/correct-answer-toggle": "4.0.2",
-    "@pie-lib/render-ui": "6.1.0",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/correct-answer-toggle": "4.0.5",
+    "@pie-lib/math-rendering": "5.1.0",
+    "@pie-lib/render-ui": "6.1.3",
     "@pie-lib/test-utils": "2.0.2",
     "konva": "8.3.0",
     "prop-types": "^15.8.1",
-    "react-konva": "^18.2.14",
-    "@pie-lib/config-ui": "13.0.4",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "@pie-lib/editable-html-tip-tap": "2.1.2",
-    "@pie-element/shared-controller-utils": "0.1.1-next.1",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
-    "@pie-element/shared-player-events": "0.1.0",
-    "debug": "^4.1.1",
-    "lodash-es": "^4.17.21"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./delivery": {
-      "types": "./dist/delivery/index.d.ts",
-      "default": "./dist/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./controller": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./controller.js": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-konva": "^18.2.14"
   },
+  "author": "pie framework developers",
+  "license": "ISC",
+  "gitHead": "900426416a89663fa89f672b12b288b8211d8e20",
   "scripts": {
-    "build": "bun x vite build && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "demo": "bun x vite --mode demo",
-    "test": "bun x vitest run"
-  }
+    "postpublish": "../../scripts/postpublish"
+  },
+  "main": "lib/index.js",
+  "module": "src/index.js"
 }

package/src/__tests__/container.test.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Konva from 'konva';
+
+
+import Container from '../hotspot/container';
+import HotspotComponent from '../hotspot/index';
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
+Konva.isBrowser = false;
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Stage: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'stage', ...props }, children),
+    Layer: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'layer', ...props }, children),
+    Rect: (props) => React.createElement('div', { 'data-testid': 'rect', ...props }),
+    Circle: (props) => React.createElement('div', { 'data-testid': 'circle', ...props }),
+    Line: (props) => React.createElement('div', { 'data-testid': 'line', ...props }),
+    Group: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'group', ...props }, children),
+    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
+  };
+});
+
+describe('CorrectAnswerToggle', () => {
+  const model = {
+    mode: 'evaluate',
+    responseCorrect: false,
+  };
+
+  const createComponent = (props) => {
+    return render(
+      <HotspotComponent
+        model={{
+          ...model,
+          ...props,
+        }}
+      />
+    );
+  };
+
+  it('does not render outside of evaluate mode', () => {
+    const { container } = createComponent({ mode: 'gather' });
+    const toggle = container.querySelector('[data-testid="correct-answer-toggle"]');
+    expect(toggle).toBeNull();
+  });
+
+  it('does not render if the response is correct', () => {
+    const { container } = createComponent({ responseCorrect: true });
+    const toggle = container.querySelector('[data-testid="correct-answer-toggle"]');
+    expect(toggle).toBeNull();
+  });
+});

package/src/__tests__/index.test.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
+import HotspotComponent from '../hotspot';
+import Hotspot from '../index';
+
+jest.mock('@pie-lib/math-rendering', () => ({ renderMath: jest.fn() }));
+
+jest.mock('../index', () => {
+  class MockHTMLElement {
+    constructor() {
+      this._root = null;
+      this._model = null;
+      this._session = null;
+      this._audioInitialized = false;
+      this.audioComplete = false;
+      this.dispatchEvent = jest.fn();
+    }
+  }
+
+  return {
+    __esModule: true,
+    default: class Hotspot extends MockHTMLElement {
+      constructor() {
+        super();
+      }
+
+      set model(m) {
+        this._model = m;
+        this.dispatchEvent(new (require('@pie-framework/pie-player-events').ModelSetEvent)(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+      }
+
+      set session(s) {
+        this._session = s;
+      }
+
+      isComplete() {
+        if (!this._session || !this._session.answers) {
+          return false;
+        }
+        if (!Array.isArray(this._session.answers)) {
+          return false;
+        }
+        return this._session.answers.length > 0;
+      }
+
+      onSelectChoice({ id, selected }) {
+        const { SessionChangedEvent } = require('@pie-framework/pie-player-events');
+        const answers = this._session.answers || [];
+
+        if (selected) {
+          if (!answers.find(a => a.id === id)) {
+            this._session.answers = [...answers, { id }];
+          }
+        } else {
+          this._session.answers = answers.filter(a => a.id !== id);
+        }
+
+        const isComplete = this.isComplete();
+        this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete));
+      }
+    },
+  };
+});
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Stage: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'stage', ...props }, children),
+    Layer: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'layer', ...props }, children),
+    Rect: (props) => React.createElement('div', { 'data-testid': 'rect', ...props }),
+    Circle: (props) => React.createElement('div', { 'data-testid': 'circle', ...props }),
+    Line: (props) => React.createElement('div', { 'data-testid': 'line', ...props }),
+    Group: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'group', ...props }, children),
+    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
+  };
+});
+
+describe('hotspot', () => {
+
+  describe('events', () => {
+    describe('model', () => {
+      it('dispatches model set event', () => {
+        const el = new Hotspot();
+        el.tagName = 'hotspot-el';
+        el.model = {};
+        expect(el.dispatchEvent).toBeCalledWith(new ModelSetEvent('hotspot-el', false, true));
+      });
+    });
+
+    describe('onSelectChoice', () => {
+      it('dispatches session changed event - add answer', () => {
+        const el = new Hotspot();
+        el.tagName = 'hotspot-el';
+        el.session = { answers: [] };
+        el.onSelectChoice({ id: '1', selected: true });
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', true));
+      });
+
+      it('dispatches session changed event - remove answer', () => {
+        const el = new Hotspot();
+        el.tagName = 'hotspot-el';
+        el.session = { answers: [{ id: '1' }] };
+        el.onSelectChoice({ id: '1', selected: false });
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', false));
+      });
+
+      it('dispatches session changed event - add/remove answer', () => {
+        const el = new Hotspot();
+        el.tagName = 'hotspot-el';
+        el.session = { answers: [{ id: '1' }] };
+        el.onSelectChoice({ id: '2', selected: true });
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', true));
+
+        el.onSelectChoice({ id: '1', selected: false });
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', true));
+
+        el.onSelectChoice({ id: '2', selected: false });
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('hotspot-el', false));
+      });
+    });
+  });
+});

package/src/__tests__/session-updater.test.jsx

@@ -0,0 +1,69 @@
+import { updateSessionValue } from '../session-updater';
+
+const modelCopy = {
+  shapes: {
+    rectangles: [
+      {
+        id: '1',
+        correct: true,
+      },
+      {
+        id: '2',
+      },
+      {
+        id: '3',
+      },
+    ],
+    polygons: [
+      {
+        id: '4',
+        correct: true,
+      },
+      {
+        id: '5',
+      },
+    ],
+  },
+  configure: {},
+  multipleCorrect: true,
+};
+
+const sessionCopy = {
+  answers: [
+    {
+      id: '1',
+    },
+    {
+      id: '2',
+    },
+  ],
+};
+
+describe('session-updater', () => {
+  beforeEach(() => {});
+
+  describe('updateSessionValue', () => {
+    const assert = (session, model, data, expected) => {
+      return () => {
+        updateSessionValue(session, model, data);
+        expect(session.answers).toEqual(expected);
+      };
+    };
+
+    describe('deselect', () => {
+      it('deselects shape', assert(sessionCopy, modelCopy, { id: '1', selected: false }, [{ id: '2' }]));
+    });
+
+    describe('select hotspot', () => {
+      it(
+        'selects shape in multiple choice mode',
+        assert(sessionCopy, modelCopy, { id: '1', selected: true }, [{ id: '2' }, { id: '1' }]),
+      );
+
+      it(
+        'selects shape in single choice mode',
+        assert(sessionCopy, { ...modelCopy, multipleCorrect: false }, { id: '1', selected: true }, [{ id: '1' }]),
+      );
+    });
+  });
+});