KIDS LEARNING GAME

FINAL REPORT
Degree of
BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
By

Registration No. Name Roll No.

11701636 Kushagra Setia RK17APB34
11701622 Afroz Ahmad Bhat RK17APB35
11701711 Subhadip Mondal RK17APB36

Under the guidance of

RANJIT KAUR

School of Computer Science and Engineering

Lovely Professional University
Phagwara, Punjab (India)
NOV 2018

Page | 1
 ACKNOWLEDGMENT

Place : Lovely Professional University

Date : 13th November, 2018

We would like to thank Ms. Ranjit Kaur for assigning us with this project. Through
the project we are able to grasp more technical and have a hands-on practical
experience with python projects. Through it we are able to learn how a project is
created and how necessary and crucial technical knowledge is. We are really
grateful to the faculty that has provided us with the necessary guidelines.

Name Registration No.

Kushagra Setia 11701636
Afroz Ahamed Bhat 11701622
Subhadip Mondal 11701711

Page | 2
 DECLARATION STATEMENT

Place : Lovely Professional University

Date : 13th November, 2018

This is to declare that this report has been written by us. No part of the report is copied
from the other sources. All information included from other sources has been duly
acknowledged. We aver that if any part of the report is found to be copied, we will take
full responsibility for it.

Name : Kushgra Setia

Reg. No. : 11701636

Signature :………………

Name : Afroz Ahmad Bhat

Reg. No. : 11701622

Signature :………………..

Name : Subhadip Mondal

Reg. No. : 11701711

Signature :……………….

Page | 3
 TABLE OF CONTENTS

CONTENTS PAGE NO.

1. INTRODUCTION……………………………………………………7
1.1. Introduction……………………………………………………………..7
1.2. Uses……………………………………………………………………..7
1.3. Special Button………..…………………………………………………7
2. METHODOLOGY…………………………………………………..11
2.1. Requirements……………………………………………………………11
2.2. Functionality…………………………………………………………….11
2.3. Implementation…………………………………………………………..13
2.4. Debugging………………………………………………………………..13
2.5. Execution…………………………………………………………………13
2.6. Working…………………………………………………………………..13
3. TECHNOLOGY……………………………………………………….18
3.1. Python 3.7…………………………………………………………………18
3.2. GUI………………………………………………………………………...18
3.3. IDE…………………………………………………………………………18
3.4. Tkinter……………………………………………………………………...18
3.5. Widgets classes………...…………………………………………………..18
3.6. Option with values………………………………………………………….18
4. WORK DIVISION………………………………………………………19
5. REFERENCES…………………………………………………………..21

Page | 4
 LIST OF TABLES

Table No. Name Page No.

4.1 Gantt Chart 20
4.2 Work Division 20

Page | 5
 LIST OF FIGURES

Fig No. Name Page No.

1.3.1 Start now button 7
1.3.2 Image button 8
1.3.3 Parrot button 8
1.3.4 Exit button 9
1.3.5 Submit button 9
1.3.6 Home button 10
1.3.7 Ok button 10
1.3.8 Message box 10
2.6.1 About us home page 14
2.6.2 KLG home page 14
2.6.3 12 Images 15
2.6.4 Checkbox 15
2.6.5 Checkbox with messagebox 16
2.6.6 Checkbox with thank you image 16
2.6.7 Flow chart 17

Page | 6
 CHAPTER 1
INTRODUCTION
1.1. Introduction
Based on Image Recognition, a game is designed in which the kids will sees the various
images for some particular time duration and after that they have to recognize them by
the names of images.

