Assignment 1 Solution

Description

• Description

Figure 1: An interface of assignment 1.

This assignment aims to help students get familiar with the basics of HTML, CSS, and JavaScript, especially on how to create interactive elements via HTML, implement interaction functions through JavaScript, and stylize the layout with CSS.

In this assignment, you are asked to design an interface (shown in Figure

1. that can achieve the following goals.

1. • In “ draw” mode, users can use a mouse to draw the trajectory of mouse movement, as shown in Figure 2 (a). In terms of the drawing

(a) Draw mode (b) Erase mode

(c) Change color to draw (d) Change width to draw

Figure 2: A description of the designed interface.

process, after clicking the “draw” button, users press the mouse to begin drawing, move the mouse to draw, and release the mouse to stop drawing.

• In “erase” mode, users can use a mouse to erase the trajectory of mouse movement, as shown in Figure 2 (b). In terms of the erasing process, after clicking the “erase” button, users press the mouse to begin erasing, move the mouse to erase, and release the mouse to stop erasing.

• Users can use color options to control the trajectory color in the next draw, as shown in Figure 2 (c).

• Users can utilize a range slider to change the trajectory width in the next draw or erase, as shown in Figure 2 (d).

• Requirement

• • In the .html file, define a canvas with a width of 800 and a height of 500.

• In the .html file, define two buttons that can control drawing or erasing mode.

• In the .html file, define three options that can change the color of lines.

• In the .html file, define a range slider that can tune the line width value.

• In the .js file, build one connection between startPainting and mouse-down action and one connection between endPainting and mouseup action. An explanation of JavaScript mouse events can be found here.

• Implement startPaintning and endPainting functions.

• Implement sketch function.

• Implement a function that can change the draw or erase mode when users click the corresponding button.

• Stylize the text and range slider in .css file.

• Evaluation

In total, there are 100 points in this assignment. A detailed evaluation is provided here.

1. 1. In the .html file, define a canvas with a width of 800 and a height of

500. (5pts).

• An implementation without error (5pts).

• An implementation without error, but setting with an inappropriate height or width (3pts).

• No implementation is provided (0pts).

2. In the .html file, define two buttons that can control drawing or erasing mode (6pts).

• Each button is for 2 pts and the corresponding label for the button is for 1 pts.

3. In the .html file, define three options that can change the color of lines (9pts).

• Each option is for 2 pts and the corresponding label for the option is for 1pts.

4. In the .html file, define a range slider that can tune the line width value. (5pts)

• A range slider and the corresponding value are shown (5pts).

• Only range slider is shown (4pts)

• Only range slider value is shown (2pts)

• No implementation (0pts).

5. In the .js file, build one connection between startPainting and mouse up action and one connection between endPainting and muse down actions, respectively. (10pts)

• Each one is for 5pts.

6) Implement startPaintning and endPainting functions (20pts).

• Each function is for 10pts.

7) Implement sketch function (25pts).

• Refer to sketch function in index.js file.

8. Implement a function that can change the draw or erase mode when users click the corresponding button in HTML. (5pts)

• Implementation without errors (5pts).

• Implementation with errors (e.g., it cannot change the modes correctly) (2pts).

• No implementation (0pts).

9) Stylize the text and range slider in .css file (10pts).

• Stylize both text and range slider (10pts).

• Only stylize range slider (7pts).

• Only stylize text (3pts).

• No stylization (0pts).

10. Submission (5pts). Please compress your code and a readme file (optional) into a zip file and submit the zip file to OneDrive. The readme file can include descriptions that help the instructor run the interface successfully.

Note that plenty of 10 pts will be given to those students who submit the assignment between Oct 14 at 12:00 AM and Oct 14 at 11:59 PM. Plenty of 20 pts will be given to those students who submit the assignment between Oct 15 at 12:00 AM and Oct 15 at 11:59 PM. Submissions after Oct 16 at 12:00 AM will not be graded.

5