You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Instructions/20480C_MOD11_LAB_MANUAL.md
+69-69Lines changed: 69 additions & 69 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,14 +4,14 @@
4
4
5
5
#### Scenario
6
6
7
-
The conference organizers would like a venue map displayed on the website. Conference attendees will use the map to find out more about the rooms of the conference facility. Therefore, the map should be interactive, responding to mouse clicks. The floor plans are available in a vector format, so they can be displayed in a resolution-independent format.
7
+
The conference organizers would like a venue map displayed on the website. The conference attendees will use the map to find out more about the rooms in the conference facility. Therefore, the map should be interactive and should respond to mouse clicks. The floor plans are available in a vector format, so they can be displayed in a resolution-independent format.
8
8
9
-
Conference speakers need badges with their photo, name, and ID. The ID is in the form of a barcode to make it easy for security personnel to scan and verify the holder’s identity before allowing backstage access. You have been asked to create a web page that enables a speaker to create a badge.
9
+
The conference speakers need badges with their photo, name, and ID. The ID is in the form of a barcode to make it easy for security personnel to scan and verify the holder’s identity before allowing backstage access. You have been asked to create a webpage that enables a speaker to create a badge.
10
10
11
11
#### Objectives
12
12
13
13
After completing this lab, you will be able to:
14
-
- Create graphics by using SVG, interactively style SVG graphics, and handle SVG graphics events.
14
+
- Create graphics by using Scalable Vector Graphics (SVG), interactively style SVG graphics, and handle SVG graphics events.
In this exercise, you will create an interactive conference venue map.
26
26
27
-
First, you will complete the partially completed SVG mark-up of the venue map. Next, you will add interactive styling to the SVG by using CSS. Then you will handle SVG element click events to display extra information about conference rooms. Finally, you will run the application, view the Location page, and verify that the venue map is interactive.
27
+
First, you will complete the partially completed SVG markup of the venue map. Next, you will add interactive styling to the SVG by using Cascading Style Sheets (CSS). Then, you will handle SVG element click events to display extra information about the conference rooms. Finally, you will run the application, view the **Location** page, and then verify that the venue map is interactive.
28
28
29
-
#### Task 1: Review the incomplete HTML markup for the venue map.
29
+
#### Task 1: Review the incomplete HTML markup for the venue map
30
30
31
-
1. Start Visual Studio and open the **ContosoConf.sln** solution in the **Allfiles\Mod11\Labfiles\Starter\Exercise 1** folder.
31
+
1. Start Microsoft Visual Studio, browse to **Allfiles\Mod11\Labfiles\Starter\Exercise 1**, and then open the **ContosoConf.sln** solution.
32
32
2. Open the **location.htm** file.
33
33
3. Verify that the page contains the following **<svg>** element of the venue map, and two hidden **<div>** elements containing room information:
1. In the **location.htm** file, add the SVG elements for Room B by using **room-b** as the group element id. The missing elements are a filled rectangle and the text with the name of the room. Use the SVG elements for Room A as a guide.
61
+
1. In the **location.htm** file, to add the SVG elements for Room B, use **room-b** as the group element ID. The missing elements are a filled rectangle and the text with the name of the room. Use the SVG elements for Room A as a guide.
62
62
63
-
>**Note:** You may need to view the page in Microsoft Edge and experiment with the coordinate values to get elements in the correct location.
63
+
>**Note**: You may need to view the page in Microsoft Edge and experiment with the coordinate values to get elements in the correct location.
64
64
65
-
#### Task 3: Add interactivity to the venue map.
65
+
#### Task 3: Add interactivity to the venue map
66
66
67
-
1. The venue map should be interactive; a user should be able to view more information about a room by clicking on it in the map. In the location.htm file, find the following **<div>** elements. These elements contain the information about each room, but they are hidden by default:
68
-
```html
67
+
1. The venue map should be interactive; a user should be able to view more information about a room by clicking it in the map. In the **location.htm** file, find the following **<div>** elements. These elements contain the information about each room, but they are hidden by default:
68
+
```html
69
69
<divid="room-a-info"style="display: none">
70
70
<h2>Room A</h2>
71
71
<p>Capacity: 250</p>
@@ -86,22 +86,22 @@ Also notice that the script references the **location-venue.js** script in the *
86
86
<li>A Fresh Look at Layouts</li>
87
87
</ul>
88
88
</div>
89
-
```
89
+
```
90
90
2. Notice that each **<div>** is named after the room with the suffix **–info**.
91
91
92
-
>**Note:** The information for each room is hard-coded into the HTML markup. However, to make the page even more dynamic, you could retrieve information about popular sessions from the web service used in the **Schedule** page.
92
+
>**Note**: The information for each room is hard-coded into the HTML markup. However, to make the page even more dynamic, you could retrieve information about popular sessions from the web service used in the **Schedule** page.
93
93
94
-
3. The room should change color when the mouse moves over it. Open the **location.css**style sheet in the **styles\pages**folder. This style sheet contains CSS for the **location.htm** page.
95
-
4. Add a CSS rule that targets **rect** elements when the cursor is hovering over **.room** elements.
96
-
5. In this rule, set the **fill** property to **#b1f8b0**
97
-
6. Open the **location-venue.js**file in the **scripts\pages**folder. This JavaScript file contains the **showRoomInfo** function that displays information about a room. The id of the room is specified as the parameter to this function.
94
+
3. The room should change color when the mouse pointer moves over it. From the **styles\pages**folder, open the **location.css**style sheet. This style sheet contains the CSS for the **location.htm** page.
95
+
4. Add a CSS rule that targets **rect** elements when the mouse pointer is placed over **.room** elements.
96
+
5. In this rule, set the **fill** property to **#b1f8b0**.
97
+
6. In the **scripts\pages**folder, open the **location-venue.js**file. This JavaScript file contains the **showRoomInfo** function that displays information about a room. The ID of the room is specified as the parameter to this function.
98
98
7. Add **click** event listeners for the SVG **room** elements, which call the **showRoomInfo** function.
99
-
-After the comment // TODO: Get the room elements in the svg element, use the **querySelectorAll** function of the document object to find all elements that have the class set to **.room**and assign them to the **rooms** variable.
100
-
- After the comment // TODO: Add a click event listener for each room element, iterate through the list of elements in the **rooms** variable and add the **click** event handler for each item.
99
+
-To find all the elements that have the class set to **.room**, after the __// TODO: Get the room elements in the svg element__ comment, use the **querySelectorAll** function of the document object, and then assign them to the **rooms** variable.
100
+
- After the __// TODO: Add a click event listener for each room element__ comment, iterate through the list of elements in the **rooms** variable, and then add the **click** event handler for each item.
101
101
102
-
#### Task 4: Test the application.
102
+
#### Task 4: Test the application
103
103
104
-
1. Run the application and view the **location.htm** page.
104
+
1. Run the application, and then view the **location.htm** page.
105
105
2. Move the cursor over each room and verify that the fill color changes.
106
106
107
107
![alt text](./Images/20480B_11_Venue-Map-Hover.png"The venue map with Room A highlighted")
@@ -112,85 +112,85 @@ Also notice that the script references the **location-venue.js** script in the *
112
112
113
113
4. Close Microsoft Edge.
114
114
115
-
>**Results:** After completing this exercise, you will have a venue map that displays extra information when clicked.
115
+
>**Results**: After completing this exercise, you will have a venue map that displays extra information when clicked.
116
116
117
-
### Exercise 2: Creating a Speaker Badge by Using the Canvas API.
117
+
### Exercise 2: Creating a Speaker Badge by Using the Canvas API
118
118
119
119
#### Scenario
120
120
121
121
In this exercise, you will use the Canvas API to draw the elements of a conference speaker’s badge.
122
122
123
-
First, you will create a canvas element on the speaker badge page. Next, you will write JavaScript code to implement methods that draw parts of the badge. Finally, you will run the application and test the speaker badge page.
123
+
First, you will create a canvas element on the speaker badge page. Next, you will write the JavaScript code to implement methods that draw parts of the badge. Finally, you will run the application and test the speaker badge page.
124
124
125
-
#### Task 1: Create the canvas element.
125
+
#### Task 1: Create the canvas element
126
126
127
-
1. In Visual Studio, open the**ContosoConf.sln** solution in the **Allfiles\Mod11\Labfiles\Starter\Exercise 2** folder.
128
-
2. Open the **speaker-badge.htm** file. This page contains a section that enables the user to create their speaker badge. Previously, you used an **<img>** element to drag and drop an image of the speaker onto this page. This **<img>** element has been removed because you are going to modify the page to use a canvas instead. Using a canvas provides more scope for customizing the image.
129
-
3. Find following comment:
130
-
```html
127
+
1. In Visual Studio, browse to**Allfiles\Mod11\Labfiles\Starter\Exercise 2**, and then open the **ContosoConf.sln** solution.
128
+
2. Open the **speaker-badge.htm** file. This page contains a section that enables the user to create their speaker badge. Previously, you used an **<img>** element to drag an image of the speaker onto this page. This **<img>** element has been removed because you are going to modify the page to use a canvas. Using a canvas provides more scope for customizing the image.
129
+
3. Find the following comment:
130
+
```html
131
131
<!-- TODO: Add canvas here -->
132
-
```
133
-
4. Add a **<canvas>** element, with a **width** of **500** and a **height** of **200** after the comment.
132
+
```
133
+
4. After the comment, add a **<canvas>** element with a **width** of **500** and a **height** of **200**.
134
134
5. Add a solid black border to the canvas by using a CSS style. Set the width to **1px**.
135
135
6. Add the following custom attributes to the canvas element:
136
-
```html
136
+
```html
137
137
data-speaker-id="234724"
138
138
data-speaker-name="Mark Hanson"
139
-
```
139
+
```
140
140
141
-
>**Note:** The custom data attributes provide a convenient way to store application-specific data in an HTML element. They will be used by the JavaScript code that draws the elements for the badge on the canvas.
141
+
>**Note**: The custom data attributes provide a convenient way to store application-specific data in an HTML element. They will be used by the JavaScript code that draws the elements for the badge on the canvas.
142
142
>
143
-
>In this exercise, these details are hard-coded into the HTML markup, but you could also write JavaScript code to dynamically populate these attributes.
143
+
>In this exercise, these details are hard-coded into the HTML markup, but you could also write the JavaScript code to dynamically populate these attributes.
144
144
145
-
#### Task 2: Draw the details for the badge.
145
+
#### Task 2: Draw the details for the badge
146
146
147
-
1. Open **speaker-badge.js**file in the **scripts\pages**folder. The JavaScript code in this file contains a refactored version of the drag-and-drop code that you created during an earlier lab exercise. Notice that the canvas element on the page has been assigned to **this.canvas**:
148
-
```javascript
147
+
1. In the **scripts\pages**folder, open the **speaker-badge.js**file. The JavaScript code in this file contains a refactored version of the drag-and-drop code that you created during an earlier lab exercise. Notice that the canvas element on the page has been assigned to **this.canvas**:
148
+
```javascript
149
149
this.canvas=element.querySelector("canvas");
150
-
```
150
+
```
151
151
The file also contains a number of other functions that will draw the various elements of the speaker's badge.
152
152
153
-
>**Note:** The other drawing methods of the speaker badge page object will use the context, assigned to **this.context**, to do their drawing.
153
+
>**Note**: To do their drawing, the other drawing methods of the **speaker badge page** object will use the context assigned to **this.context**.
154
154
155
-
2. In the **drawBadge** method after the comment // TODO: Get the canvas's (this.canvas) context and assign to this.context, assign **this.context** to be the canvas’s 2D context.
156
-
3. After the comment // TODO: Draw the following by calling the helper methods of `this`, add code to perform the following tasks:
157
-
- Draw the background (use the **drawBackground** function).
158
-
- Draw the top text (use the **drawTopText** function; this function simply generates the text **ContosoConf 2012 Speaker**, which is displayed at the top of the badge).
159
-
- Draw the speaker name (use the **drawSpeakerName** function).
160
-
- If the **image** variable references a valid image, then draw the speaker's image (use the **drawSpeakerImage** function and pass the **image** variable as the parameter), otherwise draw a placeholder (use the **drawImagePlaceHolder** function).
161
-
- Draw the bar code (use the **drawBarCode** function and pass the value in the **speakerId** variable as the parameter).
162
-
4. In the **drawBackground** method, after the comment // TODO: Fill the canvas with a white rectangle, add statements to fill the canvas with a white rectangle.
155
+
2. In the **drawBadge** method, after the __// TODO: Get the canvas's (this.canvas) context and assign to this.context__ comment, assign **this.context** to be the canvas’s 2D context.
156
+
3. After __// TODO: Draw the following by calling the helper methods of `this` comment__, add code to perform the following tasks:
157
+
- Draw the background. Use the **drawBackground** function.
158
+
- Draw the top text. Use the **drawTopText** function; this function simply generates the text **ContosoConf 2012 Speaker**, which is displayed at the top of the badge.
159
+
- Draw the speaker name. Use the **drawSpeakerName** function.
160
+
- If the **image** variable references a valid image, draw the speaker's image (use the **drawSpeakerImage** function and pass the **image** variable as the parameter); otherwise, draw a placeholder (use the **drawImagePlaceHolder** function).
161
+
- Draw the barcode (use the **drawBarCode** function and pass the value in the **speakerId** variable as the parameter).
162
+
4. In the **drawBackground** method, after the __// TODO: Fill the canvas with a white rectangle__ comment, add statements to fill the canvas with a white rectangle.
163
163
- Set the **fillStyle** of the context to **"white"**.
164
-
-Use the **fillRect** method of the context to draw and fill the rectangle; the **width** and **height** properties of the rectangle should be the same as those of the canvas.
165
-
5. In the **drawSpeakerImage** method, after the comment // TODO: Draw the image on the canvas, add code to draw the image on the canvas at the coordinates **(20, 20)**, with size **160 × 160**.
164
+
-To draw and fill the rectangle, use the **fillRect** method of the context; the **width** and **height** properties of the rectangle should be the same as those of the canvas.
165
+
5. In the **drawSpeakerImage** method, after the __// TODO: Draw the image on the canvas__ comment, add code to draw the image on the canvas at the coordinates **(20, 20)** with size **160 × 160**.
166
166
- Use the **drawImage** method of the context.
167
-
- Note that the image is not always square, so calculate the source coordinates and size that will display the central square portion only. Use the **Math.min** function to calculate the minimum of the image’s **width** and **height** properties, like this:
168
-
```javascript
167
+
- Note that the image is not always square, so calculate the source coordinates and size that will display the central square portion only. Use the **Math.min** function to calculate the minimum value of the image’s **width** and **height** properties, like this:
168
+
```javascript
169
169
var size =Math.min(image.width, image.height);
170
-
```
170
+
```
171
171
172
172
![alt text](./Images/20480B_11_Square.png"The central square portion of a rectangle")
173
173
174
-
6. In the **drawSpeakerName** method, after the comment // TODO: Draw this.speakerName on the canvas, add code to draw the speaker's name on the canvas:
175
-
- The speaker’s name is available in the **this.speakerName** property.
176
-
-Configure the following properties of the canvas to style the text before drawing it.
177
-
- font:**40px sans-serif**.
178
-
- fillStyle:**black**.
179
-
- textBaseline:**top**.
180
-
- textAlign:**left**.
181
-
- fillText: the speaker's name.
174
+
6. In the **drawSpeakerName** method, after the __// TODO: Draw this.speakerName on the canvas__ comment, add code to draw the speaker's name on the canvas:
175
+
- The speaker’s name is available in the **this.speakerName** property.
176
+
-To style the text before drawing it, configure the following properties of the canvas:
177
+
- font: **40px sans-serif**
178
+
- fillStyle: **black**
179
+
- textBaseline: **top**
180
+
- textAlign: **left**
181
+
- fillText: *the speaker's name*
182
182
183
-
#### Task 3: Test the application.
183
+
#### Task 3: Test the application
184
184
185
-
1. Run the application and view the **speaker-badge.htm** page.
186
-
2. Drag and drop the **mark-hansen.jpg** image file from the **Allfiles\Mod11\Labfiles\Resources** folder onto the canvas.
185
+
1. Run the application, and then view the **speaker-badge.htm** page.
186
+
2. Browse to **Allfiles\Mod11\Labfiles\Resources**, and then drag the **mark-hansen.jpg** image file onto the canvas.
187
187
3. Verify that the image is drawn on the canvas, along with the speaker’s details.
188
188
189
189
![alt text](./Images/20480B_11_Speaker-Badge-Canvas.png"The speaker badge for Mark Hanson")
190
190
191
191
4. Close Microsoft Edge.
192
192
193
-
>**Result:** After completing this exercise, you will have a Speaker Badge page that enables a conference speaker to create their badge.
193
+
>**Result**: After completing this exercise, you will have a **Speaker Badge** page that enables conference speakers to create their badge.
0 commit comments