nor shaqirah mohd adnan

TARBIYATUL AULAD FIL ISLAM

MOBILE APPLICATION

NOR SHAQIRAH MOHD ADNAN

BACHELOR OF INFORMATION TECHNOLOGY

(INFOMATICS MEDIA) WITH HONOURS

UNIVERSITY SULTAN ZAINAL ABIDIN

2019

TARBIYATUL AULAD FIL ISLAM MOBILE APPLICATION

NOR SHAQIRAH MOHD ADNAN

BACHELOR OF INFORMATION TECHNOLOGY

(INFOMATICS MEDIA) WITH HONOURS

UNIVERSITY SULTAN ZAINAL ABIDIN

2019

i

DECLARATION

This dissertation is submitted as a part as a fulfillment award of Bachelor of Technology

Information (Informatics Media) with honors at University Sultan Zainal Abidin,

Malaysia. The work is a result of my own investigation. All section of the texts and

results, which have been obtained from other sources, are fully referenced. I understand

and will be dealt with cheating and plagiarism constitutes a breach of university

regulation and will be dealt with accordingly.

Name : Nor Shaqirah binti Mohd Adnan

Date : ………………………………...

ii

CONFIRMATION

This project report is to confirm that this research conducted, and the writing report was

under my supervision.

Name : Datin Dr. Azim Zaliha binti Abd. Aziz

Date : …………………………………………

iii

DEDICATION

In the Name of Allah, the Most Gracious and the Most Merciful.

The research presented in this dissertation could not have been conducted without the

support, encouragement, and cooperation of many people.

First, I would like to express my deepest gratitude to my supervisor, Datin Dr. Azim

Zaliha binti Abd Aziz, who has always given valuable advice and encouragement at

each stage throughout in developing this project successfully. I would like to thank her

for giving the opportunity to learn and work under his guidance, which has been the

most memorable experience.

I want to take this opportunity to thanks to my parent and also special thanks to all

lecture of faculty of informatics and computing for their attention, guidance, and advice

to help in the development of this project. My sincere thanks also go to my fellow

friends for their help to finish up this project. May Allah S.W.T bless all effort that has

been taken to finish this project.

Thank you.

iv

ABSTRACT

The development project ‘Tarbiyatul Aulad fil Islam’ through Mobile Applications is

an application aimed at learning the Hijaiyyah Alphabet and short surah in the Qur'an

while being entertained by using smartphones or mobile devices based on Android. This

application implements multimedia elements that are able to facilitate the community

to learning without having to attend classes. For those who are always busy, this app is

suitable for those who want to learn Hijaiyyah Alphabet and short surprises but have no

time. For parents who do not have time to send their child to study it, they can use this

app for learning purposes. The methodology used to develop the project is to use the

ADDIE model. Each phase in the ADDIE model has been passed which is the phase of

analysis, design, development, implementation and evaluation to complete this

application development. Hopefully that this application developed will help the

community to make learning easy and interesting next to help them gain knowledge.

v

ABSTRAK

Projek pembangunan ‘Tarbiyatul Aulad fil Islam’ melalui Aplikasi Mudah alih ialah

aplikasi yang bertujuan untuk belajar huruf Hijaiyyah dan surah pendek dalam al-Quran

sambil berhibur dengan menggunakan telefon pintar ataupun peranti mudah alih yang

berasaskan android. Aplikasi ini menerapkan elemen multimedia yang mana mampu

untuk memudahkan masyarakat kini untuk melakukan pembelajaran ini tanpa perlu

menghadiri kelas. Bagi golongan yang sentiasa sibuk, aplikasi ini sangat sesuai untuk

digunakan oleh mereka yang ingin mempelajari huruf Hijaiyyah dan surah-surah

pendek tetapi tidak mempunyai masa. Bagi ibu bapa yang tidak sempat untuk

menghantar anak mereka untuk mempelajarinya, mereka boleh menggunakan aplikasi

ini untuk tujuan pembelajaran. Metodologi yang telah digunakan untuk membangunkan

projek ialah dengan menggunakan model ADDIE. Setiap fasa dalam model ADDIE

telah dilalui iaitu fasa analisis, reka bentuk, pembangunan, implementasi dan pengujian

bagi menyempurnakan pembangunan aplikasi. Diharapkan aplikasi yang dibangunkan

ini dapat membantu masyarakat melakukan pembelajaran dengan mudah dan menarik

seterusnya dapat menambah ilmu pengetahuan kepada mereka.

vi

CONTENTS

TITLE PAGE

DECLARATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv

ABSTRAK v

CONTENTS vi

LIST OF TABLES ix

LIST OF FIGURES x

LIST OF ABREVIATIONS xii

CHAPTER 1 INTRODUCTION 1

1.1 Background 1

1.2 Problem statement 3

1.3 Objectives 4

1.4 Research methodology 5

1.5 Project Scope 6

1.6 Limitation of Work 7

1.7 Expected Result 7

