@citolab/qti-components 7.0.1 → 7.0.3

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": [] },
@@ -754,6 +755,7 @@
       "name": "test-element",
       "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction**\n- **qti-interaction-response**",
       "attributes": [
+        { "name": "class", "values": [] },
         {
           "name": "shuffle",
           "description": "<span style=\"color:blue\">some *blue* text</span>. Does not work in storybook",
@@ -769,6 +771,7 @@
       "name": "test-element",
       "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction**\n- **qti-interaction-response**",
       "attributes": [
+        { "name": "class", "values": [] },
         {
           "name": "shuffle",
           "description": "<span style=\"color:blue\">some *blue* text</span>. Does not work in storybook",
@@ -784,6 +787,7 @@
       "name": "test-element",
       "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction**\n- **qti-interaction-response**",
       "attributes": [
+        { "name": "class", "values": [] },
         {
           "name": "shuffle",
           "description": "<span style=\"color:blue\">some *blue* text</span>. Does not work in storybook",
@@ -795,15 +799,6 @@
       ],
       "references": []
     },
-    {
-      "name": "qti-item",
-      "description": "\n---\n\n\n### **Events:**\n - **qti-item-connected**",
-      "attributes": [
-        { "name": "identifier", "values": [] },
-        { "name": "href", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "qti-assessment-item-ref",
       "description": "\n---\n\n\n### **Events:**\n - **qti-assessment-item-ref-connected**",
@@ -857,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": []
         }
       ],
@@ -909,6 +904,15 @@
         { "name": "skip-on-category", "values": [] }
       ],
       "references": []
+    },
+    {
+      "name": "qti-item",
+      "description": "\n---\n\n\n### **Events:**\n - **qti-item-connected**",
+      "attributes": [
+        { "name": "identifier", "values": [] },
+        { "name": "href", "values": [] }
+      ],
+      "references": []
     }
   ]
 }

package/package.json

@@ -21,51 +21,35 @@
   "engines": {
     "node": ">=20.0.0"
   },
-  "version": "7.0.1",
+  "version": "7.0.3",
+  "main": "dist/index.js",
   "type": "module",
   "exports": {
-    "./qti-components": {
-      "import": "./dist/qti-components/index.js",
-      "require": "./dist/qti-components/index.cjs"
+    ".": {
+      "import": "./dist/index.js"
     },
-    "./qti-transformers": {
-      "import": "./dist/qti-transformers/index.js",
-      "require": "./dist/qti-transformers/index.cjs"
+    "./transformers": {
+      "import": "./dist/transformers/index.js"
     },
-    "./qti-item": {
-      "import": "./dist/qti-item/index.js",
-      "require": "./dist/qti-item/index.cjs"
-    },
-    "./qti-test": {
-      "import": "./dist/qti-test/index.js",
-      "require": "./dist/qti-test/index.cjs"
-    },
-    "./qti-loader": {
-      "import": "./dist/qti-loader/index.js",
-      "require": "./dist/qti-loader/index.cjs"
+    "./loader": {
+      "import": "./dist/loader/index.js"
     },
     "./item.css": "./dist/item.css",
-    "./cdn/index.js": "./dist/cdn/index.js",
-    "./cdn/index.min.js": "./dist/cdn/index.min.js",
-    "./cdn/index.global.js": "./dist/cdn/index.global.js"
+    "./cdn/index.js": "./cdn/index.js",
+    "./cdn/index.global.js": "./cdn/index.global.js",
+    "./react": "./dist//qti-components-jsx.d.ts"
   },
   "types": "./dist/qti-components/index.d.ts",
   "typesVersions": {
     "*": {
-      "qti-components": [
-        "./dist/qti-components/index.d.ts"
-      ],
-      "qti-transformers": [
-        "./dist/qti-transformers/index.d.ts"
+      ".": [
+        "./dist/index.d.ts"
       ],
-      "qti-item": [
-        "./dist/qti-item/index.d.ts"
+      "transformers": [
+        "./dist/transformers/index.d.ts"
       ],
-      "qti-test": [
-        "./dist/qti-test/index.d.ts"
-      ],
-      "qti-loader": [
-        "./dist/qti-loader/index.d.ts"
+      "loader": [
+        "./dist/loader/index.d.ts"
       ]
     }
   },
@@ -75,20 +59,21 @@
   ],
   "scripts": {
     "storybook": "wireit",
-    "watch:build": "npm run build --watch",
+    "storybook:docs": "wireit",
+    "build:watch": "npm run build --watch",
     "npm:publish": "np",
     "---": "-",
     "build": "wireit",
     "test": "wireit",
     "attw": "wireit",
-    "lint": "wireit",
+    "lint": "eslint src/**/*.ts",
     "cem": "wireit",
+    "css": "wireit",
     "act": "act",
     "vite": "vite",
     "stylelint": "stylelint \"src/**/*.css\"",
     "build-storybook": "storybook build",
     "storybook:test": "test-storybook",
-    "storybook:docs": "wireit",
     "storybook:docs:build": "wireit",
     "chromatic": "node chromatic-runner.cjs",
     "----hooks----": "-",
@@ -99,7 +84,7 @@
     "storybook": {
       "command": "storybook dev -p 6006",
       "dependencies": [
-        "cem:watch"
+        "storybook:cem:watch"
       ]
     },
     "build": {
@@ -112,16 +97,23 @@
         "css"
       ],
       "files": [
-        "src/**/*.{ts,css}",
+        "src/**/*.{ts}",
+        "tsconfig.json",
+        "!src/**/*.{test,spec,stories}.ts",
+        "package.json"
+      ]
+    },
+    "cem": {
+      "command": "cem analyze",
+      "files": [
+        "src/**/*.ts",
         "!src/**/*.{test,spec,stories}.ts"
-      ],
-      "output": [
-        "dist/**/*",
-        "cdn/**/*",
-        "!dist/item.css",
-        "!dist/vscode.*",
-        "!dist/qti-components-jsx.d.ts",
-        "!dist/custom-element-eslint-rules.js"
+      ]
+    },
+    "css": {
+      "command": "postcss src/item.css -d dist -m",
+      "files": [
+        "src/**/*.css"
       ]
     },
     "test": {
@@ -133,7 +125,7 @@
     "storybook:docs": {
       "command": "storybook dev --docs -c .storybook-docs",
       "dependencies": [
-        "cem:watch"
+        "storybook:cem:watch"
       ]
     },
     "storybook:docs:build": {
@@ -142,13 +134,7 @@
         "cem"
       ]
     },
-    "lint": {
-      "command": "eslint --color --cache --cache-location .eslintcache src/lib/**/*.ts"
-    },
-    "cem": {
-      "command": "cem analyze"
-    },
-    "cem:watch": {
+    "storybook:cem:watch": {
       "command": "cem analyze --watch",
       "service": {
         "readyWhen": {
@@ -156,11 +142,8 @@
         }
       }
     },
-    "css": {
-      "command": "postcss src/item.css -d dist -m"
-    },
     "attw": {
-      "command": "attw --pack --exclude-entrypoints ./item.css ./cdn/index.js ./cdn/index.global.js ./cdn/index.min.js",
+      "command": "attw --profile esm-only --pack --exclude-entrypoints  ./item.css ./cdn/index.js ./cdn/index.global.js ./cdn/index.min.js",
       "dependencies": [
         "build"
       ]

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!
-
-```
-
-```