https://github.com/citolab/qti-components
QTI item renderer web-components. Easy to use and highly customizable
https://github.com/citolab/qti-components
1edtech edtech qti webcomponents
Last synced: 2 months ago
JSON representation
QTI item renderer web-components. Easy to use and highly customizable
- Host: GitHub
- URL: https://github.com/citolab/qti-components
- Owner: Citolab
- License: gpl-3.0
- Created: 2023-06-06T08:30:29.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-25T14:12:25.000Z (4 months ago)
- Last Synced: 2026-02-25T15:08:00.024Z (4 months ago)
- Topics: 1edtech, edtech, qti, webcomponents
- Language: JavaScript
- Homepage: https://qti-components.citolab.nl/
- Size: 25.7 MB
- Stars: 15
- Watchers: 3
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# @citolab/qti-components
[](https://badge.fury.io/js/%40citolab%2Fqti-components)
[](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
import 'https://unpkg.com/@citolab/qti-components/cdn';
```
### 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/).
## Branch Preview Via StackBlitz
For pull requests, a bot comment includes one-click StackBlitz links that open the PR branch and start Storybook in-browser. Setup details and manual URL templates are documented in [docs/publishing.mdx](docs/publishing.mdx#pull-request-stackblitz-links).
## 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
## Publishing
Release and publish workflow details are documented in [docs/publishing.mdx](docs/publishing.mdx). Automated releases use Changesets on `main`.
## Third-Party Components
Note: This repository includes some third-party components solely for showcasing PCIs in Storybook. These components are not included in the published npm package. For licensing details, refer to the LICENSE file in the third-party directory.
## 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!