This is a hands-on tutorial, which will help you form your early GUI projects. It's meant for anyone who wants to start building visual projects in Python.

The Tkinter library is a standard built-in Python library which helps us make Graphical User Interfaces in Python. Since it's a built-in library, we don't have to separately install it. So, once you have Python installed on your computer, you just have to set it up and you're good to follow along here.

But keep in mind that Tkinter may not be installed with your Python from the distributor end. To check if it's installed or not, open your command prompt and type:

python -m tkinter

This will open up a Tkinter specimen window if Tkinter is installed and working on your computer.

Table of Contents

• Prerequisites

• What Do We Want to See in Our Project?

• How to Set Up the Window

• How to Name the Window

• How to Create Frames in the Window

• How to Add Buttons to the Window

• How to Add the Output Screen of the Calculator

• How to Make the Numbers Visible on the Output Screen

• How to Add a Scrollbar to the Output Screen

• How to Add the Equal To Button

• How to Add the AC Button

• Wrapping Up

Prerequisites

Before starting, here are some prerequisites for this tutorial which will help you get the most out of it:

• Basic Python Syntax

• Understanding of how to import and use libraries and its different functions

• Understanding of how to use different attributes of the module

Now that we know what we need to proceed in this tutorial, let's actually dive-in the process!

The first step for building any project is to create a clear-cut idea of what you want to build. Let's look at what we're going to make.

What Do We Want to See in Our Project?

We're going to build a simple arithmetic calculator. The calculator works as follows:

• It has all the numerals (0, 1, 2, ...., 9) in a keyboard.

• It has basic arithmetic (+, -, /, *, =) operators lining the keyboard.

• The calculator is non-resizable, that is the user can't extend the width or the height of the application window.

• The calculator has a screen above the keyboard which shows the user input and the final answer.

• Finally, the calculator has an 'AC' button which stands for 'All Clear' which erases everything on the output screen of the window and allows the user to use it again.

With this, we have a clear idea about what we're going to build.

Also, you can create the UI beforehand and place the widgets accordingly on the window. Here's an image of the UI we'll create in this tutorial:

How to Set Up the Window

To set up our main window where we'll later add our widgets, first we need to import the Tkinter library into our program. Then we'll initialize the window using the tk.Tk() function. To display the window on the screen continuously until we quit manually, we'll use the mainloop() function. Here's what the code looks like:

import tkinter as tk

# screen initialization
root = tk.Tk()

# This keeps the window active
root.mainloop()

Theroot variable represents our window. So, from now on, we'll be adding the widgets to this window.

When a user hits "Run", you'll see a blank window on your screen as shown in the image below. Congrats! This is your first GUI.

How to Name the Window

The 'tk' written on the Title Bar is the default title of the window. To set our own window title, we can use the title() function. The following code shows how you can do that:

import tkinter as tk

root = tk.Tk()

# Naming the window
root.title("Calculator")

root.mainloop()

On executing the program, we get the following window:

Now you should be able to see that the title of the window changed successfully.

How to Create Frames in the Window

After setting up the window, now we have to place the buttons on it. For placing the buttons, we need to create a container in which we'll put them.

The container could be the main window, but we'll avoid that for this project. This is because we want to place some buttons to the side of and below others to create our keyboard. To make it easier, we'll create Frame containers.

A Frame container represents a vertical column of the window. The initial dimension of the frame is 0 x 0. The frame resizes accordingly when we place a widget in it.

We'll create four frames in our window. The first frame will contain the buttons 1, 4, 7, and AC. The second frame will contain the buttons 2, 5, 8, and 0, the third frame will contain the buttons 3, 6, 9, and =, and the last frame will contain the buttons +, -, x, and / (just like in the UI shown above).

We can create frames in Tkinter using tk.Frame(). We'll pass the parent container for the Frame – that is, the main window in its argument. The following code should make it clear:

import tkinter as tk

# screen initialization
root = tk.Tk()

# Naming the window
root.title("Calculator")

# Creating Frames
frame1 = tk.Frame(root)
frame1.pack(side='left', anchor='n')
frame2 = tk.Frame(root)
frame2.pack(side='left', anchor='n')
frame3 = tk.Frame(root)
frame3.pack(side='left', anchor='n')
frame4 = tk.Frame(root)
frame4.pack(side='left', anchor='n')

# This keeps the window active
root.mainloop()

The pack() function embeds the Frame geometrically on the window. The side='left' parameter embeds the Frames to the extreme left of the screen. By default, this is set to the center. anchor='n' tells us that the widgets should be placed starting from the very top of the frame. By default, the widgets start adding from the center of the Frame. The 'n' in the anchor='n' stands for 'North'.

An important thing to note is that, since we defined frame1 early in the program, it will occupy the extreme left portion of the window. But even though frame2 is also set to occupy extreme left, the two frames frame1 and frame2 won't overlap. Instead frame2 will take a position so that it goes as far left as it can go on the window without overlapping frame1. So frames frame1, frame2, frame3 and frame4 are side by side on the left side of the window.

How to Add Buttons to the Window

We can create a button widget in Tkinter by using the tk.Button() function. The tk.Button() function consists of various parameters:

• master: This allows us to provide the parent container in which we have to place our button. This expects a container object.

• text: In this parameter, we have to pass the text which we want to display on our button. This expects a string.

• font: This expects a tuple with the first element providing the name of the font and the next element providing the font size.

• image: This allows us to put an image over our button.

• bg: This allows us to set the background colour for our button.

• fg: This allows us to set the foreground colour for our button.

• activebackground: When the button is clicked, the colour passed in this parameter becomes visible.

• command: This allows us to link a command to the button.

Now that we know the basics of creating a button, lets actually create the keyboard of our calculator.

To create the keyboard, we have to put quite a few buttons on the window. To make our work easier, we'll define a function to create our buttons, just with different text. Let's look at the code below:

import tkinter as tk

# screen initialization
root = tk.Tk()

# Naming the window
root.title("Calculator")

frame1 = tk.Frame(root)
frame1.pack(side='left', anchor='n')
frame2 = tk.Frame(root)
frame2.pack(side='left', anchor='n')
frame3 = tk.Frame(root)
frame3.pack(side='left', anchor='n')
frame4 = tk.Frame(root)
frame4.pack(side='left', anchor='n')

pixel = tk.PhotoImage(width=55, height=55)

def buttons(text, frame):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg="#333300", fg="white", compound="center")
    return button


def buttons_ops(text, frame, bg, fg):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg=bg, fg=fg, activebackground="black",
                        compound="center")
    return button

btn1 = buttons('1',frame1).pack()
btn4 = buttons('4', frame1).pack()
btn7 = buttons('7', frame1).pack()

btn2 = buttons('2', frame2).pack()
btn5 = buttons('5', frame2).pack()
btn8 = buttons('8', frame2).pack()
btn0 = buttons_ops('0', frame2, '#333300', 'white').pack()

