put these words in the right order.


How to adapt


To add a magnets activity, add a division
<div class="wg-magnet" id="a-0">
and get jquery to transform that content into an interactive.
jQuery(".wg-magnet#a-0")

The text should be specified as a words separated by blanks (space, tabs, return carriage. )
put these words in the right order.

By default, the box in which the magnets appear is 600x400px, to change this, specify a width and height. Make sure you separate the different parameters with a comma.
width: 300,
height: 150


Code:

<div id="a-0" class="wg-magnet">put these words in the right order.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.word-magnets.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery('.wg-magnet#a-0').wgMagnets({
width: 300,
height: 150
});
//]]>
</script>


Adding more than one widged on one page


If you want to add multiple widgeds on the page, the easiest is to put them all in a same group (a single 'Other Widget'). If this is not practical enough, you have to avoid to load multiple times the same scripts.

In the first widget

<div id="a-0" class="wg-magnet">je vais aller à Wellington l'année prochaine.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.word-magnets.js"></script>
<script type="text/javascript">
<![CDATA[
jQuery('.wg-magnet#a-0').wgMagnets({
width: 300,
height: 150
});
]]>
</script>


In all subsequent ones

<div id="a-3" class="wg-magnet">je vais enfin habiter dans une grande ville.</div>

<!-- comment out all script load requests, they have already been loaded.
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.word-magnets.js">
-->
<script type="text/javascript">
<![CDATA[
jQuery('.wg-magnet#a-3').wgMagnets({
width: 300, height: 150
});
]]>
</script>