@citolab/qti-components 7.14.2 → 7.14.3

package/dist/chunks/{chunk-2X2C5WI5.js → chunk-C4ELTNV7.js}

@@ -1,36 +1,36 @@
 import {
-  Interaction
-} from "./chunk-P4QBOVQ2.js";
+  QtiFeedback,
+  convertNumberToUniversalFormat,
+  liveQuery,
+  removeDoubleSlashes
+} from "./chunk-AGV5GOTF.js";
 import {
-  itemContextVariables
-} from "./chunk-JQ6HWGRY.js";
+  watch
+} from "./chunk-ELDMXTUQ.js";
+import {
+  qtiTransformItem
+} from "./chunk-XBPO6E25.js";
 import {
   QtiConditionExpression
 } from "./chunk-SV4K25ZI.js";
 import {
   QtiExpression
 } from "./chunk-GAAFN7QF.js";
-import {
-  QtiFeedback,
-  convertNumberToUniversalFormat,
-  liveQuery,
-  removeDoubleSlashes
-} from "./chunk-YD7FVKDP.js";
 import {
   testContext
 } from "./chunk-CJADUWEC.js";
+import {
+  Interaction
+} from "./chunk-P4QBOVQ2.js";
 import {
   itemContext
 } from "./chunk-NJNQOQUU.js";
-import {
-  watch
-} from "./chunk-ELDMXTUQ.js";
-import {
-  qtiTransformItem
-} from "./chunk-XBPO6E25.js";
 import {
   configContext
 } from "./chunk-BHJSX3Q6.js";
+import {
+  itemContextVariables
+} from "./chunk-JQ6HWGRY.js";
 import {
   __decorateClass
 } from "./chunk-H2JE6IVU.js";
@@ -755,6 +755,8 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       // Minimum pixel movement to start dragging
       this.DRAG_CLONE_OPACITY = 1;
       // Opacity of the drag clone element
+      this.MAX_DRAGGABLE_WIDTH = 600;
+      // Maximum width of a draggable element
       this.dataTransfer = {
         data: {},
         setData(type, val) {
@@ -924,33 +926,50 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       await this.updateComplete;
       if (this.isMatchTabular()) return;
       const draggables = this.querySelectorAll(draggablesSelector);
-      const droppables = Array.from(this.querySelectorAll(droppablesSelector)).map((d) => d);
-      let maxHeight = 0;
-      let maxWidth = 0;
-      draggables.forEach((draggable) => {
-        const rect = draggable.getBoundingClientRect();
-        maxHeight = Math.max(maxHeight, rect.height);
-        maxWidth = Math.max(maxWidth, rect.width);
-      });
       const dragContainer = this.querySelector(dragContainersSelector) || this.shadowRoot?.querySelector(dragContainersSelector);
+      const droppables = this.querySelectorAll(droppablesSelector);
       const dropContainer = droppables[0]?.parentElement;
+      const maxWidth = this.determineMaxWidth(dragContainer, dropContainer);
+      let maxDraggableHeight = 0;
+      let maxDraggableWidth = 0;
+      for (const draggable of draggables) {
+        draggable.style.maxWidth = maxWidth + "px";
+        const { width, height } = await this.measureIntrinsicSize(draggable);
+        maxDraggableHeight = Math.max(maxDraggableHeight, height);
+        maxDraggableWidth = Math.max(maxDraggableWidth, width);
+      }
       if (dropContainer) {
-        dropContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(calc(${maxWidth}px + 2 * var(--qti-dropzone-padding)), 1fr))`;
+        dropContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(calc(min(${maxWidth}px,${maxDraggableWidth}px + 2 * var(--qti-dropzone-padding))), 1fr))`;
       }
       if (dragContainer) {
-        dragContainer.style.minHeight = `${maxHeight}px`;
-        dragContainer.style.minWidth = `${maxWidth}px`;
+        dragContainer.style.minHeight = `${maxDraggableHeight}px`;
       }
       for (const droppable of droppables) {
-        droppable.style.minHeight = `${maxHeight}px`;
-        droppable.style.minWidth = `${maxWidth}px`;
+        droppable.style.minHeight = `${maxDraggableHeight}px`;
+        droppable.style.minWidth = `${maxDraggableWidth}px`;
         const dropSlot = droppable.shadowRoot?.querySelector('slot[part="dropslot"]');
         if (dropSlot) {
-          dropSlot.style.minHeight = `${maxHeight}px`;
-          dropSlot.style.minWidth = `${maxWidth}px`;
+          dropSlot.style.minHeight = `${maxDraggableHeight}px`;
         }
       }
     }
