Update Oceans_DragandDrop.html

Oceans_DragandDrop.html

@@ -50,15 +50,19 @@
   <img src="Oceans.png" alt="World Map" style="width: 100%; height: auto;">
   <!-- Replace 'Oceans.png' with the path to your map image -->
   <!-- Define dropzones with approximate positions on the map -->
-  <div id="dropzoneAtlantic" class="dropzone" style="top: 200px; left: 300px;"></div>
+  <div id="dropzoneAtlantic" class="dropzone" style="top: 210px; left: 300px;"></div>
   <div id="dropzonePacific" class="dropzone" style="top: 200px; left: 600px;"></div>
   <div id="dropzoneIndian" class="dropzone" style="top: 400px; left: 500px;"></div>
+  <div id="dropzoneArctic" class="dropzone" style="top: 50px; left: 500px;"></div>
+  <div id="dropzoneSouthern" class="dropzone" style="top: 50px; left: 500px;"></div>
   <!-- Add other oceans as needed -->
 
   <!-- Draggable ocean names -->
   <div id="Atlantic" class="draggable" draggable="true" style="top: 720px; left: 100px;">Atlantic Ocean</div>
   <div id="Pacific" class="draggable" draggable="true" style="top: 720px; left: 250px;">Pacific Ocean</div>
   <div id="Indian" class="draggable" draggable="true" style="top: 720px; left: 400px;">Indian Ocean</div>
+  <div id="Arctic" class="draggable" draggable="true" style="top: 720px; left: 250px;">Pacific Ocean</div>
+  <div id="Southern" class="draggable" draggable="true" style="top: 720px; left: 400px;">Indian Ocean</div>
   <!-- Add other ocean names as needed -->
 </div>
 
@@ -73,6 +77,8 @@
     'Atlantic': 'dropzoneAtlantic',
     'Pacific': 'dropzonePacific',
     'Indian': 'dropzoneIndian',
+    'Arctic': 'dropzoneArctic',
+    'Southern': 'dropzoneSouthern',
     // Add other ocean-dropzone pairs here
   };