@pie-element/image-cloze-association 10.1.2-next.2 → 10.1.2

package/lib/utils-correctness.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUnansweredAnswers = exports.getAnswersCorrectness = void 0;
+var _humps = require("humps");
+// functions also used in controller/src/utils.js
+// camelize keys is needed to convert the keys from snake_case to camelCase
+// this is also done in the controller
+
+const getAllCorrectAnswers = (answers, responses) => (answers || []).map(answer => ({
+  ...answer,
+  isCorrect: (responses[answer.containerIndex] && responses[answer.containerIndex].images || []).includes(answer.value)
+}));
+const getValidAnswer = (answer, response) => (response[answer.containerIndex].images || []).filter(res => res === answer.value);
+const getUniqueCorrectAnswers = (answers, validResponses) => {
+  let finalAnswers = answers;
+  answers.forEach(answer1 => {
+    const valuesToParse = answers.filter(answer2 => answer2.value === answer1.value && answer2.containerIndex === answer1.containerIndex);
+    if (valuesToParse.length > 1) {
+      // point only to duplicates but first
+      valuesToParse.shift();
+      // mark duplicates as incorrect
+      valuesToParse.forEach((value, index) => {
+        finalAnswers = (finalAnswers || []).map(finalAnswer => {
+          if (finalAnswer.id === value.id) {
+            let valid = getValidAnswer(finalAnswer, validResponses);
+            return {
+              ...finalAnswer,
+              isCorrect: valid.length > index + 1
+            };
+          }
+          return finalAnswer;
+        });
+      });
+    }
+  });
+  return finalAnswers;
+};
+const getUnansweredAnswers = (answers, validation) => {
+  const camelizedValidation = (0, _humps.camelizeKeys)(validation);
+  const {
+    validResponse: {
+      value
+    } = {}
+  } = camelizedValidation;
+  return (value || []).reduce((unanswered, response, index) => {
+    const isAnswered = !!answers.find(answer => answer.containerIndex === index);
+    response.images = response.images || [];
+    if (!isAnswered) {
+      return [...unanswered, {
+        id: `unanswered-${index}`,
+        value: response.images[0] || '',
+        containerIndex: index,
+        isCorrect: !response.images.length ? undefined : false,
+        hidden: true
+      }];
+    }
+    return unanswered;
+  }, []);
+};
+exports.getUnansweredAnswers = getUnansweredAnswers;
+const getAnswersCorrectness = (answers, validation) => {
+  const camelizedValidation = (0, _humps.camelizeKeys)(validation);
+  const {
+    validResponse: {
+      value
+    },
+    altResponses
+  } = camelizedValidation;
+  const allCorrect = getAllCorrectAnswers(answers, value);
+  const uniqueAnswers = getUniqueCorrectAnswers(allCorrect, value);
+  const noOfCorrect = uniqueAnswers.filter(answer => answer.isCorrect).length;
+
+  // Look for alternate correct responses if there are incorrect responses.
+  if (noOfCorrect < uniqueAnswers.length && altResponses && altResponses.length) {
+    const altUniqueStack = (altResponses || []).map(altResponse => {
+      const altValue = altResponse.value;
+      const altAllCorrect = getAllCorrectAnswers(answers, altValue);
+      return getUniqueCorrectAnswers(altAllCorrect, altValue);
+    });
+    // Return the one with most correct answers.
+    return altUniqueStack.sort((a, b) => b.filter(c => c.isCorrect).length - a.filter(c => c.isCorrect).length)[0];
+  }
+  return uniqueAnswers;
+};
+exports.getAnswersCorrectness = getAnswersCorrectness;
+//# sourceMappingURL=utils-correctness.js.map

