Drag and drop the pink boxes into the box for the matching category.

future simple=j'aurai

present=j'ai|tu as

imparfait=j'avais

==I am red|I have long legs

==I wear clothes|I walk on two legs

==I am green|I have short legs




How to adapt


Add a custom widget on a wikispaces page. Select Widget > Other HTML. Paste the code from the code box below (in blue) and start editing it.

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

The text should be specified as a list of items with options.
<p class="item">present=j'ai|tu as</p>

Colors for questions and answers are assigned by default. If you want to specify your own, do so in the script options
questionBackgroundColor: '#E6FFB3',
questionBorderColor: '#C4E67F',
answerBackgroundColor: '#F4CFE8',
answerBorderColor: '#F492D4'

Code:

<div class="wg-dragDrop" style="width:300px;padding: 9px 0px;">
<p class="item">future simple=j'aurai</p>
<p class="item">present=j'ai|tu as</p>
<p class="item">imparfait=j'avais</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.dragdrop.js"></script>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
jQuery(".wg-dragDrop").wgDragDrop(
{
questionBackgroundColor: '#E6FFB3',
questionBorderColor: '#C4E67F',
answerBackgroundColor: '#F4CFE8',
answerBorderColor: '#F492D4'
}
);
//-->
//]]>
</script>


Adding images


For items, use

<p class="item"><img src="http://widged.com/widgeds/pix/dragdrop/img1.png" width="100" />==je suis rouge|j'ai de longues jambes</p>

Because there is an equal sign in the image markup, you have to overwrite the default answer marker. In the item list, use '==' instead of '=' to separate the question and answer parts (make sure you do so for all items). In the script options, add an answerMaker parameter.
answerMarker: '==',
questionBackgroundColor: '#CCEEFF',
questionBorderColor: '#99DDFF',
answerBackgroundColor: '#F4CFE8',
answerBorderColor: '#F492D4'


Adding multiple widgeds on a page


Weird behaviors can sometimes occur when the same library scripts are loaded more that once onto a web page. To avoid this, simply comment out the line that loads a script that has already been loaded higher on the page.

<div class="wg-dragDrop" style="width:300px;padding: 9px 0px;">
  <p class="item">future simple=j'aurai</p>
  <p class="item">present=j'ai|tu as</p>
  <p class="item">imparfait=j'avais</p>
</div>
<!--ALREADY LOADED <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>-->
<!--ALREADY LOADED <script type="text/javascript" src="http://widged.com/widgeds/js/jquery.dragdrop.js"></script>-->
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
jQuery(".wg-dragDrop").wgDragDrop({
  questionBackgroundColor: '#E6FFB3',
  questionBorderColor: '#C4E67F',
  answerBackgroundColor: '#F4CFE8',
  answerBorderColor: '#F492D4'
});
//-->
//]]>
</script>