Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

COM1008: Web and Internet Technology

Assignment: JavaScript (40%)

Lecturers: Steve Maddock and Vita Lanfranchi [email protected] [email protected]

Deadline: 3pm, Thu 15 Dec 2022 (week 12) Handin: zip file of your website via Blackboard. Learning Outcomes

This assignment covers the following learning outcome for this module:

· Create interactive web programs using a front- end scripting language.

In addition, you will also gain more practise in relation to one of the learning outcomes that was set for the first assignment, although only using a single web page:

· Design and construct a website, controlling the structure and appearance using markup and styling languages.

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. You MUST use the HTML5 Canvas.

This is an individual assignment. The work you submit must be your own work and not plagiarised.

2. The Task

A single web page should be created. Theelement should include a canvas element, some buttons to control what happens on the canvas and some text to explain the program.

The canvas should display a drawing of a face. This should be a cartoon-like face that is either human- like or animal-like. It should be constructed from separate pieces, e.g. outline and background colour of the face, left eye, right eye, left eyebrow, right eyebrow, nose, mouth, left ear, right ear, hair. It could be drawn using (i) basic drawing commands on the canvas (e.g. drawing lines, curves and shapes at positions on the canvas using the canvas drawing commands such as moveTo, lineTo, arc, rect, etc), or

(ii) it could be constructed from a range of images,

e.g. an image of a mouth, an image of an eye, etc. (drawn at positions on the canvas using the command to draw an image, drawImage), (iii) a combination of drawing commands and images. Any of these options is ok. You choose.

There should be three buttons on the web page. One button is used to set the neutral expression of the face. The other two buttons are used to produce different expressions on the face. You must choose two expressions from the following list1: anger, fear, happiness, sadness, surprise. This means parts of the face are replaced with different drawings or images for a particular expression, e.g. the happy face might change the shape of the mouth and the eyes and perhaps add some dimples. The buttons should be labelled so that it is clear which expression they produce.

In addition, two further effects should be implemented depending on where the user clicks with the mouse on the canvas. You must choose two effects from the following list:

· Click on the nose to make the eyes open wider.

· Click above an eyebrow to make that eyebrow raise.

· Click on the lips to change their colour.

· Click anywhere on the canvas outside the face and the eyes will look at that point.

· Click on the chin to make a beard appear.

· Click on the hair to change the hair to a new hairstyle.

· Click above the corner of the mouth to raise that corner of the mouth.

· Click on an eye to close the eye.

As before, in implementing these, particular parts of the face are redrawn. For example, if the lips are recoloured, then that is just a different drawing or picture of different coloured lips and the rest of the face does not change.

(Hint: the clickable area does not have to match the exact shape. An approximate area for the shape can be used as the clickable area, e.g. a small circular or rectangular area centred on the nose tip. Using a simple approximate shape means some simple maths can be used to determine if the x,y position of the mouse click is contained in the area.

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 on the buttons and on particular areas of the canvas – we will need this for marking, so we know which effects you have implemented. You should also explain what happens when combinations of effects are chosen (e.g. if the lips are clicked to change their colour and then the button for angry face is chosen, what colour lips does the angry face have?) or when the same effect is chosen twice (e.g. if the user clicks on the nose to make the eyes open wider, what happens when the user clicks on the nose again?) Make sure you explain all the combinations you have implemented. One other thing you need to consider is how to deal with both mobile and desktop hardware. Does your program run on smartphone/desktop/laptop/PC/Mac? This should be explained too.

3. Handin via Blackboard

Handin via the assignment link on Blackboard. 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 file that you

wrote the code.

4. Marking

This will include:

· Code structure, including comments and layout (25%)

· How well the basic application works and the completeness of this, including quality and creativity of the work (75%)

5. Practical considerations

5.1 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: Your Study, Assessment)

We are aware that there are lots of JavaScript tutorial sites on the Web. Do not copy them since that would be plagiarism. Instead, learn from and be inspired by them.

You must use plain, vanilla JavaScript for the assignment.

Do NOT use jQuery or any other JavaScript frameworks/libraries. This will be treated as plagiarism for the purposes of this assignment.

5.2 Late handin

Standard Department rules will be used for late submission – see:

https://sites.google.com/sheffield.ac.uk/comughand book/general-information (Menu: Your Study, Assessment)

5.3 Code reuse

You may reuse JavaScript (and HTML and CSS) code that we wrote that is given in lecture notes, if it is not code that is from another source that is being used to illustrate something – we may have used it to illustrate something, but you will not have permission to reuse it. If there is any doubt, assume you cannot reuse it.

5.4 Tools

The expectation for this assignment is that you will use a code editing environment to develop your website and JavaScript (e.g. Visual Studio Code or Notepad++ or similar).

If you are using images for the face pieces (and then using the canvas drawImage command), you can use whatever graphical tools you like to help create the individual image pieces of the face, e.g. eye, nose, etc. Surprisingly, Microsoft Word is very good for this – it has shape pieces that can be used to draw and the collection of pieces can then be saved as a picture. There is also an option to set the transparency for part of a picture, which is very useful: Paste a picture into word (i.e., drag an image file into an empty document), double click the image to get the Picture Format menu, select Color, select Set Transparent Color, use the picker to click on the picture area that should be the transparent color, e.g. the background of the picture, then save the picture as a png file. (Of course, other tools are also available to do this.) When you draw the saved png file on the canvas with drawImage, the areas set to the transparent colour are not drawn, which means it is easier to create a result that combines all the images that are drawn where some may overlap others.

As part of the deliverables, you will have noted that we expect code that contains comments. These will demonstrate whether or not you understand the more complex bits of code that you have produced. Use your common sense so that the code is not cluttered with trivial comments.