LET’S LEARN TAYAMMUM USING AUGMENTED

REALITY

SITI AMINAH BINTI MOHD DAUD

BACHELOR OF INFORMATION TECHNOLOGY

INFORMATICS MEDIA WITH HONOURS

UNIVERSITI SULTAN ZAINAL ABIDIN

2021

LET’S LEARN TAYAMMUM USING AUGMENTED REALITY

SITI AMINAH BINTI MOHD DAUD

BACHELOR OF INFORMATION TECHNOLOGY

INFORMATICS MEDIA WITH HONOURS

Universiti Sultan Zainal Abidin

2021

i

DECLARATION

I hereby declare that the 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 Universiti Sultan Zainal

Abidin or other institutions.

_______________________________

Name: Siti Aminah bt Mohd Daud

Date:

ii

CONFIRMATION

This is to confirm that:

The research conducted and the writing of this report were under my supervision.

_______________________________

Name: Encik Mat Atar Bin Mat Amin

Date:

iii

DEDICATION

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

Alhamdulillah, I thank God for His grace and grace, I can prepare and complete this

report successfully.

First of all, I would like to thank my supervisor, En. Mat Atar Bin Mat Amin because

with guidance, the advice, and the thoughtful ideas are given me the opportunity to

prepare this report successfully.

Besides, my gratitude is also to my colleagues who share ideas, opinions, knowledge,

and reminders. They helped me answer every question that was important to me in

completing this report.

Thanks also to my beloved mother and father always support and motivated me to

prepare for this report for Final Year Project.

I would like to take the opportunity to thank all lecturers of the Informatics and

Computing Faculty for their attention, guidance, and advice in helping and sharing ideas

and opinions in making this report successful.

May Allah SWT bless all the efforts that have been given in completing this

report.

Thank you.

iv

ABSTRACT

Let’s Learn Tayammum using Augmented Reality (AR) was developed for the primary

school student in standard to learn Islamic subjects more effectively. Existing learning

methods are changed by AR and Virtual Reality (VR) technologies and using

smartphones. Augmented reality is when 3-Dimensional virtual objects are integrated

into a 3D real environment in real time. AR is the enhaced of technology to overlay

digital data on an image of something seen through a device such as a smartphone

camera. This app may be able to help primary school students to learn about tayammum

more interactive and fun. This application also will use interactive 3-dimensional (3D)

objects, sound and display info so that students are interested in using this application.

MDLC method is divided into six main sections, namely the beginning of the concept

phases, design phases, material collecting phases, assembly phases, testing phases and

distribution phases. The use of the MDLC method ensures that the development of the

system runs smoothly and according to planning.

v

ABSTRAK

Let’s Learn Tayammum using Augmented Reality (AR) telah dibangunkan untuk pelajar

darjah 1 hingga 6 dalam subjek Pendidikan Islam supaya dapat belajar dengan lebih

cekap dan berkesan. Kaedah pembelajaran sedia ada diubah oleh teknologi AR dan VR

dan menggunakan telefon pintar.AR adalah apabila objek maya 3-dimensi disatukan

apabila dalam dunia realiti. AR adalah teknologi yang ditambah baik untuk melapisi

data digital pada gambar sesuatu yang dilihat melalui peranti seperti kamera telefon

pintar. Aplikasi ini mungkin dapat membantu pelajar mempelajari tentang tayammum

dengan lebih interaktif dan menyeronokkan. Selain itu, aplikasi ini menggunakan objek

3-dimensi interaktif, mengeluarkan bunyi dan paparan maklumat supaya pelajar

berminat menggunakan aplikasi ini. Kaedah MDLC dibahagikan kepada enam

bahagian utama, iaitu permulaan fasa analisis, fasa reka bentuk, pengumpulan

material, fasa pelaksanaan, fasa penilaian dan fasa pengedaran. Penggunaan kaedah

MDLC memastikan pembangunan sistem berjalan lancar dan mengikut perancangan.

vi

CONTENTS

PAGE

DECLARATION i CONFIRMATION ii DEDICATION iii ABSTRACT iv

ABSTRAK v CONTENTS vi LIST OF TABLES viii LIST OF FIGURES ix LIST OF ABBREVIATIONS xi

LIST OF APPENDICES xii

CHAPTER 1 INTRODUCTION 1

1.1 Project Background 1 1.2 Problem Statement 3 1.3 Objectives 3 1.4 Scope 4

1.5 Limitation of Work 4 1.6 Expected Result 4

1.7 Summary of the Chapter 5 CHAPTER 2 LITERATURE REVIEW 6

2.1 Introduction 6

2.2 Related Works Based On Journal 6 2.2.1 Perancangan Aplikasi Android Simulasi Tata Cara

Pengambilan Wudhu Dengan Methode Augmented

Reality (Maulana, Kenny, 2020) 6

2.2.2 Android based learning application for Wudhu and

Tayamum using augmented reality technology (S P

Dewi,2020) 7 2.2.3 Aplikasi Pembelajaran Untuk Anak Dengan Teknologi

Augmented Reality (AR) Pada Buku Panduan Wudhu

Berbasis Mobile Android (Heroris Maulidio, Gaguk

Susanto,2019) 9 2.2.4 Comparison Existing application based on Journal 10

2.3 Related Works Based On Existing Application 11

2.3.1 Panduan Shalat AR: Belajar Wudhu dan Shalat 11 2.3.2 SDI Interaktif 12 2.3.3 Panduan Tayammum Lengkap 13

2.3.4 Comparison based on existing Applications. 15 2.4 Chapter Summary 16

CHAPTER 3 METHODOLOGY 17 3.1 Introduction 17

3.2 Methodology Model 17 3.2.1 Concept 18 3.2.2 Design 18

3.2.2.1 Storyboard 19 3.2.2.2 Proof of Concept 21

vii

3.2.3 Material Collecting 21

3.2.4 Assembly 21 3.2.5 Testing 22

3.2.6 Distribution 22 3.3 Navigation Map 23 3.4 Software and Hardware Requirements 23 3.5 Framework 24 3.6 Summary of The Chapter 25

CHAPTER 4 IMPLEMENTATION AND RESULT 26 4.1 Introduction 26 4.2 Implementation 26

4.2.1 Interface Design 26 4.2.2 3D Model 31

4.2.3 AR Marker 32

4.2.4 Results 34

4.2.5 Summary 34 CHAPTER 5 CONCLUSION 35

5.1 Introduction 35 5.2 Project Contribution 35

5.3 Project Problems and Limitation 35 5.4 Future Work 36

5.5 Summary 36 REFERENCES 37 APPENDICES 38

viii

LIST OF TABLES

Table

No.

Title Page

Table 2.1 Comparison Existing application based on Journal 10

Table 2.2 Comparison based on existing Applications 15

Table 3.1 Concept Table 18

Table 3.2 Hardware Requirements 23

Table 3.3 Software Requirements 24

ix

LIST OF FIGURES

Figure

No.

Title Page

Figure 2.1 Use Case Diagram 6

Figure 2.2 Testing Result For the Functionality of the Application 8

Figure 2.3 Simple Storyboard 9

Figure 2.4 Main Menu Interface 12

Figure 2.5 Splashscreen for SDI Interaktif 13

Figure 2.6 Splashscreen Of Aplikasi Panduan Tayammum 14

Figure 3.1 MDLC Model 17

Figure 3.2 Start Menu Interface 19

Figure 3.3 Defintion Interface 19

Figure 3.4 Main Menu Interface 19

Figure 3.5 Splashscreen 19

Figure 3.6 FAQ and Credit Interfaces 20

Figure 3.7 Quiz and AR View Interfaces 20

Figure 3.8 Navigation Map 23

Figure 3.9 Framework 24

Figure 4.1 AR View 27

Figure 4.2 Main Menu 27

Figure 4.3 Splashscreen 27

Figure 4.4 Quiz Menu 28

Figure 4.5 Start Menu Interface 28

Figure 4.6 Multiple Choices Answer Interface 28

Figure 4.7 Other Interface 29

Figure 4.8 Credit Interface 29

Figure 4.9 Instruction Interface 29

Figure 4.10 Next Button 30

Figure 4.11 Sound Button 30

Figure 4.12 Exit Button 30

Figure 4.13 Home Button 30

Figure 4.14 Back Button 30

Figure 4.15 The boy model 31

Figure 4.16 The table model 31

x

Figure 4.17 Step 1 32

Figure 4.18 Step 2 32

Figure 4.19 Step 3 33

Figure 4.20 Step 4 33

Figure 4.21 Step 5 33

Figure 4.22 Step 6 33

xi

LIST OF ABBREVIATIONS

3D 3-Dimensional

AR Augmented Reality

App Application

FYP Final Year Project

MDLC Multimedia Development Life Cycle

VR Virtual Reality

xii

LIST OF APPENDICES

APPENDIX 1 GANTT CHART FOR FYP 1

APPENDIX 2 GANTT CHART FOR FYP 2

APPENDIX 3 DIGITAL PROJECT POSTER

1

CHAPTER 1

INTRODUCTION

1.1 Project Background

Augmented reality (AR) can be defined as a technology which overlays virtual objects

(augmented components) into the real world. These virtual objects then appear to

coexist in the same space as objects in the real world (Azuma et al., 2001). Nowadays,

technology has been used widely in many sectors. One of the sectors that rapidly use

technology as a medium to become more effective and reliable is education. Analysis

of scientific literature and own practical experience of the use of augmented reality

technologies application in educational practices allowed to state next: augmented

reality technologies have a great potential for application in education (Anna V.

Iatsyshyn,2020).

There are four type of AR techniques that can be use which are Markerless AR, Marker-

based AR, projection-based AR and superimposition-based AR. This project will focus

on Marker-based AR. The users can see the animation when camera reader senses the

marker.

Nowadays, people use Internet and application to find information and learning. Muslim

people also use application to find information about Islam religious such as aqidah,

fiqh and tasawwuf. There are many Islamic application that can be found. (Izanee,2020).

However, the Islamic application that use AR which are combination of real life and

virtual object are hardly found.

2

There are various of advantages using AR as an educational setting can be shown. AR

offers interaction such as device rotating and touching to make learning more

interesting. The findings on the positive impact are increased content understanding,

learning spatial structures, language associations, long-term memory retention,

improved collaboration and motivation. (Jorge Bacca,2014). AR in educational setting

can help kids to visualise and give better understanding about what they learn. Let’s

Learn Tayammum allowing student to learn about tayammum in an interesting

environment thus to increase their motivation to study.

Based on research, students said that they felt drowsy, unable to focus and bored with

the lessons given by their Islamic studies teachers (Kamarul Azmi, 2011) Motivation is

needed to engaged kids to learn something and AR can help them to boost their

motivation. A lack of motivation could be major obstacle to learner success,

emphasising the importance of creating and sustaining motivation (Khan et al.,2019)

Thefore, Let’s Learn Tayammum development are to boost student motivation and

engaged students with the new learning era. Presence of the Internet in combination

with large assortment of gadgets, psychological features and value system of modern

youth require bringing educational process in a methodological, technical and

pedagogical direction in accordance with modern realities (Anna V. Iatsyshyn,2020).

Tayammum is one of the knowledges that a Muslim should know. Therefore, people

can learn in an interactive way using the benefits of the invented technologies follows

the modernisation era. Thus, it can be an interesting way to enjoy learning.

This project will include the steps to perform tayammum properly and the general

knowledge about tayammum in 3D environment using flashcards and mobile phone. It

will include with some features such as audio, text and animation.

3

1.2 Problem Statement

• Tend to lost focus learning in a traditional way of learning.

Nowadays, the rapid growth of technology exposed kids in the millennium era

with gadjets. Kids tends to learn using gadjets rather than using texbooks and

blackboards.

• Lack of interest and motivation to learn Islamic subject.

Muslim kids are said to have lack of interest to learn Islamic subject due to

Islamic subject are teached with books and just listen what the teacher taught.

This leads students to feel bored and drowsy in class since they think they can

read the book by themselves.

• Lack of Islamic education application

There are limited Islamic mobile application for kids to use for school education.

The application that has been developed mostly for aqidah but there are few

only for thoharah.

1.3 Objectives

i. To develop an AR mobile application for kids ranges 7-12 years old.

4

ii. To design Let’s Learn Tayammum Using Augmented Reality (AR) mobile

application.

iii. To test the functionality of Let’s Learn Tayammum Using Augmented Reality

application.

1.4 Scope

• AR View

In this AR View contained the steps of tayammum and it will show the 3D animation

together with the audio and text references.

• Activities.

This application has two activities which is Quiz 1 which is true or false questions and

Quiz 2 which is multiple choice question.

1.5 Limitation of Work

i. This application works only on android.

ii. Applicable only for Muslim kids range 7-12 years old.

1.6 Expected Result

i. Allows teachers to teach students about tayammum in an effective and attractive

way.

ii. Functionality in the mobile application can function well on android.

5

iii. This AR application has an attractive 3D animation.

1.7 Summary of the Chapter

This chapter will deliver about the early stages about this project development. It

explains more about initially project development process such as project’s background,

problem statement, project objective, and project’s scope.

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This chapter provided some reviews of techniques which have been proposed by many

researchers in previously. The related works also have been reviewed to ensure the

quality in order to improve this project. This chapter also will do comparison with any

other existing application that slightly same and nearly same with this application. It

will decide what to do to make sure the application will become a better application.

2.2 Related Works Based On Journal

2.2.1 Perancangan Aplikasi Android Simulasi Tata Cara Pengambilan Wudhu

Dengan Methode Augmented Reality (Maulana, Kenny, 2020)

Figure 2.1 Use Case Diagram

7

Based on Perancangan Aplikasi Android Simulasi Tata Cara Pengambilan Wudhu

Dengan Methode Augmented Reality (Maulana, Kenny on 2020), this paper discussed

about implementation of AR technology in education for performing abulations.

This application is use to ease Muslim to learn the steps taken to perform abulations

properly and clearly using 3D object. The author stated that using AR as the learning

medium can increase the understanding and it is more effective than using the other

mediums such as books, videos and using computer. Therefore, AR has high potential

in education sector.

This application use marker-based technique and use poster as the marker. There are

one 3D object, six markers and six animations in this application. They provide

instructions of how to use the application for user to guide them to use this application.

In addition, the application is android based and the requirement for this application is

android 9. The method used to develop this application is class diagram and prototype

model.

2.2.2 Android based learning application for Wudhu and Tayamum using

augmented reality technology (S P Dewi,2020)

Based on the journal, the aim for this study is to develop an interactive learning media

abulation and tayammum using AR. There is a questionnaire conduct for user to test this

application. The user gives a positive feedback such as the application is needed for the

students, effectively for learning media of wudhu and tayammum and it is practical to

use.

8

This application use marker-based technique. Therefore, the description of the step will

be display and target name will appear if a marker is detected. This application has

sound feature that will come out if the speaker button is pressed. The contents of the

description and sound will change according to the markers detected. In the AR view

interface, there is a back button that can be use to go back to the main menu. The method

use for the development is waterfall method.

Using this application, children can be more developed by seeing hearing and feeling

what they are learning with the help of AR, and children become more enthusiastic in

learning. Besides this application is also appropriate to be used as an interactive learning

media for children. As user, kids will feel happy and interesting using it with an

attractive interface design.

Figure 2.2 Testing Result For the Functionality of the Application

9

Based on the journal, they had conducted an interview with teachers from primary

school and they found out that students can do the theoretical but students cannot do

well practically. Therefore, in order to overcome the problem, they use AR as a learning

kit to make learning more effective. Result from another research they conducted shows

that using technology as the learning kit is more efficient to use for learning steps of

abulations. The method used to develop this application is Multimedia Development

Life Cycle (MDLC).

This application use 3D animation to show the steps for performing abulations and

tayammum. There are research state that people can memorise 20% what they see, 30%

what they hear and 80% from what they hear and see simultaneously. Therefore, with

3D in can make students more enthusiastic. (Yuningsih et al.,2019)

2.2.3 Aplikasi Pembelajaran Untuk Anak Dengan Teknologi Augmented

Reality (AR) Pada Buku Panduan Wudhu Berbasis Mobile Android

(Heroris Maulidio, Gaguk Susanto,2019)

Figure 2.3 Simple Storyboard

10

2.2.4 Comparison Existing application based on Journal

Table 2.1 Comparison Existing application based on Journal

Title Perancangan

Aplikasi Android

Simulasi Tata

Cara

Pengambilan

Wudhu Dengan

Methode

Augmented

Reality

Android

based

learning

application

for Wudhu

and

Tayamum

using

augmented

reality

technology

Aplikasi

Pembelajaran

Untuk Anak

Dengan

Teknologi

Augmented

Reality (Ar)

Pada Buku

Panduan

Wudhu

Berbasis

Mobile

Android

Let’s Learn

Tayammum

Using

Augmented

Reality

Text YES YES YES YES

Image NO YES YES YES

Audio NO YES YES YES

Video /

Animation

YES YES YES YES

AR Technique Marker-based Marker-

based

Marker-

based

Marker-

based

Advantages Interface are

easy to

understand

Interfaces are

easy to

understand

3D animation

is attractive

Interfaces are

easy to

understand

Interfaces are

attractive and

easy to

understand

3D

animation is

attractive

Have

attractive

audio

11

2.3 Related Works Based On Existing Application

2.3.1 Panduan Shalat AR: Belajar Wudhu dan Shalat

“Panduan Shalat AR: Belajar Wudhu dan Shalat” application was released by Mizan

Application on 2nd March 2020. The target user for this application is kids range of 3

and above who are just exposed to prayers and abulations by their parents or educators.

This application focus on showing the steps to perform abulations and prayer. In

addition, the application has quizzes which are true or false questions and rearrange the

steps of abulation. This application also has audio that suitable for kids. Since this

application use marker-based technique, user needs the books to scan for 3-D animation.

In the main menu the icon resemble next button is used to go for AR view.

Disadvantages 3D animation is

not attractive

The marker

image is hard to

detect.

Only

applicable for

android user.

The interface

colour is

dull.

Only

applicable

for android

user.

Main menu

interface is

not attractive

Only

applicable for

android user.

Only

applicable

for android

user.

12

2.3.2 SDI Interaktif

This application was established by Sygma Media Innovation on 28th July 2020. This

mobile apps focus on learning abulation, tayammum and prayer. The target user for this

application is for kids age 3 years old and above. It can help guide the children to

perform abulations, tayammum and prayers step by step. The application use flash card

as the marker image. User need to scan the flashcards to watch 3D animation.

Figure 2.4 Main Menu

Interface

13

2.3.3 Panduan Tayammum Lengkap

This application was published by HAW developer on 12th November 2019. This

application focus to guide kids to perform tayammum step by step. The technique use

in this application is marker based. User can download the marker image in the apps for

free. The target user for this application is kids age 6 and above. In this application user

can choose the gender of the user. It also provides the instruction to use the application.

The application is easy to understand as the interfaces are very clear what each button

is use for particularly and it is easy to learn.

Figure 2.5 Splashscreen for SDI

Interaktif

14

Figure 2.6 Splashscreen Of Aplikasi Panduan

Tayammum

15

2.3.4 Comparison based on existing Applications.

Table 2.2 Comparison based on existing Applications

Title

Panduan

Shalat Ar:

Belajar

Wudhu dan

Shalat

SDI Interaktif Panduan

Tayammum

Lengkap

Let’s Learn

Tayammum

(Proposed

project)

Requirement Android 6.0

and above

Android 6.0

and above

Android 4.1

and above

Android 4.1

and above

Advantages Colourful

Have a suitable

audio

Interface are

easy to learn

The animation

is interesting

The interfaces

are clear and

easy to learn

Have an

attractive audio

Colourful and

attractive

interfaces

Disadvantages Only applicable

for android user

Less attractive

interfaces

layout

Only applicable

for android user

Apps not

available not

available in

other country

Only applicable

for android user

The animation

is not

interesting

Apps cannot be

open.

Only

applicable for

android user.

Image YES YES YES YES

Text YES NO YES YES

Audio YES NO NO YES

Video/Animation YES YES YES YES

AR Technique Marker-based Marker-based Marker-based Marker-based

16

2.4 Chapter Summary

This chapter discuss the literature review that has been reviewed during feasibility

studies. The literature review helps developer to find out the problems of the previous

research for application which needs to be improve and overcome for this application

development. Moreover, there are some advantages and disadvantages in every

application that has been considered in the research.

17

CHAPTER 3

METHODOLOGY

3.1 Introduction

This chapter will discuss the methodology that will be used in developing this project.

The methodology is important because it act as a guide to complete the project within

the given time. There are several methodology models that can be use when to develop

augmented reality project such as production pipeline, ADDIE and MDLC. In

developing of this project, MDLC model has been chosen to be the research

methodology. Details of each phase will be described in this chapter.

3.2 Methodology Model

This Multimedia Development Life Cycle (MDLC) is a model that consist of six phases.

The phases are concept, design, material collecting, assembly, testing and distribution.

Based on Binanto,2017 the phase does not have to be follow in sequences which mean

the phases can exchange positions. However, the first phase must be the concept stage.

Figure 3.1 MDLC Model

18

3.2.1 Concept

This phase will explain the concept for the AR project.

Table 3.1 Concept Table

Concept

Problem

Statement

• Tend to lost focus learning in a traditional way of

learning • Lack of interest and motivation to learn Islamic subject. • Lack of Islamic education application

Objectives • To develop an AR mobile application for kids ranges 7-

12 years old.

• To design Let’s Learn Tayammum Using Augmented

Reality (AR) mobile application.

• To test the functionality of Let’s Learn Tayammum Using

Augmented Reality application.

Target User • School Teacher

• Aged group 7 to 12 years

• Parents

Application

Content

• AR View – 3D animation of steps of tayammum

• Activities – Quiz

• General knowledge about tayammum

Limitation of

work

• Only applicable for students aged group 7 to 12 years old

• Only support android system

AR Technique • AR Marker-based using flashcard.

3.2.2 Design

Design is phase that show the specification of the user interface design in this

application to create a visual map of application. From the storyboard, it can help the

developer shape the vision and create flow of application. In this phase, the concept

phase is be taken and used to make practical decisions. This includes a topic content,

