Now that we've created the UI,
the next step or step 2 was to try and get the buttons to start working so
that when we press the cross or the tick button,
we get a new French word being shown in the middle here,
and the title switches to the word of French. So how do we do this?
Well, firstly, for both of these buttons
the unknown and the known button,
we're going to add a command. And remember the command links to a particular
function that is going to be called.
So we'll call that next_card and we'll add that to both the known and the
unknown buttons.
Now that we've got next_card added here,
now let's go ahead and create this function next_card.
What exactly is this function going to do? Well,
it's going to take the words from the french_words.csv
and it's going to get hold of some of these words and their translations.
So it basically,
you can imagine these as single rows that we want to get hold of.
Now, what we need to do first though
is we need to use pandas in order to read from that CSV.
So we're going to first import pandas and it should already be installed in
your project. If not, you'll see a red light bulb
and then you can just click on it and then install that module.
Once we've got pandas enabled though,
we're going to use panders to read from a CSV and the CSV is our french_words.csv
from the data folder.
Now we're going to set this as equal to the data.
So this is now going to be a data frame. And in fact,
if I go ahead and print it
1: now
0: you can see that pandas will nicely format our table with the column headings
and also record numbers
and each of these rows are basically the pieces of data that we're interested
in. Now that we've got a data frame,
we can convert that data frame into a dictionary.
Let's go ahead and create a dictionary which we'll call out to_learn,
so that's the word that we need to learn,
and this is going to be a dictionary that's created from this data
from this french_words.csv. But notice how at the moment,
if we just use the default method of creating a dictionary,
what our to_learn is going to look like is like this.
We've got French and then inside
we've got all of the French words and then we've got a key later on called
English and all of the corresponding English words.
Now, that's what we want. Instead, we want to change one of the parameters
which is orient,
so how do we want to orient the table to create this dictionary? Now in the hints
for step 2, I already showed you that you could use this
orient set to records and this way it'll give you each column's values as a
list. Let me show you what that looks like.
So let's change this parameter orient,
and we'll set it to equal the string records.
Remember that there's an 's' at the end.
And now we can compare the previous version of the dictionary
that's generated from the data to the new version.
So let me run the code again and you can see now we've basically got a list of
dictionaries and each dictionary has a key, French,
the French word, a key English,
and then the English word and so on and so forth. This is really,
really useful for us because we can basically pick a random entry from this list
and we'll be able to tap into the French value and the English value later on
when we flip our cards. That is our to_learn dictionary done.
So when the next_card function gets called,
then we're going to need to pick out some data from this dictionary and the way
that we're gonna pick it out is randomly.
So we're going to import the random module and we're going to use random.
choice in order to pick out a random item from this list of words to learn.
And once we've got a random choice which we'll call current_card,
then we can get hold of the data from this current_card by saying current_card
[French]. Remember that in this french_words.csv
we've got a capital F and a capital E.
So our keys must match that exactly.
So let's go ahead and print this
and you can see now that when I press on one of these buttons,
either the cross or the tick,
it's going to pick out a random French word from my list of words in this
french_words.csv. So now instead of printing it,
let's go ahead and put it into these pieces of text on our canvas.
In order to do that,
I'm going to create a variable called card_title to hold on to the title and
the card_word to hold on to the word text.
And now I can go ahead and tap into my canvas and say
itemconfig and the item that we want to configure is firstly
our card_title
and the thing we want to configure about it is to change the text to say French.
So that's the title remember, which is the part that's up here.
And then we're going to do the same thing using canvas.itemconfig
but this time we're going to configure the card_word,
and this is going to be set to exactly what we printed before,
which is the random card that was picked out and the value under the key French.
So now when I hit run again,
you can see that when I press either of these buttons,
I'm going to get a random French word showing up right here.
But notice how when I first run the app
you can see that it still has the placeholder title and word showing up.
Instead, we want it to show the next card.
So we have to call this function once we've created all of our UI
but before we get to our main loop.
So we'll call our next card. And this way,
once we've created all of our images and everything else,
then we can generate the next card,
get the data and put it into the card title and card word. So in fact,
if you want to,
you can actually delete these two pieces of text because they won't actually do
anything at the moment. And now as soon as we hit run,
you can see the first thing we see is already a French word
and it will keep going through all of the words that we have in our CSV.
There you have it. We've now managed to read from the CSV,
get a dictionary of all the records in the CSV and to randomly get the French
word showing up in our flashcard. Our flashcard currently,
doesn't actually flash. It doesn't change, right?
We need a way for us to be able to set some sort of a timer,
say a 3-second timer,
and then for our card to show us the opposite side or the backside and to show
us the English translation of the words.
That is what we're going to tackle on the next lesson.
So head over to step 3 and have a read of the instructions.