Programming Question

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’ssyntax 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 withplug-in libraries. One of the most important of these is jQuery UI (userinterface).In general, jQuery makes using JavaScript easier, butit does not completely replace the need to understand or be able toprogram in JavaScript. In this assignment, we will show you a few simplethings you can do in jQuery and Jquery UI without the need ofadditional programming.

The Two Parts to the Assignment

Youare to create two pages which are linked with a jQuery menu. Both pagesshould 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 youload the First Puzzle page, the pieces of the puzzle are distrbutedaround the page. All but one piece should move to their final “Solved”position except for one piece. That final piece is controlled by fourbuttons: Up, Down, Left, and Right. Each of these buttons obviouslymoves the puzzle piece a small distance. Use the jQuery “animate”function to solve this puzzle. Also, make certain that the puzzle pieceis placed such that the puzzle can actually be solved.The SecondPuzzle page should allow you to solve the same puzzle by simply draggingall 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. I will send class notes if needed.

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