@citolab/qti-components 6.0.3-9 → 6.0.3

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -7,9 +7,12 @@
     "Sander Looise",
     "Marcel Hoekstra"
   ],
-  "license": "MIT",
+  "license": "GPLv3",
   "private": false,
-  "version": "6.0.3-9",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "version": "6.0.3",
   "type": "module",
   "main": "dist/qti-components/index.js",
   "exports": {
@@ -29,8 +32,9 @@
     "./qti-transform": {
       "import": "./dist/qti-transform/index.js"
     },
-    "./index.css": "./dist/themes/qti.css",
-    "./qti-custom-data.json": "./dist/vscode.html-custom-data.json"
+    "./index.css": {
+      "import": "./dist/index.css"
+    }
   },
   "types": "./dist/qti-components/index.d.ts",
   "typesVersions": {
@@ -63,7 +67,9 @@
     "build": "tsc && vite build",
     "build-lib": "ts-node --esm --project tsconfig.node.json scripts/build.ts",
     "storybook": "storybook dev -p 6006",
+    "deploy": "firebase deploy --only hosting:qti-components",
     "build-storybook": "storybook build",
+    "publish:latest": "npx np",
     "publish:next": "npx np --tag next",
     "test-storybook": "test-storybook",
     "cem": "cem analyze --watch",

package/readme.md

@@ -1,79 +1,101 @@
-npm create vite@latest
-npx storybook@latest init
-( copy all qti-components source code )
-npm i haunted
-npm i cheerio
-npm i -D sass
-npm i -D @storybook/testing-library
-npm i -D @storybook/addon-jest
-npm i -D @storybook/addon-interactions
-npm i -D @storybook/jest
-npm i -D @storybook/testing-library
-npm i -D @storybook/addon-styling
-npm i @lit-labs/context
-
--- build scripts
-npm i -D ts-node
-npm i -D @custom-elements-manifest/analyzer
-npm i -D tsup
-
-`tsconfig.json`
-
-```json
-  -- "module": "ESNext",
-  ++ "target": "es2017",
-
-  -- strict: "true"
-  ++ strict: "false"
-
-  -- "noUnusedLocals": true,
-  ++ "noUnusedLocals": false,
-  -- "noUnusedParameters": true,
-  ++ "noUnusedParameters": false,
-
-  ++ "esModuleInterop": true,
-  ++ "resolveJsonModule": true
+# @citolab/qti-components
+
+[![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
 ```
 
-`main.ts`
+## 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.
 
-```ts
-  ++ staticDirs: ['../src/assets'],
+Here's a basic example:
+
+```javascript
+import * as QTI from 'https://unpkg.com/@citolab/qti-components@next/dist/index.js';
+```
 
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    ++ "@storybook/addon-jest",
-    ++ "@storybook/addon-interactions",
-  ],
+```css
+@import 'https://unpkg.com/@citolab/qti-components@next/dist/index.css';'
 ```
 
-`preview.ts`
+```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>
 
-```ts
-++ import '../src/styles.css';
 ```
 
-`preview.ts`
+You can see a working example here [JSFiddle](https://jsfiddle.net/mrklein/s97Ld0gn). 
 
-```ts
-++ import { setCustomElementsManifest } from '@storybook/web-components';
-++ import customElements from '../custom-elements.json';
-++ setCustomElementsManifest(customElements);
+For a bit more advanced example using React and the QTIItem React wrapper from the package, you can check out this [StackBlitz](https://stackblitz.com/edit/qti-player). The item is integrated into a React component like this:
+
+```jsx
+<QtiItem
+  className="w-full h-[480px] bg-white shadow p-4"
+  responses={itemResponses.current.get(itemId!)}
+  qtiinteractionchanged={({ detail }: { detail: any }) => {
+    storeResponse(detail.item, detail.response, detail.responseIdentifier);
+  }}
+  qtioutcomechanged={(e: any) => {
+    itemOutcomes.current.set(items[itemIndex].identifier, e.detail.value);
+  }}
+  qtiitemconnected={(e: any) => {
+    qtiItem.current = e.target;
+    setItemId(e.detail.identifier);
+  }}
+  xml={itemXML}
+></QtiItem>
 ```
 
-`preview.ts`
-
-```ts
-const preview: Preview = {
-++ export const decorators = [
-++   withThemeByClassName({
-++     themes: {
-++       ims: "qti-theme-ims",
-++       subtle: "qti-theme-subtle",
-++       raised:"qti-theme-raised"
-++     },
-++     defaultTheme: "ims",
-++   }),
-++ ];
+## 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!
 ```