1 00:00:00,630 --> 00:00:02,430 Now that we've created the UI, 2 00:00:02,640 --> 00:00:07,640 the next step or step 2 was to try and get the buttons to start working so 3 00:00:09,750 --> 00:00:12,300 that when we press the cross or the tick button, 4 00:00:12,570 --> 00:00:16,650 we get a new French word being shown in the middle here, 5 00:00:16,950 --> 00:00:21,750 and the title switches to the word of French. So how do we do this? 6 00:00:22,050 --> 00:00:24,930 Well, firstly, for both of these buttons 7 00:00:24,960 --> 00:00:27,090 the unknown and the known button, 8 00:00:27,450 --> 00:00:32,450 we're going to add a command. And remember the command links to a particular 9 00:00:32,850 --> 00:00:35,220 function that is going to be called. 10 00:00:35,340 --> 00:00:40,340 So we'll call that next_card and we'll add that to both the known and the 11 00:00:41,520 --> 00:00:42,510 unknown buttons. 12 00:00:44,670 --> 00:00:47,430 Now that we've got next_card added here, 13 00:00:47,520 --> 00:00:51,540 now let's go ahead and create this function next_card. 14 00:00:52,530 --> 00:00:55,770 What exactly is this function going to do? Well, 15 00:00:55,800 --> 00:01:00,630 it's going to take the words from the french_words.csv 16 00:01:01,110 --> 00:01:06,110 and it's going to get hold of some of these words and their translations. 17 00:01:06,840 --> 00:01:07,680 So it basically, 18 00:01:07,890 --> 00:01:11,760 you can imagine these as single rows that we want to get hold of. 19 00:01:12,690 --> 00:01:14,610 Now, what we need to do first though 20 00:01:14,610 --> 00:01:19,610 is we need to use pandas in order to read from that CSV. 21 00:01:20,430 --> 00:01:25,430 So we're going to first import pandas and it should already be installed in 22 00:01:25,920 --> 00:01:28,950 your project. If not, you'll see a red light bulb 23 00:01:29,010 --> 00:01:32,400 and then you can just click on it and then install that module. 24 00:01:33,000 --> 00:01:34,890 Once we've got pandas enabled though, 25 00:01:34,920 --> 00:01:39,920 we're going to use panders to read from a CSV and the CSV is our french_words.csv 26 00:01:43,110 --> 00:01:45,810 from the data folder. 27 00:01:46,590 --> 00:01:49,650 Now we're going to set this as equal to the data. 28 00:01:50,070 --> 00:01:54,240 So this is now going to be a data frame. And in fact, 29 00:01:54,240 --> 00:01:55,860 if I go ahead and print it 30 00:01:55,880 --> 00:01:56,713 now 31 00:02:00,410 --> 00:02:05,410 you can see that pandas will nicely format our table with the column headings 32 00:02:07,010 --> 00:02:09,050 and also record numbers 33 00:02:09,380 --> 00:02:14,120 and each of these rows are basically the pieces of data that we're interested 34 00:02:14,120 --> 00:02:16,910 in. Now that we've got a data frame, 35 00:02:17,030 --> 00:02:20,750 we can convert that data frame into a dictionary. 36 00:02:21,290 --> 00:02:25,310 Let's go ahead and create a dictionary which we'll call out to_learn, 37 00:02:25,580 --> 00:02:27,710 so that's the word that we need to learn, 38 00:02:28,220 --> 00:02:32,630 and this is going to be a dictionary that's created from this data 39 00:02:32,900 --> 00:02:37,430 from this french_words.csv. But notice how at the moment, 40 00:02:37,430 --> 00:02:41,570 if we just use the default method of creating a dictionary, 41 00:02:42,170 --> 00:02:46,430 what our to_learn is going to look like is like this. 42 00:02:46,670 --> 00:02:49,580 We've got French and then inside 43 00:02:49,610 --> 00:02:54,140 we've got all of the French words and then we've got a key later on called 44 00:02:54,260 --> 00:02:58,010 English and all of the corresponding English words. 45 00:02:58,490 --> 00:03:03,250 Now, that's what we want. Instead, we want to change one of the parameters 46 00:03:03,310 --> 00:03:04,480 which is orient, 47 00:03:04,810 --> 00:03:09,810 so how do we want to orient the table to create this dictionary? Now in the hints 48 00:03:11,200 --> 00:03:14,620 for step 2, I already showed you that you could use this 49 00:03:14,620 --> 00:03:19,620 orient set to records and this way it'll give you each column's values as a 50 00:03:21,670 --> 00:03:24,490 list. Let me show you what that looks like. 51 00:03:24,820 --> 00:03:27,640 So let's change this parameter orient, 52 00:03:27,970 --> 00:03:30,820 and we'll set it to equal the string records. 53 00:03:31,870 --> 00:03:33,700 Remember that there's an 's' at the end. 54 00:03:34,720 --> 00:03:39,040 And now we can compare the previous version of the dictionary 55 00:03:39,040 --> 00:03:43,330 that's generated from the data to the new version. 56 00:03:43,360 --> 00:03:48,070 So let me run the code again and you can see now we've basically got a list of 57 00:03:48,070 --> 00:03:52,390 dictionaries and each dictionary has a key, French, 58 00:03:52,750 --> 00:03:54,880 the French word, a key English, 59 00:03:54,940 --> 00:03:59,830 and then the English word and so on and so forth. This is really, 60 00:03:59,830 --> 00:04:04,830 really useful for us because we can basically pick a random entry from this list 61 00:04:05,800 --> 00:04:10,390 and we'll be able to tap into the French value and the English value later on 62 00:04:10,390 --> 00:04:15,190 when we flip our cards. That is our to_learn dictionary done. 63 00:04:15,760 --> 00:04:18,040 So when the next_card function gets called, 64 00:04:18,519 --> 00:04:23,320 then we're going to need to pick out some data from this dictionary and the way 65 00:04:23,320 --> 00:04:25,690 that we're gonna pick it out is randomly. 66 00:04:25,720 --> 00:04:30,640 So we're going to import the random module and we're going to use random. 67 00:04:30,640 --> 00:04:35,640 choice in order to pick out a random item from this list of words to learn. 68 00:04:38,650 --> 00:04:43,120 And once we've got a random choice which we'll call current_card, 69 00:04:44,200 --> 00:04:49,200 then we can get hold of the data from this current_card by saying current_card 70 00:04:51,070 --> 00:04:55,510 [French]. Remember that in this french_words.csv 71 00:04:55,510 --> 00:04:58,540 we've got a capital F and a capital E. 72 00:04:58,570 --> 00:05:01,450 So our keys must match that exactly. 73 00:05:02,140 --> 00:05:04,660 So let's go ahead and print this 74 00:05:04,960 --> 00:05:09,960 and you can see now that when I press on one of these buttons, 75 00:05:11,200 --> 00:05:13,060 either the cross or the tick, 76 00:05:13,300 --> 00:05:18,300 it's going to pick out a random French word from my list of words in this 77 00:05:18,550 --> 00:05:22,390 french_words.csv. So now instead of printing it, 78 00:05:22,810 --> 00:05:26,950 let's go ahead and put it into these pieces of text on our canvas. 79 00:05:27,670 --> 00:05:28,690 In order to do that, 80 00:05:28,750 --> 00:05:33,750 I'm going to create a variable called card_title to hold on to the title and 81 00:05:37,300 --> 00:05:41,680 the card_word to hold on to the word text. 82 00:05:42,340 --> 00:05:47,020 And now I can go ahead and tap into my canvas and say 83 00:05:47,620 --> 00:05:52,390 itemconfig and the item that we want to configure is firstly 84 00:05:52,420 --> 00:05:53,830 our card_title 85 00:05:54,460 --> 00:05:59,460 and the thing we want to configure about it is to change the text to say French. 86 00:06:00,680 --> 00:06:04,670 So that's the title remember, which is the part that's up here. 87 00:06:05,360 --> 00:06:09,650 And then we're going to do the same thing using canvas.itemconfig 88 00:06:09,980 --> 00:06:12,830 but this time we're going to configure the card_word, 89 00:06:13,820 --> 00:06:17,660 and this is going to be set to exactly what we printed before, 90 00:06:17,900 --> 00:06:22,900 which is the random card that was picked out and the value under the key French. 91 00:06:25,130 --> 00:06:27,620 So now when I hit run again, 92 00:06:27,830 --> 00:06:30,440 you can see that when I press either of these buttons, 93 00:06:30,770 --> 00:06:34,610 I'm going to get a random French word showing up right here. 94 00:06:36,020 --> 00:06:39,050 But notice how when I first run the app 95 00:06:39,110 --> 00:06:43,850 you can see that it still has the placeholder title and word showing up. 96 00:06:44,330 --> 00:06:47,930 Instead, we want it to show the next card. 97 00:06:48,290 --> 00:06:52,220 So we have to call this function once we've created all of our UI 98 00:06:52,490 --> 00:06:54,410 but before we get to our main loop. 99 00:06:54,890 --> 00:06:59,300 So we'll call our next card. And this way, 100 00:06:59,300 --> 00:07:03,200 once we've created all of our images and everything else, 101 00:07:03,440 --> 00:07:05,540 then we can generate the next card, 102 00:07:05,570 --> 00:07:10,310 get the data and put it into the card title and card word. So in fact, 103 00:07:10,310 --> 00:07:11,000 if you want to, 104 00:07:11,000 --> 00:07:15,020 you can actually delete these two pieces of text because they won't actually do 105 00:07:15,020 --> 00:07:19,670 anything at the moment. And now as soon as we hit run, 106 00:07:19,700 --> 00:07:23,660 you can see the first thing we see is already a French word 107 00:07:23,810 --> 00:07:27,860 and it will keep going through all of the words that we have in our CSV. 108 00:07:28,850 --> 00:07:32,540 There you have it. We've now managed to read from the CSV, 109 00:07:32,930 --> 00:07:37,930 get a dictionary of all the records in the CSV and to randomly get the French 110 00:07:38,300 --> 00:07:43,010 word showing up in our flashcard. Our flashcard currently, 111 00:07:43,010 --> 00:07:46,370 doesn't actually flash. It doesn't change, right? 112 00:07:46,640 --> 00:07:49,910 We need a way for us to be able to set some sort of a timer, 113 00:07:50,240 --> 00:07:51,740 say a 3-second timer, 114 00:07:52,040 --> 00:07:57,040 and then for our card to show us the opposite side or the backside and to show 115 00:07:57,650 --> 00:08:00,230 us the English translation of the words. 116 00:08:00,890 --> 00:08:03,260 That is what we're going to tackle on the next lesson. 117 00:08:03,500 --> 00:08:06,920 So head over to step 3 and have a read of the instructions.