@citolab/qti-components 7.3.22 → 7.4.0

package/dist/chunks/chunk-6K4ROGDD.js

@@ -0,0 +1,364 @@
+import {
+  item_default
+} from "./chunk-LSEB52SP.js";
+import {
+  configContext,
+  watch
+} from "./chunk-O5N4DCU6.js";
+import {
+  __decorateClass,
+  qtiTransformItem
+} from "./chunk-JDY5GL7E.js";
+
+// src/lib/qti-item/components/item-container.ts
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+var ItemContainer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.itemURL = null;
+    this.itemDoc = null;
+    this.itemXML = null;
+    /** Template content if provided */
+    this.templateContent = null;
+  }
+  async handleItemURLChange() {
+    if (!this.itemURL) return;
+    try {
+      const { promise: api } = await qtiTransformItem().load(this.itemURL);
+      this.itemDoc = (await api).htmlDoc();
+    } catch (error) {
+      console.error("Error loading or parsing XML:", error);
+    }
+  }
+  handleItemXMLChange() {
+    if (!this.itemXML) return;
+    try {
+      this.itemDoc = qtiTransformItem().parse(this.itemXML).htmlDoc();
+    } catch (error) {
+      console.error("Error parsing XML:", error);
+    }
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    this.initializeTemplateContent();
+    this.applyStyles();
+    if (this.itemURL) {
+      this.handleItemURLChange();
+    }
+    if (this.itemXML) {
+      this.handleItemXMLChange();
+    }
+  }
+  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.itemDoc, html`<span>Loading...</span>`)}
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, attribute: "item-url" })
+], ItemContainer.prototype, "itemURL", 2);
+__decorateClass([
+  state()
+], ItemContainer.prototype, "itemDoc", 2);
+__decorateClass([
+  state()
+], ItemContainer.prototype, "itemXML", 2);
+__decorateClass([
+  watch("itemURL", { waitUntilFirstUpdate: true })
+], ItemContainer.prototype, "handleItemURLChange", 1);
+__decorateClass([
+  watch("itemXML", { waitUntilFirstUpdate: true })
+], ItemContainer.prototype, "handleItemXMLChange", 1);
+ItemContainer = __decorateClass([
+  customElement("item-container")
+], ItemContainer);
+
+// src/lib/qti-item/components/print-item-variables.ts
+import { consume } from "@lit/context";
+import { css, html as html2, LitElement as LitElement2 } from "lit";
+import { customElement as customElement2 } from "lit/decorators.js";
+
+// src/lib/exports/computed-item.context.ts
+import { createContext } from "@lit/context";
+var computedItemContext = createContext(Symbol("computedItemContext"));
+
+// src/lib/qti-item/components/print-item-variables.ts
+var PrintItemVariables = class extends LitElement2 {
+  render() {
+    const activeItem = this.computedContext;
+    if (!activeItem || !activeItem.variables) return html2``;
+    const responseVariables = activeItem.variables.filter((v) => v.type === "response");
+    const outcomeVariables = activeItem.variables.filter((v) => v.type === "outcome");
+    const renderTable = (variables, title) => html2`
+      <h3>${title}</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Identifier</th>
+            <th>Value</th>
+            <th>Cardinality</th>
+            <th>Base Type</th>
+            <th>Correct Response / Mappings</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${variables.map((v) => {
+      const correctResponse = v.correctResponse ? Array.isArray(v.correctResponse) ? v.correctResponse.join(", ") : v.correctResponse : "";
+      const mapEntries = v.mapping?.mapEntries?.map((m) => `${m.mapKey}=${m.mappedValue}pt`).join(", ") || "";
+      const areaMapEntries = v.areaMapping?.areaMapEntries?.map((m) => `${m.shape}(${m.coords})=${m.mappedValue}pt`).join(", ") || "";
+      return html2`
+              <tr>
+                <td>${v.identifier}</td>
+                <td>${Array.isArray(v.value) ? v.value.join(", ") : v.value}</td>
+                <td>${v.cardinality}</td>
+                <td>${v.baseType}</td>
+                <td>${correctResponse || mapEntries || areaMapEntries}</td>
+              </tr>
+            `;
+    })}
+        </tbody>
+      </table>
+    `;
+    return html2`
+      ${renderTable(responseVariables, "Response Variables")} ${renderTable(outcomeVariables, "Outcome Variables")}
+    `;
+  }
+};
+PrintItemVariables.styles = css`
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 20px 0;
+      font-size: 14px;
+      text-align: left;
+    }
+    th,
+    td {
+      border: 1px solid #ddd;
+      padding: 8px;
+    }
+    th {
+      background-color: #f4f4f4;
+      font-weight: bold;
+    }
+    h3 {
+      margin-top: 20px;
+      font-size: 16px;
+    }
+  `;
+__decorateClass([
+  consume({ context: computedItemContext, subscribe: true })
+], PrintItemVariables.prototype, "computedContext", 2);
+PrintItemVariables = __decorateClass([
+  customElement2("print-item-variables")
+], PrintItemVariables);
+
+// src/lib/qti-item/components/item-show-correct-response.ts
+import { css as css3, html as html3, LitElement as LitElement3 } from "lit";
+import { customElement as customElement3, property as property2 } from "lit/decorators.js";
+import { consume as consume2 } from "@lit/context";
+
+// src/lib/qti-item/components/styles.ts
+import { css as css2 } from "lit";
+var form = css2`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  user-select: none;
+`;
+var btn = css2`
+  background-color: lightgray;
+  ${form};
+`;
+var dis = css2`
+  cursor: not-allowed;
+  opacity: 0.8;
+`;
+var ind = css2`
+  ${form};
+  border: 1px solid gray;
+`;
+
+// src/lib/qti-item/components/item-show-correct-response.ts
+var ItemShowCorrectResponse = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.shown = false;
+    this.disabled = false;
+    this.showCorrectText = "Show correct response";
+    this.hideCorrectText = "Hide correct response";
+    this.noCorrectResponseText = "No correct response specified";
+    this._hasCorrectResponse = false;
+    // correct response is removed on certain point
+    this._previousActiveItem = "";
+  }
+  // Store previous active item reference
+  updated() {
+    if (!this._hasCorrectResponse || this._previousActiveItem !== this.computedContext?.identifier) {
+      this._previousActiveItem = this.computedContext?.identifier;
+      const containsCorrectResponse = !!this.computedContext?.variables.some((v) => v["correctResponse"]);
+      const containsMapping = !!this.computedContext?.variables.some((v) => {
+        return v["mapping"]?.mapEntries?.length > 0 || v["areaMapping"]?.areaMapEntries?.length > 0;
+      });
+      this._hasCorrectResponse = containsCorrectResponse || containsMapping;
+    }
+    this.disabled = !this._hasCorrectResponse;
+  }
+  _toggleState() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent("item-show-correct-response", {
+        detail: !this.shown,
+        bubbles: true
+      })
+    );
+  }
+  _getDisplayedText() {
+    return this.disabled ? this.noCorrectResponseText : this.shown ? this.hideCorrectText : this.showCorrectText;
+  }
+  render() {
+    return html3` <div @click="${this._toggleState}">${this._getDisplayedText()}</div> `;
+  }
+};
+ItemShowCorrectResponse.styles = css3`
+    :host {
+      ${btn};
+    }
+    :host([disabled]) {
+      ${dis};
+    }
+  `;
+__decorateClass([
+  consume2({ context: computedItemContext, subscribe: true })
+], ItemShowCorrectResponse.prototype, "computedContext", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], ItemShowCorrectResponse.prototype, "shown", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], ItemShowCorrectResponse.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: String })
+], ItemShowCorrectResponse.prototype, "showCorrectText", 2);
+__decorateClass([
+  property2({ type: String })
+], ItemShowCorrectResponse.prototype, "hideCorrectText", 2);
+__decorateClass([
+  property2({ type: String })
+], ItemShowCorrectResponse.prototype, "noCorrectResponseText", 2);
+ItemShowCorrectResponse = __decorateClass([
+  customElement3("item-show-correct-response")
+], ItemShowCorrectResponse);
+
+// src/lib/qti-item/core/qti-item.ts
+import { provide } from "@lit/context";
+import { html as html4, LitElement as LitElement4 } from "lit";
+import { customElement as customElement4, state as state2 } from "lit/decorators.js";
+var QtiItem = class extends LitElement4 {
+  constructor() {
+    super();
+    this.configContext = {};
+    // Store event handlers as instance properties
+    this._onItemContextChanged = this._handleItemContextChanged.bind(this);
+    this._onAssessmentItemConnected = this._handleAssessmentItemConnected.bind(this);
+    this._onHandleShowCorrectResponse = this._handleShowCorrectResponse.bind(this);
+    this._onHandleShowCandidateCorrection = this._handleShowCandidateCorrection.bind(this);
+    this._onHandleSwitchCorrectResponseMode = this._handleSwitchCorrectResponseMode.bind(this);
+    this.addEventListener("qti-item-context-updated", this._onItemContextChanged);
+    this.addEventListener("qti-assessment-item-connected", this._onAssessmentItemConnected);
+    this.addEventListener("item-show-correct-response", this._onHandleShowCorrectResponse);
+    this.addEventListener("item-show-candidate-correction", this._onHandleShowCandidateCorrection);
+    this.addEventListener("item-switch-correct-response-mode", this._onHandleSwitchCorrectResponseMode);
+  }
+  _handleItemContextChanged(e) {
+    this._updateItemVariablesInTestContext(e.detail.itemContext.identifier, e.detail?.itemContext?.variables || []);
+  }
+  _handleAssessmentItemConnected(e) {
+    const fullVariables = e.detail._context.variables;
+    this._qtiAssessmentItem = e.detail;
+    this.computedContext = this.computedContext?.identifier === this._qtiAssessmentItem.identifier ? { ...this.computedContext, title: this._qtiAssessmentItem.title } : {
+      identifier: this._qtiAssessmentItem.identifier,
+      title: this._qtiAssessmentItem.title,
+      adaptive: this._qtiAssessmentItem.getAttribute("adaptive")?.toLowerCase() === "true" || false,
+      variables: fullVariables,
+      correctResponseMode: "internal"
+    };
+    this._updateItemVariablesInTestContext(this._qtiAssessmentItem.identifier, fullVariables || []);
+  }
+  _handleShowCorrectResponse(e) {
+    if (this._qtiAssessmentItem) {
+      this._qtiAssessmentItem.showCorrectResponse(e.detail);
+    }
+  }
+  _handleShowCandidateCorrection(e) {
+    if (this._qtiAssessmentItem) {
+      this._qtiAssessmentItem.showCandidateCorrection(e.detail);
+    }
+  }
+  _handleSwitchCorrectResponseMode(e) {
+    this._handleShowCorrectResponse(new CustomEvent("item-show-correct-response", { detail: false, bubbles: true }));
+    this.configContext = {
+      ...this.configContext,
+      correctResponseMode: e.detail
+    };
+  }
+  _updateItemVariablesInTestContext(identifier, variables) {
+    const rawscore = variables?.find((vr) => vr.identifier == "SCORE")?.value;
+    const score = parseFloat(rawscore?.toString());
+    const completionStatus = variables?.find((v) => v.identifier === "completionStatus")?.value;
+    const correct = score !== void 0 && !isNaN(score) && score > 0;
+    const incorrect = score !== void 0 && !isNaN(score) && score <= 0;
+    const completed = completionStatus === "completed";
+    this.computedContext = {
+      ...this.computedContext,
+      identifier,
+      correct,
+      incorrect,
+      completed,
+      variables
+    };
+  }
+  render() {
+    return html4`<slot></slot>`;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("qti-item-context-changed", this._onItemContextChanged);
+    this.removeEventListener("qti-assessment-item-connected", this._onAssessmentItemConnected);
+  }
+};
+__decorateClass([
+  state2(),
+  provide({ context: computedItemContext })
+], QtiItem.prototype, "computedContext", 2);
+__decorateClass([
+  state2(),
+  provide({ context: configContext })
+], QtiItem.prototype, "configContext", 2);
+QtiItem = __decorateClass([
+  customElement4("qti-item")
+], QtiItem);
+
+export {
+  ItemContainer,
+  PrintItemVariables,
+  ItemShowCorrectResponse,
+  QtiItem
+};
+//# sourceMappingURL=chunk-6K4ROGDD.js.map

