INTERACTIVE MOBILE APPLICATION · interactive mobile application “chem-is-easy” mazlilah binti...

INTERACTIVE MOBILE APPLICATION

“CHEM-IS-EASY”

MAZLILAH BINTI MOHAMAD SUBADI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONORS

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

INTERACTIVE MOBILE APPLICATION

“CHEM-IS-EASY”

MAZLILAH BINTI MOHAMAD SUBADI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONORS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

i

APPROVAL

This project report entitled Learning Chemistry for Periodic Table using Mobile

Application was prepared and submitted by Mazlilah binti Mohamad Subadi, matric

number BTDL16043248 and in my point of view, this project fulfils a condition to be

awarded a Degree of Bachelor of Information Technology (Media Informatics) with Honor

in Universiti Sultan Zainal Abidin (UniSZA).

Signature : …………………………

Supervisor : Puan Rohana binti Ismail

Date :

ii

DECLARATION

I hereby declare that this project is based on my own effort with helps getting information

sources that I have confessing. All section of the texts and results which have been obtained

from other people or sources are fully references. I understand that are cheating and

plagiarism constitute a breach of university regulations and will be dealt with accordingly.

Signature : ………………………………...

Name : Mazlilah binti Mohamad Subadi

Matric Number : BTDL16043248

Date :

iii

ACKNOWLEDGEMENT

Assalamualaikum,

I am using this opportunity to express my greatest gratitude to everyone who had

supported me throughout my final year project, Learning Chemistry for Periodic Table

using Mobile Application. I am thankful for their aspiring guidance, invaluable constructive

criticism and friendly advice during the project work. I am sincerely grateful to them for

truthful and illuminating views on a number of issues related to the project.

Firstly, I express my thanks to Puan Rohana binti Ismail as my supervisor for

guidance, monitoring and constant encouragement throughout the course of this final year

project. Appreciation is also given to all lecturers under the Faculty of Informatics and

Computing especially to lecturers under the Multimedia Department for giving me

constructive and encouraging criticisms in completing this final year project.

Not forget to appreciate my beloved parents and family for their moral support and

material assistance that they have given to me for completing this project to the end. I would

like to thanks all my friends and classmates for their valuable comments and suggestions

on this project which give me inspiration to improve this project.

Lastly, I would like to thank to all the people for their help directly or indirectly to

complete this project. Hopefully that all my works and efforts gets blessings from Allah

and can give benefits to all in the future.

Thank you,

Mazlilah binti Mohamad Subadi.

iv

ABSTRACT

Mobile technology is increasingly prevalent in higher education. Chemistry-related

software applications on touchscreen computers are emerging as a popular platform in

many areas, including in the chemistry classroom. In this work, a new courseware-based

application designed for hand-held and portable touch-controlled devices is presented. This

final year project introduce Chem-is-Easy, an interactive learning application developed to

support students in learning about the Periodic Table. Periodic Table is a tabular

arrangement of the elements according to their atomic numbers so that elements with

similar chemical properties are in the same column, and is one of the fundamental topics

when learning Chemistry. The topic is often challenging to students as there are many

elements there in the Periodic Table and numerous equations of elements reaction

formation need to be identified and understood. Further, most students have constrained

access to school chemistry laboratories thus limiting their opportunities to conduct practical

experiments beneficial to their learning. Chem-is-Easy allows students to conduct lab

experiments that simulates elements reaction via its lab anywhere and at any time. Students

also can enhance their understanding about the topics by answering the questions provided

at the games. With the interesting video, audio, graphics and animations provided, it will

make the students more interested and not boring.

v

ABSTRAK

Teknologi mudah alih semakin berleluasa dalam pendidikan tinggi. Aplikasi perisian yang

berkaitan dengan kimia pada komputer skrin sentuh muncul sebagai platform yang popular

di banyak bidang, termasuk dalam kelas kimia. Dalam karya ini, aplikasi berasaskan

perisian direka bentuk untuk peranti tangan yang dikendalikan dan peranti sentuhan

mudah alih dibentangkan. Projek tahun akhir ini memperkenalkan Chem-is-Easy, sebuah

aplikasi pembelajaran interaktif yang dibangunkan untuk menyokong pelajar dalam

pembelajaran tentang Jadual Berkala. Jadual berkala adalah susunan unsur-unsur

mengikut nombor atomnya supaya elemen-elemen yang mempunyai sifat kimia yang serupa

berada dalam lajur yang sama, dan merupakan salah satu topik asas apabila mempelajari

Kimia. Topik ini sering mencabar kepada pelajar kerana terdapat banyak elemen di dalam

Jadual Berkala dan banyak persamaan pembentukan reaksi unsur perlu dikenalpasti dan

difahami. Selanjutnya, kebanyakan pelajar telah terhalang atas beberapa faktor ke makmal

kimia sekolah sehingga membatasi peluang mereka untuk menjalankan eksperimen

praktikal yang bermanfaat untuk pembelajaran mereka. Chem-is-Easy membolehkan

pelajar menjalankan eksperimen makmal yang menyerupai tindak balas unsur melalui

makmalnya di mana sahaja dan pada bila-bila masa. Pelajar juga boleh meningkatkan

pemahaman mereka mengenai topik dengan menjawab soalan-soalan yang disediakan di

dalam permainan. Dengan video, audio, grafik dan animasi yang menarik, ia akan

menjadikan pelajar lebih berminat dan tidak membosankan.

vi

TABLE OF CONTENTS

PAGE

APROVAL i

DECLARATION ii

ACKNOWLEDGEMENT iii

ABSTRACT iv

ABSTRAK v

TABLE OF CONTENTS vi

LIST OF TABLES x

LIST OF FIGURES xi

LIST OF ABBREVIATIONS xiv

CHAPTER 1 INTRODUCTION

1.1 Project Background 1

1.2 Problem Statement 3

1.3 Objectives 3

1.4 Project Scopes 4

1.5 Limitation of Works 4

1.6 Expected Outcome 5

CHAPTER 2 LITERATURE REVIEW

2.1 Introduction 6

2.2 Mobile Application 7

2.3 Chemistry Subject 7

2.4 Existing Applications 8

2.2.1 Periodic Table 2019 8

2.2.2 Periodic Table 2018 Chemistry In Your Pocket 9

2.2.3 Chirality-2: Development of a Multilevel Mobile

Gaming App To Support the Teaching of

Introductory Undergraduate-Level Organic

Chemistry

10

2.2.4 Chairs!: A Mobile Game for Organic Chemistry

Students To Learn the Ring Flip of Cyclohexane

11

vii

2.2.5 Salt Hero: An Interactive Application for

Learning Salt in Chemistry

13

2.5 Propose Application 14

2.6 Comparison between Journal and Mobile Applications 15

2.7 Conclusion 17

CHAPTER 3 METHODOLOGY AND DESIGN

3.1 Introduction 18

3.2 Research Paradigm and Justification 19

3.2.1 Phase 1 : Analysis 21

3.2.2 Phase 2 : Design 21

3.2.3 Phase 3 : Development 22

3.2.4 Phase 4 : Implementation 22

3.2.5 Phase 5 : Evaluation 22

3.3 System Requirements 23

3.3.1 Software Requirements 23

3.3.2 Hardware Requirements 24

3.4 Navigation Structure 25

3.5 Process Design 26

3.5.1 Framework 26

3.6 Database Design 27

3.6.1 Entity Relationship Diagram (ERD) 27

3.7 Interface Design 28

3.7.1 Homepage Design 28

3.7.2 Input Form Design 29

3.7.3 Periodic Table Page Design 31

3.7.4 Lecture Notes Page Design 33

3.7.5 Lecture Videos Page Design 35

