Develop Reference

<template> clone but with texts from user input

I am trying to create a comment section for my page, I used the template element to create the box and format for my user's pic and name but i'm having difficulties adding the text received from the user to get into the box. right now it creates the box and just puts the text outside/under it. How can I create a element to store inside the template?
function postComment() {
//Clone new box for comment
var temp = document.getElementsByTagName("template")[0];
var clone = temp.content.cloneNode(true);
var newComment = document.getElementById("new-comment");
newComment.appendChild(clone)
//Get comment
var userComment = document.getElementById("comment-box").value;
var text = document.createElement('p');
text.innerHTML = userComment;
newComment.appendChild(text)
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
.post-comment .list .day {
font-size: 12px;
}
.post-comment {
padding: 0 0 15px 58px
}
#comment-box {
border: none;
border-radius: 5px;
}
.comment-box .user {
display: flex;
width: min-content;
}
.comment-box .image img {
width: 24px;
height: 24px;
margin-right: 10px;
border-radius: 50%;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template>
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>
<div class="user-name">
<div class="name">Tom Nook</div>
<div class="day">1 second ago</div>
</div>
</div>
</div>
</template>
<div id="new-comment"></div>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

Try this and see if this suits your requirements:
function postComment() {
//Get comment
var userComment = document.getElementById("comment-box").value;
var html = '<div class="list">' +
'<div class="user">' +
'<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>' +
'<div class="user-name">' +
'<div class="name">Tom Nook</div>' +
'<div class="day">1 second ago</div>' +
'</div>' +
'</div>' +
'<div id="new-comment">' + userComment + '</div>' +
'</div>';
var template = document.getElementsByTagName("template")[0];
template.insertAdjacentHTML("afterend", html);
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template></template>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

Show multiple file thumbnail on custom dropzone

I created custom dropzone in order to upload my files as the following example
function readFile(input) {
debugger;
if (input.files && input.files[0]) {
var reader = new FileReader();
for (let i = 0; i < input.files.length; i++) {
reader.onload = function(e) {
var htmlPreview =
'<img width="100" src="' +
e.target.result +
'" />' +
"<p>" +
input.files[i].name +
"</p>";
var wrapperZone = $(input).parent();
var previewZone = $(input)
.parent()
.parent()
.find(".preview-zone");
var boxZone = $(input)
.parent()
.parent()
.find(".preview-zone")
.find(".box")
.find(".box-body");
wrapperZone.removeClass("dragover");
previewZone.removeClass("hidden");
// boxZone.empty();
boxZone.append(htmlPreview);
};
}
reader.readAsDataURL(input.files[0]);
}
}
function reset(e) {
e.wrap("<form>")
.closest("form")
.get(0)
.reset();
e.unwrap();
}
$(".dropzone").change(function() {
readFile(this);
});
$(".dropzone-wrapper").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("dragover");
});
$(".dropzone-wrapper").on("dragleave", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass("dragover");
});
$(".remove-preview").on("click", function() {
var boxZone = $(this)
.parents(".preview-zone")
.find(".box-body");
var previewZone = $(this).parents(".preview-zone");
var dropzone = $(this)
.parents(".form-group")
.find(".dropzone");
boxZone.empty();
previewZone.addClass("hidden");
reset(dropzone);
});
.container {
padding: 50px 100px;
}
.box {
position: relative;
background: #ffffff;
width: 100%;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
margin-bottom: 10px;
}
.box-tools {
position: absolute;
right: 10px;
top: 5px;
}
.dropzone-wrapper {
border: 2px dashed #91b0b3;
color: #92b0b3;
position: relative;
height: 150px;
}
.dropzone-desc {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 40%;
top: 60px;
font-size: 16px;
}
.dropzone,
.dropzone:focus {
outline: none !important;
width: 100%;
cursor: pointer;
}
.input-file {
position: absolute;
width: 100%;
height: 150px;
opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
background: #ecf0f5;
}
.preview-zone {
text-align: center;
}
.preview-zone .box {
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="10secs">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">10sec</h4>
</div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="preview-zone hidden">
<div class="box box-solid">
<div class="box-header with-border">
<div><b>Preview</b></div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-danger btn-xs remove-preview">
<i class="fa fa-times"></i> Reset
</button>
</div>
</div>
<div class="box-body"></div>
</div>
</div>
<div class="dropzone-wrapper">
<div class="dropzone-desc">
<i class="glyphicon glyphicon-download-alt"></i>
<div>Choose an image file or drag it here.</div>
</div>
<input type="file" class="dropzone input-file" multiple asp-for="#Model.Files10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see it is a multiple-input file, so you can upload multiple files in the same dropzone.
as you can see in the readFile javascript function, I create the thumbnail, the problem is when selecting more than one file, it only shows one thumbnail, how can I display each of them each next to the other as:
Regards

How to wrap an instance of a div inside a box

I'm new to JavaScript, so bear with me if I'm not explaining what I want that well. So basically I have a form for creating activities, so whenever the user fills the fields and hit save it will create an instance of the div containing the information. Now those information are basically just in lines, and I would like to organize them inside a box (div), but I'm not sure how to create it, is it using JS or HTMl?
Here is a picture of what I have working right now.
And here is a view of the code.
window.onload = function() {
function addAct(nameact, when, where,desc) {
var buses = document.querySelectorAll(".bus");
var curr = document.createElement("div");
curr.setAttribute("class", "name");
var p0 = document.createElement("p");
p0.setAttribute("class", "nameact");
p0.innerHTML = nameact;
var p1 = document.createElement("p");
p1.setAttribute("class", "whereisit");
p1.innerHTML = when;
var p2 = document.createElement("p");
p2.setAttribute("class", "when");
p2.innerHTML = where;
var p3 = document.createElement("p");
p3.setAttribute("class", "describtion");
p3.innerHTML = desc;
curr.appendChild(p0);
curr.appendChild(p1);
curr.appendChild(p2);
curr.appendChild(p3);
if (buses.length) {
buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML)
} else {
document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML)
}
}
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
}
<section id="cd-placeholder-2" class="cd-section cd-container">
<h2>Activities</h2>
<div id="Slider" class="slide-up">
<div>
<div class="contents" >
<form class="form2">
<div class="col-3">
<label>
Activity Name
<input placeholder="What is your activity?" tabindex="3" name="nameact" />
</label>
</div>
<div class="col-3">
<label>
Where?
<input placeholder="Where is it going to be?" tabindex="4" name="when" />
</label>
</div>
<div class="col-3">
<label>
When?
<input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/>
</label>
</div>
<div>
<label>
Care to share more?
<textarea placeholder="describtion of your activity" class="text" name="desc"></textarea>
</label>
</div>
<button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button>
</form>
<div id="name"></div>
</div>
</div>
</div>
</section>
Any feedback is highly appreciated.