plus = buttons_ops('+', frame4, 'black', 'white').pack()
minus= buttons_ops('-', frame4,  'black', 'white').pack()
mul = buttons_ops('x', frame4, 'black', 'white').pack()
div = buttons_ops('/', frame4, 'black', 'white').pack()

btn3 = buttons('3', frame3).pack()
btn6 = buttons('6', frame3).pack()
btn9 = buttons('9', frame3).pack()

# This keeps the window active
root.mainloop()

Now let's break it down:

First, we created an Tkinter image object via tk.PhotoImage(). This is a transparent image. The purpose behind creating this image is to set a perfect width and height of the button pixel-wise. The compound='center' ensures that the button text is aligned at the center of the transparent image.

You can change the size of the button by changing the width and height parameters of the pixel object.

Secondly, we created a function which takes the 'text' and the 'container frame' as the argument. Inside the function, we created a button object and returned it. For the numerical buttons, we've created the function buttons whereas for operator buttons, we've created the function buttons_ops. This was done only to ensure different style of buttons (in terms of background and foreground, and so on).

You can change the colours of the buttons by making changes in the bg and fg parameters of the tk.Button() function.

Then we created all the buttons with these two functions. The pack() function puts the buttons in their respective places. Remember that we haven't created the = and AC buttons.

When we execute the program, the following window will pop up:

You can try clicking the buttons to make sure that everything is working great up to this point.

How to Add the Output Screen of the Calculator

For the output screen of the calculator, we'll be using the Entry object in Tkinter. The Entry object will be the best match in this case because we want a single line screen to showcase the user input. We could also use a Text object, but it provides a multiline area. So here, we'll just be using the Entry object.

Also, since we want the output screen to be on the top of the keyboard, we need to define and embed this object before embedding the frames.

The Entry object is created using the tk.Entry() function. This has similar parameters to the tk.Button() function. The following code creates an entry box:

import tkinter as tk

# screen initialization
root = tk.Tk()

# Naming the window
root.title("Calculator")

# creating the output screen
entry = tk.Entry(root, width=9, font=('Arial', 38, 'bold'), state='readonly')
entry.pack(pady=(30, 10))


frame1 = tk.Frame(root)
frame1.pack(side='left', anchor='n')
frame2 = tk.Frame(root)
frame2.pack(side='left', anchor='n')
frame3 = tk.Frame(root)
frame3.pack(side='left', anchor='n')
frame4 = tk.Frame(root)
frame4.pack(side='left', anchor='n')

pixel = tk.PhotoImage(width=55, height=55)

def buttons(text, frame):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg="#333300", fg="white", compound="center")
    return button


def buttons_ops(text, frame, bg, fg):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg=bg, fg=fg, activebackground="black",
                        compound="center")
    return button

btn1 = buttons('1',frame1).pack()
btn4 = buttons('4', frame1).pack()
btn7 = buttons('7', frame1).pack()

btn2 = buttons('2', frame2).pack()
btn5 = buttons('5', frame2).pack()
btn8 = buttons('8', frame2).pack()
btn0 = buttons_ops('0', frame2, '#333300', 'white').pack()

plus = buttons_ops('+', frame4, 'black', 'white').pack()
minus= buttons_ops('-', frame4,  'black', 'white').pack()
mul = buttons_ops('x', frame4, 'black', 'white').pack()
div = buttons_ops('/', frame4, 'black', 'white').pack()

btn3 = buttons('3', frame3).pack()
btn6 = buttons('6', frame3).pack()
btn9 = buttons('9', frame3).pack()

# This keeps the window active
root.mainloop()

In the code above, we put the parent container of the entry object as the main window root. I set the width parameter to 9 as it fit well with the dimensions of the window and the keyboard. You can try it out with different values for width and set a perfectly sized output screen.

You may have noticed that we didn't use the pack() on the same line as object definition. This is because using pack() on the same line as object definition is a bad practice as it limits certain functionality.

So, why did we use the pack() function on the same line while creating buttons? This is because we didn't work heavily with the buttons in this project, so we attempted to reduce the lines of code.

In the tk.Entry() function, we set state='readonly'. This prohibits any direct text input into the the output screen. That means, we can only use the buttons to show the characters on the output screen. By default, this is set to state='normal', which allows direct input from the keyboard into the entry box.

The pady parameter inside the pack() function leaves the given amount of pixels above and below the object. To perform such an operation, let's say to pad 10 pixels on both sides of the object, we can write pady=10 .

Here, we didn't want the same amount of padding above and below the object. So we used a tuple with first element representing the pixels to pad above the output screen, and the second element representing the pixels to pad below the output screen.

Up until now, our GUI looks as shown below:

We can now see that the output screen is set perfectly.

How to Make the Numbers Visible on the Output Screen

Next step is to make characters visible on the output screen. Every button that we click should render on the output screen. For this, we have to link commands to each button. Let's first look at the code and then see how it works:

import tkinter as tk

# screen initialization
root = tk.Tk()

# Naming the window
root.title("Calculator")

entry = tk.Entry(root, width=9, font=('Arial', 38, 'bold'),state='readonly')
entry.pack(pady=(30, 10))


frame1 = tk.Frame(root)
frame1.pack(side='left', anchor='n')
frame2 = tk.Frame(root)
frame2.pack(side='left', anchor='n')
frame3 = tk.Frame(root)
frame3.pack(side='left', anchor='n')
frame4 = tk.Frame(root)
frame4.pack(side='left', anchor='n')

pixel = tk.PhotoImage(width=55, height=55)

def command(text):
    entry.config(state='normal')
    entry.insert(tk.END, text) 
    entry.config(state='readonly')  


def buttons(text, frame):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg="#333300", fg="white", compound="center",
                       command=lambda :command(text))
    return button


def buttons_ops(text, frame, bg, fg):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg=bg, fg=fg, activebackground="black",
                        compound="center", command=lambda:command(text))
    return button

btn1 = buttons('1',frame1).pack()
btn4 = buttons('4', frame1).pack()
btn7 = buttons('7', frame1).pack()

btn2 = buttons('2', frame2).pack()
btn5 = buttons('5', frame2).pack()
btn8 = buttons('8', frame2).pack()
btn0 = buttons_ops('0', frame2, '#333300', 'white').pack()

plus = buttons_ops('+', frame4, 'black', 'white').pack()
minus= buttons_ops('-', frame4,  'black', 'white').pack()
mul = buttons_ops('x', frame4, 'black', 'white').pack()
div = buttons_ops('/', frame4, 'black', 'white').pack()

btn3 = buttons('3', frame3).pack()
btn6 = buttons('6', frame3).pack()
btn9 = buttons('9', frame3).pack()

# This keeps the window active
root.mainloop()

In the code above, we defined a new function called command(). This function takes one argument text. Inside the function, we changed the state of the entry object to normal via config. By doing this, we can now make changes in the text of the entry object.

Then we used the insert() function for the entry object. The insert() function appends the text argument to the existing set of characters.

The first argument of the insert() function takes the index where the text will be inserted. tk.END represents the last character of the text in the object. The second argument of the insert() function takes the text that is to be inserted.