3.7.6 Lab Page Design 37

3.7.7 Games Page Design 39

3.7.8 Championship Page Design 41

viii

3.8 Conclusion 42

CHAPTER 4 SYSTEM IMPLEMENTATION

4.1 Introduction 43

4.2 Screen Input Output Report 44

4.2.1 Splash Screen 44

4.2.2 Application Main Menu 45

4.2.3 User Registration 46

4.2.4 User Login 47

4.2.5 Application Homepage 48

4.2.6 Periodic Table Menu 49

4.2.7 Periodic Table Elements Properties Explanation

Page

50

4.2.8 Lecture Notes Menu 51

4.2.9 Lecture Notes Page 52

4.2.10 Lecture Videos Menu 54

4.2.11 Lecture Videos Page 55

4.2.12 Lecture Videos Link with Youtube 56

4.2.13 Lab Menu 57

4.2.14 Lab Experiment Page 58

4.2.15 Games Menu 59

4.2.16 Games Page for Quiz 60

4.2.17 Games Page for True or False 62

4.2.18 Games Page for Multiple Choice Questions 64

4.2.19 Championship Menu 66

4.2.20 Application Info/Help 67

4.2.21 Application Setting 68

4.2.22 Logout Application 69

4.2.23 Exit Application 70

ix

CHAPTER 5 TESTING AND RESULT

5.1 Introduction 71

5.2 Testing Analysis 72

5.2.1 Black Box Testing 72

5.2.2 White Box Testing 72

5.3 Test Case 73

5.3.1 Success User Registration 73

5.3.2 Failed User Registration 74

5.3.3 Success User Login 75

5.3.4 Failed User Login 76

CHAPTER 6 CONCLUSION AND DISCUSSION 77

6.1 Introduction 78

6.2 Project Contribution 79

6.3 Project Constraints 80

6.4 Future Works 80

6.5 Conclusion 80

REFERENCES 81

APPENDIX 82

x

LIST OF TABLES

TABLE TITLE PAGE

2.1 Comparison between Existing Mobile Applications 15

3.1 List of Software Requirements 23

3.2 List of Hardware Requirements 24

5.1 Test Case for Success User Registration 73

5.2 Test Case for Failed User Registration 74

5.3 Test Case for Success User Login 75

5.4 Test Case for Failed User Login 76

Gantt Chart FYP 1 82

Gantt Chart FYP 2 84

xi

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Start up interface in Periodic Table 2019 8

2.2 Interface of Periodic Table 2018 Chemistry In Your

Pocket

9

2.3 Screenshots from CHIRALITY-2 Games Levels 10

2.4 Screenshots from Chairs! Puzzle Games 11

2.5 The Interface of “Salt Hero” Homepage 13

3.1 ADDIE Model 19

3.2 Navigation Structure for Interactive Mobile Application

“Chem-is-Easy”

25

3.3 Framework of Chem-is-Easy 26

3.4 Entity Relationship Diagram (ERD) 27

3.5 Homepage of Chem-is-Easy 28

3.6 Interface Register Form 29

3.7 Interface Login Form 30

3.8 Interface of Periodic Table Menu 31

3.9 Interface of the Properties of the Elements in Periodic

Table

32

3.10 Interface of the Chapter Contain in Periodic Table Topic 33

3.11 Interface Lecture Notes for one of the Chapter in the

Periodic Table Topic

34

3.12 Interface for Lecture Videos Option 35

3.13 Interface of the Lecture Video Linked to the Youtube

Website

36

3.14 Interface for Lab Option 37

3.15 Interface for Lab which Student Can Do Experiment 38

xii

3.16 Interface for the Games Option 39

3.17 Interface Games Platform 40

3.18 Interface for Player’s Score in each Games 41

4.1 Splash Screen for Interactive Mobile Application

“Chem-is-Easy”

44

4.2 Main Menu for Interactive Mobile Application

“Chem-is-Easy”

45

4.3 User Registration Page 46

4.4 User Login Page 47

4.5 Interactive Mobile Application “Chem-is-Easy”

Homepage

48

4.6 Interactive Mobile Application “Chem-is-Easy” Periodic

Table Menu

48


Explanation of Elements in Periodic Table

50

4.8 Interactive Mobile Application “Chem-is-Easy” Lecture

Notes Menu

51


Notes Cover Page Book of Chapter 2

52

4.10 Interactive Mobile Application “Chem-is-Easy” Content of

Lecture Notes for Chapter 2

52


Videos Menu

54

4.12 Interactive Mobile Application “Chem-is-Easy” Video

Player in Lecture Videos Page

55

4.13 Interactive Mobile Application “Chem-is-Easy” Video

Youtube Link for Lecture Videos

56

4.14 Interactive Mobile Application “Chem-is-Easy” Lab Menu 57

4.15 Interactive Mobile Application “Chem-is-Easy” Lab

Experiment Page

58

xiii

4.16 Interactive Mobile Application “Chem-is-Easy” Games

Menu

59

4.17 Interactive Mobile Application “Chem-is-Easy” Quiz

Games Instruction

60

4.18 Interactive Mobile Application “Chem-is-Easy” Quiz

Games

61

4.19 Interactive Mobile Application “Chem-is-Easy” True or

False Games Instruction

62

4.20 Interactive Mobile Application “Chem-is-Easy” True or

False Games

63

4.21 Interactive Mobile Application “Chem-is-Easy” Multiple

Choice Questions Games Instruction

64

4.22 Interactive Mobile Application “Chem-is-Easy” Multiple

Choice Questions Games

65


Championship Menu

66

4.24 Interactive Mobile Application “Chem-is-Easy” Help/Info 67

4.25 Interactive Mobile Application “Chem-is-Easy” Setting 68

4.26 Interactive Mobile Application “Chem-is-Easy” Logout 69

4.27 Interactive Mobile Application “Chem-is-Easy” Exit 70

xiv

LIST OF ABBREVIATIONS / TERMS / SYMBOLS

ERD Entity Relationship Diagram

FYP Final Year Project

UniSZA Universiti Sultan Zainal Abidin

1

CHAPTER 1

INTRODUCTION

1.1 Project Background

In Malaysia, it was found that the learning and education process at the schools

were focused on using textbooks and slide show only. They still using the traditional

method of teaching and learning process. Students found it is difficult to understand the

subject. The teachers also will not repeat the same lessons to the students who are not

understand. If the students not understand the subject, they will get boring and not

interested in the subjects. The period of time at the school spend by students also

limited, so they will not able to ask the teachers about the lesson that they are not

understand and need to look at another alternative sources.

Today, technology has grown rapidly and is changing various aspects of life.

When used wisely, technology can support learning (Shamir and Korat, 2013). One

form of technology is mobile gadgets. The Android operating system is widely used

currently. Android has grown rapidly in comparison with other operating systems. This

is because Android has many advantages. It is open source, free and provides many

tools to build software, thus allowing opportunities for application development

(Nazruddin, 2012). Now days, there are many interactive applications that are related

2

to learning and education have been developed. The world is getting advanced so,

people started to invent something to ease their life including the learning process at

school.

The purpose of development of this application which is titled as "Chem-is-

Easy" are based on multimedia technology computing. With the development of this

application, it is hoped that the teachers and schools will be able to provide more

teaching and learning materials in the form of multimedia in schools for the students

especially for the Form 4 students who are newly introduced to the Chemistry subject.

This application development focuses on the syllabus of Chapter 4 which is Periodic

Table. In this topic, there are five sub topics: Introduction to Periodic Table, Group 1

Elements, Group 17 Elements, Group 18 Elements and, Period and Transition Metal.

The more important thing is the effectiveness of this application to the learning process

and the attractiveness of the student to the subject. This application will use variation

