At the end we have to solve the puzzle

SUBJECT You will implement a puzzle using HTML, CSS, Javascript and jQuery (don't use DOM API). The system will divide the image into 9 pieces, and distribute them randomly in "Pieces" part. The user tries to bring the pieces together to form the orginal image. She selects a piece in "Pieces" part by clicking on it and places it onto appropriate place on the "Puzzle" part. When all pieces form the correct image, it displays "Congratulations" text. If the user does not solve the puzzle by herself, she can see the solution by clicking on "Hint" button. Watch the given animation file (Watch Me.mp4) that shows what you are supposed to do. Use your own picture. Its size would be 300x300pixels, each piece is 100x100pixel. Grading Criteria: 1. (20Pts) Design the initial appearance of the page. Use at least one google font. See Figure 1. 2. (5Pts) "Hint" button changes its appearance when the mouse enters and exits. 3. (15Pts) Distribute 9 pieces into "Pieces" region randomly. 4. (5Pts) When you click on (select) a piece in the "Pieces" region, mark its border with yellow color. 5. (10Pts) After selecting a piece, if you click an empty cell in the "Puzzle" region, show the selected piece in the clicked cell. Fade out the selected piece in "Pieces" region. 6. (10Pts) After selecting a piece, if you click a filled cell in the "Puzzle" region, swap the pieces. 7. (10Pts) If you click a cell with an image in the Puzzle without any selection, remove it from the clicked cell and show it in "Pieces" region at its initial position. (Send the image back to Pieces region) 8. (15Pts) If you place all the pieces in the "puzzle" region, "Congratulation" message appears. 9. (10Pts) If you click "Hint" button, it displays numbers in "pieces" and "puzzle" part, which shows the correct mapping from "pieces" to "puzzle" part. This means, it gives hints about the solution. If you click "Hints" again, it hides the numbers Orginal Image Pieces Puzzle Hints Orginal Image Pieces Puzzle 9 9 Hints