Finally, we change the state of the object again to readonly to prohibit any outside input other than our defined calculator keyboard.

Now let's look at the buttons and the buttons_ops functions. You may have noticed that we've added the command parameter to the tk.Button() function. The lambda tells the program to perform the command only when the button is clicked.

Collectively, command=lambda:command(text) means that, on clicking the buttons which we have defined up until now, it executes the command() function and shows the pressed button character on the output screen.

Now try clicking some buttons on your window. They should appear on the output screen as shown below:

How to Add a Scrollbar to the Output Screen

Now, you might have encountered a problem: when you input a large number of characters, you were able to see only the first few characters. The rest were invisible.

To tackle this, we'll add a scrollbar to the output screen.

First, we'll create a scrollbar object via tk.Scrollbar() before the entry object. The following code shows how:

import tkinter as tk

# screen initialization
root = tk.Tk()

# Naming the window
root.title("Calculator")

scrollbar = tk.Scrollbar(root, orient='horizontal')

entry = tk.Entry(root, width=9, font=('Arial', 38, 'bold'), state='readonly', xscrollcommand=scrollbar.set)
entry.pack(pady=(30, 10))

scrollbar.config(command=entry.xview)
scrollbar.pack()

frame1 = tk.Frame(root)
frame1.pack(side='left', anchor='n')
frame2 = tk.Frame(root)
frame2.pack(side='left', anchor='n')
frame3 = tk.Frame(root)
frame3.pack(side='left', anchor='n')
frame4 = tk.Frame(root)
frame4.pack(side='left', anchor='n')

pixel = tk.PhotoImage(width=55, height=55)

def command(text):
    entry.config(state='normal')
    entry.insert(tk.END, text)
    entry.config(state='readonly')


def buttons(text, frame):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg="#333300", fg="white", compound="center",
                       command=lambda :command(text))
    return button


def buttons_ops(text, frame, bg, fg):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg=bg, fg=fg, activebackground="black",
                        compound="center", command=lambda:command(text))
    return button

btn1 = buttons('1',frame1).pack()
btn4 = buttons('4', frame1).pack()
btn7 = buttons('7', frame1).pack()

btn2 = buttons('2', frame2).pack()
btn5 = buttons('5', frame2).pack()
btn8 = buttons('8', frame2).pack()
btn0 = buttons_ops('0', frame2, '#333300', 'white').pack()

plus = buttons_ops('+', frame4, 'black', 'white').pack()
minus= buttons_ops('-', frame4,  'black', 'white').pack()
mul = buttons_ops('x', frame4, 'black', 'white').pack()
div = buttons_ops('/', frame4, 'black', 'white').pack()

btn3 = buttons('3', frame3).pack()
btn6 = buttons('6', frame3).pack()
btn9 = buttons('9', frame3).pack()

# This keeps the window active
root.mainloop()

The orient parameter in the tk.Scrollbar() object determines the nature of the scrollbar. Here, we've aligned it with the X-axis. We also added a parameter in the original entry object. The xscrollcommand sets the scrollbar to the output screen.

Then we connected the scrollbar to the entry object by setting command=entry.xview and embedded the scrollbar in the output screen.

The following image shows the scrollbar. You can use the arrow signs to navigate forward or backward through the text:

How to Add the Equal To Button

We haven't yet made the equal to button – so let's do that now. To start, we'll define a function called cmd_equal(). In this function, we'll first change the state of the entry to normal. Then we'll extract the text in the output screen using the entry.get() function and replace 'x' by '*'. We do this because multiplication is represented by '*' and not 'x'.

Then we'll add a try-except block. We'll try to evaluate the mathematical expression that we extracted using Python's built-in eval() function. If that's invalid, instead of throwing an error, we'll output 'Invalid' onto our screen.

import tkinter as tk

# screen initialization
root = tk.Tk()

# Naming the window
root.title("Calculator")

scrollbar = tk.Scrollbar(root, orient='horizontal')

entry = tk.Entry(root, width=9, font=('Arial', 38, 'bold'), state='readonly', xscrollcommand=scrollbar.set)
entry.pack(pady=(30, 10))

scrollbar.config(command=entry.xview)
scrollbar.pack()

frame1 = tk.Frame(root)
frame1.pack(side='left', anchor='n')
frame2 = tk.Frame(root)
frame2.pack(side='left', anchor='n')
frame3 = tk.Frame(root)
frame3.pack(side='left', anchor='n')
frame4 = tk.Frame(root)
frame4.pack(side='left', anchor='n')

pixel = tk.PhotoImage(width=55, height=55)

def command(text):
    entry.config(state='normal')
    entry.insert(tk.END, text)
    entry.config(state='readonly')

def cmd_equal():
    entry.config(state='normal')
    txt = entry.get().replace('x', '*')

    try:
        result = eval(txt)

    except:
        result = 'INVALID'
    entry.delete(0, tk.END)
    entry.insert(tk.END, result)
    entry.config(state='readonly')   


def buttons(text, frame):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg="#333300", fg="white", compound="center",
                       command=lambda :command(text))
    return button


def buttons_ops(text, frame, bg, fg):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg=bg, fg=fg, activebackground="black",
                        compound="center", command=lambda:command(text))
    return button

btn1 = buttons('1',frame1).pack()
btn4 = buttons('4', frame1).pack()
btn7 = buttons('7', frame1).pack()

btn2 = buttons('2', frame2).pack()
btn5 = buttons('5', frame2).pack()
btn8 = buttons('8', frame2).pack()
btn0 = buttons_ops('0', frame2, '#333300', 'white').pack()

plus = buttons_ops('+', frame4, 'black', 'white').pack()
minus= buttons_ops('-', frame4,  'black', 'white').pack()
mul = buttons_ops('x', frame4, 'black', 'white').pack()
div = buttons_ops('/', frame4, 'black', 'white').pack()

btn3 = buttons('3', frame3).pack()
btn6 = buttons('6', frame3).pack()
btn9 = buttons('9', frame3).pack()
equal= tk.Button(frame3, text='=', font=('Arial', 20), image=pixel, bg='white', fg='black', activebackground="black",
                        compound="center", command=lambda: cmd_equal()).pack()

# This keeps the window active
root.mainloop()

Here, we've also used entry.delete(). This function will delete all the text on the output screen from the first argument's index (that is from the 0th index) to the last argument's index, that is to the end of the text (represented by tk.END).

Then we inserted our result onto the output screen using entry.insert(). An important thing to note is that we've embedded the equal to button below the definition of btn9 in the same frame. This puts our equal to button in just the right place.

The following images show the initial and final screens, respectively.

On clicking the equal to button:

How to Add the AC Button

Now finally, we'll define our last function: cmd_ac(). This function will delete everything on the output screen. We'll do this by first changing the state to normal, then using entry.delete(), and lastly changing the state back to readonly. Then we'll put this function in the command() parameter of the ac button.

To keep the UI from dismantling when we expand the window, we'll use the resizable() function. This functions takes two arguments: one corresponds to the permission to expand the width and the other to the height. To prohibit expansion of the window, we'll set both the parameters to False.

