1 00:00:00,000 --> 00:00:00,222 2 00:00:00,222 --> 00:00:02,680 BRIAN YU: Finally, the last thing you'll do in this problem 3 00:00:02,680 --> 00:00:05,200 is write matrix.html, which will be a way 4 00:00:05,200 --> 00:00:08,500 to visualize that 2D list that you created in your edit distance 5 00:00:08,500 --> 00:00:09,830 algorithm. 6 00:00:09,830 --> 00:00:11,260 Here's what you'll have to do. 7 00:00:11,260 --> 00:00:13,810 You'll first, inside of matrix.html, want 8 00:00:13,810 --> 00:00:18,400 to create an HTML table which is going to represent in rows and columns 9 00:00:18,400 --> 00:00:22,420 the optimal way of getting from the first i characters of the first string 10 00:00:22,420 --> 00:00:25,330 to the first j characters of the second string. 11 00:00:25,330 --> 00:00:27,730 In particular, because you can use Jinja, 12 00:00:27,730 --> 00:00:32,770 you'll have access in matrix.html to string one and string two, 13 00:00:32,770 --> 00:00:36,130 as well as matrix, which will be that 2D matrix that you 14 00:00:36,130 --> 00:00:39,460 created in your distances function. 15 00:00:39,460 --> 00:00:43,880 You'll want one row in your table for each of the characters in string one, 16 00:00:43,880 --> 00:00:47,620 including zero, and you also want one column for each character 17 00:00:47,620 --> 00:00:50,680 in string two, including zero. 18 00:00:50,680 --> 00:00:54,370 Then inside of that two by two grid, you'll want to fill in the cells 19 00:00:54,370 --> 00:00:57,640 with the edit distance, just a number for how many steps 20 00:00:57,640 --> 00:01:01,150 it would take in order to convert from one to the other. 21 00:01:01,150 --> 00:01:04,390 And in particular, make sure to fill in that cell with only the number, not 22 00:01:04,390 --> 00:01:08,270 the action that you would need to take in order to get there. 23 00:01:08,270 --> 00:01:11,530 You can take a look at Jinja2 loops, which may prove useful to you 24 00:01:11,530 --> 00:01:15,560 as you think about how to go about producing a table like this. 25 00:01:15,560 --> 00:01:18,560 So what do HTML tables actually look like? 26 00:01:18,560 --> 00:01:22,780 Well, tables are generally wrapped in table HTML tags and angled brackets. 27 00:01:22,780 --> 00:01:26,830 And inside of a table might be thead for the header of the table, just 28 00:01:26,830 --> 00:01:28,990 the labels on top of each column. 29 00:01:28,990 --> 00:01:32,890 And then tbody for the actual contents of the table. 30 00:01:32,890 --> 00:01:36,700 Inside of tbody or thead, you might have some number 31 00:01:36,700 --> 00:01:43,120 of tr's which stand for table rows, that represent a row of your table. 32 00:01:43,120 --> 00:01:46,270 And inside of that, you might have a td for table data, 33 00:01:46,270 --> 00:01:48,580 or a cell inside of that table that's going 34 00:01:48,580 --> 00:01:53,410 to represent a particular column that maps to a particular row. 35 00:01:53,410 --> 00:01:56,920 Td is generally used in order to create a cell in a table. 36 00:01:56,920 --> 00:01:59,590 If that cell is a header cell, generally we'll 37 00:01:59,590 --> 00:02:03,730 use th as a tag for creating a table header. 38 00:02:03,730 --> 00:02:06,340 Ultimately you want to nest these within each other 39 00:02:06,340 --> 00:02:10,300 with td's inside of tr's inside of tbody inside of table, 40 00:02:10,300 --> 00:02:13,960 in order to generate a table that will display all of the edit distance 41 00:02:13,960 --> 00:02:17,220 information that was originally encoded in your two by two matrix, 42 00:02:17,220 --> 00:02:21,420 so that you can visualize it when you see it on the web. 43 00:02:21,420 --> 00:02:22,591