@citolab/qti-components 7.0.6 → 7.0.9-beta.0

package/dist/chunks/{chunk-E4TWZ2DL.js → chunk-NPHDN2TQ.js}

@@ -1,27 +1,27 @@
-import {
-  qtiTransformItem
-} from "./chunk-XDMSEAYC.js";
 import {
   liveQuery
 } from "./chunk-D3RGDWKP.js";
 import {
   watch
 } from "./chunk-ELDMXTUQ.js";
-import {
-  Interaction
-} from "./chunk-OIRWOI3E.js";
-import {
-  itemContextVariables
-} from "./chunk-DLUJN2FW.js";
 import {
   QtiConditionExpression
-} from "./chunk-XSI6FXGD.js";
+} from "./chunk-OOQLWOYU.js";
 import {
   QtiExpression
-} from "./chunk-BPHQLJWE.js";
+} from "./chunk-I7HVKMDI.js";
+import {
+  qtiTransformItem
+} from "./chunk-XDMSEAYC.js";
+import {
+  Interaction
+} from "./chunk-WRHEO7NG.js";
+import {
+  itemContextVariables
+} from "./chunk-W7ZXKJ5O.js";
 import {
   itemContext
-} from "./chunk-KOEILLVS.js";
+} from "./chunk-NJNQOQUU.js";
 import {
   __decorateClass
 } from "./chunk-H2JE6IVU.js";
@@ -243,13 +243,19 @@ var QtiAssessmentItem = class extends LitElement {
       value: this._context.variables.find((v) => v.identifier === identifier)?.value
     });
   }
