You may work with a partner on this assignment. In this assignment you are going to create an online Jig-Saw Puzzle game. You are provided with a directory called Images inside of which are 3 other directories having 12 images and a background image of a grid. The images are of the form imgn-m.jpg where n is in the range 1 through 3 (inclusive) and m is in the range 1 through 12 (inclusive). The images are 100 x 100 pixels. The background grid is called puzzleback.gif and its size is 400 x 300 pixels.
Your page should have a simple but aesthetic layout. It should have a header like Jig-Saw Puzzle. In the center should be the background image of the grid. At the bottom of the grid, placed symmetrically will be one button that states - Done. On the left or right side of the grid will be a text box with a label on top saying Time Taken. At the bottom of the page will be the 12 images from any one directory arranged randomly.
The object of this game is to arrange the images on the background grid so that the original picture is reconstructed. When the page is first loaded the script will select one of the 3 sets randomly and arrange the 12 images of that set randomly. The user will drag and drop each image on one of the unoccupied cells in the grid. When the user thinks he has finished, he will click the Done button.
You may copy the following files and use them as a template for the Jigsaw puzzle. You may also copy the Images into your directory on the z server.
cp /u/z/users/mitra/FL2019/dhtml/dragNDrop.html . cp /u/z/users/mitra/FL2019/dhtml/dragNDrop.js . cp -R /u/z/users/mitra/FL2019/Images/hwk11/* .
Extra Credit (5 pts): When the page loads a timer is started. Once the user clicks the Done button the script will stop the timer. It will display the time taken in text box in hours, minutes, and seconds.
Extra Credit (5 pts): The script should also verify that the user has indeed arranged the images in the right order. The right order is basically laying out the images 1 through 12 in that order on the grid (going from left to right, and top to bottom). The words Congratulations! You got it or Better luck next time should become visible below the Done button depending on the outcome.
The files you will be creating are: jigsaw.html, jigsaw.css, and jigsaw.js. Your images will have the same structure as the present directory. Your html and css files should validate. This is a soft requirement.
When you are finished with the assignment, please put a link in the table in your index.html page by 11 PM Friday, 01 Nov 2019. You and your partner should have the same HTML, CSS, and JavaScript files.
