JClic.js

JClic.js is an HTML5 player of JClic activities. See a demo on how it works.

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.

JClic is a Java application that runs on Linux, Windows and Mac OS. Full source code and documentation 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 created with 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 modules encapsulated in npm packages. First of all, you must have Node.js (which includes 'npm') installed 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) and in production mode (serving the latest build on /dist)

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.

Player

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.
  • DefaultSkin: is the basic implementation of Skin.
  • BlueSkin, OrangeSkin, GreenSkin, MiniSkin and SimpleSkin: are the implementations of the stock skins of JClic.
• 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.

Document classes

JClicProject encapsulates all data needed to play JClic activities. Its main components are:

• ProjectSettings
• 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:

• SimpleAssociation
  • ComplexAssociation
• WrittenAnswer
• MemoryGame
• Explore
• Identify
• InformationScreen
• DoublePuzzle
• ExchangePuzzle
• HolePuzzle
• TextActivityBase (see below)
  • FillInBlanks
  • Complete
  • IdentifyText
  • OrderText
• CrossWord
• WordSearch

All classes derived from TextActivityBase have:

• One TextActivityDocument
• An Evaluator

At run time, all classes derived from Activity generate a specific ActivityPanel, that is a real DOM object with wich users interact.

Utility classes

AWT:
AWT contains some classes similar to those defined in Java's Abstract Window Toolkit:

• Font
• Gradient
• Stroke
• Point
• Dimension
• Shape
  • Rectangle
  • Ellipse
  • Path: formed by PathStroke elements
• Action
• Timer
• Container

Boxes:
AbstractBox is a special class derived from AWT.Rectangle that has the following subclasses:

• ActiveBox: an AbstractBox with active content (see below)
• BoxBag: a collection of AbstractBox objects.
  • ActiveBoxBag: a collection of ActiveBox objects.
    • ActiveBoxGrid: a special case of ActiveBoxBag with boxes distributed in rows and columns.
• TextGrid: a grid of single letters.

Box content:

• 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.

Shapers:

• Shaper: describes how to cut a panel in multiple cells.
  • Rectangular: divides the panel in rectangular cells.
  • Holes: a free-form shaper.
  • JigSaw: generates cells with teeth and slots.
    • ClassicJigSaw
    • TriangularJigSaw

Media:

• 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

Automation:

• 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.
  • ActivitySequenceJump: used by ActivitySequenceElement objects.
  • ConditionalJumpInfo: used to decide where to jump, based on the current timing and scoring

Miscellaneous utility classes:

• BoxConnector: Used to link two cells with a thin line dragged by the user.
• Utils: Miscellaneous constants and functions.

Sponsors that make possible JClic.js

JClic.js is an open-source project sustained by XTEC, the Telematic Network of the Catalan Ministry of Education.

Checking the operation of JClic.js on different browsers and platforms is possible thanks to virtual machines provided by BrowserStack.

The production releases of JClic.js are smoothly distributed to the final users thanks to the JSDelivr network of servers.

All project files are also available through cdnjs, a very powerful content delivery service powered by Cloudflare.

We use Transifex as a platform to translate 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.