How to adapt


To add this widged to a page, add a division
<div id="a-0" class="wg-pickthelabels"></div>
and get jquery to transform that content into an interactive.
 jQuery(".wg-pickthelabels#a-0").wgTreasureChest();


All games elements are specifed in the script options
{
   tiles: {
      gameOver: "<img src='file/view/gameover.gif' width='80'>",
      blank: "<img src='file/view/blank.gif'>",
      obstacle: {
         dirH: "<img src='file/view/arctic-landscape.png'>",
         dirV: "<img src='file/view/arctic-landscape.png'>",
         dirC: "<img src='file/view/igloo.png'>"
      }
   },
   avatar:  {
          loc:  {x: 6, y: 5},
          up:      "<img src='file/view/penguin.png' class='gridimg'>",
          down: "<img src='file/view/penguin.png' class='gridimg'>",
          left:    "<img src='file/view/penguin.png' class='gridimg'>",
          right: "<img src='file/view/penguin.png' class='gridimg'>",
        },
   items: {
      targetPoints: 100,
      distractorPoints: -100,
      targets: [
        "<img src='file/view/apple.gif'  width='80'>",
        "<img src='file/view/banana.gif' width='80'>",
        "<img src='file/view/steak.gif'  width='80'>",
        "<img src='file/view/fish.gif'   width='80'>"
      ],
      distractors: [
         "<img src='file/view/sugar.gif'  width='80'>",
         "<img src='file/view/cereal.gif' width='80'>",
         "<img src='file/view/milk.gif'   width='80'>",
         "<img src='file/view/butter.gif' width='80'>",
         "<img src='file/view/water.gif'  width='80'>",
         "<img src='file/view/rice.gif'   width='80'>"
       ]
   }
}
 
Code
In wikispaces use Edit > Widget > Other Widget and paste the code below.
<div id="a-0" class="wg-pickthelabels"></div>
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.timers-1.2.js">
</script><script type="text/javascript" src="http://widged.com/widgeds/js/jquery.treasureChest.js">
</script><script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
  jQuery(".wg-pickthelabels#a-0").wgTreasureChest(
{
tiles: {
   gameOver: "<img src='file/view/gameover.gif' width='80'>",
   blank: "<img src='file/view/blank.gif'>",
   obstacle: {
     dirH: "<img src='file/view/arctic-landscape.png'>",
     dirV: "<img src='file/view/arctic-landscape.png'>",
     dirC: "<img src='file/view/igloo.png'>"
   }
},
avatar:  {
       loc:  {x: 6, y: 5},
       up:      "<img src='file/view/penguin.png' class='gridimg'>",
       down: "<img src='file/view/penguin.png' class='gridimg'>",
       left:    "<img src='file/view/penguin.png' class='gridimg'>",
       right: "<img src='file/view/penguin.png' class='gridimg'>",
     },
items: {
   targetPoints: 100,
   distractorPoints: -100,
   targets: [
     "<img src='file/view/apple.gif'  width='80'>",
     "<img src='file/view/banana.gif' width='80'>",
     "<img src='file/view/steak.gif'  width='80'>",
     "<img src='file/view/fish.gif'   width='80'>"
   ], 
   distractors: [
      "<img src='file/view/sugar.gif'  width='80'>",
      "<img src='file/view/cereal.gif' width='80'>",
      "<img src='file/view/milk.gif'   width='80'>",
      "<img src='file/view/butter.gif' width='80'>",
      "<img src='file/view/water.gif'  width='80'>",
      "<img src='file/view/rice.gif'   width='80'>"
    ]
}
 }      
  );
//-->
//]]>
</script>