CHAPTER 2 LITERATURE REVIEW 8

2.1 Introduction 8

vii

2.2 Existing application 9

2.2.1 Muslim Kids Series: Dua 9

2.2.2 Ali Huda 10

2.2.3 Dua and Azkar 11

2.2.4 Learning Quran Tajwid 12

2.2.6 Arabic alphabet 13

2.2.5 Muslim kid’s series: Hijaiya Arabic alphabet 14

2.3 Comparative Applications 15

2.4 Analysis Gap 16

2.4 Summary 17

CHAPTER 3 METHODOLOGY 18

3.1 Introduction 18

3.2 Research analysis and paradigm 18

3.3 Development Methodology 19

3.3.1 Analysis Phase 20

3.3.2 Design Phase 20

3.3.3 Development Phase 21

3.3.4 Implementation Phase 21

3.3.5 Evaluation Phase 22

3.4 Software and Hardware Requirement 23

3.4.1 Software Requirement 23

3.4.2 Hardware Requirement 24

viii

3.5 Application Design 25

3.5.1 Navigation Maps of Tarbiyatul Aulad Mobile App 26

3.6 Storyboard 27

3.6.1 Application Storyboard 28

3.7 Layout Design 32

3.8 Summary 37

CHAPTER 4 DEVELOPMENT AND IMPLEMENTATION 38

4.1 Specification of Multimedia Element Properties 38

4.1.1Button 38

4.1.2 Audio 43

4.1.3 Animation 43

4.1.4 Images 43

4.2 Application Development 43

CHAPTER 5 CONCLUSION AND SUGGESTIONS OF

IMPROVEMENT 54

5.1 Benefits of this project 54

5.2 Application Improvement Suggestions 54

5.3 Conclusion 55

REFERENCES 56

APPENDIX 58

ix

LIST OF TABLES

TABLE TITLE PAGE

2. 1 Comparison Between The Applications Studied 15

2. 2 Analysis Gap 16

2. 1 Comparison Between The Applications Studied 15

2. 2 Analysis Gap 16

4. 1 Button 39

x

LIST OF FIGURES

FIGURE TITLE PAGE

2. 1 Muslim Kids Series: Dua Mobile App 9

2. 2 Ali Huda Mobile App 10

2. 3 Dua And Azkar Mobile App 11

2. 4 Learning Quran Tajwid Mobile App 12

2. 5 Arabic Alphabet Mobile App 13

2. 6 Muslim Kid’s Series: Hijaiya Arabic Alphabet App 14

3. 1 Workflow Based On Addie Model 19

3. 2 Page 1-3 28

3. 3 Page 4-6 28

3. 4 Page 7-9 29

3. 5 Page 10-12 29

3. 6 Page 13-15 30

3. 7 Page 16-18 30

3. 8 Page 22-25 31

3. 9 Page 19-21 31

3. 10 Menu, Hijaiyyah Alphabet, Hijaiyyah List 32

3. 11 Learn Hijaiyyah 32

3. 12 Write Hijaiyyah 33

3. 13 List Short Surah 33

3. 14 Surah Al-Fatihah 34

3. 15 Let’s Play, Let’s Match Game 34

xi

3. 16 Let’s Read & Tick Game 35

3. 17 Let's Hear Game 35

3. 18 Info, Setting, Exit 36

4. 1 Application Introduction .................................................................... 44

4. 4 Loading Page...................................................................................... 44

4. 6 Main Menu ......................................................................................... 45

4. 8 Interface Of Setting ............................................................................ 45

4. 10 Interface Of Info................................................................................. 46

4. 12 Interface For Credit ............................................................................ 46

4. 14 Interface Of Exit................................................................................. 47

4. 16 Menu Hijaiyyah Alphabet .................................................................. 47

4. 20 Hijaiyyah Song ................................................................................... 48

4. 11 Interface Of Write Hijaiyyah ............................................................. 49

4. 22 Interface Of Write Hijaiyyah ............................................................. 49

4. 24 List Of Short Surah ............................................................................ 49

4. 26 Interface Surah Al-Fatihah ................................................................. 50

4. 28 Main Menu Game And Quiz .............................................................. 50

4. 30 Interface Of Let’s Drag And Drop ..................................................... 51

4. 32 Interface Of Let's Hear Game ............................................................ 51

4. 34 Interface Of Let's Tick Game .............................................................. 52

4. 36 Interface Of Let's Read Game ............................................................ 52

xii

LIST OF ABREVIATIONS

App Application

FYP Final Year Project

UniSZA University Sultan Zainal Abidin

1

CHAPTER 1

INTRODUCTION

1.1 Background

In the pursuit of globalization, information and communication technology is

very important in today's society. Information and Communication Technology (ICT)

is a technology that covers all the technologies used to assist in the delivery of

information such as television, radio, internet, computers and phones. With modern

improvements, the increased sophistication of the phone contributes to the factor of the

