# JClic.js
[](https://badge.fury.io/js/jclic)
[](https://cdnjs.com/libraries/jclic.js)
[](https://www.jsdelivr.com/package/npm/jclic)
[](https://gitter.im/projectestac/jclic.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[JClic.js](https://github.com/projectestac/jclic.js) is an HTML5 player of [JClic](https://github.com/projectestac/jclic) activities. See a [demo](https://clic.xtec.cat/projects/demo_eng/jclic.js/index.html) on how it works.
## JClic and JClic-repo
[JClic](http://clic.xtec.cat) is a free software project from the [Catalan Educational Telematic Network](http://www.xtec.cat) (XTEC) for creating various types of interactive activities such as associations, puzzles, text activities, crosswords or puzzles, from elements of text, graphics and multimedia.
The program includes an authoring tool to create activities, a player and a reporting system that stores the results obtained by students. All these components, along with some guides and tutorials on how to create activities, are available in the [clicZone](http://clic.xtec.cat/en/jclic/download.htm).
JClic is a Java application that runs on Linux, Windows and Mac OS. Full [source code](https://github.com/projectestac/jclic) and [documentation](http://projectestac.github.io/jclic/) are available on GitHub.
Many teachers from different countries have used JClic to create interactive materials for a wide variety of levels, subjects, languages and curriculum areas. Some of these materials have been collected in a huge [library](https://clic.xtec.cat/repo) created with [jclic-repo](https://github.com/projectestac/jclic-repo), another open source project that will facilitate the publication of collections of JClic projects in static web hosting services.
## How to build JClic.js
JClic.js uses [Node.js](https://nodejs.org/) modules encapsulated in [npm](https://www.npmjs.com/) packages. First of all, you must have Node.js (which includes 'npm') [installed](https://nodejs.org/download/) on your system.
To install the required packages, just go to the project's root directory and write:
```
npm ci
```
This will install jQuery, Webpack and other needed components into `node_modules`
To build jclic.js, just invoke:
```
npm run build
```
This will generate the main file `dist/jclic.min.js` (along with other files useful for development)
To test and debug the resulting bundle, launch the webpack dev server:
```
npm start
```
This will launch a local HTTP server allowing to choose between pages in development mode (bundle build dynamically by [webpack-dev-server](https://webpack.js.org/configuration/dev-server/)) and in production mode (serving the latest build on `/dist`)
Full API documentation of jclic.js is available at: http://projectestac.github.io/jclic.js/doc
The project is also available as an [NPM](https://www.npmjs.com/package/jclic) package.
## Direct download
The latest version of the compiled and minified script `jclic.min.js` is currently available at the following locations:
- https://unpkg.com/jclic/dist/jclic.min.js
- https://clic.xtec.cat/dist/jclic.js/jclic.min.js
- https://cdn.jsdelivr.net/npm/jclic@latest/dist/jclic.min.js
- https://cdnjs.com/libraries/jclic.js
## Components
JClic.js makes use of:
* [jQuery](https://jquery.com/) to parse XML documents and manage DOM objects
* [JSZip](https://stuk.github.io/jszip/) to extract contents from "jclic.zip" files
* [script.js](https://github.com/ded/script.js) to read JClic projects from local file systems as JSONP
* [webfontloader](https://github.com/typekit/webfontloader) to dynamically load web fonts as needed
* [MidiPlayerJS](https://github.com/grimmdude/MidiPlayerJS), [soundfont-player](https://github.com/danigb/soundfont-player), [audio-loader](https://github.com/audiojs/audio-loader) and [sample-player](https://github.com/danigb/sample-player) to process and play MIDI files
The build process of JClic.js makes use of:
* [npm](https://www.npmjs.com/) (the package manager of [Node.js](https://nodejs.org/)) to build, install, update and track package dependencies
* [ESLint](https://eslint.org/) to check for errors and lint the source code
* [webpack](https://webpack.js.org/) to bundle all components together
* [Babel](https://babeljs.io/) to make it also compatible with old versions of some browsers
* [terser](https://terser.org/) to minimize the size of the final deliverable script
* [JSDoc](http://usejsdoc.org/) and [ink-bootstrap](https://github.com/docstrap/docstrap) to build the [API docs](http://projectestac.github.io/jclic.js/doc)
## Sponsors that make possible JClic.js
[](http://www.xtec.cat)
JClic.js is an open-source project sustained by [XTEC](http://www.xtec.cat), the Telematic Network of the Catalan Ministry of Education.
[](https://www.browserstack.com)
Checking the operation of JClic.js on different browsers and platforms is possible thanks to virtual machines provided by [BrowserStack](https://www.browserstack.com).
[](http://www.jsdelivr.com/projects/jclic.js)
The production releases of JClic.js are smoothly distributed to the final users thanks to the [JSDelivr](http://www.jsdelivr.com/projects/jclic.js) network of servers.
[](https://cdnjs.com/libraries/jclic.js)
All project files are also available through [cdnjs](https://cdnjs.com/about), a very powerful content delivery service powered by [Cloudflare](https://www.cloudflare.com).
[](https://github.com/projectestac/jclic.js/blob/master/TRANSLATIONS.md)
We use [Weblate](https://hosted.weblate.org/projects/jclic/jclicjs/) as a platform to translate JClic.js into many languages. Please read [TRANSLATIONS.md](https://github.com/projectestac/jclic.js/blob/master/TRANSLATIONS.md) if you want to contribute to the project creating a new translation or improving the existing ones.