title: JavaScript drag and drop game new level
body: <p>Hello stack overflow team!</p>
  
  <p>I am a beginner at web development and I ran into few problems while working on my simple JS drag and drop game. I will try to explain as clear as I can the problems I am facing on this little project. </p>
  
  <ol>
  <li>I can't figure how to make a 2nd level for the game. So once a player submits his answers, the next level appears (same style, just different body parts). I was looking for answers on google, but it seems I just don't know how to find it or it is not there.</li>
  <li>Another problem I would like to fix is when you dragging a picture to a drop zone, I would like that picture to appear on the drop zone instead of a blank space.</li>
  <li>The last problem I would like to fix is when you dragging target to a dropping area you cannot drop it anywhere else except on the "right" area. How to change that, so you could drop the target onto any dropping area?</li>
  <li><p>The last problem is how to keep all the elements in the middle? I was playing around with css a lot, but I just couldn't get it done. I tried to change positions, used these properties:</p>
  
  <p>left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  But it doesn't work...</p></li>
  </ol>
  
  <p>Here is the html, css and js code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//CREATING VARIABLE TO INCREASE THE SCORE
  var i = 0;
  i++;
  
  //SETTING UP THE ONDRAGSTART EVENT DATA/IMAGES THAT I WANT TO MOVE
  function dragStart1(event) {
    event.dataTransfer.setData("text1", event.target.id);
  }
  
  function dragStart2(event) {
    event.dataTransfer.setData("text2", event.target.id);
  }
  
  function dragStart3(event) {
    event.dataTransfer.setData("text3", event.target.id);
  }
  
  //PREVENTING DEFAULT BROWSER SETTINGS SO IT WOULDNT ACT WEIRD
  function dragOver1(event) {
    event.preventDefault();
  }
  
  function dragOver2(event) {
    event.preventDefault();
  }
  
  function dragOver3(event) {
    event.preventDefault();
  }
  
  //GETTING THE DATA/IMAGES I NEED WHEN IT IS BEING DROPPED ON THE DROP AREAS
  function onDrop4(event) {
    var data = event.dataTransfer.getData("text1");
    event.target.appendChild(document.getElementById(data));
    dropArea1.innerHTML = "&lt;img src=\"Img/heart.png\&gt;";
    score.innerHTML = i++;
    //changing the style back to normal after dragging is done
    dropArea1.style.background = "";
    dropArea1.style.border = "";
  }
  
  function onDrop5(event) {
    var data = event.dataTransfer.getData("text2");
    event.target.appendChild(document.getElementById(data));
    dropArea2.innerHTML = "&lt;img src=\"Img/lungs.png\&gt;";
    score.innerHTML = i++;
    //changing the style back to normal after dragging is done
    dropArea2.style.background = "";
    dropArea2.style.border = "";
  }
  
  function onDrop6(event) {
    var data = event.dataTransfer.getData("text3");
    event.target.appendChild(document.getElementById(data));
    dropArea3.innerHTML = "&lt;img src=\"Img/stomach.png\&gt;";
    score.innerHTML = i++;
    //changing the style back to normal after dragging is done
    dropArea3.style.background = "";
    dropArea3.style.border = "";
  }
  
  //PREVENTING DEFAULT BROWSER SETTINGS FROM ACTING WEIRD
  function onDrop1(event) {
    event.preventDefault();
  }
  
  function onDrop2(event) {
    event.preventDefault();
  }
  
  function onDrop3(event) {
    event.preventDefault();
  }
  
  //SETTING UP A FUNCTION FOR "SUBMIT" BUTTON TO ALERT CONGRATS MESSAGE
  function submitAnsw() {
    if (i &gt; 3) {
      alert("Congratulations! You know the main human organs!");
    } else {
      alert("You are very close! Don't give up!");
    }
  }
  
  //CHANGING THE STYLE OF THE DROP AREAS ONCE THE IMAGE IS BEING DRAGGED ON THEM
  function dragEnter1(event) {
    event.preventDefault();
    dropArea1.style.background = "lightblue";
    dropArea1.style.border = "3px solid black";
  }
  
  function dragEnter2(event) {
    event.preventDefault();
    dropArea2.style.background = "lightblue";
    dropArea2.style.border = "3px solid black";
  }
  
  function dragEnter3(event) {
    event.preventDefault();
    dropArea3.style.background = "lightblue";
    dropArea3.style.border = "3px solid black";
  }
  
  //CHANGING THE STYLE OF DROPAREAS ONCE THE DRAGGABLE IMAGE LEAVES THE DROP AREA
  function dragLeave1(event) {
    event.preventDefault();
    dropArea1.style.background = "lightskyblue";
    dropArea1.style.border = "3px solid #666666";
  }
  
  function dragLeave2(event) {
    event.preventDefault();
    dropArea2.style.background = "lightskyblue";
    dropArea2.style.border = "3px solid #666666";
  }
  
  function dragLeave3(event) {
    event.preventDefault();
    dropArea3.style.background = "lightskyblue";
    dropArea3.style.border = "3px solid #666666";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* STYLE BY AURIMAS RANSYS */
  
  .dropArea {
    float: left;
    width: 210px;
    height: 150px;
    margin: 12px;
    padding: 10px;
    border: 3px solid #666666;
    background-color: lightskyblue;
    border-radius: 10px;
    top: 15%;
  }
  
  .dragImg {
    float: left;
    width: 210px;
    height: 150px;
    margin: 12px;
    padding: 10px;
    border: 3px solid white;
    top: 100px;
  }
  
  img {
    width: 210px;
    height: 150px;
    cursor: move;
  }
  
  header {
    color: navy;
    position: absolute;
    top: 2%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  }
  
  h1 {
    color: navy;
    position: absolute;
    top: 5%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  }
  
  p {
    color: navy;
    position: absolute;
    top: 11%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
  }
  
  
  /*
  Code is available at https://www.bestcssbuttongenerator.com/#/38
   */
  
  .myButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow: inset 0px 1px 0px 0px #caefab;
    box-shadow: inset 0px 1px 0px 0px #caefab;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
    background: -moz-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background: -webkit-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background: -o-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background: -ms-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811', GradientType=0);
    background-color: #77d42a;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #268a16;
    display: inline-block;
    cursor: pointer;
    color: #306108;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #aade7c;
  }
  
  .myButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
    background: -moz-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background: -webkit-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background: -o-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background: -ms-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background: linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a', GradientType=0);
    background-color: #5cb811;
  }
  
  .myButton:active {
    position: relative;
    top: 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Anatomy Game&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;!-- HEADER --&gt;
    &lt;header&gt;Human Anatomy Game&lt;/header&gt;
    &lt;h1&gt;Level 1&lt;/h1&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
    &lt;!-- ADDING THE SCORE --&gt;
    &lt;p&gt;Score: &lt;text id="score"&gt;0&lt;/text&gt; &lt;/p&gt;
  
  
    &lt;!-- IMAGES FOR DROPPING --&gt;
    &lt;div class="dragImg" ondrop="onDrop1(event)"&gt;
      &lt;img src="Img/heart.png" ondragstart="dragStart1(event)" draggable="true" id="img1"&gt;
    &lt;/div&gt;
  
    &lt;div class="dragImg" ondrop="onDrop2(event)"&gt;
      &lt;img src="Img/lungs.png" ondragstart="dragStart2(event)" draggable="true" id="img2"&gt;
    &lt;/div&gt;
  
    &lt;div class="dragImg" ondrop="onDrop3(event)"&gt;
      &lt;img src="Img/stomach.png" ondragstart="dragStart3(event)" draggable="true" id="img3"&gt;
    &lt;/div&gt;
  
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  
    &lt;!-- IMAGES DROPZONE --&gt;
    &lt;div id="dropArea1" class="dropArea" ondrop="onDrop4(event)" ondragover="dragOver1(event)" ondragenter="dragEnter1(event)" ondragleave="dragLeave1(event)"&gt;HEART&lt;/div&gt;
    &lt;div id="dropArea2" class="dropArea" ondrop="onDrop5(event)" ondragover="dragOver2(event)" ondragenter="dragEnter2(event)" ondragleave="dragLeave2(event)"&gt;LUNGS&lt;/div&gt;
    &lt;div id="dropArea3" class="dropArea" ondrop="onDrop6(event)" ondragover="dragOver3(event)" ondragenter="dragEnter3(event)" ondragleave="dragLeave3(event)"&gt;STOMACH&lt;/div&gt;
  
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  
    &lt;!-- BUTTON TO SUBMIT YOUR SELECTIONS --&gt;
    &lt;button class="myButton" onclick="submitAnsw()"&gt;Submit&lt;/button&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would really appreciate a good feedback and answers to my problems as it is my first work and I want to improve greatly. Also I would like to incorporate JS libraries on this project, so any advice how will do!</p>
  
  <p>P.S. I am sorry for my english, it is not my first language, but I tried to be as clear as possible.</p>
  
  <p>Thank you in advance!</p>