Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
THE MOBILE LEARNING APPLICATION OF EDUCATIONAL RELATE TO
ANIMAL’S NAME IN HOLY QURAN
NOR JANNAH BINTI ABDULLAH
BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA)
WITH HONOURS
UNIVERSITI SULTAN ZAINAL ABIDIN
2020
THE MOBILE LEARNING APPLICATION OF EDUCATIONAL RELATE TO
ANIMAL’S NAME IN HOLY QURAN
NOR JANNAH BINTI ABDULLAH
BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA)
WITH HONOURS
Universiti Sultan Zainal Abidin, Terengganu, Malaysia
JANUARY 2020
i
DECLARATION
I hereby declare that this report is based on my original work except for quotations and
citations, which have been duly acknowledged. I also declare that it has not been previously
or concurrently submitted for any other degree at University Sultan Zainal Abidin or other
institutions.
____________________________________
Name : NOR JANNAH BINTI ABDULLAH
Date :
ii
CONFIRMATION
This is to confirm that:
The research conducted and the writing of this report was under my supervision.
_____________________________________
Name : PROF. MADYA DR. YOUSEF
ABUBAKER MOHAMED AHMED
EL-EBIARY
Date :
iii
DEDICATION
Alhamdulillah. All thanks to Allah the almighty for blessing me and give me
strength to complete my final year project II entitled “The Mobile Learning Application
Educational Relate to Animal’s Name in Holy Quran”.
I would like to express my deepest gratitude to my supervisor, Prof Madya Dr.
Yousef Abubaker Mohamed Ahmed El-Ebiary for his advice, support and also guidance
towards this project. It was great moment to work under your guidance.
I sincerely thank to all my friends and my beloved lecturer for their advice, support
and also suggestion during the development of my final year project. Last but not least, I
would like to express my gratitude to my beloved parents for their continuous moral
support.
May Allah S.W.T bless all the effort to complete this project.
iv
ABSTRACT
This mobile application development project “The Mobile Learning
Application of Educational Relate to Animal’s Name in Holy Quran” is developed its aims
to facilitate its use and in line with today’s increasingly sophisticated technology. In
producing this mobile phone application. Some objectives and goals are targeted. The main
objectives are to analyze the advantages and disadvantages available on existing mobile
phone applications, designing a better and more attractive interface from the previous
mobile learning application and developing attractive and effective mobile learning
application software to help children know about something new. Besides, this mobile
learning apps that feature various multimedia elements such as text, video, audio and
animation. Among the suggestions suggested to enhance and improve this app is that the
animation produced should be more creative and attractive for the viewing of children and
the buttons created to create interactivity should be more user-friendly.
v
ABSTRAK
Projek pembangunan aplikasi mudah alih "Aplikasi Pembelajaran Mudah Alih
Pendidikan Berkaitan Dengan Nama Haiwan Dalam Quran" adalah dibangunkan
bertujuan untuk memudahkan penggunaannya dan seiring dengan teknologi yang semakin
canggih saat ini. Dalam menghasilkan aplikasi telefon bimbit ini. Beberapa objektif dan
maklumat disasarkan. Objektif utama adalah menganalisis kelebihan dan keburukan yang
terdapat pada aplikasi telefon mudah alih yang sedia ada, mereka bentuk antara muka
yang lebih baik dan lebih menarik dari aplikasi permainan mudah alih sebelumnya dan
membangunkan perisian aplikasi mudah alih yang menarik dan berkesan untuk membantu
kanak-kanak mengetahui sesuatu yang baru. Selain itu, aplikasi permainan mudah alih ini
yang menampilkan pelbagai elemen multimedia seperti teks, video, audio dan animasi.
Antara cadangan yang dicadangkan untuk meningkatkan dan menambahbaikan aplikasi
ini adalah dengan menghasilkan animasi yang lebih kreatif dan butang yang menarik
adalah bagi menarik minat kanak-kanak untuk menonton dan mewujudkan interaktiviti
yang lebih mesra pengguna.
vi
CONTENTS
PAGE
DECLARATION i
CONFIRMATN ii
DEDICATION iii
ABSTRACT iv
ABSTRAK v
CONTENTS vi - xi
LIST OF FIGURES xii - xv
LIST OF TABLES xv
CHAPTER 1 INTRODUCTION
1.1 Background 1
1.2 Problem statement 2
1.3 Objectives 3
1.4 Scopes 3-4
1.5 Limitation Of Work 4
1.6 Activities and Milestones (Gant Chart) 5
1.7 Expected Result 6
vii
CHAPTER 2
LITERATURE REVIEW
2.1 Introduction 7
2.2 Research On Existing Application
Research 1 8
Research 2 9
Research 3 10
CHAPTER 3
METHODOLOGY
3.1 Introduction 11
3.2 Methodology used in application development 12
3.2.1 Analysis 13
3.2.2 Design 13
3.2.3 Development 14
3.2.4 Implementation
3.2.5 Evaluation
15
15
3.3 Project / Application requirements analysis 16
3.3.1 Software Requirements 16-17
3.3.2 Hardware Requirements 17
3.4 Application Design 18
viii
3.4.1 Design Implementation Approach 18
3.4.1.1 Referral Approach 18
3.4.1.2 Screen Approach 18
3.4.1.3 Assistant Approach 18
3.4.1.4 Navigation Map 19
3.5 Framework Design 20
3.6 Storyboard 21
3.6.1 Interface for Start 21
3.6.2 Interface for Enter Name 22
3.6.3 Interface for Main Menu 22
3.6.4 Interface for Learn & Play 23
3.6.5 Interface for Al-Nahl Video 24
3.6.6 Interface for Al-Nahl Quiz 24
3.6.7 Interface for How to Play 25
3.6.8 Interface for Help 25
CHAPTER 4
DEVELOPMENT AND
IMPLEMENTATION
4.1 Specification of Multimedia Element Properties 26
ix
4.1.1 Elements Used 26
4.1.2 Buttons 27-29
4.1.3 Image 29
4.1.4 Video 30
4.2 Software Implementation 30
4.2.1 Start Interface 30
4.2.2 Enter Name Interface 31
4.2.3 Main Menu Interface 32
4.2.4 Help Interface 33
4.2.5 How to Play (Step 1) Interface 34
4.2.6 How to Play (Step 2) Interface 35
4.2.7 How to Play (Step 3) Interface 36
4.2.8 How to Play (Step 4) Interface 37
4.2.9 Learn & Play Interface 38
4.2.10 Al-Nahl Video Interface 39
4.2.11 Al-Nahl Quiz (Question 1)Interface 40
4.2.12 Al-Nahl Quiz (Question 2)Interface 41
4.2.13 Al-Nahl Quiz (Question 3)Interface 42
4.2.14 Al-Nahl Quiz (Question 4)Interface 43
x
4.2.15 Al-Nahl Quiz (Question 5)Interface 44
4.2.16 Al-Naml Video Interface 45
4.2.17 Al-Naml Quiz (Question 1)Interface 46
4.2.18 Al-Naml Quiz (Question 2)Interface 47
4.2.19 Al-Naml Quiz (Question 3)Interface 48
4.2.20 Al-Naml Quiz (Question 4)Interface 49
4.2.21 Al-Naml Quiz (Question 5)Interface 50
4.2.22 Al-Ankabut Video Interface 51
4.2.23 Al-Ankabut Quiz (Question 1) Interface 52
4.2.24 Al-Ankabut Quiz (Question 2) Interface 53
4.2.25 Al-Ankabut Quiz (Question 3) Interface 54
4.2.26 Al-Ankabut Quiz (Question 4) Interface 55
4.2.27 Al-Ankabut Quiz (Question 5) Interface 56
4.2.28 Al-Baqarah Video Interface 57
4.2.29 Al-Baqarah Quiz (Question 1) Interface 58
4.2.30 Al-Baqarah Quiz (Question 2) Interface 59
4.2.31 Al-Baqarah Quiz (Question 3) Interface 60
4.2.32 Al-Baqarah Quiz (Question 4) Interface 61
4.2.33 Al-Baqarah Quiz (Question 5) Interface 62
4.2.34 Al-Fill Video Interface 63
xi
4.2.35 Al-Fill Quiz (Question 1) Interface 64
4.2.36 Al-Fill Quiz (Question 2) Interface 65
4.2.37 Al-Fill Quiz (Question 3) Interface 66
4.2.38 Al-Fill Quiz (Question 4) Interface 67
4.2.39 Al-Fill Quiz (Question 5) Interface 68
4.2.40 Finish Game Interface 69
4.3 Coding 70
4.3.1 Next Coding 70
4.3.2 Enter Name Coding 71
4.3.3 score Coding 72
4.3.4 Exit Application Coding 72
CHAPTER 5 CONCLUSION AND SUGGESTION OF
IMPROVEMENT
5.1 Benefits of the Project 73-74
5.2 Improvement Suggestions of Applications 74-75
5.3 Conclusion 75
REFERENCES 76
APPENDIX A (GANT CHART FYP II) 77
ATTACHMENT 78
xii
LIST OF FIGURES
Figure Title Pages
2.1 Animals Mentioned in the Quran 8
2.2 Animals Featured in the Quran 9
2.3 Animals in the Quran 10
3.1 Workflow based on ADDIE Model 12
3.2 Navigation Map 19
3.3 Framework Design 20
3.4 Start Interface 21
3.5 Enter Name Interface 22
3.6 Main Menu Interface 22
3.7 Learn & Play Interface 23
3.8 Al-Nahl Video Interface 24
3.9 Al-Nahl Quiz Interface 24
3.10 How to Play Interface 25
3.11 Help Interface 25
4.1 Start Page 30
4.2 Enter Name Page 31
xiii
4.3 Main Menu Page 32
4.4 Help Page 33
4.5 How to Play (Step 1) Page 34
4.6 How to Play (Step 2) Page 35
4.7 How to Play (Step 3) Page 36
4.8 How to Play (Step 4) Page 37
4.9 Learn & Play Page 38
4.10 Al-Nahl Video Page 39
4.11 Al-Nahl Quiz (Question 1) Page 40
4.12 Al-Nahl Quiz (Question 2) Page 41
4.13 Al-Nahl Quiz (Question 3) Page 42
4.14 Al-Nahl Quiz (Question 4) Page 43
4.15 Al-Nahl Quiz (Question 5) Page 44
4.16 Al-Naml Video Page 45
4.17 Al-Naml Quiz (Question 1) Page 46
4.18 Al-Naml Quiz (Question 2) Page 47
4.19 Al-Naml Quiz (Question 3) Page 48
4.20 Al-Naml Quiz (Question 4) Page 49
4.21 Al-Naml Quiz (Question 5) Page 50
4.22 Al-Ankabut Video Page 51
xiv
4.23 Al-Ankabut Quiz (Question 1) Page 52
4.24 Al-Ankabut Quiz (Question 2) Page 53
4.25 Al-Ankabut Quiz (Question 3) Page 54
4.26 Al-Ankabut Quiz (Question 4) Page 55
4.27 Al-Ankabut Quiz (Question 5) Page 56
4.28 Al-Baqarah Video Page 57
4.29 Al-Baqarah Quiz (Question 1) Page 58
4.30 Al-Baqarah Quiz (Question 2) Page 59
4.31 Al-Baqarah Quiz (Question 3) Page 60
4.32 Al-Baqarah Quiz (Question 4) Page 61
4.33 Al-Baqarah Quiz (Question 5) Page 62
4.34 Al-Fill Video Page 63
4.35 Al-Fill Quiz (Question 1) Page 64
4.36 Al-Fill Quiz (Question 2) Page 65
4.37 Al-Fill Quiz (Question 3) Page 66
4.38 Al-Fill Quiz (Question 4) Page 67
4.39 Al-Fill Quiz (Question 5) Page 68
4.40 Finish Game Page 69
4.41 Next button Coding 70
4.42 Enter Name Coding 71
xv
LIST OF TABLES
4.43 Score Coding 72
4.44 Exit Application Coding 72
Table Title Pages
2.1 Animals Mentioned in the Quran 8
2.2 Animals Featured in the Quran 9
2.3 Animals in the Quran 10
4.1 Button 27-29
i
1
CHAPTER 1
INTRODUCTION
1.1 Background
This world is increasingly sophisticated, everywhere technology. There are
many mobile learning applications existed, one of which is the form of learning. In line
with the development of information and multimedia technology today. This project
aims is to develop interactive application software that can change the way learning in
a more responsive and fun way.
The title “The Mobile Learning Application of Educational Relate to Animal’s
Name in Holy Quran” has been selected in producing the product. This mobile learning
application is developed for children aged 4 to 12 years old. It is specially designed to
help children to know valuable information about surah that used the animal’s name as
the name, such as Al-Fill, Al-Naml, Al-Nahl, Al-Ankabut, and Al-Baqarah. This
application contains multimedia elements such as audio, video, text, graphics and
animation. Audio and animation effects are entered to realize interactions between users
2
and interactive development. Therefore I will take an alternative to present this
application in a more understandable form and to let the kids learn about this in a very
funny and playful way.
1.2 Problem Statement
• Children nowadays were more interested to play games or learning something using
either mobile phones, computers, smartphones, or tablets than read a book or Holy
Quran.
• Most Children did not know about an animal’s stories in Holy Quran.
• Children are less and miss focus when telling them a story and difficult to imagine
than learn through phone or playing a game.
3
1.3 Objectives
The main objectives of this project are:
• To design an interesting mobile learning application for children from 4 up to 12
years old.
• To develop a fun mobile learning application that teach the kids the animals stories
that mentioned in the Holy Quran as Surah’s name in order to improve their Islamic
moral.
• To test efficiency of the application.
1.4 Scopes
• Smartphone
Smartphone must be provided.
• Android Platform.
This mobile learning application runs on Android Platform.
• Target User
The application targets children from 3 up to 12 years old
4
• Rating
This application provides THREE (3) levels. Such database score
assessment every level will be applied.
• Focus SIX (5) Surah
The application Focuses on SIX (5) surah’s as following:
Al- Fill, Al- Naml, Al-Nahl, Al-Ankabut, and Al-Baqarah.
1.5 Limitation of Work
• Can only be used using the smartphone environment.
• Only Android platform is suitable.
• More suitable for kids.
• Off-line mobile learning application.
5
1.6 Activities and Milestones (Gant Chart Fyp I)
TASK NAME
JANU
ARY FEBRUARY MAC APRIL
MAY
1 2 3 4 5 6 7 8 9 1
0 11 12 13 14 15
Topic Discussion
Project Title
Proposal
Proposal Writing
Proposal Writing
–
Literature Revie
w
Proposal Progres
sPresentation &
Evaluation
Discussion
Correction
Proposal
Proposed Solutio
n Methodology
Proof of Concept
Drafting Report
of The Proposal
Submit Draft of
Report to
Supervisor
Preparation For
Final Presentatio
n
Seminar
Presentation
Final Report
Submission
6
1.7 Expected Result
Make the user feel easy to use interface and the interactive mobile learning
application will engage the kids to learn more about Islam. Besides, to give exposure to
children’s about the surah that relates with animal’s name in gaming way. Lastly,
children will get more knowledge and will be aware of surah’s that have an animal’s
name as a title.
7
CHAPTER 2
LITERATURE REVIEW
2.1 Introduction
Literacy studies defined as making critical and systematic references to
documents containing information, ideas, data and methods of obtaining information
relating to the subject of a study conducted. Literacy studies are an important part of
research in which researches are conducting surveys on past studies. After the researcher
determines the theme of the study, the researcher will make a literacy study to obtain
the appropriate past study information. Among the information referred to from the
literary study include theories, designs, instrumentation studies, study procedures,
methods of data collection and research findings. The main purpose of literacy studies
is to put the study to be conducted on a scientific perspective.
8
2.2 Research
2.2.1 Research 1 : Animals mentioned in the Quran Application
The ”Animals mentioned in the Quran” application developed by ILMASOFT
DEEN in September 2019. The application uses Andorid version 1.0.2 and does not
use full internet connection to access. There are several advantages and
disadvantages to this application. Refer figure 2.1 and table 2.1.
Figure 2.1: Animals Mentioned in the Quran
Table 2.1: Animals Mentioned in the Quran
Advantages Disadvantages
Easy to understand
Easy to use
The interface is so
compact
Not suitable for
kids because of the
content so heavy
9
2.2.2 Research 2 : Animals featured in the Quran Application
“The Animals featured in the Quran” application developed by Tinnytapps in
May 2012. The application uses Android version 2.2 and does not use full internet
connection to access. There are several advantages and disadvantages to this
application. Refer figure 2.2 and table 2.2.
Figure 2.2: Animals Featured in the Quran
Table 2.2: Animals Featured in the Quran
Advantages Disadvantages
The combination
colour use to contrast
with text.
There is no help
button
10
2.2.3 Research 3 : Animals in the Quran books
“The Animals in the Quran” books written by Nyla Ahmad in 2018. There
are several advantages and disadvantages to this application. Refer figure 2.3 and
table 2.3.
Figure 2.3: Animals in the Quran
Table 2.3: Animals in the Quran
Advantages Disadvantages
The combination
colours of interface
are suitable.
Low attraction for
children to read the
book.
11
CHAPTER 3
METHODOLOGY
3.1 Introduction
In this chapter, we will discuss about the methodology that will be used in
developing the system. The methodology was very important element because its act as
guide throughout the system development in order to produce a complete and
functioning system. The process of developing an application is a through process and
it must be done stage by stage according to its own phases. There are many application
development phase models that can be used in developing an application and an
application development process can use a particular model only or incorporate
elements from different development models to serve as a guideline when the
application is developed.
12
3.2 Methodology used in application development
MODEL ADDIE
This model is among the instructional design models that often become the basis of
other instructional design models. Generally, the ADDIE Model (Rosset, 1987) can be
represented by the workflow as shown in the diagram below. Refer figure 3.1.
Figure 3.1: Workflow based on ADDIE Model
13
3.2.1 Analysis
In this phase we make some research and the problem that want to solve will be
identified as a whole. Problems can be determined through various methods or
techniques such as interviews, observations, surveys, and so on.
Once a problem can be identified, it is necessary to find out what causes or the
factors that cause the problem. This is to ensure the application of the learning to be
developed meets the needs of actual user. Therefore, in this phase several analysis have
been implemented on various aspects. Among them are analysis of user environments,
analysis of users, identifying the purpose of this application and so on.
3.2.2 Design
In this phase is the idea will be create or design the application interface by
designing a storyboard. It also explain overall view of the interface, structure, approach
of this application, the type of media and technology used.
The development of this mobile learning get the right objectives and can be
reached by the user after successfully completing the mission of this application. The
development of this learning application also checks the way or method for this learning
to be easily understood by the user.
14
3.2.3 Development
Based on financial allocation, media resources, time and so forth, this learning
application needs to be developed based on the design that has been designated through
the design phase. Development here refers to the process of developing or producing
software using existing applications such as programmer’s app, authoring, graphics,
audio and so on.
In this development phase also, it uses any designs or designs agreed upon in the
design, for example:
Users are provided with help to prevent users from experiencing problems
using software.
Content in the mobile learning of the resulting learning must be compatible
with the level of ability, age, background, user and so on.
Interesting stimuli such as multiple graphics, sound effects and so forth are
provided for users not to be tired of playing this mobile learning
application.
15
3.2.4 Implementation
Application learning “The Mobile Learning Application Of Educational Relate
To Animal’s Name in Holy Quran” is ready to be presented to test the effectiveness and
see the unnoticed problems during the design and development phase that may exist and
also this application prototype that to be tested by the developer and the supervision
panel in order to improve the application in case of finding comments. So that, the repair
or recovery process will be implemented before the application is actually issued or used
officially.
3.2.5 Evaluation
In this phase the system will be evaluated by the end user to make sure that
application is function in proper way. And if the application in line with the user’s scope.
Evaluation also involves the process of obtaining feedback from users on the content,
strategic, graphic,interfaces and so forth contained in this mobile learning application
either through supervision, testing, questionnaires and interviews and so on to ensure it
is appropriate or not to use.
16
3.3 Project /Application Requirements Analysis
In this developing mobile learning applications, all aspects need to be taken care
of, in terms of project requirements so that the process goes smoothly. The project
requirements are software requirements and hardware requirements.
3.3.1 Software Requirements
The main software that we used to develop this mobile learning application is
Unity 3D. This software is very much needed to organize and animate images. In
addition, there are other software used in the process of developing this mobile learning
application which is :
Unity 3D
Build mobile learning application
Adobe Flash CS6
Arrange, animate images, interfaces
Adobe Photoshop
Edit an image, design the logo, background and interface
of the application.
Microsoft Word 2016
Do the documentation of application
17
Google Chrome
Searching for information
3.3.2 Hardware Requirements
In develop the mobile learning application, the hardware requirements also
something that are very important and needed. The requirements as below :
Laptop
Lenovo
Processor
Intel (R) Core (TM) i5-5200U CPU @ 2.20GHz 2.20GHz
Laptop Memory
8.00 GB
Pendrive
HP16.00 GB
Mouse
Mobile phone
Iphone 6 – 64GB
During the development process, hardware and software compability is crucial
to avoid any undesirable problems.
18
3.4 Application Design
3.4.1 Design Implementation Approach
The application development mobile learning “The Mobile Learning
Application Educational Relate to Animal’s Name in Holy Quran” has been
using various approaches such as :
3.4.1.1 Referral Approach
Through this, referrals can be given by way of text usage. The
briefing instruction provided is to help the user to understand the contents of
this mobile learning applications. A brief description in the help module also
uses the same method and it briefly explains the mission that needs to be done.
3.4.1.2 Screen Approach
Through this approach, the text approach has been used in the aid
module section because in the form the text makes it easier for users to read
and understand instructions repeatedly.
3.4.1.3 Assistant Approach
Through this section, users can know about this application by simply
reading at the corner of the page module. In this app also, users are provided
with the instruction at the beginning of the mobile learning with this, it
19
facilitates the user to understand the learning’s needs and the learning’s
information.
3.4.1.4 Navigation Map
In developing this project, a navigation map sketch was created to
illustrate the continuity between one interface and another. In addition, the
navigation map also serves to give you an overview about the container in
this mobile learning application. Refer figure 3.2.
Figure 3.2: Navigation Map
20
3.5 Framework Design
Figure 3.3: Framework Design
Figure 3.3 above shows the framework design. Admin can update the application
while user or player can choose any button in this application. The database is in the
library in adobe flash. And Unity 3D will be used to create overall application.
21
3.6 Storyboard
In order to develop this project, the storyboard should be made available before
making this mobile learning application. It is most important things that we needed to
facilitate the development of this applications as a reference and it is used so that it is
in line with the navigation map. The storyboard is based on the selected topic and it
will not escape the navigation that has been made. With this storyboard, the entire
interface can be built from the beginning to the end.
3.6.1 Interface for Start
Figure 3.4 is the start interface for this interactive application. The user will be
asked to press the “START” button first before the go to the next page.
Figure 3.4: Start Interface
22
3.6.2 Interface for Enter Name
Figure 3.5 is the enter name interface for this application. The user must enter
the name first to play the application.
Figure 3.5: Enter Name Interface
3.6.3 Interface for Main Menu
Figure 3.6 is the main interface for this application. There are two buttons
with their own name in this section.
Figure 3.6: Main Menu Interface
23
3.6.4 Interface for Learn & Play
Figure 3.7 is the learn & play interface, in this section there have the video. There
are five video. The user should press the button of the animal’s picture to play the video.
While the user should press the “Home” button to go to the Home Page and press “Exit”
button to exit this application.
Figure 3.7: Learn & Play Interface
3.6.5 Interface for Al-Nahl Video
Figure 3.8 is the Al-Nahl video interface. The user can press the “Pause” button
to pause the video, “Stop” button to stop the video and “Next” button to play the quiz.
Figure 3.8: Al-Nahl Video Interface
24
3.6.6 Interface for Al-Nahl Quiz
Figure 3.9 is the Al-Nahl quiz interface. The user must choose the right answer
to get the score and press “Homepage Video” button to play the other video.
Figure 3.9: Al-Nahl Quiz Interface
3.6.7 Interface for How to Play
Figure 3.10 is the how to play interface. The user should press the “Home” button
to go to the Home Page and press the “Next” button for see the other step and also the
“Exit” button to exit this application.
Figure 3.10: How to Play Interface
25
3.6.8 Interface for Help
Figure 3.11 is the help interface. Users need to press the “Home” button
to go to the Home Page and press the “Exit” button to exit this application.
Figure 3.11: Help Interface
26
CHAPTER 4
DEVELOPMENT AND IMPLEMENTATION
4.1 Specification of Multimedia Element Properties
In the interface design, elements such as buttons, image graphics, animations
and audio are included. These elements have certain processes to produce them.
4.1.1 Elements Used
In this chapter, development will show and describe the elements contained in
the application of this learning. The elements used are buttons, images and audio.
27
4.1.2 Buttons
Table 4.1 shows the buttons displayed on each interface. This can make it easier
for users to navigate to the desired part. Among the buttons used are:
Table 4.1: Button
Button Description
This button is to start the learning
application and goes to the enter
name page.
This button goes to the main menu
page.
This button goes to the video page
and quiz page. Learn & Play have
five video that the user need to
choose.
This button goes to the how to play
page that shown the steps how to
play this application.
28
This button goes to quiz pages.
This button is to exit this application.
This button goes to the homepage.
This button goes to homepage video.
This button goes to help button.
This button goes to the previous
page.
This button goes to the Al-Nahl
video page.
This button goes to the Al-Fill video
page.
This button goes to the Al-Ankabut
video page.
29
This button goes to the Al-Naml
video page.
This button goes to the Al-Baqarah
video page.
4.1.3 Audio
The audio that will be included in this learning application is based on pre-
prepared audio so that it matches the application. Audio included in this app from a song
that is captured, edited and converted in format using the Audio Converter Software.
4.1.4 Image
The images generated in the development of this application have been created
entirely from Adobe Flash and Adobe Photoshop.
4.1.5 Video
The video generated in the development of this app have been created entirely
from Adobe Flash.
30
4.2 Software Implementation
In this app, when start the software, it is divided into several parts of which are
enter the name, learn & play, videos, quiz and how to play. When this project is
implemented, the first interface as shown below.
4.2.1 Start Interface
Figure 4.1: Start Page
Figure 4.1 as the first interface that displays the animals that have been used as
the name’s surah in Holy Quran and button “START”.
31
4.2.2 Enter Name Interface
Figure 4.2: Enter Name Page
Figure 4.2 shows the interface of enter name. In this interface user should enter
their name and press button “ENTER” to go to the next page.
32
4.2.3 Main Menu Interface
Figure 4.3: Main Menu Page
Figure 4.3 shows the interface for main menu. In this interface there is a button
that represents the sub-menu of its own. There are four main buttons in this game which
are learn & play, how to play, help and exit. Each button has its own screen display.
33
4.2.4 Help Interface
Figure 4.4: Help Page
Figure 4.4 shows the interface of Help. In this interface there are seven button
with their name. This is as a guard for user to know about button in this application.
34
4.2.5 How to Play (Step 1) Interface
Figure 4.5: How to play (Step 1) Page
Figure 4.5 shows the interface of How to Play (Step 1). In this interface there is
description for the first step for play this application.
35
4.2.6 How to Play (Step 2) Interface
Figure 4.6: How to play (Step 2) Page
Figure 4.6 shows the interface of How to Play (Step 2). In this interface there is
description for the second step for play this application.
36
4.2.7 How to Play (Step 3) Interface
Figure 4.7: How to play (Step 3) Page
Figure 4.7 shows the interface of How to Play (Step 3). In this interface there is
description for the third step for play this application.
37
4.2.8 How to Play (Step 4) Interface
Figure 4.8: How to play (Step 4) Page
Figure 4.8 shows the interface of How to Play (Step 4). In this interface there is
description for the forth step for play this application.
38
4.2.9 Learn & Play Interface
Figure 4.9: Learn & Play Page
Figure 4.9 shows the interface of Learn & Play. In this interface there have the
bee button, ant button, spider button, cow button and elephant button. User need press
any button that they like to watch.
39
4.2.10 Al-Nahl Video Interface
Figure 4.10: Al-Nahl Video Page
Figure 4.10 shows the interface of Al-Nal Video. In this interface there have the
animation story about Surah Al-Nahl, The content for this video is “Hello, my name is
Nana Bee. What do you know about me? Actually that has the surah in Al-Quran that
used the name of me. The surah is Al-Nahl. This surah talks about the proof of greatness
Allah SWT in this reverse. Surah Al-Nahl is number 16th in the Quran, it has 128 verse
and takedown in Makkah. The verse of 68-69 about Allah told to bee to build the nest
in the mountains, on the tree and the buildings that people make it. Then feed on all
kinds of fruit and follow the ways made easy for you by Allah. From their bellies comes
a honey of different colours in which there is healing for people. The truth is a sign in
this for those who think.” For a user that want stop, play and pause this video user can
press the button at right-down and for go to the quiz user need to press “LET’S PLAY”
button.
40
4.2.11 Al-Nahl Quiz (Question 1) Interface
Figure 4.11: Al-Nahl Quiz (Question 1) Page
Figure 4.11 shows the interface of Al-Nahl Quiz (Question 1). In this interface
user need to choose the right answer to get the score.
41
4.2.12 Al-Nahl Quiz (Question 2) Interface
Figure 4.12: Al-Nahl Quiz (Question 2) Page
Figure 4.12 shows the interface of Al-Nahl Quiz (Question 2). In this interface
user need to choose the right answer to get the score.
42
4.2.13 Al-Nahl Quiz (Question 3) Interface
Figure 4.13: Al-Nahl Quiz (Question 3) Page
Figure 4.13 shows the interface of Al-Nahl Quiz (Question 3). In this interface
user need to choose the right answer to get the score.
43
4.2.14 Al-Nahl Quiz (Question 4) Interface
Figure 4.14: Al-Nahl Quiz (Question 4) Page
Figure 4.14 shows the interface of Al-Nahl Quiz (Question 4). In this interface
user need to choose the right answer to get the score.
44
4.2.15 Al-Nahl Quiz (Question 5) Interface
Figure 4.15: Al-Nahl Quiz (Question 5) Page
Figure 4.15 shows the interface of Al-Nahl Quiz (Question 5). In this interface
user need to choose the right answer to get the score.
45
4.2.16 Al-Naml Video Interface
Figure 4.16: Al-Naml Video Page
Figure 4.16 shows the interface of Al-Naml Video. In this interface there have
the animation story about Surah Al-Naml, The content for this video is “Hello. My
name is Hana. What do you know about me? Actually, there have the surah in Al-Quran
that use the name of me. The surah is Al-Naml. In this surah Al-Naml stated in verses
18 and 19 there is the word An-Naml (ant), where the ant king tells his men to enter
their own nests, so that they will not be attacked by Prophet Sulaiman and his army who
will pass by that place. And do you know that? Prophet Sulaiman can speak with the
animals. And one more thing is, this surah is number 27th in Al-Quran, it has 93 verse
and takedown in Makkah.” For a user that want stop, play and pause this video user can
press the button at right-down and for go to the quiz user need to press “LET’S PLAY”
button.
46
4.2.17 Al-Naml Quiz (Question 1) Interface
Figure 4.17: Al-Naml Quiz (Question 1) Page
Figure 4.17 shows the interface of Al-Naml Quiz (Question 1). In this interface
user need to choose the right answer to get the score.
47
4.2.18 Al-Naml Quiz (Question 2) Interface
Figure 4.18: Al-Naml Quiz (Question 2) Page
Figure 4.18 shows the interface of Al-Naml Quiz (Question 2). In this interface
user need to choose the right answer to get the score.
48
4.2.19 Al-Naml Quiz (Question 3) Interface
Figure 4.19: Al-Naml Quiz (Question 3) Page
Figure 4.19 shows the interface of Al-Naml Quiz (Question 3). In this interface
user need to choose the right answer to get the score.
49
4.2.20 Al-Naml Quiz (Question 4) Interface
Figure 4.20: Al-Naml Quiz (Question 4) Page
Figure 4.20 shows the interface of Al-Naml Quiz (Question 4). In this interface
user need to choose the right answer to get the score.
50
4.2.21 Al-Naml Quiz (Question 5) Interface
Figure 4.21: Al-Naml Quiz (Question 5) Page
Figure 4.21 shows the interface of Al-Naml Quiz (Question 5). In this interface
user need to choose the right answer to get the score.
51
4.2.22 Al-Ankabut Video Interface
Figure 4.22: Al-Ankabut Video Page
Figure 4.22 shows the interface of Al-Ankabut Video. In this interface there
have the animation story about Surah Al-Ankabut. The content for this video is “Hello.
My name is Didi. What do you know about me? Actually, there have the surah in Al-
Quran that use the name of me, the surah is Al-Ankabut. This surah is number 29th in
Al-Quran, have 69 verse and takedown in Makkah. The story that related to spider is
when Prophet Muhammad and Saidina Abu Bakar run away and hides from kuffar
Quraish in Ghar Thur, and Allah SWT gives directions to the spider to build the nest at
the entrance of Ghar Thur so that the Kuffar Quraish could not find Prophet Muhammad
and Saidina Abu Bakar.” For a user that want stop, play and pause this video user can
press the button at right-down and for go to the quiz user need to press “LET’S PLAY”
button.
52
4.2.23 Al-Ankabut Quiz (Question 1) Interface
Figure 4.23: Al-Ankabut Quiz (Question 1) Page
Figure 4.23 shows the interface of Al-Ankabut Quiz (Question 1). In this
interface user need to choose the right answer to get the score.
53
4.2.24 Al-Ankabut Quiz (Question 2) Interface
Figure 4.24: Al-Ankabut Quiz (Question 2) Page
Figure 4.24 shows the interface of Al-Ankabut Quiz (Question 2). In this
interface user need to choose the right answer to get the score.
54
4.2.25 Al-Ankabut Quiz (Question 3) Interface
Figure 4.25: Al-Ankabut Quiz (Question 3) Page
Figure 4.25 shows the interface of Al-Ankabut Quiz (Question 3). In this
interface user need to choose the right answer to get the score.
55
4.2.26 Al-Ankabut Quiz (Question 4) Interface
Figure 4.26: Al-Ankabut Quiz (Question 4) Page
Figure 4.26 shows the interface of Al-Ankabut Quiz (Question 4). In this
interface user need to choose the right answer to get the score.
56
4.2.27 Al-Ankabut Quiz (Question 5) Interface
Figure 4.27: Al-Ankabut Quiz (Question 5) Page
Figure 4.27 shows the interface of Al-Ankabut Quiz (Question 5). In this
interface user need to choose the right answer to get the score.
57
4.2.28 Al-Baqarah Video Interface
Figure 4.28: Al-Baqarah Video Page
Figure 4.28 shows the interface of Al-Baqarah Video. In this interface there
have the animation story about Surah Al-Baqarah. The content for this video is “Hello.
My name is Sapi. What do you know about me? Actually, there have the surah in
Alquran that use the name of me. The surah is Al-Baqarah. The story that can relate to
this surah is when Allah SWT commanded to Bani Israel to slaughter the cow. This
surah is number 2th in Al-Quran, it has 286 verse and take down in Medina..” For a
user that want stop, play and pause this video user can press the button at right-down
and for go to the quiz user need to press “LET’S PLAY” button.
58
4.2.29 Al-Baqarah Quiz (Question 1) Interface
Figure 4.29: Al-Baqarah Quiz (Question 1) Page
Figure 4.29 shows the interface of Al-Baqarah Quiz (Question 1). In this
interface user need to choose the right answer to get the score.
59
4.2.30 Al-Baqarah Quiz (Question 2) Interface
Figure 4.30: Al-Baqarah Quiz (Question 2) Page
Figure 4.30 shows the interface of Al-Baqarah Quiz (Question 2). In this
interface user need to choose the right answer to get the score.
60
4.2.31 Al-Baqarah Quiz (Question 3) Interface
Figure 4.31: Al-Baqarah Quiz (Question 3) Page
Figure 4.31 shows the interface of Al-Baqarah Quiz (Question 3). In this
interface user need to choose the right answer to get the score.
61
4.2.32 Al-Baqarah Quiz (Question 4) Interface
Figure 4.32: Al-Baqarah Quiz (Question 4) Page
Figure 4.32 shows the interface of Al-Baqarah Quiz (Question 4). In this
interface user need to choose the right answer to get the score.
62
4.2.33 Al-Baqarah Quiz (Question 5) Interface
Figure 4.33: Al-Baqarah Quiz (Question 5) Page
Figure 4.33 shows the interface of Al-Baqarah Quiz (Question 5). In this
interface user need to choose the right answer to get the score.
63
4.2.34 Al-Fill Video Interface
Figure 4.34: Al-Fill Video Page
Figure 4.34 shows the interface of Al-Fill Video. In this interface there have the
animation story about Surah Al-Fill. The content for this video is “Hello. My name is
Didi. What do you know about me? Actually, there have the surah in Alquran that use
the name of me. The surah is Al-Fill. This surah talks about the punishment of Allah
SWT to the elephant's army that want to destroy the Kaaba.This surah is number 105th
in Al-Quran, it has five verse and takedown in Makkah.The story of this surah is when
Abrahah who is the king at the time give directions to the elephant's army to destroy
the Kaaba. But Allah SWT sents of birds against them and pelting them with pellets of
hard-baked clay.Then they are like leaves eaten by the caterpillar.” For a user that want
stop, play and pause this video user can press the button at right-down and for go to the
quiz user need to press “LET’S PLAY” button.
64
4.2.35 Al-Fill Quiz (Question 1) Interface
Figure 4.35: Al-Fill Quiz (Question 1) Page
Figure 4.35 shows the interface of Al-Fill Quiz (Question 1). In this interface
user need to choose the right answer to get the score.
65
4.2.36 Al-Fill Quiz (Question 2) Interface
Figure 4.36: Al-Fill Quiz (Question 2) Page
Figure 4.36 shows the interface of Al-Fill Quiz (Question 2). In this interface
user need to choose the right answer to get the score.
66
4.2.37 Al-Fill Quiz (Question 3) Interface
Figure 4.37: Al-Fill Quiz (Question 3) Page
Figure 4.37 shows the interface of Al-Fill Quiz (Question 3). In this interface
user need to choose the right answer to get the score.
67
4.2.38 Al-Fill Quiz (Question 4) Interface
Figure 4.38: Al-Fill Quiz (Question 4) Page
Figure 4.38 shows the interface of Al-Fill Quiz (Question 4). In this interface
user need to choose the right answer to get the score.
68
4.2.39 Al-Fill Quiz (Question 5) Interface
Figure 4.39: Al-Fill Quiz (Question 5) Page
Figure 4.39 shows the interface of Al-Fill Quiz (Question 5). In this interface
user need to choose the right answer to get the score.
69
4.2.40 Finish Games Interface
Figure 4.40: Finish Games Page
Figure 4.40 shows the interface of the finish game, this page will appear in last
of every animal’s quiz or when the user finishes answering the last question. The total
score that the user gets also appear at the right-up.
.
70
4.3 CODING
In this application, every process, button, section and page have their own
coding. The coding was write in Microsoft Video Studio.
4.3.1 Next Coding
Figure 4.41: Next button coding
71
4.3.2 Enter Name Coding
Figure 4.42: Enter name coding
72
4.3.3 Score Coding
Figure 4.43: Score coding
4.3.4 Exit Application Coding
Figure 4.44: Exit Application coding
73
CHAPTER 5
CONCLUSION AND SUGGESTIONS OF
IMPROVEMENT
5.1 Benefits of the Project
The learning application project titled The Mobile Learning Application of
Educational Relate to Animal’s Name in Holy Quran can benefit users in helping
children to be more interested in learning and can sharpen the understanding of children
in the educational of Holy Quran. In addition, this package indirectly generates
technology-generation of IT because the use of applications in smartphones and the
android systems are required to use this app.
Among the benefits of this mobile learning application are:
Attract the interest of consumers especially children.
Combines the areas of technology and educational elements in one app.
74
Develop a mobile learning app that has a consistent theme.
5.2 Improvement Suggestions of Applications
The mobile application project titled The Mobile Learning Application of
Educational Relate to Animal’s Name in Holy Quran is successfully completed, but
there are still many weaknesses available. However, the presence of this learning
application can be a driving force for future generations to produce much better learning
application and still not available in the market. Some suggestions to improve this app
are:
The learning app needs to be more creative by adding more animations to suit
the targeted group.
Buttons should be more interactive to be more user-friendly.
Add missions in learning application to make the learning more challenging and
fun.
Have database that user can know their position like high score.
Use more appropriate and more attractive audio and sound.
75
5.3 CONCLUSION
As a conclusion, with this learning game, the elements of fun and entertainment
can be applied so that children can feel that learning using this method is a good way of
learning, as well as helping parents to more easily teach children.
Additionally, this mobile learning has so many benefits in the early childhood
learning process to recognize the animal’s in the Holy Quran. The mobile learning
application of educational relate to animal’s name in Holy Quran can create interest and
motivate children. This will make the child more understand about the Holy Quran. The
application of this learning is an interactive learning in line with the ever-expanding
ICT industry in today's modernization.
76
REFERENCES
1. Ahmad, A. (2014). 12 Animal Stories From The Quran. Affiliate , 119.
2. Bahjat, A. (2012). ANIMALS IN THE GLORIOUS QUR’AN relating their
own stories. Agama Rasmi, 03-05.
3. Faisal, S. A. (2017, july 14). -463- THE ANIMALS IN THE HOLY QURAN.
Retrieved from Authentic Tauheed:
http://www.authentictauheed.com/2013/07/463-animals-in-holy-quran.html
4. Ghazal, R. (2017, may 24). Creatures of the Quran: domesticated animals.
Retrieved from Art & Culture: https://www.thenational.ae/arts-
culture/creatures-of-the-quran-domesticated-animals-1.635674
5. Haris, A. (2013). Ants and bee as Quranic Allegory within Al-quran.
Pendidikan Agama Islam- Ta'lim, 48.
6. Al-Quran (Holy Quran)
77
APPENDIX A (GANT CHART FYP II)
ACTIVITY WEEK
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Project Meeting
with Supervisor
Project Development
Proposal Progress
Presentation & Evaluation
Project Development
Project Testing
Final Year Project Format Writing
Workshop
Project Testing
(continued)
Submit Draft
Report and Documentation of
the project
Preparation for
Final Presentation
Final Presentation
and Panel's Evaluation
Final Thesis
Submission and Supervisor's
Evaluation
78
ATTACHMENT
1) Application Logo
2) Application Poster