COM1008: Web and Internet Technology Assignment: JavaScript (25%)
Deadline: 3pm, Tuesday 17 December (week 12)
Handin: zip file of all your files via MOLE.
1. Introduction
This assignment will test your ability to use JavaScript and the HTML5 Canvas element to develop a graphical application running on a web page. This is an individual assignment. The work you submit must be your own work.
2. The Task
A single web page should be created. The <body> element, besides some explanatory text, should include a canvas element and some buttons to control what happens on the canvas. The user should be able to use the mouse to click the buttons and also to click on the canvas. All behaviour should be controlled using JavaScript. The canvas should display an arrangement of pictures on a wall as if the pictures were in an art gallery. Each picture should be in a picture frame. The pictures should be images that are loaded in from files. They can be pictures of anything, e.g. take some pictures with your mobile phone or download some free images from the web (as long as you have permission to use them, i.e. check the copyright). The picture frames should be drawn using the canvas drawing commands. For example, you could vary the colour of each frame, or the size of each frame, or whether th edges are straight or curvy. Figure 1 shows some examples. Every picture should have a different frame.
You should assume the browser is displayed on a typical desktop with a minimum size of 1024x768. Thus, you can set a fixed canvas size accordingly. You do not have to deal with responsive web design for this assignment.
There should be 10 images in your collection of pictures, but you will only display five of them at any one time. All the pictures should be the same size.
The same picture should not be used more than once in any display. The pictures should be displayed in three different arrangements on the canvas, as discussed below.
There should be range of buttons on the page:
Button 1, when pressed, should lay out a row of five pictures (and their frames) on the page. The middle of each picture (not including the frames) should be aligned in the row, as illustrated in Figure 2.
Button 2: When this is pressed, five pictures (and their frames) should be randomly positioned on the canvas, as illustrated in Figure 3. The pictures (and their frames) should not overlap each other.
Button 3. When this is pressed, five pictures (and their frames) should be positioned with one picture in the middle of the canvas and the other four pictures displayed near each corner of the one in the middle, as illustrated in Figure 4. The
pictures (and their frames) should not overlap each other.
Whenever Buttons 1, 2 or 3 are pressed again, the pictures (and their frames) should be randomly chosen again for the particular layout.
Button 4: When this is pressed, the pictures and their particular arrangement should stay the same but the picture frames should change to different picture frames. All the frames should be different.
Each button should be given a name that matches its action. You decide the names.
The following canvas input should also be implemented:
For the three arrangements of pictures, whenever the user clicks on a picture with the mouse, that specific picture should be replaced by a different random picture which should not match any of the other pictures currently on display.Below the canvas and the buttons, you should provide a brief explanation of how to use the software and what happens when a user clicks the buttons and on the canvas – essentially this is similar to the text I have given you above, but it does make the page self-contained.
(Hint: Initially develop your program by drawing rectangles of a single colour instead of images. When that works, replace the rectangles with images.)
3. Handin via MOLE
Handin via the assignment link on MOLE. Handin all the code by creating a zip file called name.zip, where name is your name, e.g. JaneSmith.zip.Note: Remember to identify in each and every HTML and CSS and JavaScript file that you wrote the code.
4. Marking
This will include: Comments, layout and code structure (8%)
How well the application works, the completeness of the application, and the quality and creativity (17%)
5. Practical considerations
5.1 Keeping your work private
Your website should be developed in a local folder in your CiCS managed desktop file space, not in your Department mypublic_html folder.
5.2 Unfair means
The standard Department rules for use of unfair means will be applied, as described in the undergraduate student handbook: https://sites.google.com/sheffield.ac.uk/comughand book/general-information (Menu: General Information, Assessment)Do not copy any similar examples from the web since that would be plagiarism.
5.3 Late handin
Standard Department rules will be used for late handin – see: https://sites.google.com/sheffield.ac.uk/comughand book/general-information (Menu: General Information, Assessment)5.4 Code reuse
Do NOT use JS libraries such as jquery. You should write all the JavaScript, including canvas and interaction code, using plain, ‘vanilla’ JavaScript. You may reuse HTML and CSS and JavaScript code that I wrote that is given in lecture notes, as long as it is not code that is from another source that is being used to illustrate something – I may have used it to illustrate something, but you will not have permission to reuse it. If there is any doubt, then assume you cannot reuse it.
2019-12-14