muhammad danish affan bin anua - universiti sultan zainal
TRANSCRIPT
MY IQRA’
LEARNING MOBILE APPLICATION FOR KIDS
MUHAMMAD DANISH AFFAN BIN ANUA
BACHELOR OF INFORMATION TECHNOLOGY
(INFORMATIC MEDIA) WITH HONOURS
UNIVERSITY SULTAN ZAINAL ABIDIN
2019
i
DECLARATION
I hereby declare that this report is based on my original work except for and quotations
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 institution.
_____________________________________
Name: Muhammad Danish Affan Bin Anua
Date : ………………………………………
ii
CONFIRMATION
This is to confirm that:
The research conducted and the writing of this report was under my supervision.
______________________________
Name : Pn. Nor Surayati Binti Mohamad Usop
Date: …………………………………………..
iii
DEDICATION
All praises are due to Allah (Glorified and Exalted is He). Indeed, He deserves the
best of thanks and the most beautiful of praises. Without his blessings, I would not be
able to complete this final year project. My hearties to my beloved supervisor, Puan Nor
Surayati Binti Mohamad Usop for the continuous support, valuable guidance and
critical comments throughout the development of the project. Appreciation also goes to
all lecturers who have provided guidance throughout the entire long journey.
In addition, I am grateful for the continuous moral support given by my family even
before the project started to the end of the project submission. A lot of thanks and
appreciation goes especially for my parents for always being there for me along the
iv
hardship and always pray for me. Indeed, the support is given really help to motivate
me to complete this project.
Last but not least, I sincerely thanks to my fellow friends who willing to help me to
complete this project and give a good suggestion in order to improve this project. Lastly,
I would like to acknowledge each and every person who has contributed to the success
of this final year project, whether directly or indirectly. May Allah S.W.T bless all of
them.
v
ABSTRACT
Learning Quran is compulsory for every Muslim. It should be applied as much
as possible at a young age. Starting with the process of knowing the letters of the
hijaiyah and how to pronounce them. My IQRA’ is the other method which is they can
learn with this application digitally. It is very much compatible with today's technology
era. Besides, it is easy to use and quite helping them to understand. With this mobile
application, children will master the hijaiyah letters and continue with the level in a
short amount of time. The application contains learning materials and fun exercises.
vi
ABSTRAK
Pembelajaran Quran adalah wajib bagi setiap muslim. Ia harus diterapkan
sebanyak mungkin pada usia muda. Bermula dengan proses mengenali surat hijaiyah
dan cara mengucapkannya. My IQRA' adalah kaedah lain yang mereka boleh belajar
dengan aplikasi ini secara digital. Ia sangat serasi dengan era teknologi hari ini. Selain
itu, ia mudah digunakan dan cukup membantu mereka untuk faham. Dengan aplikasi
mudah alih ini, kanak-kanak akan menguasai huruf hijaiyah dan meneruskan tahap
belajar dalam masa yang singkat. Aplikasi ini mengandungi bahan pembelajaran dan
latihan menyeronokkan.
vii
CONTENTS
PAGE
DECLARATION i
CONFIRMATION ii
DEDICATION iii
ABSTRACT v
ABSTRAK vi
CONTENTS vii
LIST OF TABLES xi
LIST OF FIGURES xii
LIST OF ABBREVIATIONS xv
CHAPTER I INTRODUCTION
1.1 Background 1
1.2 Problem statement 2
1.3 Objectives 3
1.4 Scopes 3
1.5 Limitation of work 3
1.6 Expected result 4
viii
1.7 Milestones and Activities 4
CHAPTER II LITERATURE REVIEWS
2.1 Introduction 7
2.2 Existing systems 8
2.3 Journal 8
2.4 Analysis gap 11
2.5 Conclusion 18
CHAPTER III METHODOLOGY
3.1 Introduction 19
3.2 Methodology model 20
3.2.1 Analysis phase 20
3.2.2 Design phase 21
3.2.3 Development phase 21
3.2.4 Implementation phase 22
3.2.5 Evaluation phase 22
3.3 Hardware and software 22
3.3.1 Hardware 22
3.3.2 Software 23
ix
3.4 Storyboards 23
3.5 Conclusion 35
CHAPTER IV IMPLEMENTATION AND TESTING
4.1 Introduction 36
4.2 Implementation 36
4.2.1 Buttons and navigation 37
4.2.2 Animation and Sound effect 38
4.2.3 Action script 39
4.3 Testing result 43
4.3.1 Learning activity 44
4.3.2 Game actvity 44
4.4 Interface 44
4.4.1 Loading page 45
4.4.2 Home page 45
4.4.3 ‘Belajar’ content 46
4.4.4 ‘Tahap 1’ content – huruf hijaiyah 47
4.4.5 ‘Tahap 2’ content – baris huruf hijaiyah 47
4.4.6 ‘Tahap 2’ content – huruf hijaiyah baris atas 48
4.4.7 ‘Tahap 3’ content – huruf hijaiyah bersambung 49
4.4.8 ‘Kuiz’ content 50
x
4.4.9 ‘Teka bunyi’ start page 51
4.4.10 ‘Teka bunyi’ stage one 51
4.4.11 ‘Teka bunyi’ score result page 52
4.4.12 ‘Memori’ start page 53
4.4.13 ‘Memori’ stage one 53
4.4.14 ‘Memori’ score result page 54
4.4.15 ‘Golf’ start page 55
4.4.16 ‘Golf’ stage one 55
4.4.17 ‘Golf’ score result page 56
4.4.18 ‘Golf’ pause option page 57
4.5 Conclusion 58
CHAPTER V CONCLUSION
5.1 Introduction 59
5.2 Project Contribution 59
5.3 Problems and Limitations 60
5.4 Future Works 60
5.5 Conclusion 61
REFERENCES 62
APPENDIX 64
xi
LIST OF TABLES
TABLE TITLE PAGE
1.1 Milstones and activites 5
2.1 Analysis gap 12
xii
LIST OF FIGURES
FIGURE TITLE PAGE
2.1 Belajar Iqro Dengan Audio 15
2.2 Arabic Safari 16
2.3 Kids Qurani Qaida Teacher 16
2.4 Rainbow Iqra’ 17
2.5 Belaja Membaca Al Quran 17
2.6 Scholl of Iman 18
3.1 ADDIE model process 20
3.2 Loading page 24
3.3 Home page 24
3.4 ‘Belajar’ content 25
xiii
3.5 ‘Tahap 1’ content – huruf hijaiyah 26
3.6 ‘Tahap 2’ content – baris huruf hijaiyah 26
3.7 ‘Tahap 3’ content – huruf hijaiyah bersambung 27
3.8 ‘Kuiz’ content 28
3.9 ‘Teka bunyi’ start page 28
3.10 ‘Teka bunyi’ stage one 29
3.11 ‘Teka bunyi’ score result page 29
3.12 ‘Memori’ start page 30
3.13 ‘Memori’ stage one 31
3.14 ‘Memori’ score result page 31
3.15 ‘Golf’ start page 32
3.16 ‘Golf’ stage one 33
3.17 ‘Golf’ score result 34
3.18 ‘Golf’ pause option page 35
4.1 Home button 37
4.2 Back button 37
4.3 Loading page 38
4.4 Sound effect in a button inside frames 39
4.5 Script for navigation 39
4.6 Script for setting up the score function 40
xiv
4.7 Script for score point in correct answer 40
4.8 Script for setting up save data function 41
4.9 Script of condition for save data function 41
4.10 Script to display score point 41
4.11 Accelerometer function 42
4.12 Create boundaries 43
4.13 Hit target action 43
4.14 Loading page 45
4.15 Home page 46
4.16 ‘Belajar’ content 46
4.17 ‘Tahap 1’ content – huruf hijaiyah 47
4.18 ‘Tahap 2’ content – huruf hijaiyah 48
4.19 ‘Tahap 2’ content – huruf hijaiyah baris atas 49
4.20 ‘Tahap 3’ content – huruf hijaiyah bersambung 50
4.21 ‘Kuiz’ content 50
4.22 ‘Teka bunyi’ start page 51
4.23 ‘Teka bunyi’ stage one 52
4.24 ‘Teka bunyi’ score result page 52
4.25 ‘Memori’ start page 53
4.26 ‘Memori’ stage one 54
xv
4.27 ‘Memori’ score result page 54
4.28 ‘Golf’ start page 55
4.29 ‘Golf’ stage one 56
4.30 ‘Golf’ score result page 57
4.31 ‘Golf’ pause option page 58
LIST OF ABBREVIATIONS
ABBREVIATION MEANING PAGE
App Application 2
2D Two dimensional 12
ISD Instruction system design 20
ADDIE Analysis, Design, Develop, Implement, Evaluate 20
1
CHAPTER I
INTRODUCTION
1.1 Background
Islam is a religion brought by the Prophet Muhammad. Islam has existed since
then. Islam is a religion that acknowledges that no God is entitled to be worshiped
except Allah and the Prophet Muhammad is the Messenger of Allah. Islam makes the
Quran and Hadith the main reference of its followers. The Qur'an is the great miracle
of the Prophet Muhammad and has existed more than a thousand four hundred years
ago. Islam requires its followers to read, study and understand the Quran and make it a
guide in life.
Studying the Al Quran is better if it starts when it is small. It should be nurtured
by older adults like parents and teachers to children to produce a generation of Al-Quran
literate in the future. Say the saying, bend the bamboo from the bamboo shoots.
2
Studying the Quranic knowledge should be in line with age. This is especially important
because the level of the child's mind is much different from the level of the mind of
adults. Children can process only a small amount of information compared to adults.
For children, studying Quranic knowledge at the very beginning is to recognize the Jawi
letters contained in the Quran, the way the letters and the reading lines are written.
Therefore, a project will be developed to help children learn Quranic knowledge
called My IQRA '. My IQRA 'is a smartphone app that contains early education
materials for children to learn Quranic knowledge. This app can be downloaded using
the Android platform that became the smartphone's operating system. The app is
complete with easy-to-understand and fun modules.
1.2 Problem Statement
Studying the Quran in ancient times is a way of learning and requires individual
scripts to learn it. But many argue that this method is less effective nowadays. Today's
children are fonder of entertainment than learning. There is also an opinion that the way
the teacher or parent is reluctant and encourages the laziness of learning. For children,
learning is something boring and tiresome.
The idea behind this project is to upgrade learning techniques to make children
more comfortable and fond of learning. The concept of learning while having fun is the
main thing that is applied in this project. It also fits into the current circulation where
learning can also be done through digital media platforms.
Based on all the above statements, it is important that this project implemented
in order to ensure that children's learning is guaranteed in the future.
3
1.3 Objectives
The aim of this project is to make learning activities a fun activity. However,
this lesson should be guided and supervised by teachers and parents. This project
focuses on some of the following things.
i. To help children understand better, step by step.
ii. To develop interactive learning app.
iii. To implement fun content for users (kids).
1.4 Project Scope
Provide important convergence on app developments for children with problems
with Iqra’ learning at their young age.
• Admin
The role of an admin is to make change by reading, updating or deleting the
application.
• User (Children)
The user which is children can learn and do exercises.
1.5 Limitation of Work
This application has its own limitation of works as mentioned below:
• Muslims use
4
Special for Muslim users because it contains materials from the Quran.
Non-Muslim users are not encouraged to use this application.
• Android OS only
The platform used by this application project is Android because it is
easier and suitable for developers to develop.
• Supervision by parent or adult might be necessary
This application does not guarantee that the user will understand its
contents one hundred percent. Therefore supervision of older people is
necessary to avoid misunderstanding of the content.
1.6 Expected Result
• The user can anywhere and anytime with this application.
• The application can continue using interactive learning method.
• This application is well functioned.
1.7 Milestones and Activities
The milestones and activities will follow the method used to develop to project
which is the ADDIE model. This method will be explained in chapter 3. The table below
shows the activities involve to develop this project.
5
Table 1.1 Milestones and Activities
N
o
Activities Months (7 months)
1. First
week
Septem
ber
–
Second
week
Septem
ber
Third
week
Septem
ber
-
Fifth
week
October
Sixth
week
Octobe
r
-
Ninth
week
Novem
ber
Tenth
week
Novem
ber
-
Fifteent
h week
Decem
ber
First
week
Janua
ry –
Fourt
h
week
Janua
ry
Fifth
week
Februa
ry-
Eighth
week
Februa
ry
Nineth
week
March
-
Thirtee
nth
Week
April
2. Topic
Discussio
n and
Determina
tion
Project
Title
Proposal
3. Proposal
Writing
Literature
Review
Proposal
Progress
Presentati
on &
Evaluation
4. Discussio
n
Correction
Proposal
Proposed
Solution
Methodol
ogy
Proof of
Concept
5. Drafting
Report of
the
proposal
Submit
draft of
report to
supervisor
6
Seminar
Presentati
on
Correction
Report
Final
Report
Submissio
n
6. Develop
Project
7. Testing
Project
8. Final
Report
Submissio
n
7
CHAPTER II
LITERATURE REVIEWS
2.1 Introduction
This chapter is about literature review for the application that will be developed.
A literature review is a text scholarly paper which includes, which include the current
knowledge including substantive findings, as well as the theoretical and methodical
contribution to the related works. There are a few applications related to Iqra’ learning.
However many developers did not use suitable methods to increase the productivity of
learning for kids.
8
2.2 Existing Systems
To facilitate this project, some examples of existing mediums related to this
project have been reviewed.
• Mobile application
i. Belajar Iqro Dengan Audio (Iman Satya Wirawan)
ii. Arabic Safari (Ardha Multi Parama, PT)
iii. Kids Qurani Qaida Teacher (Darussalam Publishers and
Distribution)
iv. Rainbow Iqra’ (Cool Code Sdn Bhd)
v. Belajar Membaca Al Quran (Iman Setiawan)
vi. School of Iman (MEASAT Broadcast System Sdn Bhd)
2.4 Journal
Media Pembelajaran Pengenalan Huruf Hijaiyah Untul Anak Usia Dini 2-3 Tahun
In the world of education, learning media is not a new thing. Many schools are
already using computers in the learning process. The images and sounds that appear
will not make children get bored quickly so it makes the children wants to know more.
In this study produced teaching media literacy hijaiyah which is one of the
curriculum for the education of children aged 2-3 years. Instructional media is equipped
with voice pronunciation of letters hijaiyah. In addition to learning media is also
equipped with a guessing menu that is divided into two levels. With the child's learning
media is expected to be able to make the process of learning to know the letters hijaiyah
9
accompanied by sound pronunciation can be happy with no load and coercion from
teachers. (Telematika, Lisna Zahrotun, 2015)
The Role of Game Element in Improving Jawi Skills through a Mobile Game ‘G-
Jawi’
Since the game-based mobile application exist, it turns out to be an exposure to
education that makes education more attractive and motivated to learn due to the
presence of game elements.
The inclusion of creative features such as game elements should attract students
to explore the Jawi script. A pre- experimental one- group pre- test and post- test study
was conducted in which a game-based mobile application for learning Jawi subject
named G-Jawi was developed and tested among 20 primary school students in order to
observe how the elements of the game in the mobile app impacted their Jawi spelling
skills. The apps were also evaluated by 5 teachers and the findings shows that the game-
based mobile application was able to improve the students’ performance. This finding
was supported by positive results amongst the students which revealed a mean value for
the post- test was higher than the pre- test of 89.00
To conclude, this technique has successfully improved student’s understanding
of Jawi better than the traditional learning methods.
(International Journal of Interactive Mobile Technologies [iJIM], Noor Asmina bin
Mohd Rashid, 2018)
10
The Benefits of Multimedia Learning
This article explains some of the advantages of multimedia learning. This article
really helps strengthen the purpose of this project. The benefits are:
[1] Deeper understanding
According to research, a benefit of multimedia learning is that it takes advantage
of the brain's ability to make connections between verbal and visual representations of
content, leading to a deeper understanding, which in turn supports the transfer of
learning to other situations. All of this is important in today’s 21st century classrooms,
as we are preparing students for a future where higher-level thinking, problem solving
and collaborative skills will be required.
[2] Improved problem solving
A large percentage of the human brain dedicates itself to visual processing.
Thus, using images, video and animations alongside a text stimulates the brain. Student
attention and retention increase. Under these circumstances, in a multimedia learning
environment, students can identify and solve problems more easily compared to the
scenario where teaching is made possible only by textbooks.
[3] Increase positive emotions
According to psychologist Barbara Fredrickson, experiencing positive emotions makes
people see more possibilities in their lives. Using multimedia during instructions
impacts student's mood during the learning process. With a positive attitude they learn
better and tend to be more proactive.
[4] Access to vast variety of information
11
With computers, tablets, smartphones and the internet, students are today better
equipped than ever to search and find the information they need. A study revealed that
95% of students who have access to internet, use it to search for online information.
Sharing the information and participating in class discussions is done in a more
confident way when access to information is as easy as today.
[5] World exploration
There is no surprise here. With the help of multimedia children can explore and
learn about places they would never been to. In a geography class, students can explore
different cities of the world, the tallest mountains and the most dangerous jungles. In a
science class, space and planets exploration is now possible. In a biology class, the
dissection of rare animals and different habitats exploration are like a walk in a park for
students benefiting of a multimedia learning environment.
Altogether, multimedia learning environments have a direct effect on learning and even
on growing as a person. An effect that differs and can’t be achieved as easy whilst using
traditional education materials. Therefore, it is no wonder the edtech business is
increasing and schools desire more and more to create multimedia learning
environments for their students.
(NUITEQ Collaborative Software, Alina Chioran, 2016)
2.4 Analysis Gap
This section will show you a comparison between the existing mobile
applications. This analysis was made to ensure the smoothness of the process of this
12
project and for seeking to enhance or improve the project. Below is the table of analysis
gap between existing mobile applications.
Table 2.1 Analysis Gap
APPLICATION
NAME
DEVELOPER OVERVIEW METHOD/TECHNIQUE
Belajar Iqro
Dengan Audio
Iman Satya
Wirawan
- This app
has a
learning
method by
listening to
sounds to
recognize
letters.
- - This app
has several
levels of
learning
and is
suitable for
all groups
of people.
- Uses audio that
only sounds when
the icon is
pressed.
Arabic Safari Ardha Multi
Parama, PT
- The app
has an
interesting
interface
such as
animal and
animal
cartoon
images.
- Have
several
levels of
learning
and the user
needs to go
through the
preceding
stage to a
higher
level.
- Use background
music during
application usage
sessions.
- Uses 2D
animation
- Provide voice
recorder function
- Store current data
or usage
13
Kids Qurani
Qaida Teacher
Darussalam
Publishers and
Distribution
- This app
has a series
of learning
as well as
exercises.
Users can
learn and at
the same
time
answer
quizzes.
Uses audio that
only sounds when
the icon is
pressed.
- Provide a
playback audio
function.
Rainbow Iqra’ Cool Code
Sdn Bhd
- This app
provides
user-
friendly
training and
has an
interface
and
animation
that appeals
to users.
- This app
also
features
video game
features
such as
EXP level
(experience
level),
featuring
mission
progress
and can
change the
name and
the avatar
in custom.
- Use background
music during
application usage
sessions.
- Uses 2D
animation.
- Uses audio that
only sounds when
the icon is
pressed.
- Store current data
or usage
Belajar
Membaca Al
Quran
Iman Setiawan - This app
has a series
of learning
as well as
exercises.
Users can
learn and at
the same
- Uses audio that
only sounds when
the icon is
pressed.
- Provides audio
playback
function.
14
time
respond to
quizzes
provided in
the app.
- This
application
has several
levels of
learning
and is
suitable for
use by all
walks of
life.
School of Iman MEASAT
Broadcast
System Sdn
Bhd
- This app
contains
not only
learning
about iqra
but also
providing
basic
Islamic
learning.
- Has an
interface
and
animation
that appeals
to users.
- Have a
series of
learning
and also
training.
Users can
learn and at
the same
time
respond to
quizzes
- Use background
music during
application usage
sessions.
- Uses audio that
only sounds when
the icon is
pressed.
- Uses 2D
animation.
- Store current data
or usage
15
provided in
the app.
- Show
user’s
current
progresses.
Below are some the screenshots of the interface from all of the compared
application.
Figure 2.1 Belajar Iqro Dengan Audio
16
Figure 2.2 Arabic Safari
Figure 2.3 Kids Qurani Qaida Teacher
17
Figure 2.4 Rainbow Iqra’
Figure 2.5 Belajar Membaca Al Quran
18
Figure 2.6 School of Iman
2.5 Conclusion
This chapter discusses the collected literature review that had been reviewed
during the feasibilities studies. The literature review helps the developer to discover the
problem of previous research which needs to improve and overcome the problem. The
main method that is suitable to use in the development of the mobile app is an interactive
learning method.
19
CHAPTER III
METHODOLOGY
3.1 Introduction
Basically, this chapter explains the detail of the methodology that is used in My
IQRA’ application development. The project methodology is important in every project
because it helps to organize investigation in a scientific way to overcome problems, to
discover new facts or truth about the subject in order to achieve the objectives of the
project. In order to have a good project, it should begin with a good understanding of
the user’s needs. There are many approaches that can be used in the development of a
mobile application project. ADDIE Model is one of the approaches that will be used in
this project.
20
3.2 Methodology Model
Instruction System Design (ISD) that is used to develop My IQRA’ application
is ADDIE model. Basically, ADDIE model has five phases which are Analysis, Design,
Development, Implementation and Evaluation. The ADDIE model is an iterative
instructional design process, where the results of the formative evaluation of each phase
may lead the instructional designer back to any previous phase. These phases sometimes
overlap and can be interrelated. However, they provide a dynamic, flexible guideline
for developing effective and efficient instruction.
Figure 3.1 ADDIE model process
3.2.1 Analysis Phase
The analysis is the first phase that is contained in the ADDIE model. The
analysis is the study we do in order to figure out what to do. (Sheldon, 2001) At this
stage, we need to identify the need to develop this My IQRA’ mobile application. Then,
the activities are involved in this phase is identifying the problem statement, the
objectives or goals of the project and the scope key actions that are included in the
application. In this My IQRA’ are focusing on learning basic hijaiyah letters which
consist of how to pronounce them with different attributes. The analysis is also carried
out by doing a comparison between existing products that are using mobile application
technology in learning hijaiyah. Through the analysis, the weaknesses of the existing
Analyse Design Develop Implement Evaluate
21
application that are relatable to this learning can be identified. All information gathered
were used to develop goals and objective of developing mobile My IQRA’ application.
3.2.2 Designing Phase
During the design phase, the information gathered during the analysis phase is
reviewed and compiled to build the project. In the design stage, it is necessary to create
a storyboard or interface of the mobile application. This means that it is necessary to
have all the accurate guideline to ease the step in this development process. This phase
requires a logical and creative thinking skills. All the characters also have been created
in this phase. These characters will be used from the start until the end of the mobile
My IQRA’ application.
3.2.3 Development Phase
This is the third phase of the ADDIE model. With all the information gathered
at the analysis and design phase, then this mobile My IQRA’ are developed. Most of
the development process was done in Adobe Flash CS6. All the materials that are
involved in the design phase will be integrated and customize in this phase according
to the storyboard. In this development phase also, it uses any approach or design that
has been agreed upon in the design stage. The application will have various graphics,
sound effects and so on are provided so users do not get bored in the process of playing
this game app.
22
3.2.4 Implementation Phase
The ready-to-formed mobile application should be presented to test the
effectiveness and to see unnoticed problems during the design and development phase
that may exist. This implementation phase is implemented by presenting to providers
and partners to meet the criteria set out in the analysis phase. From the observations
performed, the repair or recovery process will be implemented before the application is
actually issued or used officially.
3.2.5 Evaluation Phase
Evaluation involves the process of obtaining feedback from users on the content,
strategies, graphics, audio, interfaces and so forth that are available in this app by either
supervision, testing, questionnaire, interviews and so on to ensure it is appropriate or
not to use.
3.3 Hardware and Software
This section will explain the hardware and software needed to develop this final year
project. It is also to ensure the process to run smoothly.
3.3.1 Hardware
i. USB drives
- To store the components for developing the project.
23
ii. Computer/Laptop
- To run the application development process.
iii. Android smartphone
- To install and test the product.
3.3.1 Software
i. Adobe Photoshop CS6
- To design the backgrounds, buttons, icons and interfaces.
ii. Adobe Flash Professional CS6
- Create icons, buttons, functions, animation, transition effects, and sound effects,
insert voice input, and produce android mobile application file (APK).
3.1 Storyboard
The storyboard is one of the things that a developer might do before creating a
mobile application. The storyboard is important as a guideline to the developer for
developing an interactive mobile application.
The app will show the loading page after launched and immediately switch the
home page and stop as shown in figure 3.2.
24
Figure 3.2 Loading page
The user will get two options either they want to learn or play games in figure
3.3.
Figure 3.3 Home page
25
The home page will switch to other options where there are three levels of
learning. Figure 3.4 shows that each level contains the learning material according to
the level.
Figure 3.4 ‘Belajar’ content
The first level is to teach about the hijaiyah letters and their pronunciations in figure
3.5.
26
Figure 3.5 ‘Tahap 1’ content – huruf hijaiyah
The second level is to teach about the hijaiyah letters and their pronunciations
with ‘baris’ in figure 3.6. There are six of them.
Figure 3.6 ‘Tahap 2’ content – baris huruf hijaiyah
27
The third level in figure 3.7 will teach the user about what will happen to each
of hijaiyah letters if they meet their neighbours and their pronunciation.
Figure 3.7 ‘Tahap 3’ content – huruf hijaiyah bersambung
There are three types of games which are ‘Teka bunyi’, Memori, and Golf as
shown in figure 3.8. Each game is an exercise for what they learned in the learning
session.
28
Figure 3.8 ‘Kuiz’ content
When the user pressed the ‘Teka bunyi’ button, the page automatically switched
the start page of the game which contains the instruction text on the page in figure 3.9.
Figure 3.9 ‘Teka bunyi’ start page
29
There are ten stages in ‘Teka bunyi’ game. One of them is shown in figure 3.10.
Figure 3.10 ‘Teka bunyi’ stage one
After the user had been through all the stages, it will show the score result and
the highest score in figure 3.11.
Figure 3.11 ‘Teka bunyi’ score result page
30
When the user pressed the ‘Memori’ button, the page also automatically
switched the start page of the game in figure 3.12 which contains the instruction text
on the page.
Figure 3.12 ‘Memori’ start page
There are only five stages in ‘Memori’ game and one of them is shown in figure
3.13.
31
Figure 3.13 ‘Memori’ stage one
After the user had been through all the stages, in figure 3.14 will show the score
result and the highest score.
Figure 3.14 ‘Memori’ score result page
32
When the user pressed the ‘Golf’ button, figure 3.15 shows the page that
automatically switched the start page of the game which contains the instruction text
on the page.
Figure 3.15 ‘Golf’ start page
There are ten stages in the ‘Golf’ game. One of them is shown in figure 3.16.
The user has to move the ball to fall into the correct hole by moving their device.
33
Figure 3.16 ‘Golf’ stage one
After the user had been through all the stages, figure 3.17 will show the score
result and the highest score.
34
Figure 3.17 ‘Golf’ score result page
When the ball falls into an incorrect hole, the game paused and will give the
user two options either they want to try again at the current stage or finish playing as
shown in figure 3.18.
35
Figure 3.18 ‘Golf’ pause option page
3.5 Conclusion
This chapter explains the detail of the methodology used for the entire
developing process. It also describes the software and the hardware requirement for the
project and describes the flow of the app through the storyboard design.
36
CHAPTER IV
IMPLEMENTATION AND RESULT
4.1 INTRODUCTION
We will discuss the implementation of the methodology discussed in the
previous chapter and testing to obtain the result of each implementation in this chapter.
Implementation is executed to ensure the system is developed according to the main
objectives of the system and fulfil the user requirement. Testing will be executed so that
the developer will recognize the defects as soon as possible and repair it immediately.
4.2 IMPLEMENTATION
The implementation phase refers to the actual delivery of the instruction. The
purpose of this phase is the effective and efficient delivery of instruction. This project
37
is implemented as an Android application by using Adobe Flash Professional software
which popularly used for creating animation. It also has an action script embedded in
the software, making it the suitable software to run the project. Therefore, this will help
develop, design, code, test, debug and execute the main process of the project.
4.2.1 Button and Navigation
The button is very important when developing is an interactive mobile app. It is
also important for user navigation. In this mobile application has two main navigation
buttons which are the home button as shown in figure 4.1, and the back button as shown
in figure 4.2. These two buttons are visible almost every page in this application.
Figure 4.1 Home button
Figure 4.2 Back button
The home button will navigate the user to the home page every time they tab
and switch the current page to home page. On the other hand, the back button will
38
navigate the user to the previous page. When the button is tabbed, the page
automatically switches to the previous page.
4.2.2 Animation and Sound Effect
One of the objectives of this application is to implement fun content for the user
which is the kids. The animation is necessary for the development of multimedia
courseware application. Besides, it can attract the user to use this app. In figure 4.3
shows the loading animation in the loading page after the app was launched. The red
bar starts filling across the screen horizontally and switches to the home page.
Figure 4.3 Loading page
Meanwhile, the sound effect also important when developing a multimedia
courseware application. The app implemented all the buttons with sound effect. Figure
39
4.4 shows the implementation of a button sound effect in Adobe Flash Professional
software. There is also background music that will play along continuously when the
app launched using the same method used to implement sound effect to a button.
Figure 4.4 Sound effect in a button inside frames
4.2.3 Action script
Action script is an object-oriented programming language for Adobe Flash
Player. This action script is used in this project to create conditions, variable, object
class and much more. In figure 4.5 below shows the script implemented for navigation
through the app. Almost every page in the app contains this script. Another five show
the script to implement the score, to save and display them on the screen in figure 4.6,
figure 4.7, figure 4.8, figure 4.9, and figure 4.10 below.
Figure 4.5 Script for navigation
40
Figure 4.6 Script for setting up the score function
Figure 4.7 Script for score point in correct answer
41
Figure 4.8 Script for setting up save data function
Figure 4.9 Script of condition for save data function
Figure 4.10 Script to display score point
The other function implemented in this application accelerometer function. This
function used to detect the orientation of the phone. This function is used to create a
golf game. Figure 4.11 shows the script for setting the accelerometer function. The
42
boundaries were created to prevent the ball from exiting the frame as shown in figure
4.12. There is also the script for what will happen if the ball hit the hole in figure 4.13.
Figure 4.11 Accelerometer function
43
Figure 4.12 Create boundaries
Figure 4.13 Hit target action
4.3 Testing result
After the development of the application are already complete. This application
will test the learning activity and game activity. The learning activity involves the user
44
to listen and read the content on the screen. The game activity, however, involves more
than listening and reading. It requires the user to pay full concentration.
4.3.1 Learning activity
The learning activity in My IQRA’ app consist of three levels of learning. When
the user clicks ‘Belajar’ button, the learning process begins. The home page will switch
to other options where there are three levels of learning. Each level contains the learning
material according to the level. The first level is to teach about the hijaiyah letters and
their pronunciations. The second level is to teach about the hijaiyah letters and their
pronunciations with ‘baris’. There are six of them. The third level will teach the user
about what will happen to each of hijaiyah letters if they meet their neighbours and their
pronunciation. The learning session is done but can be repeated.
4.3.2 Game activity
The game activity in My IQRA’ app consists of three types of games. The first
game activity will train the user to recognize the hijiayah letters and their
pronunciations. The second game activity will train to be able to distinguish the ‘baris’
of the letters and memorise them. The third game activity will train the user on how to
combine the letter between them.
4.4 Interface
This section will explain more detail about what happened in the application
with the screenshots of the pages
45
4.4.1 Loading page
The loading page will appear when the app launched by the user. It is the first
interface in the application. Figure 4.14 shows the loading page of the application.
Figure 4.14 Loading page
4.4.2 Home page
The home page is the main page of this app. The user will have to choose
between learning session and game session. Figure 4.15 shows the home page.
46
Figure 4.15 Home page
4.4.3 ‘Belajar’ Content page
In this page, there are three buttons which indicate the levels of learning hijaiyah
as shown in figure 4.16.
Figure 4.16 ‘Belajar’ content
47
4.4.4 ‘Tahap 1’ content – huruf hijaiyah
In this level the user will learn to recognise the letters and their pronunciations.
The user will have to tab the icon letter to trigger the audio tagged in the button as
shown in figure 4.17.
Figure 4.17 ‘Tahap 1’ content – huruf hijaiyah
4.4.5 ‘Tahap 2’ content – huruf hijaiyah
In this page user will have to choose the ‘baris’ for the letter. There are six
button that will bring the user to the specific interface as show in figure 4.18.
48
Figure 4.18 ‘Tahap 2’ content – baris huruf hijaiyah
4.4.6 ‘Tahap 2’ content – huruf hijaiyah baris atas
In this page the user will learn to recognise the letters and their pronunciations
with six different of the ‘baris’. The user will have to tab the icon letter to trigger the
audio tagged in the button as shown in figure 4.19.
49
Figure 4.19 ‘Tahap 2’ content – huruf hijaiyah baris atas
4.4.7 ‘Tahap 3’ content – huruf hijaiyah bersambung
In this page, the user will learn the form of combined letters between one
another. When the button is tabbed the combined letters will appear in the panel above
the buttons with sounds. There five more pages to provide all the possible combinable
letter. Figure 4.20 shows the interface of the page.
50
Figure 4.20 ‘Tahap 3’ content – huruf hijaiyah bersambung
4.4.8 ‘Kuiz’ content
In this level, the user will enter the game activity session. There are three types
of game. The user will have to tap the icon to enter the game as shown in figure 4.21.
Figure 4.21 ‘Kuiz’ content
51
4.4.9 ‘Teka bunyi’ start page
This page is the start page of ‘Teka bunyi’ game. The game started as the user
tap the start button as shown in figure 4.22.
Figure 4.22 ‘Teka bunyi’ start page
4.4.10 ‘Teka bunyi’ stage one
This is the interface of stage one in this particular game. There is an arrow which
points to the button icon. It supposed to be tap before tap the correct answer. The correct
answer will get 10 marks each. Figure 4.23 shows the interface of the page.
52
Figure 4.23 ‘Teka bunyi’ stage one
4.4.11 ‘Teka bunyi’ score result page
After the user has been through all ten stages, finally this page will display the
score result and the highest score as shown in figure 4.24.
Figure 4.24 ‘Teka bunyi’ score result page
53
4.4.12 ‘Memori’ start page
This page is the start page of ‘Memori’ game. The game started as the user tap
the start button as shown in figure 4.25.
Figure 4.25 ‘Memori’ start page
4.4.13 ‘Memori’ stage one
When the game started, the page will show the letter with ‘baris’ in a short
amount of time and quickly hide them. The hint will appear in a big platform soon after
the answers were hidden. The correct answer will get 20 marks each. Figure 4.24 shows
the interface of the page.
54
Figure 4.26 ‘Memori’ stage one
4.4.14 ‘Memori’ score result page
After the user has been through all five stages, finally this page will display the
score result and the highest score as shown in figure 4.27.
Figure 4.27 ‘Memori’ score result page
55
4.4.15 ‘Golf’ start page
This page is the start page of ‘Golf’ game. The game displayed in verticle
view. The game started as the user tap the start button as shown in figure 4.28.
Figure 4.28 ‘Golf’ start page
4.4.16 ‘Golf’ stage one
In this particular game, the user must move the ball with a specific letter on it
to the correct hole which also has a specific letter on it. The hint will blink repeated to
56
tell the user that they have to move the ball to the correct hole. In stage one, there is
only one hole. The purpose behind this creation is to give the user to understand how
to play the game. Figure 4.29 shows the interface of the page.
Figure 4.29 ‘Golf’ stage one
4.4.17 ‘Golf’ score result page
After the user has been through all five stages, finally this page will display the
score result and the highest score as shown in figure 4.30.
57
Figure 4.30 ‘Golf’ score result page
4.4.18 ‘Golf’ pause option game
This page will automatically switch when the ball hit the wrong hole. The user
will have two option either to end the game or to keep trying to complete the game.
When the red button is tap, the game will over and automatically switch to score result
page. When the blue button is tap, the game will resume at the current stage. Figure
4.31 below shows the interface of the page.
58
Figure 4.31 ‘Golf’ pause option page
4.5 Conclusion
In a nutshell, implementation in this chapter has been described and show all the
user interfaces in the Android application. It can act as a guide for a new user to use this
application. Testing also has been done to ensure that all the functionality achieved and
run smoothly. My IQRA’ could use a better improvement in future.
59
CHAPTER V
CONCLUSION
5.1 Introduction
In this chapter, we will discuss the contribution of My IQRA’, the problems and
limitations during the project development of the project and future work or
recommendations to improve this particular project.
5.2 Project Contribution
My IQRA is an interactive learning mobile app designed for children. It has
been developed using multimedia authoring software. It provides learning and learning
materials so that the users can learn and play at the same time. Some multimedia
60
elements have been implemented to give users a fun and fulfilling experience. The
project also strongly believes that learning can be such an exciting activity.
5.3 Problems and Limitations
There are some problems and limitations that may be a major constraint in the
My IQRA’ project such as:
i. This app only works offline and had no large database functionality.
ii. My IQRA’ mobile app does not provide more advanced learning material.
iii. Limited information resources related to application development.
iv. Lack of exposure in multimedia and technology.
5.4 Future Work
My IQRA’ app still has a lot to be improved. Here are some suggestion for the
app to work more efficient in the future. The suggestions are:
i. The application must apply more elements of multimedia such as video,
graphic, text and audio.
ii. The application needs to have a larger database to store a lot of data.
iii. This application also may apply some algorithm to have a more realistic
experience.
iv. This application could provide a better and advanced learning material and
activities.
61
5.5 Conclusion
In conclusion, My IQRA’ is an interactive mobile application for kids to learn
and do exercises. This application is none other than just an alternative way to facilitate
learning. The suitable method is used in the development process such as ADDIE model
to ensure the process are running smoothly according to the storyboard. Several
elements of multimedia were applied during the development process. This project was
developed to achieve the objectives stated in the earlier chapter.
62
REFERENCES
AiraSoft. (2 July, 2016). Belajar Iqro dengan Audio. (AiraSoft) Retrieved from Google
Play:
https://play.google.com/store/apps/details?id=com.airasoft.belajariqro&hl=en
Ardha Multi Parama, P. (18 July, 2016). Arabic Safari. (Ardha Multi Parama, PT)
Retrieved from AppAdvice: https://appadvice.com/app/arabic-
safari/1134957141
Berhad, A. M. (16 October, 2016). School of Iman. (Astro Malaysia Holdings Berhad)
Retrieved from Google Play.
Chioran, A. (32 November, 2016). 5 Benefits of Multimedia Learning. Retrieved from
NUITEQ Collaborative Software: https://www.nuiteq.com/company/blog/5-
benefits-of-multimedia-learning
Distributors, D. P. (2 June, 2017). Qurani Qaida-Quran Teacher. (Darussalam
Publishers and Distributors) Retrieved from Google Play:
https://play.google.com/store/apps/details?id=com.darussalam.quraniqaida&hl
=en
Mohd Rashid, N. A. (2018). The Role of Game Elements in Improving Jawi Skills.
International Journal of Interactive Mobile Technologies, xii(7), 20. Retrieved
from https://online-journals.org/index.php/i-jim/article/view/9636/5265
Playlab, C. C. (8 October, 2018). Rainbow Iqra'. (Cool Code Sdn Bhd) Retrieved from
Google Play:
https://play.google.com/store/apps/details?id=com.coolcode.rainbowiqra
Setiawan, I. (11 January, 2016). Belajar Membaca AlQuran. (I. Setiawan, Producer)
Retrieved from App Store:
https://itunes.apple.com/US/app/id1071722789?mt=8
63
Zahrotun, L. (July, 2015). Media Pebelajaran Pengenalan Huruf Hjaiyah Untuk Anak
Usia Dini 2-3 Tahun. Telematika, xii(2), 75-81. Retrieved from
http://jurnal.upnyk.ac.id/index.php/telematika/article/view/1405
64
APPENDIX
65
APPENDIX A (GAN CHART )
66
APPENDIX B (MILESTONES)
N
o
Activities Months (7 months)
1. First
week
Septem
ber
–
Second
week
Septem
ber
Third
week
Septem
ber
-
Fifth
week
October
Sixth
week
Octobe
r
-
Ninth
week
Novem
ber
Tenth
week
Novem
ber
-
Fifteent
h week
Decem
ber
First
week
Janua
ry –
Fourt
h
week
Janua
ry
Fifth
week
Februa
ry-
Eighth
week
Februa
ry
Nineth
week
March
-
Thirtee
nth
Week
April
2. Topic
Discussio
n and
Determina
tion
Project
Title
Proposal
3. Proposal
Writing
Literature
Review
Proposal
Progress
Presentati
on &
Evaluation
4. Discussio
n
Correction
Proposal
Proposed
Solution
Methodol
ogy
Proof of
Concept
5. Drafting
Report of
the
proposal
Submit
draft of
report to
supervisor
67
Seminar
Presentati
on
Correction
Report
Final
Report
Submissio
n
6. Develop
Project
7. Testing
Project
8. Final
Report
Submissio
n