@citolab/qti-components 7.3.19 → 7.3.21

package/dist/chunks/chunk-KJQYKXDV.js

@@ -0,0 +1,173 @@
+import {
+  configContext
+} from "./chunk-NRKCQIQS.js";
+import {
+  __decorateClass
+} from "./chunk-H2JE6IVU.js";
+
+// src/lib/exports/interaction.ts
+import { property, state } from "lit/decorators.js";
+import { LitElement } from "lit";
+import { consume } from "@lit/context";
+var Interaction = class extends LitElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.readonly = false;
+    this._isCorrect = null;
+    this._internals = this.attachInternals();
+  }
+  static {
+    this.formAssociated = true;
+  }
+  get isFullCorrectResponse() {
+    return this._isFullCorrectResponse;
+  }
+  set isFullCorrectResponse(val) {
+    this._isFullCorrectResponse = val;
+  }
+  get correctResponse() {
+    return this._correctResponse;
+  }
+  set correctResponse(val) {
+    this._correctResponse = val;
+  }
+  get isCorrect() {
+    return this._isCorrect;
+  }
+  set isCorrect(val) {
+    this._isCorrect = val;
+  }
+  toggleCorrectResponse(responseVariable, show) {
+    const correctResponseMode = this?.configContext?.correctResponseMode || "internal";
+    if (correctResponseMode === "full") {
+      this.toggleFullCorrectResponse(responseVariable, show);
+    } else {
+      this.toggleInternalCorrectResponse(responseVariable, show);
+    }
+  }
+  async toggleFullCorrectResponse(responseVariable, show) {
+    const nextSibling = this.nextElementSibling;
+    const nextSiblingIsFullCorrectResponse = nextSibling?.classList.contains("full-correct-response");
+    const isCorrect = responseVariable.correctResponse === responseVariable.value;
+    if (!show || isCorrect) {
+      if (!nextSiblingIsFullCorrectResponse) {
+        return;
+      }
+      this.parentElement?.removeChild(nextSibling);
+    }
+    if (nextSiblingIsFullCorrectResponse) {
+      return;
+    }
+    if (isCorrect) {
+      return;
+    }
+    const clone = this.cloneNode(true);
+    clone.isFullCorrectResponse = true;
+    clone.disabled = true;
+    const containerDiv = document.createElement("div");
+    containerDiv.classList.add("full-correct-response");
+    containerDiv.role = "full-correct-response";
+    containerDiv.appendChild(clone);
+    clone.setAttribute("response-identifier", this.responseIdentifier + "_cr");
+    this.parentElement?.insertBefore(containerDiv, this.nextElementSibling);
+    await clone.updateComplete;
+    clone.response = Array.isArray(responseVariable.correctResponse) ? [...responseVariable.correctResponse] : responseVariable.correctResponse;
+    const responseVariableClone = { ...responseVariable };
+    responseVariableClone.value = responseVariable.correctResponse;
+    clone.toggleCandidateCorrection(responseVariableClone, true);
+  }
+  toggleInternalCorrectResponse(responseVariable, show) {
+    this.correctResponse = show ? responseVariable?.correctResponse : responseVariable?.cardinality === "single" ? "" : [];
+  }
+  toggleCandidateCorrection(responseVariable, show) {
+    this.isCorrect = show ? responseVariable.correctResponse === responseVariable.value : null;
+    this._internals.states.delete("candidate-correct");
+    this._internals.states.delete("candidate-incorrect");
+    if (this.isCorrect === true) {
+      this._internals.states.add("candidate-correct");
+    }
+    if (this.isCorrect === false) {
+      this._internals.states.add("candidate-incorrect");
+    }
+  }
+  get value() {
+    return JSON.stringify(this.response);
+  }
+  set value(val) {
+    this.response = val ? JSON.parse(val) : null;
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  reset() {
+    this.response = null;
+  }
+  // attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+  //   super.attributeChangedCallback(name, _old, value);
+  //   // changing attributes in lit is not a thing, they are defined in the QTI XML and will never change
+  //   // except in storybook where we can change the value of the attribute
+  //   // this can make the internal state out of sync with the attribute
+  //   // so we reset the value to null to force the internal state to be reset
+  //   const attributeNamesToExclude = ['style', 'class'];
+  //   if (!attributeNamesToExclude.includes(name)) {
+  //     this.reset();
+  //   }
+  // }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.isFullCorrectResponse) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("qti-register-interaction", {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: {
+          interactionElement: this,
+          responseIdentifier: this.responseIdentifier
+        }
+      })
+    );
+  }
+  saveResponse(value) {
+    this.dispatchEvent(
+      new CustomEvent("qti-interaction-response", {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: {
+          responseIdentifier: this.responseIdentifier,
+          response: Array.isArray(value) ? [...value] : value
+        }
+      })
+    );
+  }
+};
+__decorateClass([
+  consume({ context: configContext, subscribe: true })
+], Interaction.prototype, "configContext", 2);
+__decorateClass([
+  property({ type: String, attribute: "response-identifier" })
+], Interaction.prototype, "responseIdentifier", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], Interaction.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], Interaction.prototype, "readonly", 2);
+__decorateClass([
+  state()
+], Interaction.prototype, "_isFullCorrectResponse", 2);
+__decorateClass([
+  state()
+], Interaction.prototype, "_correctResponse", 2);
+__decorateClass([
+  state()
+], Interaction.prototype, "_isCorrect", 2);
+
+export {
+  Interaction
+};
+//# sourceMappingURL=chunk-KJQYKXDV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/exports/interaction.ts"],"sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { LitElement } from 'lit';\nimport { consume } from '@lit/context';\n\nimport { configContext } from './config.context.ts';\n\nimport type { ConfigContext } from './config.context.ts';\nimport type { ResponseVariable } from './variables';\nimport type { IInteraction } from './interaction.interface';\n\nexport abstract class Interaction extends LitElement implements IInteraction {\n\n  @consume({ context: configContext, subscribe: true })\n  private configContext: ConfigContext;\n\n  static formAssociated = true;\n  protected _internals: ElementInternals;\n\n  @property({ type: String, attribute: 'response-identifier' }) responseIdentifier;\n\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  @property({ reflect: true, type: Boolean }) readonly = false;\n\n  @state()\n  protected _isFullCorrectResponse: boolean;\n\n  get isFullCorrectResponse(): Readonly<boolean> {\n    return this._isFullCorrectResponse;\n  }\n\n  set isFullCorrectResponse(val: Readonly<boolean>) {\n    this._isFullCorrectResponse = val as boolean;\n  }\n\n  /* PK: Correct response */\n  @state()\n  protected _correctResponse: string | string[];\n\n  get correctResponse(): Readonly<string | string[]> {\n    return this._correctResponse;\n  }\n\n  set correctResponse(val: Readonly<string | string[]>) {\n    this._correctResponse = val as string | string[];\n  }\n\n  @state()\n  protected _isCorrect: boolean | null = null;\n\n  get isCorrect(): Readonly<boolean | null> {\n    return this._isCorrect;\n  }\n\n  set isCorrect(val: Readonly<boolean | null>) {\n    this._isCorrect = val as boolean;\n  }\n\n  public toggleCorrectResponse(responseVariable: ResponseVariable, show: boolean) {\n    const correctResponseMode = this?.configContext?.correctResponseMode || 'internal'\n\n    if (correctResponseMode === 'full') {\n      this.toggleFullCorrectResponse(responseVariable, show);\n    } else {\n      this.toggleInternalCorrectResponse(responseVariable, show);\n    }\n  }\n\n  protected async toggleFullCorrectResponse(responseVariable: ResponseVariable, show: boolean) {\n    const nextSibling = this.nextElementSibling;\n    const nextSiblingIsFullCorrectResponse = nextSibling?.classList.contains('full-correct-response');\n\n    const isCorrect = responseVariable.correctResponse === responseVariable.value;\n\n    if (!show || isCorrect) { // Don't show with the correct answer responded\n      if (!nextSiblingIsFullCorrectResponse) {\n        return;\n      }\n      // Remove cloned interaction\n      this.parentElement?.removeChild(nextSibling);\n    }\n\n    if (nextSiblingIsFullCorrectResponse) {\n      return; // Already exists\n    }\n\n    if (isCorrect) {\n      return;\n    }\n\n    // Add a clone of interaction with the correct response\n    const clone = this.cloneNode(true) as Interaction;\n    clone.isFullCorrectResponse = true;\n    clone.disabled = true;\n\n    const containerDiv = document.createElement('div');\n    containerDiv.classList.add('full-correct-response');\n    containerDiv.role = 'full-correct-response';\n    containerDiv.appendChild(clone);\n    clone.setAttribute('response-identifier', this.responseIdentifier + '_cr');\n\n    this.parentElement?.insertBefore(containerDiv, this.nextElementSibling);\n    await clone.updateComplete;\n\n    clone.response = Array.isArray(responseVariable.correctResponse)\n      ? [...responseVariable.correctResponse] as string[]\n      : responseVariable.correctResponse as string;\n\n    const responseVariableClone = { ...responseVariable };\n    responseVariableClone.value = responseVariable.correctResponse;\n    clone.toggleCandidateCorrection(responseVariableClone, true);\n  }\n\n  protected toggleInternalCorrectResponse(responseVariable: ResponseVariable, show: boolean) {\n    this.correctResponse = show\n      ? responseVariable?.correctResponse\n      : responseVariable?.cardinality === 'single'\n        ? ''\n        : [];\n  }\n\n  public toggleCandidateCorrection(responseVariable: ResponseVariable, show: boolean) {\n    this.isCorrect = show\n      ? responseVariable.correctResponse === responseVariable.value\n      : null;\n\n    this._internals.states.delete('candidate-correct');\n    this._internals.states.delete('candidate-incorrect');\n\n    if (this.isCorrect === true) {\n      this._internals.states.add('candidate-correct');\n    }\n    if (this.isCorrect === false) {\n      this._internals.states.add('candidate-incorrect');\n    }\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  abstract validate(): boolean;\n\n  get value(): string | null {\n    return JSON.stringify(this.response);\n  }\n\n  set value(val: string | null) {\n    this.response = val ? JSON.parse(val) : null;\n  }\n\n  abstract get response(): string | string[] | null;\n  abstract set response(val: string | string[] | null);\n\n  public reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  public reset(): void {\n    this.response = null;\n  }\n\n  // attributeChangedCallback(name: string, _old: string | null, value: string | null): void {\n  //   super.attributeChangedCallback(name, _old, value);\n  //   // changing attributes in lit is not a thing, they are defined in the QTI XML and will never change\n  //   // except in storybook where we can change the value of the attribute\n  //   // this can make the internal state out of sync with the attribute\n  //   // so we reset the value to null to force the internal state to be reset\n  //   const attributeNamesToExclude = ['style', 'class'];\n  //   if (!attributeNamesToExclude.includes(name)) {\n  //     this.reset();\n  //   }\n  // }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n\n    if (this.isFullCorrectResponse) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('qti-register-interaction', {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          interactionElement: this,\n          responseIdentifier: this.responseIdentifier\n        }\n      })\n    );\n  }\n\n  public saveResponse(value: string | string[]) {\n    this.dispatchEvent(\n      new CustomEvent('qti-interaction-response', {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          responseIdentifier: this.responseIdentifier,\n          response: Array.isArray(value) ? [...value] : value\n        }\n      })\n    );\n  }\n}\n"],"mappings":"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","names":[]}