@citolab/qti-components 7.0.4 → 7.0.6-beta.0

package/dist/qti-components-jsx.d.ts

@@ -440,10 +440,6 @@ export type QtiInlineChoiceInteractionProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  options?: OptionType[];
-  /**  */
-  correctOption?: string;
-  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -574,19 +570,19 @@ export type QtiAssociateInteractionProps = {
   /**  */
   "max-associations"?: number;
   /**  */
-  disabled?: boolean;
-  /**  */
   "response-identifier"?: string;
   /**  */
+  disabled?: boolean;
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
   /**  */
-  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type QtiCustomInteractionProps = {
@@ -621,26 +617,17 @@ export type QtiCustomInteractionProps = {
 };
 
 export type QtiEndAttemptInteractionProps = {
-  /**  */
-  "count-attempt"?: string;
-  /**  */
-  title?: "end attempt";
   /**  */
   "response-identifier"?: string;
   /**  */
   disabled?: boolean;
+  /** Defines the number of attempts that a user can make using the 'endAttemptInteraction' mechanism (this can be used to limit the number of hints, etc.). [More information](https://www.imsglobal.org/sites/default/files/spec/qti/v3/info/index.html#DataCharacteristic_EndAttemptInteraction.Attr_count-attempt) */
+  "count-attempt"?: "true" | "false" | null;
   /**  */
-  readonly?: boolean;
-  /**  */
-  value?: string | string[];
-  /**  */
-  correctResponse?: string | string[];
+  title?: string;
+
   /**  */
   "onend-attempt"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type QtiGapMatchInteractionProps = {
@@ -649,19 +636,19 @@ export type QtiGapMatchInteractionProps = {
   /**  */
   "max-associations"?: number;
   /**  */
-  disabled?: boolean;
-  /**  */
   "response-identifier"?: string;
   /**  */
+  disabled?: boolean;
+  /**  */
   readonly?: boolean;
   /**  */
   correctResponse?: string | string[];
   /**  */
   value?: string | string[];
   /**  */
-  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type QtiHotspotChoiceProps = {
@@ -689,26 +676,6 @@ export type QtiGraphicAssociateInteractionProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  choiceOrdering?: boolean;
-  /**  */
-  hotspots?: string;
-  /**  */
-  startPoint?: null;
-  /**  */
-  endPoint?: null;
-  /**  */
-  _lines?: array;
-  /**  */
-  startCoord?: { x: any; y: any };
-  /**  */
-  mouseCoord?: { x: number; y: number };
-  /**  */
-  svgContainer?: string;
-  /**  */
-  grImage?: string;
-  /**  */
-  svg?: SVGSVGElement;
-  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -724,19 +691,19 @@ export type QtiGraphicGapMatchInteractionProps = {
   /**  */
   "max-associations"?: number;
   /**  */
-  disabled?: boolean;
-  /**  */
   "response-identifier"?: string;
   /**  */
+  disabled?: boolean;
+  /**  */
   readonly?: boolean;
   /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
   /**  */
-  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type QtiGraphicOrderInteractionProps = {
@@ -751,8 +718,6 @@ export type QtiGraphicOrderInteractionProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  choiceOrdering?: boolean;
-  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -801,9 +766,9 @@ export type QtiMatchInteractionProps = {
   /**  */
   correctResponse?: string | string[];
   /**  */
-  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type QtiMediaInteractionProps = {
@@ -833,15 +798,11 @@ export type QtiOrderInteractionProps = {
   /**  */
   "max-associations"?: number;
   /**  */
-  disabled?: boolean;
-  /**  */
   "response-identifier"?: string;
   /**  */
-  readonly?: boolean;
-  /**  */
-  childrenMap?: Element[];
+  disabled?: boolean;
   /**  */
-  nrChoices?: number;
+  readonly?: boolean;
   /**  */
   correctResponses?: string[];
   /**  */
@@ -851,9 +812,9 @@ export type QtiOrderInteractionProps = {
   /**  */
   value?: string | string[];
   /**  */
-  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type QtiPositionObjectInteractionProps = {};
@@ -1028,6 +989,17 @@ export type TestElementProps = {
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type ItemContainerProps = {
+  /** URL of the item to load */
+  "item-url"?: string;
+  /** A parsed HTML document */
+  itemDoc?: DocumentFragment;
+  /** The raw XML string */
+  itemXML?: string;
+};
+
+export type QtiItemProps = {};
+
 export type QtiAssessmentItemRefProps = {
   /**  */
   category?: string | undefined;
@@ -1097,11 +1069,6 @@ export type QtiTestPartProps = {
   "onqti-test-part-connected"?: (e: CustomEvent<Event>) => void;
 };
 
-export type QtiTestProps = {
-  /**  */
-  context?: TestContext;
-};
-
 export type TestNextProps = {
   /**  */
   role?: string;
@@ -1110,10 +1077,6 @@ export type TestNextProps = {
   /**  */
   disabled?: boolean;
   /**  */
-  _testContext?: TestContext | undefined;
-  /**  */
-  _testElement?: TestElement | undefined;
-  /**  */
   "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
@@ -1127,29 +1090,19 @@ export type TestPrevProps = {
   /**  */
   disabled?: boolean;
   /**  */
-  _testContext?: TestContext | undefined;
-  /**  */
-  _testElement?: TestElement | undefined;
-  /**  */
   "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type TestViewProps = {
-  /**  */
+  /** label accompanying the select view dropdown */
   label?: string;
-  /**  */
+  /** The options to display in the dropdown, default: ['author', 'candidate', 'proctor', 'scorer', 'testConstructor', 'tutor'] */
   "view-options"?: string;
   /**  */
-  _handleViewOptionsChange?: string;
-  /**  */
   disabled?: boolean;
   /**  */
-  _testContext?: TestContext | undefined;
-  /**  */
-  _testElement?: TestElement | undefined;
-  /**  */
   "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
@@ -1161,24 +1114,11 @@ export type TestItemLinkProps = {
   /**  */
   disabled?: boolean;
   /**  */
-  _testContext?: TestContext | undefined;
-  /**  */
-  _testElement?: TestElement | undefined;
-  /**  */
   "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type TestContainerProps = {
-  /** URL of the item to load */
-  "test-url"?: string;
-  /** A parsed HTML document */
-  testDoc?: DocumentFragment;
-  /** The raw XML string */
-  testXML?: string;
-};
-
 export type TestPagingButtonsStampProps = {
   /**  */
   "max-displayed-items"?: number;
@@ -1189,24 +1129,23 @@ export type TestPagingButtonsStampProps = {
   /**  */
   disabled?: boolean;
   /**  */
-  _testContext?: TestContext | undefined;
-  /**  */
-  _testElement?: TestElement | undefined;
-  /**  */
   "onon-test-switch-view"?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   "onqti-request-test-item"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type QtiItemProps = {};
+export type QtiTestProps = {
+  /**  */
+  context?: TestContext;
+};
 
-export type ItemContainerProps = {
+export type TestContainerProps = {
   /** URL of the item to load */
-  "item-url"?: string;
+  "test-url"?: string;
   /** A parsed HTML document */
-  itemDoc?: DocumentFragment;
+  testDoc?: DocumentFragment;
   /** The raw XML string */
-  itemXML?: string;
+  testXML?: string;
 };
 
 export type CustomElements = {
@@ -1608,6 +1547,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
+   *
+   * ### **Methods:**
+   *
    */
   "qti-hottext-interaction": Partial<QtiHottextInteractionProps & BaseProps & BaseEvents>;
 
@@ -1642,6 +1584,9 @@ export type CustomElements = {
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
    *
+   * ### **Methods:**
+   *
+   *
    * ### **Slots:**
    *  - _default_ - default slot of the choices
    * - **prompt** - slot of the prompt
@@ -1705,8 +1650,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **qti-register-interaction**
-   * - **qti-interaction-response**
+   *  - **qti-interaction-response**
+   * - **qti-register-interaction**
    */
   "qti-associate-interaction": Partial<QtiAssociateInteractionProps & BaseProps & BaseEvents>;
 
@@ -1728,8 +1673,6 @@ export type CustomElements = {
    *
    * ### **Events:**
    *  - **end-attempt**
-   * - **qti-register-interaction**
-   * - **qti-interaction-response**
    */
   "qti-end-attempt-interaction": Partial<QtiEndAttemptInteractionProps & BaseProps & BaseEvents>;
 
@@ -1739,8 +1682,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **qti-register-interaction**
-   * - **qti-interaction-response**
+   *  - **qti-interaction-response**
+   * - **qti-register-interaction**
    */
   "qti-gap-match-interaction": Partial<QtiGapMatchInteractionProps & BaseProps & BaseEvents>;
 
@@ -1771,8 +1714,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **qti-register-interaction**
-   * - **qti-interaction-response**
+   *  - **qti-interaction-response**
+   * - **qti-register-interaction**
    */
   "qti-graphic-gap-match-interaction": Partial<QtiGraphicGapMatchInteractionProps & BaseProps & BaseEvents>;
 
@@ -1784,6 +1727,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
+   *
+   * ### **Methods:**
+   *
    */
   "qti-graphic-order-interaction": Partial<QtiGraphicOrderInteractionProps & BaseProps & BaseEvents>;
 
@@ -1795,6 +1741,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
+   *
+   * ### **Methods:**
+   *
    */
   "qti-hotspot-interaction": Partial<QtiHotspotInteractionProps & BaseProps & BaseEvents>;
 
@@ -1804,8 +1753,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **qti-register-interaction**
-   * - **qti-interaction-response**
+   *  - **qti-interaction-response**
+   * - **qti-register-interaction**
    */
   "qti-match-interaction": Partial<QtiMatchInteractionProps & BaseProps & BaseEvents>;
 
@@ -1826,8 +1775,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **qti-register-interaction**
-   * - **qti-interaction-response**
+   *  - **qti-interaction-response**
+   * - **qti-register-interaction**
    */
   "qti-order-interaction": Partial<QtiOrderInteractionProps & BaseProps & BaseEvents>;
 
@@ -1973,6 +1922,40 @@ export type CustomElements = {
    */
   "test-element": Partial<TestElementProps & BaseProps & BaseEvents>;
 
+  /**
+   * `<item-container>` is a custom element designed for hosting the qti-assessment-item.
+   * The `qti-assessment-item` will be placed inside the shadow DOM of this element.
+   * The element loads the item from the provided URL and renders it inside the shadow DOM.
+   *
+   * ### Styling
+   * Add a class to the element for styling.
+   *
+   * ```html
+   * <qti-item>
+   *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
+   * </qti-item>
+   * ```
+   * ---
+   *
+   */
+  "item-container": Partial<ItemContainerProps & BaseProps & BaseEvents>;
+
+  /**
+   * `<qti-item>` is a custom element designed for rendering a single `qti-assessment-item`.
+   * It can also host some functionalities to interact with the item like scoring, showing feedback, etc.
+   * Placing a mandatory `<item-container>` inside '<qti-item>' will load or parse the item and render it.
+   * See `<item-container>` for more details.
+   *
+   * ```html
+   * <qti-item>
+   *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
+   * </qti-item>
+   * ```
+   * ---
+   *
+   */
+  "qti-item": Partial<QtiItemProps & BaseProps & BaseEvents>;
+
   /**
    *
    * ---
@@ -2013,55 +1996,6 @@ export type CustomElements = {
    */
   "qti-test-part": Partial<QtiTestPartProps & BaseProps & BaseEvents>;
 
-  /**
-   * `<qti-test>` is a custom element designed for rendering and interacting with QTI (Question and Test Interoperability) tests.
-   *
-   * This component leverages several mixins to provide functionality for loading, navigating, processing, and displaying QTI test assessments.
-   *
-   * ### Example Usage
-   *
-   * Minimal example including navigation:
-   *
-   * ```html
-   * <qti-test>
-   *   <test-container test-url="./path/to/assessment.xml"></test-container>
-   *   <nav class="flex">
-   *      <test-prev></test-prev>
-   *      <test-next></test-next>
-   *   </nav>
-   * </qti-test>
-   * ```
-   *
-   * Use the following file structure
-   * A qti-test loads a QTI3.0 assessmenttest.xml file from a package folder.
-   *
-   * ```plaintext
-   * Root/
-   * ├── index.html
-   * └── /assets/api/examples/
-   *     ├── assessmenttest.xml
-   *     └── imsmanifest.xml
-   *
-   * ```
-   *
-   * ### Test components
-   *
-   * Use test components inside the qti-test component for added functionality.
-   * ### Test next
-   * `<test-next> | TestNext`
-   *
-   * ### Test prev
-   *
-   * `<test-prev> | TestPrev`
-   * ### Test components
-   *
-   * You can use normal class names to style the elements.
-   * And you can use the `test-prev` and `test-next` elements to navigate through the test.
-   * ---
-   *
-   */
-  "qti-test": Partial<QtiTestProps & BaseProps & BaseEvents>;
-
   /**
    * Represents a custom element for navigating to the next test item.
    * ---
@@ -2106,24 +2040,6 @@ export type CustomElements = {
    */
   "test-item-link": Partial<TestItemLinkProps & BaseProps & BaseEvents>;
 
-  /**
-   * `<test-container>` is a custom element designed for hosting the qti-assessment-item.
-   * The `qti-assessment-test` will be placed inside the shadow DOM of this element.
-   * The element loads the item from the provided URL and renders it inside the shadow DOM.
-   *
-   * ### Styling
-   * Add a class to the element for styling.
-   *
-   * ```html
-   * <qti-test>
-   *   <test-container class="m-4 bg-white" test-url="./path/to/item.xml"></test-container>
-   * </qti-test>
-   * ```
-   * ---
-   *
-   */
-  "test-container": Partial<TestContainerProps & BaseProps & BaseEvents>;
-
   /**
    *
    * ---
@@ -2136,36 +2052,66 @@ export type CustomElements = {
   "test-paging-buttons-stamp": Partial<TestPagingButtonsStampProps & BaseProps & BaseEvents>;
 
   /**
-   * `<qti-item>` is a custom element designed for rendering a single `qti-assessment-item`.
-   * It can also host some functionalities to interact with the item like scoring, showing feedback, etc.
-   * Placing a mandatory `<item-container>` inside '<qti-item>' will load or parse the item and render it.
-   * See `<item-container>` for more details.
+   * `<qti-test>` is a custom element designed for rendering and interacting with QTI (Question and Test Interoperability) tests.
+   *
+   * This component leverages several mixins to provide functionality for loading, navigating, processing, and displaying QTI test assessments.
+   *
+   * ### Example Usage
+   *
+   * Minimal example including navigation:
    *
    * ```html
-   * <qti-item>
-   *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
-   * </qti-item>
+   * <qti-test>
+   *   <test-container test-url="./path/to/assessment.xml"></test-container>
+   *   <nav class="flex">
+   *      <test-prev></test-prev>
+   *      <test-next></test-next>
+   *   </nav>
+   * </qti-test>
+   * ```
+   *
+   * Use the following file structure
+   * A qti-test loads a QTI3.0 assessmenttest.xml file from a package folder.
+   *
+   * ```plaintext
+   * Root/
+   * ├── index.html
+   * └── /assets/api/examples/
+   *     ├── assessmenttest.xml
+   *     └── imsmanifest.xml
+   *
    * ```
+   *
+   * ### Test components
+   *
+   * Use test components inside the qti-test component for added functionality.
+   * ### Test next
+   * `<test-next> | TestNext`
+   *
+   * ### Test prev
+   *
+   * `<test-prev> | TestPrev`
+   * ### Test components
+   *
+   * You can use normal class names to style the elements.
+   * And you can use the `test-prev` and `test-next` elements to navigate through the test.
    * ---
    *
    */
-  "qti-item": Partial<QtiItemProps & BaseProps & BaseEvents>;
+  "qti-test": Partial<QtiTestProps & BaseProps & BaseEvents>;
 
   /**
-   * `<item-container>` is a custom element designed for hosting the qti-assessment-item.
-   * The `qti-assessment-item` will be placed inside the shadow DOM of this element.
-   * The element loads the item from the provided URL and renders it inside the shadow DOM.
-   *
-   * ### Styling
-   * Add a class to the element for styling.
+   * `<test-container>` is a custom element designed for hosting the qti-assessment-item.
+   * The `qti-assessment-test` will be placed inside the shadow DOM of this element.
+   * The element loads the test from the provided URL and renders it inside the shadow DOM.
    *
    * ```html
-   * <qti-item>
-   *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
-   * </qti-item>
+   * <qti-test>
+   *   <test-container class="m-4 bg-white" test-url="./path/to/assessmenttest.xml"></test-container>
+   * </qti-test>
    * ```
    * ---
    *
    */
-  "item-container": Partial<ItemContainerProps & BaseProps & BaseEvents>;
+  "test-container": Partial<TestContainerProps & BaseProps & BaseEvents>;
 };

package/dist/qti-item/core/index.d.ts

@@ -0,0 +1,61 @@
+import * as lit_html from 'lit-html';
+import { LitElement } from 'lit';
+
+/**
+ * `<item-container>` is a custom element designed for hosting the qti-assessment-item.
+ * The `qti-assessment-item` will be placed inside the shadow DOM of this element.
+ * The element loads the item from the provided URL and renders it inside the shadow DOM.
+ *
+ * ### Styling
+ * Add a class to the element for styling.
+ *
+ * ```html
+ * <qti-item>
+ *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
+ * </qti-item>
+ * ```
+ */
+declare class ItemContainer extends LitElement {
+    /** URL of the item to load */
+    itemURL: string;
+    /** A parsed HTML document */
+    itemDoc: DocumentFragment;
+    /** The raw XML string */
+    itemXML: string;
+    /** Template content if provided */
+    private templateContent;
+    protected handleItemURLChange(): Promise<void>;
+    protected handleItemXMLChange(): void;
+    connectedCallback(): Promise<void>;
+    private initializeTemplateContent;
+    private applyStyles;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'item-container': ItemContainer;
+    }
+}
+
+/**
+ * `<qti-item>` is a custom element designed for rendering a single `qti-assessment-item`.
+ * It can also host some functionalities to interact with the item like scoring, showing feedback, etc.
+ * Placing a mandatory `<item-container>` inside '<qti-item>' will load or parse the item and render it.
+ * See `<item-container>` for more details.
+ *
+ * ```html
+ * <qti-item>
+ *   <item-container class="m-4 bg-white" item-url="./path/to/item.xml"></item-container>
+ * </qti-item>
+ * ```
+ */
+declare class QtiItem extends LitElement {
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qti-item': QtiItem;
+    }
+}
+
+export { ItemContainer, QtiItem };

package/dist/qti-item/core/index.js

@@ -0,0 +1,13 @@
+import {
+  ItemContainer,
+  QtiItem
+} from "../../chunk-QYN5S4EM.js";
+import "../../chunk-2CHF3TMY.js";
+import "../../chunk-2OA7E3E7.js";
+import "../../chunk-4YG2FPKK.js";
+import "../../chunk-44VE5POH.js";
+export {
+  ItemContainer,
+  QtiItem
+};
+//# sourceMappingURL=index.js.map

package/dist/qti-item/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}