WEBVTT

0
00:00.450 --> 00:03.750
Now that we've got our words showing up in French,

1
00:04.110 --> 00:09.110
it's time to see the other side of the card and see the English equivalent so

2
00:09.240 --> 00:12.420
that we can check our knowledge. To do this

3
00:12.480 --> 00:17.480
we're going to have to implement some sort of way of changing this card after a

4
00:18.660 --> 00:22.110
set amount of time. So we're going to flip the card

5
00:22.290 --> 00:25.110
after three seconds are up. To do that

6
00:25.170 --> 00:28.470
we're going to use the window.after method.

7
00:29.040 --> 00:32.310
Right after here where we've created a window,

8
00:32.610 --> 00:34.620
we're going to say window.after.

9
00:35.130 --> 00:38.340
And then we can specify the amount of time in milliseconds.

10
00:38.400 --> 00:41.790
So I'm going to say three seconds or 3000 milliseconds.

11
00:42.450 --> 00:45.360
And then the function that we're going to call is a function

12
00:45.360 --> 00:49.530
that's going to be called flip_card. And if we want that to work,

13
00:49.560 --> 00:52.680
then we're going to have to create it. So I'm going to create right here,

14
00:52.710 --> 00:53.543
just above.

15
00:53.850 --> 00:58.850
So I'll call it flip_card and this function is going to take care of changing the

16
00:59.520 --> 01:03.630
card to show the English word for the current card,

17
01:04.050 --> 01:08.550
and also going to change the image from the card_front to

18
01:08.550 --> 01:12.930
the card_back, and also we're going to change the color of the text as well.

19
01:13.620 --> 01:14.790
In our flip card,

20
01:14.820 --> 01:19.350
we're going to get hold of the canvas and we're going to first item.config

21
01:19.380 --> 01:24.270
the card_ title. So we're going to change the card_title to,

22
01:24.270 --> 01:26.790
instead of saying French, we're going to say, well,

23
01:26.790 --> 01:29.340
this is now the English translation,

24
01:30.030 --> 01:33.180
and then we're going to config the card word,

25
01:33.750 --> 01:36.960
and this is going to be still from the current card,

26
01:37.260 --> 01:40.770
but we want to get ahold of the value under the key English instead.

27
01:41.400 --> 01:46.320
Now at the moment, this current card is locked up inside next_card.

28
01:46.590 --> 01:51.590
So we can't actually get hold of it without creating a new random choice.

29
01:52.650 --> 01:56.340
So what we can do is we can create our current card

30
01:58.680 --> 02:01.680
and we can set it to a empty dictionary.

31
02:02.280 --> 02:07.280
And then we can change this to a global and tap into that current card to modify

32
02:08.880 --> 02:13.880
it and save this random choice from our list of French and English pairs.

33
02:15.720 --> 02:17.760
So once we've got that inside there,

34
02:17.760 --> 02:22.500
then we can tap into it inside flip_card and we can say current card

35
02:22.710 --> 02:26.370
get hold of the value under the English key.

36
02:27.270 --> 02:32.220
And that way we update both of our texts. So right now if I hit run,

37
02:32.250 --> 02:35.310
you can see that immediately after three seconds

38
02:35.640 --> 02:40.110
we switched to the opposite side and we have our English and the English

39
02:40.140 --> 02:44.970
equivalent of the same word showing up. So for example,

40
02:44.970 --> 02:47.940
in French matin, in English means morning.

41
02:48.120 --> 02:51.900
So that's how we can verify that we actually know the meaning of the card.

42
02:52.710 --> 02:57.450
In addition to changing the words, I'm also going to change the image.

43
02:57.750 --> 03:01.000
So notice how we saved the words with a variable.

44
03:01.240 --> 03:04.330
We can do the same thing for this create image method.

45
03:04.810 --> 03:09.810
We can say the card_background is equal to canvas create image.

46
03:10.390 --> 03:14.140
And in addition to creating the card front image,

47
03:14.350 --> 03:17.170
we can also create the card back image.

48
03:17.800 --> 03:20.350
Now, you have to be really careful here

49
03:20.380 --> 03:23.440
because if you create this card back image

50
03:23.740 --> 03:27.310
which is a photo image created from file,

51
03:27.730 --> 03:31.960
if you create it inside one of these functions, by the end of the function

52
03:31.960 --> 03:35.680
call, that reference to that particular image will be gone.

53
03:35.980 --> 03:40.980
And it won't work if you create this photo image inside flipcard and try to set

54
03:41.380 --> 03:45.940
it inside this method. So you have to create it outside of any of the functions.

55
03:46.630 --> 03:51.630
So let's change the file to images/card_back.png

56
03:53.830 --> 03:58.300
and now we're going to get our canvas to again,

57
03:58.300 --> 03:59.890
call itemconfig.

58
04:00.400 --> 04:03.310
And this time we're configuring the card_background.

59
04:04.000 --> 04:08.350
And the attribute that we want to configure is the image property.

60
04:08.860 --> 04:12.670
So we're going to change that to the card_back_img

61
04:12.700 --> 04:14.770
which we created right here.

62
04:15.910 --> 04:17.770
So now let's just check that again.

63
04:18.250 --> 04:21.490
Let's wait three seconds and then it's changed to

64
04:21.520 --> 04:24.370
the back of the card. On the back of the card

65
04:24.400 --> 04:28.840
we want these two pieces of text to actually have a different color.

66
04:28.870 --> 04:32.380
We want it to be white, just so that it stands out from the background.

67
04:33.040 --> 04:37.000
And to do that, we can add it along with our item config.

68
04:37.300 --> 04:39.100
Not only are we changing the text,

69
04:39.370 --> 04:43.090
but also changing the fill of the text to white.

70
04:44.310 --> 04:45.143
Okay.

71
04:47.550 --> 04:50.670
<v 0>And now when our card flips over,</v>

72
04:50.940 --> 04:54.390
you can see its a green card with a white text.

73
04:55.770 --> 04:56.100
Now,

74
04:56.100 --> 05:01.100
one of the things we have to do is every time we click on one of these buttons,

75
05:01.980 --> 05:05.040
it has the flip back to the front of the card, right?

76
05:05.040 --> 05:09.330
That means changing the text color and changing that background image.

77
05:09.840 --> 05:13.200
So that happens when we go to next card.

78
05:13.680 --> 05:17.730
So in addition to configuring the text and the words,

79
05:18.000 --> 05:23.000
we also again have to itemconfig the card_background so that we can change the

80
05:23.400 --> 05:28.170
image back to the card front image.

81
05:28.890 --> 05:33.540
In addition, we have to change these text colors to have a different fill,

82
05:33.780 --> 05:36.360
so we're going to change it back to black.

83
05:39.450 --> 05:39.750
Right.

84
05:39.750 --> 05:43.650
<v 0>This way, when the card flips, it goes to green,</v>

85
05:43.980 --> 05:47.040
white on green. And then when we go to the front of the card,

86
05:47.130 --> 05:49.200
it goes to black on white.

87
05:50.670 --> 05:53.490
Now notice how once we go to the next card,

88
05:53.790 --> 05:58.790
that card flipping mechanism has gone because we only ever call this window

89
05:59.150 --> 06:01.700
after the first time we create the window.

90
06:02.270 --> 06:05.900
So we actually need this to happen a few times. In fact,

91
06:05.900 --> 06:09.590
we need it to happen every single time we go to the next card.

92
06:10.070 --> 06:12.950
So after we've configured all the things on our card,

93
06:13.010 --> 06:16.760
we're gonna call a window.after, three seconds, flipcard.

94
06:17.240 --> 06:21.710
So this way, even if we go to the next card and we wait three seconds,

95
06:21.830 --> 06:23.990
it again goes to the back.

96
06:24.950 --> 06:29.570
Now one of the bugs you might have encountered is if you clicked this button

97
06:29.600 --> 06:33.440
many times and you go through lots of different words,

98
06:33.740 --> 06:37.130
you see immediately, that card actually flipped.

99
06:37.700 --> 06:41.690
And it's because that window.after three seconds is counting down in the

100
06:41.690 --> 06:45.350
background, waiting, waiting, waiting until three seconds

101
06:45.590 --> 06:47.300
at which point it's going to flip the card.

102
06:47.690 --> 06:52.310
It doesn't care that you've actually just gone onto a new card and you want to

103
06:52.310 --> 06:56.900
wait again, three seconds. In order to get this to work,

104
06:57.080 --> 07:02.080
we actually have to give this line of code a variable so that we'll call it the

105
07:02.720 --> 07:06.710
flip_timer. And this is now a global

106
07:06.890 --> 07:11.890
which we can tap into and we can add it after a comma over here,

107
07:13.430 --> 07:15.890
flip_timer. Alternatively,

108
07:15.890 --> 07:19.730
you can also go onto a new line and say global flip_timer.

109
07:20.060 --> 07:23.450
It doesn't really make a difference other than the fact that this probably takes

110
07:23.690 --> 07:27.920
less lines of code. Now, once we've got access to our flip_timer,

111
07:28.190 --> 07:31.580
we can say that every time we go to a new card,

112
07:32.180 --> 07:36.350
when we click on one of these buttons, we're going to invalidate this timer.

113
07:36.890 --> 07:39.140
So we can say window.after_

114
07:39.170 --> 07:43.550
cancel and then pass in the ID of our flip_timer.

115
07:44.300 --> 07:46.670
And then after we've set up this card,

116
07:46.760 --> 07:51.760
we can set up a new flip_timer so that it waits for again three seconds.

117
07:53.270 --> 07:57.260
And now once I've added that bit of code, it should fix this bug.

118
07:57.650 --> 08:02.650
So now whenever I keep going or I press the check or the crossmark,

119
08:03.170 --> 08:04.040
it doesn't really matter.

120
08:04.040 --> 08:09.040
It's not going to flip until I land on a card and wait for three seconds

121
08:09.620 --> 08:13.760
before it flips. There you have it. We've got our card

122
08:13.790 --> 08:16.940
flipping technology added to our code.

123
08:17.660 --> 08:22.430
Now all that's left is to get rid of the cards that the user says

124
08:22.430 --> 08:23.263
they know

125
08:23.570 --> 08:28.570
and to create a new CSV that is going to hold all the cards from this to_learn

126
08:30.440 --> 08:34.700
dictionary and to remove the cards that the user says they know.

127
08:35.240 --> 08:38.480
And then that way, the next time we run our app

128
08:38.720 --> 08:43.610
it will remember which words we've learned and which words we haven't so that we

129
08:43.610 --> 08:47.120
can load up only the words we have yet to learn.

130
08:47.870 --> 08:52.370
So for that, head over to the next lesson where we've got the final step of the

131
08:52.370 --> 08:53.510
flashcard project.