of multimedia elements such as text, graphics, audio and animation in order to make the

lesson easier to understand and attractive.

With the creation of this interactive application, it is hoped that it will help

students for better understanding the subject that have been taught as well as the

teaching and learning lessons taught by the teachers in the classroom. It was developed

in the form of mobile applications. With the existence of this multimedia learning

technology, we can equally share the information and the learning process in the school

will be more effective and interesting.

3

1.2 Problem Statements

Even before developing this courseware, some problems have been identified.

The problems that have been identified are the students and teachers are only focused

on using the textbooks that the school provided and the slide show they prepared.

Research has also been done on learning process which that learning only using the

books is less understandable. It is because the learning process is conducted through

one-way communication, ignoring class discussion and other student involvement. This

type of learning process will make student no to understand the subject after the class

finished. Another problem is the teachers will not repeat the same lesson to the students

who do not understand. In this case, the students who are not understand the lesson will

need to look at another sources or ask the teacher. But with the limited time at school,

they will not able to do it. So they are forced to look for other alternative sources to get

better understanding in the lesson such as doing some exercises. So interactive

application will be needed to help the students and act as the alternative way of learning.

Interactive application also can be effective in the classroom, especially when used in a

blended learning approach. Technology has transformed nearly all areas of modern life,

and education is no exception.

1.3 Objectives

The objectives of this study are:

i. To design a courseware based for learning Chemistry for Form 4 students using

Android.

ii. To develop a courseware to learn Chemistry in effective way using Android.

iii. To test the functionality of the courseware based for learning the Chemistry

subject using Android.

4

1.4 Project Scope

The proposed courseware is develop using Android system because of its mobility and

efficiency. This courseware is develop according to the syllabus Chemistry subject of

Form 4 in Chapter 4 : Periodic Table. It visualizes this chapter into the form of

interactive application. The scopes for this project are identified to make the application

development process easier. The scope will be explained from the user aspect of view

and system function.

i. Students.

all student Form 4 can register through this system.

able to learn the subject easier.

able to answer the questions given.

able to view their scores.

ii. Teachers

able to get the tools for teaching.

iii. Parents

able to get some additional learning materials for their children.

1.6 Limitation of Works

There are several limitation and constraint that occurred throughout the development of

the application. These problems and limitations in conducting this study are:

i. This project is only focused on Chemistry subject Form 4 on Chapter 4 which

is Periodic Table.

ii. Only can be open in smart phone only.

iii. Only for Android system.

5

1.7 Expected Outcome

Based on the objective of the development for this project, this mobile application will

be run as below:

i. This mobile application will ease the student to learn the Chemistry subject via

online from any mobile devices at anytime.

ii. This mobile application is an effective way of the learning process now days

which is not focused on the books only.

iii. This mobile application also can make the students interested in the Chemistry

subject.

iv. Students can do their revision by using this application and can help them

answer the question during examination because there are also quiz provided.

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This chapter provide the literature review for the application that will be

developed. The literature review is the process of reading, analysing, evaluating and

summarizing scholarly material about a specific. It can be guideline to develop a new

application so that the new application can provide better or more functional than the

existing application.

There are some sources that can be as references. For examples, books, websites,

social media and some of the existing applications. There are some advantages and

disadvantages that can be analyse and then try to think of the added value that can be

applied to the application that will be developed.

7

2.2 Mobile Application

Software applications known as apps refer to various types of software

applications including game applications that are downloadable from internet into

handheld device (Kinsey, 2011). Apple.com reported that 10 billion of apps have been

downloaded from Apple App Store alone. Although apps have been utilized by mobile

owners, its usage, research and development in education context can be considered

relatively new (Felicello, 2011).

Previous studies related to apps in education reported that English language

learning such as reading and learning vocabulary is the most studied and researched

area (Felicello, 2011). Besides learning English language, study conducted in

Mathematics apps has been reported (Payne, 2007). The quantitative study reported that

the Mathematics apps is effective for students in high poverty schools. Another study

reported that apps in Probability topic had increased students’ engagement toward the

topic and also at the same time increase students’ self-learning ability (Atan, 2010).

Researchers of the previous studies justified that apps were used as part of their research

as apps act as an enabler to provide an ubiquitous and self-pace learning environment

for students. Besides that, as most students are equipped with hand-held device,

educational apps are seen as an appropriate approach to teach students using technology

platform that students are already familiar with (Redd, 2011).

2.3 Chemistry Subject

Another study by Wan Yunus and Mat Ali revealed that conducting chemistry

experiments in the laboratory can contribute to students’ positive attitude towards

learning Chemistry. Chemistry subjects at Malaysian schools would typically include

practical sessions in the school chemistry laboratories. However, students usually have

constrained access to these labs due to issues such as safety. This limits students’

opportunity to conduct practical experiments beneficial to their learning.

8

2.4 Existing Applications

2.4.1 Periodic Table 2019

Figure 2.1 : Start up interface in Periodic Table 2019

“Periodic Table 2019” is a free application for Android which displays the entire

periodic table at start up interface. The table has a long-form approved by the

International Union of Pure and Applied Chemistry (IUPAC) as the core. Developed by

August Software and release on 5 March 2016, this application only provide the user

Periodic Table and information for each of the elements. There is no animation, audio

and video. So, for the students in age around 16 year old to 17 year old, they will get

boring and find it is hard to understand although the information provide is complete.

9

2.4.2 Periodic Table 2018 Chemistry In Your Pocket

Figure 2.2 : Interface of Periodic Table 2018 Chemistry In Your Pocket

“Periodic Table 2018 Chemistry In Your Pocket” is an application which

provide the information about the Periodic Table. This application was develop by JQ

Soft and was released on 25 April 2011. In this application, there will also provide the

information about electron shell diagram for each element, solubility chart and molar

mass calculator which gives this application more advantages for user to use it. But this

application its disadvantages. There is no animation, video and even audio in it. User in

range age of 16 to 17 will find it not interesting and also hard to understand all the

elements in the Periodic Table.

10

2.4.3 Chirality-2 : Development of a Multilevel Mobile Gaming App To Support

the Teaching of Introductory Undergraduate-Level Organic Chemistry

The research on Chemistry-related software applications journal which entitled

“CHIRALITY-2” by Oliver A. H. Jones, Maria Spichkova, and Michelle J. S. Spencer.

The objective of this project is to develop a multilevel mobile gaming application to

support the teaching of introductory undergraduate-level Organic Chemistry. It may

also be of use and interest for those in their final year of high school as well as for

students revising introductory Organic Chemistry.

Chirality-2 is one of the first purpose-built mobile applications in general release

specifically developed to teach Organic Chemistry and the only one to feature multiple

levels, a reward system, and social media integration. There are six levels in Chirality-

2. Users earn medals for each level and are able to post scores on social media or track

their progress. It is available for free on both the Apple (iOS) and Android (Google

Play) operating systems.

Figure 2.3 : Screenshots from CHIRALITY-2 Games Levels

11

2.4.4 Chairs! : A Mobile Game for Organic Chemistry Students To Learn the

Ring Flip of Cyclohexane

The game Chairs! was created to teach the ring flip of cyclohexane. Chairs! is

the first game-based mobile application in wide release specifically geared toward

organic chemistry teaching and learning. The game application Chairs! is a product by

Julia Winter, Michael Wentzel and Sonia Ahluwalia.

Figure 2.4 : Screenshots from Chairs! Puzzle Games

In the game, players are presented with the two different conformational isomers

of cyclohexane in Figure 2.4. A bond is shown on one of the conformers, and a pulsing

circle marks the corresponding position on the other conformer. The player must draw

the bond on the other conformer with the correct angle, either axial or equatorial. If the

