@citolab/qti-components 7.1.0 → 7.1.2

package/dist/chunks/chunk-RB227QQP.js

@@ -0,0 +1,659 @@
+import {
+  INITIAL_SESSION_CONTEXT,
+  sessionContext
+} from "./chunk-UZ4QB5IO.js";
+import {
+  INITIAL_TEST_CONTEXT,
+  testContext
+} from "./chunk-CJADUWEC.js";
+import {
+  QtiModalFeedback
+} from "./chunk-BLUHTHXX.js";
+import {
+  qtiTransformItem
+} from "./chunk-XDMSEAYC.js";
+import {
+  __decorateClass
+} from "./chunk-H2JE6IVU.js";
+
+// src/lib/qti-test/core/qti-test.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+// src/lib/qti-test/core/mixins/test-loader.mixin.ts
+import { property } from "lit/decorators.js";
+var setSessionData = (key, value) => sessionStorage.setItem(key, JSON.stringify(value));
+var getSessionData = (key) => sessionStorage.getItem(key) ? JSON.parse(sessionStorage.getItem(key)) : null;
+var TestLoaderMixin = (superClass) => {
+  class TestLoaderClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.autoStoreRestoreContext = null;
+      this.navItemId = null;
+      this.addEventListener("qti-load-item-request", ({ detail }) => {
+        detail.promise = (async () => {
+          const api = await qtiTransformItem().load(`${detail.href}`, detail.cancelPreviousRequest);
+          return api.htmlDoc();
+        })();
+      });
+    }
+    async connectedCallback() {
+      super.connectedCallback();
+      if (this.navItemId) {
+        this.sessionContext = { ...this.sessionContext, navItemId: this.navItemId };
+      }
+      if (this.autoStoreRestoreContext) {
+        const testContext2 = getSessionData(this.autoStoreRestoreContext);
+        if (testContext2) {
+          this.testContext = testContext2;
+        }
+      }
+    }
+    willUpdate(changedProperties) {
+      if (changedProperties.has("navItemId")) {
+        this.sessionContext = { ...this.sessionContext, navItemId: this.navItemId };
+      }
+      if (changedProperties.has("testContext")) {
+        if (this.autoStoreRestoreContext) {
+          setSessionData(this.autoStoreRestoreContext, this.testContext);
+        }
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: String, attribute: "auto-store-restore" })
+  ], TestLoaderClass.prototype, "autoStoreRestoreContext", 2);
+  __decorateClass([
+    property({ type: String, attribute: "nav-item-id" })
+  ], TestLoaderClass.prototype, "navItemId", 2);
+  return TestLoaderClass;
+};
+
+// src/lib/qti-test/core/mixins/test-navigation.mixin.ts
+import { property as property2 } from "lit/decorators.js";
+var TestNavigationMixin = (superClass) => {
+  class TestNavigationClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.navigate = "item";
+      this.addEventListener(
+        "qti-request-navigation",
+        async ({ detail }) => {
+          if (!detail?.id) return;
+          if (detail.type === "item") {
+            await this._loadItems([detail.id]);
+            const navItemId = detail.id;
+            const itemRefEl = this._testElement?.querySelector(
+              `qti-assessment-item-ref[identifier="${detail.id}"]`
+            );
+            const navPartId = itemRefEl.closest("qti-test-part")?.identifier;
+            const navSectionId = itemRefEl.closest("qti-assessment-section")?.identifier;
+            this.sessionContext = { ...this.sessionContext, navPartId, navSectionId, navItemId, navItemLoading: false };
+          } else if (detail.type === "section") {
+            const itemIds = this._getSectionItemIds(detail.id);
+            await this._loadItems(itemIds);
+            const navSectionId = detail.id;
+            const sectionRefEl = this._testElement?.querySelector(
+              `qti-assessment-section[identifier="${navSectionId}"]`
+            );
+            const navPartId = sectionRefEl.closest("qti-test-part")?.identifier;
+            this.sessionContext = {
+              ...this.sessionContext,
+              navPartId,
+              navSectionId,
+              navItemId: null,
+              navItemLoading: false
+            };
+          }
+        }
+      );
+      this.addEventListener("qti-assessment-test-connected", (e) => {
+        this._testElement = e.detail;
+        let id;
+        if (this.navigate === "section") {
+          id = this._testElement.querySelector("qti-assessment-section")?.identifier;
+        } else {
+          id = this.sessionContext.navItemId ?? this._testElement.querySelector("qti-assessment-item-ref")?.identifier;
+        }
+        if (id) {
+          this.dispatchEvent(
+            new CustomEvent("qti-request-navigation", {
+              detail: { type: this.navigate === "section" ? "section" : "item", id },
+              bubbles: true,
+              composed: true
+            })
+          );
+        }
+      });
+    }
+    async _loadItems(itemIds) {
+      let results;
+      if (!this._testElement || itemIds.length === 0) return;
+      const itemRefEls = itemIds.map(
+        (id) => this._testElement.querySelector(`qti-assessment-item-ref[identifier="${id}"]`)
+      );
+      if (itemRefEls.includes(null)) {
+        console.warn(`One or more items not found: ${itemIds}`);
+        return;
+      }
+      this._clearLoadedItems();
+      this.sessionContext = { ...this.sessionContext, navItemLoading: true };
+      const itemLoadPromises = itemRefEls.map(async (itemRef) => {
+        if (!itemRef) return null;
+        return { itemRef, doc: await this._loadItemRequest(itemRef.href) };
+      });
+      try {
+        results = await Promise.all(itemLoadPromises);
+        results.forEach(({ itemRef, doc }) => {
+          if (itemRef && doc) itemRef.xmlDoc = doc;
+        });
+        requestAnimationFrame(() => {
+          this.dispatchEvent(
+            new CustomEvent("qti-test-connected", {
+              detail: results.map(({ itemRef }) => ({ identifier: itemRef?.identifier, element: itemRef })),
+              bubbles: true,
+              composed: true
+            })
+          );
+        });
+      } catch (error) {
+        console.error("Error loading items:", error);
+      }
+      return results;
+    }
+    _getSectionItemIds(navSectionId) {
+      const sectionRefEl = this._testElement?.querySelector(
+        `qti-assessment-section[identifier="${navSectionId}"]`
+      );
+      if (!sectionRefEl) {
+        console.warn(`Section with identifier "${navSectionId}" not found.`);
+        return [];
+      }
+      return Array.from(
+        this._testElement.querySelectorAll(
+          `qti-assessment-section[identifier="${navSectionId}"] > qti-assessment-item-ref`
+        )
+      ).map((itemRef) => itemRef.identifier);
+    }
+    _clearLoadedItems() {
+      const itemRefEls = this._testElement?.querySelectorAll(
+        `qti-assessment-test qti-assessment-item-ref`
+      );
+      Array.from(itemRefEls || []).forEach((itemElement) => {
+        itemElement.xmlDoc = null;
+      });
+    }
+    _loadItemRequest(href) {
+      const event = new CustomEvent("qti-load-item-request", {
+        bubbles: true,
+        composed: true,
+        detail: { href, promise: null }
+      });
+      this.dispatchEvent(event);
+      return event.detail.promise;
+    }
+  }
+  __decorateClass([
+    property2({ type: String })
+  ], TestNavigationClass.prototype, "navigate", 2);
+  return TestNavigationClass;
+};
+
+// src/lib/qti-test/core/mixins/test-view.mixin.ts
+var TestViewMixin = (superClass) => {
+  class TestViewClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.sessionContext = { ...this.sessionContext, view: "candidate" };
+      this.addEventListener("on-test-switch-view", (e) => {
+        this.sessionContext = { ...this.sessionContext, view: e.detail };
+        this._updateElementView();
+      });
+      this.addEventListener("qti-assessment-test-connected", () => {
+        this._updateElementView();
+      });
+      this.addEventListener("qti-assessment-item-connected", (e) => {
+        this._updateElementView();
+        this._setCorrectResponseVisibility(e.detail);
+      });
+    }
+    willUpdate(changedProperties) {
+      super.willUpdate(changedProperties);
+      if (changedProperties.has("sessionContext")) {
+        this._updateElementView();
+      }
+    }
+    // Method to handle view updates for elements based on the current context view
+    _updateElementView() {
+      if (this.testElement && this.testElement) {
+        const viewElements = Array.from(this.testElement.querySelectorAll("[view]"));
+        viewElements.forEach((element) => {
+          element.classList.toggle("show", element.getAttribute("view") === this.sessionContext.view);
+        });
+        const assessmentItem = this.testElement.querySelector(
+          `qti-assessment-item[identifier="${this.sessionContext.navItemId}"]`
+        );
+        if (assessmentItem) {
+          assessmentItem.showCorrectResponse(this.sessionContext.view === "scorer");
+        }
+      }
+    }
+    // Event handler for connected QTI assessment items
+    _setCorrectResponseVisibility(assessmentItem) {
+      assessmentItem.showCorrectResponse(this.sessionContext.view === "scorer");
+    }
+  }
+  return TestViewClass;
+};
+
+// src/lib/qti-test/core/test-base.ts
+import { provide } from "@lit/context";
+import { LitElement } from "lit";
+import { state } from "lit/decorators.js";
+var TestBase = class extends LitElement {
+  constructor() {
+    super();
+    this.testContext = INITIAL_TEST_CONTEXT;
+    this.sessionContext = INITIAL_SESSION_CONTEXT;
+    /**
+     * Updates the variables of an assessment item in the test context.
+     * - Matches the assessment item with the corresponding test context item.
+     * - If the item is not found, logs a warning.
+     * - Updates variables in the test context if exactly one variable exists.
+     * - Otherwise, syncs the assessment item's variables with the test context.
+     *
+     * @param assessmentItem - The assessment item to update.
+     */
+    this._updateItemInTestContext = (assessmentItem) => {
+      const { identifier } = assessmentItem;
+      const fullVariables = assessmentItem._context.variables;
+      const itemContext = this.testContext.items.find((i) => i?.identifier === identifier);
+      if (!itemContext) {
+        console.warn(`Item IDs between assessment.xml and item.xml should match: ${identifier} is not found!`);
+        return;
+      }
+      if (itemContext.variables?.length === 1) {
+        this._updateItemVariablesInTestContext(identifier, fullVariables);
+      } else {
+        assessmentItem.variables = [...itemContext.variables || []];
+      }
+    };
+    this.addEventListener("qti-assessment-test-connected", (e) => {
+      if (this.testContext && this.testContext.items.length > 0) return;
+      this.testElement = e.detail;
+      const items = Array.from(this.testElement.querySelectorAll("qti-assessment-item-ref")).map((itemRef) => {
+        return {
+          href: itemRef.href,
+          identifier: itemRef.identifier,
+          category: itemRef.category,
+          variables: [
+            {
+              identifier: "completionStatus",
+              value: "not_attempted",
+              type: "outcome"
+            }
+          ]
+        };
+      });
+      this.testContext = { ...this.testContext, items };
+    });
+    this.addEventListener("qti-assessment-item-connected", (e) => {
+      this._updateItemInTestContext(e.detail);
+    });
+    this.addEventListener("qti-item-context-updated", (e) => {
+      this._updateItemVariablesInTestContext(e.detail.itemContext.identifier, e.detail.itemContext.variables);
+    });
+  }
+  // get testContext(): TestContext {
+  //   return this._testContext;
+  // }
+  // // /* restores the context by updating existing items and adding new items from the "contextToRestore" parameter into the "this._context.items" array. */
+  // set testContext(testContext: TestContext) {
+  //   if (this._testContext.items.length > 0) {
+  //     console.warn(
+  //       'testContext already set and can not be overwritten. Set the testContext before loading the assessment test'
+  //     );
+  //     return;
+  //   }
+  //   if (testContext === null || testContext === undefined) return;
+  //   this._testContext = { ...testContext }; // Clone the context to avoid modifying the original object
+  //   // // append the items that are not yet in the context and replace the ones that are
+  //   testContext.items?.forEach(itemContext => {
+  //     const existingItemContext = this._testContext.items.find(i => i.identifier === itemContext.identifier);
+  //     if (existingItemContext) {
+  //       existingItemContext.variables = itemContext.variables;
+  //     } else {
+  //       this._testContext.items.push(itemContext);
+  //     }
+  //   });
+  // }
+  _updateItemVariablesInTestContext(identifier, variables) {
+    this.testContext = {
+      ...this.testContext,
+      // Spread existing test context properties
+      items: this.testContext.items.map((itemContext) => {
+        if (itemContext.identifier !== identifier) {
+          return itemContext;
+        }
+        return {
+          ...itemContext,
+          // Keep other properties of the item context
+          variables: variables.map((variable) => {
+            const matchingVariable = itemContext.variables.find((v) => v.identifier === variable.identifier);
+            return matchingVariable ? { ...matchingVariable, ...variable } : variable;
+          })
+        };
+      })
+    };
+  }
+};
+__decorateClass([
+  state(),
+  provide({ context: testContext })
+], TestBase.prototype, "testContext", 2);
+__decorateClass([
+  state(),
+  provide({ context: sessionContext })
+], TestBase.prototype, "sessionContext", 2);
+
+// src/lib/qti-test/core/mixins/test-processing.mixin.ts
+var TestProcessingMixin = (superClass) => {
+  class TestProcessingElement extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.addEventListener("qti-register-variable", (e) => {
+        this.testContext = {
+          ...this.testContext,
+          testOutcomeVariables: [...this.testContext.testOutcomeVariables || [], e.detail.variable]
+        };
+        e.stopPropagation();
+      });
+      this.addEventListener(
+        "qti-set-outcome-value",
+        (e) => {
+          const { outcomeIdentifier, value } = e.detail;
+          this.updateOutcomeVariable(outcomeIdentifier, value);
+          e.stopPropagation();
+        }
+      );
+    }
+    outcomeProcessing() {
+      const outcomeProcessor = this.querySelector("qti-outcome-processing");
+      if (!outcomeProcessor) return false;
+      outcomeProcessor?.process();
+      return true;
+    }
+    /* --------------------------- ENABLED WHEN UNIT TESTING OUTCOME PROCESSING ------------------------------------ */
+    updateOutcomeVariable(identifier, value) {
+      const outcomeVariable = this.getOutcome(identifier);
+      if (!outcomeVariable) {
+        console.warn(`Can not set qti-outcome-identifier: ${identifier}, it is not available`);
+        return;
+      }
+      this.testContext = {
+        ...this.testContext,
+        testOutcomeVariables: this.testContext.testOutcomeVariables?.map((v) => {
+          if (v.identifier !== identifier) {
+            return v;
+          }
+          return {
+            ...v,
+            value: outcomeVariable.cardinality === "single" ? value : [...v.value, value]
+          };
+        })
+      };
+    }
+    getOutcome(identifier) {
+      return this.getVariable(identifier);
+    }
+    getVariable(identifier) {
+      return this.testContext.testOutcomeVariables?.find((v) => v.identifier === identifier) || null;
+    }
+    /* --------------------------- ENABLED WHEN UNIT TESTING OUTCOME PROCESSING ------------------------------------ */
+  }
+  return TestProcessingElement;
+};
+
+// src/lib/qti-test/core/qti-test.ts
+var QtiTest = class extends TestLoaderMixin(TestNavigationMixin(TestViewMixin(TestProcessingMixin(TestBase)))) {
+  // export class QtiTest extends TestLoaderMixin(TestNavigationMixin(TestViewMixin(TestBase))) {
+  /**
+   * Renders the component's template.
+   * Provides a default `<slot>` for content projection.
+   */
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(new CustomEvent("qti-test-connected", { detail: this }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+QtiTest = __decorateClass([
+  customElement("qti-test")
+], QtiTest);
+
+// src/lib/qti-test/core/qti-assessment-test/qti-assessment-item-ref.ts
+import { consume } from "@lit/context";
+import { html as html2, LitElement as LitElement2 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+var stringToBooleanConverter = {
+  fromAttribute(value) {
+    return value === "true";
+  },
+  toAttribute(value) {
+    return value ? "true" : "false";
+  }
+};
+var QtiAssessmentItemRef = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.weigths = /* @__PURE__ */ new Map();
+  }
+  // the XMLDocument
+  createRenderRoot() {
+    return this;
+  }
+  get assessmentItem() {
+    return this.renderRoot?.querySelector("qti-assessment-item");
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new CustomEvent("qti-assessment-item-ref-connected", {
+        bubbles: true,
+        composed: true,
+        detail: { identifier: this.identifier, href: this.href, category: this.category }
+      })
+    );
+  }
+  render() {
+    return html2`${this.xmlDoc}`;
+  }
+};
+__decorateClass([
+  property3({ type: String })
+], QtiAssessmentItemRef.prototype, "category", 2);
+__decorateClass([
+  property3({ type: String })
+], QtiAssessmentItemRef.prototype, "identifier", 2);
+__decorateClass([
+  property3({ type: Boolean, converter: stringToBooleanConverter })
+], QtiAssessmentItemRef.prototype, "required", 2);
+__decorateClass([
+  property3({ type: Boolean, converter: stringToBooleanConverter })
+], QtiAssessmentItemRef.prototype, "fixed", 2);
+__decorateClass([
+  property3({ type: String })
+], QtiAssessmentItemRef.prototype, "href", 2);
+__decorateClass([
+  consume({ context: testContext, subscribe: true })
+], QtiAssessmentItemRef.prototype, "_testContext", 2);
+__decorateClass([
+  property3({ type: Object, attribute: false })
+], QtiAssessmentItemRef.prototype, "xmlDoc", 2);
+if (!customElements.get("qti-assessment-item-ref")) {
+  customElements.define("qti-assessment-item-ref", QtiAssessmentItemRef);
+}
+
+// src/lib/qti-test/core/qti-assessment-test/qti-assessment-section.ts
+import { consume as consume2 } from "@lit/context";
+import { html as html3, LitElement as LitElement3 } from "lit";
+import { property as property4 } from "lit/decorators.js";
+var stringToBooleanConverter2 = {
+  fromAttribute(value) {
+    return value === "true";
+  },
+  toAttribute(value) {
+    return value ? "true" : "false";
+  }
+};
+var QtiAssessmentSection = class extends LitElement3 {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new Event("qti-assessment-section-connected", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html3`<slot name="qti-rubric-block"></slot><slot></slot>`;
+  }
+};
+__decorateClass([
+  property4({ type: String })
+], QtiAssessmentSection.prototype, "identifier", 2);
+__decorateClass([
+  property4({ type: String })
+], QtiAssessmentSection.prototype, "required", 2);
+__decorateClass([
+  property4({ type: Boolean, converter: stringToBooleanConverter2 })
+], QtiAssessmentSection.prototype, "fixed", 2);
+__decorateClass([
+  property4({ type: String })
+], QtiAssessmentSection.prototype, "title", 2);
+__decorateClass([
+  property4({ type: Boolean, converter: stringToBooleanConverter2 })
+], QtiAssessmentSection.prototype, "visible", 2);
+__decorateClass([
+  property4({ type: Boolean, converter: stringToBooleanConverter2, attribute: "keep-together" })
+], QtiAssessmentSection.prototype, "keepTogether", 2);
+__decorateClass([
+  consume2({ context: testContext, subscribe: true })
+], QtiAssessmentSection.prototype, "_testContext", 2);
+if (!customElements.get("qti-assessment-section")) {
+  customElements.define("qti-assessment-section", QtiAssessmentSection);
+}
+
+// src/lib/qti-test/core/qti-assessment-test/qti-assessment-test.ts
+import { consume as consume3 } from "@lit/context";
+import { html as html4, LitElement as LitElement4 } from "lit";
+import { customElement as customElement2, property as property5 } from "lit/decorators.js";
+var QtiAssessmentTest = class extends LitElement4 {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new CustomEvent("qti-assessment-test-connected", {
+        detail: this,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html4` <slot></slot>`;
+  }
+};
+__decorateClass([
+  property5({ type: String })
+], QtiAssessmentTest.prototype, "identifier", 2);
+__decorateClass([
+  property5({ type: String })
+], QtiAssessmentTest.prototype, "title", 2);
+__decorateClass([
+  consume3({ context: testContext, subscribe: true })
+], QtiAssessmentTest.prototype, "_testContext", 2);
+QtiAssessmentTest = __decorateClass([
+  customElement2("qti-assessment-test")
+], QtiAssessmentTest);
+
+// src/lib/qti-test/core/qti-assessment-test/qti-test-part.ts
+import { html as html5, LitElement as LitElement5 } from "lit";
+import { customElement as customElement3, property as property6 } from "lit/decorators.js";
+var QtiTestPart = class extends LitElement5 {
+  constructor() {
+    super(...arguments);
+    this.identifier = "";
+    this.title = "";
+    this.class = "";
+    this.NavigationMode = "nonlinear";
+    this.submissionMode = "individual";
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new Event("qti-test-part-connected", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html5` <slot></slot>`;
+  }
+};
+__decorateClass([
+  property6({ type: String })
+], QtiTestPart.prototype, "identifier", 2);
+__decorateClass([
+  property6({ type: String })
+], QtiTestPart.prototype, "title", 2);
+__decorateClass([
+  property6({ type: String })
+], QtiTestPart.prototype, "class", 2);
+__decorateClass([
+  property6({ type: String, attribute: "navigation-mode" })
+], QtiTestPart.prototype, "NavigationMode", 2);
+__decorateClass([
+  property6({ type: String, attribute: "submission-mode" })
+], QtiTestPart.prototype, "submissionMode", 2);
+QtiTestPart = __decorateClass([
+  customElement3("qti-test-part")
+], QtiTestPart);
+if (!customElements.get("qti-test-part")) {
+  customElements.define("qti-test-part", QtiTestPart);
+}
+
+// src/lib/qti-test/core/qti-assessment-test/qti-test-feedback.ts
+import { customElement as customElement4 } from "lit/decorators.js";
+import { css, html as html6 } from "lit";
+var QtiTestFeedback = class extends QtiModalFeedback {
+  render() {
+    return html6``;
+  }
+};
+QtiTestFeedback.styles = css`
+    :host {
+      color: gray;
+    }
+  `;
+QtiTestFeedback = __decorateClass([
+  customElement4("qti-test-feedback")
+], QtiTestFeedback);
+
+export {
+  QtiTest,
+  QtiAssessmentItemRef,
+  QtiAssessmentSection,
+  QtiAssessmentTest,
+  QtiTestPart,
+  QtiTestFeedback
+};
+//# sourceMappingURL=chunk-RB227QQP.js.map