What is jMyChampolion?

No useless talks, see a demo first.

Open Demo

jMyChampolion is a rosetta stone like type of activity which is customizable, and working as a jquery plugin. Below is a list of features :

  • works with html5 and jquery only.
  • sound playing is based on jPlayer, with html5 support and flash fallback for flash.
  • whole content can be customized
  • score management
  • cross browser compatibility : Firefox 1.5+, IE 9.0+, Safari 2.0+, Opera 9.0+

It takes only 3Kb! (without libraries).

download github

How does it work?

It works only with a few lines of code :

The files to insert in your HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="js/libs/jmyloader-full.min.js"></script>
<script src="js/libs/jQuery.jPlayer.2.5.0/jquery.jplayer.min.js"></script>
<script src="js/jmychampolion-withlibs.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/libs/jmyloader.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/jmychampolion.min.css" media="all" />

A very simple example - The Javascript code

For initialization.

$('.jmychampolion').jMyChampolion({
  answers : {
    "123-456-789" : "123-456-780",
    "223-456-789" : "233-456-780",
  }
});

The answers json object tells the plugin what sound file matches with which image.

The HTML Code

The layout and content of the activity are given directly in the html :

<div class="cofda jmychampolion">
  <div class="sounds clearfix">
    <div class="sound" id="123-456-789">
      <a href="demo/media/mp3/homme.mp3">Homme</a>
    </div>
    <div class="sound" id="223-456-789">
      <a href="demo/media/mp3/femme.mp3">Femme</a>
    </div>
  </div>
  <div class="matches clearfix">
    <div class="slide">
      <div class="match" id="103-456-780">
        <div class="top">
          <div class="sound">
            <a href="demo/media/mp3/homme.mp3">Homme</a>
          </div>
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/man1.jpg" />
          </a>
        </div>
      </div>
      <div class="match" id="113-456-780">
        <div class="top">
          <div class="sound">
            <a href="demo/media/mp3/femme.mp3">Femme</a>
          </div>
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/woman1.jpg" />
          </a>
        </div>
      </div>
      <div class="match selectable" id="123-456-780">
        <div class="top">
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/man2.jpg" />
          </a>
        </div>
      </div>
      <div class="match selectable" id="133-456-780">
        <div class="top">
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/woman2.jpg" />
          </a>
        </div>
      </div>
    </div>
    <div class="slide">
      <div class="match" id="203-456-780">
        <div class="top">
          <div class="sound">
            <a href="demo/media/mp3/homme.mp3">Homme</a>
          </div>
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/man2.jpg" />
          </a>
        </div>
      </div>
      <div class="match" id="213-456-780">
        <div class="top">
          <div class="sound">
            <a href="demo/media/mp3/femme.mp3">Femme</a>
          </div>
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/woman1.jpg" />
          </a>
        </div>
      </div>
      <div class="match selectable" id="223-456-780">
        <div class="top">
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/man1.jpg" />
          </a>
        </div>
      </div>
      <div class="match selectable" id="233-456-780">
        <div class="top">
        </div>
        <div class="image">
          <a href="">
            <img src="demo/img/woman2.jpg" />
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="help"><!-- Placeholder. Remove it if you don't want the help component --></div>
  <div class="paginator"><!-- Placeholder.  Remove it if you don't want the paginator component --></div>
</div>

JMyChampolion has a few configuration options :

Optionusage
(html code)Most of the plugin can be customized through its html structure. Look at the example in the source code for more details.
soundAutoPlayWhether the initial sound file should play automatically, or manually.
feedbacksFeedbacks to be displayed with the score. a json object with the score as index, and string as value.
contextualHelpDefinition of the strings displayed in the help section after given events. See source code for examples.
donutsettings for the doughnut displayed in the results : width, height, textSize, duration, transition, thickness. All these settings are provided by default.

Why this plugin?

This plugin was created as part of our e-learning platform Click On French. We use it as a way to teach specific vocabulary and context to our students.

I have a comment and a suggestion!

Feel free to contact us to propose improvement or change request directly on the repository on Github. Feel free to also just say hi by email.

Why this complicated name?

Our plugin is named after the father of egyptology Jean-francois Champolion. Interestingly this linguistic genius was also into breaking code! Go check him out on wikipedia if you don't know him. Well, I am sure you can figure the rest out.

Credits

jMyChampolion is a free software based on JQuery and one our own libraries that we use at Click On French.

Licence

jMyChampolion is under the GPL V3 licence onwards. You can freely modify and redistribute it. A copy of the licence is included in the archive.