bond that is drawn is not the correct, it turns red. When the bond being drawn is at the

correct, it turns green. There are 13 levels: in the first 6 levels, a white circle pulses to

indicate where the bond should be drawn. In levels 7 until 13, the white circle is taken

away.

12

The scoring system is straightforward: for every correct bond that is drawn, the

player earns a point. The play time is limited by a bar at the top of the screen which

counts down at each new level. A mistake on an earlier level will affect the amount of

time given for a later level, thus increasing the pace and challenge of the game. A badge

is earned for a level when the level is completed with five correct puzzles in a row.

13

2.4.5 Salt Hero: An Interactive Application for Learning Salt in Chemistry

Salt Hero is interactive learning application offering an innovative approach to

learning about salt in Chemistry. Developed by Safurah Abdul Jalil, Siti Sarah Shamsul

Anuar and Norariffuddin Abd Rahman in 2017, it includes a virtual lab which allows

for ubiquitous learning. With the virtual lab, students are able to conduct virtual

experiments and observe animated simulations of different chemical reactions for each

salt formation at their convenience. The learning content of Salt Hero was designed

based on the current SPM chemistry syllabus, with the primary aim of supporting SPM

candidates in learning and preparing for their SPM paper examinations on this topic.

While this work specifically covers the learning of salt from the context of Malaysian

SPM syllabus, the approach proposed in this article and Salt Hero itself should be

applicable to general learning of the topic.

Figure 2.5 : The Interface of “Salt Hero” Homepage

14

2.5 Propose Application

This project entitled Interactive Mobile Application “Chem-is-Easy”. This

project will use Android Technology as a platform to run the application. This project

also will use priority learning technique which means the student can learn the Periodic

Table. The general process through the application is after logged in, the student needs

to select which section they want to view from this application. Then, the application

will be automated viewing what they have select from the homepage of the application.

The advantages of this application are the application will provide notes, videos,

experiments and games.

15

2.6 Comparison between Journal and Mobile Applications

Author Project Name Description Method Advantages

August

Software

(2016)

Periodic Table

2019

- provide the user

Periodic Table and

complete

information for

each of the

elements

Mobile

application

- complete

information for

each of the

elements

JQ Soft

(2011)

Periodic Table

2018

Chemistry In

Your Pocket

- provide the user

Periodic Table and

complete

information for

each of the

elements

- provide the

information about

electron shell

diagram for each

element, solubility

chart and molar

mass calculator

Mobile

application

- very

complete

information

about each

elements in the

Periodic Table

Julia Winter,

Michael

Wentzel,

Sonia

Ahluwalia

(2018)

Chirality-2:

Development

of a Multilevel

Mobile

Gaming App

To Support the

Teaching of

Introductory

Undergraduate

-Level Organic

Chemistry

- designed to

supplement

classroom teaching

of a range of topics

in organic

chemistry at the

introductory

undergraduate level

- developed to

teach organic

chemistry and the

only one to feature

multiple levels, a

reward system, and

social media

integration

Game-based

application

- helped user

remember

concepts they

had forgotten

from

introductory

organic

chemistry

- pedagogical

value of the

application

16

Oliver A. H.

Jones,

Michelle J. S.

Spencer

(2016)

Chairs!: A

Mobile Game

for Organic

Chemistry

Students To

Learn the Ring

Flip of

Cyclohexane

- created to teach

the ring flip of

cyclohexane

- the scoring

system is

straightforward

which for every

correct bond

that is drawn, the

player earns a point

Interactive

games

- helped them

understand the

concept of

cyclohexane

- improved or

earned a

perfect score

on the second

quiz

Safurah

Abdul Jalil,

Siti Sarah

Shamsul

Anuar,

Norariffuddin

Abd Rahman

(2017)

Salt Hero: An

Interactive

Application for

Learning Salt

in Chemistry

- designed to

support students in

learning about salt

- students are able

to conduct virtual

experiments and

observe animated

simulations of

different chemical

reactions for each

salt formation at

their convenience

Interactive

learning

application

- the exercises

improve the

students

understanding

of the topic

- the

multimedia

elements

assisted

the students

understanding

Table 2.1 : Comparison between Existing Mobile Applications

17

2.7 Conclusion

This chapter discusses the collected literature review that had been reviewed during the

feasibilities studies. The literature review helps the developer to discover the problem

of previous research which needs to improve and overcome the problem. The main

method that is suitable to use in the development of the mobile application is an

interactive learning method.

18

CHAPTER 3

METHODOLOGY AND DESIGN

3.1 Introduction

In this section, the detailed methodology that used to develop this system is

described. The use of the methodology is to solve all the problem arising and to ensure

that the project will work as well as planning to develop this system smoothly and

complete within the given time. There are many types of methodology that we can apply

and used in the development of the system. The approach must be chosen correctly so

that it is suitable for the development of the project. It is the important step to guide the

researcher to manage the given task. Hence, I would like to use ADDIE Model for the

project of Chem-is-Easy. Furthermore, I will explain every phase that involve in the

development of this project and also the system requirement.

19

3.2 Research Paradigm and Justification

The ADDIE model is a systematic instructional design model consisting of five

phases. The generic term for the five-phase instructional design model consisting of

Analysis, Design, Development, Implementation, and Evaluation. Each step has an

outcome that feeds into the next step in the sequence. The five phases of ADDIE are as

follows:

Figure 3.1 : ADDIE Model

20

ADDIE model was chosen based on the following consideration:

i. Very suitable

it is heavily associated with good quality design, with clear learning

objectives, carefully structured content, controlled workloads for faculty

and students, integrated media, relevant student activities, and

assessment strongly tied to desired learning outcomes.

ii. Allow changes

any changes in developing the application can be implemented at every

phase to improve the functionality of the application.

iii. Save cost

the development of the application can save the cost because the

information collected at each phase are very particular until the final test

of the application.

21

3.2.1 Phase 1 : Analysis

The objective of this phase is to identify the problem faced by the target user.

So, in this project, the target user is Form 4 students. The first problem that had been

identified is the common way of learning via textbooks which lack audio and visual

aids can make the learning process even more boring and uninteresting for students.

Second, students need to carry out many experiments in order to visually experience the

outcome of each experiment. However, the common shortage of access to school

chemistry laboratories as well as insufficient amount of experiment apparatus and

materials limit students’ learning opportunities. Based on the identified problems, the

aim was to design and develop an interactive learning application called Chem-is-Easy

which supports students in learning and preparing for their examinations specifically on

the periodic table topic. The application should consist of two main parts: the learning

content delivery and the interactive learning activities.

3.2.2 Phase 2 : Design

In designing the functional screens of Chem-is-Easy, much effort is undertaken

to create a common ‘look and feel’ for all screens. In software design, ‘look and feel’

is a term used with respect to a graphical user interface and comprises aspects of its

design. The ‘look’ includes elements such as colours, shapes, layout, and typefaces, as

well as the ‘feel’ is a behaviour of dynamic elements such as buttons, boxes, and menus.

To ensure a unique but consistent look and feel is maintained, the ‘flat design’ is chosen

as the overarching scheme or style in Chem-is-Easy. ‘Flat design’ can be described as

a style of interface design which excludes any stylistic elements that give the illusion

of three dimensions and is focused on a minimalist use of simple elements, typography

and flat colours. According to Clum, flat design strips down visual elements to expose

their essential functionality, thus, it is adaptable to usability considerations.

22

3.2.3 Phase 3 : Development

This phase will transform the design into the real application by implementing

the coding. This application will be develop using Unity. This includes the creation of

digital assets such as graphics and animations. Interactivity on the objects was

incorporated using Unity scripting language, C#. The final deliverables were exported

in the form of Android Package Kit (.apk) for use on Android-based mobile devices.

3.2.4 Phase 4 : Implementation

A complete software will be present to test its effectiveness and see the problems

that are not notice during the design and development stage that may exist. Usually, the

implementation stage is will be implemented using a group of users who meet the target

user criteria. In this case, panels and all other testers systematically discover and report

issues within the application that need to be resolved. Any errors or bugs will be fix

before the software is release officially.

3.2.5 Phase 5 : Evaluation

The evaluation process will be made firstly by panels, lecturers and senior. If

there is a feedback that says it does not conform to the user's requirement, the

improvement process will be implemented to ensure that it is appropriate to the scope

of the user within the period underlined. Once the application is in steady state, it is

review that the application has meet all the goals, requirements and objectives for the

project plan satisfactory result.

23

3.3 Project Requirements

3.3.1 Software Requirements

List of software needed:

No. Software Purpose

1. Unity Platform to build Android application

2. Notepad ++ Editor to write code program

3. XAMPP Server Act as a local server to run and test the

application

4. MySQL Platform for the database of the application

5. Google Chrome A browser to run the localhost and searching for

information

6. Microsoft Word 2013 Platform for documentation of application

7. Adobe Photoshop Platform to design logo and background of

application

8. Adobe InDesign Platform to design storyboard for the application

9. Jing Used to captured and screen shot the images

10. Dropbox Used to store backup copied in cloud

Table 3.1 : List of Software Requirements

24

3.3.2 Hardware Requirements

List of hardware needed:

No. Hardware Description

1. Laptop LENOVO™ ideapad 320-14IKB

2. Processor Intel CoreI i5-7200U @ 2.50GHz 2.71 GHz

3. Memory 4.00 GB RAM

4. Operating System Windows 10

5. System Type 64-bit Operating System

6. Pendrive SanDisk Cruzer Edge 16.00GB

7. Mobile Phone Vivo Y66

8. Printer Canon PIXMA E410

Table 3.2 : List of Hardware Requirements

25

3.4 Navigation Structure

Figure 3.2 : Navigation Structure for Interactive Mobile Application “Chem-is-Easy”

26

3.5 Process Design

3.5.1 Framework

Figure 3.3 : Framework of Chem-is-Easy

27

3.6 Database Design

3.6.1 Entity Relationship Diagram (ERD)

An entity-relationship diagram (ERD) illustrates system’s entities

information and entities’ relationship. ERD composed of 3 things such as

identifying and defining the entities, determine entities’ interaction and the

cardinality of the relationship. Every box illustrate the table in database and lines

is to illustrate relationship.

The first process in this ERD is Students answer Games. In Games,

GameLevel becomes a composite primary key while Username become a

foreign key. Second is the process of interaction between Students and Score.

Students can check or view their score that they get during answering the

question in Games. GameLevel and Username will become composite primary

key.

Figure 3.4 : Entity Relationship Diagram (ERD)

28

3.7 Interface Design

3.7.1 Homepage Design

Figure 3.5 : Homepage of Chem-is-Easy

Figure 3.5 is the interface of first homepage that will be shown to the user. There

are four choices of menus that the user can access that are Lecture Notes, Lecture

Videos, Virtual Lab and Quizzes. For Lecture Notes menu, the user can get notes about

the Periodic Table. The user also can watch videos about Periodic Table at the Lecture

Videos menu and they can enhance their understanding in Periodic Table topic by

answering the question at Quizzes menu. The Virtual Lab menu is for the user to carry

out experiments on the Periodic Table topic. The Table Elements Button is about the

information of all the elements present in the Periodic Table.

29

3.7.2 Input Form Design

A new user needs to register first before able to log in into this application. The

user must fill in the registration form with their profile information that is required such

as first name, last name, username and password. Figure 3.6 is the example of interface

for the registration form.

Figure 3.6 : Interface Register Form

30

After successful register, the users need to log in first before they can access the

modules that contain in this application. All users need to enter their username and their

password. Figure 3.7 is the example of login form interface.

Figure 3.7 : Interface Log In Form

31

3.7.3 Periodic Table Page Design

Figure 3.8 shows interface where there will be shown the Periodic Table of the

Elements in Chemistry. All the elements of the Periodic Table will be provided for the

user.

Figure 3.8 : Interface of Periodic Table Menu

32

Figure 3.9 shows the interface of the elements properties. For example, if user

click “H” which is one of the elements that are present in the Periodic Table, so the

properties about the “H” element will be shown to the user.

Figure 3.9 : Interface of the Properties of the Elements in Periodic Table

33

3.7.4 Lecture Notes Page Design

Figure 3.10 is the interface from Lecture Notes Menu. Students can read and get

the notes about Periodic Table in this section. Because there are six subtopic of this

topic Periodic Table according to the Form 4 syllabus, so the will be different button

for each subtopic. Each button contains different lecture notes of different subtopic.

Figure 3.10 : Interface of the Chapter Contain in Periodic Table Topic

34

Figure 3.11 shows the lecture notes of the topic. For example, if the user click

the “INTRODUCTION TO PERIODIC TABLE” button, the notes about the

introduction of the Periodic Table will appear. The simple note will make students easy

to understand and remember.

Figure 3.11 : Interface Lecture Notes for one of the Chapter in the Periodic Table

Topic

35

3.7.5 Lecture Videos Page Design

Figure 3.10 is the interface from Lecture Videos Menu. Students can watch and

learn about Periodic Table in this section. Because there are six subtopic of this topic

Periodic Table according to the Form 4 syllabus, so the will be different button for each

subtopic. Each button contains different lecture videos of different subtopic.

Figure 3.12 : Interface for Lecture Videos Option

36

Lecture Videos will bring user to watch videos on Periodic Table topic at

Youtube website. The Video provided will link the application to the Youtube website.

Each subtopics in Periodic Table will have their own videos. This will make user more

understand about the Periodic Table topic besides only reading the Lecture Notes.

Figure 3.13 : Interface of the Lecture Video Linked to the Youtube Website

37

3.7.6 Lab Page Design

Figure 3.14 is the interface where user can carry out experiments. The

experiments are all about the elements in some of the Group of Element in the Periodic

Table. The experiments are based on the Chemistry textbook of Form 4 syllabus.

Figure 3.14 : Interface for Lab Option

38

Figure 3.15 is the experiment interface. With the implementation of 2D

animation, it will make the lesson more interesting.

Figure 3.15 : Interface for Lab which Student Can Do Experiment

39

3.7.7 Games Page Design

In this section, user will need to answer the questions given. The questions given

are all about the Periodic Table topic and was collected from the past year examinations.

There will be three types of games which each games will have different type of

question. Each correct answer will be given mark, while the wrong answer will not be

given any mark. The mark will be save for the next quizzes.

Figure 3.16 : Interface for the Games Option

40

Figure 3.17 is the interface of the games platform. User need to answers all the

question provided. After the users answer all the question, their score will be appear. In

this, users can know where are their weakness that they need to improve.

Figure 3.17 : Interface Games Platform

41

3.7.8 Championship Page Design

In this section, user can review all their score after they played the games. By

this, users can know where are the games that are their weakness and what they need to

do to improve the scores.

Figure 3.18 : Interface for Player’s Score in each Games

42

3.8 Conclusion

The conclusion is the detailed methodology is needed to develop this

application. The use of the methodology is to solve all the problem arising and to ensure

that the project will work as well as planning to develop this system smoothly and

complete within the given time. Hence, the ADDIE Model is used for the project of

Chem-is-Easy. The ADDIE model is a systematic instructional design model consisting

of five phases which are Analysis, Design, Development, Implementation and

Evaluation. This type of methodology is chosen because it is very suitable for this

development application, allow any changes and correction and also save the cost. It is

also act as a guideline from the starting of the development of the application until the

application is ready to be publish officially to users.

43

CHAPTER 4

SYSTEM IMPLEMENTATION

4.1 Introduction

Implementation is defined as the realization of a technical specification or

algorithm as a program, software component, or other computer system through

computer programming and deployment. Implementation and testing are done to ensure

the final product is developed according to specifications mentioned earlier in previous

chapter and as error-free as possible.

In this chapter, the implementation of Unity 2D is shown by the interface design.

The C# and PHP coding is illustrated in the interface captured. Series are steps taken

to access in the application should be done by different user. The user guide is provided

to enable user make use of the application. All the interface of the different user shown

in this chapter.

44

4.2 Screen Input Output Report

The interface is the point of the interaction between the user and the application.

The interface will be decided how the user can interact with the application and the

ability of that application to receive the input, process the input and produce the desired

output. It is also the important parts in the development process. The design of an

interface should be user-friendly because it can help to change user’s point of view of

the application. These are the interface for Interactive Mobile Application “Chem-is-

Easy”.

4.2.1 Splash Screen

Figure 4.1 : Splash Screen for Interactive Mobile Application “Chem-is-Easy”

Figure 4.1 shows the interface of Splash Screen for Interactive Mobile

Application “Chem-is-Easy”. At this interface, the application will loading with a delay

time that has been set up to display the title of this application as a welcome to the user

once they open the application.

45

4.2.2 Application Main Menu

Figure 4.2 : Main Menu for Interactive Mobile Application “Chem-is-Easy”

Voice audio : No

Background audio : Yes

Animation : All of the button show interactive effect and produce sound when click

Figure 4.2 shows the interface of the Main Menu for Interactive Mobile

Application “ Chem-is-Easy”. There are three buttons which are for Register, Login

and Start. The first timer user must register before they can enter the application. If the

user has been registered before, they just need to log in to enter the application. They

cannot enter the application until they are register or log in. Button “Start” only function

if the user had register or login.

46

4.2.3 User Registration

Figure 4.3 : User Registration Page

Voice audio : No



Figure 4.3 shows the User Registration page for a new user to access to the

application. The user must insert all the following details such as Firstname, Lastname,

Username and Password. After the registration is successful, the application will

redirect back to the Main Menu page for the user to log in before they can enter the

application.

47

4.2.4 User Log In

Figure 4.4 : User Log In Page

Voice audio : No



Figure 4.4 shows Login page for the user that had been register to access the

application. User need to insert their Name and Password. The Name and Password

need to be the same as what the user insert in their Registration page before. If either

the Name or the Password are wrong, the user cannot access to the application and will

remain in the Login page until the Username or Password inserted is correct.

48

4.2.5 Application Homepage

Figure 4.5 : Interactive Mobile Application “Chem-is-Easy” Homepage

Voice audio : No



Figure 4.5 shows the application Homepage when the user login into the

application if they insert their true Username and Password. If they insert false

Username or Password, the application will not redirect to this application Homepage

but will stay at the Login page with notification that says “Login Failed or Incorrect

Username or Password”. As we can see, there are six menus available for the user which

are Periodic Table, Lecture Notes, Lecture Videos, Lab, Games and Championship.

Next will be the interface for every function of each menu with an explanation.

49

4.2.6 Periodic Table Menu

Figure 4.6 : Interactive Mobile Application “Chem-is-Easy” Periodic Table Menu

Voice audio : No



Figure 4.6 shows the all the elements consists in Periodic Table of Chemistry

when the user click “Periodic Table” button in the Homepage. Since the elements have

different properties, so when the user click on the elements button, the application will

be directed to the element’s properties page according to what elements button that the

user click on. For example, if the user click “H” element’s button, the properties page

for H element will appear.

50

4.2.7 Periodic Table Elements Properties Explanation Page

Figure 4.7 : Interactive Mobile Application “Chem-is-Easy” Explanation of Elements

in Periodic Table

Voice audio : Yes


Animation : All of the button show interactive effect and produce sound when click and

the electron configuration is always rotating on its axis.

Figure 4.7 shows the page of explanation properties of an element which when

the elements button was clicked by the user. In this page, elements of the Periodic Table

will be explain in details, how the electron configuration of the elements rotate and the

pronunciation of the elements. As can be seen, the explanation of the elements is on the

left side, the electron configuration that will always be rotating is on the left side and

the pronunciation is when the button of the element is clicked.

51

4.2.8 Lecture Notes Menu

Figure 4.8 : Interactive Mobile Application “Chem-is-Easy” Lecture Notes Menu

Voice audio : No



Figure 4.8 shows the interface for Lecture Notes Menu which user have choices

and can choose what chapter they want to learn. Each button directed the user to the

notes of chapter. For example, if the user click “Chapter 2 : Group 18 Elements” button,

the application will directed the user to the page of the notes in Chapter 2. Since, there

are six chapters in this Periodic Table topic, so there are six buttons of the chapter which

will directed to its on Notes page.

52

4.2.9 Lecture Notes Page

Figure 4.9 : Interactive Mobile Application “Chem-is-Easy” Lecture Notes Cover

Page Book of Chapter 2

Figure 4.10 : Interactive Mobile Application “Chem-is-Easy” Content of Lecture

Notes for Chapter 2

53

Voice audio : No


Animation : All of the button show interactive effect, produce sound when click and

when the book flip its pages

Figure 4.9 and Figure 4.10 show the Notes page of the Lecture Notes Menu in

Chapter 2. It is design and animate to look like a book. When the user click on “Next”

button which is at the below of right corner of the application, this book look alike will

flip their page to the next page of the book. Same goes to when the user want to go back

to the previous page of the book, they can click the “Previous” button at the below of

the left corner of the application and it will flip the page to the previous page.

54

4.2.10 Lecture Videos Menu

Figure 4.11 : Interactive Mobile Application “Chem-is-Easy” Lecture Videos Menu

Voice audio : No



Figure 4.11 shows the interface for Lecture Videos Menu which user have

choices and can choose what chapter they want to watch. Each button directed the user

to the videos of the chapter. For example, if the user click “Chapter 2 : Group 18

Elements” button, the application will directed the user to the page of the videos in

Chapter 2. Since, there are six chapters in this Periodic Table topic, so there are six

buttons of the chapter which will directed to its on Videos page.

55

4.2.11 Lecture Videos Page

Figure 4.12 : Interactive Mobile Application “Chem-is-Easy” Video Player in Lecture

Videos Page

Voice audio : No



Figure 4.12 shows the Video Player in Lecture Videos Page for user can watch

and learn through video for further understanding about the chapter. User can click the

“Play” button to play the video, “Pause” button to pause the video and “Stop” button to

stop the video from playing. User can also low and high the sound volume of the video

as you can see there is the volume sound at the below right corner of page.

56

4.2.12 Lecture Videos Link with Youtube

Figure 4.13 : Interactive Mobile Application “Chem-is-Easy” Video Youtube Link for

Lecture Videos

Voice audio : No



Figure 4.13 shows the Lecture Videos Page which the videos are linked with the

Youtube site. Since the video available in this application is limited, so the user can gain

more knowledge and understanding with another videos that are linked online through

the Youtube website. User can click the “Video” button and the application will be

directed the user to the Youtube site that had been linked and watch the video online

through the site.

57

4.2.13 Lab Menu

Figure 4.14 : Interactive Mobile Application “Chem-is-Easy” Lab Menu

Voice audio : No



Figure 4.14 shows the interface of Lab Menu. User can choose which

experiment that they wanted to carry out in this application by click on the “Next”

button or the “Previous” button. If they have made decision on which experiment that

they wanted to carry out, they can click on the “Enter” button to enter the Lab

Experiment page and carry out the experiment that provided.

58

4.2.14 Lab Experiment Page

Figure 4.15 : Interactive Mobile Application “Chem-is-Easy” Lab Experiment Page

Voice audio : No


Animation : All of the button show interactive effect and produce sound when click,

the O2 compound were moving in the gas jar and the instruction of the

experiment provided were in animation.

Figure 4.15 shows the Lab Experiment page which the user can carry out the

experiments in this application. Because the time to carry out experiments in school

sometimes limited and maybe some of the materials needed were no there, so through

this application user can carry out the experiments. For the instruction, user need only

to click on the “Instruction” button and they will be guide with animation. For the result

and conclusion of the experiment, user need to click on the “Result” and “Conclusion”

button after they complete the experiment. If they wanted to repeat the experiment, just

click “Repeat” button and the same experiment can be carry out again.

59

4.2.15 Games Menu

Figure 4.16 : Interactive Mobile Application “Chem-is-Easy” Games Menu

Voice audio : No



Figure 4.16 shows the interface of the Games Menu which the user need to make

a choice which game that they wanted to play on. There are three type of game available

in this application which are Quiz, True or False and Multiple Choice Questions. Each

game has different way to play.

60

4.2.16 Games Page for Quiz

Figure 4.17 : Interactive Mobile Application “Chem-is-Easy” Quiz Games Instruction

Voice audio : Yes



Figure 4.17 shows the interface of the Quiz Games Instruction before the user

enter the real game play platform. User need to read the instruction given before play

the game as different games have different instruction to play. After they have

understand the instruction, they can play the game by click on the button “Play” below

the game’s instruction.

61

Figure 4.18 : Interactive Mobile Application “Chem-is-Easy” Quiz Games

Voice audio : Yes



While Figure 4.18 shows the interface of the Quiz Games once the user had

entered the game play platform. User need to answer the questions given by typing the

answers in the space provided below the questions. Marks will be given if the answers

are correct and vice versa when the answers are wrong. In this Quiz Games, there is no

timer which user can relax when answering the questions.

62

4.2.17 Games Page for True or False

Figure 4.19 : Interactive Mobile Application “Chem-is-Easy” True Or False Games

Instruction

Voice audio : Yes



Figure 4.19 shows the interface of the True or False Games Instruction before

the user enter the real game play platform. User need to read the instruction given before

play the game as different games have different instruction to need to be attention. After

they have understand the instruction, they can play the game by click on the button

“Play” below the game’s instruction.

63

Figure 4.20 : Interactive Mobile Application “Chem-is-Easy” True Or False Games

Voice audio : Yes



While Figure 4.20 shows the interface of the True or False Games once the user

had entered the game play platform. User need to answer the questions given either the

statements in the questions given is true or false by clicking on the button of the answers

available below the questions. If the answer is true, user needs to click on the button

“True” and the button “False” is for the answer that is false. Marks will be given if the

answers are correct and vice versa when the answers are wrong. In this True or False

Games, there is timer which user need to hurry up to finish answering the question

before the time is up.

64

4.2.18 Games Page for Multiple Choice Questions

Figure 4.21 : Interactive Mobile Application “Chem-is-Easy” Multiple Choice

Question Games Instruction

Voice audio : Yes



Figure 4.21 shows the interface of the Multiple Choice Question Games

Instruction before the user enter the real game play platform. User need to read the

instruction given before play the game as different games have different instruction to

need to be attention. After they have understand the instruction, they can play the game

by click on the button “Play” below the game’s instruction.

65

Figure 4.22 : Interactive Mobile Application “Chem-is-Easy” Multiple Choice

Question Games

Voice audio : Yes



While Figure 4.22 shows the interface of the Multiple Choice Question Games

once the user had entered the game play platform. There will be four choices of answers

and user need to choose which answer is correct among the four answers given. To

answers the question given, user needs to click one of the answers button below the

question. Marks will be given if the answers are correct and vice versa when the answers

are wrong. In this Multiple Choice Question Games, there is timer which user need to

hurry up to finish answering the question before the time is up.

66

4.2.19 Championship Menu

Figure 4.23 : Interactive Mobile Application “Chem-is-Easy” Championship Menu

Voice audio : No


Animation : All of the button show interactive effect and produce sound when click,

background image moves

Figure 4.23 shows the interface of Championship Menu Page. In this page, there

are the review of player’s scores from the games that the user play in the Games. Each

scores of the game will be automatically updated once the user done playing the games

in Games. The scores will be saved even the user logout or exit the application. Only

the user’s scores can be seen since the application is more to privacy for the user.

67

4.2.20 Application Info/Help

Figure 4.24 : Interactive Mobile Application “Chem-is-Easy” Help/Info

Voice audio : No



Figure 4.24 shows the interface of Help/Info of the application. In the interface,

it gives the user guidelines for the function of each menu at the Homepage of the

application. Each of the menu function is describe and explain in details.

68

4.2.21 Application Setting

Figure 4.25 : Interactive Mobile Application “Chem-is-Easy” Setting

Voice audio : No



Figure 4.25 shows the interface Setting of the application. As can be seen, there

are two volume slider. The above is for the button sound and the below is for the

background music sound. The two sliders volume give the same function as user drag

it to the left to lower the volume sound and if drag it to the right the volume sound is

increases.

69

4.2.22 Application Log Out

Figure 4.26 : Interactive Mobile Application “Chem-is-Easy” Log Out

Voice audio : No



Figure 4.26 shows the interface for user to logout and access the application as

other user. If the user click “Yes” button, the application will be directed to Main

Menu page as the user can register or login as another user. But if the user click “No”

button, the application will remain at the Homepage with the same user login.

70

4.2.23 Exit Application

Figure 4.27 : Interactive Mobile Application “Chem-is-Easy” Exit

Voice audio : No



Figure 4.27 shows the interface for user to exit the application. If the user click

“Yes” button, the application will be stop and the application will be not appear and

user cannot access the application but if the user click “No” button, the application will

remain and user can still access the application.

71

CHAPTER 5

TESTING AND RESULT

5.1 Introduction

A test case is a set of conditions or variables under which a tester will determine

if a requirement upon an application is partially or fully satisfied. Test case also defines

as a sequence of steps to test the correct behavior of functionality or feature of an

application. There are a list of steps, test, procedures and expected outcomes would be

stated in a test case. The test case for register a new user, login user and also update user

scores.

72

5.2 Testing Analysis

Testing is needed to test system full function and free error. There are three types

of testing in the system which is unit testing, integration testing and system testing. Unit

testing is used to verify the functionality of a specific section code and integration

testing works to exposed defects in the interfaces and interaction between the modules.

End-to-end testing or system testing, test a complete integrated system to verify that it

meets its requirements.

5.2.1 Black Box Testing

Black box testing is a software testing technique which tested the system without

looking the internal code structure and knowledge of internal paths of the software. This

testing is based entirely on the software requirements and specifications. It focuses on

input and outputs of the application without bothering about internal knowledge of the

software program. For example, this application tests the input and output on user login.

5.2.2 White Box Testing

White box testing focuses on strengthening security, the flow of inputs and

outputs through the application and improving design and usability. The testing can be

done at the application, integration and unit levels of the software development. The

basic goals of white box testing is to verify a working flow for an application. The

testing involved a series of predefined inputs against expected output so that when it

does not result in the expected output, it has to encounter a bug. For example, each form

are tested whether it can fill and to check validation such as at user registeration.

Expected output will be check when the data input is view like user list.

73

5.3 Test Case

5.3.1 Success User Registration

