@citolab/qti-components 7.0.5 → 7.0.6-beta.1

package/dist/chunks/chunk-4GNVYCBN.js

@@ -0,0 +1,627 @@
+import {
+  item_default
+} from "./chunk-J2SHENRN.js";
+import {
+  qtiTransformItem,
+  qtiTransformTest
+} from "./chunk-XDMSEAYC.js";
+import {
+  testContext,
+  testElement
+} from "./chunk-UFYWCLXF.js";
+import {
+  watch
+} from "./chunk-ELDMXTUQ.js";
+import {
+  __decorateClass
+} from "./chunk-H2JE6IVU.js";
+
+// src/lib/qti-test/core/components/test-container.ts
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+var TestContainer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.testURL = null;
+    this.testDoc = null;
+    this.testXML = null;
+    /** Template content if provided */
+    this.templateContent = null;
+  }
+  async handleTestURLChange() {
+    if (!this.testURL) return;
+    try {
+      const api = await qtiTransformTest().load(this.testURL);
+      this.testDoc = api.htmlDoc();
+    } catch (error) {
+      console.error("Error loading or parsing XML:", error);
+    }
+  }
+  handleTestXMLChange() {
+    if (!this.testXML) return;
+    try {
+      this.testDoc = qtiTransformTest().parse(this.testXML).htmlDoc();
+    } catch (error) {
+      console.error("Error parsing XML:", error);
+    }
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    this.initializeTemplateContent();
+    this.applyStyles();
+    if (this.testURL) {
+      this.handleTestURLChange();
+    }
+    if (this.testXML) {
+      this.handleTestXMLChange();
+    }
+  }
+  initializeTemplateContent() {
+    const template = this.querySelector("template");
+    this.templateContent = template ? template.content : html``;
+  }
+  applyStyles() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(item_default);
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+  render() {
+    return html`
+      ${this.templateContent}
+      <slot></slot>
+      ${until(this.testDoc, html`<span>Loading...</span>`)}
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, attribute: "test-url" })
+], TestContainer.prototype, "testURL", 2);
+__decorateClass([
+  state()
+], TestContainer.prototype, "testDoc", 2);
+__decorateClass([
+  state()
+], TestContainer.prototype, "testXML", 2);
+__decorateClass([
+  watch("testURL", { waitUntilFirstUpdate: true })
+], TestContainer.prototype, "handleTestURLChange", 1);
+__decorateClass([
+  watch("testXML", { waitUntilFirstUpdate: true })
+], TestContainer.prototype, "handleTestXMLChange", 1);
+TestContainer = __decorateClass([
+  customElement("test-container")
+], TestContainer);
+
+// src/lib/qti-test/core/qti-test.ts
+import { html as html2 } from "lit";
+import { customElement as customElement2 } from "lit/decorators.js";
+
+// src/lib/qti-test/core/mixins/test-loader.mixin.ts
+var TestLoaderMixin = (superClass) => {
+  class TestLoaderClass extends superClass {
+    // private testURL = '';
+    constructor(...args) {
+      super(...args);
+      this.addEventListener("qti-assessment-test-connected", () => {
+      });
+      this.addEventListener("qti-load-item-request", ({ detail }) => {
+        detail.promise = (async () => {
+          const api = await qtiTransformItem().load(
+            `${detail.href}`,
+            detail.cancelPreviousRequest
+          );
+          return api.htmlDoc();
+        })();
+      });
+      this.addEventListener("qti-interaction-changed", (_e) => {
+      });
+      this.addEventListener("qti-outcome-changed", () => {
+      });
+    }
+  }
+  return TestLoaderClass;
+};
+
+// src/lib/qti-test/core/mixins/test-navigation.mixin.ts
+var TestNavigationMixin = (superClass) => {
+  class TestNavigationClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.addEventListener("qti-request-test-item", ({ detail: navItemId }) => {
+        if (!navItemId) return;
+        this._clearLoadedItems();
+        const itemRefEl = this.testElement.el.querySelector(
+          `qti-assessment-item-ref[identifier="${navItemId}"]`
+        );
+        const promise = this._loadItemRequest(itemRefEl.href, false);
+        const navPartId = itemRefEl.closest("qti-test-part").identifier;
+        const navSectionId = itemRefEl.closest("qti-assessment-section").identifier;
+        this._testContext = { ...this._testContext, navPartId, navSectionId, navItemId, navItemLoading: true };
+        if (promise) {
+          promise.then((doc) => {
+            itemRefEl.xmlDoc = doc;
+            requestAnimationFrame(
+              () => this.dispatchEvent(new CustomEvent("qti-item-connected", { bubbles: true, composed: true }))
+            );
+            this._testContext = { ...this._testContext, navItemLoading: false };
+          }).catch((error) => console.error("Failed to load item:", error));
+        } else {
+          console.info("Load item request was not handled:", itemRefEl.href);
+        }
+      });
+      this.addEventListener("qti-assessment-test-connected", () => {
+        let navItemId = this._testContext.navItemId;
+        if (!navItemId) {
+          const itemRefEl = this.testElement.el.querySelector("qti-assessment-item-ref");
+          navItemId = itemRefEl.identifier;
+        }
+        this.dispatchEvent(
+          new CustomEvent("qti-request-test-item", { detail: navItemId, bubbles: true, composed: true })
+        );
+      });
+    }
+    _clearLoadedItems() {
+      const itemRefEls = this.testElement.el.querySelectorAll(`qti-assessment-test qti-assessment-item-ref`);
+      Array.from(itemRefEls).forEach((itemElement) => {
+        itemElement.xmlDoc = null;
+      });
+    }
+    _loadItemRequest(href, cancelPreviousRequest = true) {
+      const event = new CustomEvent("qti-load-item-request", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          href,
+          promise: null,
+          cancelPreviousRequest
+        }
+      });
+      this.dispatchEvent(event);
+      return event.detail.promise;
+    }
+  }
+  return TestNavigationClass;
+};
+
+// src/lib/qti-test/core/mixins/test-view.mixin.ts
+var TestViewMixin = (superClass) => {
+  class TestViewClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this._testContext = { ...this._testContext, view: "candidate" };
+      this.addEventListener("on-test-switch-view", (e) => {
+        this._testContext = { ...this._testContext, 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("_testContext")) {
+        this._updateElementView();
+      }
+    }
+    // Method to handle view updates for elements based on the current context view
+    _updateElementView() {
+      if (this.testElement && this.testElement.el) {
+        const viewElements = Array.from(this.testElement.el.querySelectorAll("[view]"));
+        viewElements.forEach((element) => {
+          element.classList.toggle("show", element.getAttribute("view") === this._testContext.view);
+        });
+        const assessmentItem = this.testElement.el.querySelector(
+          `qti-assessment-item[identifier="${this._testContext.navItemId}"]`
+        );
+        if (assessmentItem) {
+          assessmentItem.showCorrectResponse(this._testContext.view === "scorer");
+        }
+      }
+    }
+    // Event handler for connected QTI assessment items
+    _setCorrectResponseVisibility(assessmentItem) {
+      assessmentItem.showCorrectResponse(this._testContext.view === "scorer");
+    }
+  }
+  return TestViewClass;
+};
+
+// src/lib/qti-test/core/test-base.ts
+import { provide } from "@lit/context";
+import { LitElement as LitElement2 } from "lit";
+import { state as state2 } from "lit/decorators.js";
+var TestBase = class extends LitElement2 {
+  constructor() {
+    super();
+    this._testContext = { items: [], testOutcomeVariables: [] };
+    this.testElement = { el: null };
+    /**
+     * 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, variables } = assessmentItem;
+      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, variables);
+      } else {
+        assessmentItem.variables = [...itemContext.variables || []];
+      }
+    };
+    this.addEventListener("qti-assessment-test-connected", (e) => {
+      const qtiAssessmentTest = e.detail;
+      const items = Array.from(qtiAssessmentTest.querySelectorAll("qti-assessment-item-ref")).map(
+        (itemRef) => ({
+          href: itemRef.href,
+          identifier: itemRef.identifier,
+          category: itemRef.category,
+          variables: [{ identifier: "completionStatus", value: "not_attempted", type: "outcome" }]
+        })
+      );
+      this.testElement = { el: qtiAssessmentTest };
+      this._testContext = { ...this._testContext, items };
+    });
+    this.addEventListener("qti-assessment-item-connected", (e) => {
+      this._updateItemInTestContext(e.detail);
+    });
+    this.addEventListener("qti-outcome-changed", (e) => {
+      const assessmentitem = e.composedPath()[0];
+      this._updateItemVariablesInTestContext(assessmentitem.identifier, assessmentitem.variables);
+    });
+  }
+  get context() {
+    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 context(testContext2) {
+    if (testContext2 === null || testContext2 === void 0) return;
+    this._testContext = { ...testContext2 };
+    testContext2.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;
+          })
+        };
+      })
+    };
+  }
+  // private _addItemToTestContext(
+  //   e: CustomEvent<{ href: string; identifier: string; category: string }> & { target: QtiAssessmentItemRef }
+  // ): void {
+  //   const { href, identifier, category } = e.detail;
+  //   // Update test context items, adding a new item if the identifier is not already in the list
+  //   if (!this._testContext.items.some(item => item.identifier === identifier)) {
+  //     this._testContext.items.push({
+  //       href,
+  //       identifier,
+  //       category,
+  //       variables: [{ identifier: 'completionStatus', value: 'not_attempted', type: 'outcome' }]
+  //       // category: e.target.category
+  //     });
+  //   }
+  // }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("qti-test", "");
+  }
+};
+__decorateClass([
+  state2(),
+  provide({ context: testContext })
+], TestBase.prototype, "_testContext", 2);
+__decorateClass([
+  state2(),
+  provide({ context: testElement })
+], TestBase.prototype, "testElement", 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(TestProcessingMixin(TestNavigationMixin(TestViewMixin(TestBase)))) {
+  /**
+   * Renders the component's template.
+   * Provides a default `<slot>` for content projection.
+   */
+  render() {
+    return html2`<slot></slot>`;
+  }
+};
+QtiTest = __decorateClass([
+  customElement2("qti-test")
+], QtiTest);
+
+// src/lib/qti-test/core/qti-assessment-test/qti-assessment-item-ref.ts
+import { consume } from "@lit/context";
+import { html as html3, LitElement as LitElement3 } from "lit";
+import { property as property2 } from "lit/decorators.js";
+var stringToBooleanConverter = {
+  fromAttribute(value) {
+    return value === "true";
+  },
+  toAttribute(value) {
+    return value ? "true" : "false";
+  }
+};
+var QtiAssessmentItemRef = class extends LitElement3 {
+  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 html3`${this.xmlDoc}`;
+  }
+};
+__decorateClass([
+  property2({ type: String })
+], QtiAssessmentItemRef.prototype, "category", 2);
+__decorateClass([
+  property2({ type: String })
+], QtiAssessmentItemRef.prototype, "identifier", 2);
+__decorateClass([
+  property2({ type: Boolean, converter: stringToBooleanConverter })
+], QtiAssessmentItemRef.prototype, "required", 2);
+__decorateClass([
+  property2({ type: Boolean, converter: stringToBooleanConverter })
+], QtiAssessmentItemRef.prototype, "fixed", 2);
+__decorateClass([
+  property2({ type: String })
+], QtiAssessmentItemRef.prototype, "href", 2);
+__decorateClass([
+  consume({ context: testContext, subscribe: true })
+], QtiAssessmentItemRef.prototype, "_testContext", 2);
+__decorateClass([
+  property2({ 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 html4, LitElement as LitElement4 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+var stringToBooleanConverter2 = {
+  fromAttribute(value) {
+    return value === "true";
+  },
+  toAttribute(value) {
+    return value ? "true" : "false";
+  }
+};
+var QtiAssessmentSection = class extends LitElement4 {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new Event("qti-assessment-section-connected", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html4`<slot name="qti-rubric-block"></slot><slot></slot>`;
+  }
+};
+__decorateClass([
+  property3({ type: String })
+], QtiAssessmentSection.prototype, "identifier", 2);
+__decorateClass([
+  property3({ type: String })
+], QtiAssessmentSection.prototype, "required", 2);
+__decorateClass([
+  property3({ type: Boolean, converter: stringToBooleanConverter2 })
+], QtiAssessmentSection.prototype, "fixed", 2);
+__decorateClass([
+  property3({ type: String })
+], QtiAssessmentSection.prototype, "title", 2);
+__decorateClass([
+  property3({ type: Boolean, converter: stringToBooleanConverter2 })
+], QtiAssessmentSection.prototype, "visible", 2);
+__decorateClass([
+  property3({ 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 html5, LitElement as LitElement5 } from "lit";
+import { customElement as customElement3, property as property4 } from "lit/decorators.js";
+var QtiAssessmentTest = class extends LitElement5 {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new CustomEvent("qti-assessment-test-connected", {
+        detail: this,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html5` <slot></slot>`;
+  }
+};
+__decorateClass([
+  property4({ type: String })
+], QtiAssessmentTest.prototype, "identifier", 2);
+__decorateClass([
+  property4({ type: String })
+], QtiAssessmentTest.prototype, "title", 2);
+__decorateClass([
+  consume3({ context: testContext, subscribe: true })
+], QtiAssessmentTest.prototype, "_testContext", 2);
+QtiAssessmentTest = __decorateClass([
+  customElement3("qti-assessment-test")
+], QtiAssessmentTest);
+
+// src/lib/qti-test/core/qti-assessment-test/qti-test-part.ts
+import { html as html6, LitElement as LitElement6 } from "lit";
+import { customElement as customElement4, property as property5 } from "lit/decorators.js";
+var QtiTestPart = class extends LitElement6 {
+  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 html6` <slot></slot>`;
+  }
+};
+__decorateClass([
+  property5({ type: String })
+], QtiTestPart.prototype, "identifier", 2);
+__decorateClass([
+  property5({ type: String })
+], QtiTestPart.prototype, "title", 2);
+__decorateClass([
+  property5({ type: String })
+], QtiTestPart.prototype, "class", 2);
+__decorateClass([
+  property5({ type: String, attribute: "navigation-mode" })
+], QtiTestPart.prototype, "NavigationMode", 2);
+__decorateClass([
+  property5({ type: String, attribute: "submission-mode" })
+], QtiTestPart.prototype, "submissionMode", 2);
+QtiTestPart = __decorateClass([
+  customElement4("qti-test-part")
+], QtiTestPart);
+if (!customElements.get("qti-test-part")) {
+  customElements.define("qti-test-part", QtiTestPart);
+}
+
+export {
+  TestContainer,
+  QtiTest,
+  QtiAssessmentItemRef,
+  QtiAssessmentSection,
+  QtiAssessmentTest,
+  QtiTestPart
+};
+//# sourceMappingURL=chunk-4GNVYCBN.js.map