Introduction to Web Technology
Lab Programming
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:
END OF THE PROGRAMMING EXERCISE
