Week 13

Read chapters 14, 15, and 16 in the book.

Read through the jQuery UI widgets.

Watch free movies on the topic of jQuery Essential Training at lynda.com.  You may want to consider getting a free 7 day trial to lynda.com.

In particular examine this page: http://jqueryui.com/demos/sortable/#display-grid

A jQueryUI plugin is also needed called swappable.

Also the book had similar sample scripts with images.

Graphic "Starry Night" for in class lab. Finished puzzle.

Lab Picture Puzzle

For this exercise I want you to create a simple puzzle game.  Look at the display-grid sample above.

#1 - Create a 3 x 3 (or larger) sliced image.  To do this you will need an image and a graphic tool (Photoshop, Paint.NET, Gimp, etc.) to slice the image into at least 3 columns and 3 rows. 

#2 - Use jQuery UI to create a sortable display grid to lay out your 3 x 3 puzzle pieces.  Look at the link I provided you above to get the code to start from.  You should be able to drag and drop your puzzle pieces into any of the nine positions.

#3 - Create a javascript function to randomly arrange your puzzle pieces every time the page loads.  So a player would get a new random arrangement of pieces every time they enter the page.

#4 - Record how many moves it took the player to solve the puzzle.

#5 - Record how long it took the player to solve the puzzle.