Merge pull request #48 from VinayApposite/Apposite_20480C_Mod11_LAK

Apposite 20480 c mod11 lak

Author: barucht

Instructions/20480C_MOD11_LAK.md

@@ -1,21 +1,21 @@
-# Module 11: Creating Advanced Graphics.
+# Module 11: Creating Advanced Graphics
 
-# Lab: Creating Advanced Graphics.
+# Lab: Creating Advanced Graphics
 
 ### 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: Creating an Interactive Venue Map by Using SVG.
+### Exercise 1: Creating an Interactive Venue Map by Using SVG
 
-#### Task 1: Review the incomplete HTML markup for the venue map.
+#### Task 1: Review the incomplete HTML markup for the venue map
 
-1.	Open **Visual Studio 2017**.
-2.	In Visual Studio, on the **File** menu, point to **Open**, and then click **Project/Solution**.
+1.	Open Microsoft Visual Studio 2017.
+2.	In Visual Studio, on the **File** menu, point to **Open**, and then select **Project/Solution**.
 3.	In the **Open Project** dialog box, browse to **Allfiles\Mod11\Labfiles\Starter\Exercise 1**, click **ContosoConf.sln**, and then click **Open**.
-4.	In Solution Explorer, expand the **ContosoConf** project node, and then double-click **location.htm**.
+4.	In **Solution Explorer**, expand the **ContosoConf** project node, and then double-click **location.htm**.
 5.	Verify that the page contains the following HTML markup:
     ```html
         <svg viewBox="-1 -1 302 102" width="100%" height="230">
@@ -35,18 +35,18 @@
     ```html
         <script src="/scripts/pages/location-venue.js" type="text/javascript"></script>
     ```
-7.	On the **Debug** menu, click **Start Without Debugging**. 
+7.	On the **Debug** menu, click **Start Without Debugging**.
 8.	Click **Location**.
-9.	If the message **localhost wants to track your location** appears, click **Allow once**.
+9.	If the **localhost wants to track your location** message appears, click **Allow once**.
 10.	In the **Enable Location Services** dialog box, click **Yes**.
-11.	If the message **Intranet settings are turned off by default** appears, click **Don’t show this message again**.
+11.	If the **Intranet settings are turned off by default** message appears, click **Don’t show this message again**.
 12.	Scroll down and view the venue map.
 
 ![alt text](./Images/20480B_11_Venue-Map.png "The incomplete venue map")
 
 13.	Close Microsoft Edge.
 
-#### Task 2: Complete the SVG venue map.
+#### Task 2: Complete the SVG venue map
 
 1.	In Visual Studio, in **location.htm**, find the following comment:
     ```html
@@ -60,9 +60,9 @@
         </g>
     ```
 
-#### Task 3: Add interactivity to the venue map.
+#### Task 3: Add interactivity to the venue map
 
-1.	In Solution Explorer, double-click **location.htm**.
+1.	In **Solution Explorer**, double-click **location.htm**.
 2.	Find the following HTML markup:
     ```html
         <div id="room-a-info" style="display: none">
@@ -86,14 +86,14 @@
           </ul>
         </div>
     ```
-3.	In Solution Explorer, expand the **styles** folder, expand the **pages** folder, and then double-click **location.css**. 
+3.	In **Solution Explorer**, expand the **styles** folder, expand the **pages** folder, and then double-click **location.css**.
 4.	At the end of the file, add the following CSS:
     ```css
         .room:hover rect {
             fill: #b1f8b0;
         }
     ```
-5.	In Solution Explorer, expand the **scripts** folder, expand the **pages** folder, and then double-click **location-venue.js**.
+5.	In **Solution Explorer**, expand the **scripts** folder, expand the **pages** folder, and then double-click **location-venue.js**.
 6.	Find the following comment:
     ```javascript
         // TODO: Get the room elements in the svg element.
