Ans Doc435


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: 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.