CS701 Module2 Assignment

CS701 Module2 Assignment  

General Rules for Homework Assignments 

• You are strongly encouraged to add comments throughout the program. Doing

so will help your facilitator to understand your programming logic and grade you

more accurately. 

• You must work on your assignments individually. You are not allowed to copy the

answers from the others. However, you are encouraged to discuss approaches

to the homework assignment with your facilitator. 

• Each assignment has a strict deadline. However, you are still allowed to submit

your assignment within 2 days after the deadline with a penalty. 15% of the credit

will be deducted unless you made previous arrangements with your facilitator

and professor. Assignments submitted 2 days after the deadline will not be

graded. 

• When the term lastName is referenced in an assignment, please replace it with 

your last name. 

You are strongly encouraged to add comments into your program!  

Create a new folder named HW2_lastName. Write the following programs in this folder. 

Scenario: 

You decided to release the dove residing in your birdcage. But, you are keen in tracking

the flight of the bird. So, you tied a sensor tag to the poor bird and decided to write a

HTML5 application to monitor its path. Since you neither have the bird nor the sensor,

you decided to simulate the path.  

Part 1 – Geolocation (30 Points) 

Using the HTML5 Geolocation API, write the LocationTracker.html and the associated

Javascript file LocationTracker.js. You are free to use the html5.css from the samples. 

The initial rendering of the HTML page is shown below with placeholders for the location

details and the Google map. 

When the Start button is clicked, get the current position using the Geolocaiton API and

display the initial location in the map as shown below. After the initial location is

displayed, use the setInterval method to invoke your method updateMyLocation every 5

seconds. The Start button is disabled from now on.  

The updateMyLocation method simulates the changes in the latitude and longitude as

follows. Generate two random numbers using Math.random() and divide each by 100.

These two numbers represent the changes in the latitude and longitude. Modify the

current location by adding the latitude value and subtracting the longitude value. This will

make the bird only fly in the NorthWest direction. If you are on the Northern border or the

Western border, feel free to keep the bird over the United States (or your country) by the

appropriate changes to the current location. Update the current location in the HTML and

also draw the path in the Google Map as shown in the following screencast: 

https://mymedia.bu.edu/media/CS701_HW2_Clip1/1_y4orrxvm 

Part2 – HTML5 Drag and Drop and Local Storage (40 points) 

Democrat and Republican senators voting by their party lines through Drag and

Drop. 

The application presents a list of senators and two areas representing Democrats and

Republicans. The senators are dragged and dropped into their respective areas.  

The initial list is loaded through AJAX from the partyList.xml file (provided in the

samples). Each senator is converted to a JSON object keeping track of the properties

name,  party, and voted (true or false). The list of senators is then stored in local storage.

Whenever a senator is dragged and dropped into their respective area, the JSON object is 

updated as voted and the list of senators is updated in the local storage. When the 

application is loaded, the local storage is first checked. If the data is there, the list of

senators is loaded from the local storage, otherwise the AJAX call is made. 

When the data exists in the local storage and the application is loaded, the senators

already dragged into their respective areas should also be populated. Make sure you test

this case. 

Write the partyWise.html and partyWise.js for the application’s functionality. 

The structure of partyList.xml is shown below. 

The initial screen when the application is loaded is shown below. AJAX call is made to

load the senator list. 

If the application is refreshed, the data should be loaded from the local storage: 

After a few drag and drops, the application looks like this: 

Note that the democrats can only be dropped into the Democrats area. Similarly for the

Republicans. You cannot drag and drop the member already voted. 

If the application is quit and then reloaded, the application should resume from the last

snapshot.

Part3 – Web Workers and Local Storage (30 Points) 

Your web application starts 5 web workers (computeWorker.js) and sends the messages

to them to compute the sum of all the integers from the specified start value to the

specified end value. The two values are send as a JSON object having start and end

properties. The web worker computes the sum of all the integers from the specified start

value to the specified end value and sends back the result. The result is sent as a JSON

object having start, end, and result properties. The main web application stores all the

results it receives in local storage. 

a) Show the JavaScript code for computeWorker.js.

b) Show the code for the main web application starting the workers and sending

them the messages. The values send for the five web workers can be (1, 1000),

(1001, 2000), (2001, 3000), (3001, 4000), and (4001, 5000), respectively.

c) Show how you will use local storage to record the results as they are being

received. Use a single key in the local storage and store the results received into

an array. Update the user interface as the results arrive from the workers. 

Submission: Export your HW2_lastName folder as a zip file, with the

appropriate index.html for the above files, and upload the zip file to the

Assignment section.