+    determineMaxWidth(dragContainer, dropContainer) {
+      const referenceContainer = dropContainer ?? dragContainer;
+      if (!referenceContainer || referenceContainer.clientWidth == 0) {
+        return this.MAX_DRAGGABLE_WIDTH;
+      }
+      const styles = window.getComputedStyle(referenceContainer);
+      const paddingLeft = parseFloat(styles.paddingLeft);
+      const paddingRight = parseFloat(styles.paddingRight);
+      return Math.min(this.MAX_DRAGGABLE_WIDTH, referenceContainer.clientWidth - paddingLeft - paddingRight);
+    }
+    async measureIntrinsicSize(el) {
+      const origPosition = el.style.position;
+      el.style.position = "fixed";
+      const rect = el.getBoundingClientRect();
+      el.style.position = origPosition;
+      return { width: rect.width, height: rect.height };
+    }
     activateDroppables(target) {
       if (this.isMatchTabular()) return;
       const dragContainers = this.dragContainers;
@@ -1696,7 +1715,7 @@ var ChoicesMixin = (superClass, selector) => {
             this._setChoiceChecked(choice, false);
           }
         });
-      } else if (this._configContext?.disableAfterIfMaxChoicesReached) {
+      } else if (this.maxChoices !== 0 && this._configContext?.disableAfterIfMaxChoicesReached) {
         const selectedChoices = this._choiceElements.filter((choice) => this._getChoiceChecked(choice));
         if (selectedChoices.length >= this.maxChoices) {
           this._choiceElements.forEach((choice) => {
@@ -2469,6 +2488,46 @@ var QtiGapMatchInteraction = class extends DragDropInteractionMixin(
       });
     }
   }
+  getMatches(responseVariable) {
+    if (!responseVariable.correctResponse) {
+      return [];
+    }
+    const correctResponse = Array.isArray(responseVariable.correctResponse) ? responseVariable.correctResponse : [responseVariable.correctResponse];
+    const matches = [];
+    if (correctResponse) {
+      correctResponse.forEach((x) => {
+        const split = x.split(" ");
+        matches.push({ source: split[0], target: split[1] });
+      });
+    }
+    return matches;
+  }
+  toggleCandidateCorrection(show) {
+    const responseVariable = this.responseVariable;
+    if (!responseVariable?.correctResponse) {
+      return;
+    }
+    const matches = this.getMatches(responseVariable);
+    const targetChoices = Array.from(this.querySelectorAll("qti-gap"));
+    targetChoices.forEach((targetChoice) => {
+      const targetId = targetChoice.getAttribute("identifier");
+      const targetMatches = matches.filter((m) => m.target === targetId);
+      const selectedChoices = targetChoice.querySelectorAll(`qti-gap-text`);
+      selectedChoices.forEach((selectedChoice) => {
+        selectedChoice.internals.states.delete("candidate-correct");
+        selectedChoice.internals.states.delete("candidate-incorrect");
+        if (!show) {
+          return;
+        }
+        const isCorrect = targetMatches.find((m) => m.source === selectedChoice.identifier)?.source !== void 0;
+        if (isCorrect) {
+          selectedChoice.internals.states.add("candidate-correct");
+        } else {
+          selectedChoice.internals.states.add("candidate-incorrect");
+        }
+      });
+    });
+  }
 };
 QtiGapMatchInteraction.styles = qti_gap_match_interaction_styles_default;
 QtiGapMatchInteraction = __decorateClass([
@@ -8827,4 +8886,4 @@ export {
   QtiOutcomeDeclaration,
   QtiResponseDeclaration
 };
-//# sourceMappingURL=chunk-2X2C5WI5.js.map
+//# sourceMappingURL=chunk-C4ELTNV7.js.map