What is jMyPuzzle?

First, a demonstration. Drag and drop the words to put the sentence back in order.

  • or not
  • be
  • to
  • question !
  • that is
  • the
  • To
  • be,

jMyPuzzle is a words puzzle written in jQuery, where the user has to reassemble the words of a sentence through drag and drop to put them back in the right order. It provides a few features :

  • answers posted back to server through ajax
  • visual indications of where the errors are.
  • possibility do define maximum numbers of trial.
  • cross browser compatibility : Firefox 1.5+, IE 6.0+, Safari 2.0+, Opera 9.0+

And all this takes only 4Kb !

download github

How does it work?

It works only with a few lines of code :

The files to insert in your HTML

Don't forget to also include jquery and jquery-ui!

<link rel="stylesheet" type="text/css" href="css/jmypuzzle.min.css"/>
<script type="text/javascript" src="js/jmypuzzle.min.js"></script>

The HTML markup for the game

<div class="jMyPuzzle">
  <p class="trials"></p>
  <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 reset" value="reset" />
  <input type="button" class="button check" value="check" />
</div>

The Javascript code

In the example below, we set a jMyPuzzle activity with answers provided directly at instantiation.

$('.jMyPuzzle').jMyPuzzle({
  answers : "7,2,1,3,8,5,6,4",
});

The answers object mention in what order the words have to be reassembled.

JMyPuzzle can be configured :

Optionusage
maxTrialsmaximum number of attempts. 0 for unlimited.
fnOnCheckcallback after checking results.
ajaxResultUrlAjax url where to send the results. will send a post request with the following variables : nb_words, nb_valid, nb_not_valid, nb_mi_valid, success_rate, trial_nb, max_trials, answer
answerA string containing the order of the blocks for the right answer.

Why this plugin?

This plugin was created as part of our e-learning platform Click On French. It is part of a set of activities that we have developed to make learning more fun and user friendly.

Credits

jMyPuzzle is a free software based on JQuery

Licence

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