birth of smartphones. Smartphones refer to phones with advanced features of

computing. smartphone is one of the popular gadgets and is a favorite in today's society.

This is because smartphones are not only used as a communication tool but also used

as a medium of learning as well as a business platform in today's society. In addition,

smartphones are also a favorite to the society nowadays because of its smaller and thin

size that are easy to carry anywhere. One of the world's leading firms, Ericsson, has

conducted a study and found that Malaysians make smartphones as a means of

communication and as a platform for their business.

In line with the rapid development of information and communication

technology, it has had a huge impact on education and learning. Previously, the learning

2

process only took place in school or needed interaction with teachers and only used

materials such as books and papers. But nowadays, with the increasing sophistication

of information and communications technology, the learning process can be done

anywhere and at any time. Smartphones are one of the most widely used media for

learning purposes because they are easy to carry anywhere. Smartphone users who want

to make learning through smartphones also need only download the available apps

available to them as their learning materials.

Education through mobile applications is not limited to learning such as

Mathematics, Biology, Chemistry and Physics alone, but religious learning such as

Hijriyy letters and short suras in the Quran can also be done using mobile apps. Besides

studying the Quran with religious teachers, the community can now study it through

the application provided. The learning of Hijaiyyah letters and short suras through this

mobile app is aimed at increasing interest in children so they are not bored to run it

(Kgs. M. Hendra et al, 2013).The children’s education doesn’t have to stop after school.

This app made your phone will keep your youngster’s mind active in the classroom.

Learning outside the classroom can be top of the fun and the technology has given

parents a new set of options.

“Tarbiyatul Aulad” is a great place for kids to explore and learn a new thing.

The purpose to develop and evaluate a mobile Islamic educational application that

supports fun learning for children. This mobile app designed for children aged between

7 years old until 10 years old. It is an awesome educational resource that won’t cost the

parents and it also has a great multimedia source in this app which is it will interact the

children to learn.

3

1.2 Problem statement

There are a few problem statements that lead to this project. Firstly, during

school, the student might have difficulties to fully understand the teaching processes.

Therefore, this application offers an alternative learning method based on student

capability.

Secondly, there is not much Islamic education based mobile application is

available online. Most of the existing apps only teach the letters to the children.

Moreover, the problem to children which is don’t like to read a book or so on.

The parents might be difficult to teach their children about Islamic education. An

educational based mobile application could help to draw the attention of the student

compared to traditional teaching and learning.

Hence, based on all the problem statement above, it is important to develop an

application to helps the children to learn more easily and effectively everywhere they

want.

4

1.3 Objectives

The objective to develop the learning mobile application is to help the children in

learning, which is this application learning more thing in Islamic education. The main

objectives of the project are as follows: -

To design an Islamic learning mobile application that can make children more

interesting in learning short surah in Al-Quran, Arabic Alphabet, and another

thing.

To develop the educational Islamic learning app on the Android platform.

To test the functionality of the app in helping children effectively in learning

and improve their knowledge about Islam.

5

1.4 Research methodology

Method to achieve the objectives:

For objective 1,

Resource from the Islamic book, Quran, internet and so on.

For objective 2,

The app is developed using Adobe Animate CC, Adobe Photoshop, Adobe in

Design.

The app is exported into APK format and can be installed and playable in

Android smartphones and tablets.

For objective 3,

10 students selected are used as target user in the experiment.

A pre-test will be set up. The learning score of each test is taken and compared

to see the student’s improvement

6

1.5 Project Scope

The scope of this project is required to fully understand the main user who will

use this application to achieve the main objective.

User: Kids 5 until 10 years old.

Only support platform Android operating system

Genre: Educational

7

1.6 Limitation of Work

After researching this project application, the learning using book will be going

replace with learning using a smartphone. This mobile application just limits for user

android only. This app used for kids that want to learn Islamic learning like the Arabic

alphabet and Short Surah in the Quran.

1.7 Expected Result

Making Islamic education mobile application for kids that help them to understand

easier and learn faster Arabic alphabet and short surah in fun activities and game that

can help prepare them for school. These feature that are implemented in smartphones

makes this application be more user friendly. Additionally, the design and function of

the application is also useful and user-friendly. Lastly, so that the objective is to be

achieved.

8

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

A literature review is a recap of important information about the source. It might

give a new interpretation of old material or combine new with old interpretations. In

this chapter, we will review the application that will be developed. A literature review

is very important to describe the current knowledge that may help in conducting in this

project. In this section, it will be explained the previous study about related projects

finding, some methodologies solution and some ideas that can be helpful in developing

and some ideas that can help in developing an application.

Tarbiyatul Aulad fil Islam is a mobile application that is being developed to

kids. In order for kids to learn using this application.

9

2.2 Existing application

2.2.1 Muslim Kids Series: Dua

Based on my research, there are few existing. Mobile application found. Firstly,

is a mobile app called “Muslim Kids Series: Dua”. This application app was built for

