Spanish to English learning flash card app¶

This is a simple app to help anyone learn Spanish. It is a simple flash card app that shows a Spanish word and the user has to guess the English translation.

Features¶

The app has a simple UI with a button to show the answer and a button to note down if the user got the answer right or wrong.
The app has a simple database that stores the words and their translations.
The correctly answered words are removed from the database and the incorrectly answered words are added back to the database.

How to use¶

The app is simple to use. Just run the app and click on the button to show the answer.
Then click on the button to note down if the user got the answer right or wrong.
The app will then show the next word and the process repeats.
Clink on spain logo or UK logo to see spanish and english meanings respectively.

How to install¶

The app is a simple python script that can be run on any system with python installed.
The app uses the tkinter module for the UI and the pandas module for the csv database.
The csv database is included in the repository and can be edited to add more words.

In [2]:

from tkinter import *
import pandas
import random

# Set the background color for the flashcards
BACKGROUND_COLOR = "#08cf96"

# Initialize the current flashcard and the list of flashcards to learn
current_flashcard = {}
flashcards_to_learn = {}

# Load the flashcards from a CSV file
flashcard_data = pandas.read_csv("data/words_to_learn.csv")
flashcards_to_learn = flashcard_data.to_dict(orient="records")

# Function to display the next flashcard
def display_next_flashcard():
    global current_flashcard, flip_timer
    window.after_cancel(flip_timer)
    current_flashcard = random.choice(flashcards_to_learn)
    canvas.itemconfig(flashcard_title, text="Spanish", fill="black")
    canvas.itemconfig(flashcard_word, text=current_flashcard["Spanish"], fill="black")
    canvas.itemconfig(flashcard_background, image=flashcard_front_img)
    flip_timer = window.after(3000, func=flip_flashcard)

# Function to flip the flashcard to the English side
def flip_flashcard():
    canvas.itemconfig(flashcard_title, text="English", fill="white")
    canvas.itemconfig(flashcard_word, text=current_flashcard["English"], fill="white")
    canvas.itemconfig(flashcard_background, image=flashcard_back_img)

# Function to flip the flashcard back to the Spanish side
def reverse_flashcard():
    canvas.itemconfig(flashcard_title, text="Spanish", fill="black")
    canvas.itemconfig(flashcard_word, text=current_flashcard["Spanish"], fill="black")
    canvas.itemconfig(flashcard_background, image=flashcard_front_img)

# Function to mark the current flashcard as known and remove it from the list of flashcards to learn
def mark_flashcard_as_known():
    flashcards_to_learn.remove(current_flashcard)
    print(len(flashcards_to_learn))
    flashcard_data = pandas.DataFrame(flashcards_to_learn)
    flashcard_data.to_csv("data/words_to_learn.csv", index=False)
    display_next_flashcard()

# Create the main window
window = Tk()
window.title("My Flashcards")
window.config(padx=50, pady=50, bg=BACKGROUND_COLOR)

# Set a timer to automatically flip the flashcard after 3 seconds
flip_timer = window.after(3000, func=flip_flashcard)

# Create the canvas to display the flashcards
canvas = Canvas(width=800, height=526)
flashcard_front_img = PhotoImage(file="images/card_front.png")
flashcard_back_img = PhotoImage(file="images/card_back.png")
flashcard_background = canvas.create_image(400, 263, image=flashcard_front_img)
flashcard_title = canvas.create_text(400, 150, text="", font=("Ariel", 40, "italic"))
flashcard_word = canvas.create_text(400, 263, text="", font=("Ariel", 60, "bold"))
canvas.config(bg=BACKGROUND_COLOR, highlightthickness=0)
canvas.grid(row=0, column=0, columnspan=2)

# Create the buttons to control the flashcards
wrong_image = PhotoImage(file="images/wrong.png")
unknown_flashcard_button = Button(image=wrong_image, highlightthickness=0, command=display_next_flashcard)
unknown_flashcard_button.grid(row=1, column=0,  padx=20, pady=20)

right_image = PhotoImage(file="images/right.png")
known_flashcard_button = Button(image=right_image, highlightthickness=0, command=mark_flashcard_as_known)
known_flashcard_button.grid(row=1, column=1)

flip_image = PhotoImage(file="images/spanish.png")
flip_flashcard_button = Button(image=flip_image, highlightthickness=0, command=reverse_flashcard)
flip_flashcard_button.grid(row=2, column=0)

reverse_image = PhotoImage(file="images/english.png")
reverse_flashcard_button = Button(image=reverse_image, highlightthickness=0, command=flip_flashcard)
reverse_flashcard_button.grid(row=2, column=1)

# Start the application by displaying the first flashcard
display_next_flashcard()

# Start the main event loop for the application
window.mainloop()