You need HTML+CSS+JS
HTML :
<div id="name"></div>
CSS
.row{
background-color: red;
border: 5px solid #333;
display: block;
position: relative;
overflow: hidden;
}
.nameact{
background-color:red;
height: 40px;
display: inline-block;
}
.whereisit{
background-color:green;
height: 40px;
display: inline-block;
}
.when{
background-color:blue;
height: 40px;
display: inline-block;
}
.describtion{
background-color:brown;
height: 40px;
display: inline-block;
}
JS
var obj = {nameact: "", when: "", where: "",desc:""};
document.forms[1].onchange = function(e) {
obj[e.target.name] = e.target.value;
}
document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
function addAct(nameact, when, where,desc) {
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>';
document.getElementById('name').innerHTML += myhtml;
}
You will need to update CSS code, based on your needs

If you need any help understanding this, please let me know. I've written a few css styles, and the html markup that they will be applied to. Make your javascript produce this markup, and do some reading about CSS to extrapolate this into a complete module.
<style>
.activity {
width: 645px;
height: 160px;
border: 2px solid #0000ff;
}
.activity > div {
padding: 20px;
}
.activity .top {
display: inline-block;
float: left;
width: 174px;
height: 30;
border-right: 1px solid #0000ff;
}
.activity .top.end {
width: 175px;
border-right: none;
}
.activity .bottom {
display: inline-block;
float: left;
width: 605px;
height: 50;
border-top: 1px solid #0000ff;
}
.activity .title {
display: block;
}
</style>
<div class="activity">
<div class="top">
<span class="title">ACTIVITY NAME</span>
<span>Skydiving</span>
</div>
<div class="top">
<span class="title">WHERE?</span>
<span>Dubai Palm Island</span>
</div>
<div class="top end">
<span class="title">2017-06-22</span>
</div>
<div class="bottom">
<span>CARE TO SHARE MORE?</span>
<span class="title">It will be a fun trip!</span>
</div>
</div>
I hope this gets you headed in the right direction!

Jquery Slide Down show div with loop

I have multiple complex divs with nested divs including text and images. When the page loads I am displaying 4 of the div's. A button is shown below with the option to show more. Each time the user press the show more button im using Jquery to slide down and show the next 2 divs. There are a total of 28 divs so it will be 14 rows. Once all the divs are visible the button will change to "show less" and the rest of the divs will slide up or become hidden (havnt got to this part yet)
for some reason the JsFiddle is not even working properly :(, im not the best at JavaScript. Below is the code and Jsfiddle Link. I have made simple divs in the example.
JsFiddle
Link To Js Fiddle
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;" href="#">SEE MORE</a></span></center>
JS
var count = 0;
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');
$("#showmoreleaders").click(function() {
count++;
});
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
}
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.hide {
display: none;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
JsFiddle
Link To Js Fiddle

here you go.
you had your if's outside the function so thats why it didn't work, also updated so you can hide them after they are all shown.
also i removed the href from the a tag because it was causing the page to go all the way up. if you don't have a link to go to, you shouldn't put hrefs to a tags
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;">SEE MORE</a></span></center>
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.hide{
display: none;
}
#showmoreleaders{
cursor: pointer;
}
JS
var count = 0;
$("#showmoreleaders").click(function() {
count++;
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
$('#showmoreleaders').html('SEE LESS');
}
if (count == 4) {
$(".leaders-hidden-3").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 5) {
$(".leaders-hidden-2").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 6) {
$(".leaders-hidden").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 7) {
$('#showmoreleaders').html('SEE MORE');
count = 0;
}
});
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');

icon stays hidden until something is moved there

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>
<span class="fa fa-refresh spin" style="font-size:25px;"></span><span class="igen spin"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: <span id="rigtige">0</span> <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte:
<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"> ©2013 laerdansk / FC-Sprint² 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/

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/