How do I install jMyPuzzle?

Installing jMyPuzzle is very easy. Starting from the fact that you already know html and css, you just have to integrate to your web page the JMyPuzzle script along with jQuery and some of its ui tools, and to give it some custom parameters to make it work the way you want it (its size, position, behaviour, etc..). jMyPuzzle is very customizable to match everyone's need. jMyPuzzle will take care of transforming your xhtml list into a dynamic puzzle.

Basically, your html code should look like the one below :

<div class="JMyPuzzle"> <div id="header"><span>Attempts : </span><span id="trials"></span></div> <ul> <li>or not</li> <li>be</li> <li>to</li> <li>question!</li> <li>that is</li> <li>the</li> <li>To</li> <li>be,</li> </ul> <input type="button" class="button" id="reset" value="reset" /> <input type="button" class="button" id="check" value="check" /> </div>

Once you have a proper html code showing your images, you are just two step away.

First, it is necessary to link the page with jQuery, this is the library requested by jMyPuzzle. Also, you will need some jQuery ui tools that are provided in the download section. After what we integrate the JMyPuzzle script and its css presentation file :

<link rel="stylesheet" type="text/css" href="JMyCarousel.css" /> <script type="text/javascript" src="jquery-1.2.min.js"></script> <script type="text/javascript" src="ui.mouse.js"></script> <script type="text/javascript" src="ui.draggable.js"></script> <script type="text/javascript" src="ui.draggable.ext.js"></script> <script type="text/javascript" src="jquery.dimensions.js"></script> <script type="text/javascript" src="jMyPuzzle.js"></script>

In this state, the puzzle is ready to work. The only missing step is to pass the custom parameters that you wish for your custom puzzle. In the example below, we set a puzzle that will display the success rate into an alert box

$(function() { $(".jMyPuzzle").jMyPuzzle({ answer:"7,2,1,3,8,5,6,4", maxTrials:5, fnOnCheck: function(jSonResults){ alert("Your success rate : " + jSonResults.success_rate + "%") }); });

If you don't know which parameters are available, you can either refer to the documentation or to the paragraph below

How do i configure it for my needs?

jMyPuzzle has a lot of configuration options :

answer	The element's right order : correction of the puzzle.
maxTrials	maximum number of trials. Optional argument.
classOnValid	which css class has to be used when an element is fully valid, ie at the right place.
classOnNotValid	which css class has to be used when an element is not valid, ie at the wrong place.
classOnMiValid	which css class has to be used when an element is half valid, ie at the wrong place but surrounded by its respective neighboors
fnOnCheck	custom function called at the end of the checking. The function receives a json object containing the results as an argument : nb_words : total number of words nb_valid : number of valid elements, ie at the right place nb_not_valid : number of not valid elements, ie at the wrong place nb_mi_valid : number of half valid elements, ie at the wrong place but surrounded by its respective neighboors. success_rate : success rate got for the trial. trial_nb : trial number. max_trials : maximum number of trials allowed. answer : the answer given by the user.
ajaxResultUrl	the ajax url to send the results to. The url can include the same custom params than above.
fnOnAjax	function that is called at the end of the ajax treatment. It enables to catch the result sent back from the server. example : function(data){ alert(data); } would display the result sent from the server
fnOnReset	function that is called at the end of the reset treatment.

You can have fun playing around with the different options.

How do i modify the puzzle appearence?

To modify the puzzle appearence, it is just a css matter. As any xhtml script should be, the appearence setup is located in the css file jMyPuzzle.css. You just have to modify it to suit your needs !

It doesn't work for me. What do i do?

Well.. we are sorry. We did our best to make it work in most of the configurations but it is still possible that JMyPuzzle is reticent to some browsers/operating system. Don't forget that JMyPuzzle is compatible with the recent browsers only (if you are using lynx, even though it is a nice browser, just forget it ;-)). Otherwise make sure that the way you installed it on your web page is correct. Are the scripts and css paths corrects ? Is your html code valid ? As many errors which could prevent JMyPuzzle to work properly.

It still doesn't work for me.. how do i submit a bug report?

You can submit a bug report by contacting us directly at bugs@enova-tech.net . If it is a bug, then we will fix it for you !

How do i contribute to JMyPuzzle?

To contribute to JMyPuzzle, you can either develop extra features for it, submit bug reports, or still talk about it !

If you have already developed some interesting features for JMyPuzzle, we would love to hear from you ! Feel free to contact us at jmypuzzle@enova-tech.net.

jMyPuzzle, what next?

Ya, you guessed it ! jMyPuzzle is the first of a long serial of new javascript exercises ! Some more will come soon since the plan is to integrate them in our e-learning method click on french