So the final code will be:

import tkinter as tk

# screen initialization
root = tk.Tk()

# Naming the window
root.title("Calculator")

scrollbar = tk.Scrollbar(root, orient='horizontal')

entry = tk.Entry(root, width=9, font=('Arial', 38, 'bold'), state='readonly', xscrollcommand=scrollbar.set)
entry.pack(pady=(30, 10))

scrollbar.config(command=entry.xview)
scrollbar.pack()

frame1 = tk.Frame(root)
frame1.pack(side='left', anchor='n')
frame2 = tk.Frame(root)
frame2.pack(side='left', anchor='n')
frame3 = tk.Frame(root)
frame3.pack(side='left', anchor='n')
frame4 = tk.Frame(root)
frame4.pack(side='left', anchor='n')

pixel = tk.PhotoImage(width=55, height=55)

def command(text):
    entry.config(state='normal')
    entry.insert(tk.END, text)
    entry.config(state='readonly')

def cmd_ac():
    entry.config(state='normal')
    entry.delete(0, tk.END)
    entry.config(state='readonly')

def cmd_equal():
    entry.config(state='normal')
    txt = entry.get().replace('x', '*')

    try:
        result = eval(txt)

    except:
        result = 'INVALID'
    entry.delete(0, tk.END)
    entry.insert(tk.END, result)
    entry.config(state='readonly')


def buttons(text, frame):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg="#333300", fg="white", compound="center",
                       command=lambda :command(text))
    return button


def buttons_ops(text, frame, bg, fg):
    button = tk.Button(frame, text=text, font=('Arial', 20), image=pixel, bg=bg, fg=fg, activebackground="black",
                        compound="center", command=lambda:command(text))
    return button

btn1 = buttons('1',frame1).pack()
btn4 = buttons('4', frame1).pack()
btn7 = buttons('7', frame1).pack()
ac = tk.Button(frame1, text="AC", font=('Arial', 20), image=pixel, bg="#666699", fg="white", compound="center",
                        command=lambda: cmd_ac()).pack()

btn2 = buttons('2', frame2).pack()
btn5 = buttons('5', frame2).pack()
btn8 = buttons('8', frame2).pack()
btn0 = buttons_ops('0', frame2, '#333300', 'white').pack()

plus = buttons_ops('+', frame4, 'black', 'white').pack()
minus= buttons_ops('-', frame4,  'black', 'white').pack()
mul = buttons_ops('x', frame4, 'black', 'white').pack()
div = buttons_ops('/', frame4, 'black', 'white').pack()

btn3 = buttons('3', frame3).pack()
btn6 = buttons('6', frame3).pack()
btn9 = buttons('9', frame3).pack()
equal= tk.Button(frame3, text='=', font=('Arial', 20), image=pixel, bg='white', fg='black', activebackground="black",
                        compound="center", command=lambda: cmd_equal()).pack()


root.resizable(0,0) 
# This keeps the window active
root.mainloop()

When we hit run, this should display our final project.

Wrapping Up

So now you know how to build a simple arithmetic calculator. To strengthen and build upon the concepts that you learned here, you can try to add some more functionality to this calculator. Here are some ideas for you to practice the things learnt here:

• Adding a decimal point button to the calculator to allow users work with fractional numbers.

• Adding percentage button to the calculator to allow users calculate percentages.

• Adding a delete button to the calculator which, instead of clearing entire screen, deletes one character at a time.

• Making the calculator 'computer keyboard interactive', that is, allowing input directly from the computer keyboard. (Hint for this task: changing the state of the entry object to normal, and adding conditions for 'invalid' expressions).

Thanks for reading!

Some months ago, I was teaching a Python course. I was struggling to convey certain concepts because it was an online course, and I couldn't use a whiteboard or even a traditional board. The built-in whiteboard feature in Google Meet was also quite complex to use and share.

So, I decided to search on Google to see if there were any GitHub repositories with whiteboard apps.

I found many such repositories. But after trying a lot of them, I found that the apps were often too complicated for my needs. I wanted something simpler, where I could choose colors and line sizes, and then I could do the drawing myself.

So, what did I do? I decided to code my own app. And for this process, I chose to use Python and Tkinter, the default GUI (Graphics User Interface) toolkit that comes with Python.

The end result?

The whiteboard app windows with a white canvas to start drawing and writing and the RGB color picker.

So in this tutorial, I'll walk you through the process so you can build it yourself. This will help you sharpen your Python skills and learn about Tkinter, too.

How to Build the app's functionality

Setup your development environment

Building this app is pretty straightforward. You will need the latest Python version installed, which you can download and install from here:

If you're a Linux user, you won't need to install it as it comes with your distro. Also, you need to have a basic understanding of Python and know how to create functions.

After verifying that you already have Python installed on your computer, open Visual Studio Code or your preferred code editor to start writing code.

How to build the drawing feature

Create a Python file and begin by importing the Tkinter and color chooser modules, like this:

import tkinter as tk
from tkinter.colorchooser import askcolor

After importing Tkinter and the colorchooser module, which will open a modal to select our RGB color combinations, you can begin writing the functions to make this whiteboard work.

First, create a function to start drawing, like this:

def start_drawing(event):
    global is_drawing, prev_x, prev_y
    is_drawing = True
    prev_x, prev_y = event.x, event.y

This code defines a function named start_drawing that is meant to handle the beginning of a drawing action in a graphical user interface (GUI) application.

Let's break down what this function does:

1. def start_drawing(event):: This line defines a function named start_drawing that takes an event as its parameter. In GUI programming, events are actions or occurrences (like mouse clicks, key presses and so on) that trigger specific functions when they happen.

2. global is_drawing, prev_x, prev_y: This line declares that the variables is_drawing, prev_x, and prev_y are global variables. In Python, global variables are accessible from anywhere in the code and can be modified within functions. This line ensures that these variables are accessible within the function.

3. is_drawing = True: This line sets the is_drawing variable to True. This variable is typically used to indicate whether a drawing action is in progress. By setting it to True, the function signals that a drawing action has started.

4. prev_x, prev_y = event.x, event.y: This line captures the current coordinates of the mouse cursor when the start_drawing function is called. It assigns the x and y coordinates of the mouse cursor at that moment to the prev_x and prev_y variables. These variables are used to track the starting point of the drawing action.

So when this function is called (usually in response to a mouse click event), it sets the is_drawing flag to True to indicate that a drawing action is in progress and records the initial position of the mouse cursor using the prev_x and prev_y variables. These variables are then used in the subsequent drawing actions to connect the starting point with the current cursor position to create a drawing on the canvas.

Now let's keep coding. Next up, we need to write a function to actually draw on the whiteboard, like this:

def draw(event):
    global is_drawing, prev_x, prev_y
    if is_drawing:
        current_x, current_y = event.x, event.y
        canvas.create_line(prev_x, prev_y, current_x, current_y, fill=drawing_color, width=line_width, capstyle=tk.ROUND, smooth=True)
        prev_x, prev_y = current_x, current_y