-  validate() {
+  validate(reportValidity = true) {
     if (this._interactionElements.every((interactionElement) => interactionElement.validate())) return true;
     if (this._interactionElements.some((interactionElement) => interactionElement.validate())) return false;
+    if (reportValidity) this.reportValidity();
     return null;
   }
+  reportValidity() {
+    for (const interactionElement of this._interactionElements) {
+      interactionElement.reportValidity();
+    }
+  }
   _getCompletionStatus() {
-    const valid = this.validate();
+    const valid = this.validate(false);
     if (valid === true) return "completed";
     if (valid === false) return "incomplete";
     return "not_attempted";
@@ -677,6 +683,9 @@ QtiAssociableHotspot = __decorateClass([
 import { html as html7 } from "lit";
 import { customElement as customElement9, state as state3 } from "lit/decorators.js";
 
+// src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts
+import { property as property4 } from "lit/decorators.js";
+
 // src/lib/qti-components/qti-interaction/internal/drag-drop/flippables-mixin.ts
 var FlippablesMixin = (superClass, _droppablesSel, _draggablesSel) => {
   class FlippablesElement extends superClass {
@@ -744,7 +753,6 @@ var FlippablesMixin = (superClass, _droppablesSel, _draggablesSel) => {
 };
 
 // src/lib/qti-components/qti-interaction/internal/drag-drop/drag-drop-interaction-mixin.ts
-import { property as property4 } from "lit/decorators.js";
 var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelector, dragContainersSelector) => {
   class DragDropInteractionElement extends FlippablesMixin(
     superClass,
@@ -1078,7 +1086,6 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       }
       const lastElementChild = this.lastElementChild;
       this._internals.setValidity(isValid ? {} : { customError: true }, validityMessage, lastElementChild);
-      this.reportValidity();
       return isValid;
     }
     reportValidity() {
@@ -1098,7 +1105,7 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       const maxMatch = this.getMatchMaxValue(droppable);
       const currentAssociations = droppable.querySelectorAll('[qti-draggable="true"]').length;
       const unlimitedAssociations = maxMatch === 0;
-      return unlimitedAssociations || currentAssociations >= maxMatch;
+      return !unlimitedAssociations && currentAssociations >= maxMatch;
     }
     dropDraggableInDroppable(draggable, droppable) {
       const cleanClone = draggable.cloneNode(true);
@@ -1143,12 +1150,18 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       this.deactivateDroppables();
     }
     checkAllMaxAssociations() {
+      const currentAssociations = this.getValidAssociations();
+      const maxAssociationsInterationReached = this.maxAssociations !== 0 && currentAssociations >= this.maxAssociations;
       this.droppables.forEach((d) => {
-        const maxAssociationsReached = this.checkMaxAssociations(d);
-        if (maxAssociationsReached) {
+        if (maxAssociationsInterationReached) {
           this.disableDroppable(d);
         } else {
-          this.enableDroppable(d);
+          const maxAssociationsReached = this.checkMaxAssociations(d);
+          if (maxAssociationsReached) {
+            this.disableDroppable(d);
+          } else {
+            this.enableDroppable(d);
+          }
         }
       });
     }
@@ -1190,7 +1203,11 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       });
     }
     getValidAssociations() {
-      return this.droppables.filter((d) => d.childElementCount > 0).length;
+      let count = 0;
+      for (const droppable of this.droppables) {
+        count = count + this.getDraggablesFromDroppable(droppable).length;
+      }
+      return count;
     }
     saveResponse() {
       const response = this.collectResponseData();
@@ -1373,13 +1390,6 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       e.preventDefault();
       this.dragClone.setAttribute("dragging", "");
     }
-    findParentInteractionElement(element) {
-      let parent = element.parentElement;
-      while (parent && !parent.tagName?.toLowerCase().endsWith("-interaction")) {
-        parent = parent.parentElement;
-      }
-      return parent;
-    }
     findDraggableInDraggableContainer(identifier) {
       const allDragContainers = this.dragContainers.flat();
       for (const container of allDragContainers) {
@@ -1590,10 +1600,10 @@ var ChoicesMixin = (superClass, selector) => {
       let validityMessage = "";
       if (this.maxChoices !== 0 && selectedCount > this.maxChoices) {
         isValid = false;
-        validityMessage = this.dataset.maxSelectionsMessage || `You can select at most ${this.maxChoices} choices.`;
+        validityMessage = this.dataset.maxSelectionsMessage || `Please select no more than ${this.maxChoices} ${this.maxChoices === 1 ? "option" : "options"}.`;
       } else if (selectedCount < this.minChoices) {
         isValid = false;
-        validityMessage = this.dataset.minSelectionsMessage || `You must select at least ${this.minChoices} choices.`;
+        validityMessage = `Please select at least ${this.minChoices} ${this.minChoices === 1 ? "option" : "options"}.`;
       }
       if (selectedChoices.length > 0) {
         this._internals.setValidity(
@@ -1602,7 +1612,6 @@ var ChoicesMixin = (superClass, selector) => {
           selectedChoices[selectedCount - 1] || this._choiceElements[0] || this
         );
       }
-      this.reportValidity();
       return isValid;
     }
     reportValidity() {
@@ -2571,17 +2580,26 @@ function positionHotspots(shape, coordsNumber, img, hotspot) {
         hotspot.style.height = bottomYPer - topYPer + "%";
       }
       break;
+    case "ellipse":
+      {
+        const [centerX, centerY, radiusX, radiusY] = coordsNumber;
+        const centerXPer = centerX / img.width * 100;
+        const centerYPer = centerY / img.height * 100;
+        const radiusXPer = radiusX / img.width * 100;
+        const radiusYPer = radiusY / img.height * 100;
+        hotspot.style.left = centerXPer - radiusXPer + "%";
+        hotspot.style.top = centerYPer - radiusYPer + "%";
+        hotspot.style.width = 2 * radiusXPer + "%";
+        hotspot.style.height = 2 * radiusYPer + "%";
+        hotspot.style.borderRadius = `50%`;
+      }
+      break;
     case "poly":
       {
-        const polycoords = coordsNumber.reduce((acc, currentValue, currentIndex, polyC) => {
-          if (currentIndex % 2 === 1) {
-            const lastVal = acc.pop();
-            acc[acc.length] = { x: lastVal, y: polyC[currentIndex] };
-          } else {
-            acc.push(currentValue);
-          }
-          return acc;
-        }, []);
+        const polycoords = [];
+        for (let i = 0; i < coordsNumber.length; i += 2) {
+          polycoords.push({ x: coordsNumber[i], y: coordsNumber[i + 1] });
+        }
         const leftX = Math.min(...polycoords.map((point) => point.x));
         const rightX = Math.max(...polycoords.map((point) => point.x));
         const topY = Math.min(...polycoords.map((point) => point.y));
@@ -2590,19 +2608,20 @@ function positionHotspots(shape, coordsNumber, img, hotspot) {
         const topYPer = topY / img.height * 100;
         const rightXPer = rightX / img.width * 100;
         const bottomYPer = bottomY / img.height * 100;
-        hotspot.style.left = leftX / img.width * 100 + "%";
-        hotspot.style.top = topY / img.height * 100 + "%";
+        hotspot.style.left = leftXPer + "%";
+        hotspot.style.top = topYPer + "%";
         hotspot.style.width = rightXPer - leftXPer + "%";
         hotspot.style.height = bottomYPer - topYPer + "%";
         const polygonData = polycoords.map((point) => ({
           x: (point.x - leftX) / (rightX - leftX) * 100,
           y: (point.y - topY) / (bottomY - topY) * 100
         }));
-        const polyD = polygonData.map((p) => Math.round(p.x) + "% " + Math.round(p.y) + "%").join(",");
+        const polyD = polygonData.map((p) => `${p.x}% ${p.y}%`).join(",");
         hotspot.style.clipPath = `polygon(${polyD})`;
       }
       break;
     default:
+      console.error(`Unsupported shape: ${shape}`);
       break;
   }
 }
@@ -3236,11 +3255,6 @@ QtiInlineChoice = __decorateClass([
   customElement26("qti-inline-choice")
 ], QtiInlineChoice);
 
-// src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.ts
-import { html as html25, nothing } from "lit";
-import { customElement as customElement28, property as property20, state as state8 } from "lit/decorators.js";
-import { unsafeHTML as unsafeHTML2 } from "lit/directives/unsafe-html.js";
-
 // src/lib/qti-components/qti-interaction/qti-simple-associable-choice.ts
 import { css as css20, html as html24, LitElement as LitElement14 } from "lit";
 import { customElement as customElement27, property as property19 } from "lit/decorators.js";
@@ -3305,6 +3319,11 @@ QtiSimpleAssociableChoice = __decorateClass([
   customElement27("qti-simple-associable-choice")
 ], QtiSimpleAssociableChoice);
 
+// src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.ts
+import { html as html25, nothing } from "lit";
+import { customElement as customElement28, property as property20, state as state8 } from "lit/decorators.js";
+import { unsafeHTML as unsafeHTML2 } from "lit/directives/unsafe-html.js";
+
 // src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.styles.ts
 import { css as css21 } from "lit";
 var qti_match_interaction_styles_default = css21`
@@ -3445,7 +3464,7 @@ var QtiMatchInteraction = class extends DragDropInteractionMixin(
         const selectedInRowCount = this.value.filter((v) => v.split(" ")[0] === rowId).length || 0;
         const checked = this.value.includes(value);
         const part = `rb ${checked ? "rb-checked" : ""} ${this.correctOptions.includes(value) ? "rb-correct" : ""}`;
-        const disable = this.correctOptions.length > 0 ? true : row.matchMax === 1 ? false : selectedInRowCount >= row.matchMax && !checked;
+        const disable = this.correctOptions.length > 0 ? true : row.matchMax === 1 ? false : row.matchMax !== 0 && selectedInRowCount >= row.matchMax && !checked;
         return html25`<td>
                         <input
                           type=${row.matchMax === 1 ? "radio" : `checkbox`}
@@ -3735,11 +3754,10 @@ var QtiPortableCustomInteraction = class extends Interaction {
   startChecking() {
     this.intervalId = setInterval(() => {
       const response = this.pci.getResponse();
-      const newResponse = this.pci.getResponse();
       const stringified = JSON.stringify(response);
       if (stringified !== this.rawResponse) {
         this.rawResponse = stringified;
-        const value = this.convertQtiVariableJSON(newResponse);
+        const value = this.convertQtiVariableJSON(response);
         this.value = value;
         this.saveResponse(value);
       }
@@ -3758,77 +3776,71 @@ var QtiPortableCustomInteraction = class extends Interaction {
   get value() {
     return this.rawResponse;
   }
-  getTAOConfig(node) {
-    const a = node.querySelectorAll("properties");
-    let config = {};
-    const getPropertyValue = (el) => {
-      const property38 = {};
-      const key = el.getAttribute("key");
-      if (key) {
-        const children = Array.from(el.children);
-        const allKey = children.map((c) => c.getAttribute("key"));
-        const isArray = allKey.length > 0 && !allKey.find((k) => !Number.isInteger(+k));
-        if (isArray) {
-          property38[key] = children.map((c) => getChildProperties(c));
-        } else {
-          property38[key] = el.textContent;
-        }
-      }
-      return property38;
-    };
-    const getChildProperties = (el) => {
-      if (el) {
-        let properties = {};
-        for (const child of el.children) {
-          properties = { ...properties, ...getPropertyValue(child) };
-        }
-        return properties;
-      }
-    };
-    for (const properties of a) {
-      const key = properties.getAttribute("key");
-      if (!key) {
-        config = { ...config, ...getChildProperties(properties) };
-      }
-      return config;
-    }
-    console.log("Can not find qti-custom-interaction config");
-    return null;
-  }
   register(pci) {
     this.pci = pci;
-    const type = this.parentElement.tagName === "QTI-CUSTOM-INTERACTION" ? "TAO" : "IMS";
-    const dom = type == "IMS" ? this.querySelector("qti-interaction-markup") : this.querySelector("markup");
+    const dom = this.querySelector("qti-interaction-markup");
     dom.classList.add("qti-customInteraction");
-    if (type == "TAO" && this.querySelector("properties")) {
+    if (this.querySelector("properties")) {
       this.querySelector("properties").style.display = "none";
     }
-    const config = type == "IMS" ? {
+    const config = {
       properties: this.dataset,
       onready: () => {
         console.log("onready");
       }
-    } : this.getTAOConfig(this);
-    if (type == "IMS") {
+    };
+    if (pci.getInstance)
       pci.getInstance(dom, config, void 0);
-    } else {
-      pci.initialize(this.customInteractionTypeIdentifier, dom.firstElementChild, config);
-    }
-    if (type == "TAO") {
-      const links = Array.from(this.querySelectorAll("link")).map((acc) => acc.getAttribute("href"));
-      links.forEach((link) => {
-        const styles = document.createElement("link");
-        styles.rel = "stylesheet";
-        styles.type = "text/css";
-        styles.media = "screen";
-        styles.href = link;
-        dom.appendChild(styles);
-      });
+    else {
+      const restoreTAOConfig = (element) => {
+        const config2 = {};
+        const parseDataAttributes = (element2) => {
+          const result = {};
+          Object.entries(element2.dataset).forEach(([key, value]) => {
+            if (!key.includes("__")) {
+              result[key] = value;
+            }
+          });
+          const nestedData = {};
+          Object.entries(element2.dataset).forEach(([key, value]) => {
+            const parts = key.split("__");
+            if (parts.length > 1) {
+              const [group, index, prop] = parts;
+              nestedData[group] = nestedData[group] || {};
+              nestedData[group][index] = nestedData[group][index] || {};
+              nestedData[group][index][prop] = value;
+            }
+          });
+          Object.entries(nestedData).forEach(([key, group]) => {
+            result[key] = Object.values(group);
+          });
+          return result;
+        };
+        const data = parseDataAttributes(element);
+        for (const key in data) {
+          if (Object.prototype.hasOwnProperty.call(data, key)) {
+            const value = data[key];
+            if (key === "config") {
+              config2[key] = JSON.parse(value);
+            } else {
+              config2[key] = value;
+            }
+          }
+        }
+        return config2;
+      };
+      const taoConfig = restoreTAOConfig(this);
+      pci.initialize(
+        this.customInteractionTypeIdentifier,
+        dom.firstElementChild,
+        Object.keys(taoConfig).length ? taoConfig : null
+      );
     }
     this.startChecking();
   }
   connectedCallback() {
     super.connectedCallback();
+    console.log("connectedCallback");
     define("qtiCustomInteractionContext", () => {
       return {
         register: (ctxA) => {
@@ -3840,8 +3852,22 @@ var QtiPortableCustomInteraction = class extends Interaction {
     });
     const config = this.buildRequireConfig();
     const requirePCI = requirejs.config(config);
+    requirejs.onError = function(err) {
+      console.error("RequireJS error:", err);
+      if (err.requireType === "timeout") {
+        console.error("Modules that timed out:", err.requireModules);
+      }
+      throw err;
+    };
     requirePCI(["require"], (require2) => {
-      require2([this.module]);
+      try {
+        require2([this.module], () => {
+        }, (err) => {
+          console.error("Error loading module:", err);
+        });
+      } catch (error) {
+        console.error("Error in require call:", error);
+      }
     });
   }
   disconnectedCallback() {
@@ -3885,7 +3911,7 @@ var QtiPortableCustomInteraction = class extends Interaction {
   combineRequireResolvePaths(path1, path2) {
     const path1Array = Array.isArray(path1) ? path1 : [path1];
     const path2Array = Array.isArray(path2) ? path2 : [path2];
-    return path1Array.concat(path2Array);
+    return path1Array.concat(path2Array).filter((value, index, self) => self.indexOf(value) === index);
   }
   removeDoubleSlashes(str) {
     const singleForwardSlashes = str.replace(/([^:]\/)\/+/g, "$1").replace(/\/\//g, "/").replace("http:/", "http://").replace("https:/", "https://");
@@ -4004,7 +4030,7 @@ var QtiSelectPointInteraction = class extends Interaction {
     this._imgElement = null;
     // Extracted click handler method
     this._onImageClick = (event) => {
-      if (this._points.length < this.maxChoices) {
+      if (this.maxChoices === 0 || this._points.length < this.maxChoices) {
         const x = event.offsetX;
         const y = event.offsetY;
         this._points = [...this._points, `${x} ${y}`];
@@ -5285,8 +5311,8 @@ import { property as property31 } from "lit/decorators.js";
 var QtiMapResponse = class extends QtiExpression {
   getResult() {
     const response = this.context.variables.find((r) => r.identifier === this.identifier);
-    if (!response) {
-      console.warn(`Response ${this.identifier} can not be found`);
+    if (!response || !response.mapping) {
+      console.error(`Response ${this.identifier} can not be found`);
       return null;
     }
     const mapping = response.mapping;
@@ -6085,4 +6111,4 @@ export {
   QtiOutcomeDeclaration,
   QtiResponseDeclaration
 };
-//# sourceMappingURL=chunk-E4TWZ2DL.js.map
+//# sourceMappingURL=chunk-NPHDN2TQ.js.map