JClic and JClic-repo
JClic is a free software project from the Catalan Educational Telematic Network (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.
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 created with jclic-repo, another open source project that will facilitate the publication of collections of JClic projects in static web hosting services.
JClic project files
Groups of single activities are often grouped in JClic projects and organized in one or more sequences (lists of activities that must be performed in a specific order). The resulting set of activities, sequences and media elements are packaged into JClic project files (files with extension ".jclic.zip").
JClic.js makes use of:
- jQuery to parse XML documents and manage DOM objects
- JSZip to extract contents from "jclic.zip" files
- clipboard.js to copy reports data into the user's clipboard
- i18next to deal with messages translated into different languages
- screenfull.js to allow activities play at full screen
- script.js to read JClic projects from local file systems as JSONP
- webfontloader to dynamically load web fonts as needed
- MidiPlayerJS, soundfont-player, audio-loader and sample-player to process and play MIDI files
The build brocess of JClic.js is based on:
- npm (the package manager of Node.js) to build, install, update and track package dependencies
- ESLint to check for errors and lint the source code
- webpack to bundle all components together
- Babel to make it also compatible with old versions of some browsers
- UglifyJS to minimize the size of the final deliverable script
- Live Server to test and debug
- JSDoc and ink-bootstrap to build the API docs
How to set-up the development environtment
To install the required packages, just go to the project's root directory and write:
This will install jQuery, webpack and other needed components into
To build jclic.js, just invoke:
npm run build
This will generate the file
To test this resulting bundle and see the demo on your browser, launch the test server:
You can also launch the program in "unbundled" mode, directly invoking the source scripts, useful for debug purposes:
npm run debug
You can also build this documentation running
npm run build-doc
JClic.js main classes
JClic.js is organized in three main groups of classes: Player, Document and Utilities. In addition to this, the main JClic class provides methods to read JClic project documents, build players, launch activities and communicate with external reporting systems.
JClicPlayer loads JClic project files, manages the user interaction and acts as a interface between the browser and JClic classes for multiple functions. The player has:
- Skin: manages the visual appareance. Can have up to three Counter objects.
- PlayerHistory: used to track the user's navigation between activities.
- Reporter: Used to collect and display scores, times and other data generated by users while playing activities.
- TCPReporter: Special case of Reporter used to connect with external reporting systems like [JClic Reports] (http://clic.xtec.cat/en/jclic/reports/index.htm) or the JClic module for Moodle.
- SCORM: Utility functions to interact with SCORM 1.2 and 2004 when available
- SessionStorageReporter: writes the report as a persistent data into the browser session or local storage.
JClicProject encapsulates all data needed to play JClic activities. Its main components are:
- A collection of Activity objects (see below)
- An ActivitySequence formed by ActivitySequenceElement objects.
- A MediaBag formed by MediaBagElement objects.
The Activity class has the following subclasses:
- TextActivityBase (see below)
All classes derived from TextActivityBase have:
AWT contains some classes similar to those defined in Java's Abstract Window Toolkit:
- ActiveBox: an AbstractBox with active content (see below)
- BoxBag: a collection of AbstractBox objects.
- TextGrid: a grid of single letters.
- ActiveBoxContent: encapsulates the content of a single ActiveBox.
- BoxBase: contains style specs (color, gradient, border, font, size...) common to one or more ActiveBoxContent objects. Also used by TextActivityDocument to encapsulate text styles.
- ActiveBagContent: a collection of ActiveBoxContent objects.
- TextGridContent: encapsulates the content of a TextGrid object.
- Shaper: describes how to cut a panel in multiple cells.
- EventSounds: a collection of EventSoundsElement
- ActiveMediaBag: a collection of MediaContent
- ActiveMediaPlayer: performs playing of MediaContent
- AudioBuffer: Provides sound recording (usually from the microphone) so, in language activities, students can compare their pronunciation with a pattern.
- MidiAudioPlayer: performs playing of MIDI files
- AutoContentProvider: builds dynamic content for activities
- Arith: random generator of menthal arithmetics operations
Jump between sequence points:
- JumpInfo: stores information about what to do when an activity finishes or when the user clicks on a link or button.
Miscellaneous utility classes:
- BoxConnector: Used to link two cells with a thin line dragged by the user.
- Utils: Miscellaneous constants and functions.
- i18n: Internationalization utilities.
Sponsors that make possible JClic.js
JClic is an open-source project supported by XTEC, the Telematic Network of the Catalan Ministry of Education
We use Transifex as a platform for translations of JClic.js into many languages. Please read TRANSLATIONS.md if you want to contribute to the project creating a new translation or improving the existing ones.
Checking the operation of JClic.js on different browsers and platforms is possible thanks to BrowserStack