A drawing is essentially a combination of points filled with colors, functioning as a vector. To work as a vector, it needs to have a starting and ending point. So after creating a function to start drawing, you'll need a function to stop drawing, like this:

def stop_drawing(event):
    global is_drawing
    is_drawing = False

How to build the color changing feature

Now that you have the primary drawing functionality, the next step is to implement the color-changing function. This is a simple function that calls the askcolor module, which is already part of Tkinter, like this:

def change_pen_color():
    global drawing_color
    color = askcolor()[1]
    if color:
        drawing_color = color

For the last functionality, you'll create a function to adjust the line width, allowing you to choose the thickness of your lines. Here's how to implement it:

def change_line_width(value):
    global line_width
    line_width = int(value)

Now you've completed the functions. Next, you'll use Tkinter to create the window for your app and buttons for choosing colors, clearing the whiteboard, and selecting your line width.

How to Build the GUI

GUI stands for Graphical User Interface, representing the windows you interact with on your computer, smartphone, tablets, and so on.

When coding a desktop app using Python and Tkinter, you define the size, position, buttons, and any other elements you want for your program. In this case, you need to create the following assets:

• A title for your app.

• A white blank canvas for drawing.

• A frame to hold the controls of your app in the same line.

• A color button.

• A clear canvas button to erase all your work and start drawing again.

• A slider to select your line width.

How to create your window

Start by creating a window with a title and a white canvas:

root = tk.Tk()
root.title("Whiteboard App")

canvas = tk.Canvas(root, bg="white")
canvas.pack(fill="both", expand=True)

is_drawing = False
drawing_color = "black"
line_width = 2

root.geometry("800x600")

Let's break down what each part does:

1. root = tk.Tk(): This line creates the main application window. It initializes a Tkinter application and assigns it to the variable root. This window serves as the container for all the graphical elements of the whiteboard application.

2. root.title("Whiteboard App"): This sets the title of the application window to "Whiteboard App." The title appears in the title bar of the window and provides a name for the application.

3. canvas = tk.Canvas(root, bg="white"): This line creates a drawing canvas within the main application window. The canvas is a white rectangular area where users can draw. It is initialized with a white background color. The canvas is assigned to the variable canvas.

4. canvas.pack(fill="both", expand=True): This configures the canvas to fill both the horizontal and vertical space of the application window. It allows the canvas to expand and occupy the entire window.

5. is_drawing = False: This initializes a variable is_drawing to False. It's typically used to track whether the user is currently drawing or not. When the user starts drawing, this variable is set to True to indicate an ongoing drawing action.

6. drawing_color = "black": This initializes a variable drawing_color to "black." It specifies the color that will be used for drawing on the canvas. You can change this color as needed to draw with different colors with the functions you will add later on this tutorial

7. line_width = 2: This initializes a variable line_width to 2. It specifies the width of the lines or strokes used for drawing. You can adjust this value to change the thickness of the lines.

8. root.geometry("800x600"): This sets the initial size of the application window to 800 pixels in width and 600 pixels in height. It defines the dimensions of the window when it is first displayed but you can resize your window and with it, your canvas space.

How to build your navbar and controls

Next thing you need to do is create a frame to hold the buttons or controls in the same line. This is the most comfortable way to have buttons, and it's kind of a navbar.

controls_frame = tk.Frame(root)
controls_frame.pack(side="top", fill="x")

Then, create two buttons and give them default fixed positions in your screen, like this:

color_button = tk.Button(controls_frame, text="Change Color", command=change_pen_color)
clear_button = tk.Button(controls_frame, text="Clear Canvas", command=lambda: canvas.delete("all"))

color_button.pack(side="left", padx=5, pady=5)
clear_button.pack(side="left", padx=5, pady=5)

So, right now, if you run your app you will see something like this:

The window of the app with the blank canvas and two buttons, one for changing colors and one to clear the canvas.

You already have the two main buttons for your app, one to change colors and one to clear the canvas. The last control you need to create is a slider for the line width function. For that, you will write the following code:

line_width_label = tk.Label(controls_frame, text="Line Width:")
line_width_label.pack(side="left", padx=5, pady=5)

line_width_slider = tk.Scale(controls_frame, from_=1, to=10, orient="horizontal", command=lambda val: change_line_width(val))
line_width_slider.set(line_width)
line_width_slider.pack(side="left", padx=5, pady=5)

And again, let's recap what is going on here:

1. line_width_label = tk.Label(controls_frame, text="Line Width:"): This line creates a label widget with the text "Line Width." The label is intended to display text to describe the purpose of the following slider (which controls the line width). It is placed within the controls_frame widget.

2. line_width_label.pack(side="left", padx=5, pady=5): This line configures the label's placement within the controls_frame.

3. side="left": This sets the label to be placed on the left side of the controls_frame. It ensures that the label is aligned to the left.

4. padx=5: It adds horizontal padding of 5 pixels around the label, creating some spacing.

5. pady=5: It adds vertical padding of 5 pixels around the label, creating spacing.

6. line_width_slider = tk.Scale(controls_frame, from_=1, to=10, orient="horizontal", command=lambda val: change_line_width(val)): This line creates a horizontal slider widget (Scale widget) that allows the user to select a line width. The slider ranges from a minimum value of 1 (from_=1) to a maximum value of 10 (to=10). The command option is set to call the change_line_width function with the selected value whenever the slider position changes.

7. line_width_slider.set(line_width): This sets the initial position of the slider to the value stored in the line_width variable, which is initialized earlier in the code. This ensures that the slider starts at the default line width.

8. line_width_slider.pack(side="left", padx=5, pady=5): This line configures the slider's placement within the controls_frame. It is placed on the left side, and padding is added to create spacing around the slider.

So, if you reach this point, your app should look like this:

How to connect your features with your GUI

But if you press the buttons or move the slider for line width, it won't work because you still need to bind or "link" the functions you coded at the beginning of this tutorial with the buttons and controls you created.

For that, you're going to write this code:

canvas.bind("<Button-1>", start_drawing)
canvas.bind("<B1-Motion>", draw)
canvas.bind("<ButtonRelease-1>", stop_drawing)

root.mainloop()

So, a last recap to understand the end of your code:

• canvas.bind("<Button-1>", start_drawing): When the left mouse button is clicked on the canvas, it triggers the start_drawing function.

• canvas.bind("<B1-Motion>", draw): While the left mouse button is held down and the mouse is moved on the canvas, it triggers the draw function.

• canvas.bind("<ButtonRelease-1>", stop_drawing): When the left mouse button is released (button released event), it triggers the stop_drawing function.

• And finally, root.mainloop() starts the main loop of the application, allowing it to respond to user interactions and events.

Wrapping up

I hope you enjoyed reading through this tutorial as much as I did writing it, and that the whiteboard helps you in whatever you need to do.

If you want to download the app, you can check it out here:

Until next time! Happy coding and keep coding forward to create a cool portfolio =D

freeCodeCamp.org has just launched a brand new video course on YouTube that will teach you how to easily implement modern designs in your Tkinter-based Python applications using ttkbootstrap.

