zagadka

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1{
    position: absolute; top: 120px; left: 10px;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 1px solid #aaaaaa;
}
#div2{
    position: absolute; top: 120px; left: 180px;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 1px solid black;
}
#div3{
    position: absolute; top: 120px; left: 330px;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 1px solid black;
}
#div4{
    position: absolute; top: 120px; left: 480px;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    border: 1px solid black;
}

</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

</script>
</head>
<body>
<h2 style="font-family:courier;">Przenieś prawidłową odpowiedź w puste miejsce</h2>
<button onclick="myFunction()">Losuj pytanie</button>
<p id="demo"></p>
<p style="font-family:courier; font-size:120%;">3+5=</p>
<br>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div2"  ondragover="allowDrop(event)">
  <img src="http://www.clker.com/cliparts/u/a/o/r/5/6/number-8-hi.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="100" handleDragStart>
</div>

<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="http://www.clker.com/cliparts/K/w/R/r/V/Z/number-4-md.png" draggable="true" id="drag3" width="100" height="100">
</div>

<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="http://www.clker.com/cliparts/F/w/X/P/R/2/number-6-hi.png" draggable="true"  id="drag1" width="100" height="100">

</div>
</body>
</html>