     $('#added-goal li.dice[data-index='+index+']').remove()
     @cleanUpBrackets()
     $(html).appendTo("#notadded-goal").bind 'click', (event) ->
-      thisReference.addToGoal($(this).data('index'));
+      thisReference.addDiceToGoal($(this).data('index'));
 
 
   cleanUpBrackets: () ->

        html = "<li class='dot' data-bracket='none'><span></span></li>"
        $(html).appendTo("#added-goal").bind 'click', (event) ->
          thisReference.dotListener(this)
        
      # Now add a dot to the right of the newly added dice
      @numberInGoal++
      @numberDots++
      diceFace = DiceFace.toHtml(@resources[index])
      html = "<li class='dice' data-index='" + index + "'><span>#{diceFace}<span></li>"
      html2 = "<li class='dot' data-bracket='none'><span></span></li>"
      $('#notadded-goal li.dice[data-index='+index+']').remove()
      $(html).appendTo("#added-goal").bind 'click', (event) ->
        thisReference.removeFromGoal($(this).data('index'));
      $(html2).appendTo("#added-goal").bind 'click', (event) ->







  ###*
   * Move a dice from resources to the goal. 
   * @param {Number} index The (zero based) index of the resources array to move.
  ###
  addDiceToGoal: (index) ->
    # Add the diceface to the dom and add a click listener that removes it when its clicked
    if(@numberInGoal < 6) # There is a maximum of six dice allowed
      thisReference = this
