TIL Python Basics Day 34 - Creating a GUI Quiz App

Creating a GUI Quiz App

1. Fetch the data from API

API endpoint and Parameters

#<data.py>

import requests
#https://opentdb.com/api.php?amount=10&type=boolean

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

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

2. HTML Entities

HTML Escape / Unescape

Escapes or unescapes an HTML file removing traces of offending characters that could be wrongfully interpreted as markup.
-The following characters are reserved in HTML and must be replaced with their corresponding HTML entities:

    " is replaced with "
    & is replaced with &
    < is replaced with &lt;
> is replaced with &gt;

 Q.1: FLAC stands for
 "Free Lossless Audio Condenser"' 
 (True/False): True
" -> Double Quotation Mark
' -> Single Quotation Mark

https://www.freeformatter.com/html-escape.html

• Use html module, unescape method

import html

class QuizBrain:
	def next_question(self):
          self.current_question = self.question_list[self.question_number]
          self.question_number += 1
          q_text = html.unescape(self.current_question.text)
          user_answer = input(f"Q.{self.question_number}: {q_text} (True/False): ")
          self.check_answer(user_answer)

3. Class based Tkinter UI

giving self. " turns things into a property which can be accessd anywhere in the class
-true_img variable doesn't have self., as it won't be used other than setup the button.

#<ui.py>

from tkinter import *
THEME_COLOR = "#375362"
FONT = ("Arial", 20, "italic")
class QuizInterface:
    def __init__(self):
        self.window = Tk()
        self.window.title("Quizzler")
        self.window.config(padx=20, pady=20, bg=THEME_COLOR)

        self.score_label = Label(text="Score: 0 ", highlightthickness=0, bg=THEME_COLOR, fg="white", font=("Arial", 14, "normal"))
        self.score_label.grid(column=1, row=0)

        self.canvas = Canvas(width=300, height=250, bg="white", highlightthickness=0)
        self.canvas.grid(column=0, row=1, columnspan=2, pady=20)
        self.question_text = self.canvas.create_text(150, 125, text="Q", fill="black", font=FONT)


        true_img = PhotoImage(file="images/true.png") 
        self.true_button = Button(image=true_img, highlightthickness=0)#, command=)
        self.true_button.grid(column=0, row=2)

        false_img = PhotoImage(file="images/false.png")
        self.false_button = Button(image=false_img, highlightthickness=0)#, command=)
        self.false_button.grid(column=1, row=2)
        self.window.mainloop()

Data Types

int str float bool

• We can interchange different data types by casting x= int(2.58) data types are flexible (dynamic typing)

• less error prone way is declaring its data type beforhand

age : int
age = "twelve"  #-> python will tell you it should be 'int'

Type Hints: python will give you a hint for datatype of variable and returned output

def police_check(age: int) -> bool:
	if age > 18:
    	can_drive = True