How I Created a Short Quiz App with Kivy

by

Building a quiz app is simple with Kivy.

💡 Kivy is a free, open-source library that made the development of the quiz app simple. The Kivy methods save us a ton of coding time.

In this article, I created a short quiz app that helps you decide what to eat to demonstrate how Kivy works. In addition, the quiz app enhanced my coding skills with classes and functions, especially with repeating codes.

There are three layouts for the quiz app.

  1. Home Screen:
  1. Question:
  1. Answer (varies)

You can find an image here or download mine from my GitHub profile. The only exterior file you need is an image, and make sure you save the image under the same file as your code. Download the completed code to check your work.

Here we go!

Step 1: Install the library

Install the library by entering pip install kivy in the command prompt.

Step 2: Import the following libraries

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.button import Button
from kivy.graphics import Color, Rectangle
from kivy.uix.floatlayout import FloatLayout
import random

Step 3: Create a home screen for the app and initiate the class.

class Home(FloatLayout):
 
    def __init__(self, **kwargs):
        super(Home, self).__init__(**kwargs)
    	self.main_home()

Now we can create everything we need inside the Home() class.

Create the logo() and add_label() functions

We can use the kivy method below to add widgets, including images, labels, and buttons.

self.add_widget()

We can create the logo using the kivy method shown below. Then, insert it inside the add_widget() kivy method.

Image(source="image_name.type",
      size_hint = (0.3, 0.7), # Size of the image
      pos_hint={'center_x': 0.5, 'y': 0.355}) # position of the image

For the label, we can use the kivy method below to add a label and insert it inside the add_widget() kivy method.

Label(text = string, # string is from parameter of function
      font_size = 45, # Size of text
      color = "#FFFFFF", # Color of text
      bold = True, # Makes the test bold
      pos_hint={'x': 0.000000001, 'center_y': 0.4}) # Position of label

💡 ** Since one function creates every label in the app, it needs a string parameter so the user can change the text.**

Create the add_button() function

We will use a different approach when adding the buttons to prevent repeating lines of code. To do that, we must create a new variable for every button, then return the variable. The kivy method for creating a button is:

self.b = Button(text = string, # Text displayed on the button
            size_hint = size, # Size of the button
            bold = True, # Makes text bold
            font_size = 30, # font size
            pos_hint={'center_x': 0.5, 'y': y},) # position of the text

💡 Since we use one function to create all buttons, we can use parameters to change the variables. The function contains four parameters: self, string, size, and y.

  • The string represents the text on the button.
  • The size determines the size of the button.
  • Then, we have the y parameter, which describes the y position of the button.

For example, if we include two buttons on the screen that are the same size, the buttons will overlap. So, we can either change the y or the x value. Thus when we change the y value, the buttons won’t overlap.

Create the reset() function.

The reset function only requires two lines of code.

The first line is for using the kivy method to erase all widgets from the app:

self.clear_widgets()

The second line calls the logo() to create and display it:

self.logo()

Create the main_home() function

The main_home() consists of calling functions and using kivy methods. We can start by using the kivy method to clear all widgets.

self.clear_widgets()

Call the add_label() function with the desired question in the parameter.

self.add_label("Are you ready to decide what to eat?")

To create the button on the home screen, we must call the add_button() function. Then use the kivy method to add the button to the app.

self.button = self.add_button("Yes, I'm starving!", (0.9, 0.185), 0.1)
self.add_widget(self.button)

Then, we call the logo function to display the logo.

self.logo()

Step 4: Create the main quiz app and initiate the class.

class QuizApp(App):
   
    def build(self):
        self.root = root = Home()
  self.start(root)

Now we can create everything we need for the QuizApp(App) class.

💡 ** Every function (except for the __init__ function) inside this class needs the root parameter. **

For the class QuizApp(App), “Quiz” is the title for the tab.

Create the start() function.

The start() function will bind the button on the home screen so that the user can begin the quiz when they press it.

def start(self, root):
self.root.button.bind(on_press= self.beginQ)

Create the return_home() function

This function should return to the home screen after the user presses the restart button.

self.root.main_home()     
self.start(root)

Since there are only two answers to the quiz, create a function for each answer.

Each function will return the random choice of the list of the chosen places.

self.display_result(root, f"Get {random.choice(['KFC', 'Wendy', 'Popeyes'])}!")

Create a function to display the result called display_result(self, root, result)

We can start by calling the reset() function from the Home() class.

self.root.reset()

Then call the add_label(result) to add the result to the app.

self.root.add_label(result)

The final step is to create and display a Restart button and bind the button to return to the home screen.

self.restart_but = self.root.add_button("Restart", (0.9, 0.1), 0.18)
self.root.add_widget(self.restart_but)
self.restart_but.bind(on_press= self.return_home)

Create the begin quiz function

Call the reset() function from the Home() class.

self.root.reset()

Add the label for the questions and create the buttons for both answers.

self.root.add_label("Do you feel like driving?")
self.yes = self.root.add_button("Sure", (0.9, 0.1), 0.21)
self.no = self.root.add_button("Absolutely not!", (0.9, 0.1), 0.1)

Display the buttons on the app.

self.root.add_widget(self.yes)
self.root.add_widget(self.no)

Bind both answer buttons to call the two option functions you created earlier.

self.yes.bind(on_press= self.option_y)
self.no.bind(on_press= self.option_n)

References

Doc for Kivy: https://kivy.org/doc/stable/guide/widgets.html

Another app example: https://www.section.io/engineering-education/kivy-python-first-app/ – Import the datetime module for the code to work.

https://www.simplikivyapp.com/  – Better for a quiz with more than one question.