package/dist/chunks/chunk-6K4ROGDD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/qti-item/components/item-container.ts","../../src/lib/qti-item/components/print-item-variables.ts","../../src/lib/exports/computed-item.context.ts","../../src/lib/qti-item/components/item-show-correct-response.ts","../../src/lib/qti-item/components/styles.ts","../../src/lib/qti-item/core/qti-item.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { until } from 'lit/directives/until.js';\n\nimport { watch } from '../../decorators/watch';\nimport itemCss from '../../../item.css?inline';\nimport { qtiTransformItem } from '../../qti-transformers';\n\n/**\n * `<item-container>` is a custom element designed for hosting the qti-assessment-item.\n * The `qti-assessment-item` will be placed inside the shadow DOM of this element.\n * The element loads the item from the provided URL and renders it inside the shadow DOM.\n *\n * ### Styling\n * Add a class to the element for styling.\n *\n * ```html\n * <qti-item>\n *   <item-container class=\"m-4 bg-white\" item-url=\"./path/to/item.xml\"></item-container>\n * </qti-item>\n * ```\n */\n@customElement('item-container')\nexport class ItemContainer extends LitElement {\n  /** URL of the item to load */\n  @property({ type: String, attribute: 'item-url' })\n  itemURL: string = null;\n\n  /** A parsed HTML document */\n  @state()\n  itemDoc: DocumentFragment = null;\n\n  /** The raw XML string */\n  @state()\n  itemXML: string = null;\n\n  /** Template content if provided */\n  private templateContent = null;\n\n  @watch('itemURL', { waitUntilFirstUpdate: true })\n  protected async handleItemURLChange() {\n    if (!this.itemURL) return;\n    try {\n      const { promise: api } = await qtiTransformItem().load(this.itemURL);\n      this.itemDoc = (await api).htmlDoc();\n    } catch (error) {\n      console.error('Error loading or parsing XML:', error);\n    }\n  }\n\n  @watch('itemXML', { waitUntilFirstUpdate: true })\n  protected handleItemXMLChange() {\n    if (!this.itemXML) return;\n    try {\n      this.itemDoc = qtiTransformItem().parse(this.itemXML).htmlDoc();\n    } catch (error) {\n      console.error('Error parsing XML:', error);\n    }\n  }\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n    this.initializeTemplateContent();\n    this.applyStyles();\n    if (this.itemURL) {\n      this.handleItemURLChange();\n    }\n    if (this.itemXML) {\n      this.handleItemXMLChange();\n    }\n  }\n\n  private initializeTemplateContent() {\n    const template = this.querySelector('template') as HTMLTemplateElement;\n    this.templateContent = template ? template.content : html``;\n  }\n\n  private applyStyles() {\n    const sheet = new CSSStyleSheet();\n    sheet.replaceSync(itemCss);\n    this.shadowRoot.adoptedStyleSheets = [sheet];\n  }\n\n  render() {\n    return html`\n      ${this.templateContent}\n      <slot></slot>\n      ${until(this.itemDoc, html`<span>Loading...</span>`)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'item-container': ItemContainer;\n  }\n}\n","import { consume } from '@lit/context';\nimport { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { computedItemContext } from '../../exports/computed-item.context';\n\nimport type { ResponseVariable } from '../../exports/variables';\nimport type { ComputedItemContext } from '../../exports/computed-item.context';\n\n@customElement('print-item-variables')\nexport class PrintItemVariables extends LitElement {\n  @consume({ context: computedItemContext, subscribe: true })\n  protected computedContext?: ComputedItemContext;\n\n  static styles = css`\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      margin: 20px 0;\n      font-size: 14px;\n      text-align: left;\n    }\n    th,\n    td {\n      border: 1px solid #ddd;\n      padding: 8px;\n    }\n    th {\n      background-color: #f4f4f4;\n      font-weight: bold;\n    }\n    h3 {\n      margin-top: 20px;\n      font-size: 16px;\n    }\n  `;\n\n  render() {\n    const activeItem = this.computedContext;\n\n    if (!activeItem || !activeItem.variables) return html``;\n\n    const responseVariables: ResponseVariable[] = activeItem.variables.filter(v => v.type === 'response');\n    const outcomeVariables = activeItem.variables.filter(v => v.type === 'outcome');\n\n    const renderTable = (variables: ResponseVariable[], title: string) => html`\n      <h3>${title}</h3>\n      <table>\n        <thead>\n          <tr>\n            <th>Identifier</th>\n            <th>Value</th>\n            <th>Cardinality</th>\n            <th>Base Type</th>\n            <th>Correct Response / Mappings</th>\n          </tr>\n        </thead>\n        <tbody>\n          ${variables.map(v => {\n            const correctResponse = v.correctResponse\n              ? Array.isArray(v.correctResponse)\n                ? v.correctResponse.join(', ')\n                : v.correctResponse\n              : '';\n\n            const mapEntries = v.mapping?.mapEntries?.map(m => `${m.mapKey}=${m.mappedValue}pt`).join(', ') || '';\n\n            const areaMapEntries =\n              v.areaMapping?.areaMapEntries?.map(m => `${m.shape}(${m.coords})=${m.mappedValue}pt`).join(', ') || '';\n\n            return html`\n              <tr>\n                <td>${v.identifier}</td>\n                <td>${Array.isArray(v.value) ? v.value.join(', ') : v.value}</td>\n                <td>${v.cardinality}</td>\n                <td>${v.baseType}</td>\n                <td>${correctResponse || mapEntries || areaMapEntries}</td>\n              </tr>\n            `;\n          })}\n        </tbody>\n      </table>\n    `;\n\n    return html`\n      ${renderTable(responseVariables, 'Response Variables')} ${renderTable(outcomeVariables, 'Outcome Variables')}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'print-item-variables': PrintItemVariables;\n  }\n}\n","import { createContext } from '@lit/context';\n\nimport type { VariableDeclaration } from './variables';\n\nexport type ComputedItemContext = {\n  identifier: string;\n  href?: string;\n  correct?: boolean;\n  incorrect?: boolean;\n  completed?: boolean;\n  adaptive?: boolean;\n  timeDependent?: boolean;\n  title?: string;\n  label?: string;\n  score?: number;\n  maxScore?: number;\n  completionStatus?: string;\n  variables: ReadonlyArray<VariableDeclaration<string | string[] | null>>;\n};\n\nexport const computedItemContext = createContext<Readonly<ComputedItemContext>>(Symbol('computedItemContext'));\n","import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { consume } from '@lit/context';\n\nimport * as styles from './styles';\nimport { computedItemContext } from '../../exports/computed-item.context';\n\nimport type { ComputedItemContext } from '../../exports/computed-item.context';\n\n@customElement('item-show-correct-response')\nexport class ItemShowCorrectResponse extends LitElement {\n  @consume({ context: computedItemContext, subscribe: true })\n  public computedContext?: ComputedItemContext;\n\n  static styles = css`\n    :host {\n      ${styles.btn};\n    }\n    :host([disabled]) {\n      ${styles.dis};\n    }\n  `;\n\n  @property({ type: Boolean, reflect: true }) shown = false;\n  @property({ type: Boolean, reflect: true }) disabled = false; // Reflects to `disabled` attribute\n  @property({ type: String }) showCorrectText = 'Show correct response';\n  @property({ type: String }) hideCorrectText = 'Hide correct response';\n  @property({ type: String }) noCorrectResponseText = 'No correct response specified';\n\n  private _hasCorrectResponse = false; // correct response is removed on certain point\n  private _previousActiveItem = ''; // Store previous active item reference\n\n  updated() {\n    if (!this._hasCorrectResponse || this._previousActiveItem !== this.computedContext?.identifier) {\n      this._previousActiveItem = this.computedContext?.identifier;\n      const containsCorrectResponse = !!this.computedContext?.variables.some(v => v['correctResponse']);\n      const containsMapping = !!this.computedContext?.variables.some(v => {\n        return v['mapping']?.mapEntries?.length > 0 || v['areaMapping']?.areaMapEntries?.length > 0;\n      });\n      this._hasCorrectResponse = containsCorrectResponse || containsMapping;\n    }\n    this.disabled = !this._hasCorrectResponse;\n  }\n\n  private _toggleState() {\n    if (this.disabled) return; // Prevent toggle if disabled\n\n    this.dispatchEvent(\n      new CustomEvent('item-show-correct-response', {\n        detail: !this.shown,\n        bubbles: true\n      })\n    );\n  }\n\n  private _getDisplayedText(): string {\n    return this.disabled ? this.noCorrectResponseText : this.shown ? this.hideCorrectText : this.showCorrectText;\n  }\n\n  render() {\n    return html` <div @click=\"${this._toggleState}\">${this._getDisplayedText()}</div> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'item-show-correct-response': ItemShowCorrectResponse;\n  }\n}\n","// /* eslint-disable lit-plugin(no-invalid-css) */\nimport { css } from 'lit';\n\nexport const form = css`\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  user-select: none;\n`;\n\nexport const btn = css`\n  background-color: lightgray;\n  ${form};\n`;\n\nexport const dis = css`\n  cursor: not-allowed;\n  opacity: 0.8;\n`;\n\nexport const ind = css`\n  ${form};\n  border: 1px solid gray;\n`;\n","import { provide } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\n\nimport { computedItemContext } from '../../exports/computed-item.context';\nimport { configContext } from '../../exports/config.context.ts';\n\nimport type { QtiAssessmentItem } from '../../qti-components/qti-assessment-item/qti-assessment-item.ts';\nimport type { ConfigContext, CorrectResponseMode } from '../../exports/config.context.ts';\nimport type { ItemContext } from '../../exports/item.context';\nimport type { VariableDeclaration } from '../../exports/variables';\nimport type { ComputedItemContext } from '../../exports/computed-item.context';\n\n/**\n * `<qti-item>` is a custom element designed for rendering a single `qti-assessment-item`.\n * It can also host some functionalities to interact with the item like scoring, showing feedback, etc.\n * Placing a mandatory `<item-container>` inside '<qti-item>' will load or parse the item and render it.\n * See `<item-container>` for more details.\n *\n * ```html\n * <qti-item>\n *   <item-container class=\"m-4 bg-white\" item-url=\"./path/to/item.xml\"></item-container>\n * </qti-item>\n * ```\n */\n@customElement('qti-item')\nexport class QtiItem extends LitElement {\n  @state()\n  @provide({ context: computedItemContext })\n  public computedContext: ComputedItemContext;\n  private _qtiAssessmentItem?: QtiAssessmentItem;\n\n  @state()\n  @provide({ context: configContext })\n  public configContext: ConfigContext = {};\n\n  // Store event handlers as instance properties\n  private _onItemContextChanged = this._handleItemContextChanged.bind(this);\n  private _onAssessmentItemConnected = this._handleAssessmentItemConnected.bind(this);\n\n  private _onHandleShowCorrectResponse = this._handleShowCorrectResponse.bind(this);\n  private _onHandleShowCandidateCorrection = this._handleShowCandidateCorrection.bind(this);\n  private _onHandleSwitchCorrectResponseMode = this._handleSwitchCorrectResponseMode.bind(this);\n\n  constructor() {\n    super();\n    this.addEventListener('qti-item-context-updated', this._onItemContextChanged);\n    this.addEventListener('qti-assessment-item-connected', this._onAssessmentItemConnected);\n    this.addEventListener('item-show-correct-response', this._onHandleShowCorrectResponse);\n    this.addEventListener('item-show-candidate-correction', this._onHandleShowCandidateCorrection);\n    this.addEventListener('item-switch-correct-response-mode', this._onHandleSwitchCorrectResponseMode);\n  }\n\n  private _handleItemContextChanged(e: CustomEvent<{ itemContext: ItemContext }>) {\n    this._updateItemVariablesInTestContext(e.detail.itemContext.identifier, e.detail?.itemContext?.variables || []);\n  }\n\n  private _handleAssessmentItemConnected(e: CustomEvent<QtiAssessmentItem>) {\n    const fullVariables = (e.detail as any)._context.variables;\n    this._qtiAssessmentItem = e.detail;\n    this.computedContext =\n      this.computedContext?.identifier === this._qtiAssessmentItem.identifier\n        ? { ...this.computedContext, title: this._qtiAssessmentItem.title }\n        : ({\n            identifier: this._qtiAssessmentItem.identifier,\n            title: this._qtiAssessmentItem.title,\n            adaptive: this._qtiAssessmentItem.getAttribute('adaptive')?.toLowerCase() === 'true' || false,\n            variables: fullVariables,\n            correctResponseMode: 'internal'\n          } as ComputedItemContext);\n    this._updateItemVariablesInTestContext(this._qtiAssessmentItem.identifier, fullVariables || []);\n  }\n\n  private _handleShowCorrectResponse(e: CustomEvent<boolean>) {\n    if (this._qtiAssessmentItem) {\n      this._qtiAssessmentItem.showCorrectResponse(e.detail);\n    }\n  }\n\n  private _handleShowCandidateCorrection(e: CustomEvent<boolean>) {\n    if (this._qtiAssessmentItem) {\n      this._qtiAssessmentItem.showCandidateCorrection(e.detail);\n    }\n  }\n\n  private _handleSwitchCorrectResponseMode(e: CustomEvent<CorrectResponseMode>) {\n    // Switch off the correct response first\n    this._handleShowCorrectResponse(new CustomEvent('item-show-correct-response', { detail: false, bubbles: true }));\n\n    this.configContext = {\n      ...this.configContext,\n      correctResponseMode: e.detail\n    };\n  }\n\n  private _updateItemVariablesInTestContext(\n    identifier: string,\n    variables: readonly VariableDeclaration<string | string[] | null>[]\n  ): void {\n    const rawscore = variables?.find(vr => vr.identifier == 'SCORE')?.value;\n    const score = parseFloat(rawscore?.toString());\n    const completionStatus = variables?.find(v => v.identifier === 'completionStatus')?.value;\n\n    const correct = score !== undefined && !isNaN(score) && score > 0;\n    const incorrect = score !== undefined && !isNaN(score) && score <= 0;\n    const completed = completionStatus === 'completed';\n    this.computedContext = {\n      ...this.computedContext,\n      identifier,\n      correct,\n      incorrect,\n      completed,\n      variables\n    };\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('qti-item-context-changed', this._onItemContextChanged);\n    this.removeEventListener('qti-assessment-item-connected', this._onAssessmentItemConnected);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-item': QtiItem;\n  }\n}\n"],"mappings":"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","names":["html","LitElement","customElement","LitElement","html","customElement","css","html","LitElement","customElement","property","consume","css","LitElement","html","css","consume","property","customElement","html","LitElement","customElement","state","LitElement","html","state","customElement"]}

package/dist/chunks/chunk-GUDRSXIP.js

@@ -0,0 +1,189 @@
+import {
+  __decorateClass
+} from "./chunk-JDY5GL7E.js";
+
+// src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+// src/lib/qti-components/qti-feedback/qti-feedback.ts
+import { consume } from "@lit/context";
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+
+// src/lib/qti-components/internal/utils.ts
+var decimalSeparator = () => {
+  return new Intl.NumberFormat().format(0.1).replace(/\d/g, "");
+};
+var convertNumberToUniversalFormat = (number) => {
+  if (typeof number === "string") {
+    return number;
+  }
+  const dSep = decimalSeparator();
+  if (dSep === ".") {
+    return number.toLocaleString();
+  } else {
+    return number.toString().replace(".", "").replace(dSep, ".");
+  }
+};
+function IsNullOrUndefined(value) {
+  return value === null || value === void 0;
+}
+function removeDoubleSlashes(str) {
+  const singleForwardSlashes = str.replace(/([^:]\/)\/+/g, "$1").replace(/\/\//g, "/").replace("http:/", "http://").replace("https:/", "https://");
+  return singleForwardSlashes;
+}
+
+// src/lib/exports/qti-assessment-item.context.ts
+import { createContext } from "@lit/context";
+var itemContext = createContext(Symbol("item"));
+
+// src/lib/qti-components/qti-feedback/qti-feedback.ts
+var QtiFeedback = class extends LitElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(
+      new CustomEvent("qti-register-feedback", {
+        bubbles: true,
+        composed: true,
+        detail: this
+      })
+    );
+  }
+  checkShowFeedback(outcomeIdentifier) {
+    const outcomeVariable = this._context.variables.find((v) => v.identifier === outcomeIdentifier) || null;
+    if (this.outcomeIdentifier !== outcomeIdentifier || !outcomeVariable) return;
+    let isFound = false;
+    if (Array.isArray(outcomeVariable.value)) {
+      isFound = outcomeVariable.value.includes(this.identifier);
+    } else {
+      isFound = !IsNullOrUndefined(this.identifier) && !IsNullOrUndefined(outcomeVariable?.value) && this.identifier === outcomeVariable.value || false;
+    }
+    this.showFeedback(isFound);
+  }
+  showFeedback(value) {
+    this.showStatus = value && this.showHide === "show" || !value && this.showHide === "hide" ? "on" : "off";
+  }
+};
+__decorateClass([
+  property({ type: String, attribute: "show-hide" })
+], QtiFeedback.prototype, "showHide", 2);
+__decorateClass([
+  property({ type: String, attribute: "outcome-identifier" })
+], QtiFeedback.prototype, "outcomeIdentifier", 2);
+__decorateClass([
+  property({ type: String })
+], QtiFeedback.prototype, "identifier", 2);
+__decorateClass([
+  property({ type: String, attribute: false })
+], QtiFeedback.prototype, "showStatus", 2);
+__decorateClass([
+  consume({ context: itemContext, subscribe: true }),
+  state()
+], QtiFeedback.prototype, "_context", 2);
+
+// src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts
+var QtiModalFeedback = class extends QtiFeedback {
+  render() {
+    return html`
+      <dialog class="qti-dialog" part="feedback" ?open="${this.showStatus === "on"}">
+        <slot></slot>
+        <div style="margin-top: var(--qti-gap-size); text-align: center;">
+          <button class="button close-button" @click="${this.closeFeedback}">Close</button>
+        </div>
+      </dialog>
+    `;
+  }
+  openFeedback() {
+    const dialog = this.shadowRoot?.querySelector("dialog");
+    if (dialog && !dialog.open) {
+      dialog.showModal();
+    }
+  }
+  closeFeedback() {
+    const dialog = this.shadowRoot?.querySelector("dialog");
+    if (dialog && dialog.open) {
+      dialog.close();
+      this.showStatus = "off";
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.showStatus === "on") {
+      this.openFeedback();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("showStatus")) {
+      if (this.showStatus === "on") {
+        this.openFeedback();
+      } else {
+        this.closeFeedback();
+      }
+    }
+  }
+};
+QtiModalFeedback.styles = css`
+    .qti-dialog {
+      background: var(--qti-bg);
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      border-radius: var(--qti-border-radius);
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1000;
+      width: auto;
+      max-width: 90%;
+    }
+
+    .button {
+      border-radius: var(--qti-border-radius);
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      background-color: var(--qti-bg-active);
+      border: var(--qti-border-active);
+      cursor: pointer;
+      position: relative;
+      display: inline-block;
+    }
+
+    .button:hover {
+      background-color: var(--qti-hover-bg);
+    }
+
+    .button:disabled {
+      background-color: var(--qti-disabled-bg);
+      color: var(--qti-disabled-color);
+      cursor: not-allowed;
+    }
+
+    .button:focus {
+      outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
+    }
+  `;
+QtiModalFeedback = __decorateClass([
+  customElement("qti-modal-feedback")
+], QtiModalFeedback);
+
+// src/lib/exports/test.context.ts
+import { createContext as createContext2 } from "@lit/context";
+var INITIAL_TEST_CONTEXT = { items: [], testOutcomeVariables: [] };
+var testContext = createContext2(Symbol("testContext"));
+
+// src/lib/exports/qti.context.ts
+import { createContext as createContext3 } from "@lit/context";
+var qtiContext = createContext3(Symbol("qtiContext"));
+
+export {
+  itemContext,
+  convertNumberToUniversalFormat,
+  removeDoubleSlashes,
+  QtiFeedback,
+  QtiModalFeedback,
+  qtiContext,
+  INITIAL_TEST_CONTEXT,
+  testContext
+};
+//# sourceMappingURL=chunk-GUDRSXIP.js.map