package/lib/utils-correctness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-correctness.js","names":["_humps","require","getAllCorrectAnswers","answers","responses","map","answer","isCorrect","containerIndex","images","includes","value","getValidAnswer","response","filter","res","getUniqueCorrectAnswers","validResponses","finalAnswers","forEach","answer1","valuesToParse","answer2","length","shift","index","finalAnswer","id","valid","getUnansweredAnswers","validation","camelizedValidation","camelizeKeys","validResponse","reduce","unanswered","isAnswered","find","undefined","hidden","exports","getAnswersCorrectness","altResponses","allCorrect","uniqueAnswers","noOfCorrect","altUniqueStack","altResponse","altValue","altAllCorrect","sort","a","b","c"],"sources":["../src/utils-correctness.js"],"sourcesContent":["// functions also used in controller/src/utils.js\n// camelize keys is needed to convert the keys from snake_case to camelCase\n// this is also done in the controller\nimport { camelizeKeys } from 'humps';\n\nconst getAllCorrectAnswers = (answers, responses) =>\n  (answers || []).map((answer) => ({\n    ...answer,\n    isCorrect: ((responses[answer.containerIndex] && responses[answer.containerIndex].images) || []).includes(\n      answer.value,\n    ),\n  }));\n\nconst getValidAnswer = (answer, response) =>\n  (response[answer.containerIndex].images || []).filter((res) => res === answer.value);\n\nconst getUniqueCorrectAnswers = (answers, validResponses) => {\n  let finalAnswers = answers;\n\n  answers.forEach((answer1) => {\n    const valuesToParse = answers.filter(\n      (answer2) => answer2.value === answer1.value && answer2.containerIndex === answer1.containerIndex,\n    );\n\n    if (valuesToParse.length > 1) {\n      // point only to duplicates but first\n      valuesToParse.shift();\n      // mark duplicates as incorrect\n      valuesToParse.forEach((value, index) => {\n        finalAnswers = (finalAnswers || []).map((finalAnswer) => {\n          if (finalAnswer.id === value.id) {\n            let valid = getValidAnswer(finalAnswer, validResponses);\n\n            return {\n              ...finalAnswer,\n              isCorrect: valid.length > index + 1,\n            };\n          }\n          return finalAnswer;\n        });\n      });\n    }\n  });\n  return finalAnswers;\n};\n\nexport const getUnansweredAnswers = (answers, validation) => {\n  const camelizedValidation = camelizeKeys(validation);\n  const { validResponse: { value } = {} } = camelizedValidation;\n\n  return (value || []).reduce((unanswered, response, index) => {\n    const isAnswered = !!answers.find((answer) => answer.containerIndex === index);\n    response.images = response.images || [];\n\n    if (!isAnswered) {\n      return [\n        ...unanswered,\n        {\n          id: `unanswered-${index}`,\n          value: response.images[0] || '',\n          containerIndex: index,\n          isCorrect: !response.images.length ? undefined : false,\n          hidden: true,\n        },\n      ];\n    }\n\n    return unanswered;\n  }, []);\n};\n\nexport const getAnswersCorrectness = (answers, validation) => {\n  const camelizedValidation = camelizeKeys(validation);\n  const {\n    validResponse: { value },\n    altResponses,\n  } = camelizedValidation;\n\n  const allCorrect = getAllCorrectAnswers(answers, value);\n  const uniqueAnswers = getUniqueCorrectAnswers(allCorrect, value);\n  const noOfCorrect = uniqueAnswers.filter((answer) => answer.isCorrect).length;\n\n  // Look for alternate correct responses if there are incorrect responses.\n  if (noOfCorrect < uniqueAnswers.length && altResponses && altResponses.length) {\n    const altUniqueStack = (altResponses || []).map((altResponse) => {\n      const altValue = altResponse.value;\n\n      const altAllCorrect = getAllCorrectAnswers(answers, altValue);\n      return getUniqueCorrectAnswers(altAllCorrect, altValue);\n    });\n    // Return the one with most correct answers.\n    return altUniqueStack.sort((a, b) => b.filter((c) => c.isCorrect).length - a.filter((c) => c.isCorrect).length)[0];\n  }\n  return uniqueAnswers;\n};\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,MAAMC,oBAAoB,GAAGA,CAACC,OAAO,EAAEC,SAAS,KAC9C,CAACD,OAAO,IAAI,EAAE,EAAEE,GAAG,CAAEC,MAAM,KAAM;EAC/B,GAAGA,MAAM;EACTC,SAAS,EAAE,CAAEH,SAAS,CAACE,MAAM,CAACE,cAAc,CAAC,IAAIJ,SAAS,CAACE,MAAM,CAACE,cAAc,CAAC,CAACC,MAAM,IAAK,EAAE,EAAEC,QAAQ,CACvGJ,MAAM,CAACK,KACT;AACF,CAAC,CAAC,CAAC;AAEL,MAAMC,cAAc,GAAGA,CAACN,MAAM,EAAEO,QAAQ,KACtC,CAACA,QAAQ,CAACP,MAAM,CAACE,cAAc,CAAC,CAACC,MAAM,IAAI,EAAE,EAAEK,MAAM,CAAEC,GAAG,IAAKA,GAAG,KAAKT,MAAM,CAACK,KAAK,CAAC;AAEtF,MAAMK,uBAAuB,GAAGA,CAACb,OAAO,EAAEc,cAAc,KAAK;EAC3D,IAAIC,YAAY,GAAGf,OAAO;EAE1BA,OAAO,CAACgB,OAAO,CAAEC,OAAO,IAAK;IAC3B,MAAMC,aAAa,GAAGlB,OAAO,CAACW,MAAM,CACjCQ,OAAO,IAAKA,OAAO,CAACX,KAAK,KAAKS,OAAO,CAACT,KAAK,IAAIW,OAAO,CAACd,cAAc,KAAKY,OAAO,CAACZ,cACrF,CAAC;IAED,IAAIa,aAAa,CAACE,MAAM,GAAG,CAAC,EAAE;MAC5B;MACAF,aAAa,CAACG,KAAK,CAAC,CAAC;MACrB;MACAH,aAAa,CAACF,OAAO,CAAC,CAACR,KAAK,EAAEc,KAAK,KAAK;QACtCP,YAAY,GAAG,CAACA,YAAY,IAAI,EAAE,EAAEb,GAAG,CAAEqB,WAAW,IAAK;UACvD,IAAIA,WAAW,CAACC,EAAE,KAAKhB,KAAK,CAACgB,EAAE,EAAE;YAC/B,IAAIC,KAAK,GAAGhB,cAAc,CAACc,WAAW,EAAET,cAAc,CAAC;YAEvD,OAAO;cACL,GAAGS,WAAW;cACdnB,SAAS,EAAEqB,KAAK,CAACL,MAAM,GAAGE,KAAK,GAAG;YACpC,CAAC;UACH;UACA,OAAOC,WAAW;QACpB,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ;EACF,CAAC,CAAC;EACF,OAAOR,YAAY;AACrB,CAAC;AAEM,MAAMW,oBAAoB,GAAGA,CAAC1B,OAAO,EAAE2B,UAAU,KAAK;EAC3D,MAAMC,mBAAmB,GAAG,IAAAC,mBAAY,EAACF,UAAU,CAAC;EACpD,MAAM;IAAEG,aAAa,EAAE;MAAEtB;IAAM,CAAC,GAAG,CAAC;EAAE,CAAC,GAAGoB,mBAAmB;EAE7D,OAAO,CAACpB,KAAK,IAAI,EAAE,EAAEuB,MAAM,CAAC,CAACC,UAAU,EAAEtB,QAAQ,EAAEY,KAAK,KAAK;IAC3D,MAAMW,UAAU,GAAG,CAAC,CAACjC,OAAO,CAACkC,IAAI,CAAE/B,MAAM,IAAKA,MAAM,CAACE,cAAc,KAAKiB,KAAK,CAAC;IAC9EZ,QAAQ,CAACJ,MAAM,GAAGI,QAAQ,CAACJ,MAAM,IAAI,EAAE;IAEvC,IAAI,CAAC2B,UAAU,EAAE;MACf,OAAO,CACL,GAAGD,UAAU,EACb;QACER,EAAE,EAAE,cAAcF,KAAK,EAAE;QACzBd,KAAK,EAAEE,QAAQ,CAACJ,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE;QAC/BD,cAAc,EAAEiB,KAAK;QACrBlB,SAAS,EAAE,CAACM,QAAQ,CAACJ,MAAM,CAACc,MAAM,GAAGe,SAAS,GAAG,KAAK;QACtDC,MAAM,EAAE;MACV,CAAC,CACF;IACH;IAEA,OAAOJ,UAAU;EACnB,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAACK,OAAA,CAAAX,oBAAA,GAAAA,oBAAA;AAEK,MAAMY,qBAAqB,GAAGA,CAACtC,OAAO,EAAE2B,UAAU,KAAK;EAC5D,MAAMC,mBAAmB,GAAG,IAAAC,mBAAY,EAACF,UAAU,CAAC;EACpD,MAAM;IACJG,aAAa,EAAE;MAAEtB;IAAM,CAAC;IACxB+B;EACF,CAAC,GAAGX,mBAAmB;EAEvB,MAAMY,UAAU,GAAGzC,oBAAoB,CAACC,OAAO,EAAEQ,KAAK,CAAC;EACvD,MAAMiC,aAAa,GAAG5B,uBAAuB,CAAC2B,UAAU,EAAEhC,KAAK,CAAC;EAChE,MAAMkC,WAAW,GAAGD,aAAa,CAAC9B,MAAM,CAAER,MAAM,IAAKA,MAAM,CAACC,SAAS,CAAC,CAACgB,MAAM;;EAE7E;EACA,IAAIsB,WAAW,GAAGD,aAAa,CAACrB,MAAM,IAAImB,YAAY,IAAIA,YAAY,CAACnB,MAAM,EAAE;IAC7E,MAAMuB,cAAc,GAAG,CAACJ,YAAY,IAAI,EAAE,EAAErC,GAAG,CAAE0C,WAAW,IAAK;MAC/D,MAAMC,QAAQ,GAAGD,WAAW,CAACpC,KAAK;MAElC,MAAMsC,aAAa,GAAG/C,oBAAoB,CAACC,OAAO,EAAE6C,QAAQ,CAAC;MAC7D,OAAOhC,uBAAuB,CAACiC,aAAa,EAAED,QAAQ,CAAC;IACzD,CAAC,CAAC;IACF;IACA,OAAOF,cAAc,CAACI,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKA,CAAC,CAACtC,MAAM,CAAEuC,CAAC,IAAKA,CAAC,CAAC9C,SAAS,CAAC,CAACgB,MAAM,GAAG4B,CAAC,CAACrC,MAAM,CAAEuC,CAAC,IAAKA,CAAC,CAAC9C,SAAS,CAAC,CAACgB,MAAM,CAAC,CAAC,CAAC,CAAC;EACpH;EACA,OAAOqB,aAAa;AACtB,CAAC;AAACJ,OAAA,CAAAC,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/package.json