@@ -116,62 +116,63 @@
         }
     ```
 
-#### Task 4: Test the application.
+#### Task 4: Test the application
 
-1.	In Solution Explorer, double-click **location.htm**.
+1.	In **Solution Explorer**, double-click **location.htm**.
 2.	On the **Debug** menu, click **Start Without Debugging**.
-3.	In Microsoft Edge, if the message **localhost wants to track your physical location** appears, click **Allow once**.
-4.	Scroll down to the venue map and hover the mouse over **Room A**.
+3.	In Microsoft Edge, if the **localhost wants to track your physical location** message appears, click **Allow once**.
+4.	Scroll down to the venue map and place the mouse pointer over **Room A**.
 5.	Verify that the venue map looks similar to the following image:
 
 ![alt text](./Images/20480B_11_Venue-Map-Hover.png "The venue map with Room A highlighted")
 
-6.	Click **Room B**, verify that the room information is displayed, and that it is similar to the following image:
+6.	Click **Room B**, verify that the room information is displayed and that it is similar to the following image:
 
 ![alt text](./Images/20480B_11_Venue-Map-Information.png "The details for Room B")
 
 7.	Close Microsoft Edge.
 
->**Results:** After completing this exercise, you will have a venue map that displays extra information when clicked.
+>**Results**: After completing this exercise, you will have a venue map that displays extra information when clicked.
 
-### Exercise 2: Creating a Speaker Badge by Using the Canvas API.
+### Exercise 2: Creating a Speaker Badge by Using the Canvas API
 
-#### Task 1: Create the canvas element.
+#### Task 1: Create the canvas element
 
-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\Mod11\Labfiles\Starter\Exercise 2** click **ContosoConf.sln**, and then click **Open**.
-3.	In Solution Explorer, expand the **ContosoConf** project, and then double-click **speaker-badge.htm**.
+1.	In Visual Studio, on the **File** menu, point to **Open**, and then select **Project/Solution**.
+2.	In the **Open Project** dialog box, browse to **Allfiles\Mod11\Labfiles\Starter\Exercise 2**, click **ContosoConf.sln**, and then click **Open**.
+3.	In **Solution Explorer**, expand the **ContosoConf** project, and then double-click **speaker-badge.htm**.
 4.	Find the following comment:
     ```html
         <!-- TODO: Add canvas here -->
     ```
 5.	After this comment, add the following HTML markup:
-    ```html
+    ```
+    html
         <canvas
-            width="500" 
-            height="200" 
+            width="500"
+            height="200"
             style="border: 1px solid "#888"
             data-speaker-id="234724"
             data-speaker-name="Mark Hanson">
         </canvas>
     ```
 
-#### Task 2: Draw the details for the badge.
+#### Task 2: Draw the details for the badge
 
-1.	In Solution Explorer, expand the **scripts** folder, expand the **pages** folder, and then double-click **speaker-badge.js**.
+1.	In **Solution Explorer**, expand the **scripts** folder, expand the **pages** folder, and then double-click **speaker-badge.js**.
 2.	Verify that the file contains the following JavaScript code:
     ```javascript
         this.canvas = element.querySelector("canvas");
     ```
-3.	Find the following comment: 
+3.	Find the following comment:
     ```javascript
         // TODO: Get the canvas's (this.canvas) context and assign to this.context
     ```
 4.	After this comment, add the following JavaScript code:
     ```javascript
         this.context = this.canvas.getContext("2d");
     ```
-5.	Find the comment that starts with the following line: 
+5.	Find the comment that starts with the following line:
     ```javascript
         // TODO: Draw the following by calling the helper methods of `this`
     ```
@@ -187,7 +188,7 @@
         }
         this.drawBarCode(this.speakerId);
     ```
-7.	Find the following comment: 
+7.	Find the following comment:
     ```javascript
         // TODO: Fill the canvas with a white rectangle
     ```
@@ -196,22 +197,22 @@
         this.context.fillStyle = "white";
         this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
     ```
-9.	Find the comment that starts with the following line:
+9. Find the comment that starts with the following line:
     ```javascript
         // TODO: Draw the image on the canvas
     ```
-10.	After the last line of this comment, add the following JavaScript code:
+10. After the last line of this comment, add the following JavaScript code:
     ```javascript
         var size = Math.min(image.width, image.height);
         var sourceX = image.width / 2 - size / 2;
         var sourceY = image.height / 2 - size / 2;
         this.context.drawImage(image, sourceX, sourceY, size, size, 20, 20, 160, 160);
     ```
-11.	Find the comment that starts with the following line:
+11. Find the comment that starts with the following line:
     ```javascript
         // TODO: Draw this.speakerName on the canvas
     ```
-12.	After the last line of this comment, add the following JavaScript code:
+12. After the last line of this comment, add the following JavaScript code:
     ```javascript
         this.context.font = "40px sans-serif";
         this.context.fillStyle = "black";
@@ -220,19 +221,19 @@
         this.context.fillText(this.speakerName, 200, 60);
     ```
 
-#### Task 3: Test the application.
+#### Task 3: Test the application
 
-1.	In Solution Explorer, double-click **speaker-badge.htm**.
+1.	In **Solution Explorer**, double-click **speaker-badge.htm**.
 2.	On the **Debug** menu, click **Start Without Debugging**.
-3.	On the taskbar, click **File Explorer** and then browse to the **Allfiles\Mod11\Labfiles\Resources** folder.
-4.	Drag and drop **mark-hanson.jpg** from File Explorer onto the speaker badge in Microsoft Edge.
+3.	On the taskbar, click **File Explorer**, and then browse to the **Allfiles\Mod11\Labfiles\Resources** folder.
+4.	From File Explorer, drag **mark-hanson.jpg** onto the speaker badge in Microsoft Edge.
 5.	Verify that the speaker badge looks similar to the following image:
 
 ![alt text](./Images/20480B_11_Speaker-Badge-Canvas.png "The speaker badge for Mark Hanson")
 
 6.	Close Microsoft Edge.
 
->**Results:** After completing this exercise, you will have a Speaker Badge page that enables a conference speaker to create their badge.
+>**Results**: After completing this exercise, you will have a Speaker Badge page that enables a conference speaker to create their badge.
 
 ©2018 Microsoft Corporation. All rights reserved.