Description
1 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.
• 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).
2 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 mousedown 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.
3 Evaluation
In total, there are 100 points in this assignment. A detailed evaluation is
provided here.
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
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.