kids to help them in learning Dua. This app guide for kids with audio recitation. Not

only that, but this app also included cute illustrations to help kids in interest to learn.

But it not provides audio and video for kids to learn

Figure 2. 1 Muslim Kids Series: Dua Mobile App

10

2.2.2 Ali Huda

Secondly, the application is “Ali Huda Mobile App”, is an app that was created

for kids Muslim. This app provided up to date information regarding kids video. It also

has videos song for kids. This app also provided smart learning to helps student to

balance their study and playing. This app doesn’t have a game for kids to pay, it will

make kids boring in learning. It can be show at Figure 2.2.

Figure 2. 2 Ali Huda Mobile App

11

2.2.3 Dua and Azkar

Third, is Dua and Azkar. It is essential to have a daily routine of Dua and Azkar.

This app also provided a good source. This app Dua and Azkar also provides a wide

collection of supplications and remembrance of Allah, from various and websites,

including Dua after Salah, Morning Azkar, Evening Azkar, Daily Essential Dua, 40 All

Dua has features including audios, translations, and pronunciations. But the interface

of this app not interesting to learn. It can be show at Figure 2.3.

Figure 2. 3 Dua and Azkar Mobile App

12

2.2.4 Learning Quran Tajwid

Besides that, the next mobile app is ‘Learning Quran Tajwid’, is an app that was

created for kids which is struggle reading the Quran, or for kids who want to perfect

their recitation. This app also teaches how to recite the Quran. This app provides a

thorough range of lessons, from basic tajweed lessons to an advanced class. This app

has simple interface and can’t attract kids to learning. This app also bored because do

not have any picture or video. It can be show at Figure 2.4.

Figure 2. 4 Learning Quran Tajwid Mobile App

13

2.2.6 Arabic alphabet

Sixth, Arabic Alphabet which is an app that was created for kids to learning

Arabic Alphabet. This app provided to kids how to write each alphabet of hijaiyah. This

app helps kids to know to read and write both Arabic alphabet. In the same time kids

can learn alphabet by hearing audio the burn in and they also can play games and quiz

in this app. But this app not provide video for kids and the interface can cause the child

confused. It also using of gloomy colours. It can be show at Figure 2.6.

Figure 2. 5 Arabic Alphabet Mobile App

14

2.2.5 Muslim kid’s series: Hijaiya Arabic alphabet

Fifth, Muslim Kids Series: Hijaiya (Arabic Alphabet) is an app that was created

for kids to learning Arabic Alphabet. This app provided to kids how to write each

alphabet of Hijaiya. This app helps kids to know to read and write both the arabic

alphabet. But the disadvantages of this app is does not have any audio and voice of each

alphabet. It can be show at Figure 2.5.

Figure 2. 6 Muslim kid’s series: Hijaiya Arabic Alphabet Mobile App

15

2.3 Comparative Applications

Table 2. 1 Comparison between the applications studied

Arabic

alphabet

Muslim

kid’s series:

Hijaiya

Arabic

alphabet

Learning

Quran

Tajwid

Dua and

Azkar

Ali Huda

Interface

design

Attractive

and user-

friendly

Packaged

and easy to

understand

by users

Less

interesting

Less

interesting

and

difficult to

understand

by users.

Attractive

and user-

friendly

Color use

Cheerful

and very

suitable

for

children

Suitable and

interesting

for kids

interesting

for all

groups

Less

interesting

Cheerful

and very

suitable for

children

Database

No

Saved

Online

No No No

Access

No need

internet

No need

internet

No need

internet

No need

internet

No need

internet

Platform

Android

and ios

Android and

ios

Android

and ios

Android

and ios

Android

and ios

Language

english english english english english

Social

Media

No

connection

No

connection

No

connection

No

connection

No

connection

16

2.4 Analysis Gap

Table 2. 2 Analysis Gap

TITLE DEVELOPER APPLICATION

OVERVIEW

METHOD

Muslim Kids

Series: Dua

Yufid.inc App was built for

kids to help them

in learning Dua

Use mobile app on both

android and ios platform,

available on Play Store

and App Store

Ali Huda Ali Huda.inc Up to date

information

regarding kids

video.




and App Store

Dua and Azkar Yufid.inc Have a daily

routine of Dua

and Azkar




and App Store

Learning Quran

Tajwid

Hamdouchi

Interactive.LLC

App that was

created for kids

which is struggle

reading the Quran




and App Store

Muslim kids

series: Hijaiya

Arabic alphabet

Yufid.inc App that was

created for kids

to learning

Arabic Alphabet.




and App Store

Arabic alphabet Hamdouchi

Interactive.LLC

App that was

created for kids

to learning

Arabic Alphabet




and App Store

17

2.4 Summary

This chapter summarized an overview of the concept of the application.

Literature review is one of the important parts to study the previous works and help to

determine the methodologies used and technology that can be applied to the proposed

application. Every journal and article will be compared to decide the best technology

and methodology that can be used.

