icon stays hidden until something is moved there

Question

I am trying to let the icons (wich will be buttons in the future) stay hidden until the right word is placed in the tab the button is in too, so when it's all done you can only click the icon if you've set the right word in the right tab and some audio will play.. but I can't seem to figure out how to let the icon stay hidden until the word is placed, if I look it up, something needs to stay hidden until the button is clicked, but I don't want that..

This is how it looks

This is my code

$(document).ready(function() {
  var rigtige = 0; //good_points
  var forkerte = 0; //false_points
  var answers;
  var footer;
  var timer = setInterval(function() {
    getReady();
  }, 203);
  var number = [0, 1, 2, 3, 4, 5, 6, 7];


  //define JSON arrays (jsonData_0_123.json)
  function getReady() {
      if (jsonData !== "noJson") {
        clearInterval(timer);
        answers = jsonData.answers;
        footer = jsonData.footer;
        makeWordList();
        dragDrop();
      }
    }
    //end


  function makeWordList() {
      shuffle(number);
      var text_time;
      for (var j = 0; j < answers.length; j++) {
        var i = j + 1;
        //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
        document.getElementById("word" + number[j]).innerHTML = '<div class="tekst draggable" id="tekst' + i + '"> <span>' + answers[j] + '</span></div>'


      }
    }
    // //makeWordList
    //     function makeWordList() {
    //         shuffle(number);
    //         for (var i = 0; i < answers.length; i++) {
    //           //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
    //           var j = i + 1;
    //           var str = '<div class="tekst draggable" id="tekst'+ j +'"> <p>'+ answers[i] +'</p> </div>';
    //           document.getElementById('word' + number[i]).innerHTML = str;
    //         }
    //     };
    //
    // //end

  //shuffle
  function shuffle(array) {
      var currentIndex = array.length,
        temporaryValue, randomIndex;

      while (0 !== currentIndex) {

        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

      return array;
    }
    //end

  //make dragdroppable
  function dragDrop() {
      //Make the revert event for draggable
      $.ui.draggable.prototype._mouseStop = function(event) {
          //If we are using droppables, inform the manager about the drop
          var dropped = false;
          if ($.ui.ddmanager && !this.options.dropBehaviour)
            dropped = $.ui.ddmanager.drop(this, event);

          //if a drop comes from outside (a sortable)
          if (this.dropped) {
            dropped = this.dropped;
            this.dropped = false;
          }

          if ((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
            var self = this;
            self._trigger("reverting", event);
            $(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
              event.reverted = true;
              self._trigger("stop", event);
              self._clear();
            });
          } else {
            this._trigger("stop", event);
            this._clear();
          }

          return false;
        }
        //end

      //Make tekst draggable
      $(".draggable").draggable({
        opacity: 1,
        containment: 'body',
        revert: true,
        scroll: false,
        reverting: function() {
          console.log('reverted');
          //play('false');
          forkerte++;
          document.getElementById("forkerte").innerHTML = '<span id="forkerte">' + forkerte + '</span>';
        },
      });
      //end

      var id = 1;
      var text = "";
      var text2 = "";
      while (id < 9) { // lengte van je array + 1
        text = "antwoord" + id; //id= antwoord1 antwoord2 enz daarom antwoord + id zo dat het er 8 keer komt
        text2 = "tekst" + id;

        $("#" + text).droppable({ // dan wordt het dus allemaal droppable id antwoord 1 tm 8
          tolerance: "pointer",
          accept: "#" + text2, // Welke id er op moet vallen je maakt antwoord1a(tekst) bv droppable voor antwoord1(antwoord div)
          drop: function(event, ui) {
            // play('true');
            $(ui.draggable).draggable({
              revert: false
            }); // Only draggable in div antwoord
            $(ui.draggable).draggable('disable'); //disable draggable
            ui.draggable.position({
              of: $(this),
              my: 'center left',
              at: 'center center'
            });
            $(this).droppable('disable');
            rigtige++; //+1 bij de punten van goed
            document.getElementById("rigtige").innerHTML = '<span id="rigtige">' + rigtige + '</span>'; //update de html
            //checckScore();
          }
        });
        id++; //BELANKRIJK zonder id++ endles loop
      }

    }
    //end

  //spinning reset button
  $(".spin").mouseenter(function() {
    $(".fa-refresh").addClass("fa-spin");
  });

  $(".spin").mouseleave(function() {
    $(".fa-refresh").removeClass("fa-spin");
  });
  // end
});

body,
html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}
.container {
  height: 90%;
  border-collapse: collapse;
  display: table;
}
.igen {
  font-size: 25px;
  font-weight: bold;
}
.points {
  float: right;
}
.container {
  height: 90%;
  border-collapse: collapse;
  display: table;
}
header {
  height: 5%;
  border-bottom: thick solid grey;
}
.img {
  width: 25%;
  height: 30%;
  background-color: #f0f0f0;
  float: left;
}
.center {
  margin-left: 25%;
  margin-right: 25%;
}
.antwoord {
  float: left;
  width: 95%;
  height: 25px;
  background-color: white;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
}
.move2 {
  margin-top: 12.5%
}
.move4 {
  margin-top: 19%
}
.move5 {
  margin-top: 33.5%
}
.move6 {
  margin-top: 20.8%
}
.move7 {
  margin-top: 37.5%
}
.border {
  margin-top: 45%;
  border-top: thick solid grey;
  background-color: red;
}
.word,
.word .tekst,
.word p {
  display: inline;
  margin-left: 7%;
  font-weight: bold;
}
.my-row {
  clear: both;
}
.answers .word,
.answers .word2 {
  float: left;
  padding: 3px;
  margin-left: 7%;
  font-weight: bold;
}
.fa {
  margin-left: 5px;
  margin-top: 2px;
}
.word,
.word2 {
  padding-top: 5%;
  margin: 5%;
}
footer {
  border-top: thick solid grey;
  height: 5%;
  display: table-row;
  vertical-align: bottom;
}
.sprint {
  float: right;
}
.copyright {
  position: relative;
  bottom: 20px;
  left: 65px;
  font-size: 10px;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: none;
  color: black;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Words</title>

  <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

</head>

<body>

  <header>
    <a href=""><span class="fa fa-refresh spin" style="font-size:25px;"></span><span class="igen spin">&nbsp;igen</span></a>
    <span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige:  &nbsp;&nbsp;&nbsp; <span id="rigtige">0</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp;
    <span id="forkerte">0</span>
    </span>
  </header>

  <div class="container">

    <div class="img" id="img1">
      <div class="plaatje" id="plaatje1">
        <img class="center" src="img/cat.jpg" alt="cat" width="50%;">
      </div>
      <div class="move1">
        <div class="antwoord droppable" id="antwoord1"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>
    <div class="img" id="img2">
      <div class="plaatje" id="plaatje1">
        <img class="center" src="img/beak.jpg" alt="beak" width="50%;">
      </div>
      <div class="move2">
        <div class="antwoord" id="antwoord2"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>
    <div class="img" id="img3">
      <div class="plaatje" id="plaatje3">
        <img class="center" src="img/spoon.jpg" alt="spoon" width="50%;">
      </div>
      <div class="move3">
        <div class="antwoord" id="antwoord3"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>
    <div class="img" id="img4">
      <div class="plaatje" id="plaatje4">
        <img class="center" src="img/milk.jpg" alt="milk" width="50%;">
      </div>
      <div class="move4">
        <div class="antwoord" id="antwoord4"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>
    <div class="img" id="img5">
      <div class="plaatje" id="plaatje5">
        <img class="center" src="img/egg.jpg" alt="egg" width="50%;">
      </div>
      <div class="move5">
        <div class="antwoord" id="antwoord5"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>
    <div class="img" id="img6">
      <div class="plaatje" id="plaatje6">
        <img class="center" src="img/thee.jpg" alt="tea" width="50%;">
      </div>
      <div class="move6">
        <div class="antwoord" id="antwoord6"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>
    <div class="img" id="img7">
      <div class="plaatje" id="plaatje7">
        <img class="center" src="img/meel.jpg" alt="flour" width="50%;">
      </div>
      <div class="move7">
        <div class="antwoord" id="antwoord7"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>
    <div class="img" id="img8">
      <div class="plaatje" id="plaatje8">
        <img class="center" src="img/passport.jpg" alt="passport" width="50%;">
      </div>
      <div class="move8">
        <div class="antwoord" id="antwoord8"><i class="fa fa-play" style="font-size:20px"></i>
        </div>
      </div>
    </div>

    <div class="answers">
      <div class="my-row border">
        <div class="word" id="word0"></div>
        <div class="word" id="word1"></div>
        <div class="word" id="word2"></div>
        <div class="word" id="word3"></div>
      </div>
      <div class="my-row">
        <div class="word2" id="word4"></div>
        <div class="word2" id="word5"></div>
        <div class="word2" id="word6"></div>
        <div class="word2" id="word7"></div>
      </div>
    </div>

    <footer>
      <img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
      <img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
      <center><span class="copyright"> &copy;2013 laerdansk / FC-Sprint&sup2; Leerbedrijf bronnen </span>
      </center>
    </footer>

    <script type="text/javascript">
      var jsonData = "noJson";
      var hr = new XMLHttpRequest();

      hr.open("GET", "json_files/jsonData_0_123.json", true);
      hr.setRequestHeader("Content-type", "application/json", true);
      hr.onreadystatechange = function() {
        if (hr.readyState == 4 && hr.status == 200) {
          jsonData = JSON.parse(hr.responseText).main_object;
        }
      }
      hr.send(null);
    </script>

    <script src="javascript.js"></script>
</body>

</html>

this is my fiddle i hope it's okay since it's the second time making a fiddle if it's not right, please, tips are always welcome! https://jsfiddle.net/82332Lk8/

Answer 1

you would be able to do this with the accept option within droppable.

But first, you need to declare the image's visibility as "hidden" in your css file:

.eggImage {
 visibility: hidden; 
}

once you make the matching word draggable with a class like '.wordEgg' then you could use 'accept' in your droppable function to specify which class the droppable element accepts, then use css() to change the visibility of the image:

 $( ".eggImage" ).droppable({
         accept: ".wordEgg",
         drop: function() {
          $(".eggImage").css("visibility","visible")
      });

working fiddle demo: http://jsfiddle.net/drrrreams/7q74ophg/