Please click the following link to access the files (zipped file named Tutorial4): https://drive.google.com/drive/folders/1CFEZf_DZ0h73OeXpt9Gpyb7n9Iur4KkB?ogsrc=32 Instructions: Demo) Open the...

Please click the following link to access the files (zipped file named Tutorial4): https://drive.google.com/drive/folders/1CFEZf_DZ0h73OeXpt9Gpyb7n9Iur4KkB?ogsrc=32 Instructions: Demo) Open the demo_code folder and run the server found there. It has an accompanying html folder from which it will serve the client side application files. When the browser requests http://localhost:3000/example1.html you should see a browser application that looks like the following. Problem 1) Look at the code that implements the server. Notice at the top it defines three word arrays to represent the first line of lyrics from three songs: "Peaceful Easy Feeling", "Sister Golden Hair", and "Brown Eyed Girl". For problem 1 we want you to modify the server so that if the user types ones of these song titles in the text box and presses "Submit Request" the server will return a JSON object containing the word array for that song. The client should then use this word array and the words of the song should appear on the canvas. The user should then be able to drag these new words around. In addition, the word moving around the screen should change to "FOUND". If the user submits a request for a song "XXXX" that the server does not have the moving words should still change to "NOT FOUND: XXXX" as in the demo code. You will need to study and then modify where the POST request is currently handled in the server. You should not have to change anything in the client-side javascript for this problem. A useful debugging strategy is for server-side javascript to print to the server's console and for client-side javascript to print to the browser's console, which is visible when, you display its developer tools. Problem 2) As mentioned, one annoying thing with the client code is that you have to grab the word with the mouse near the start of the word. The client code is not aware of the width of the word you are trying to grab. On the other hand, the moving word bounces off the walls of the canvas so the timer code moving the word around is clearly aware of the width of that word. For this problem modify the getWordAtLocation() function in the client-side javascript so it too is aware of the width of the word you are trying to drag. Study how the width of the moving word is measured (see the canvas drawing function and the timer handler function). After making these modifications, you should be able to drag words around by clicking the mouse anywhere along the word -much better. Problem 3) For this problem, we want you to modify the code so that every time you submit a request for a song the title in the user text field gets added as a paragraph to the bottom of the web page: To accomplish this do the following: 1) In the example1.html file add the following after the markup that defines the "Submit Button" The id="text-area" of the tag can be used to target it with javascript as we will do next. 2) Add the following code (shown in bold) to the handleSubmitButton function in canvasWithTimer.js to add the html paragraph item each time the submit button is pressed. This illustrates one way that javascript can access and modify the html elements of a web page. function handleSubmitButton () { var userText = $('#userTextField').val(); //get text from user text input field if(userText && userText != ''){ let textDiv = document.getElementById("text-area") textDiv.innerHTML = textDiv.innerHTML + ` ${userText} ` var userRequestObj = {text: userText}; //... } Advanced Problem: 1) You might notice in the server code that the JSON object is being returned to the client has MIME type text/plain and not application/json as you might expect. In fact if you change it to application/json the app probably will not work. Can you explain why the browser is expecting the response as text? Google jQuery post() and you will probably find the answer.