6 Easy steps to make a Flashcard GUI App to learn French in Python

Ayush Dixit
Nov 28, 2021 · 4 min read

We have all been there. Learning a foreign language can be a daunting task. Thankfully, we have python to our rescue. I created a Flashcard GUI app which helps in remembering the difficult words and can be referenced to retain them longer. Another great project idea by Dr. Angela Yu.

In the UI setup a french word is flashed on a card, the user can then look at the french word for three seconds and then the card flips containing the corresponding english word.

Flashcards serve as a great tool for testing and improving memory through practiced information retreival. Also the most commonly go to tool for those who want to upgrade/enhance their vocabulary or learn a new language altogether.

Steps to build the Flashcard GUI

  1. Importing the pandas, random and Tkinter library
  2. Importing the french to english words database
  3. Defining global constants
  4. Setting up the UI
  5. Framing the next card and flip card logic
  6. Generating a french word and Exception Handling

Step 1 : Importing the pandas, random and math library

import pandas
BACKGROUND_COLOR = "#B1B2DD" #To set the background colour
import random
from tkinter import *
import pandas as pd

Step 2 : Importing the french to english words database

The database can be found online nevertheless i have included it in my repo. You can find it here.

Step 3 : Defining global constants

to_learn = {}
current_card = {}

We define two global constants “to_learn” which would contain the french words data repository.

Another would be current_card which would contain the curent card in the flashcard GUI.

Step 4 : Setting up the UI

window = Tk()
window.title("Flashcard App")
window.config(padx=50, pady=50, bg=BACKGROUND_COLOR)
flip_timer = window.after(3000, func=flip_card) # 3000 milliseocnds = 3 seconds

canvas = Canvas(width=800, height=526)
card_front_img = PhotoImage(file="./images/card_front.png")
card_back_img = PhotoImage(file="./images/card_back.png")
card_background = canvas.create_image(400, 263, image=card_front_img)
card_title = canvas.create_text(400, 150, text="Title", font=("Ariel", 40, "italic"))
# Positions are related to canvas so 400 will be halfway in width
canvas.config(bg=BACKGROUND_COLOR, highlightthickness=0)
card_word = canvas.create_text(400, 263, text="Word", font=("Ariel", 60, "bold"), tags="word")
# canvas should go in the middle
canvas.grid(row=0, column=0, columnspan=2)

cross_image = PhotoImage(file="./images/wrong.png")
unknown_button = Button(image=cross_image, command = next_card)
unknown_button.grid(row=1, column=0, sticky="W")

check_image = PhotoImage(file="./images/right.png")
known_button = Button(image=check_image, command=is_known)
known_button.grid(row=1, column=1, sticky="E")


The UI setup is already covered in my other pomodoro GUI app project. WHhich you can find here. The user can change the canvas dimensions and the colours or including other images for the right and wrong signage. User clicks the right or wrong button when he is finished with the word or when he already knows the englsh translation of the french word.

We will define the two functions “next_card” and “is_known” later.

Step 5 : Framing next card and flipping card logic

def next_card():
global current_card, flip_timer
current_card = random.choice(to_learn)
# french_word = random_pair['French']
canvas.itemconfig(card_title, text="French", fill="black")
canvas.itemconfig(card_word, text=current_card["French"], fill="black")
canvas.itemconfig(card_background, image=card_front_img)
flip_timer = window.after(3000, func=flip_card)

def flip_card():
canvas.itemconfig(card_title, text = "English", fill = "white")
canvas.itemconfig(card_word, text=current_card["English"], fill = "white")
canvas.itemconfig(card_background, image=card_back_img)

def is_known():
data = pd.DataFrame(to_learn)
data.to_csv("data/words_to_learn.csv", index=False)
# index = false discrads the index numbers

We define three functions next_card(), flip_card() and is_known(). next_card is called when the user clicks the button.

We define the flip timer which determines the timing of the flipping of the flashcards and after_cancel method which takes in the flip_card function and sets in the timer of 3 seconds(3000 milli seconds).

The flip_card() method flips the card to the english translation of the french word. Notice that the fill colour has been changed to mark the difference between the two cards.

Finally, we have the is_known() function which removes the already learned card by the suser and creates a database of the learned cards. (words_to_learn.csv)

Alternate method using iterrows

data = pd.read_csv("./data/french_words.csv")
word_dict = {row.French:row.English for (index, row) in df.iterrows()}
#word_dict = df.to_dict(orient="records")

Step 6: Generating a french word and Exception Handling

try: # try running this line of code
data = pandas.read_csv("data/words_to_learn.csv")
except FileNotFoundError:
# If for the first time we are running it
# the words_to_learn.csv file might not be present
# and FileNotFoundError might pop up
original_data = pandas.read_csv("data/french_words.csv")
to_learn = original_data.to_dict(orient="records")
to_learn = data.to_dict(orient="records")
# data = pd.read_csv("./data/words_to_learn.csv")
# word_dict = {row.French:row.English for (index, row) in df.iterrows()}
# spits out a list of dictionaries containing french word and english translation
# print(word_dict)

Since, we are making changes to words_to_learn.csv. In the first run this file wont’ exist so we catch this error by first trying to read the words_to_learn.csv.

try: # try running this line of code
data = pandas.read_csv("data/words_to_learn.csv")

In case of exception which would be FileNotFoundError that is in the first run, we would read the original data that is french_words.csv.

Also, don’t forget to give, at the end of the code to stop the canvas from disappearing .

mainloop() tells Python to run the Tkinter event loop. This method listens for events, such as button clicks or keypresses, and blocks any code that comes after it from running until the window it’s called on is closed. Go ahead and close the window you’ve created, and you’ll see a new prompt displayed in the shell.:


You can find the complete code here.

Did you like my efforts? If Yes, please follow me to get my latest posts and updates or better still buy me a coffee!

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Ayush Dixit

Written by

Hi, I’m a postgraduate from IIT-Indore(M.Tech). Specialization in Comm. Signal Processing and Machine Learning/AI. Presently working as an Engineer in Qualcomm.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.