title: how to count the draggable elements in in a droppable area?
body: <p>I have a to make a simple drag and drop game in class. I am having problems with getting it to count the number of dropped elements in the droppable area. </p>
  
  <p>Can anyone assist please?</p>
  
  <p>Thank you in advance. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>     &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;CookbookGame&lt;/title&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="js/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;!--[if !IE 7]&gt;
      &lt;style type="text/css"&gt;
      #wrap {display:table;height:100%}
      &lt;/style&gt;
      &lt;![endif]--&gt;
      &lt;link href="css/reset.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
      $(document).ready(function(){
      /* starts the counter at zero*/
      var counter=0;
      ingredients();
      /*check count amount*/
      function check()
      {
      if (counter == 4);
      { alert ("well done");
      location.href="recipe.html";
      }
      };
      function count()  /*this is the counter function*/
      {
      counter = counter + 1    
      /* this line calls count which is equal to its self and each time            count is called it will add one to itself*/
  
      }
      });
  
      function ingredients()
      { 
      /*This is the main part of the script*/
      $(".salt, .pepper, .honey").draggable({ revert: "invalid" });
  
      $(".milk").draggable({ revert: "valid" });
      $("#bowl").droppable({ 
      accept: ".milk",
      drop: function( event, ui ) {
      count();
      check(); 
      }
      });
  
      $(".egg").draggable({ revert: "valid" });
      $("#bowl").droppable({
      accept: ".egg",
      drop: function( event, ui ) {
      count();
      check();
      }
      });
  
      $(".flour").draggable({ revert: "valid" });
      $("#bowl").droppable({
      accept: ".flour",
      drop: function( event, ui ) {
      count();
      check();
      }
      });
  
      $(".sugar").draggable({ revert: "valid" });
      $("#bowl").droppable({
      accept: ".sugar",
      drop: function( event, ui ) {
      count();
      check();
      }
      });
      };
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="header"&gt;CookBook Game&lt;/div&gt;
      &lt;h3&gt;The stuff you need to use to make the pancakes are on the top shelf.&lt;br /&gt; Be careful there are extra ingreedients there to stop you completing your task.&lt;/h3&gt;
      &lt;div id="pancake"&gt;Pancakes&lt;/div&gt;
      &lt;div id="playarea"&gt;
          &lt;div id="tarea"&gt;
              &lt;table id="shelf"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;div class="milk"&gt;&lt;img src="images/milkjug.png" &gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;div class="egg"&gt;&lt;img src="images/eggs.png" &gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;div class="flour"&gt;&lt;img src="images/flour.png"&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;div class="honey"&gt;&lt;img src="images/honey.png"&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;div class="sugar"&gt;&lt;img src="images/sugar.png"&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;div class="salt"&gt;&lt;img src="images/salt.png"&gt;&lt;/div&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;div class="pepper"&gt;&lt;img src="images/pepper.png"&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div id="barea"&gt;
              &lt;div id="bowl"&gt;&lt;img src="images/bowl.png"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>