@@ -1,101 +1,36 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "10.1.2-next.2",
+  "repository": "pie-framework/pie-elements",
+  "version": "10.1.2",
   "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@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.3-next.37",
-    "@pie-lib/drag": "4.0.3-next.37",
-    "@pie-lib/render-ui": "6.1.1-next.37",
-    "@pie-lib/translator": "4.0.3-next.0",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/correct-answer-toggle": "4.0.3",
+    "@pie-lib/drag": "4.0.3",
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.1",
+    "@pie-lib/translator": "4.0.2",
+    "classnames": "^2.2.6",
     "humps": "^2.0.1",
     "prop-types": "^15.8.1",
-    "react-transition-group": "^4.4.5",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "debug": "^4.4.3",
-    "@pie-lib/config-ui": "13.0.4-next.30",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.30",
-    "@pie-element/shared-controller-utils": "0.1.1-next.1",
-    "@pie-element/shared-lodash": "0.1.1-next.0",
-    "clsx": "^2.1.1",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@pie-element/shared-player-events": "0.1.0"
-  },
-  "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"
-    },
-    "./browser/delivery": {
-      "default": "./dist/browser/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./browser/author": {
-      "default": "./dist/browser/author/index.js"
-    },
-    "./configure": {
-      "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"
-    },
-    "./browser/controller": {
-      "default": "./dist/browser/controller/index.js"
-    },
-    "./runtime-support": {
-      "types": "./dist/runtime-support.d.ts",
-      "default": "./dist/runtime-support.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "configure.js",
-    "controller.js",
-    "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-transition-group": "^4.4.5"
   },
+  "author": "pie framework developers",
+  "license": "ISC",
+  "gitHead": "206ff17a94e8e197744d059f97ad2b9a1bc9145d",
   "scripts": {
-    "build": "bun x vite build && bun x vite build --config ../../../tools/vite/element-browser.config.ts && 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"
   },
-  "pie": {
-    "controller": "@pie-element/image-cloze-association/controller",
-    "configure": "@pie-element/image-cloze-association/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
-  }
+  "main": "lib/index.js",
+  "module": "src/index.js"
 }