18

CHAPTER 3

METHODOLOGY

3.1 Introduction

Methodology is defined as a set of procedures. This section will cover on

methodology that use to developing a mobile application. From an analysis of problem

to framework designed to achieve the project’s objective that have been mention earlier

in this research report. Methodology is important part to make sure the application can

be accomplished successfully.

3.2 Research analysis and paradigm

There are several methods available to run the project. The methodology that is

used in this project is ADDIE method. The phase involves in interactive and increment

model are: Analysis, Design, Development, Implementation, Evaluation. The basic idea

behind this method were to develop mobile application. The literation step begins with

Analysis phase as a base time version of the application. It can be show at Figure 3.1.

19

3.3 Development Methodology

ADDIE build model is a method of development of software where the mobile

application is designed, implement and tested incrementally until the app is totally

completed. It involves both development and maintenance.

Figure 3. 1 Workflow based on ADDIE Model

20

3.3.1 Analysis Phase

This phase is the first phase in the development of a system. Some analyzes are

carried out and among others are to identify the problems that have led to the

development of Tarbiyatul Aulad application and to analyze solutions to solve the

problem in this phase. In this phase, the information regarding kids learning app using

smartphone application either journal, articles, books or research paper are collected

and gathered. The purpose of this phase is to ensure the design of the application

conforms to and meets the actual user needs (Abd Gani et al. 2015).

3.3.2 Design Phase

The design is the second phase in designing the ADDIE Model system (Abd

Gani et al. 2015). This phase aims to determine and design the structure, type of media

and software used for the application developed. This phase of development involves

development to develop storyboard based on analytical results to illustrate the entire

application that will be developed. Multimedia elements such as audio, text, animation

and even graphics will be included in the Tarbiyatul Aulad application. The design that

will deliberate on the design of interactive applications in the form of clearer

storyboard. This level more focuses on Storyboard that was made for extensive

application development. Storyboard also helps the development process so that the

design was developed in accordance with the contents The data or requirement obtained

during analysis phase transformed into the design.

21

3.3.3 Development Phase

This phase provides details on system development. Development develops

