@citolab/qti-components 7.0.3 → 7.0.5

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[];
@@ -501,6 +497,23 @@ export type QtiChoiceInteractionProps = {
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type QtiUploadInteractionProps = {
+  /**  */
+  "response-identifier"?: string;
+  /**  */
+  disabled?: boolean;
+  /**  */
+  readonly?: boolean;
+  /**  */
+  value?: string | string[];
+  /**  */
+  correctResponse?: string | string[];
+  /**  */
+  "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type QtiOutcomeProcessingProps = {};
 
 export type QtiPortableCustomInteractionProps = {
@@ -557,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 = {
@@ -604,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 = {
@@ -632,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 = {
@@ -672,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[];
@@ -707,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 = {
@@ -734,8 +718,6 @@ export type QtiGraphicOrderInteractionProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  choiceOrdering?: boolean;
-  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -784,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 = {
@@ -816,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[];
   /**  */
@@ -834,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 = {};
@@ -874,10 +852,6 @@ export type QtiSelectPointInteractionProps = {
 };
 
 export type QtiSliderInteractionProps = {
-  /**  */
-  "step-label"?: boolean;
-  /**  */
-  reverse?: boolean;
   /**  */
   "lower-bound"?: number;
   /**  */
@@ -885,27 +859,9 @@ export type QtiSliderInteractionProps = {
   /**  */
   step?: number;
   /**  */
-  "response-identifier"?: string;
-  /**  */
-  disabled?: boolean;
-  /**  */
-  readonly?: boolean;
-  /**  */
-  csLive?: CSSStyleDeclaration;
-  /**  */
-  _handleDisabledChange?: string;
-  /**  */
-  _handleReadonlyChange?: string;
-  /**  */
-  value?: string | string[];
+  value?: string;
   /**  */
-  response?: string;
-  /**  */
-  correctResponse?: string | string[];
-  /** emitted when the interaction wants to register itself */
-  "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
-  /** emitted when the interaction changes */
-  "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
+  onchange?: (e: CustomEvent<Event>) => void;
 };
 
 export type QtiCustomOperatorProps = {
@@ -1033,6 +989,17 @@ export type TestElementProps = {
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type QtiItemProps = {};
+
+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 QtiAssessmentItemRefProps = {
   /**  */
   category?: string | undefined;
@@ -1103,8 +1070,6 @@ export type QtiTestPartProps = {
 };
 
 export type QtiTestProps = {
-  /** the relative location to the QTI assessment.xml file ### Features - **Dynamic Template Loading**: If a `<template>` element is included as a child of `<qti-test>`, its content is dynamically appended to the shadow DOM. */
-  testURL?: string;
   /**  */
   context?: TestContext;
 };
@@ -1117,10 +1082,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;
@@ -1134,29 +1095,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;
@@ -1168,18 +1119,18 @@ 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 = {
@@ -1192,28 +1143,11 @@ 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 = {
-  /**  */
-  identifier?: string | undefined;
-  /**  */
-  href?: string | undefined;
-  /**  */
-  xmlDoc?: DocumentFragment;
-  /**  */
-  assessmentItem?: QtiAssessmentItem | null;
-  /**  */
-  "onqti-item-connected"?: (e: CustomEvent<CustomEvent>) => void;
-};
-
 export type CustomElements = {
   /**
    *
@@ -1613,6 +1547,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
+   *
+   * ### **Methods:**
+   *
    */
   "qti-hottext-interaction": Partial<QtiHottextInteractionProps & BaseProps & BaseEvents>;
 
@@ -1647,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
@@ -1665,6 +1605,17 @@ export type CustomElements = {
    */
   "qti-choice-interaction": Partial<QtiChoiceInteractionProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **qti-interaction-response**
+   * - **qti-register-interaction**
+   */
+  "qti-upload-interaction": Partial<QtiUploadInteractionProps & BaseProps & BaseEvents>;
+
   /**
    *
    * ---
@@ -1699,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>;
 
@@ -1722,8 +1673,6 @@ export type CustomElements = {
    *
    * ### **Events:**
    *  - **end-attempt**
-   * - **qti-register-interaction**
-   * - **qti-interaction-response**
    */
   "qti-end-attempt-interaction": Partial<QtiEndAttemptInteractionProps & BaseProps & BaseEvents>;
 
@@ -1733,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>;
 
@@ -1765,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>;
 
@@ -1778,6 +1727,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
+   *
+   * ### **Methods:**
+   *
    */
   "qti-graphic-order-interaction": Partial<QtiGraphicOrderInteractionProps & BaseProps & BaseEvents>;
 
@@ -1789,6 +1741,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **qti-register-interaction**
    * - **qti-interaction-response**
+   *
+   * ### **Methods:**
+   *
    */
   "qti-hotspot-interaction": Partial<QtiHotspotInteractionProps & BaseProps & BaseEvents>;
 
@@ -1798,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>;
 
@@ -1820,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>;
 
@@ -1851,30 +1806,12 @@ export type CustomElements = {
   "qti-select-point-interaction": Partial<QtiSelectPointInteractionProps & BaseProps & BaseEvents>;
 
   /**
-   * The SliderInteraction.Type (qti-slider-interaction) presents the candidate with a control for selecting a numerical value between a lower and upper bound.
+   *
    * ---
    *
    *
    * ### **Events:**
-   *  - **qti-register-interaction** - emitted when the interaction wants to register itself
-   * - **qti-interaction-response** - emitted when the interaction changes
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot where <qti-simple-choice> must be placed.
-   * - **prompt** - slot where the prompt is placed.
-   *
-   * ### **CSS Properties:**
-   *  - **--show-value** - shows the current value while sliding _(default: undefined)_
-   * - **--show-ticks** - shows the ticks according to steps _(default: undefined)_
-   * - **--show-bounds** - shows value for lower and upper boundary _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **slider** - -- slider inluding, bounds and ticks and value, use it for paddings and margins
-   * - **bounds** - -- div for bounds, containing two divs for with min, and max bounds value
-   * - **ticks** - -- div for ticks, use lineair gradient and exposed css variables for styling
-   * - **rail** - -- div for rail, style according to needs
-   * - **knob** - -- div, should be relative or absolute
-   * - **value** - -- div, containing value
+   *  - **change**
    */
   "qti-slider-interaction": Partial<QtiSliderInteractionProps & BaseProps & BaseEvents>;
 
@@ -1985,6 +1922,40 @@ export type CustomElements = {
    */
   "test-element": Partial<TestElementProps & 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>;
+
+  /**
+   * `<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>;
+
   /**
    *
    * ---
@@ -2032,24 +2003,41 @@ export type CustomElements = {
    *
    * ### Example Usage
    *
-   * Minimal markup:
-   * ```html
-   * <qti-test test="./path/to/assessment.xml">
-   *   <test-container></test-container>
-   * </qti-test>
-   * ```
+   * Minimal example including navigation:
    *
-   * With navigation buttons:
    * ```html
-   * <qti-test >
+   * <qti-test>
    *   <test-container test-url="./path/to/assessment.xml"></test-container>
-   *   <div class="flex">
+   *   <nav class="flex">
    *      <test-prev></test-prev>
    *      <test-next></test-next>
-   *   </div>
+   *   </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.
    * ---
@@ -2102,16 +2090,13 @@ export type CustomElements = {
   "test-item-link": Partial<TestItemLinkProps & BaseProps & BaseEvents>;
 
   /**
-   * `<test-container>` is a custom element designed for hosting the qti-assessment-test.
+   * `<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.
-   *
-   * ### Example Usage
-   * The `test-container` element to hosts the visual representation of the items.
-   * You can style the container by adding a class to the element.
+   * The element loads the test from the provided URL and renders it inside the shadow DOM.
    *
    * ```html
-   * <qti-test testurl="./path/to/assessment.xml">
-   *   <test-container class="container bg-white m-2"></test-container>
+   * <qti-test>
+   *   <test-container class="m-4 bg-white" test-url="./path/to/assessmenttest.xml"></test-container>
    * </qti-test>
    * ```
    * ---
@@ -2129,14 +2114,4 @@ export type CustomElements = {
    * - **qti-request-test-item**
    */
   "test-paging-buttons-stamp": Partial<TestPagingButtonsStampProps & BaseProps & BaseEvents>;
-
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **qti-item-connected**
-   */
-  "qti-item": Partial<QtiItemProps & BaseProps & BaseEvents>;
 };

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

@@ -0,0 +1,3 @@
+export { ItemContainer } from './item-container.js';
+import 'lit-html';
+import 'lit';