Help with arrays and drag-and-drop

**saijmen** · 6th August 2012, 09:47

Hello all,

I'm attempting to create a webtext that uses puzzle elements for navigation. The basic idea is that there is a 4-piece puzzle. When the user drags and drops the 4 puzzle pieces in the correct places, the window redirects to another page (webxpertz.net in the example below).

I'm trying to do this by creating an array. When the user drops a piece, the id of the piece is stored in an array. My while loop is triggered when any 4 pieces are in place, and it tests for the correct order.

Or at least, that's the way's it's supposed to work. Can anyone tell me where I'm going wrong?

Code:

<body>
<!-- Target area for puzzle pieces -->
    <div id="topblock">
        <section id="targetbox1" class="targetbox" onDrop="dropTarget1(event)" onDragOver="allowDrop(event)"></section>
        <section id="targetbox2" class="targetbox" onDrop="dropTarget2(event)" onDragOver="allowDrop(event)"></section>
        <section id="targetbox3" class="targetbox" onDrop="dropTarget3(event)" onDragOver="allowDrop(event)"></section>
        <section id="targetbox4" class="targetbox" onDrop="dropTarget4(event)" onDragOver="allowDrop(event)"></section>
    </div>
<!--Puzzle Pieces-->
    <div id="middleblock">
          <section id="box1" class="box" onDrop="drop(event)" onDragOver="allowDrop(event)">
            <img id="square1" src="images/square1.png" alt="square1" draggable="true" onDragStart="drag(event)">
        </section>
        <section id="box2" class="box" onDrop="drop(event)" onDragOver="allowDrop(event)">
            <img id="square2" src="images/square2.png" alt="square2" draggable="true" onDragStart="drag(event)">
        </section>
        <section id="box3" class="box" onDrop="drop(event)" onDragOver="allowDrop(event)">
            <img id="square3" src="images/square3.png" alt="square3" draggable="true" onDragStart="drag(event)">
        </section>
        <section id="box4" class="box" onDrop="drop(event)" onDragOver="allowDrop(event)">
            <img id="square4" src="images/square4.png" alt="square4" draggable="true" onDragStart="drag(event)">
        </section>
    </div>
    
<!--JavaScript-->
    <script>
        //creates array for what is in targetboxes
        var targetContents = newArray();
                
        //tests targetContents for 4 pieces in place and then for correct order
        while (targetContents.length == 4)
            {
            if (targetContents = ["square1", "square2", "square3", "square4"])
                {
                window.open("http://www.webxpertz.net")
                }
            else
                {
                break;    
                }
            }
            
        //Prevents default actions by browsers 
        function allowDrop(e){
            e.preventDefault();
        }
        
        //stores the image id when dragging
        function drag(e){
            e.dataTransfer.setData("Text", e.target.id);
        }
        
        //Appends the HTML section with image data when dropped
        function drop(e){
            e.preventDefault();
            var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
        }
        
        //Changes target area and returns picture id
        function dropTarget1(e){
            e.preventDefault();
            var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
            targetContents[0] = getElementById(data);
        }
        
        //Changes target area and returns picture id
        function dropTarget2(e){
            e.preventDefault();
            var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
            targetContents[1] = getElementById(data);
        }
        
        //Changes target area and returns picture id
        function dropTarget3(e){
            e.preventDefault();
            var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
            targetContents[2] = getElementById(data);
        }
        
        //Changes target area and returns picture id
        function dropTarget4(e){
            e.preventDefault();
            var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
            targetContents [3] = getElementById(data);
        }
    </script>
</body>

**diades** · 6th August 2012, 10:07

Hi saijmen

Welcome!

At a quick glance, the array declaration is in error (in red)
There are two ways to declare the array, first in green and the second shorthand version in pink:

If that does not sort the problem, we can debug if we have a link or the complete page to work with

Code:

    <script type="text/javascript">
    //<![CDATA[
        //creates array for what is in targetboxes
//        var targetContents = newArray();
//either:
        var targetContents = new Array();
//  or
        var targetContents = [];
   
        //tests targetContents for 4 pieces in place and then for correct order
        while (targetContents.length == 4)
            {
            if (targetContents = ["square1", "square2", "square3", "square4"])
                {
                window.open("http://www.webxpertz.net")
                }
            else
                {
                break;    
                }
            }
//.......................
    //]]>
    </script>

**saijmen** · 6th August 2012, 10:26

