still figuring out touch user correction but added second puzzle

interactive.js → interactive1.js

@@ -21,16 +21,16 @@ function creatingGrid() {
 creatingGrid();
 
 let img0 = document.getElementById("img0");
-img0.src = "puzzle1/Picture1.png"; //adding the source for the img elements created above.
+img0.src = "puzzle1/piece1.png"; //adding the source for the img elements created above.
 
 let img1 = document.getElementById("img1");
-img1.src = "puzzle1/Picture2.png"; 
+img1.src = "puzzle1/piece2.png"; 
 
 let img2 = document.getElementById("img2");
-img2.src = "puzzle1/Picture3.png"; 
+img2.src = "puzzle1/piece3.png"; 
 
 let img3 = document.getElementById("img3");
-img3.src = "puzzle1/Picture4.png"; 
+img3.src = "puzzle1/piece4.png"; 
 
 //II. Adding event listeners to start and reset buttons
 let pieceContainer = document.getElementById("piece-container");
@@ -114,6 +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();
     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
@@ -126,10 +127,12 @@ function handleStart(e) {
 
 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)
     e.preventDefault();
+    e.stopPropagation();
     let draggedItem;
     if (e.type === 'drop') {
         let data = e.dataTransfer.getData("text/plain"); //retrieving id and moving it the div to target. 
@@ -158,8 +161,8 @@ 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){ 
+ /*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);

interactive2.js

@@ -0,0 +1,212 @@
+let puzzleContainer = document.getElementById("puzzle-container");
+
+function creatingGrid() {
+    let rows = 3;
+    let columns = 3;
+
+    for(let i=0; i<rows*columns; i++){
+        let pieceDiv = document.createElement('div')
+        pieceDiv.className = "piece2";
+        puzzleContainer.appendChild(pieceDiv);
+        let img = document.createElement("img");
+        img.className = "images";
+        img.id = `image${i}`;
+        img.setAttribute("draggable", "true"); 
+        pieceDiv.appendChild(img);
+    }
+}
+creatingGrid();
+
+let img0 = document.getElementById("image0");
+img0.src = "puzzle2/Piece1.png"; 
+
+let img1 = document.getElementById("image1");
+img1.src = "puzzle2/Piece2.png"; 
+
+let img2 = document.getElementById("image2");
+img2.src = "puzzle2/Piece3.png"; 
+
+let img3 = document.getElementById("image3");
+img3.src = "puzzle2/Piece4.png"; 
+
+let img4 = document.getElementById("image4");
+img4.src = "puzzle2/Piece5.png"; 
+
+let img5 = document.getElementById("image5");
+img5.src = "puzzle2/Piece6.png"; 
+
+let img6 = document.getElementById("image6");
+img6.src = "puzzle2/Piece7.png"; 
+
+let img7 = document.getElementById("image7");
+img7.src = "puzzle2/Piece8.png"; 
+
+let img8 = document.getElementById("image8");
+img8.src = "puzzle2/Piece9.png"; 
+
+function creatingDropZones() { 
+    let rows = 3;
+    let columns = 3;
+
+    for(let i=0; i<rows*columns; i++){
+        let dropZone = document.createElement('div')
+        dropZone.className = "drop-zone2";
+        puzzleContainer.appendChild(dropZone);
+    }
+}
+creatingDropZones();
+
+let dropZone = document.getElementsByClassName("drop-zone2");
+
+Array.from(dropZone).forEach(function(dropZone, i){
+    dropZone.id = `droping-${i}`; 
+});
+
+let pieceDiv = document.getElementsByClassName("piece2");
+
+Array.from(pieceDiv).forEach(function(pieceDiv, i){
+    pieceDiv.id = `dragging-${i}`;
+});
+
+let pieceContainer = document.getElementById("piece-container");
+
+document.addEventListener('DOMContentLoaded', function () {
+    let startButton = document.getElementById('start');
+    let resetButton = document.getElementById('reset');
+
+    let drop0 = document.getElementById("droping-0");
+    let drop2 = document.getElementById("droping-2");
+    let drop4 = document.getElementById("droping-4");
+    let drop6 = document.getElementById("droping-6");
+    let drop8 = document.getElementById("droping-8");
+
+    startButton.addEventListener('click', function(e){
+        startButton.style.display = 'none';
+        resetButton.style.display = 'flex'; 
+        drop0.style.borderBottom = "1px solid black"; 
+        drop0.style.borderRight = "1px solid black";
+        drop2.style.borderBottom = "1px solid black";
+        drop2.style.borderLeft = "1px solid black";
+        drop4.style.border = "1px solid black";
+        drop6.style.borderTop = "1px solid black";
+        drop6.style.borderRight = "1px solid black";
+        drop8.style.borderTop = "1px solid black";
+        drop8.style.borderLeft = "1px solid black";
+        let pieces = document.getElementsByClassName("piece2");
+        let element = e.target; 
+        e.preventDefault();
+        Array.from(pieces).forEach(function(piece){ 
+            let leftPosition = Math.floor(Math.random()*60);
+            let topPosition = Math.floor(Math.random()*60);
+            piece.style.position = "absolute";
+            piece.style.left = `${leftPosition}%`;
+            piece.style.top = `${topPosition}%`
+            pieceContainer.appendChild(piece);
+        });
+    });
+
+    resetButton.addEventListener('click', function(e) {
+        resetButton.style.display = 'none';
+        startButton.style.display = 'flex';
+        let element = e.target;
+        window.location.reload(); 
+    });
+});
+
+
+
+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.
+
+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
+    } 
+    if (e.type === 'touchstart') { 
+        e.preventDefault();
+    }
+    globalDraggedItemId = e.currentTarget.id; // setting data
+}
+
+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)
+    e.preventDefault();
+    e.stopPropagation();
+    let draggedItem;
+    if (e.type === 'drop') {
+        let data = e.dataTransfer.getData("text/plain"); //retrieving id and moving it the div to target. 
+        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
+    }
+
+    checkPosition(); //calling function for alert messages below
+}
+
+Array.from(draggableImages).forEach(function(image){ //Iterating through each element and assigning touch and mouse event to each.
+    image.addEventListener('dragstart', handleStart);
+    image.addEventListener('touchstart', handleStart);
+});
+
+Array.from(dropZone).forEach(function(zone){ 
+    zone.addEventListener('dragover', handleOverMove);
+    zone.addEventListener('touchmove', handleOverMove);
+    zone.addEventListener('drop', handleDropEnd);
+    zone.addEventListener('touchend', handleDropEnd);
+});
+
+
+let correctPosition = { // creating an object using individual ids created earlier.
+    image0: "droping-0",
+    image1: "droping-1",
+    image2: "droping-2",
+    image3: "droping-3",
+    image4: "droping-4",
+    image5: "droping-5",
+    image6: "droping-6",
+    image7: "droping-7",
+    image8: "droping-8",
+};
+
+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.
+        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
+        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
+        setTimeout(() => {
+            alert("Congratulations! You completed the puzzle.");
+        }, 500);
+    }
+
+    return true;
+}

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="interactive.js" defer> </script> <!--Specify defer or async?-->
+        <script src="interactive1.js" defer> </script> <!--Specify defer or async?-->
     </head>
 
     <body>

puzzle2.html

@@ -6,6 +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?-->
     </head>
 
     <body>

puzzle2/IMG_0529.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.3&permmsgid=msg-f:1795877045770611679&th=18ec3ca87d6f6bdf&view=att&disp=safe&saddbat=ANGjdJ_tMuaSwu-6ndqFDZy7itx7pc-t4n67bVwOIwhD3i7EgIZPCNVqxX53eHAkjwpQZSVOUqdqDvY9yCecIwb5yOk-HrPOJ_WWD8ZIxjJUc9GYsnAibPJexkX3Cr9EMkWEVyqXjEwwWyfl4FgyIudB59xhxuTLAj2wh4LlXe-oiHvz4ppmqDtCPyy1QWVzgkhtQvlxyg7qQhp56N26McF-KOxvtbim61awIDX9trMv8JCkueC5IBO0GKd5fnPl6LTVpvDQKrISMdSBcPeZZYrxfk56NBuroCKY1fF0R3LF6iG0WgnXBbzht1b8hfCehcoepW-ZXWPYpRp08xNBOOY3QFChEMPQAhdNnT0YGa4ZTcPW19jyJljzQ2Wi8KfhOOuXWzpAF_5WmAPKbpWrK2hXXx21_zzp0eOGj1-ThxCTTDqtep34Q4LDkmA14yYX-8bo7wV_czRaW1eCAUnOixLbILNQBz2LuBt7oztzuW3ijuCenglxTHPULXLt24zQu-MPV6k9bDjI9cOvWZKWqhD8OQFejlNki5Y-qEim6XzfuqoNXgTEdPHPj1OP0ZFqCiKX4wNDvVZvieoOZjFmJMqfePy7dsK71TqCaQ8MVSnybh1LXEKz8j7ZqBMIDHgfH8mUlOYk-tb6C99U57OqdyzCfEOmfQS9RsSTMpsc0asRQ7OWlOhBO94PVkVO0h4T3-xrMryo3lhbzq35IFhwjKCWkWi_HXpvXaAsAj27CC-us1A3yfSg_hw0ABWauGJ1YJuy1rrF5Zfa4F4YR8xXfKuBq1a0Mxk-hIiniaPSCTtU6rZkEa9xkW_r4FRSqagcZF2QsbDtp57S_XBmSHs0RekRCv5-lI4F1Kh_5RNyF-Tg1rO6_jBiAJWeGhWVmGLKy8wD7eEgt6raKfVxuQnHQFAV3vltwMvRhkGv9Z2SH2A3jJMs1XZMkPoSXvOvQFj0LYMsM9dEDdjlyqhdAh3rYA9GTGXsvSn0EzW3BBMDcBqZM5-xTwP0Hh0QlNGpmk-OWozFp5_XM0HjZ4xLe20WQNZ1jlG2esseLSYG46O7Qw