WEBVTT

0
00:00.630 --> 00:02.430
Now that we've created the UI,

1
00:02.640 --> 00:07.640
the next step or step 2 was to try and get the buttons to start working so

2
00:09.750 --> 00:12.300
that when we press the cross or the tick button,

3
00:12.570 --> 00:16.650
we get a new French word being shown in the middle here,

4
00:16.950 --> 00:21.750
and the title switches to the word of French. So how do we do this?

5
00:22.050 --> 00:24.930
Well, firstly, for both of these buttons

6
00:24.960 --> 00:27.090
the unknown and the known button,

7
00:27.450 --> 00:32.450
we're going to add a command. And remember the command links to a particular

8
00:32.850 --> 00:35.220
function that is going to be called.

9
00:35.340 --> 00:40.340
So we'll call that next_card and we'll add that to both the known and the

10
00:41.520 --> 00:42.510
unknown buttons.

11
00:44.670 --> 00:47.430
Now that we've got next_card added here,

12
00:47.520 --> 00:51.540
now let's go ahead and create this function next_card.

13
00:52.530 --> 00:55.770
What exactly is this function going to do? Well,

14
00:55.800 --> 01:00.630
it's going to take the words from the french_words.csv

15
01:01.110 --> 01:06.110
and it's going to get hold of some of these words and their translations.

16
01:06.840 --> 01:07.680
So it basically,

17
01:07.890 --> 01:11.760
you can imagine these as single rows that we want to get hold of.

18
01:12.690 --> 01:14.610
Now, what we need to do first though

19
01:14.610 --> 01:19.610
is we need to use pandas in order to read from that CSV.

20
01:20.430 --> 01:25.430
So we're going to first import pandas and it should already be installed in

21
01:25.920 --> 01:28.950
your project. If not, you'll see a red light bulb

22
01:29.010 --> 01:32.400
and then you can just click on it and then install that module.

23
01:33.000 --> 01:34.890
Once we've got pandas enabled though,

24
01:34.920 --> 01:39.920
we're going to use panders to read from a CSV and the CSV is our french_words.csv

25
01:43.110 --> 01:45.810
from the data folder.

26
01:46.590 --> 01:49.650
Now we're going to set this as equal to the data.

27
01:50.070 --> 01:54.240
So this is now going to be a data frame. And in fact,

28
01:54.240 --> 01:55.860
if I go ahead and print it

29
01:55.880 --> 01:56.713
<v 1>now</v>

30
02:00.410 --> 02:05.410
<v 0>you can see that pandas will nicely format our table with the column headings</v>

31
02:07.010 --> 02:09.050
and also record numbers

32
02:09.380 --> 02:14.120
and each of these rows are basically the pieces of data that we're interested

33
02:14.120 --> 02:16.910
in. Now that we've got a data frame,

34
02:17.030 --> 02:20.750
we can convert that data frame into a dictionary.

35
02:21.290 --> 02:25.310
Let's go ahead and create a dictionary which we'll call out to_learn,

36
02:25.580 --> 02:27.710
so that's the word that we need to learn,

37
02:28.220 --> 02:32.630
and this is going to be a dictionary that's created from this data

38
02:32.900 --> 02:37.430
from this french_words.csv. But notice how at the moment,

39
02:37.430 --> 02:41.570
if we just use the default method of creating a dictionary,

40
02:42.170 --> 02:46.430
what our to_learn is going to look like is like this.

41
02:46.670 --> 02:49.580
We've got French and then inside

42
02:49.610 --> 02:54.140
we've got all of the French words and then we've got a key later on called

43
02:54.260 --> 02:58.010
English and all of the corresponding English words.

44
02:58.490 --> 03:03.250
Now, that's what we want. Instead, we want to change one of the parameters

45
03:03.310 --> 03:04.480
which is orient,

46
03:04.810 --> 03:09.810
so how do we want to orient the table to create this dictionary? Now in the hints

47
03:11.200 --> 03:14.620
for step 2, I already showed you that you could use this

48
03:14.620 --> 03:19.620
orient set to records and this way it'll give you each column's values as a

49
03:21.670 --> 03:24.490
list. Let me show you what that looks like.

50
03:24.820 --> 03:27.640
So let's change this parameter orient,

51
03:27.970 --> 03:30.820
and we'll set it to equal the string records.

52
03:31.870 --> 03:33.700
Remember that there's an 's' at the end.

53
03:34.720 --> 03:39.040
And now we can compare the previous version of the dictionary

54
03:39.040 --> 03:43.330
that's generated from the data to the new version.

55
03:43.360 --> 03:48.070
So let me run the code again and you can see now we've basically got a list of

56
03:48.070 --> 03:52.390
dictionaries and each dictionary has a key, French,

57
03:52.750 --> 03:54.880
the French word, a key English,

58
03:54.940 --> 03:59.830
and then the English word and so on and so forth. This is really,