Thanks for the quick reply. That fixed the array, but the script still isn't doing what I thought it would. I've uploaded a sample: http://www.dwrl.utexas.edu/~snelson/test/

The tiles that I'm using for the solution (going clockwise from the upper left) are numbers 1, 15, 20, & 5. I appreciate the help!

**diades** · 6th August 2012, 10:59

Ok, first hit, you are defining data via getElementById but5, data is not an element

Code:

        function drop(e){
            e.preventDefault();
            var data=e.dataTransfer.getData("Text");
            e.target.appendChild(document.getElementById(data));
        }

e.target.appendChild(document.getElementById(data));

the data (in red) has to be the id (string in quotes) of an existing element.

**Kool Dude** · 6th August 2012, 15:51

Hey there saijmen,

I changed some things and got it to work as far as it being right or wrong based on the first four pieces that are drag/dropped:

Code:

//creates array for what is in targetboxes
var targetContents = new Array();

//tests array for correct values
function checkSolved(a, b, c, d) {
  var aright = false, bright = false, cright = false, dright = false;
  aright = (targetContents[0] === a) ? true : false;
  bright = (targetContents[1] === b) ? true : false;
  cright = (targetContents[2] === c) ? true : false;
  dright = (targetContents[3] === d) ? true : false;
  return (aright && bright && cright && dright) ? true : false;
}
//tests targetContents for water symbol solution
function isSolved() {
	if (targetContents.length === 4) {
		if (checkSolved("square1", "square15", "square5", "square20")) {
			window.open("http://www.webxpertz.net");
		}
		else {
			alert("Wrong!");	
		}
	}
}
	
//Prevents default actions by browsers 
function allowDrop(e){
	e.preventDefault();
}

//stores the image id when dragging
function drag(e){
	e.dataTransfer.setData("Text", e.target.id);
}

//Appends the HTML section with image data when dropped
function drop(e){
	e.preventDefault();
	var data=e.dataTransfer.getData("Text");
	e.target.appendChild(document.getElementById(data));
}

//Changes target area and returns picture id
function dropTarget1(e){
	e.preventDefault();
	var data=e.dataTransfer.getData("Text");
	e.target.appendChild(document.getElementById(data));
	targetContents[0] = document.getElementById(data).id;
	isSolved();
}

//Changes target area and returns picture id
function dropTarget2(e){
	e.preventDefault();
	var data=e.dataTransfer.getData("Text");
	e.target.appendChild(document.getElementById(data));
	targetContents[1] = document.getElementById(data).id;
	isSolved();
}

//Changes target area and returns picture id
function dropTarget3(e){
	e.preventDefault();
	var data=e.dataTransfer.getData("Text");
	e.target.appendChild(document.getElementById(data));
	targetContents[2] = document.getElementById(data).id;
	isSolved();
}

//Changes target area and returns picture id
function dropTarget4(e){
	e.preventDefault();
	var data=e.dataTransfer.getData("Text");
	e.target.appendChild(document.getElementById(data));
	targetContents [3] = document.getElementById(data).id;
	isSolved();
}

Notes on the old code to help you with the reasoning for the changes:

while (targetContents.length == 4)

This line would never be executed where it was - the length of the array was not 4 when the script ran, and as written the script would never go back to it to check again.

if (targetContents = ["square1", "square15", "square5", "square20"])

A couple of things: the single = will reassign the listed values to the targetContents array rather than checking it. Also, I don't think two arrays can be equal, I think you have to check each value.

targetContents[0] = getElementById(data);
A similar line was in each of the dropTarget functions. As written, this assigns the element object to the variable, when you wanted the element's id. I fixed this in the code by making it getElementById(data).id, though this may not be the most elegant solution... Also, those functions didn't test to see if the puzzle was solved after a drop. I added a function call (which fixes the while loop problem and array issue) to test after each of the drops.

Your challenge: There still needs to be a couple of tweaks. There probably needs to be a way to reset the pieces when the answer is incorrect. I can keep dropping pieces but they do not show up after I get 4 in there. Also, the if (targetContents.length === 4) bit only works properly if the tiles are dropped in order, we need it to check when the length is 4, but also need to check that all four values are defined.

Hope this helps get you toward a completed script...

**saijmen** · 6th August 2012, 20:33

Much appreciation to both of you! That while loop was looking suspicious. Looks like I have a lot to hammer out, but these suggestions point me in the right direction.