What is jMyLottery?

See the demo first.

 
3
   
2
         
     
5
           
     
1
     
4
   

jMyLottery is a simple hear and click activity, looking like a lottery grid. It was initially designed to teach French numbers, but can be adapted to teach absolutely whatever that can be associated to a sound file.

  • 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+
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/jmylottery-withlibs.min.js"></script>

A very simple example - The Javascript code

For initialization.

 $('.jmylottery').jMyLottery({
    answers : {
      "123-456-789" : "123-456-780",
      "223-456-789" : "223-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 jmylottery">
  <div class="sounds clearfix">
    <div class="sound" id="123-456-789">
      <a href="demo/media/mp3/1.mp3" class="linkSong">Un</a>
    </div>
    <div class="sound" id="223-456-789">
      <a href="demo/media/mp3/2.mp3" class="linkSong">Deux</a>
    </div>
    <div class="progress">
      <span class="current"></span> / <span class="total"></span>
    </div>
  </div>
  <div class="matches">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td> </td>
        <td>
          <div class="match" id="123-456-780">
            <a href="#" class="number-digit">1</a>
          </div>
        </td>
        <td> </td>
        <td> </td>
        <td>
          <div class="match" id="223-456-780">
            <a href="#" class="number-digit">2</a>
          </div>
        </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
  </div>
  <div class="help"></div>
  <div class="actions">
    <a href="#" class="button reset" disabled="disabled">Reset</a>
  </div>
</div>

JMyLottery 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 numbers in one of our activities.

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.

Credits

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

Licence

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