projectestac/jclic.js

An HTML5 player of JClic activities

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)

Full API documentation of jclic.js is available at: http://projectestac.github.io/jclic.js/doc

The project is also available as an NPM 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 to parse XML documents and manage DOM objects
• JSZip to extract contents from "jclic.zip" files
• clipboard-polyfill to copy reports data into the user's clipboard
• 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 process of JClic.js makes use of:

• 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
• terser to minimize the size of the final deliverable script
• JSDoc and ink-bootstrap to build the API docs

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.

jclic.js's Issues

Arith: treat "x" value in operator's limit as 0

The LIM_CH array of strings defined in edu.xtec.jclic.automation.arith.Operator.java makes use of "x" to indicate "0". This strange behavior was probably inherited from Clic 3.0 for Windows, to distinguish between "undefined" and "0".

JClic.js should take in account this special case as an exception when parsing ".jclic" files.

This issue was originally reported by @belekes in the JClic repository.

jclic.js not working using Safari in iOS

jclic.js is not working when I use Safari in any iOS device. This means that if I try to put a JClic activity inside my iOS app or I open within the Safari browser, the screen is always blank. I need to use other browsers like Chrome, but Safari is the default one and I cannot change it :(

LIbrery version 1.1.12 crashes on Safari

Hi

JClic projects crashes on Safari browser, The error is below:

TypeError: 'undefined' is not a constructor (evaluating 'new Audio(n)')

Error is localized on the following code

if (Utils.startsWith(fileName, 'data:')) this.audio = new Audio(fileName);

This error cause that JClic librarry does not supported by Safari browser (mobile and laptops devices)

Thanks

In HTML5 mode, the letters are not centered in the middle of the cell

I developed a game in JCLIC WORD SEARCH that has a display problem in HTML5 mode. The letters are not centered in the middle of the cell as they appear in JCLIC PLAYER. I can modify something in the generated files to correct this problem. Thanks

Time delay not working as expected in text activities

Some text activities automatically advance without been solved:

"Hay actividades tipo Texto Rellenar Agujeros que avanzan automáticamente. La actividad en concreto la tengo configurada para que avance a los 5 segundos cuando esté resuelta de manera correcta, pero avanza a los 5 segundos de iniciarse"

This issue was originally reported by @JesusMey in JClic repository.

Url don't open in activity

Open by @Okaryn in projectestac/jclic#15

Hi,

If I select Url for an activ content, the location is not open (manually or automaticaly)

Exemple for a simple activity :

 <activity class="@panels.InformationScreen" name="Wohnen 7" code="">
   <description />
   <messages>
    <cell type="initial">
     <style>
      <font family="Comic Sans MS" size="20" bold="true" italic="true" />
      <color foreground="0xFFFF66" background="0x9999FF" />
     </style>
     <media type="URL" level="1" file="http://learningapps.org/display?v=p9d95g9rj01" />
     <p>Clique ici... pour remettre les questions dans l'ordre</p>
    </cell>
   </messages>
   <settings margin="0" report="false">
    <container bgColor="0x9999FF">
     <counters time="false" actions="true" score="true" />
    </container>
    <window bgColor="0x9999FF" border="false" />
   </settings>
   <cells rows="1" cols="1" cellWidth="807.0" cellHeight="509.0" border="true">
    <style borderStroke="3.6" markerStroke="2.7">
     <font family="Comic Sans MS" size="28" bold="true" />
     <color foreground="0x9999FF" background="0xFFCC66" inactive="0x99FF99" border="0x9999FF" />
    </style>
    <shaper class="@Rectangular" cols="1" rows="1" />
    <cell image="maison ou appart.JPG">
     <media type="URL" level="1" file="http://learningapps.org/display?v=p9d95g9rj01" />
    </cell>
   </cells>
  </activity>

URL changing when choosing other site language

I tried this in Chrome, Firefox - Windows - and Safari - IOS,

• When I choose portuguese activities, and then I change the site language to catalán, everithing works. When I choose Spanish, the occitan activities show (the URL changes to http://clic.xtec.cat/repo/index.html?language=oc)
• I tried choosing the english activities and everithing seemed ok. When I changed the site language to Spanish and then went to english language again, I had the Greek activities showing. After changing the site language again, I had one Spanish and Araucanian activity showing.

Gif is not animated

Open by @Okaryn in projectestac/jclic#13

Hi,

With 0.3.1.0 author, when I convert a project in HTML5, the gif animated are not animated, only the first image is show.

No problem in author or with Java generation.

Try with Firefox/Chrome/IE

Thanks !

Url in initial message is always autostart

If I set an Url in the initial message, it's launch automaticly when the activity is start instead when I clic on the message

Not in jclic.js, but we can't set the level for an url, it's disable. We need to edit manually the .jclic file

 <activity class="@panels.InformationScreen" name="Wohnen 7" code="">
   <description />
   <messages>
    <cell type="initial">
     <style>
      <font family="Comic Sans MS" size="20" bold="true" italic="true" />
      <color foreground="0xFFFF66" background="0x9999FF" />
     </style>
     <media type="URL" level="1" file="http://learningapps.org/display?v=p9d95g9rj01" />
     <p>Clique sur l'image pour remettre les questions dans l'ordre</p>
    </cell>
   </messages>

FillinBlanks - Wrong validation if all dropdown list are with space by default

Hi,

In this activity, with only all answers in dropdown list and if the first choice (option) in all entries is a space, then the validation is considered good if we leave all selections with space. If one entry is without a space by default then the validation works fine. Also fine if one entry is with text instead of dropdown list.

All entries are like this :

<style name="targetError" base="target" foreground="0xFF0000" background="0xFFFF66" />
    <style name="target" base="default" foreground="0x0000FF" target="true" background="0xFFFF66" />
    <style name="default" family="Book Antiqua" background="0xFFFF99" bold="false" italic="false" size="16" tabWidth="12" />
    <section>
     <p family="Arial" background="0xFFFFFF" Alignment="1">
      <cell imgAlign="middle,bottom" width="200" height="146" image="10h20.PNG">
       <style borderStroke="0.7" markerStroke="5.0">
        <color background="0xFF9999" />
       </style>
      </cell>
      <text family="Book Antiqua" background="0xFFFF99">    Es ist zwanzig </text>
      <target>
       <answer>nach</answer>
       <optionList>
        <option> </option>
        <option>vor</option>
        <option>nach</option>
        <option>Uhr</option>
       </optionList>
       <text>nach</text>
      </target>
      <text family="Book Antiqua" background="0xFFFF99"> zehn.</text>
     </p>

Navigation buttons are always active

Navigation buttons are always active in JClic.js, despite of the sequence settings.

This issue was originally reported by @JesusMey in JClic repository.

Fill in Blanks - Content not overwriting the blue line

When filling blanks, the blue line (provided as a cue to the user to know where to write) pushes the everything to the right, causing confusion to the user (e.g. Actividad de llenar huecos con imagenes where the blue lines will not stay in place)

No sound under Firfox with MP3 greater than 50K

Hi,

Maybe it's a Firefox bug, so close it directly, but if it's not...

Under Firefox, the sound in MP3 greater then 50Ko (approx.) are not played. No problem with other browser and no problem with other file format. Big OGG file are played under Firefox.

No sound with simpleassociation B panel

Open by @Okaryn in projectestac/jclic#14

Hi,

When I convert a Jclic in HTML5, I don't have sound with "B" panel in simpleassociation activity.

If I swap A and B panel content, the sound is OK (I swap the primary and secondary tag in the .jclic file)

Try with Chrome/Firefox/IE 11

Thanks !

No sounds from activities on android

I tried the activities from Jclic repo in html5 but I couldn't hear any sound from the activities except the default sounds, I tried with AOC tablet and smartphone huawei, it's the same problem (in activities I knew they had sounds)