Description
Introduction to Web Technology
Lab Programming Exercise
Question 1. Create a web page and display the following:
The web page allows the user to enter the coordinates of the 3 vertices of a triangle.
When the user clicks the button, then draw the triangle on the canvas as above.
A median of a triangle is a straight line from a vertex to the midpoint of the opposite side. The drawing demonstrates a mathematical fact that: the 3 median lines intersect in a single point (which is called the triangle’s centroid).
This is a sample code for draggable elements:
| <tagName id=”…” draggable=”true” onDragStart=”dragStart(event)”>
… </tagName>
function dragStart(event) { // get the drag element id var dragId = event.target.id; console.log(“dragId=” + dragId);
// store the drag element id into the dataTransfer object event.dataTransfer.setData(“dragId”, dragId); } |
This is a sample code for droppable elements:
| <tagName id=”…”
onDrop=”drop(event)” onDragOver=”dragOver(event)”> … </tagName>
function dragOver(event) { event.preventDefault(); } function drop(event) { // get the drop element ID var dropId = event.target.id; console.log(“dropId=” + dropId);
// retrieve the drag element id from the dataTransfer object var dragId = event.dataTransfer.getData(“dragId”); console.log(“dragId=” + dragId);
// do the dropping logic // TO-DO } |
Question 2. Create a web page and display the following:
When an animal is dropped into a matching text then the corresponding counter is increased by 1. For example, if the cat is dropped correctly 3 times and the dog is dropped correctly 11 times then the web page shows the following:
Question 3. Create a web page and display the following:
When an animal is dropped into a matching text then the web page will be updated in the following manner. For example, if the cat is dropped correctly 2 times and the dog is dropped correctly 3 times then the web page shows the following:
