OCCUPATION OF KIDS LEARNING (AR)

MUHAMMAD WAJDI NAIM BIN MOHD SUHAIMI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

DECLARATION

I hereby declare that this report is based on my original work except for quotations

and citations, which have been duly acknowledged. I also declare that it has not been

previously or concurrently submitted for any other degree at University Sultan Zainal

Abidin or other institutions.

__________________________________________

Name : Muhammad Wajdi Naim Bin Mohd Suhaimi

Date :

CONFIRMATION

This is to confirm that :

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

__________________________________________

Name : PROF MADYA DR YOUSEF ABUBAKER

MOHAMED AHMED EL-EBIARY

Date :

DEDICATION

Alhamdulillah.

Firstly, I am grateful to Allah SWT for giving me an opportunities and

strength to complete this proposal. I want to thanks to my parent, Mohd Suhaimi bin

Awang and Akmar binti Musa for supporting me financially and spiritually

throughout the process of writing this thesis and complete my final year project also

my life in general.

Besides, I would like to express grateful to my supervisor, Prof Madya Dr

Yousef Abubaker Mohamed Ahmed El-Ebiary for the continuous support in my

research project, for he patience, motivation and also her knowledge. I also feel

grateful because this is my first time have a national lecturer and hope I can keep

learning something new from my supervisor.

Lastly, I want to thanks to all my fellow friends that helped me throughout

this research and to who helped me indirectly or directly in this research.

Thank You.

ABSTRACT

Occupation of Kids Learning (AR) is an interactive smartphone application

designed to provide a learning attractive to users especially to children aged 4 to 8

years. This application is developed using a number of appropriate software and are

able to integrate the latest technology of Augmented Reality. Among Unity 3D -

software for developing this application, Vuforia - a place where the marker

database’s augmented reality is stored and Autodesk Maya – to create 3D model. The

problems identified are these kids do not like it or get bored with the existing learning

system because it only uses normal books only and there is no element that makes it

interactive. With using this Augmented Reality technology for Occupation for Kids

Learning, it will be more interactive applications to used by user or children.

ABSTRAK

Occupation of Kids Learning (AR) merupakan satu aplikasi telefon pintar

yang interaktif dibangunkan untuk memberi satu pembelajaran yang menarik kepada

pengguna terumatanya kepada kanak-kanak yang berumur 4 hingga 8 tahun. Aplikasi

ini dibangunkan menggunakan beberapa perisian yang sesuai dan mampu untuk

mengintegrasikan teknologi terkini iaitu Augmented Reality. Antaranya ialah Unity

3D – perisian utama untuk membangunkan aplikasi ini, Vuforia – tempat di mana

database marker augmented reality disimpan dan Autodesk Maya untuk 3D model.

Masalah yang dikenalpasti adalah kanak-kanak ini tidak suka atau bosan terhadap

sistem pembelajaran yang sedia ada kerana hanya menggunakan buku sahaja dan

tiada unsur elemen yang menjadikannya interaktif. Dengan menggunakan teknologi

Augmented Reality untuk Occupation of Kids Learning ini, aplikasi ini akan lebih

interaktif untuk digunakan oleh pengguna atau kanak-kanak.

CONTENTS

PAGE

DECLARATION I

CONFIRMATION II

DEDICATION III

ABSTRACT IV

ABSTRAK V

CONTENTS VI

LIST OF TABLES VIII

LIST OF FIGURES IX

CHAPTER I

INTRODUCTION

1.1 Introduction 1

1.2 Project Background 2

1.3 Problem Statement 2

1.4 Objective 2

1.5 Scope 3

1.6 Limitation of Work 3

1.7 Activities, Milestones (Gantt Chart) 4

1.8 Expected Result 5

CHAPTER II

LITERATURE REVIEW

2.1 Introduction 6

2.2 Learning Books 7

2.3 Occupation Learning Mobile Application 7

2.4 Occupation for Kids Learning, Web 8

2.5

2.6

Comparison Table of Existing Product

Comparison Table of The Existing Products with 5

Elements of Multimedia

9

10

CHAPTER III METHODOLOGY

3.1 Introduction 11

3.2

3.3

3.4

3.5

3.6

3.7

3.8

3.9

REFERENCE

Project Development Methodology

Analysis

Design

Develop

Implementation

Evaluation

PROJECT REQUIREMENT

Software Requirement

Hardware Requirement

12

12

14

15

18

18

19

20

21

LIST OF TABLES

TABLE TITTLE PAGE

1.1 Gantt Chart 4

2.1 Comparision table of existing product 9

2.2 Comparison table of the existing products with 5 elements

of multimedia

10

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Learning Books 7

2.2 Occupation Learning Mobile Application 7

2.3 Occupation for Kids Learning, Web 8

3.1

3.2

3.3

3.4

3.5

3.6

3.7

3.8

3.9

ADDIE Model

Analysis Phase

Storyboard

Create marker with Adobe Photoshop CC

Modelling 3D

Store marker’s database with Vuforia

Building environment AR with 3D Unity

Software for development project

Hardware for development project

12

13

14

15

16

16

17

19

20

CHAPTER I

INTRODUCTION

1.1 Introduction

Augmented Reality (AR) is an example of the revolution that occur in

technology that continuously expand around the world now. AR is a new kind of

interactive technology that give us new way to interact in direct view of an existing

environment. It allows us to create or put 3D object directly onto physical things or

fused together in real-time. In addition to that, other features that AR offer to users

are sound, videos and graphics too. Nowadays, there are various applications that

integrated with augmented reality technology.

1.2 Project Background

“Occupation of Kids Learning (AR)” is an application that will help children

to learn in interactive way. This application with Augmented Reality features

developed for children to learn about job or profession. Children always thinking

about what to be when they grow up, this is why it's important to let them know about

the profession. User or children need to scan at the occupation marker by using the

flash card, then the 3D object will appear or display on mobile phone. So, this kind of

learning will encourage the children become more excited to learn about occupation.

1.3 Problem Statement

Children did not know what they want to be when they grow up.

Children may be bored as there is no interactive lesson during learning.

Some children are lack of interest with the “normal” book learning.

1.4 Objective

There are a few purposes in developing this application with augmented reality which

is:

To design the interactive system towards kids learning.

To develop an attractive card with augmented reality using software Unity

3D, Maya 3D, Adobe Photoshop and Vuforia.

To evaluate the effectiveness of occupation learning using augmented reality

technique.

1.5 Scope

The scopes for this project are identified to make the application development process

easier. The scope is divides into two, which are user scope and application scope.

Focused on children aged 4 to 8 years.

System focuses on mobile device only – android platform

1.6 Limitation of Works

Only 15 flash cards of occupation created

Marker based technique using AR

Mobile based application

This application is only available on android platform only

1.7 Activities, Milestones (Gantt Chart)

Table 1.1 : Gantt Chart

TASK NAME

JAN FEB MAC APRIL MAY

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

Topic Discussion

Project Title

Proposal

Proposal Writing

Proposal Writing –

Literature Review

Proposal Progress

Presentation &

Evaluation

Discussion

Correction Proposal

Proposed Solution

Methodology

Proof of Concept

Drafting Report of The

Proposal

Submit Draft of Report

to Supervisor

Seminar Presentation

Final Report

Submission

1.8 Expected Result

By using the app, user can view and get the information clearly.

User can emphasize the button functionality on wide space

User friendly interface using graphical Augmented Reality

environment.

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

This chapter will explain about literature review that related to the mobile

application Occupation of Kids Learning (AR) that will be develop. Explanation in

this chapter is about the existing application such as normal traditional book, mobile

application, browser and others that related to the Occupation of Kids Learning (AR)

and also the technology of augmented reality. This literature is made for identifying

the weakness or lacking to related literature review sources.

2.2 Learning Books

Figure 2.1 : Learning Books

The learning book contain good pictures with words to help child’s mind to

recognize objects and pronounce words appropriately. This books it suitable for

primary school students as the reference for learning.

2.3 Occupation Learning Mobile Application

Figure 2.2 : Occupation Learning Mobile Application

Occupation Learning for Kids is free occupation educational game for

children aged 1 to 9 years old to learn about jobs. In this mobile application kids can

learn many types of occupations.

2.4 Occupation for Kids Learning, Web

Figure 2.3 : Occupation for Kids Learning, Web

This learning is available on their website. User can browse, download and

print worksheets designed for learning and practising English words related to the

theme.

2.5 Comparison Table of Existing Product

Product Platform Function Method Advantage Drawback

Fun

Activities

and

Learning

Occupation

Printed

book

Help

learning

None Easily to

read

Has good

picture

Design not

interactive

No sound

interaction

Occupation

Learning

Mobile

Application

Mobile

App

Creative

learning

with many

pictures

None

Easily to

read

Has good

pictures

Its contain

quiz

Does not

have

enough

animation

Unclear

sound

Occupation

for Kids

Learning,

Web

Androi

d/ IOS

phone

Device

Help build

vocabulary

Display

sound

HTML

JavaScri

pt

PHP

Easy to

browse

Its contain

many

content

Need to

print

worksheets

to learn

Table 2.1 : Comparison table of existing product

Table 2.1 describes about comparison of the existing product with platform,

function, method, advantage and drawback. This table we will know comparison each

of product.

2.6 Comparison Table of The Existing Products With 5 Elements of

Multimedia

Product Text Image Video Audio Animation

Fun Activities

and Learning

Occupation

Occupation

Learning

Mobile

Application

Occupation for

Kids Learning,

Web

Table 2.2 : Comparison table of the existing products with 5 elements of multimedia

The Table 2.2 describes about comparison of the existing product with 5 element of

multimedia such as Text, Image, Video, Audio and Animation. This table we will know

comparison each of product.

CHAPTER III

METHODOLOGY

3.1 Introduction

This chapter is an explanation about the methodology that will be used to

develop the application Occupation of Kids Learning with Augmented Reality

feature. In addition, there also have the explanation of some software that will be

used to build this project.

3.2 Project Development Methodology

Development process of an application is a detail process and needs to be

executed according to their phases. There are a lot of development model or

methodology that can be uses to develop an application or system and there also have

a specific development model that also can be apply on specific application

development process only. It also can a combination of elements that from different

development model that will be the guidance during the development process of the

application. The development model for this application is ADDIE development

model.

Figure 3.1 : ADDIE Model

3.3 Analysis

Analysis phase is the early stage in the project development model. In this

phase, the analysis process will be carried out to find the problem that exist related to

the development of the application. Among of important matter that need to care

about when do the analysis is the user needs and the new element or value added that

must be apply in order to attract the user to using the application. Through this phase,

the process of application development will become easier in particular for setting up

the objective and to choose the content that corresponding to the application.

Figure 3.2 : Analysis Phase

3.4 Design

The design phase deals with learning objectives, assessment instruments,

exercises, content, subject matter analysis, and lesson planning and media selection.

The design phase should be systematic and specific. Systematic means a logical,

orderly method of identifying, developing and evaluating a set of planned strategies

targeted for attaining the project’s goals. Specific means each element of the

instructional design plan needs to be executed with attention to details. The developer

need make storyboard for create a visual map of application. This can help the

developer shape the vision and flow of application.

Figure 3.3 : Storyboard

3.5 Development

Third phase is the process of development on the real workable and

functioning application. This process involved the combination of the element that

will be use such as 3D model of the building, button, sound and others, all of that will

be apply in the application itself. The related software will be used in order to make

the element needed in the application is workable.

i) Create Marker

Figure 3.4 : Create marker with Adobe Photoshop CC

Markers created using Adobe Photoshop CC. On the picture there are

pictures of and also two languages such as Malay and English. So, the users

scan the images or the markers and the 3D models will display.

ii) Modelling 3D

Figure 3.5 : Modelling 3D

That figure shows the making of 3D model using Autodesk Maya software.

Rigging, animation, texturing and rendering also created here.

iii) Store Marker’s Database with Vuforia

Figure 3.6 : Store marker’s database with Vuforia

The figure 3.6 show the homepage of Vuforia development tool. We

store marker’s database in this engine. When the database was uploaded, we

can connect with unity for the marker.

iv) Building Environment AR with 3D Unity

Figure 3.7 : Building environment AR with 3D Unity

The Figure 3.7 shows the unity 3D software. The developer needs to

setup the Unity 3D before start using it. This is the platform where to begin

build AR experiences. Next, developer need to create project and create the

scenes which is Navigation, Camera & Light, 3D Object, Physics, Material

and Scripts.

3.6 Implementation

The implementation phase same meaning of the testing phase. The application

that have complete on the development process must be tested before release to the

user. This phase of testing must be run by the supervisor because anything that lack

of on this application or the weakness that had been made on the development

process will be detect and inform by the supervisor in order to make the application

more betters. On this phase, the comment and critic allow from supervisor, so that the

improvement can be done. Through this phase, effectiveness and functionality of the

application will be improve and indirectly it will keep the quality of the application.

Test run project

User test run

3.7 Evaluation

The last phase is the evaluation phase which is the final product will be judge

and evaluate by the user or professional panel.

Debug

Final Product

PROJECT REQUIREMENT

3.8 Software Requirement

The software used during the Occupation of Kids Learning with Augmented

Reality application development is Unity 3D – Game Engine; this will be the main

software that should gather and combine of the element that will be have on the

application. Autodesk Maya 2018 software is uses to make 3D model of anything

such as building model and more. Microsoft Visual Code; this software is use for

code the function in the application such as to make the button functioning when user

press the button. Vuforia; this is the platform that allow this application to have the

feature of Augmented Reality on the devices.

Figure 3.8 : Software for development project

3.9 Hardware Requirement

Hardware is another thing that important to have in order to make the

application work. Without hardware, the software cannot be use. The hardware that

use are a high spec laptop because it need more power when it comes to work with

3D and animation. Next one is, android phone, it is use to test the application whether

it work fine on the device or not.

Figure 3.9 : Hardware for development project

1- Laptop ACER NITRO 5

Processor : Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz

Operating System : Windows 10 Pro – 64 bit

Memory : 12GB RAM

2. Android Mobile Phone: Vivo V11i

Used to run and testing the application.

REFERENCES

1. Eóghan Quigley (2018). ADDIE: 5 Step To Build Effective Training

Programs.

2. Marco Paladini (2018). 3 Different Types of AR Explained: Marker-Based,

Markerless & Location.

3. Diversified Internet Holdings LLC (2018). The Ultimate Guide to

Understanding Augmented Reality (AR) Technology.