John Elder teaches this course. He is an industry veteran in education and a prolific producer of technical educational courses. He is also a respected author in the area of computer programming.

In this comprehensive course, you will be introduced to the world of ttkbootstrap, a powerful library that empowers developers to bring a modern touch to their Tkinter-based Python applications. The course's hands-on approach will take you through the usage of all the primary ttkbootstrap widgets, providing you with the tools necessary to elevate your Tkinter applications to the next level of design and usability.

The course is designed to be accessible and engaging, systematically covering the following key areas:

1. Introduction: Acquaint yourself with ttkbootstrap and its potential to revolutionize your Python app designs.
2. Labels and Buttons: Learn how to implement and customize these essential widgets.
3. CheckButtons to Combo Boxes: Master the different types of interactive elements, including CheckButtons, Resizing Buttons, and Combo Boxes.
4. Entry Boxes to Frames and Labels: Understand how to collect user input and manage GUI layout effectively.
5. Menu Buttons to Progress Bars: Discover how to enhance user navigation and provide effective feedback.
6. Radio Buttons to Spinboxes: Dive deeper into interactive elements and their customization.
7. Treeview to Scrolled Frame: Learn how to present hierarchical data and manage large contents in your GUI.
8. Message Boxes to Toast Messages: Get a handle on delivering alerts and messages to your users.
9. Conclusion: Summarize your learnings and look ahead at how to apply these in your future projects.

By the end of this course, you'll be equipped to create highly functional, modern, and visually appealing applications with Tkinter and ttkbootstrap. This course represents an invaluable opportunity for Python developers to add another powerful tool to their repertoire.

Watch the full course on the freeCodeCamp.org YouTube channel (3-hour watch).

The task is to ask multiple-choice questions, collect user answers, and finally display the results.

Before coding the GUI, we'll first see how to fetch multiple-choice questions, their correct answers, and the choices from the Open Trivia DB API.

The Open Trivia Database provides a completely free JSON API that you can use in your programming projects. Use of this API does not require an API Key. To make the task more interesting, we'll also randomize the order of choices.

Watch this video to see what we are building:

We'll use the following modules and concepts in this project:

• tkinter is a standard GUI library for Python using which we can build desktop apps. This is the base of our project and we'll use it to create the User Interface of the application.
• random module implements pseudo-random number generators for various distributions. This module will help us shuffle the options for the questions.
• requests library allows us to send HTTP/1.1 requests extremely easily. We'll need the library to fetch questions from the Open Trivia DB.
• Python Classes are a blueprint for creating objects. Objects are real-world entities. During the entire project development, we'll be separating our different functionalities into different classes and methods.

Workflow of the Project

The basic workflow of the application will go like this:

1. We'll fetch questions from the Open Trivia DB API.
2. For each fetched question, we'll create a different object using a Question class. All these Question objects will be appended to a question_bank list.
3. This question_bank will be passed to the brain of the application, QuizBrain and a quiz object will be created. This class will be responsible for checking if there are more questions, for getting the next question, calculating the score, and so on.
4. Finally, this quiz object will be passed to the QuizInterface class, and the user will be able to interact with it.

Alright, let's get started!

How to Fetch Questions from the Open Trivia DB API

As we discussed above, we'll be using the Open Trivia DB API to get the questions. Head over to their API, select the number of questions you want, along with the categories and difficulty.

The question type should be Multiple Choice and the encoding should be Default Encoding. Click on Generate API URL and you'll get an API URL.

Here's a sample API URL: https://opentdb.com/api.php?amount=10&type=multiple

For fetching the questions, we'll be using the requests module. You can install it like this:

$ pip install requests

Let's create a Python file quiz_data.py to fetch the quiz questions and answers using the API URL generated above.

import requests

parameters = {
    "amount": 10,
    "type": "multiple"
}

response = requests.get(url="https://opentdb.com/api.php", params=parameters)
question_data = response.json()["results"]

In the above script, instead of directly adding the amount and type parameters in the URL, we have created a parameters dictionary and added the respective values.

After that, we're making a GET request using the requests library on the Open Trivia DB API URL. A sample JSON response looks like this:

{
  "response_code": 0,
  "results": [
    {
      "category": "Entertainment: Video Games",
      "type": "multiple",
      "difficulty": "hard",
      "question": "What was the name of the hero in the 80s animated video game 'Dragon's Lair'?",
      "correct_answer": "Dirk the Daring",
      "incorrect_answers": ["Arthur", "Sir Toby Belch", "Guy of Gisbourne"]
    },
    {
      "category": "Entertainment: Video Games",
      "type": "multiple",
      "difficulty": "medium",
      "question": "Which of these game franchises were made by Namco?",
      "correct_answer": "Tekken",
      "incorrect_answers": ["Street Fighter", "Mortal Kombat", "Dragon Quest"]
    }
  ]
}

The JSON data contains a dictionary with two keys: response_code and results. The response_code tells developers what the API is doing. The results is a list we are interested in. So, we have stored the value of results in a variable called question_data.

How to Create the Question Model

Question model is nothing but a Python class with three attributes – question_text, correct_answer and choices.

_questiontext is the question, _correctanswer is the correct answer for that question, and choices is a list of options for that question.

Let's create a question_model.py file and create the class in it:

class Question:
    def __init__(self, question: str, correct_answer: str, choices: list):
        self.question_text = question
        self.correct_answer = correct_answer
        self.choices = choices

How to Create the Quiz Brain

The QuizBrain, as the name suggests, is the brain of the application. Let's create a quiz_brain.py file and add the following code there:

class QuizBrain:

    def __init__(self, questions):
        self.question_no = 0
        self.score = 0
        self.questions = questions
        self.current_question = None

    def has_more_questions(self):
        """To check if the quiz has more questions"""

        return self.question_no < len(self.questions)

    def next_question(self):
        """Get the next question by incrementing the question number"""

        self.current_question = self.questions[self.question_no]
        self.question_no += 1
        q_text = self.current_question.question_text
        return f"Q.{self.question_no}: {q_text}"

    def check_answer(self, user_answer):
        """Check the user's answer against the correct answer and maintain the score"""

        correct_answer = self.current_question.correct_answer
        if user_answer.lower() == correct_answer.lower():
            self.score += 1
            return True
        else:
            return False

    def get_score(self):
        """Get the number of correct answers, wrong answers, and score percentage."""

        wrong = self.question_no - self.score
        score_percent = int(self.score / self.question_no * 100)
        return (self.score, wrong, score_percent)

The QuizBrain class takes questions, a list of questions. Additionally, the question_no and score attributes are initialized with 0 and the current_question is set to None initially.

The first method has_more_questions() checks whether the quiz has more questions or not.

The next method next_question() gets the question from the questions list at index question_no and then increments the question_no attribute and returns a formatted question.

The check_answer() method takes user_answer as an argument and checks whether the user's answer is correct or not. It also maintains the score and returns boolean values.

The last method get_score() returns the number of correct answers, wrong answers, and score percentage.