59
03:59.830 --> 04:04.830
really useful for us because we can basically pick a random entry from this list

60
04:05.800 --> 04:10.390
and we'll be able to tap into the French value and the English value later on

61
04:10.390 --> 04:15.190
when we flip our cards. That is our to_learn dictionary done.

62
04:15.760 --> 04:18.040
So when the next_card function gets called,

63
04:18.520 --> 04:23.320
then we're going to need to pick out some data from this dictionary and the way

64
04:23.320 --> 04:25.690
that we're gonna pick it out is randomly.

65
04:25.720 --> 04:30.640
So we're going to import the random module and we're going to use random.

66
04:30.640 --> 04:35.640
choice in order to pick out a random item from this list of words to learn.

67
04:38.650 --> 04:43.120
And once we've got a random choice which we'll call current_card,

68
04:44.200 --> 04:49.200
then we can get hold of the data from this current_card by saying current_card

69
04:51.070 --> 04:55.510
[French]. Remember that in this french_words.csv

70
04:55.510 --> 04:58.540
we've got a capital F and a capital E.

71
04:58.570 --> 05:01.450
So our keys must match that exactly.

72
05:02.140 --> 05:04.660
So let's go ahead and print this

73
05:04.960 --> 05:09.960
and you can see now that when I press on one of these buttons,

74
05:11.200 --> 05:13.060
either the cross or the tick,

75
05:13.300 --> 05:18.300
it's going to pick out a random French word from my list of words in this

76
05:18.550 --> 05:22.390
french_words.csv. So now instead of printing it,

77
05:22.810 --> 05:26.950
let's go ahead and put it into these pieces of text on our canvas.

78
05:27.670 --> 05:28.690
In order to do that,

79
05:28.750 --> 05:33.750
I'm going to create a variable called card_title to hold on to the title and

80
05:37.300 --> 05:41.680
the card_word to hold on to the word text.

81
05:42.340 --> 05:47.020
And now I can go ahead and tap into my canvas and say

82
05:47.620 --> 05:52.390
itemconfig and the item that we want to configure is firstly

83
05:52.420 --> 05:53.830
our card_title

84
05:54.460 --> 05:59.460
and the thing we want to configure about it is to change the text to say French.

85
06:00.680 --> 06:04.670
So that's the title remember, which is the part that's up here.

86
06:05.360 --> 06:09.650
And then we're going to do the same thing using canvas.itemconfig

87
06:09.980 --> 06:12.830
but this time we're going to configure the card_word,

88
06:13.820 --> 06:17.660
and this is going to be set to exactly what we printed before,

89
06:17.900 --> 06:22.900
which is the random card that was picked out and the value under the key French.

90
06:25.130 --> 06:27.620
So now when I hit run again,

91
06:27.830 --> 06:30.440
you can see that when I press either of these buttons,

92
06:30.770 --> 06:34.610
I'm going to get a random French word showing up right here.

93
06:36.020 --> 06:39.050
But notice how when I first run the app

94
06:39.110 --> 06:43.850
you can see that it still has the placeholder title and word showing up.

95
06:44.330 --> 06:47.930
Instead, we want it to show the next card.

96
06:48.290 --> 06:52.220
So we have to call this function once we've created all of our UI

97
06:52.490 --> 06:54.410
but before we get to our main loop.

98
06:54.890 --> 06:59.300
So we'll call our next card. And this way,

99
06:59.300 --> 07:03.200
once we've created all of our images and everything else,

100
07:03.440 --> 07:05.540
then we can generate the next card,

101
07:05.570 --> 07:10.310
get the data and put it into the card title and card word. So in fact,

102
07:10.310 --> 07:11.000
if you want to,

103
07:11.000 --> 07:15.020
you can actually delete these two pieces of text because they won't actually do

104
07:15.020 --> 07:19.670
anything at the moment. And now as soon as we hit run,

105
07:19.700 --> 07:23.660
you can see the first thing we see is already a French word

106
07:23.810 --> 07:27.860
and it will keep going through all of the words that we have in our CSV.

107
07:28.850 --> 07:32.540
There you have it. We've now managed to read from the CSV,

108
07:32.930 --> 07:37.930
get a dictionary of all the records in the CSV and to randomly get the French

109
07:38.300 --> 07:43.010
word showing up in our flashcard. Our flashcard currently,

110
07:43.010 --> 07:46.370
doesn't actually flash. It doesn't change, right?

111
07:46.640 --> 07:49.910
We need a way for us to be able to set some sort of a timer,

112
07:50.240 --> 07:51.740
say a 3-second timer,

113
07:52.040 --> 07:57.040
and then for our card to show us the opposite side or the backside and to show

114
07:57.650 --> 08:00.230
us the English translation of the words.

115
08:00.890 --> 08:03.260
That is what we're going to tackle on the next lesson.

116
08:03.500 --> 08:06.920
So head over to step 3 and have a read of the instructions.