package/src/__tests__/index.test.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { createRoot } from 'react-dom/client';
+import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
+import { ImageClozeAssociationComponent } from '../root';
+
+jest.mock('@pie-lib/math-rendering', () => ({ renderMath: jest.fn() }));
+
+jest.mock('@dnd-kit/core', () => ({
+  DragOverlay: ({ children }) => <div>{children}</div>,
+  useDraggable: () => ({
+    setNodeRef: jest.fn(),
+    attributes: {},
+    listeners: {},
+  }),
+  useDroppable: () => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+  }),
+}));
+
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children }) => <div>{children}</div>,
+  ICADroppablePlaceholder: ({ children }) => <div>{children}</div>,
+}));
+
+const mockRender = jest.fn();
+const mockUnmount = jest.fn();
+const mockCreateRoot = jest.fn(() => ({
+  render: mockRender,
+  unmount: mockUnmount,
+}));
+
+jest.mock('react-dom/client', () => ({
+  createRoot: (...args) => mockCreateRoot(...args),
+}));
+
+jest.mock('../index', () => {
+  const { ModelSetEvent, SessionChangedEvent } = require('@pie-framework/pie-player-events');
+
+  class MockHTMLElement {
+    constructor() {
+      this._root = null;
+      this._model = null;
+      this._session = null;
+      this.dispatchEvent = jest.fn();
+      this.audioComplete = false;
+      this.tagName = 'image-cloze-association';
+    }
+
+    querySelector() {
+      return null;
+    }
+  }
+
+  return {
+    __esModule: true,
+    default: class ImageClozeAssociation extends MockHTMLElement {
+      constructor() {
+        super();
+      }
+
+      set model(m) {
+        this._model = m;
+        this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+        this._render();
+      }
+
+      set session(s) {
+        this._session = s;
+        this._render();
+      }
+
+      updateAnswer = (answers) => {
+        this._session = { ...this._session, answers };
+        this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
+      };
+
+      isComplete() {
+        const { responseAreasToBeFilled } = this._model || {};
+        if (!this._session || !this._session.answers) {
+          return false;
+        }
+        const { answers } = this._session;
+        if (!Array.isArray(answers)) {
+          return false;
+        }
+        const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;
+        return filledResponseAreas >= responseAreasToBeFilled;
+      }
+
+      _render() {
+        if (!this._root) {
+          this._root = mockCreateRoot(global.document.createElement('div'));
+        }
+        this._root.render(null);
+      }
+    },
+  };
+});
+
+const ImageClozeAssociation = require('../index').default;
+
+describe('image-cloze-association', () => {
+  beforeEach(() => {
+    mockRender.mockClear();
+    mockCreateRoot.mockClear();
+  });
+
+  describe('events', () => {
+    describe('model', () => {
+      it('dispatches model set event', () => {
+        const el = new ImageClozeAssociation();
+        el.tagName = 'ica-el';
+        el.model = {};
+        expect(el.dispatchEvent).toBeCalledWith(new ModelSetEvent('ica-el', false, true));
+      });
+
+      it('calls render', () => {
+        const el = new ImageClozeAssociation();
+        el.model = {};
+        const rootInstance = mockCreateRoot.mock.results[0].value;
+        expect(rootInstance.render).toHaveBeenCalled();
+      });
+    });
+
+    describe('updateAnswer', () => {
+      it('dispatches session changed event - add answer', () => {
+        const el = new ImageClozeAssociation();
+        el.tagName = 'ica-el';
+        el.model = {
+          responseAreasToBeFilled: 1,
+        };
+        el.session = { answers: [] };
+        el.updateAnswer([{ id: '1', containerIndex: 0, value: '' }]);
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', true));
+      });
+
+      it('dispatches session changed event - remove answer', () => {
+        const el = new ImageClozeAssociation();
+        el.tagName = 'ica-el';
+        el.model = {
+          responseAreasToBeFilled: 1,
+        };
+        el.session = { answers: [{ id: '1', containerIndex: 0, value: '' }] };
+        el.updateAnswer([]);
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', false));
+      });
+
+      it('dispatches session changed event - add/remove answer', () => {
+        const el = new ImageClozeAssociation();
+        el.tagName = 'ica-el';
+        el.model = {
+          responseAreasToBeFilled: 2,
+        };
+        el.session = { answers: [] };
+        el.updateAnswer([{ id: '1', containerIndex: 0, value: '' }]);
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', false));
+
+        el.updateAnswer([
+          { id: '1', containerIndex: 0, value: '' },
+          { id: '2', containerIndex: 1, value: '' },
+        ]);
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', true));
+
+        el.updateAnswer([{ id: '2', containerIndex: 1, value: '' }]);
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', false));
+
+        el.updateAnswer([]);
+        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ica-el', false));
+      });
+    });
+  });
+});