How to Build the Quiz UI

Let's move on to the next part where we'll create the user interface of the application. Create a quiz_ui.py file for this section, and add the following code.

class QuizInterface:

    def __init__(self, quiz_brain: QuizBrain) -> None:
        self.quiz = quiz_brain
        self.window = Tk()
        self.window.title("iQuiz App")
        self.window.geometry("850x530")

        # Display Title
        self.display_title()

        # Creating a canvas for question text, and dsiplay question
        self.canvas = Canvas(width=800, height=250)
        self.question_text = self.canvas.create_text(400, 125,
                                                     text="Question here",
                                                     width=680,
                                                     fill=THEME_COLOR,
                                                     font=(
                                                         'Ariel', 15, 'italic')
                                                     )
        self.canvas.grid(row=2, column=0, columnspan=2, pady=50)
        self.display_question()

        # Declare a StringVar to store user's answer
        self.user_answer = StringVar()

        # Display four options(radio buttons)
        self.opts = self.radio_buttons()
        self.display_options()

        # To show whether the answer is correct or wrong
        self.feedback = Label(self.window, pady=10, font=("ariel", 15, "bold"))
        self.feedback.place(x=300, y=380)

        # Next and Quit Button
        self.buttons()

        # Mainloop
        self.window.mainloop()

In the above code, we've created a QuizInterface class with a constructor. In Python, the __init__() method is called constructor and is called automatically whenever an object of that class is created.

As discussed in the workflow, the QuizInterface class takes an argument of type QuizBrain. So, within the constructor, we have passed that as quiz_brain.

The first thing we do in Tkinter is create a window using the Tk class. You can set the title and the geometry using the title() and geometry() methods respectively.

Next we called few methods which we'll be creating next. Apart from that, we've created a canvas using the Canvas class where our questions will be placed. Canvas is a rectangular area where we can place text, graphics, widgets, and so on.

Inside the canvas, we added a sample text for now using the create_text() method. We then declared a StringVar variable called user_answer to store the user's answer in String type.

Next we created a feedback label to show whether the answer is right or wrong using the Label widget. This widget implements a display box where we can place text or images. You can update the text displayed by this widget at any time you want.

At the very end, we enter the main event loop to take action against each event triggered by the user using the mainloop() method. Now, let's create the other methods that we'll use in this constructor.

To display the title

def display_title(self):
    """To display title"""

    title = Label(self.window, text="iQuiz Application",
                      width=50, bg="green", fg="white", font=("ariel", 20, "bold"))
    title.place(x=0, y=2)

To display a title, we have created a Label widget on the main window. We set its width, bg, fg and font properties and it looks something like this:

To display a question

As we know, we have already created a canvas for the question text. Since the question_no is initialized with 0 in the QuizBrain class, we can get the questions using the next_question() method:

def display_question(self):
    """To display the question"""

    q_text = self.quiz.next_question()
    self.canvas.itemconfig(self.question_text, text=q_text)

Using the itemconfig() method in the Canvas class, we can add question text dynamically.

To create the radio buttons

Since the options will be four radio buttons, we'll be using the RadioButton class from the Tkinter module.

def radio_buttons(self):
        """To create four options (radio buttons)"""
    # initialize the list with an empty list of options
    choice_list = []

    # position of the first option
    y_pos = 220

    # adding the options to the list
    while len(choice_list) < 4:

        # setting the radio button properties
        radio_btn = Radiobutton(self.window, text="", variable=self.user_answer, value='', font=("ariel", 14))

        # adding the button to the list
        choice_list.append(radio_btn)

        # placing the button
        radio_btn.place(x=200, y=y_pos)

        # incrementing the y-axis position by 40
        y_pos += 40

    # return the radio buttons
    return choice_list

First we created a choice_list list. We set the y-position of the first choice as 220. Using a while loop, we created four instances of the RadioButton class on the main window. Notice the variable attribute set as user_answer that we created earlier.

We'll append these radio buttons in the choice_list and place them at a distance of 40 units in the y-axis. We then return the choice_list.

To display options

We'll use this method to set the text and value attribute of each radio button.

def display_options(self):
    """To display four options"""

    val = 0

    # deselecting the options
    self.user_answer.set(None)

    # looping over the options to be displayed for the
    # text of the radio buttons.
    for option in self.quiz.current_question.choices:
        self.opts[val]['text'] = option
        self.opts[val]['value'] = option
        val += 1

We first set the user_answer to None. Then we iterate over the choices for the current_question and set the two properties one after another for each option.

To display buttons

As you can see, we've two buttons – Next and Quit.

We'll use the Next button to move to the next question (if any). And we'll use the Quit button to quit the quiz and destroy the window immediately.

We use the Button class from the Tkinter module to create them. The functionality for these buttons is added in the command attribute.

For the Next button, we'll be creating a separate method right after this section. For the Quit button, we just destroy the main window.

Next button functionality

def next_btn(self):
    """To show feedback for each answer and keep checking for more questions"""

    # Check if the answer is correct
    if self.quiz.check_answer(self.user_answer.get()):
        self.feedback["fg"] = "green"
        self.feedback["text"] = 'Correct answer! \U0001F44D'
    else:
        self.feedback['fg'] = 'red'
        self.feedback['text'] = ('\u274E Oops! \n'
                                     f'The right answer is: {self.quiz.current_question.correct_answer}')

    if self.quiz.has_more_questions():
        # Moves to next to display next question and its options
        self.display_question()
        self.display_options()
    else:
        # if no more questions, then it displays the score
        self.display_result()

        # destroys the self.window
        self.window.destroy()

The next button has to do a lot of things.

First of all, it checks whether the answer selected by the user is correct or not using the check_answer method. It shows the feedback accordingly.

Next, it checks if the quiz has more questions or not. If there are more questions, it calls the display_question and display_options methods again. If there are no questions left, it calls the display_result method to show the result and then destroys the main window.

To display the results

At the end of the quiz, we need to show the results to the user like this:

Here, as you can see, we are showing the score percentage based on correct answers and wrong answers.

def display_result(self):
    """To display the result using messagebox"""
    correct, wrong, score_percent = self.quiz.get_score()

    correct = f"Correct: {correct}"
    wrong = f"Wrong: {wrong}"

    # calculates the percentage of correct answers
    result = f"Score: {score_percent}%"

    # Shows a message box to display the result
    messagebox.showinfo("Result", f"{result}\n{correct}\n{wrong}")

We use the get_score method to get the computations and then we use the showinfo method from the messagebox class to show such a popup message.

Full code for quiz_ui.py

from tkinter import Tk, Canvas, StringVar, Label, Radiobutton, Button, messagebox
from quiz_brain import QuizBrain

THEME_COLOR = "#375362"


