1 00:00:00,450 --> 00:00:03,750 Now that we've got our words showing up in French, 2 00:00:04,110 --> 00:00:09,110 it's time to see the other side of the card and see the English equivalent so 3 00:00:09,240 --> 00:00:12,420 that we can check our knowledge. To do this 4 00:00:12,480 --> 00:00:17,480 we're going to have to implement some sort of way of changing this card after a 5 00:00:18,660 --> 00:00:22,110 set amount of time. So we're going to flip the card 6 00:00:22,290 --> 00:00:25,110 after three seconds are up. To do that 7 00:00:25,170 --> 00:00:28,470 we're going to use the window.after method. 8 00:00:29,040 --> 00:00:32,310 Right after here where we've created a window, 9 00:00:32,610 --> 00:00:34,620 we're going to say window.after. 10 00:00:35,130 --> 00:00:38,340 And then we can specify the amount of time in milliseconds. 11 00:00:38,400 --> 00:00:41,790 So I'm going to say three seconds or 3000 milliseconds. 12 00:00:42,450 --> 00:00:45,360 And then the function that we're going to call is a function 13 00:00:45,360 --> 00:00:49,530 that's going to be called flip_card. And if we want that to work, 14 00:00:49,560 --> 00:00:52,680 then we're going to have to create it. So I'm going to create right here, 15 00:00:52,710 --> 00:00:53,543 just above. 16 00:00:53,850 --> 00:00:58,850 So I'll call it flip_card and this function is going to take care of changing the 17 00:00:59,520 --> 00:01:03,630 card to show the English word for the current card, 18 00:01:04,050 --> 00:01:08,550 and also going to change the image from the card_front to 19 00:01:08,550 --> 00:01:12,930 the card_back, and also we're going to change the color of the text as well. 20 00:01:13,620 --> 00:01:14,790 In our flip card, 21 00:01:14,820 --> 00:01:19,350 we're going to get hold of the canvas and we're going to first item.config 22 00:01:19,380 --> 00:01:24,270 the card_ title. So we're going to change the card_title to, 23 00:01:24,270 --> 00:01:26,790 instead of saying French, we're going to say, well, 24 00:01:26,790 --> 00:01:29,340 this is now the English translation, 25 00:01:30,030 --> 00:01:33,180 and then we're going to config the card word, 26 00:01:33,750 --> 00:01:36,960 and this is going to be still from the current card, 27 00:01:37,260 --> 00:01:40,770 but we want to get ahold of the value under the key English instead. 28 00:01:41,400 --> 00:01:46,320 Now at the moment, this current card is locked up inside next_card. 29 00:01:46,590 --> 00:01:51,590 So we can't actually get hold of it without creating a new random choice. 30 00:01:52,650 --> 00:01:56,340 So what we can do is we can create our current card 31 00:01:58,680 --> 00:02:01,680 and we can set it to a empty dictionary. 32 00:02:02,280 --> 00:02:07,280 And then we can change this to a global and tap into that current card to modify 33 00:02:08,880 --> 00:02:13,880 it and save this random choice from our list of French and English pairs. 34 00:02:15,720 --> 00:02:17,760 So once we've got that inside there, 35 00:02:17,760 --> 00:02:22,500 then we can tap into it inside flip_card and we can say current card 36 00:02:22,710 --> 00:02:26,370 get hold of the value under the English key. 37 00:02:27,270 --> 00:02:32,220 And that way we update both of our texts. So right now if I hit run, 38 00:02:32,250 --> 00:02:35,310 you can see that immediately after three seconds 39 00:02:35,640 --> 00:02:40,110 we switched to the opposite side and we have our English and the English 40 00:02:40,140 --> 00:02:44,970 equivalent of the same word showing up. So for example, 41 00:02:44,970 --> 00:02:47,940 in French matin, in English means morning. 42 00:02:48,120 --> 00:02:51,900 So that's how we can verify that we actually know the meaning of the card. 43 00:02:52,710 --> 00:02:57,450 In addition to changing the words, I'm also going to change the image. 44 00:02:57,750 --> 00:03:01,000 So notice how we saved the words with a variable. 45 00:03:01,240 --> 00:03:04,330 We can do the same thing for this create image method. 46 00:03:04,810 --> 00:03:09,810 We can say the card_background is equal to canvas create image. 47 00:03:10,390 --> 00:03:14,140 And in addition to creating the card front image, 48 00:03:14,350 --> 00:03:17,170 we can also create the card back image. 49 00:03:17,800 --> 00:03:20,350 Now, you have to be really careful here 50 00:03:20,380 --> 00:03:23,440 because if you create this card back image 51 00:03:23,740 --> 00:03:27,310 which is a photo image created from file, 52 00:03:27,730 --> 00:03:31,960 if you create it inside one of these functions, by the end of the function 53 00:03:31,960 --> 00:03:35,680 call, that reference to that particular image will be gone. 54 00:03:35,980 --> 00:03:40,980 And it won't work if you create this photo image inside flipcard and try to set 55 00:03:41,380 --> 00:03:45,940 it inside this method. So you have to create it outside of any of the functions. 56 00:03:46,630 --> 00:03:51,630 So let's change the file to images/card_back.png 57 00:03:53,830 --> 00:03:58,300 and now we're going to get our canvas to again, 58 00:03:58,300 --> 00:03:59,890 call itemconfig. 59 00:04:00,400 --> 00:04:03,310 And this time we're configuring the card_background. 60 00:04:04,000 --> 00:04:08,350 And the attribute that we want to configure is the image property. 61 00:04:08,860 --> 00:04:12,670 So we're going to change that to the card_back_img 62 00:04:12,700 --> 00:04:14,770 which we created right here. 63 00:04:15,910 --> 00:04:17,769 So now let's just check that again. 64 00:04:18,250 --> 00:04:21,490 Let's wait three seconds and then it's changed to 65 00:04:21,519 --> 00:04:24,370 the back of the card. On the back of the card 66 00:04:24,400 --> 00:04:28,840 we want these two pieces of text to actually have a different color. 67 00:04:28,870 --> 00:04:32,380 We want it to be white, just so that it stands out from the background. 68 00:04:33,040 --> 00:04:37,000 And to do that, we can add it along with our item config. 69 00:04:37,300 --> 00:04:39,100 Not only are we changing the text, 70 00:04:39,370 --> 00:04:43,090 but also changing the fill of the text to white. 71 00:04:44,310 --> 00:04:45,143 Okay. 72 00:04:47,550 --> 00:04:50,670 And now when our card flips over, 73 00:04:50,940 --> 00:04:54,390 you can see its a green card with a white text. 74 00:04:55,770 --> 00:04:56,100 Now, 75 00:04:56,100 --> 00:05:01,100 one of the things we have to do is every time we click on one of these buttons, 76 00:05:01,980 --> 00:05:05,040 it has the flip back to the front of the card, right? 77 00:05:05,040 --> 00:05:09,330 That means changing the text color and changing that background image. 78 00:05:09,840 --> 00:05:13,200 So that happens when we go to next card. 79 00:05:13,680 --> 00:05:17,730 So in addition to configuring the text and the words, 80 00:05:18,000 --> 00:05:23,000 we also again have to itemconfig the card_background so that we can change the 81 00:05:23,400 --> 00:05:28,170 image back to the card front image. 82 00:05:28,890 --> 00:05:33,540 In addition, we have to change these text colors to have a different fill, 83 00:05:33,780 --> 00:05:36,360 so we're going to change it back to black. 84 00:05:39,450 --> 00:05:39,750 Right. 85 00:05:39,750 --> 00:05:43,650 This way, when the card flips, it goes to green, 86 00:05:43,980 --> 00:05:47,040 white on green. And then when we go to the front of the card, 87 00:05:47,130 --> 00:05:49,200 it goes to black on white. 88 00:05:50,670 --> 00:05:53,490 Now notice how once we go to the next card, 89 00:05:53,790 --> 00:05:58,790 that card flipping mechanism has gone because we only ever call this window 90 00:05:59,150 --> 00:06:01,700 after the first time we create the window. 91 00:06:02,270 --> 00:06:05,900 So we actually need this to happen a few times. In fact, 92 00:06:05,900 --> 00:06:09,590 we need it to happen every single time we go to the next card. 93 00:06:10,070 --> 00:06:12,950 So after we've configured all the things on our card, 94 00:06:13,010 --> 00:06:16,760 we're gonna call a window.after, three seconds, flipcard. 95 00:06:17,240 --> 00:06:21,710 So this way, even if we go to the next card and we wait three seconds, 96 00:06:21,830 --> 00:06:23,990 it again goes to the back. 97 00:06:24,950 --> 00:06:29,570 Now one of the bugs you might have encountered is if you clicked this button 98 00:06:29,600 --> 00:06:33,440 many times and you go through lots of different words, 99 00:06:33,740 --> 00:06:37,130 you see immediately, that card actually flipped. 100 00:06:37,700 --> 00:06:41,690 And it's because that window.after three seconds is counting down in the 101 00:06:41,690 --> 00:06:45,350 background, waiting, waiting, waiting until three seconds 102 00:06:45,590 --> 00:06:47,300 at which point it's going to flip the card. 103 00:06:47,690 --> 00:06:52,310 It doesn't care that you've actually just gone onto a new card and you want to 104 00:06:52,310 --> 00:06:56,900 wait again, three seconds. In order to get this to work, 105 00:06:57,080 --> 00:07:02,080 we actually have to give this line of code a variable so that we'll call it the 106 00:07:02,720 --> 00:07:06,710 flip_timer. And this is now a global 107 00:07:06,890 --> 00:07:11,890 which we can tap into and we can add it after a comma over here, 108 00:07:13,430 --> 00:07:15,890 flip_timer. Alternatively, 109 00:07:15,890 --> 00:07:19,730 you can also go onto a new line and say global flip_timer. 110 00:07:20,060 --> 00:07:23,450 It doesn't really make a difference other than the fact that this probably takes 111 00:07:23,690 --> 00:07:27,920 less lines of code. Now, once we've got access to our flip_timer, 112 00:07:28,190 --> 00:07:31,580 we can say that every time we go to a new card, 113 00:07:32,180 --> 00:07:36,350 when we click on one of these buttons, we're going to invalidate this timer. 114 00:07:36,890 --> 00:07:39,140 So we can say window.after_ 115 00:07:39,170 --> 00:07:43,550 cancel and then pass in the ID of our flip_timer. 116 00:07:44,300 --> 00:07:46,670 And then after we've set up this card, 117 00:07:46,760 --> 00:07:51,760 we can set up a new flip_timer so that it waits for again three seconds. 118 00:07:53,270 --> 00:07:57,260 And now once I've added that bit of code, it should fix this bug. 119 00:07:57,650 --> 00:08:02,650 So now whenever I keep going or I press the check or the crossmark, 120 00:08:03,170 --> 00:08:04,040 it doesn't really matter. 121 00:08:04,040 --> 00:08:09,040 It's not going to flip until I land on a card and wait for three seconds 122 00:08:09,620 --> 00:08:13,760 before it flips. There you have it. We've got our card 123 00:08:13,790 --> 00:08:16,940 flipping technology added to our code. 124 00:08:17,660 --> 00:08:22,430 Now all that's left is to get rid of the cards that the user says 125 00:08:22,430 --> 00:08:23,263 they know 126 00:08:23,570 --> 00:08:28,570 and to create a new CSV that is going to hold all the cards from this to_learn 127 00:08:30,440 --> 00:08:34,700 dictionary and to remove the cards that the user says they know. 128 00:08:35,240 --> 00:08:38,480 And then that way, the next time we run our app 129 00:08:38,720 --> 00:08:43,610 it will remember which words we've learned and which words we haven't so that we 130 00:08:43,610 --> 00:08:47,120 can load up only the words we have yet to learn. 131 00:08:47,870 --> 00:08:52,370 So for that, head over to the next lesson where we've got the final step of the 132 00:08:52,370 --> 00:08:53,510 flashcard project.