package/src/__tests__/root.test.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ImageClozeAssociationComponent as Root } from '../root';
+
+jest.mock('@dnd-kit/core', () => ({
+  DragOverlay: ({ children }) => <div>{children}</div>,
+  useDraggable: () => ({
+    setNodeRef: jest.fn(),
+    attributes: {},
+    listeners: {},
+  }),
+  useDroppable: () => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+  }),
+}));
+
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children }) => <div>{children}</div>,
+  ICADroppablePlaceholder: ({ children }) => <div>{children}</div>,
+}));
+
+const model = {
+  possibleResponses: ['firstImage', 'secondImage'],
+  responseContainers: [
+    { index: 0, x: 0, y: 0, width: '10%', height: '10%' },
+    { index: 1, x: 20, y: 20, width: '10%', height: '10%' },
+  ],
+  duplicateResponses: false,
+  maxResponsePerZone: 1,
+  image: { src: 'test.jpg', width: 100, height: 100 },
+};
+
+describe('Root', () => {
+  const updateAnswer = jest.fn();
+
+  const mkWrapper = (opts = {}) => {
+    const props = {
+      model,
+      session: { answers: [] },
+      updateAnswer,
+      ...opts,
+    };
+    return render(<Root {...props} />);
+  };
+
+  const createInstance = (opts = {}) => {
+    const props = {
+      model,
+      session: { answers: [] },
+      updateAnswer,
+      ...opts,
+    };
+    const instance = new Root(props);
+
+    // Mock setState to execute updates immediately for testing
+    instance.setState = jest.fn((state) => {
+      Object.assign(instance.state, typeof state === 'function' ? state(instance.state) : state);
+    });
+
+    return instance;
+  };
+
+  describe('initialization', () => {
+    it('initializes with correct possible responses', () => {
+      const instance = createInstance();
+      expect(instance.state.possibleResponses).toEqual([
+        { value: 'firstImage', id: '0' },
+        { value: 'secondImage', id: '1' },
+      ]);
+    });
+  });
+
+  describe('handleOnAnswerSelect', () => {
+    it('removes response from possibleResponses on answer select', () => {
+      const instance = createInstance();
+      instance.handleOnAnswerSelect({ value: 'firstImage', id: '0' }, 0);
+      expect(instance.state.possibleResponses).toEqual([{ value: 'secondImage', id: '1' }]);
+    });
+
+    it('adds response back to possibleResponses on answer remove', () => {
+      const instance = createInstance();
+      instance.handleOnAnswerSelect({ value: 'firstImage', id: '0' }, 0);
+      instance.handleOnAnswerRemove({ value: 'firstImage', id: '0', containerIndex: 0 });
+      expect(instance.state.possibleResponses).toEqual([
+        { value: 'secondImage', id: '1' },
+        { value: 'firstImage', id: '0' },
+      ]);
+    });
+
+    it('preserves id when adding back to possibleResponses', () => {
+      const instance = createInstance();
+      instance.handleOnAnswerSelect({ value: 'firstImage', id: '0' }, 0);
+      instance.handleOnAnswerRemove({ value: 'firstImage', id: '0', containerIndex: 0 });
+      expect(instance.state.possibleResponses[1].id).toBe('0');
+    });
+  });
+
+});