Tarbiyatul Aulad (children's learning) based Android application that is used on

smartphones or mobile devices.

To develop this application, the software to be used is Adobe Animate CC to

generate animations and mobile applications. Adobe Photoshop is also used for image

production and audacity software also used in voice production to be included in this

application.. This software was chosen because it can produce an interactive mobile

application.

3.3.4 Implementation Phase

Implementation involves the process of running the program and the Tarbiyatul

Aulad application module in the context of the real world. The purpose is to test the

effectiveness and to see unnoticed problems during the design and development phase.

This process uses a group of users who meet the criteria set out in the analysis phase

(Abd Gani et al. 2015). Testing is done with the aim to find the weaknesses and detect

any faults unnoticed during the authoring process is carried out. Through this phase,

effectiveness and smooth application uncertain, indirectly will take care of the quality

of applications is uncertain, as a technique will keep the quality of the application.

22

3.3.5 Evaluation Phase

The evaluation phase is a phase where the developed application is tested to get

the feedback of this application from users. The assessment phase involves the

measurement of effectiveness and stability (Abd Gani et al. 2015) developed

applications. The assessment was made in advance by the supervisor and lecturers. If

there is a response that requires the application will recover, then the process

modifications will be implemented to ensure that they are appropriate to the scope of

the user within the period prescribed. Testing of the Tarbiyatul Aulad application is

continued until no further problems occur.

23

3.4 Software and Hardware Requirement

This section will show the list of all software and hardware that involve in the

development process. It can be show at Table 3.1 and Table 3.2

3.4.1 Software Requirement

Table 3. 1 Software Requirement

Adobe Animate cc Create button in mobile application

Audacity Change the audio pitch and format

Adobe InDesign Design interface of mobile app

Adobe Photoshop Edit picture or background of interface

Microsoft Word Used to documentation of application

Cyberlink Power

Director

Produce and editing video and audio to

insert in this app

Java, PHP Program language to build app on

android platform.

MySQL Database Open source relation database

management application that uses

structured Query Language and store the

data of the this application.

Google Drive Backup data in cloud storage

24

3.4.2 Hardware Requirement

Table 3. 2 Hardware Requirement

Computer Processor: Intel Core i5

RAM: 8 GB

OS: Windows 10

GPU: HD Graphics 520

Laptop Lenovo Processor: Intel Core i5

RAM: 8 GB

OS: Windows 10

GPU: Radeon Graphics

Mouse Logitech

Smartphone RAM: 2 GB

OS: Android

Memory card: 27 GB

Hard disk and Pen drive USB Hard disk: 1 Terabyte

Pen drive: 8 GB

25

3.5 Application Design

The application of "Tarbiyal Aulad fil Islam" has been using various

approaches. Among them are screening, exploration, and assistant approaches.

Through this screen approach, using the text and buttons in certain sections as

a reference to the user to go to the next section. Text is also used as a function of each

button. By use of this approach on each activity is also an indicator of how user

respond to the questions.

In the exploration approach, users can learn more about the content in this app.

Users will also be provided with some questions and activities that require users to

interact with the choice of answers provided. This way can test the user's memory based

of the content provided in this app.

In the assistant approach, 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 game with this, it facilitates the user to understand

the game's needs and information.

26

3.5.1 Navigation Maps of Tarbiyatul Aulad Mobile Application

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 of what is contained in this project. Refer Table 3.3

MENU

HIJAIYYAH ALPHABET

HIJAIYYAH SONG

LEARNED ALPHABET

WRITE ALPHABET

QURAN FOR KIDS

LIST OF SHORT SURAH

SURAH AL FATIHAH

GAME AND QUIZ

LET'S DRAG AND DROP

SCORE

LET’S MACTH SCORE

LET’S HEAR SCORE

LET’S READ & TICK

SCORE

EXITARE SURE TO

EXIT

YESEXIT FROM

APP

NO MAIN MENU

SETTINGMUSIC

BACKGROUND

PLAY

MUTE

INFO

CREDIT

ABOUT APP

Table 3. 3 Navigation Maps of Tarbiyatul Aulad Mobile App

27

3.6 Storyboard

In order to develop this project, this storyboard should be made available before

making this learning application. It is very much needed to facilitate the development

of this application as a reference and it is used so that it is in line with the navigation

map made. 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. It can be show at Figure 3.2, - Figure 3.9.

28

3.6.1 Application Storyboard

Figure 3. 2 Page 1-3


29



30



31



32

3.7 Layout Design

Figure 3. 10 Menu, Hijaiyyah Alphabet, Hijaiyyah List

Figure 3. 11 Learn Hijaiyyah

33

Figure 3. 12 Write Hijaiyyah

Figure 3. 13 List Short Surah

34

Figure 3. 14 Surah Al-Fatihah

Figure 3. 15 Let’s Play, Let’s Match Game

35

Figure 3. 16 Let’s Read & Tick Game

Figure 3. 17 Let's Hear Game

36

Figure 3. 18 Info, Setting, Exit

37

3.8 Summary

In this chapter, it tells about the methodology that is used for this Mobile

application for kids learning title “Tarbiyatul Aulad Fil Islam Mobile Application” and

explains the hardware and software requirement that are used in this project and the

storyboard that be used to create interface from beginning to the end. All this

information can facilitate the mobile app development process. Tarbiyatul Aulad

application is developed so that people can now learn the letters of Hijaiyyah and short

suraH more easily so hopefully they will not forget to demand a very religious emphasis

on Islamic education. Additionally, monitoring from time to time is very important to

ensure there is no problem in this application so that no delays will be encountered by

users using it. Consumers should also be told to be cautious in downloading applications

that are in the market.

38

CHAPTER 4

DEVELOPMENT AND IMPLEMENTATION

4.1 Specification of Multimedia Element Properties

In the interface design. Element such as button, audio, animation, and image

are included. These elements have certain processes to produce them.

4.1.1 Button

The button is the most important element in interactive apps. In this interactive

app there are several buttons available. The buttons use a combination of symbols and

shapes. The table shows the list of buttons contained in this project's interactive

application.

39

Table 4. 1 Button

Button Description

Button Main Menu

This button goes to the home page

Button Exit

This button goes to the interface to ask

users if they want to go out or not

Button Setting

This button goes to setting background

song whether want to play or mute

Button Info

This button goes to info page where

there is information about this page

Button List

This button goes to list page

40

Button Next

This button goes to next page

Button Undo

This button goes to previous page

Button Hijaiyyah Alphabet

This button goes to activity learning

Hijaiyyah Alphabet page

Button Quran for Kids

This button goes to list of short surah

page

Button Games and Quiz

This button goes to games and quiz

page

Button Learn Hijaiyyah

This button will go to the learn

Hijaiyyah page

Button Hijaiyyah Song

This button will go to the Hijaiyyah

song page

41

Button Write Hijaiyyah

This button will go to write Hijaiyyah

page

Button Play

This button will play the audio

Button Stop

This button will stop the audio

Button No

This button is located in the exit button

to ask if you want to leave or not. If

pressed, it will return to the menu

Button Yes

This button is located in the exit button

to ask if you want to leave or not. If

pressed, it the application will close

automatically

Button Let’s Read

This button goes to game let’s read

42

Button Let’s Hear

This button goes to game let’s hear

Button Let’s Tick

This button goes to game let’s tick

Button Let’s Drag and Drop

This button goes to game let’s drag and

drop

43

4.1.2 Audio

The audio that is inserted into this interactive app is based on the suitability of

the theme. This app includes background audio which is given the choice to the user to

play or not. on each button also comes with audio for the purpose of helping children

who are not good at reading when using this app. This audio element is also intended

to prevent users from being bored when using it and creating a cheerful atmosphere.

4.1.3 Animation

Animated cartoon children's animation is also included in this application

intended to attract children to use it.

4.1.4 Images

Animal images are also placed in this app in the activities and games section to

help children to recognize animals and their names in Arabic. This image is edited in

Adobe Photoshop and adobe illustration to get the desired criteria.

4.2 Application Development

In this application, to start the software, it is divided into several parts, including

developer logo, loading page, main menu, activity, games, information, setting, credit

and exit. When this application is opened, the animation developer logo will come out

as below.

44

4.2.1 Application introduction

At the beginning of the opening of this application, it displays the developer's

logo and the website's link of this application aimed at informing users about this

application with more detail to the user. It can be show at figure 4.1.

4.2.2 Loading page

The figure 4.2 show interface of loading page. This interface will show up after we

open the application. The loading page will display for a second before it turns to the

next page which is the menu page.

Figure 4. 1 Application Introduction

Figure 4. 2 Application Introduction

Figure 4. 2 Loading Page




45

4.2.3 Application Main Menu

The figure 4.3 above show the main menu of the application. In this interface

there is a button that represents the sub-menu of its own. There are six buttons in this

interface, among them are the learning activities buttons of Hijaiyyah Alphabet and

Quran for Kids. Then the games and quiz button, setting button, info button and exit

button.

The Figure 4.4 shows setting button for background sound. In this

setting user able to choose whether to open or to mute the background song.

Figure 4. 3 Main Menu




Figure 4. 4 Interface of Setting




46

This Figure 4.5 shows interface of info. When user press the button to

info the page will appear. In this page, user can get information about this app.

The figure shows the interface for credit. If users press the credit button, this

interface will play short animations about credits to supervisor and developer.

Figure 4. 5 Interface of info




Figure 4. 6 Interface for Credit




47

This interface shows when user press the button to exit. In this page the

application will ask the user whether user want to exit or no. if the user press button yes

the application will close automatically and if the user press the button no, it will go to

the main menu page.

4.2.2 Learning Page

The figure above is a sub menu for the Hijab Alphabet. there are three buttons

of learning activities of hijayyah alphabet in it include Learn Hijaiyyah, Hijaiyyah Song

and Write Hijaiyyah.

Figure 4. 7 Interface of Exit




Figure 4. 8 Menu Hijaiyyah Alphabet




48

The diagram shows the interface of Hijaiyyah Alphabet from Alif to Ya. Each

Alphabet has voice over to pronounce each word of Huruf Hijaiyyah. The user just need

to press the alphabet that they want to know and automatically the voice will come out.

The diagram shows the Hijaiyyah song. User just need to press the button song

to hear the song and press mute to mute the song.

Figure 4. 9 List of Hijaiyyah

Figure 4. 10 Interface Hijaiyyah Song

Figure 4. 17 Hijaiyyah Song

Figure 4. 18 Interface of write HijaiyyahFigure 4. 10 Interface

Hijaiyyah Song

Figure 4. 19 Hijaiyyah Song

49

The figure 4.11 above show interface of write Hijaiyyah. In this activity kids

will learn step by step how write Huruf Hijaiyyah. User need to press button next to go

to the next alphabet.

The figure 4.12 above show sub menu from Quran for Kids. There twelve list

of button short surah for kids. Where, there is surah Al-Fatihah, Surah-Annas, Surah

Al-Falaq, Surah Al-Masad, and so on.

Figure 4. 20 Interface of write Hijaiyyah




Figure 4. 12 List of Short Surah




50

.

The figure shows the interface of short Al-Fatihah. User need to press button

voice to hear the recite of the Quran and press button stop to mute. User also can press

button next to go another surah or press button list to choose the Surah that user want

to view, hear and learn.

4.2.9 Interface of Games and Quiz

The Figure 4.14 show menu of games and quiz In this interface show the type

of games in this application. There are four games which is Let’s Hear, Let’s Tick, Let’s

Read, Let’s Drag and Drop. There is home button to help user go to menu.

Figure 4. 13 Interface Surah Al-Fatihah




Figure 4. 14 Interface Menu of Game and Quiz

Figure 4. 28 Main Menu Game and Quiz

Figure 4. 14 Interface Menu of Game and Quiz

Figure 4. 29 Main Menu Game and Quiz

51

Example of games Let’s Drag and Drop.User need to drag and drop the correct

answer in the box.

The figure 4.16 above shows the interface for the first game of the Let’s Hear.

Firstly, user need to press button speaker to hear the question and after that they need

to choose the correct answer.

Figure 4. 15.Interface of Let’s Drag and Drop

Figure 4. 30 Interface of Let’s Drag and Drop

Figure 4. 15.Interface of Let’s Drag and Drop

Figure 4. 31 Interface of Let’s Drag and Drop

Figure 4. 16.Interface of Let's Hear Game

Figure 4. 32 Interface of Let's Hear Game

Figure 4. 16.Interface of Let's Hear Game

Figure 4. 33 Interface of Let's Hear Game

52

The Figure 4.17 shows the second game which is name Let’s Tick games. User

need to see the picture and tick at the correct answer with identify the first Hijaiyyah

Alphabet of name the picture given.

The figure 4.18 above show game of Let’s Read which is user need to read the

question and choose the correct answer. The correct answer will be given one mark.

Besides that, there is sound for the correct answer and wrong answer which is the

correct answer user will hear the sound effect kids clapping while wrong answer user

will hear buzzer of false.

Figure 4. 17 Interface of Let's Tick Game




Figure 4. 18.Interface of Let's Read Game

Figure 4. 36 Interface of Let's Read Game

53

The figure above shows the interface of score. User will be able to see the

overall score you get after finish each game.

.

Figure 4. 19.Interface of Score

54

CHAPTER 5

CONCLUSION AND SUGGESTIONS OF IMPROVEMENT

5.1 Benefits of this project

This application titled “Tarbiyatul Aulad fil Islam” provide benefits to the user

in helping children in learning Hijaiyyah Alphabet, Short Surah in Quran and also hone

the children's understanding through games and quiz.

The benefits of this game app are:

Provide learning to children on how to pronounce and write correct Hijaiyyah

Alphabet.

Attracting children to learn Quran.

Combines technology field and education elements in one app.

5.2 Application Improvement Suggestions

Although this interactive app has been successfully completed but it still needs

enhancements such as:

Activity should have a response whether it is correct or wrong

Buttons need to be more interactive to be more user-friendly

Add videos to give users more eager to use this application

Added more animations that match the target group.

55

5.3 Conclusion

In conclusion, with this learning application, the element of fun and

entertainment can be applied so that student can feel using this method is a good way

of learning. It is hoped that the development of this project will benefit all users who

use this application. In addition, users can master and recognize Hijaiyyah letters and

are more keen to read and memorize the Quran. Finally, the users can also use them

well and get the knowledge they are given.

56

REFERENCES

House, C., Thomton.P.& Kludge D.2002.Mobile Learning: Cell Phones and PDAs for

Education. Proceeding of the international Conference on Computers in

Education.

Md. Rashedul Islam, Md. Rofiqul Islam & Tahidul Arafhin Mazzumder.2010. Mobile

Application and Its Global Impact. International Journal of Engineering &

Technology 10(6): 72-78.

Hulme, A.K. &Traxler, J.2005. Mobile Learning: A Handbook for Educators and

Trainers.Park Square: Routledge

Sharples, M.Taylor, J. & Vavoula, G.2005.Towords a Theory of Mobile Learning.

Proceedings of mLearn, hlm.1-9.

Smith,C.S. &Kent,P.2003. The Use of Palmtop Computers for Learning. A review of

literature. Published by Learning and Skills Development Agency.

Hoogeven, M, 1995. Towords a New Multimedia Padigm: is Multimedia Assisted

Instruction Really Effective?

Najjar, L. J.1996. Multimedia Information and Learning. Journal of Education

Multimedia and Hypermedia 5 (2), 129-150

Barnett, W. S. (2011). Effectiness of early educational intervention.

Science, 333,975,978.

Bruner, J. 1996.Culture of Education. Massachusetts: Harvard University Press.

57

Mohd Aliff Mohd Nawi, Ezad Azraai Jamsari Mohd Isa Hamzah & Azizi Umar. (2012).

The Impact of Globalization on Current Islamic Education Australian Journal

of Basic and Applied Science.6(8): 74-78.

Mohd Firdaus Yahaya, Muhammad Sabri Sahrir, Mohd Shahrizal Nasir,2012.

Pembangunan Laman Web EZ-Arabic bagi Pelajar Sekolah Rendah di

Malaysia.http://ezarabic.net/

Sulaiman, A., Jamsuri, E. A. & Noh, N.C. 2014. Islamic Enviroment in Child

Development According to the views of Imam al-Ghazali. Mediterranean

Journal of Sosial Science,5(29),33-39.

Young, M. E.2001. Technology and Early Child Development 13-14.

Shuler, C,2009. Pockets of Potential: Using Mobile Technologies to Promote

Children’s Learning. Joon Ganz Cooney Center, (January),1-56

Nidhra, S. 2012. Black Box Testing Techniques – A Literature Review. International

Journal of Embedded System and Application,2(2),29-50.

Jasmi, K. A. 2013. Membangun Kemahiran al-Quran dan Jawi kepada Anak-anak

(Developing the skills of the Qur’an and Jawi for Kids)1-20.

Elobaid, M., Hammed, K. & Yahia Ekdow, M.E. 2014. Toward Designing and

modeling of Quran learning application for android device. Life Science

Journal, 11(1), 160-171

58

APPENDIX

Application Icon

Poster Tarbiyatul Aulad Fil Islam Mobile Application

55

GANTT CHART

nor shaqirah mohd adnan

Documents