What is jDropWords?

bonjour, je m' Christian

ca va ?

Tu où ?

J' à Marseille, mais j' à Paris.

  • appelle
  • Comment
  • habites
  • habite
  • étudie

jDropWords is a jQuery plugin to create a game with words. Words have to be dragged and dropped in the blanks to complete a sentence. At the end the user can check his result, and his score is displayed. jDropWords is entirely customizable through custom callbacks to answer most of the needs.

  • custom callbacks, before and after correction
  • answers provided through ajax, or directly at instantiation
  • answers posted back to server through ajax
  • game blocked after correction
  • cross browser compatibility : Firefox 1.5+, IE 6.0+, Safari 2.0+, Opera 9.0+

And all this takes only 8Kb !

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="jDropWords.css" />
<script type="text/javascript" src="jDropWords.js"></script>

The HTML markup for the game

<div class="jdropwords">
  <div class="blanks">
    <p>bonjour, je m'<span class="blank" id="123-456-789"></span> Christian</p>
    <p><span class="blank" id="223-456-789"></span> ca va ?</p>
    <p>Tu <span class="blank" id="323-456-789"></span> où ?</p>
    <p>J'<span class="blank" id="423-456-789"></span> à Marseille, mais j'<span class="blank" id="523-456-789"></span> à Paris.</p>
  </div>
  <ul class="words">
    <li class="word" id="123-456-780">appelle</li>
    <li class="word" id="223-456-780">Comment</li>
    <li class="word" id="323-456-780">habites</li>
    <li class="word" id="423-456-780">habite</li>
    <li class="word" id="523-456-780">étudie</li>
  </ul>
  <div class="actions">
    <a href="#" class="button reset">Reset</a>
    <a href="#" class="button submit">Submit</a>
  </div>
</div>

The Javascript code

In the example below, we set a jDropWords game with answers provided directly at instantiation.

$('.jdropwords').jDropWords({
  answers : {
    "123-456-789" : "123-456-780",
    "223-456-789" : "223-456-780",
    "323-456-789" : "323-456-780",
    "423-456-789" : "423-456-780",
    "523-456-789" : "523-456-780"
  }
});

You will notice that the answers tell which blank id expects which word id. (it is recommended that ids are given in the form of uuid).

JDropWords has a lot of configuration options :

Optionusage
hoverClassclass to put on the blank element when the word is dragged over.
droppedClassclass to put on the blank element when the word is dropped.
errorClassclass to apply on the blank element when there is an error (after correction).
successClassclass to apply on the blank element when the answer is right (after correction).
beforeDropcallback function before drop.
afterDropcallback function after drop.
afterCorrectioncallback function after correction.
submitAjaxwhether the answers should be submitted through ajax.
submitAjaxUrl : ""url to submit the answers to.
submitAjaxExtraParamsextra parameters to pass with the answers (test id for instance).
feedbacksFeedback to display at the correction (with keys given in percent).
answersAnswers. Either a url or a json object.

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

jDropWords is a free software based on JQuery

Licence

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