Test Case Success User Registration

Steps Test Procedure Expected Result

1. Click the button ‘Register’ to enter page registration

user.

View registration

page.

2. User enters the following detail:

Suggested input:

Firstname: Mazlilah

Lastname: Subadi

Username: MazlilahSubadi

Password: 123456

‘Register’ button

interactable since the

password is more

than or equal to 6

characters.

3. User clicks ‘Register’ button. Registration page

loaded. Pop up

“Registration

successful” appear.

The application will

be redirected to

Main Menu page for

the user to log in

after that.

4. Main Menu page will be displayed. View the Main

Menu page.

POST TEST PROCEDURE

User click ‘Log Out’ button. Logout page loaded.

Logout is successful.


be redirected to

Main Menu page.

Table 5.1: Test Case for Success User Registration

74

5.3.2 Failed User Registration

Test Case Failed User Registration


1. Click the button ‘Register’ to enter page user

registration

View registration

page.


Suggested input:

Firstname: Mazlilah

Lastname: Subadi


Password: 123456

‘Register’ button

interactable since

the password is

more than or equal

to 6 characters.

3. Student click ‘Register’ button. Registration page

loaded. Pop up

“Registration failed

or Username

already exist”

appear. The

application will

remain on the

registration page.

Table 5.2: Test Case Failed User Registration

75

5.3.3 Success User Login

Test Case Success User Login


1. Click the button ‘Login’ to enter page login. View login page.


Suggested input:


Password: 123456

‘Login’ button

interactable since the

password is more

than or equal to 6

characters.

3. User clicks ‘Login’ button. Login page loaded.

Pop up “Login

successful” appear.


be redirected to

Main Menu page

and the ‘Start’

button will be

interactable and user

can access the

application.

4. Main Menu will be displayed and ‘Start’ button will

be interactable.

View the Main

Menu page and

‘Start’ button can be

click.

POST TEST PROCEDURE

Student click ‘Log Out’ button. Logout page loaded.

Logout is successful.


be redirected to

Main Menu page.

Table 5.3: Test Case for Success User Login

76

5.3.4 Failed User Login

Test Case Failed Login Student


1. Click the button ‘Login’ to enter page login. View login page.

2. Student enters the following detail:

Suggested input:


Password: 123456

‘Login’ button

interactable since

the password is

more than or equal

to 6 characters.

3.

Student click ‘Login’’ button. Login page loaded.

Pop up “Login

Failed or Incorrect

username or

password” appear.


remain on the login

page.

Table 5.4: Test Case Failed User Login

77

CHAPTER 6

CONCLUSION AND DISCUSSION

6.1 Introduction

This chapter will discussed on the achievement and conclusion in develop the

Interactive Mobile Application “Chem-is-Easy”. The limitation faced throughout the

application was build will be discuss in detail in project constraints. This chapter also

aimed to summarize the whole project. It will also discussed the direction of research

in the future.

78

6.2 Project Contribution

Interactive Mobile Application “Chem-is-Easy” will be used in the learning

environment by the teachers and students. The major contribution of the project can be

summarized as follow.

i. The most important for developing the application is to help Form 4 student to

learn about the Periodic Table as alternative way than only focused on textbook.

In this application, there were provided the notes as students can learn and do

their revision through this application.

ii. Students also can test their understanding about the lesson by answering the

questions given at the games section.

iii. Unlike the traditional approach, this new application also provided lab sections

which students can do their own experiment without limited time and can able

to get the result and the conclusion of the experiment faster.

iv. Other than that, the application will keep all the data and record of the students’

scores in the database that can gather up to millions of the data. The data will be

store in more secure place because of only authorized user can access that

specific data.

79

6.3 Project Constraints

There are several problems and limitations that occurred throughout the

development of the application. These problem and limitations in conducting the study

are:

i. This project is only focused on the Periodic Table chapter of Form 4.

ii. Lack of information on syllabus Form 4 learning process and it needed more

observation and experience in this field.

iii. XAMPP needs to be opened when access the application.

6.4 Future Works

Interactive Mobile Application “Chem-is-Easy” helps the learning process more

interesting and efficient. There are several functions that can be implemented in this

application later in the future:

The application needs to have more animations when added, so that it will be

mush interesting and attract many student to study.

In the lab section, it should be includes all the experiments involved in the

chapter of Periodic Table according to the syllabus Form 4.

Lastly in the games section, it should be provides more questions and students

can know the correct answers if they answered the question wrongly.

80

6.5 Conclusion

In conclusion, this project will provide a better study than a manual study for

Form 4 student to learn about the Periodic Table. Thus, this will ease the students to

manage their studies at the school meanwhile it saves time and energy for the students

to do an experiment using the applications rather than they have to do the experiments

within the limited time at school.

Furthermore, the application is complete with games to test the students’

understanding about the Periodic Table. Data or score record of student and other

information can be stored in more secure place and the use of the database can save

stored space. The hope of developing of this application named Chem-is-Easy is to use

the e-learning environment and give benefit to the students in learning process.

81

REFERENCES

i. Yeap, T. K. 2007. Longman Reference Text Series Chemistry Form 4 Bilingual

Text, p 106 - 152. Selangor: Pearson Malaysia.

ii. Yamin, Y. and Fazilah, H. 2018. Kunci Emas App+ Ulang Kaji Tuntas +

Aplikasi SPM Chemistry From 4 KBSM, p 21 - 32. Selangor: Sasbadi.

iii. August Software (2016). Periodic Table 2019.

iv. JQ Soft (2011). Periodic Table 2018 Chemistry In Your Pocket.

v. Julia Winter, Michael Wentzel and Sonia Ahluwalia. (2018). Chirality-2:

Development of a Multilevel Mobile Gaming App To Support the Teaching of

Introductory Undergraduate-Level Organic Chemistry.

vi. Oliver A. H. Jones and Michelle J. S. Spencer. (2016). Chairs!: A Mobile Game

for Organic Chemistry Students To Learn the Ring Flip of Cyclohexane.

vii. Safurah Abdul Jalil, Siti Sarah Shamsul Anuar and Norariffuddin Abd Rahman.

(2017). Salt Hero: An Interactive Application for Learning Salt in Chemistry.

viii. Nazirah Mat Sin, Othman Talib and Tengku Putri Norishah. (2012). Merging of

Game Principles and Learning Strategy using Apps for Science Subjects to

Enhance Student Interest and Understanding

82

APPENDIX

GANTT CHART FYP 1

No TASK WEEK

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

1. FYP Briefing

2. Project Title

Proposal and

Registration

3. Proposal

Writing –

Introduction

4. Proposal

Writing –

Literature

Review

5. Proposal

Progress

Presentation

and

Evaluation

6. Discussion

and

Correction

Proposal

7. Proposed

Solution

Methodology

83

8. Proof of

Concept

9. Drafting

Report of the

Proposal

10. Submission

Draft of

Report to

Supervisor

11. Seminar

Presentation

and

Evaluation

12. Finalizing

and

Correction

Report

13. Final Report

Submission

Table : Gantt Chart FYP 1

84

GANTT CHART FYP 2

No TASK WEEK

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

1. Project

Meeting with

Supervisor

2. Project

Development

3. Proposal

Progress

Presentation

and Evaluation

4. Project Testing

5. Submission

Draft Report

and

Documentation

of The Project

6. Seminar

Presentation

7. Discussion and

Correction

Report

8. Final Thesis

Submission

Table : Gantt Chart FYP 2

INTERACTIVE MOBILE APPLICATION · interactive mobile application “chem-is-easy” mazlilah binti...

Documents

Transcript of INTERACTIVE MOBILE APPLICATION · interactive mobile application “chem-is-easy” mazlilah binti...