delivery method, and structure so that it can catch the user’s view.

19

3.2.2.1 Storyboard

Figure 3.5

Splashscreen

Figure 3.3

Defintion Interface

Figure 3.4 Main

Menu Interface

Figure 3.2 Start

Menu Interface

20

Figure 3.6 FAQ and Credit Interfaces

Figure 3.7 Quiz and AR View Interfaces

21

3.2.2.2 Proof of Concept

This application use marker-based technique. Therefore, the description of the step will

be display and the 3D Animation will appear if a marker is detected. This application

has sound feature that will come out if the speaker button is pressed. The contents of

the animation, description and sound will change according to the markers detected. In

the AR view interface, there is a back button that can be use to go back to the main

menu.

3.2.3 Material Collecting

In this phase, all the materials needed to complete the application will be gathered. The

information about the definition of tayammum, performing tayammum in the correct

way step by step and the pillars of tayammum are being gather from books, articles and

internet. The audio will be recorded and will be search from internet if needed while for

the animation, the modelling for the 3D animation should be done in this phase. The

material for use interface such as button, title and picture will be edit and create using

adobe photoshop.

3.2.4 Assembly

The 3D modelling that has been create will be animate in this phase using Autodesk

Maya. Marker image which are the flashcards will be download to Vuforia for

developing AR in the application. The process in this phase will refer the storyboards

in the design phase. All the ccollected materials in the material collecting will be

compile in this phase.

22

3.2.5 Testing

This application The purpose to test the system workflow is to determine the function

of each multimedia element in the application whether it is running according to the

planned design. We can find the error if there are any in the application before it is

distributed.This project will use black box testing in windows and android to make sure

this application can function well as in the storyboards. The testing will be done using

the apk file in android. The animation will test to be play in AR view and play according

to the correct steps of arrangement. All the button are expected can be use and the page

arrangement are correct.

3.2.6 Distribution

This AR application that has developed and store using Autodesk Maya and Unity file.

After all the development in unity finished, the application will be export as .apk file.

Next, the file will be installed on android and can be use. If the project does not satisfy

we need to go the the first phase which is concept to find what solution we can use to

satisfy the project.

23

3.3 Navigation Map

Figure 3.8 Navigation Map

3.4 Software and Hardware Requirements

Table 3.2 Hardware Requirements

Hardware Uses

• Intel i5 Processor Chips

• NVIDIA GEFORCE GT920MGraphics Card

• CS900 SSD 120GB

• DDR 8GB

To create the sketches for the storyboard,

flashcard design and create some info

related to AR-Eclipse. Also used for run

the coding and 3D modelling.

Let's Learn Tayammum

Start

AR View

Defintion

Pillar of Tayammum

Quiz

Multiple answer questions

True or False

FAQ Credit Quit

24

• Android 10.

• 128GB storage

• 4GB RAM

To test and to run the developed

project.

Table 3.3 Software Requirements

3.5 Framework

User need to install the android file .apk in the smartphone. User need to direct the

device’s camera to tha target image which is the 6 flashcards. After the camera detect

Software Uses

Unity 3D

To create the augmented reality

Autodesk Maya

To create the 3D model of sun, moon and

earth

Adobe Photoshop

To design the flashcard, marker-base of

augmented reality

Figure 3.9 Framework

25

the image target, the 3D model will appear. AR are made with Vuforia Configuration

and Unity Software.

3.6 Summary of The Chapter

This chapter discusses the methodology for the application development,

hardware and software required to develop this project. Every phase in the development

follows the project methodology mentioned earlier in this chapter. The requirements

regarding the hardware and software required to develop the augmented reality

application were briefly explained. This chapter also discuss every phase in MDLC

model which are concept, design, material collecting, assembly, testing and distribution.

Every phase is briefly explained in this chapter.

26

CHAPTER 4

IMPLEMENTATION AND RESULT

4.1 Introduction

This chapter will discuss from the previous chapter which is about implementation of

the methodology and will conduct a testing to obtain result of each implementation.

Implementation are executed to ensure the system developed according to the main

purpose of the application developed and fulfil the user requirement. Testing will be

executed and the developer will recognize the error and fix it.

4.2 Implementation

This phase refers to the actual delivery of the instruction. The goal of implementation

is to produce a fully functional application in a timely manner. This project is to be

implemented as an android application by using software Unity 3D with Vuforia

Configuration. Besides, this project used the programming language which is C# for

coding in the Visual Studio. The application file is built and being implemented on a

smartphone model Realme 6 with android 9 to test the functionality of the application.

4.2.1 Interface Design

