Merge pull request #51 from VinayApposite/Apposite_20480C_Mod13_LAK

Apposite 20480 c mod13 lak

Author: barucht

Instructions/20480C_MOD13_LAK.md

@@ -1,30 +1,30 @@
-# Module 13: Implementing Real-time Communication by Using Web Sockets.
+# Module 13: Implementing Real-time Communication by Using Web Sockets
 
-# Lab: Performing Real-time Communication by Using Web Sockets.
+# Lab: Performing Real-time Communication by Using Web Sockets
 
 ### Lab Setup
 
 ### Preparation Steps
 
-1.	Ensure that you have cloned the 20480C directory from GitHub. It contains the code segments for this course's labs and demos. https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles.
+Ensure that you have cloned the 20480C directory from GitHub (https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles). It contains the code segments for the labs and demos in this course.
 
-### Exercise 1: Receiving Messages from a Web Socket.
+### Exercise 1: Receiving Messages from a Web Socket
 
-#### Task 1: Review the Live page.
+#### Task 1: Review the Live page
 
-1.	Open **Visual Studio 2017**.
+1.	Open **Microsoft Visual Studio 2017**.
 2.	In Visual Studio, on the **File** menu, point to **Open**, and then click **Project/Solution**.
 3.	In the **Open Project** dialog box, browse to **Allfiles\Mod13\Labfiles\Starter\Exercise 1**, click **ContosoConf.sln**, and then click **Open**.
 4.	On the **Debug** menu, click **Start Without Debugging**.
-5.	In Microsoft Edge, if the message **Intranet settings are turned off by default** appears, click **Don’t show this message again**.
+5.	In Microsoft Edge, if the **Intranet settings are turned off by default** message appears, click **Don’t show this message again**.
 6.	Click **Live**.
 7.	In the **Webpage Error** dialog box, click **No**.
 8.	Verify that the **Live** page looks like the following image:
 
 ![alt text](./Images/20480B_13_Live.png "The Live page")
 
 9.	Close Microsoft Edge and return to Visual Studio.
-10.	In Solution Explorer, expand the **ContosoConf** project, and then double-click **live.htm**. 
+10.	In **Solution Explorer**, expand the **ContosoConf** project, and then double-click **live.htm**.
 11.	Verify that this page contains the following HTML markup:
     ```html
         <form action="#">
@@ -40,13 +40,14 @@
     ```html
         <script src="/scripts/pages/live.js" type="text/javascript"></script>
     ```
-13.	In Solution Explorer, expand the **scripts** folder, expand the **pages** folder, and then double-click **live.js**.
+13.	In **Solution Explorer**, expand the **scripts** folder, expand the **pages** folder, and then double-click **live.js**.
 14.	Verify that the file contains the following JavaScript code:
-    ```javascript
+    ```
+        javascript
         var LivePage = Object.inherit({
     ```
 
-#### Task 2: Receive messages by using a web socket.
+#### Task 2: Receive messages by using a web socket
 
 1.	In **live.js**, find the following comment near the end of the file:
     ```javascript
@@ -56,7 +57,7 @@
     ```javascript
         var socket = new WebSocket("ws://localhost:[port]/live/socket.ashx");
     ```
-3.	Scroll to the top of the file and find the following comment: 
+3.	Scroll to the top of the file and find the following comment:
     ```javascript
         // TODO: Assign a callback to handle messages from the socket.
     ```
@@ -65,7 +66,7 @@
         this.socket.onmessage = this.handleSocketMessage.bind(this);
     ```
 
-#### Task 3: Display questions received as messages.
+#### Task 3: Display questions received as messages
 
 1.	In **live.js**, find the following comment:
     ```javascript
@@ -79,7 +80,7 @@
     ```javascript
         // TODO: Check if message has a `questions` property, before calling handleQuestionsMessage
     ```
-4.	Modify the statement following this comment, as shown below in bold:
+4.	Modify the statement following this comment, as shown below:
     ```javascript
         if (message.questions) {
             this.handleQuestionsMessage(message);
@@ -93,7 +94,7 @@
             this.questionListElement.appendChild(item);
         }
     ```
-6.	Find the following comment in the **handleQuestionsMessage()** function: 
+6.	Find the following comment in the **handleQuestionsMessage()** function:
     ```javascript
         // TODO: Display each question in the page, using the displayQuestion function.
     ```
@@ -104,27 +105,27 @@
         }
     ```
 
-#### Task 4: Test the application.
+#### Task 4: Test the application
 
 1.	In Solution Explorer, double-click **live.htm**.
 2.	On the **Debug** menu, click **Start Without Debugging**.
 3.	In Microsoft Edge, once the page has loaded, wait five seconds.
 4.	Verify that the page displays the following four questions:
-- What are some good resources for getting started with HTML5?
-- Can you explain more about the Web Socket API, please?
-- This is an #&!%!* inappropriate message!!
-- How much of CSS3 can I use right now?
+- **What are some good resources for getting started with HTML5?**
+- **Can you explain more about the Web Socket API, please?**
+- **This is an #&!%!* inappropriate message!!**
+- **How much of CSS3 can I use right now?**
 5.	Close Microsoft Edge.
 
->**Results:** After completing this exercise, you will have added JavaScript code to the **Live** web page to receive questions from a web socket and to display them.
+>**Results:** After completing this exercise, you will have added a JavaScript code to the **Live** web page to receive questions from a web socket and to display them.
 
-### Exercise 2: Sending Messages to a Web Socket.
+### Exercise 2: Sending Messages to a Web Socket
 
-#### Task 1: Format a question as a message.
+#### Task 1: Format a question as a message
 
 1.	In Visual Studio, on the **File** menu, point to **Open**, and then click **Project/Solution**.
 2.	In the **Open Project** dialog box, browse to **Allfiles\Mod13\Labfiles\Starter\Exercise 2**, click **ContosoConf.sln**, and then click **Open**.
-3.	In Solution Explorer, expand the **ContosoConf** project, expand the **scripts** folder, expand the **pages** folder, and then double-click **live.js**.
+3.	In **Solution Explorer**, expand the **ContosoConf** project, expand the **scripts** folder, expand the **pages** folder, and then double-click **live.js**.
 4.	Verify that the **live.js** file contains the following function:
     ```javascript
         askQuestion: function (text) {
@@ -157,7 +158,7 @@
         var json = JSON.stringify(message);
     ```
 
-#### Task 2: Send the message to the web socket.
+#### Task 2: Send the message to the web socket
 
 1.	In **live.js**, find the following comment:
     ```javascript    
@@ -168,7 +169,7 @@
         this.socket.send(json);
     ```
 
-#### Task 3: Test the application.
+#### Task 3: Test the application
 
 1.	In Solution Explorer, double-click **live.htm**.
 2.	On the **Debug** menu, click **Start Without Debugging**.
@@ -178,17 +179,17 @@
 6.	Verify that the list of questions displays **This is a test.**
 7.	Click the first Microsoft Edge tab.
 8.	Verify that the list of questions includes **This is a test.**
-9.	Close Microsoft Edge. 
+9.	Close Microsoft Edge.
 
 >**Results:** After completing this exercise, you will have modified the **Live** question page to enable users to ask questions by sending messages to the server by using the web socket.
 
-### Exercise 2: Handling Different Web Socket Message Types.
+### Exercise 2: Handling Different Web Socket Message Types
 
-#### Task 1: Display report links.
+#### Task 1: Display report links
 
 1.	In Visual Studio, on the **File** menu, point to **Open**, and then click **Project/Solution**.
 2.	In the **Open Project** dialog box, browse to **Allfiles\Mod13\Labfiles\Starter\Exercise 3**, click **ContosoConf.sln**, and then click **Open**.
-3.	In Solution Explorer, expand the **ContosoConf** project, expand the **scripts** folder, expand the **pages** folder, and then double-click **live.js**.
+3.	In **Solution Explorer**, expand the **ContosoConf** project, expand the **scripts** folder, expand the **pages** folder, and then double-click **live.js**.
 4.	In **live.js**, find the following code:
     ```javascript
         createReportLink: function () {
@@ -203,12 +204,12 @@
     ```javascript
         //item.appendChild(this.createReportLink());
     ```
-6.	Modify this statement and remove the // characters, as shown in the following JavaScript code:
+6.	Modify this statement and remove the __//__ characters, as shown in the following JavaScript code:
     ```javascript
         item.appendChild(this.createReportLink());
     ```
 
-#### Task 2: Send the report message.
+#### Task 2: Send the report message
 
 1.	In **live.js**, find the following function:
     ```javascript
@@ -232,7 +233,7 @@
         this.socket.send(JSON.stringify({ report: questionId }));
     ```
 
-#### Task 3: Handle Remove Question messages.
+#### Task 3: Handle Remove Question messages
 
 1.	In **live.js**, find the **handleRemoveMessage()** function:
     ```javascript
@@ -258,7 +259,7 @@
             }
         }
     ```
-3.	Modify the JavaScript code in the **handleSocketMessage** method as shown below in bold:
+3.	Modify the JavaScript code in the **handleSocketMessage** method as shown below:
     ```javascript
         handleSocketMessage: function (event) {
             // TODO: Parse the event data into message object.
@@ -271,7 +272,7 @@
         }
     ```
 
-#### Task 4: Test the application.
+#### Task 4: Test the application
 
 1.	In Solution Explorer, double-click **live.htm**.
 2.	On the **Debug** menu, click **Start Without Debugging**.