class QuizInterface:

    def __init__(self, quiz_brain: QuizBrain) -> None:
        self.quiz = quiz_brain
        self.window = Tk()
        self.window.title("iQuiz App")
        self.window.geometry("850x530")

        # Display Title
        self.display_title()

        # Create a canvas for question text, and dsiplay question
        self.canvas = Canvas(width=800, height=250)
        self.question_text = self.canvas.create_text(400, 125,
                                                     text="Question here",
                                                     width=680,
                                                     fill=THEME_COLOR,
                                                     font=(
                                                         'Ariel', 15, 'italic')
                                                     )
        self.canvas.grid(row=2, column=0, columnspan=2, pady=50)
        self.display_question()

        # Declare a StringVar to store user's answer
        self.user_answer = StringVar()

        # Display four options (radio buttons)
        self.opts = self.radio_buttons()
        self.display_options()

        # To show whether the answer is right or wrong
        self.feedback = Label(self.window, pady=10, font=("ariel", 15, "bold"))
        self.feedback.place(x=300, y=380)

        # Next and Quit Button
        self.buttons()

        # Mainloop
        self.window.mainloop()

    def display_title(self):
        """To display title"""

        # Title
        title = Label(self.window, text="iQuiz Application",
                      width=50, bg="green", fg="white", font=("ariel", 20, "bold"))

        # place of the title
        title.place(x=0, y=2)

    def display_question(self):
        """To display the question"""

        q_text = self.quiz.next_question()
        self.canvas.itemconfig(self.question_text, text=q_text)

    def radio_buttons(self):
        """To create four options (radio buttons)"""

        # initialize the list with an empty list of options
        choice_list = []

        # position of the first option
        y_pos = 220

        # adding the options to the list
        while len(choice_list) < 4:

            # setting the radio button properties
            radio_btn = Radiobutton(self.window, text="", variable=self.user_answer,
                                    value='', font=("ariel", 14))

            # adding the button to the list
            choice_list.append(radio_btn)

            # placing the button
            radio_btn.place(x=200, y=y_pos)

            # incrementing the y-axis position by 40
            y_pos += 40

        # return the radio buttons
        return choice_list

    def display_options(self):
        """To display four options"""

        val = 0

        # deselecting the options
        self.user_answer.set(None)

        # looping over the options to be displayed for the
        # text of the radio buttons.
        for option in self.quiz.current_question.choices:
            self.opts[val]['text'] = option
            self.opts[val]['value'] = option
            val += 1

    def next_btn(self):
        """To show feedback for each answer and keep checking for more questions"""

        # Check if the answer is correct
        if self.quiz.check_answer(self.user_answer.get()):
            self.feedback["fg"] = "green"
            self.feedback["text"] = 'Correct answer! \U0001F44D'
        else:
            self.feedback['fg'] = 'red'
            self.feedback['text'] = ('\u274E Oops! \n'
                                     f'The right answer is: {self.quiz.current_question.correct_answer}')

        if self.quiz.has_more_questions():
            # Moves to next to display next question and its options
            self.display_question()
            self.display_options()
        else:
            # if no more questions, then it displays the score
            self.display_result()

            # destroys the self.window
            self.window.destroy()

    def buttons(self):
        """To show next button and quit button"""

        # The first button is the Next button to move to the
        # next Question
        next_button = Button(self.window, text="Next", command=self.next_btn,
                             width=10, bg="green", fg="white", font=("ariel", 16, "bold"))

        # palcing the button on the screen
        next_button.place(x=350, y=460)

        # This is the second button which is used to Quit the self.window
        quit_button = Button(self.window, text="Quit", command=self.window.destroy,
                             width=5, bg="red", fg="white", font=("ariel", 16, " bold"))

        # placing the Quit button on the screen
        quit_button.place(x=700, y=50)

    def display_result(self):
        """To display the result using messagebox"""
        correct, wrong, score_percent = self.quiz.get_score()

        correct = f"Correct: {correct}"
        wrong = f"Wrong: {wrong}"

        # calculates the percentage of correct answers
        result = f"Score: {score_percent}%"

        # Shows a message box to display the result
        messagebox.showinfo("Result", f"{result}\n{correct}\n{wrong}")

How to Put Everything Together

Since all the components are ready to be integrated together, let's create a main.py file and add the following content there:

from question_model import Question
from quiz_data import question_data
from quiz_brain import QuizBrain
from quiz_ui import QuizInterface
from random import shuffle
import html

question_bank = []
for question in question_data:
    choices = []
    question_text = html.unescape(question["question"])
    correct_answer = html.unescape(question["correct_answer"])
    incorrect_answers = question["incorrect_answers"]
    for ans in incorrect_answers:
        choices.append(html.unescape(ans))
    choices.append(correct_answer)
    shuffle(choices)
    new_question = Question(question_text, correct_answer, choices)
    question_bank.append(new_question)


quiz = QuizBrain(question_bank)

quiz_ui = QuizInterface(quiz)


print("You've completed the quiz")
print(f"Your final score was: {quiz.score}/{quiz.question_no}")

We first imported all the classes from the different files we created above. In addition to that, we also need the shuffle method from the random module and the html module.

We have a list called question_bank. We are iterating over the question_data that we receive from the quiz_data.py file. If you see the sample response, you will find some text such as 'Dragon&#039. These need to be unescaped using the html.unescape method.

We have a choices list that will contain the correct answer as well as the incorrect answers. The list will be shuffled using the shuffle method from the random module.

After shuffling, we create a question using the Question model from quiz_model.py file and append it the question_bank list.

Next, we're creating an object called quiz of the QuizBrain class which requires a list of questions. So, we're passing the question_bank to it.

After that, we're creating an object quiz_ui of the QuizInterface class which requires an object of the QuizBrain class, so we have passed the newly created quiz object to it.

Now that everything is ready, we are ready to run the application.

$ python main.py

Conclusion

Congrats on making it to the end! This was a basic tutorial on how you can build a GUI Quiz application using Tkinter. You can add more features and make the UI more attractive if you want to.

Here's the code repository: https://github.com/ashutoshkrris/GUI-Quiz-Tkinter

For Windows, you can download the executable application from here.

Tkinter provides an object-oriented interface to the Tk GUI toolkit that is built-in to Python. You don't even have to install anything extra to use Tkinter.

Tkinter makes it simple to create a GUI which handles user input and output. A GUI uses a form of object oriented programming called "event-driven." This means that the program responds to events, which are actions that a user takes.

John Elder from Codemy.com created a 5.5 hour long comprehensive course about how to use Tkinter. We have released the full course for free on the freeCodeCamp.org YouTube channel.

Here is what the course covers:

• What is Tkinter?
• Positioning with Tkinter's Grid System
• Creating Buttons
• Creating Input Fields
• Building a Simple Calculator App
• Using Icons, Images, and Exit Buttons
• Building an Image Viewer App
• Adding a Status Bar
• Adding Frames
• Using Radio Buttons
• Adding Message Boxes
• Creating New Windows
• Opening Files Dialog Boxes
• Using Sliders
• Using Checkboxes
• Using Dropdown Menus
• Using Databases
• Building a GUI for a Database App
• Deleting a Record From a Database
• Updating a Record with SQLite
• Building a Weather App
• Using Matplotlib Charts

Watch the course below or on the freeCodeCamp.org YouTube channel (5.5 hour watch).