The interface design are created using Adobe Photoshop 2018 and Adobe Animate.

27

Figure 4.1 is the splashscreen for the application while Figure 4.2 is the main menu

interface for the application. Both of this design follow the design in the storyboard as

shown in chapter 3. Figure 4.3 is the AR View for the application. However, the design

has slightky different from the storyboard.

Figure 4.2

Main Menu

Figure 4.1

Splashscreen

Figure 4.3

AR View

28

Figure 4.4 shows the menu for quiz interfaces. User can choose which quiz does user

want to answer first. Figure 4.5 are the multiple choices answer interface. The buttons

for the quiz menu and the multiple choices answer are slightly different from

storyboards due to make the button more consistent with the other buttons. Figure 4.6

are the start menu interfaces.

Figure 4.6

Multiple Choices

Answer Interface

Figure 4.4

Quiz Menu Figure 4.5 Start

Menu Interface

29

Figure 4.7 shows the interfaces for instruction for user to experience AR. Figure 4.8

shows the interface when user click on others button in the start menu. Figure 4.9 shows

the credit interface followed the storyboard design.

Figure 4.9

Instruction Interface

Figure 4.7

Other Interface Figure 4.8

Credit Interface

30

Those buttons are use in the application. Figure 4.10 is the next button use to go for the

next scene. Figure 4.11 is the sound button. User need to click the button if user want

to hear sound in certain scene. Figure 4.12 show the home button. User can click the

button to go back to main page. Figure 4.13 is the icon for exit button. When user click

on this button user will close the application. Lastly, Figure 4.14 shows back button.

User can click the button to go back to the previous scene.

Figure 4.13

Home Button

Figure 4.12

Exit Button

Figure 4.14

Back Button

Figure 4.11

Sound Button

Figure 4.10

Next Button

31

4.2.2 3D Model

The modelling of 3D model is a process of making a digital objects that capable to fully

animated and make it an essential process for the character to be animated. In this

project, the 3D model was built with texture and assigned material in Autodesk Maya

2019. When user scan the marker on flashcards, the model will appear at the mobile

phone screen with the animation. The AR use Vuforia Configuration. Below are the 3D

model in the application.

Figure 4.15 shows the 3D model that has been imported in Unity Software. The model

are developed using Maya Software first before import to Unity Software.

Figure 4.15 The boy model

Figure 4.16 The table model

32

Figure 4.16 shows the 3D model of table that has been import to Unity Software from

Maya Software.

4.2.3 AR Marker

This application use marker-based AR techniques. Augmented Reality markers are

visual cues which trigger the display of the virtual information. Markers are usually an

images or small objects which are trained beforehand so that they can be recognized

later in the camera stream. After a marker has been detected, its position, scale, and

rotation are derived from visual cues and transferred to the virtual information. This can

be achieved by placing a distinctive picture or shape on the page. That picture will be

recognized and the animation can start immediately, tracked to the appropriate place on

the page. The distinctive picture that can be recognized by the device, the marker. A

marker can be anything, as long as it has enough unique visual points. Images with lots

of corners and edges work especially well. Below are the image targets used in the

application.

Figure 4.17

Flashcard Step 2

Figure 4.18

Flashcard Step 1

33

Figure 4.20

Flashcard Step 3

Figure 4.19

Flashcard Step 4

Figure 4.22

Flashcard Step 6 Figure 4.21

Flashcard Step 5

34

4.2.4 Results

The expected result after releasing the application of Let’s Learn Tayammum using

augmented reality is user should be able to learn the Tayammum in interactive ways

and more fun where the 3D model will appear when user scan the flashcards. The user

can see the visualization of every step of tayammum with some animation and audio

recitation. The benefit of Let’s Learn Tayammum using AR application is it does not

use internet connection to make the model appear. Besides that, the developer also

expected that the application could function well and fulfill the user requirement

standard as testing had been done for this application.

4.2.5 Summary

Generally, developer has showed the interface that developed for the Let’sLearn

Tayammum Using AR application. testing phase has been done by the developer by

testing the functionality of the application. This phase is vital because this can help to

optimize the application for having errors. If there are errors it can be identifying, and

the developer fixed to improve functionality of the application after testing the app. The

application will repeatedly to be tested to minimize errors. Finally, it is important to

ensure the implementation process run well so that when we test the project, the output

from the project will be as expected.

35

CHAPTER 5

CONCLUSION

5.1 Introduction

In this chapter, we will discuss about the contributions, problems and limitation of Let’s

Learn Tayammum Using Augmented Reality during the project development as well as

the future work in order to improve the application will be discussed.

