Getting ready

Make sure that you have set up jQuery and jQuery UI files as explained in Chapter 1, Designing a Simple Quiz Application. You will also need an image that has dimensions equal to 400px x 400px. The code in this chapter uses an image of a cute cat, named kitty.jpg. Of course, you can use any image of your choice. Keep this image in the Chapter2 folder.

Since we will create 16 pieces of this image, each having both width and height equal to 100 px, keep in mind that the image you choose should not have a single square area of the same color exceeding 100px x 100px. This will create problems while solving the puzzle as you will be unable to determine the correct locations of multiple pieces of the same color.