L'installation de jMyPuzzle est trés simple. Partant du fait que vous connaissez déjà html et css, la seule chose que vous avez à faire est d'intégrer le script jMyPuzzle dans votre page web avec jQuery et quelques jQuery ui tools, et de lui donner quelques paramètres pour le faire fonctionner de la manière dont vous le voulez (sa taille, position, comprtement, etc..). jMyPuzzle est hautement paramétrable afin de correspondre aux besoins de chacun.
jMyPuzzle s'occupera de transformer la liste xhtml en un puzzle dynamique.
Le code html devrait être proche de celui ci-dessous :
Une fois que vous avez un code source propre affichant votre liste, il ne vous reste que 2 étapes.
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 :
A ce stade, le puzzle est prêt à fonctionner. La seule étape manquante est de passer les paramètres adéquates que vous souhaitez pour votre puzzle personnalisé. Dans l'exemple ci-dessous, nous créons un puzzle qui montrera le taux de réussite à l'exercice dans une boite d'alerte javascript.
Si vous ne savez pas quels paramètres sont disponibles, vous pouvez soit vous référerer à la documentation, ou au paragraphe ci-dessous
jMyPuzzle a de nombreuses options de configuration :
| answer | L'ordre correct des éléments : la correction du puzzle. Ce paramètre est obligatoire. |
| maxTrials | nombre maximum d'essais. argument optionnel. |
| classOnValid | quelle classe css doit être utilisé quand un élément est valide, cad à la bonne place. |
| classOnNotValid | quelle classe css doit être utilisée quand un éléments n'est pas valide, cad à la mauvaise place. |
| classOnMiValid | quelle classe css doit être utilisée quand un élément est à moitié valide, cad à la mauvaise place mais entouré par ses voisins respectifs |
| fnOnCheck | fonction personnalisé appelé au moment de la vérification. La fonction reçoit en paramètre un objet json contenant les résultats comme argument : nb_words : nombre total de mots nb_valid : nombre d'éléments valides, cad à la bonne place nb_not_valid : nombre d'éléments invalides, cad à la mauvaise place nb_mi_valid : nombre d'éléments à moitié valides, cad à la mauvaise place mais entouré par ses voisins respectifs. success_rate : taux de réussite à l'exercice. trial_nb : Numéro de l'essai. max_trials : nombre maximum d'essais configuré.. answer : la réponse donnée par l'utilisateur. |
| ajaxResultUrl | l'url à laquelle les résultats seront envoyés en ajax. L'url peut inclure les mêmes paramètres personnalisés qu'au dessus. |
| fnOnAjax | fonction qui peut être appelée à la fin du traitement ajax. Il permet de récupérer le résultat renvoyé par la server. exemple : function(data){ alert(data); }, afficherait le résultat renvoyé par le serveur. |
| fnOnReset | fonction appelé lors du clic sur le bouton "nouveau". |
Vous pouvez vous amuser en jouant avec les différentes options.
Pour modifier son apparence, il s'agit juste de modifier son css. Comme n'importe quel script xhtml, son apparence est située dans le fichier css jMyPuzzle.css. Vous avez juste à le modifier pour vos besoins !
Bien.. nous sommes désolés. Nous avons fait de notre mieux pour le faire fonctionner dans la plupart des configurations mais il est tout de même possible que jMyPuzzle soit encore réticent à certains navigateurs/systèmes d'exploitation. N'oubliez pas que jMyPuzzle est compatible avec les récents navigateurs seulement. (Si vous utilisez lynx, non pas que ce soit un mauvais navigateur, mais peut-être devriez vous laisser tomber :-) !) Sinon assurez-vous que la manière dont vous l'avez installé sur votre site ou page web est correcte. Est-ce que les chemins vers les scripts et css sont corrects ? Votre code html est-il valide ? Autant d'erreurs qui pourraient empêcher jMyPuzzle de fonctionner correctement.
Vous pouvez nous soumettre un rapport de bug en nous contactant directement à : bugs@enova-tech.net. Si c'est un bug, nous ferons de notre mieux pour le fixer pour vous !
Pour contribuer à jMyPuzzle, vous pouvez soit développer de nouvelles fonctionnalités, soit soumettre des rapports de bugs, ou soit encore en parler autour de vous !
Si vous avez déjà développés certains fonctionnalités intéressantes pour jMyPuzzle, nous aimerions vivement le savoir !! N'hésitez pas à ous contacter à jmypuzzle@enova-tech.net.
Vous l'avez deviné ! jMyPuzzle est le premier d'une longue série de nouveaux types d'exercices en javascript ! D'autres viendront par la suite puisque notre plan est de les intégrer à notre méthode e-learning : click on french
E-nova est une agence web Française offshore basée en Inde et spécialisé dans l'Open Source.
Nous développons des sites web, ecommerce, progiciels de gestion de trés haute qualité et basés sur du logiciel libre.
Pour tout renseignement, n'hésitez pas à nous contacter.
Nos prestations sont basées sur des technologies de type Drupal, Magento, ou encore OpenERP