5.2 Project Contribution

Let's Learn Tayammum Using AR developed based on MDLC method mainly aims to

helps kids learning tayammum interactively using application Let’s Learn Tayammum

Using AR by flashcards. Besides, there are implementation of animation and audio in

the application to make kids more interested to use the application. User also can play

quizzes in the application. Meanwhile, this application also aimed to give the user

exposure and education about AR technology.

5.3 Project Problems and Limitation

The major problem and limitation during the project development are to find solution

to stabilize the animation process and to ensure the step for tayammum are correctly

done. The problem occurs when the animations that has been done in Maya software

can not be export to unity. In addition, the texture from maya software also missing

when imported to unity software. Moreover, the objects target are hardly appear when

36

image target has been direct to the device’s camera. Besides, the limitations in this

project are the application only applicable for Android platform only.

5.4 Future Work

Although the application operates in properly and follow the milestone respectively,

there exist some changes that can be taken for better performance. The constraint as

described before this can be corrected and improve the application's quality for the

future. Let's Learn Tayammum Using AR application still has a lot that can improvise.

There are some suggestion that can be made in order to upgrade the application to be

more efficient and effective in future. The suggestion are make to make the animation

more smooth, use different sound and increase the information about tayammum in the

application. Then, I hope this application will be very useful for kids to learn tayammum

and for teachers and parents to keep their kids learning tayammum.

5.5 Summary

Finally, Let’s Learn Tayammum Using AR will help kids to learn in interactive way

and more fun. This application with AR features developed purposely for kids to learn

about tayammum in interactive way. The method of MDLC model has been used in

order to make this development workflow going well and give the expected outcome.

Also, the framework and user interface design that included in this report can be a

guideline for the user to use this application.

37

REFERENCES

1) Dewi, S. P., Astuti, I. P., Buntoro, G. A., Widaningrum, I., & Yusuf, A. R.

(2020). Android based learning application for Wudhu and Tayamum using

augmented reality technology. Journal of Physics: Conference Series, 1517(1).

2) Bacca, J., Baldiris, S., Fabregat, R., Graf, S., & Kinshuk. (2014). International

Forum of Educational Technology & Society Augmented Reality Trends in

Education : A Systematic Review of Research and Applications. Educational

Technology, 17(4), 133–149.

3) Izanee, H. (2020). Analisis Aplikasi Mudah Alih Pendidikan Islam untuk Kanak-

Kanak di Google Playstore. November 2019

4) Khan, T., Johnston, K., & Ophoff, J. (2019). The Impact of an Augmented

Reality Application on Learning Motivation of Students. Advances in Human-

Computer Interaction, 2019.

5) Jasmi, K. A., Ilias, M. F., Tamuri, A. H., & Hamzah, M. I. M. (2011). Amalan

penggunaan bahan bantu mengajar dalam kalangan guru cemerlang

pendidikan Islam sekolah menengah di Malaysia. Journal of Islamic and Arabic

Education, 3(1), 59-74.

6) Maulidio, H., & Susanto, G. (2019). Aplikasi Pembelajaran Untuk Anak Dengan

Teknologi Augmented Reality (AR) Pada Buku Panduan Wudhu Berbasis

Mobile Android. Semnas SENASTEK Unikama 2019, 2.

7) Maulana, K. (2020). Perancangan Aplikasi Android Simulasi Tata Cara

Pengambilan Wudhu Dengan Metode Augmented Reality (Doctoral

dissertation, Universitas Dinamika Bangsa).

38

APPENDICES

APPENDIX 1 GANTT CHART FYP1

Week

Task

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Topic

discussion&

determination

Discuss and

determine a

project to be

proposed with

supervisor

Project title

proposal

Writing

proposal

(Introduction)

Literature

Review

Proposal

Progress

Presentation &

Panel’s

Evaluation

Writing

Proposal

(Methodology)

Proof of

Concept

Drafting report

proposal

Submit draft

report to

supervisor

Final report

submission

Final

presentation and

panel’s

evaluation

Final report

submission &

supervisor’s

evaluation

39

APPENDIX 2 GANTT CHART FYP 2

Week

Task

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Project meeting

with supervisor

Project

Development

Progress

Presentation and

Panel’s

Evaluation

Project

Development

Project Testing

Final Year

Project Format

Writing

Workshop

Project Testing

Submission Draft

Report and

Documentation

Submission of

Digital Poster and

Preaparation for

Final

Presentation

Final presentation

and panel’s

evaluation

Final report

submission &

supervisor’s

evaluation

40

APPENDIX 3 DIGITAL PROJECT POSTER