Mini-Lab: User Defined Functions


The goal of today's mini-lab is to create an interactive puzzle. The player will attempt to unscramble a tiled image with one missing tile. Every time an image is clicked, that image will swap places with the missing tile. You will be provided with a static HTML page, and it will be your job to add the required JavaScript.


  1. Getting a Copy of the Page:

    First, download the file to your laptop or M:\ drive. This is a zip file that contains the starting puzzle page, along with all of the required image files. You can extract the contents of this file on the Lab machines by right clicking it and selecting "7-Zip" -> "Extract Here".

    If you are using Aptana you will need to import these files into your Aptana project (don't forget to switch into your workspace). Create a new folder named "puzzle" by Right-clicking on your project and select "New"->"Folder". Now, right click on your newly created folder and select "Import..." -> "General" -> "File System", then click "Next >". Click the "Browse..." button and select the "puzzle" directory that was created by unzipping Click the checkbox next to the "puzzle" directory and then click "Finish". Your Aptana project should now contain all of the files necessary to complete this mini-lab.

    Open puzzle.html, and take a few minutes to look over the HTML. Notice that the image file names look like "01.jpg" or "32.jpg". Those names correspond to the correct locations of those images in the completed puzzle: "01.jpg" belongs in row 0 and column 1. The image "blank.jpg" is an all-white rectangle that will represent the missing tile.

  2. Practicing with Parameters and the "this" Keyword:

    In this exercise you will add code that will allow any image to be resized by clicking on it. This will not be a feature of the finished puzzle; it just gives us a chance to practice working with parameterized functions and the "this" keyword.

  3. Keeping Track of the Blank Picture:

    Since the blank picture will move around as you play the puzzle, you will need to keep track of where it currently is. We'll do that with a global variable, a variable that is defined outside any particular function and therefore available to all of them. (A variable that is defined inside a function, and is only accessible inside that function, is called a local variable.)

  4. Blanking Images:

    In this exercise, you will start to write the code that will eventually allow the user to solve the puzzle. You will be writing this function in steps, testing each step as you go. The first step will just "blank out" any image when the user clicks on it.

  5. Swapping with the Blank Element:

    So far, you've copied the blank image to the element you clicked on; the next step is to copy the image you clicked on back to the blank image.

  6. Finishing Up:

    Before publishing your page to the web server, add comments to your JavaScript containing the following information: