Now that we've got our words showing up in French,
it's time to see the other side of the card and see the English equivalent so
that we can check our knowledge. To do this
we're going to have to implement some sort of way of changing this card after a
set amount of time. So we're going to flip the card
after three seconds are up. To do that
we're going to use the window.after method.
Right after here where we've created a window,
we're going to say window.after.
And then we can specify the amount of time in milliseconds.
So I'm going to say three seconds or 3000 milliseconds.
And then the function that we're going to call is a function
that's going to be called flip_card. And if we want that to work,
then we're going to have to create it. So I'm going to create right here,
just above.
So I'll call it flip_card and this function is going to take care of changing the
card to show the English word for the current card,
and also going to change the image from the card_front to
the card_back, and also we're going to change the color of the text as well.
In our flip card,
we're going to get hold of the canvas and we're going to first item.config
the card_ title. So we're going to change the card_title to,
instead of saying French, we're going to say, well,
this is now the English translation,
and then we're going to config the card word,
and this is going to be still from the current card,
but we want to get ahold of the value under the key English instead.
Now at the moment, this current card is locked up inside next_card.
So we can't actually get hold of it without creating a new random choice.
So what we can do is we can create our current card
and we can set it to a empty dictionary.
And then we can change this to a global and tap into that current card to modify
it and save this random choice from our list of French and English pairs.
So once we've got that inside there,
then we can tap into it inside flip_card and we can say current card
get hold of the value under the English key.
And that way we update both of our texts. So right now if I hit run,
you can see that immediately after three seconds
we switched to the opposite side and we have our English and the English
equivalent of the same word showing up. So for example,
in French matin, in English means morning.
So that's how we can verify that we actually know the meaning of the card.
In addition to changing the words, I'm also going to change the image.
So notice how we saved the words with a variable.
We can do the same thing for this create image method.
We can say the card_background is equal to canvas create image.
And in addition to creating the card front image,
we can also create the card back image.
Now, you have to be really careful here
because if you create this card back image
which is a photo image created from file,
if you create it inside one of these functions, by the end of the function
call, that reference to that particular image will be gone.
And it won't work if you create this photo image inside flipcard and try to set
it inside this method. So you have to create it outside of any of the functions.
So let's change the file to images/card_back.png
and now we're going to get our canvas to again,
call itemconfig.
And this time we're configuring the card_background.
And the attribute that we want to configure is the image property.
So we're going to change that to the card_back_img
which we created right here.
So now let's just check that again.
Let's wait three seconds and then it's changed to
the back of the card. On the back of the card
we want these two pieces of text to actually have a different color.
We want it to be white, just so that it stands out from the background.
And to do that, we can add it along with our item config.
Not only are we changing the text,
but also changing the fill of the text to white.
Okay.
0: And now when our card flips over,
you can see its a green card with a white text.
Now,
one of the things we have to do is every time we click on one of these buttons,
it has the flip back to the front of the card, right?
That means changing the text color and changing that background image.
So that happens when we go to next card.
So in addition to configuring the text and the words,
we also again have to itemconfig the card_background so that we can change the
image back to the card front image.
In addition, we have to change these text colors to have a different fill,
so we're going to change it back to black.
Right.
0: This way, when the card flips, it goes to green,
white on green. And then when we go to the front of the card,
it goes to black on white.
Now notice how once we go to the next card,
that card flipping mechanism has gone because we only ever call this window
after the first time we create the window.
So we actually need this to happen a few times. In fact,
we need it to happen every single time we go to the next card.
So after we've configured all the things on our card,
we're gonna call a window.after, three seconds, flipcard.
So this way, even if we go to the next card and we wait three seconds,
it again goes to the back.
Now one of the bugs you might have encountered is if you clicked this button
many times and you go through lots of different words,
you see immediately, that card actually flipped.
And it's because that window.after three seconds is counting down in the
background, waiting, waiting, waiting until three seconds
at which point it's going to flip the card.
It doesn't care that you've actually just gone onto a new card and you want to
wait again, three seconds. In order to get this to work,
we actually have to give this line of code a variable so that we'll call it the
flip_timer. And this is now a global
which we can tap into and we can add it after a comma over here,
flip_timer. Alternatively,
you can also go onto a new line and say global flip_timer.
It doesn't really make a difference other than the fact that this probably takes
less lines of code. Now, once we've got access to our flip_timer,
we can say that every time we go to a new card,
when we click on one of these buttons, we're going to invalidate this timer.
So we can say window.after_
cancel and then pass in the ID of our flip_timer.
And then after we've set up this card,
we can set up a new flip_timer so that it waits for again three seconds.
And now once I've added that bit of code, it should fix this bug.
So now whenever I keep going or I press the check or the crossmark,
it doesn't really matter.
It's not going to flip until I land on a card and wait for three seconds
before it flips. There you have it. We've got our card
flipping technology added to our code.
Now all that's left is to get rid of the cards that the user says
they know
and to create a new CSV that is going to hold all the cards from this to_learn
dictionary and to remove the cards that the user says they know.
And then that way, the next time we run our app
it will remember which words we've learned and which words we haven't so that we
can load up only the words we have yet to learn.
So for that, head over to the next lesson where we've got the final step of the
flashcard project.