API tools faq
paste
Combreal

sortImgGame.html

Combreal
Apr 4th, 2021 (edited)
774
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <style>
  5.             #div1, #div2
  6.             {
  7.                 float:left;
  8.                 width: 350px;
  9.                 height: 70px;
  10.                 padding: 10px;
  11.                 border: 1px solid #aaaaaa;
  12.             }
  13.            
  14.             #div1bis, #div2bis
  15.             {
  16.                 float:left;
  17.                 padding-left:5px;
  18.             }
  19.            
  20.             .flex
  21.             {
  22.                 padding-left: 150px;
  23.             }
  24.         </style>
  25.         <script>
  26.             function allowDrop(ev)
  27.             {
  28.                 ev.preventDefault();
  29.             }
  30.            
  31.             function drag(ev){
  32.                 ev.dataTransfer.setData("text", ev.target.id);
  33.             }
  34.            
  35.             function drop(ev)
  36.             {
  37.                 ev.preventDefault();
  38.                 var data = ev.dataTransfer.getData("text");
  39.                 ev.target.appendChild(document.getElementById(data));
  40.             }
  41.            
  42.             function reload()
  43.             {
  44.                 location.reload();
  45.             }
  46.            
  47.             function check()
  48.             {
  49.                 var goodResponses = 0;
  50.                 var offsets = document.getElementById('drag1').getBoundingClientRect();
  51.                 var top = offsets.top;
  52.                 var left = offsets.left;
  53.                 //alert(top + ' , ' + left)
  54.                 if ((top == 61) && (left == 19))
  55.                 {
  56.                     document.getElementById("div1").style.border = "thick solid #008000";
  57.                     goodResponses++;
  58.                 }
  59.                 else
  60.                 {
  61.                     document.getElementById("div1").style.border = "thick solid #FF0000";
  62.                 }
  63.                 offsets = document.getElementById('drag2').getBoundingClientRect();
  64.                 top = offsets.top;
  65.                 left = offsets.left;
  66.                 if ((top == 169) && (left == 19))
  67.                 {
  68.                     document.getElementById("div2").style.border = "thick solid #008000";
  69.                     goodResponses++;
  70.                 }
  71.                 else
  72.                 {
  73.                     document.getElementById("div2").style.border = "thick solid #FF0000";
  74.                 }
  75.                 if (goodResponses == 2)
  76.                 {
  77.                     document.getElementById("div3").innerHTML = "Congrats";
  78.                 }
  79.                 else
  80.                 {
  81.                     document.getElementById("div3").innerHTML = "Try again";
  82.                 }
  83.                 setTimeout(reload, 3000)
  84.             }
  85.         </script>
  86.     </head>
  87.     <body>
  88.         <p>Drag the images into the right rectangles :</p> 
  89.         <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  90.         <br><br>
  91.         <div id="div1bis">logo</div>
  92.         <br><br><br><br>
  93.         <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  94.         <br><br>
  95.         <div id="div2bis">logo2</div>
  96.         <br><br><br><br>
  97.         <div class="flex">
  98.              <button type="button" onclick='check()'>Check</button>
  99.         </div>
  100.         <div id="div3"></div>
  101.         <br>
  102.         <img id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69" alt="" src="data:image/png;base64,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" />
  103.         <img id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69" alt="" src="data:image/png;base64,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" />
  104.     </body>
  105. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!