Description
In this assignment, we will use the jQuery and jQuery UI libraries to create interactive Web Pages
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
jQuery’s syntax is designed to make it easier to navigate a document, select DOM (Document Object Model) elements, create animations, and handle events. jQuery also provides the capability to extend its functionality with plug-in libraries. One of the most important of these is jQuery UI (user interface).
In general, jQuery makes using JavaScript easier, but it does not completely replace the need to understand or be able to program in JavaScript. In this assignment, we will show you a few simple things you can do in jQuery and Jquery UI without the need of additional programming.
The Two Parts to the Assignment
You are to create two pages which are linked with a jQuery menu. Both pages should animate a jigsaw puzzle which you make out of a New York scene. The minimum number of pieces to the puzzle is six pieces.
When you load the First Puzzle page, the pieces of the puzzle are distrbuted around the page. All but one piece should move to their final “Solved” position except for one piece. That final piece is controlled by four buttons: Up, Down, Left, and Right. Each of these buttons obviously moves the puzzle piece a small distance. Use the jQuery “animate” function to solve this puzzle. Also, make certain that the puzzle piece is placed such that the puzzle can actually be solved.
The Second Puzzle page should allow you to solve the same puzzle by simply dragging all the pieces to their final position. It should use the jQuery UI “draggable” function.
The screenshot is uploaded in the files for what the second puzzle page is supposed to work/look like
