added 3rd puzzle folder

interactive1.js

@@ -114,7 +114,7 @@ let originalPlace = document.getElementsByClassName("piece");
 var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state.
 
 function handleStart(e) {
-    e.stopPropagation();
+    e.stopPropagation(); //trying to ensure that the click event is just on the image not its parent
     if (e.type === 'dragstart') {
         console.log(e);
         e.dataTransfer.setData('text/plain', e.currentTarget.id); //Seeting the data to add id to my target element that is my div and retriving it in drop- source: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData

interactive2.js

@@ -117,44 +117,44 @@ document.addEventListener('DOMContentLoaded', function () {
 
 let draggableImages = document.getElementsByClassName("images");
 //let originalPlace = document.getElementsByClassName("piece2");
-var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state.
+var globalDraggedItemId = null;
 
 function handleStart(e) {
     e.stopPropagation();
     if (e.type === 'dragstart') {
         console.log(e);
-        e.dataTransfer.setData('text/plain', e.currentTarget.id); //Seeting the data to add id to my target element that is my div and retriving it in drop- source: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData
+        e.dataTransfer.setData('text/plain', e.currentTarget.id); 
     } 
     if (e.type === 'touchstart') { 
         e.preventDefault();
     }
-    globalDraggedItemId = e.currentTarget.id; // setting data
+    globalDraggedItemId = e.currentTarget.id; 
 }
 
 function handleOverMove(e){ 
     e.preventDefault();
     e.stopPropagation();
 }
 
-function handleDropEnd(e) { //modify this function with some sort of if statement so that no bug with touch event. (what is hapenign is that the img are otherwise already nested in a drop and cant be moved to drop zones)
+function handleDropEnd(e) { 
     e.preventDefault();
-    e.stopPropagation();
+    e.stopPropagation(); 
     let draggedItem;
     if (e.type === 'drop') {
-        let data = e.dataTransfer.getData("text/plain"); //retrieving id and moving it the div to target. 
+        let data = e.dataTransfer.getData("text/plain");
         draggedItem = document.getElementById(data); 
     } else if (e.type === 'touchend') {
         draggedItem = document.getElementById(globalDraggedItemId); 
     }
     if (draggedItem) {
         e.currentTarget.appendChild(draggedItem);
-        globalDraggedItemId = null; // Reset the global variable
+        globalDraggedItemId = null;
     }
 
-    checkPosition(); //calling function for alert messages below
+    checkPosition();
 }
 
-Array.from(draggableImages).forEach(function(image){ //Iterating through each element and assigning touch and mouse event to each.
+Array.from(draggableImages).forEach(function(image){
     image.addEventListener('dragstart', handleStart);
     image.addEventListener('touchstart', handleStart);
 });
@@ -166,8 +166,17 @@ Array.from(dropZone).forEach(function(zone){
     zone.addEventListener('touchend', handleDropEnd);
 });
 
+ /*This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original.
+ Array.from(originalPlace).forEach(function(place){ 
+    place.addEventListener('dragover', handleOverMove);
+    place.addEventListener('touchmove', handleOverMove);
+    place.addEventListener('drop', handleDropEnd);
+    place.addEventListener('touchend', handleDropEnd);
+});
+*/
+
 
-let correctPosition = { // creating an object using individual ids created earlier.
+let correctPosition = {
     image0: "droping-0",
     image1: "droping-1",
     image2: "droping-2",
@@ -183,26 +192,24 @@ function checkPosition() {
     let allPlaced = true;
     let allCorrect = true;
 
-    for (let [imgId, dropId] of Object.entries(correctPosition)) { //iterating through my object that contains the correct positions of each piece.
+    for (let [imgId, dropId] of Object.entries(correctPosition)) {
         let image = document.getElementById(imgId);
         let currentDrop = image.parentElement.id;
 
-       // Checking if piece are placed or not in the drop zone divs
        if (!image.parentElement || !image.parentElement.classList.contains('drop-zone2')) {
         allPlaced = false;
         }
 
-        // Checking if the images' parents' id are that of the dropzone id = aka they are they correctly placed
         if (currentDrop !== dropId) {
         allCorrect = false;
         }
     }
 
-    if (allPlaced && !allCorrect) {// All pieces are placed, but some are wrong
+    if (allPlaced && !allCorrect) {
         setTimeout(() => {
             alert("You are almost there! But some pieces are in the wrong place.");
-        }, 500); // Delay to allow for the puzzle to be visually completed before showing the message
-    } else if (allPlaced && allCorrect) { // All pieces are placed correctly
+        }, 500);
+    } else if (allPlaced && allCorrect) {
         setTimeout(() => {
             alert("Congratulations! You completed the puzzle.");
         }, 500);

puzzle1.html

@@ -6,7 +6,7 @@
         <title>Jigsaw Puzzle</title>
         <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="interactive1.js" defer> </script> <!--Specify defer or async?-->
+        <script src="interactive1.js" defer> </script>
     </head>
 
     <body>

puzzle2.html

@@ -6,7 +6,7 @@
         <title>Jigsaw Puzzle</title>
         <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="interactive2.js" defer> </script> <!--Specify defer or async?-->
+        <script src="interactive2.js" defer> </script>
     </head>
 
     <body>

puzzle3.html

@@ -6,6 +6,8 @@
         <title>Jigsaw Puzzle</title>
         <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="interactive3.js" defer> </script>
+
     </head>
 
     <body>

puzzle3/IMG_0526.jpg:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://mail.google.com/
+HostUrl=https://mail-attachment.googleusercontent.com/attachment/u/1/?ui=2&ik=08aadfbd9b&attid=0.1&permmsgid=msg-f:1795877045770611679&th=18ec3ca87d6f6bdf&view=att&disp=safe&saddbat=ANGjdJ_qs2tN6Z39uf7SP6UaFtEFZxH3pB0ugJvnxH274eBO_hKAHqC4TbO02wjkHcEwtF_ApIQPprmn33Ul2xPPzN3E8ezCH9kXZc7KEbO2DySrCgBZaCT6TGzz9JmvJxPLGBCjkc3ShH1fV3GjrWdTz0zlSvqbJKrZ-r5Qt-pIGs9KLKblLrnlkBbnfmkHOArpn9i_pzeE4p_U2Yv1unGFy08NImUVRv0o7fixM9f0kRBTMBJu3XyKMde9Tl709tVBUR2GkKV-h4VSzKQ3C9M0YnliJ8AWeAaAqcXaFP1gF8lNH_dkzvX0wS7WFb8fl9qZcrD3sndGHqRKroF2quF9OrWzh9gechZnRRjOdE8unrlgDTWbQ8aT3Vs2GdoHJQXoPwG--xbzgoO7ZkeCrcm7auxkT5PI5up0Lok_aYPAh0m616I_rgel7qfVYwRRp1J4tErurDXE3tMp3Q1DgXONOBCBY_TnthehoBBdNCpY5IgfmsUs9Fq9GhbuTYneAx2S5iaWoY34Fun4bpL5JMn5hQOAlyxpTge5m9wR493MwmZObgVKaTnbzTvIqEXZU-BI3xzLprW6yjpr2muTFmT8XXtPUNOoi4g4_VovlCrbjc6pwj3fDJwmWKFvrWu-I13MYbKPh4yVqj7kaXHnvpoUFbM3f_YFN7M0lCvR_cey6vGmwiu-uZYkQDND9Fu2dsmP0LEYtQ_-OulAIxqB0LWbVqBBK24G0INqBiRLoApWWQTTzDG3uWBIuC0GY8kHdeJ1d8WORi4VpoKlphlRDb2Fid9h30vSLT-kbcz8nJ-UrWtfX-EusVlAYeQgvSqNeiwVM761puF-t9RPfJaMeVJqf2FV6v4b-i6pkMlMilJYjmVjrxwIXhyL-MUGSLmzacJxqdF_Xr7aIYngCn_y-X48TDUOCPHV2_mLp6R54Ok9r9PXXYBwbdbsSGViE4NTORHnSTmWG0K29ts9jzkts6q3_TBHI6n8hgYSmqR4fZdsoXIOSjmQyPU39Sgf2pCt_Lm6OuNhcStOjafRILFU-Hf32wz-Vox391EDmYoq7A

style.css

@@ -12,6 +12,7 @@ body, main {
     display: flex;
     align-items: center; /* Centered children horizontally */
     justify-content: space-around;
+    background-color: gainsboro;
 }