package/dist/chunks/chunk-GUDRSXIP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts","../../src/lib/qti-components/qti-feedback/qti-feedback.ts","../../src/lib/qti-components/internal/utils.ts","../../src/lib/exports/qti-assessment-item.context.ts","../../src/lib/exports/test.context.ts","../../src/lib/exports/qti.context.ts"],"sourcesContent":["import { css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { QtiFeedback } from '../qti-feedback';\n\n@customElement('qti-modal-feedback')\nexport class QtiModalFeedback extends QtiFeedback {\n  static override styles = css`\n    .qti-dialog {\n      background: var(--qti-bg);\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n      border-radius: var(--qti-border-radius);\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 1000;\n      width: auto;\n      max-width: 90%;\n    }\n\n    .button {\n      border-radius: var(--qti-border-radius);\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n      background-color: var(--qti-bg-active);\n      border: var(--qti-border-active);\n      cursor: pointer;\n      position: relative;\n      display: inline-block;\n    }\n\n    .button:hover {\n      background-color: var(--qti-hover-bg);\n    }\n\n    .button:disabled {\n      background-color: var(--qti-disabled-bg);\n      color: var(--qti-disabled-color);\n      cursor: not-allowed;\n    }\n\n    .button:focus {\n      outline: var(--qti-focus-border-width) solid var(--qti-focus-color);\n    }\n  `;\n\n  override render() {\n    return html`\n      <dialog class=\"qti-dialog\" part=\"feedback\" ?open=\"${this.showStatus === 'on'}\">\n        <slot></slot>\n        <div style=\"margin-top: var(--qti-gap-size); text-align: center;\">\n          <button class=\"button close-button\" @click=\"${this.closeFeedback}\">Close</button>\n        </div>\n      </dialog>\n    `;\n  }\n\n  openFeedback() {\n    const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null;\n    if (dialog && !dialog.open) {\n      dialog.showModal();\n    }\n  }\n\n  closeFeedback() {\n    const dialog = this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null;\n    if (dialog && dialog.open) {\n      dialog.close();\n      this.showStatus = 'off';\n    }\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    if (this.showStatus === 'on') {\n      this.openFeedback();\n    }\n  }\n\n  protected updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    if (changedProperties.has('showStatus')) {\n      if (this.showStatus === 'on') {\n        this.openFeedback();\n      } else {\n        this.closeFeedback();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-modal-feedback': QtiModalFeedback;\n  }\n}\n","import { consume } from '@lit/context';\nimport { LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { IsNullOrUndefined } from '../internal/utils';\nimport { itemContext } from '../../exports/qti-assessment-item.context';\n\nimport type { ItemContext } from '../../exports/item.context';\n\nexport abstract class QtiFeedback extends LitElement {\n  @property({ type: String, attribute: 'show-hide' })\n  protected showHide: string;\n\n  @property({ type: String, attribute: 'outcome-identifier' })\n  public outcomeIdentifier: string;\n\n  @property({ type: String })\n  protected identifier: string;\n\n  @property({ type: String, attribute: false })\n  public showStatus: string;\n\n  @consume({ context: itemContext, subscribe: true })\n  @state()\n  private _context?: ItemContext;\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.dispatchEvent(\n      new CustomEvent<QtiFeedback>('qti-register-feedback', {\n        bubbles: true,\n        composed: true,\n        detail: this\n      })\n    );\n  }\n\n  public checkShowFeedback(outcomeIdentifier: string) {\n    const outcomeVariable = this._context.variables.find(v => v.identifier === outcomeIdentifier) || null;\n    if (this.outcomeIdentifier !== outcomeIdentifier || !outcomeVariable) return;\n    let isFound = false;\n    if (Array.isArray(outcomeVariable.value)) {\n      isFound = outcomeVariable.value.includes(this.identifier);\n    } else {\n      isFound =\n        (!IsNullOrUndefined(this.identifier) &&\n          !IsNullOrUndefined(outcomeVariable?.value) &&\n          this.identifier === outcomeVariable.value) ||\n        false;\n    }\n\n    this.showFeedback(isFound);\n  }\n\n  private showFeedback(value: boolean) {\n    this.showStatus = (value && this.showHide === 'show') || (!value && this.showHide === 'hide') ? 'on' : 'off';\n  }\n}\n","export const decimalSeparator = () => {\n  return new Intl.NumberFormat().format(0.1).replace(/\\d/g, '');\n};\n\nexport const convertNumberToUniversalFormat = (number: number | string) => {\n  // check if type is string\n  if (typeof number === 'string') {\n    return number;\n  }\n  const dSep = decimalSeparator();\n  if (dSep === '.') {\n    return number.toLocaleString();\n  } else {\n    return number.toString().replace('.', '').replace(dSep, '.');\n  }\n};\n\nexport function IsNullOrUndefined(value: unknown) {\n  return value === null || value === undefined;\n}\n\nexport function removeDoubleSlashes(str: string) {\n  const singleForwardSlashes = str\n    .replace(/([^:]\\/)\\/+/g, '$1')\n    .replace(/\\/\\//g, '/')\n    .replace('http:/', 'http://')\n    .replace('https:/', 'https://');\n  return singleForwardSlashes;\n}\n","import { createContext } from '@lit/context';\n\nimport type { ItemContext } from './item.context';\n\nexport const itemContext = createContext<ItemContext>(Symbol('item'));\n","import { createContext } from '@lit/context';\n\nimport type { ItemContext } from './item.context';\nimport type { VariableDeclaration } from './variables';\n\nexport interface TestContext {\n  items: (ItemContext & { category?: string })[];\n  testOutcomeVariables?: VariableDeclaration<string | string[] | null>[];\n}\n\nexport const INITIAL_TEST_CONTEXT: Readonly<TestContext> = { items: [], testOutcomeVariables: [] };\n\nexport const testContext = createContext<Readonly<TestContext>>(Symbol('testContext'));\n","import { createContext } from '@lit/context';\n\nexport type QtiContextType = {\n  testIdentifier: string;\n  candidateIdentifier: string;\n  environmentIdentifier: string;\n  [key: string]: string | string[]; // Allow for additional context variables\n};\n\nexport interface QtiContext {\n  QTI_CONTEXT: QtiContextType;\n}\n\nexport const qtiContext = createContext<Readonly<QtiContext>>(Symbol('qtiContext'));\n"],"mappings":"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","names":["createContext","createContext"]}

package/dist/chunks/{chunk-WFUXZ4UT.js → chunk-JDY5GL7E.js}

@@ -1,3 +1,14 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
 // src/lib/qti-transformers/qti-transformers.ts
 var xml = String.raw;
 var xmlToHTML = xml`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
@@ -495,8 +506,9 @@ var qtiTransformTest = () => {
 };
 
 export {
+  __decorateClass,
   qtiTransformItem,
   qtiTransformManifest,
   qtiTransformTest
 };
-//# sourceMappingURL=chunk-WFUXZ4UT.js.map
+//# sourceMappingURL=chunk-JDY5GL7E.js.map