@citolab/qti-components 7.0.2 → 7.0.3

package/dist/item.css

@@ -2346,20 +2346,6 @@ qti-response-declaration {
 
     & qti-gap {
 
-      &[enabled] {
-
-        /* Light theme override */
-        .qti-selections-light & {
-          border-color: var(--qti-light-border-active);
-        }
-
-        /* Dark theme override */
-        .qti-selections-dark & {
-          border-color: var(--qti-dark-border-active);
-        }
-        background-color: var(--qti-bg-active)
-      }
-
       &[disabled] {
 
         &:not(:empty) {
@@ -2377,6 +2363,20 @@ qti-response-declaration {
         outline: 4px solid var(--qti-disabled-bg)
       }
 
+      &[enabled] {
+
+        /* Light theme override */
+        .qti-selections-light & {
+          border-color: var(--qti-light-border-active);
+        }
+
+        /* Dark theme override */
+        .qti-selections-dark & {
+          border-color: var(--qti-dark-border-active);
+        }
+        background-color: var(--qti-bg-active)
+      }
+
       &[active] {
 
         /* Light theme override */
@@ -2759,12 +2759,22 @@ qti-response-declaration {
   }
 
   qti-match-interaction:not(.qti-match-tabular) {
+    &:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-active) qti-simple-match-set:first-of-type {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
     /* The draggables */
     & qti-simple-match-set:first-of-type {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start; /* Prevents children from stretching */
       gap: var(--qti-gap-size);
+      border: 2px solid transparent;
 
       & qti-simple-associable-choice {
 
@@ -3156,6 +3166,16 @@ qti-response-declaration {
   }
 
   qti-associate-interaction {
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
+      background-color: var(--qti-bg-active);
+    }
+
     & qti-simple-associable-choice, /* drags when in lightdom */
     &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
 

package/dist/loader/index.d.ts

@@ -1,4 +1,4 @@
-import { e as QtiAssessmentItem } from '../qti-simple-choice-DG8ImdPz.js';
+import { e as QtiAssessmentItem } from '../qti-simple-choice-UTrFa_RQ.js';
 import 'lit-html';
 import 'lit';
 import 'lit-html/directives/ref.js';

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

@@ -563,10 +563,6 @@ export type QtiAssociateInteractionProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  dragDropApi?: TouchDragAndDrop;
-  /**  */
-  configuration?: InteractionConfiguration;
-  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -644,10 +640,6 @@ export type QtiGapMatchInteractionProps = {
   /**  */
   correctResponse?: string | string[];
   /**  */
-  dragDropApi?: TouchDragAndDrop;
-  /**  */
-  configuration?: InteractionConfiguration;
-  /**  */
   value?: string | string[];
   /**  */
   "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
@@ -721,10 +713,6 @@ export type QtiGraphicGapMatchInteractionProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  dragDropApi?: TouchDragAndDrop;
-  /**  */
-  configuration?: InteractionConfiguration;
-  /**  */
   value?: string | string[];
   /**  */
   correctResponse?: string | string[];
@@ -779,6 +767,8 @@ export type QtiHotspotInteractionProps = {
 };
 
 export type QtiMatchInteractionProps = {
+  /**  */
+  class?: string;
   /**  */
   "response-identifier"?: string;
   /**  */
@@ -790,28 +780,10 @@ export type QtiMatchInteractionProps = {
   /**  */
   readonly?: boolean;
   /**  */
-  rows?: QtiSimpleAssociableChoice[];
-  /**  */
-  cols?: QtiSimpleAssociableChoice[];
-  /**  */
-  lastCheckedRadio?: HTMLInputElement | null;
-  /**  */
-  _response?: string | string[];
-  /**  */
   value?: string | string[];
   /**  */
-  correctOptions?: string[];
-  /**  */
-  handleRadioClick?: string;
-  /**  */
-  handleRadioChange?: string;
-  /**  */
   correctResponse?: string | string[];
   /**  */
-  dragDropApi?: TouchDragAndDrop;
-  /**  */
-  configuration?: InteractionConfiguration;
-  /**  */
   "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   "onqti-interaction-response"?: (e: CustomEvent<CustomEvent>) => void;
@@ -860,10 +832,6 @@ export type QtiOrderInteractionProps = {
   /**  */
   correctResponse?: string | string[];
   /**  */
-  dragDropApi?: TouchDragAndDrop;
-  /**  */
-  configuration?: InteractionConfiguration;
-  /**  */
   value?: string | string[];
   /**  */
   "onqti-register-interaction"?: (e: CustomEvent<CustomEvent>) => void;
@@ -1135,7 +1103,7 @@ export type QtiTestPartProps = {
 };
 
 export type QtiTestProps = {
-  /** the relative location to the QTI assessment.xml file */
+  /** 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;
@@ -2087,7 +2055,7 @@ export type CustomElements = {
    * ---
    *
    */
-  "qti-player": Partial<QtiTestProps & BaseProps & BaseEvents>;
+  "qti-test": Partial<QtiTestProps & BaseProps & BaseEvents>;
 
   /**
    * Represents a custom element for navigating to the next test item.

package/dist/{qti-simple-choice-DG8ImdPz.d.ts → qti-simple-choice-UTrFa_RQ.d.ts}

@@ -1,6 +1,6 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
-import { LitElement, CSSResultGroup, PropertyValueMap, PropertyValues } from 'lit';
+import { LitElement, CSSResultGroup, PropertyValueMap } from 'lit';
 import * as lit_html_directives_ref_js from 'lit-html/directives/ref.js';
 
 interface directedPair {
@@ -776,13 +776,8 @@ declare global {
 
 declare const QtiGapMatchInteraction_base: (abstract new (...args: any[]) => IInteraction) & typeof Interaction;
 declare class QtiGapMatchInteraction extends QtiGapMatchInteraction_base {
-    private observer;
-    private resizeObserver;
     static styles: CSSResultGroup;
     render(): lit_html.TemplateResult<1>;
-    firstUpdated(_changedProperties: PropertyValues): void;
-    disconnectedCallback(): void;
-    private updateMinDimensionsForDrowZones;
     set correctResponse(value: string | string[]);
 }
 declare global {
@@ -828,11 +823,7 @@ declare global {
 declare const QtiGraphicGapMatchInteraction_base: (abstract new (...args: any[]) => IInteraction) & typeof Interaction;
 declare class QtiGraphicGapMatchInteraction extends QtiGraphicGapMatchInteraction_base {
     static styles: CSSResultGroup;
-    private observer;
-    private resizeObserver;
     render(): lit_html.TemplateResult<1>;
-    firstUpdated(_changedProperties: PropertyValues): void;
-    private updateMinDimensionsForDrowZones;
     private positionHotspotOnRegister;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -894,17 +885,18 @@ declare global {
 declare const QtiMatchInteraction_base: (abstract new (...args: any[]) => IInteraction) & typeof Interaction;
 declare class QtiMatchInteraction extends QtiMatchInteraction_base {
     static styles: CSSResultGroup;
-    rows: QtiSimpleAssociableChoice[];
-    cols: QtiSimpleAssociableChoice[];
-    lastCheckedRadio: HTMLInputElement | null;
-    _response: string | string[];
+    protected rows: QtiSimpleAssociableChoice[];
+    protected cols: QtiSimpleAssociableChoice[];
+    protected lastCheckedRadio: HTMLInputElement | null;
+    class: string;
+    protected _response: string | string[];
     get value(): string[];
     set value(val: string[]);
-    correctOptions: string[];
     responseIdentifier: string;
+    protected correctOptions: string[];
     connectedCallback(): Promise<void>;
-    handleRadioClick: (e: any) => void;
-    handleRadioChange: (e: any) => void;
+    protected handleRadioClick: (e: any) => void;
+    protected handleRadioChange: (e: any) => void;
     set correctResponse(responseValue: string | string[]);
     render(): lit_html.TemplateResult<1>;
 }

package/dist/vscode.html-custom-data.json

@@ -619,6 +619,7 @@
       "name": "qti-match-interaction",
       "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction**\n- **qti-interaction-response**",
       "attributes": [
+        { "name": "class", "values": [] },
         { "name": "response-identifier", "values": [] },
         { "name": "min-associations", "values": [] },
         { "name": "max-associations", "values": [] },
@@ -851,12 +852,12 @@
       "references": []
     },
     {
-      "name": "qti-player",
+      "name": "qti-test",
       "description": "`<qti-test>` is a custom element designed for rendering and interacting with QTI (Question and Test Interoperability) tests.\n\nThis component leverages several mixins to provide functionality for loading, navigating, processing, and displaying QTI test assessments.\n\n### Example Usage\n\nMinimal markup:\n```html\n<qti-test test=\"./path/to/assessment.xml\">\n  <test-container></test-container>\n</qti-test>\n```\n\nWith navigation buttons:\n```html\n<qti-test >\n  <test-container test-url=\"./path/to/assessment.xml\"></test-container>\n  <div class=\"flex\">\n     <test-prev></test-prev>\n     <test-next></test-next>\n  </div>\n</qti-test>\n```\n\nYou can use normal class names to style the elements.\nAnd you can use the `test-prev` and `test-next` elements to navigate through the test.\n---\n",
       "attributes": [
         {
           "name": "testURL",
-          "description": "the relative location to the QTI assessment.xml file",
+          "description": "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.",
           "values": []
         }
       ],

package/package.json

@@ -21,7 +21,7 @@
   "engines": {
     "node": ">=20.0.0"
   },
-  "version": "7.0.2",
+  "version": "7.0.3",
   "main": "dist/index.js",
   "type": "module",
   "exports": {
@@ -36,7 +36,8 @@
     },
     "./item.css": "./dist/item.css",
     "./cdn/index.js": "./cdn/index.js",
-    "./cdn/index.global.js": "./cdn/index.global.js"
+    "./cdn/index.global.js": "./cdn/index.global.js",
+    "./react": "./dist//qti-components-jsx.d.ts"
   },
   "types": "./dist/qti-components/index.d.ts",
   "typesVersions": {
@@ -98,7 +99,8 @@
       "files": [
         "src/**/*.{ts}",
         "tsconfig.json",
-        "!src/**/*.{test,spec,stories}.ts"
+        "!src/**/*.{test,spec,stories}.ts",
+        "package.json"
       ]
     },
     "cem": {
@@ -232,7 +234,7 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.28.1"
   },
-  "customElements": "dist/custom-elements.json",
+  "customElements": "custom-elements.json",
   "bugs": {
     "url": "https://github.com/Citolab/qti-components/issues"
   },

package/readme.md

@@ -0,0 +1,55 @@
+# @citolab/qti-components
+
+<a href="https://www.repostatus.org/#wip"><img src="https://www.repostatus.org/badges/latest/wip.svg" alt="Project Status: WIP – Initial development is in progress, but there has not yet been a stable, usable release suitable for the public." /></a>
+
+[![npm version](https://badge.fury.io/js/%40citolab%2Fqti-components.svg)](https://badge.fury.io/js/%40citolab%2Fqti-components)
+[![License](https://img.shields.io/badge/license-GPL-blue.svg)](https://opensource.org/license/gpl-2-0/)
+
+@citolab/qti-components is a web component library that can be used to render 1EdTech QTI items.
+It's highly customizable and can be integrated in almost every web application.
+
+## Installation
+
+### CDN
+
+Import the components with the CDN version
+
+```html
+<script type="module">
+  import 'https://unpkg.com/@citolab/qti-components/cdn';
+</script>
+```
+
+### NPM
+
+Or use npm to install the package:
+
+```shell
+npm install @citolab/qti-components
+```
+
+To use @citolab/qti-components, you need to register the web components. By registering the web components, the browser knows how to display the item and create a fully functional test.
+
+```javascript
+import '@citolab/qti-components';
+```
+
+## Storybook
+
+Explore the complete description of supported QTI tags, examples, and the ability to interactively play with changing attributes of the QTI items in our [Storybook](https://qti-components.citolab.nl/).
+
+## Contributing
+
+Contributions are welcome! Please follow these guidelines when contributing:
+
+- Fork the repository and clone it to your local machine
+- Create a new branch for your feature or bug fix
+- Commit your changes with clear and concise messages
+- Push your changes to your forked repository
+- Open a pull request to the original repository
+
+## License
+
+This project is licensed under the [GPLv3 License](LICENSE).
+
+Please note that the licensing is GPLv3 if you want to use it in another way, feel free to ask!

package/README.md

@@ -1,85 +0,0 @@
-# @citolab/qti-components
-
-<a href="https://www.repostatus.org/#wip"><img src="https://www.repostatus.org/badges/latest/wip.svg" alt="Project Status: WIP – Initial development is in progress, but there has not yet been a stable, usable release suitable for the public." /></a>
-
-[![npm version](https://badge.fury.io/js/%40citolab%2Fqti-components.svg)](https://badge.fury.io/js/%40citolab%2Fqti-components)
-[![License](https://img.shields.io/badge/license-GPL-blue.svg)](https://opensource.org/license/gpl-2-0/)
-
-@citolab/qti-components is a web component library that can be used to render 1EdTech QTI items.
-It's highly customizable and can be integrated in almost every web application.
-
-## Installation
-
-Use npm to install the package:
-
-```shell
-npm install @citolab/qti-components
-```
-
-## Usage
-
-To use @citolab/qti-components, you need to register the web components and import the required CSS file. By registering the web components, the browser knows how to display the item and create a fully functional item.
-
-Here's a basic example:
-
-```javascript
-import * as QTI from 'https://unpkg.com/@citolab/qti-components@latest/dist/index.js';
-```
-
-```css
-@import 'https://unpkg.com/@citolab/qti-components@latest/dist/index.css';'
-```
-
-```html
-<qti-assessment-item identifier="choice" title="Unattended Luggage" adaptive="false" time-dependent="false">
-  <qti-response-declaration identifier="RESPONSE" cardinality="single" base-type="identifier">
-    <qti-correct-response>
-      <qti-value>ChoiceA</qti-value>
-    </qti-correct-response>
-  </qti-response-declaration>
-  <qti-outcome-declaration identifier="SCORE" cardinality="single" base-type="float">
-    <qti-default-value>
-      <qti-value>0</qti-value>
-    </qti-default-value>
-  </qti-outcome-declaration>
-  <qti-item-body>
-    <p>Look at the text in the picture.</p>
-    <p>
-      <img src="images/sign.png" alt="NEVER LEAVE LUGGAGE UNATTENDED" />
-    </p>
-    <qti-choice-interaction response-identifier="RESPONSE" shuffle="false" max-choices="1">
-      <qti-prompt>What does it say?</qti-prompt>
-      <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
-      <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
-      <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
-    </qti-choice-interaction>
-  </qti-item-body>
-  <qti-response-processing template="https://purl.imsglobal.org/spec/qti/v3p0/rptemplates/match_correct.xml" />
-</qti-assessment-item>
-```
-
-You can see a working example here [JSFiddle](https://jsfiddle.net/mrklein/s97Ld0gn).
-
-## Storybook
-
-Explore the complete description of supported QTI tags, examples, and the ability to interactively play with changing attributes of the QTI items in our [Storybook](https://qti-components.citolab.nl/).
-
-## Contributing
-
-Contributions are welcome! Please follow these guidelines when contributing:
-
-- Fork the repository and clone it to your local machine
-- Create a new branch for your feature or bug fix
-- Commit your changes with clear and concise messages
-- Push your changes to your forked repository
-- Open a pull request to the original repository
-
-## License
-
-This project is licensed under the [GPLv3 License](LICENSE).
-
-Please note that the licensing is GPLv3 if you want to use it in another way, feel free to ask!
-
-```
-
-```