1.2. Uses
By developing this game, we will predict the number of images` that are correctly
recognized by a user from total number of images.
All the button used in this project perform some special kind of operations.
• Start the game
• Continue the playing
• Exit from the program
• Returning the total number of images that are correctly recognize
• Printing the total number of images that are correctly recognize
Button used in this project are like EXIT, START, OK, SUBMIT etc.

1.3. Special Button

Kids Learning Game uses some buttons.
All the button used in this program are
• START NOW
• EXIT
• OK
• SUBMIT
• HOME
• IMAGE BUTTON

START NOW

Fig 1.3.1
Code we used in our program…

Page | 7
Button(about_us_window3, image=start, command=home_page).pack(anchor=NW, padx=200,
pady=30)
This button is defined in the in the program named “about_us.py”.
This button starts our program.
On clicking on this button, we will go to the program name “klg.py” from
“about_us.py”.

IMAGE BUTTON

Fig 1.3.2
Code we used in our program…
Button(frame1, image=homebird, command=birds).pack(side=LEFT, padx=10)
Button(frame1, image=homeflower, command=flowers).pack(side=LEFT, padx=10)
Button(frame1, image=homeanimal, command=animals).pack(side=LEFT, padx=10)
Button(frame1, image=homefruit, command=fruits).pack(side=LEFT, padx=10)
Button(frame1, image=homeplayer, command=players).pack(side=LEFT, padx=10)

Fig 1.3.3
Code we used in our program…
Button(frame1, image=homebird, command=birds).pack(side=LEFT, padx=10)
This button is defined in the in the program named “about_us.py”.
There are five button we used here. This button are the images.

Page | 8
On clicking any of the image we will see 12 images. The images we can see according
to the image we click
For example, if we click on flower, we can see 12 different flowers.

EXIT

Fig 1.3.4
Code we used in our program…
Button(frame3, text="EXIT", bg="darksalmon", fg="yellow", bd=3, cursor="arrow",
command=exit).pack(side=LEFT, padx=10, pady=25, ipadx=30)
This button is defined in the in the program named “klg.py”.
On clicking on this button, we will exit from the program and no further execution is
done.

OK

Fig 1.3.5
There are two OK buttons is used in this project.
Code we used in our program…
Button(frame1, text="OK", bg="darksalmon", fg="yellow", bd=3, cursor="arrow",
command=okProcess).grid(row=3, column=4, sticky=W, padx=10, pady=10, ipadx=30)
This button is defined in the in the program named “klg.py”.
On clicking on this button means continue the game. We will see list of 20 images name.
We can select the name and go to SUBMIT button.

SUBMIT

Fig 1.3.6
Code we used in our program…
Button(frame2, text="SUBMIT", bg="darksalmon", fg="yellow", bd=3, cursor="arrow",
command=printing).grid(row=5, column=1, padx=10, pady=10, ipadx=20)
This button is defined in the in the program named “klg.py”.
On clicking this button, a messagebox will appear where we can see the total number
of images correctly recognize.

Page | 9
HOME

Fig 1.3.7
Code we used in our program…
Button(frame2, text="HOME", bg="darksalmon", fg="yellow", bd=3, cursor="arrow",
command=home).grid(row=1, column=6, padx=200, pady=10, ipadx=20)
This button is defined in the in the program named “klg.py”.
On clicking on this button, we will go to the program name “about_us.py” from
“klg.py”.

OK

Fig 1.3.8
No code is there to use this button.
This button is present on message box.

Fig 1.3.9
On clicking this button, we will get percentage of accuracy.

Page | 10
 CHAPTER 2
METHODOLOGY

2.1. Requirements
First step is gathering our requirements of the project. The functions and the modules
and the necessary for the development of the project.

2.2. Functionality
In this step we will discuss the different function used in the program and how they are
working.
The different types of function we used are…
• home_page()
• birds()
• flowers()
• animals()
• fruits()
• players()
• okProcess()
• counting()
• printing()
• home()
Now we will discuss working of each of the function.
home_page()
This function is defined in the program named “about_us.py”.
Code we used is…
def home_page():
about_us_window.destroy()
import os
os.system("python klg.py")
Working of this function is to destroy the current window and move to new program
named “klg.py”.
birds()
This function is defined in the program named “klg.py”.
Working of this function is to destroy the current window and display a new window
with 12 images and some text and some button.
flowers()
This function is defined in the program named “klg.py”.
Page | 11
Working of this function is to destroy the current window and display a new window
with 12 images and some text and some button.
animals()
This function is defined in the program named “klg.py”.
Working of this function is to destroy the current window and display a new window
with 12 images and some text and some button.
friuts()
This function is defined in the program named “klg.py”.
Working of this function is to destroy the current window and display a new window
with 12 images and some text and some button.
players()
This function is defined in the program named “klg.py”.
Working of this function is to destroy the current window and display a new window
with 12 images and some text and some button.
okProcess()
This function is defined in the program named “klg.py”.
This function destroys the current frame. After that a list of 20 images name will appear
including the image that are previously shown.
counting()
This function is defined in the program named “klg.py”.
Code we use is…
def counting():
count = v1.get() + v2.get() + v3.get() + v4.get() + v5.get() + v6.get() +
v7.get() + v8.get() + v9.get() + v10.get() + v11.get() + v12.get()
return count
This function returns the number of images that are correctly selected.
printing()
This function is defined in the program named “klg.py”.
Code we used is…
def printing():
messagebox.showinfo("Number of Birds", str(counting()) + " Birds are correctly
recognize")
L = Label(frame2, bg="skyblue", fg="black", font="gabriola 30 italic
underline")
L.grid(row=5, column=2, columnspan=15)
L.config(text="Percentage of Accuracy is " + str("%.2f" % ((counting() * 100) /
12)) + "%")

Label(frame3, image=smile).grid(row=1, column=1, padx=100, pady=50)

Label(frame3, text="Thank You !!!", bg="#46f0f0", fg="blue", font="chaurcer 25
italic").grid(row=1, column=2, sticky=N, pady=180)

Page | 12
 Label(frame3, text="Press EXIT to end Playing...", bg="#46f0f0", fg="blue",
font="garamond 30 italic").grid(row=2, column=1, sticky=W, padx=10, pady=10)
Button(frame3, text="EXIT", bg="darksalmon", fg="yellow", bd=3, cursor="arrow",
command=exit).grid(row=2, column=2, sticky=W, padx=10, pady=10, ipadx=30)
This function shows a messagebox with total number of images that are correctly
recognize. And it will also print the percentage of accuracy.
home()
This function is defined in the program named “klg.py”.
Code we used is…
def home():
window1.destroy()
import os
os.system("python about_us.py")
This function destroys the current window and move to the new program named
“about_us.py”.

2.3. Implementation
This step is to implementing the project by coding. This is most important part of the
program. A particular care should be done in order to get error free program.

2.4. Debugging
This step is to check the project for any errors in the code. And linking of the module
take place after checking individual modules and functions.

2.5. Execution
This step is to executing the project and simple testing.

2.6. Working
We have used tkinter library to develop GUI for the project.
We import sys library to know the current version we are using.
We import messagebox from tkinter to show information.
We import os for linking a program with another program.
The detail description about the working of the project is discussing now. On running
the program name “about_us.py” we will see the interface like this

Page | 13
Fig 2.6.1
On clicking the start button, current window is destroyed and move to the program
named “klg.py”. The interface will look like this

Fig 2.6.2
These five images are the button. On clicking any of the one we will move to the next
window.
If we click on EXIT button, we will exit from the program and no further processing is
done.
We will discuss the things that happen on click BIRDS image i.e. Parrot. On clicking it
we will destroy the current window and next interface will look like this
Page | 14
Fig 2.6.3
If we click on EXIT button, we will exit from the program and no further processing is
done.
On click OK button current frame is destroy and we get a new interface like this

Fig 2.6.4
After selecting the images name, click on the SUBMIT button. The interface will look
like

Page | 15
Fig 2.6.5
On clicking OK button, we will get the accuracy of the image i.e. number of images
that are correctly recognize and the interface will look like this

Fig 2.6.6
If we click on EXIT button, we will exit from the program and no further processing is
done.
If we click on the HOME button, current window will destroy and we move to the
program name “about_us.py”. The same thing will happen again.

Page | 16
Flow Chart

Fig 2.6.7

Page | 17
 CHAPTER 3
TECHNOLOGY

3.1. Python 3.7

Python is an interpreted, object-oriented, high-level programming language with
dynamic semantics. Its high-level built in data structures, combined with dynamic
typing and dynamic binding, make it very attractive for Rapid Application
Development, as well as for use as a scripting or glue language to connect existing
components together.
Python's simple, easy to learn syntax emphasizes readability and therefore reduces the
cost of program maintenance. Python supports modules and packages, which
encourages program modularity and code reuse.
3.2. GUI
Short for Graphical User Interface, a GUI (pronounced as either G-U-I or gooey) allows
the use of icons or other visual indicators to interact with electronic devices, rather than
using only text via the command line.
A GUI uses icons, and menus to carry out commands, such as opening, deleting, and
moving files.
3.3. IDE
Integrated development environment (IDE) used is PyCharm. It provides code
analysis, a graphical debugger, an integrated unit tester etc.
3.4. Tkinter
Python offers multiple options for developing GUI. Out of all the GUI methods, tkinter
is most commonly used method. It is a standard Python interface to the Tk GUI toolkit
shipped with Python. Python with tkinter outputs the fastest and easiest way to create
the GUI applications.
3.5. Widgets classes
Tkinter’s GUI classes define common GUI widgets such as button, labels, check
buttons, frames, canvases and other. We will use some of them in our project.
3.6. Option with values
Widgets classes contains option with their values to change the interface of the
widgets classes means appearance of the window. Some of the option are width,
height, fg, bg, side, row, column, text, onvalue, offvalue, variable, expand, fill, file,
image, command and so on.

Page | 18
 CHAPTER 4
WORK DIVISION

We divide the project into three modules. Each module is designed by one of us.

Module-1
Module Name:- About Us home page & Displaying Image
Member Name:- Subhadip Mondal
Description:-First of all import all the definitions from tkinter. Title is given by using
title widgets. Created window named as about_us_window. He created three more
frames named as about_us_window1, about_us_window2 and about_us_window3 and
pack them on about_us_window. He created three PhotoImage object and place them
on about_us_window1. Description about the images is pack on the
about_us_window2. A photoimage object and a START button is created and placed
on about_us_window3. Those things are in the program named as “about-us.py”.
He displays the 12 images on the window named as window1 and it is present on the
program named as “klg.py”. He created an OK button and EXIT button. A good luck
image is pack on this frame.
Widgets and option used are…
• Title
• Frame-bg, cursor
• Pack-fill, expand, padx, pady
• Grid-row, column, rowspan, columnspan, padx, pady, ipadx, ipady
• PhotoImage-file
• Button-text, padx, pady, ipadx, ipady, command
• Label-text, fg, bg, font

Module-2
Module Name:-Kids Learning Game home page.
Member Name:- Kushagra Setia
Description:-He created the home page of program named as “klg.py”. He created five
objects of the five images and pack them on the window and those will act as button. A
label with some content is created and pack them on window. A EXIT button is created
to exit from program.
Widgets and option used are…
• Button-text, fg, bg, command
• Frame- bg, cursor
• Pack-side, fill, anchor, padx, pady
• Photoimage-file
• Label-text, fg, bg, text

Module-3
Module Name:-Listing the image name & Finding accuracy
Member Name:- Afroz Ahmad Bhat

Page | 19
Description:-He created 20 check button and grid them on window. Each check button
will return the value other 1 or 0.
A HOME button is created to go to the program named as “about_us.py”.
He made the logic to show how many images was correctly recognized by user.
A SUBMIT button is place on the frame. On clicking that button a printing() function
will call and will return the number of images that are correctly recognize. Config
module will show/print the return value.
A thank you image is created and grid it on the window.
Widgets and option used are…
• Label-text, fg, bg
• Button-text, bg, fg, command
• Pack-side, fill, anchor, padx, pady
• Config-text
• Photoimage-file

Gantt Chart

Each module is/will complete with in the given date as mention below.

31/8 9/10 9/20 9/30 10/10 10/20 10/31

Research
Initial Report
Displaying Image
Listing Image Name
Recognized Number
Final Report
Table 4.1

Work Division

S. No. Student Name Module Name

1. Subhadip Mondal About Us home page & Displaying Image
2. Kushagra Setia Kids Learning Game home page
3. Afroz Ahmad Bhat Listing the image name & Finding accuracy
Table 4.2

Page | 20
 CHAPTER 5
REFERENCES

We went through different website and learn those concept that will used in making this
project. Some of the website are…
• https://www.python.org
• https://www.w3schools.com
• https://www.google.com/
• We followed the text book named “Introduction to Programming Using
python” by Y. Daniel Liang.

Page | 21