EducAid FINALLLLL

EducAid: An Interactive and Online System for First Aid Tutorials
A Software Development Research Study

Presented to the Faculty of the
College of Computer Studies
MINDORO STATE UNIVERSITY
Main Campus
Alcate, Victoria, Oriental Mindoro
In Partial Fulfillment
of the Requirements for the Subject
ITP 222 – Quantitative Methods
by
Campos, Janna Lei Ann A.

Camacho, Emmanuel F.
Villeza, Hannah Grace T.
JOHN EDGAR S. ANTHONY

Research Adviser
March 2023
ACKNOWLEDGEMENT
This project has created a strong bond among researchers, fostering trust and
collaboration to achieve the system's main goal. It serves as a significant
milestone in our journey as IT students. We would like to express our deepest
gratitude and respect to those who have supported and assisted us throughout
the development of this project.
First and foremost, we extend our heartfelt thanks to our instructor, John Edgar S.
Anthony, for his invaluable assistance and guidance. His support has been
instrumental in the successful completion of this system
We would also like to express our appreciation to our close friends and family
members who have provided help and suggestions throughout the process.
Without your presence and support, we would not have been able to overcome
the challenges we faced.
Lastly, we want to acknowledge the efforts of all the team members involved in
completing this system. Despite the difficulties encountered along the way, your
hard work and dedication have been key to our success. We recognize that it
was through our collective efforts that we were able to achieve the development
of this system.
Once again, we would like to emphasize that without the support and
contributions of everyone mentioned above, we would not have been able to
accomplish this project. This serves as an acknowledgment of the collaborative
spirit and dedication exhibited in the field of web development.
E. F. C
H.G.T.V
J. L. A. A. C
ii
ABSTRACT
EducAid is a web-based application designed to provide comprehensive

information and tutorials on administering first aid in emergency situations. The
application aims to equip individuals with the knowledge and skills necessary to
provide initial care to injured individuals until professional medical assistance is
available. It offers step-by-step instructions, informative videos, and images to
guide users through various first aid procedures.
The data gathering used a evaluation questionnaire and distributed to 50

respondents, the sampling method used is random sampling. The respondents
are the people who live around Victoria, Oriental Mindoro
The study focuses on developing a user-friendly and interactive web

application that addresses the need for effective first aid education. The research
involves rigorous testing and evaluation to ensure the functionality, performance,
usability, reliability, security, maintainability, and portability of EducAid. The
evaluation results indicate a high level of acceptability, highlighting the
effectiveness and reliability of the application.
Based on the study findings, several recommendations are proposed to

enhance EducAid further. These include integrating real-time emergency
services, incorporating multilingual support, implementing personalized user
profiles, introducing community-driven content, and developing an offline access
feature.
In conclusion, EducAid is a valuable resource for individuals seeking to

acquire first aid knowledge and improve their emergency response capabilities.
By providing accessible and reliable information, the application empowers users
to administer appropriate first aid, potentially saving lives and minimizing risks in
emergency situations. The recommendations proposed aim to enhance the
application's functionality, user engagement, and overall effectiveness in
promoting first aid education and emergency preparedness.
iii
Table of Content
Title Page i
Acknowledgement ii
Abstract vi
Table of Contents iv
List of Tables vii
List of Figues vii
List of Appendices ix
Chapter 1: Introduction
Project Context 1
Objectives of the Study 3
Scope and Limitation of the Study 4
Significance of the Study 5
Conceptual Framework 7
Definition of Terms 8
Chapter 2: Review of Related Literature and Studies
Foreign 9
Local 15
Synthesis 16
Chapter 3: Methodology
Research Method 17
iv
Population, Sample Size and Sampling Technique 17
Description of the Respondents 18
Research Instrument 18
Data Gathering Procedure 18
Statistical Treatment of Data 19
System Architecture 21
Data Flow Diagram 22
Context Diagram 22
Diagram 0 23
System Flow Chart 24
Software Design and Development Tool 25
Chapter 4: Results and Discussion
PresenTation of the System Output 26
Evaluation of the System 32
Chapter 5: Summary, Conclusion and Recommendation
Summary 42
Conclusions 44
Recommendation 45
Bibliography 47
Appendices
Program Listing 50
Grammarian’s Certificate 60
v
System Evaluation Form 61
Summary Results of System Evaluation 65
Pictures During Final Presentation
Curriculum Vitae 66
vi
List of Tables
1 Likert Scale 20
2 Criteria 33
3 Functional Suitability 34
4 Performance Efficiency 35
5 Compatibility 36
6 Usability 37
7 Reliability 38
8 Security 39
9 Maintainability 40
10 Portability 41
vii
List of Figures
1 Conceptual Framework 7
2 System Architecture 21
3 Context Diagram 22
4 Diagram 0 23
5 System Flowchart 24
6 Signup page 26
7 Login page 27
8 Front page 27
9 Homepage 28
10 First Aid Information 28
11 Services 29
12 Emergency Contact 29
13 Map 30
14 Contact page 30
15 Fist Aid Keyword 31
16 Fist Aid Keyword Information 31
17 Respondents 32
viii
List of Appendices
A Program Listing 50
B Grammarian’s Certificate 60
C System Evaluation Form 61
D Summary Results of System Evaluation 65
E Pictures During Final Presentation
F Curriculum Vitae 66
ix
Chapter 1
INTRODUCTION
Project Context
A web-based application that provide varieties of information including its

effectivity to a certain injuries. First Aid is one of the most crucial life-saving
abilities for everyone, It can be described as the initial care given to an injured
individual at the scene of the accident until complete medical care is available.
Simple first aid procedures can sometimes save person's life in emergency
situations. A person's life is on the line, so we need to know how to respond
appropriately when providing first aid. This website will offer information that can
be used to administer first aid. It provides the location that will be displayed and
the user will explore the provided map
The study will focus on the first aid tutorial to provide information and allow
everyone to be a responsible individual. First aid is defined as the first and
immediate assistance provided to anyone suffering from a small or significant
disease or injury, with treatment administered to preserve life, prevent the
condition from worsening, or promote recovery. It involves both first-aid
intervention in a critical condition prior to the arrival of professional medical care,
such as administering cardiopulmonary resuscitation (CPR) while waiting for an
ambulance, and thorough treatment of minor conditions, such as applying a
plaster to a cut. First aid is typically performed by anyone who knows how to
handle the situation correctly.
2
The development of our world begun when professionals starts to invent and
proceeds on creating technologies that can help individual in particular areas. In
every field it uses the functionality of technology and internet, everything seems
to start on working with the usage of internet. As an individual who adapted and
cope up with this advancement way of life, we come up on providing solutions
and knowledge to maintain the effectiveness of unity in people. The researcher’s
started on finding an effective solution that can be applied on every individuals.
The study was all about performing first aid, it will show the basic steps on how to
help somebody in a certain injuries or damages, applying the first treatment to
reduce the risk of infections or severe situations of a patients. With the help of
this web application, people will be guided by from the instructions provided
features stored on this application. It also included on this web app to indicates
the nearest hospital on the location of incident. It has the ability to show
directions and suggesting the possible closest hospitals.
3
Objectives of the Study
The study aims to provide the basic tutorials on performing first aid that occurred
in emergency situations. It Is to provide knowledge and information in a certain
situations and injuries happened to one individual. The goals of this study is to:
 Performing first aid treatment will lessen the high potential of risk on a patient
 To provide insights into the potential of EducAid as a tool for increasing the
public's knowledge and preparedness in responding to emergency situations.
 It will teach an individual how to done first aid correctly and also they will
became a responsible citizen because they just literally save someone’s life
at that moment.
 This web application will provide various of information accordingly on its

medical assistances, With the use of this smart application it will guide them
on how and what to do in that situations to avoid the risk.
4
Scope and Limitation of the study
The proposed study entitled “EducAid: An Interactive and Online System for First
Aid ” is a web application that provides and assist users to guide them on what
to do in a certain minor or major injuries of a patient. It focuses on assisting by
giving a tutorials on every situations. EducAid is a webt application designed to
provide users with a comprehensive guide on how to administer first aid in
emergency situations. The application covers various types of injuries and
medical conditions, ranging from cuts and bruises to heart attacks and seizures.
EducAid offers step-by-step tutorials, including images and videos, that can be
easily accessed and understood by users. Smart application is to provide users
with basic first aid knowledge that can help them respond quickly and effectively
in emergency situations. In every aspects of medical assistance provided on this
web application, we prioritize on providing various kinds of information accurately
under on its specific field. As well as the tutorials the applications has its own
ability to suggest the hospitals nearby based on users location.
5
Significance of the Study
This web-based application will provide an assistance to anyone who need help.
This Web App will save someone’s life in emergency situations, The beneficiaries
of this web-application are:
Citizen/Users- Citizen are the users of this Web Application, They are the one
who will use the assistance provided on the features of this web application.
Their ability to cope up and perform those instructions given on this program can
help an individual to execute first aid. The application will help them gain
knowledge about first aid and use it during emergency cases.
Hospitals- The nearest hospital can be suggested on the location of incidents.

The web app will shows those hospital that might be the nearest one among the
list of suggestions. Their information are included to provide an quick assistance
from them.
Medical Rescuers- The locations might be a reason of delay response and

when will the rescuers will arrive, From the help of those concern citizen,
applying first aid before rescuers arrive can reduce the risk of the damages or
injuries. While waiting for them, with the benefits of this web application can help
them save more patients.
Researchers. The researchers of the study will gain credits in developing a

helpful web app in medical field. This will contribute to their knowledge and skills
as programmers and inspire them to create and develop more useful web
applications.
6
Future Researchers- The Researchers will try to do their best to gather
information, collect data, execute the planned web application that are providing
medical assistances to perform by anyone based from the given instructions. The
outcome of the effectiveness of this web application can be their references for
the related future studies. The study can serve as their basis in doing their own
version of the project.
7
Conceptual Framework
Input Process Output
Name Planning
Data Gathering
EducAid: An
Address Programming Interactive and
Software designing Online System
for First Aid
First-aids Web developing Tutorials
instructions
Prototyping
Figure 1. Conceptual Framework
The illustrations above shows the creation and flow of system to develop a web
application. The information has been inserted then proceed on the processes of
web developing and the final output will be the results of these process which is
the actual web application.
8
Definition of Terms
First aid- First aid is the first and immediate assistance given to any person with
either a minor or serious illness or injury, with care provided to preserve life,
prevent the condition from worsening, or to promote recovery.
Hospitals- A hospital is a health care institution providing patient treatment

with specialized health science and auxiliary healthcare staff and medical
equipment.
Medical Rescuers- EMS personnel rescue victims of an accident or take

care of a patient with a medical emergency.
Tutorials- A tutorial, in education, is a method of transferring knowledge and

may be used as a part of a learning process. More interactive and specific than a
book or a lecture, a tutorial seeks to teach by example and supply the information
to complete a certain task.
Web application- A web application is a computer program that uses a web

browser to perform a particular function. They are client-server programs, so
each program has a client side and a server side.
Chapter 2
Review of Related Literature and Studies
Foreign
According to (Dandil, 2019), It's crucial to know how to perform first aid in the
event of a medical emergency, injury, or life-threatening situation. Properly and
promptly executing first aid procedures is critical to saving human lives. To
address this issue, an Android-based first aid application has been developed to
assist individuals in the event of accidents or injuries by providing basic medical
procedures and interactive information on how to perform first aid. The
application includes visual and auditory aids to guide users in the correct
execution of first aid measures. Additionally, the application employs GPS
technology to expedite the delivery of first aid by providing location data to
relevant departments. This ensures timely reporting and assistance to the injured
party.
According to (Khuwuthyakorn, 2018), In emergency medical situations, providing

proper first aid treatment is critical, particularly for severe injuries, as it can
increase the chances of survival and reduce the risk of permanent disability.
Primary first aid procedures serve as a practical guide for providing initial care to
an injured or ill person, following the standard method of first aid before
secondary care. With the widespread availability of mobile phones, they can now
serve as useful tools to provide essential information and quick references for
first aid. The research in this area aims to explore the appropriate design of an
application to serve as a first aid learning tool and identify necessary functions to
10
deal with unexpected situations or accidents. The goal of this study is to develop
the First Aid Literacy Mobile Application (FALMA) using the rapid prototyping
methodology and the Ionic framework. The application is designed to include
critical functions such as location services and first aid treatment information.
The development process and testing results of the FALMA application are
discussed in detail, with a focus on its usefulness in providing valuable
information and guidance in emergency situations. By providing a reliable source
of information and instruction, the FALMA application can assist in the delivery of
critical first aid measures, potentially saving lives and reducing the risk of long-
term disabilities.
According to (Spies, Khalaf, Hamm, 2018), Communities facing shortages of

healthcare workers often experience significant deficiencies in basic healthcare
services. Improving basic emergency healthcare can help address this problem
and enhance healthcare services in rural areas. In South Africa, a study was
conducted to develop and test an automated clinical decision support system
(CDSS) tool for first aid. The mobile smartphone app was designed to assist
untrained healthcare workers in delivering basic emergency care to patients who
lack access to medical facilities or cannot reach them urgently.
The primary goal of the CDSS tool is to guide users through the diagnostic
process and offer treatment options, without requiring diagnostic knowledge. This
study represents the first phase of development and testing of the tool, which
aims to provide critical assistance in emergency situations. By equipping
untrained healthcare workers with the necessary skills and knowledge to deliver
basic emergency care, the CDSS tool can help alleviate healthcare shortages
and improve healthcare services in underserved communities.
11
According to (Inettutor, 2021), First aid is a critical immediate medical attention or
treatment for individuals who have experienced a sudden illness or injury.
Possessing knowledge about first aid is crucial to responding to emergency
cases and providing relief, maintaining life, promoting recovery, and preventing
the patient's condition from worsening until professional medical help arrives.
Unfortunately, many individuals still lack knowledge about how to provide first aid
in emergency situations, resulting in patients experiencing severe conditions or
even fatalities.
To address this issue, people need a reliable source of information that can teach
them about first aid and enable them to respond in emergency situations without
attending seminars or workshops. By providing accessible and credible
information, individuals can learn about essential first aid procedures, allowing
them to act swiftly in emergency situations, potentially saving lives and mitigating
adverse outcomes
According to (Mantas, 2019), As our modern lifestyle becomes more advanced

and technology continues to progress, our social fabric has become increasingly
complex. This has had an impact on the frequency and severity of accidents that
occur in our daily lives. Fortunately, having access to first aid information on a
mobile phone can be a valuable tool for anyone who finds themselves in an
emergency situation.
According to (Hindy, 2022), Knowing first aid is a crucial skill that can help save
lives, provide assistance to someone in need, and give you confidence in high-
pressure situations. While in-person training and certifications are the best way to
learn, there are also apps available that can teach you some of the basics.
12
First aid is a basic skill that many people know. It can help save a life, assist
someone in need, and even give you confidence during tense situations.
However, you do have to learn the skills first. We would not recommend any first
aid apps over an in-person course with certifications. However, there are apps
and tutorials out there with the basics. Even the basics can be helpful. Here are
the best first aid apps for Android!
The best first aid apps for Android:
 American Red Cross First Aid

 Fat Belly First Aid
 New Zealand Red Cross First Aid
 Offline Survival Manual
 YouTube
According to (Furst, 2021Using videos during first aid training is an effective way
to make the classes more engaging and interactive. In addition, videos can
emphasize important first aid points, such as the significance of early CPR and
defibrillation in the case of cardiac arrest. While there are classic first aid training
videos available, such as the one showing lifeguards on Bondi Beach
resuscitating a patient pulled from the water, it's important to note that the
protocols shown in these videos may be outdated. Nonetheless, such videos are
useful in highlighting the importance of prompt action during an emergency
situation.
According to (IFRC, 2021), The International Federation of Red Cross and Red
Crescent Societies (IFRC) and the International Committee of the Red Cross
(ICRC) continue to prioritize first aid as a core area of their work. The Global First
Aid Reference Centre, established by IFRC, is a leading provider and educator of
first aid practices globally. With first aid as a core activity, nearly all of the 192
13
National Societies of the Red Cross Red Crescent participate in providing first aid
services and education.
In emergency situations, first aid is a critical initial step that can make a
significant difference in reducing injury, alleviating suffering, and improving
survival rates. Immediate action and the application of appropriate first aid
measures can be life-saving. Access to high-quality, evidence-based first aid
education is essential for building safer and healthier communities. This helps to
prevent and reduce risks in daily emergency, disaster, and crisis situations, and
ultimately contributes to saving lives.
According to (Faye, 2020), Learning first aid skills is essential for everyone, as
accidents can happen anywhere and at any time. To help disseminate proper
emergency first aid information specific to minor incidents, this study aims to
develop a game-based learning application that focuses on first aid practices and
applications. The application will educate and instruct users on how to perform
proper first aid through an interactive game-based learning approach that utilizes
an Intelligent Predictive String Search Algorithm to check the step-by-step
procedure in applying first aid.
The system used the Agile Model for development and a quasi-experimental
design. The pre-test result was 16.63, and the post-test average was 31.60,
indicating that the system helped students learn first aid. The system was
evaluated using the ISO 25010 standard, receiving a score of 4.39, which is
considered excellent. Respondents also strongly agreed with the mobile game's
acceptability, with a weighted mean of 4.47.
This study has significant potential for increasing students' learning effectiveness
in dealing with accidents and enhancing their knowledge of first aid through
14
game-based learning. The system can be developed and implemented in health-
related units or courses to improve the delivery of first aid education.
According to (Kumar, 2023), A person's well-being can be influenced by various

factors, such as their health status, education level, employment status, and
socioeconomic status. Of these factors, health is undoubtedly a crucial one. In
emergency situations, administering first aid can mean the difference between
life and death before professional medical help arrives. Basic first aid training
equips individuals with the knowledge and skills needed to assess and provide
immediate interventions for a variety of injuries and illnesses, using only basic
equipment and techniques. Educating individuals on how to administer first aid
can also help improve the overall healthcare system by empowering individuals
to take an active role in emergency response.
According to (Kullian, 2023), The system consists of two components that are
integrated onto the same platform. The first component is a mobile application
designed for the Android operating system that enables postnatal mothers to
input clinical card information, access postnatal care education, and monitor their
child's progress using the generated reports. The second component is designed
for healthcare workers (HWs) and provides access to training materials and
awareness reports that can help improve the delivery of postnatal care.
According to ( Schneider, 2023), suggests that smartphones serve as physical

objects and symbols that represent social bonds and affiliation. They can help
individuals deal with feelings of social exclusion or ostracism. Users reported
feeling less socially threatened when they had their smartphones with them.
Additionally, the study found that social app cues, rather than informational app
cues, were more effective at reducing feelings of ostracism. Interestingly, social
app cues were not significantly better than providing no cues at all. The study
suggests that the mere presence of a mobile phone can contribute to a sense of
15
social connection and belonging, even if the phone is not actively being used.
This could be beneficial in self-threatening situations.
Local
According to (Ignacio, 2019), The purpose of this study was to address the lack
of knowledge and confidence that people have in handling first aid situations.
Many people are not aware of what to do in emergency situations, and this can
result in potential harm or even death. The study aimed to create an application
that would provide people with easy access to information on first aid care and
procedures.
Based on a 2010 survey by St John's Ambulance in London, it was found that a

large number of people lacked confidence in administering first aid. Nearly two-
thirds of people (59%) would not feel comfortable saving a life, and a quarter
(24%) would do nothing and wait for an ambulance to arrive or for someone else
to administer first aid. Additionally, over a quarter (28%) claimed they knew what
to do, but often lacked the confidence to act or even performed incorrect
procedures, potentially worsening the situation.
To address this issue, the researcher developed an application with a

comprehensive first aid registry, including all the latest certified procedures by
Red Cross Philippines. The application aims to give people access to the
necessary information to administer proper first aid care, potentially saving lives
in emergency situations.
According to (Castillo, 2018), The goals of First Aid are to alleviate suffering,
prevent further injury or danger, and prolong life. The main objective is to reduce
or completely alleviate suffering, prevent the condition from worsening, or further
16
injury/danger. First aid measures aim to preserve and sustain life and save the
victim from imminent danger.
A good first aider should possess the following characteristics:
 Gentle - A first aider should avoid causing or inflicting pain as much as

possible.
 Resourceful - A good first aider makes the best use of available resources
at hand.
 Observant - A first aider should notice all signs and be aware of what is
happening and what may happen.
 Tactful - A good first aider should handle the victim with utmost care and in
a calm manner.
 Empathetic - A first aider should be comforting towards the victim.
Reference: Philippine National Red Cross.
Synthesis
The effectiveness of those information provided online and its benefits to each
individuals prove that it has a great impact to everyone who were using internet
access to receive assistances given by the program. First-aid will prevent into
more dangerous situations of the patient. There’s a lot of existing systems that
are related on providing assistances on performing first-aid. Most of these related
studies gives a positive impact to the citizens/users. The gathered information
has been indicating all the data and details of each instances of emergency
situations, an individual must be aware and educated to act properly in that kind
of scenario.
Chapter 3
Methodology
Research Method
In this study, The Prototyping Model is used on developing the system.

Prototyping model is a System Development Methodology(SDM), within which a
paradigm output is constructed, tested, and reworked again. It is used to create a
satisfied output in order to built a completed system, Prototyping is being used
between the user and developer. Prototyping improves the quality of
specifications provided to users.
Population, sample Size, and Sampling Technique
Population and Sample Size
The University Minsu Main Campus has approximately thousands of students

enrolled on each programs. Researchers chose to collect data from this group
for their study. The researchers chose exactly thirty (50) participants for their
study to guarantee a reasonable sample size.
Sampling Technique
The researcher’s uses random sampling to collect data out of thousand of

college students. The researcher will randomly selects 50 respondents from a
target population
18
Description of the Respondents
The respondents of our study will be the college students from Minsu Main
Campus. The students has a potential to be chosen on participating this
collection of data. It has a probability that anyone around the campus has a
chance of being selected.
Research Instruments
In this study, the researcher will be using the evaluation Questionnaires. The
Evaluation Questionnaires is an arranged questions prepared to the chosen
respondents in this study. It is to collect the data and information provided by
them. The questions will be focusing on all about their knowledge on applying
first aid.
Data Gathering Procedure
Formulating a request letter to have an approval of dean of college and

computer studies to under go survey questions to chosen Students in Minsu
Main Campus. The data for this study will be collected through a survey
questionnaire distributed to a random selection of students at Minsu Main
Campus. The questionnaire will be given to 50 respondents who will be asked to
complete it. The students' answers will form the basis of the study and contribute
to its findings. The data collection process will take place around the campus.
The data will serve as the foundation for the study, and the participants' answers
will contribute to its findings. By thoroughly examining the data, the researcher
will be able to identify its strengths and able to draw meaningful. The data will be
19
interpreted using statistical tool. The insights gained from the data will be critical
to the success of the research project.
Statistical Treatment of Data
The Following are the descriptions of included statistical procedure to be used in

the study:
1. Percentage and rank. To get the percentage of the respondents

demographic profile, the total frequency is divided by the number of
cases multiplied by 100.
The Formula is
Formula ; P = f
N
Where: P = percentage
f = frequency
N = total number of respondents
2. Weighted Average(WM). The weighted average is obtained by

multiplying the number of responses by the given weight and dividing
results by the total of respondents.
Formula: WM = Σfx
N
Where: WM = weighted mean
Σfx = summation of weighted frequencies
N= total number of respondents
20
3. Likert scale
The following quantitative description was adapted to qualify the

respondents’ answer on each items.
Table1. Likert Scale
Rating Data
4.50-5.00 Very Acceptable
3.50-4.49 Acceptable
2.50-3.49 Moderately Acceptable
1.50-2.49 Not Acceptable
1-1.49 Very Not Acceptable

21
System Architecture
Figure 2. System Architecture
This figures shows the foundation inside the web application, It will illustrate how
the system works and how the data stored.
22
Data Flow Diagram
The data Flow diagram of EducAid: An Interactive and Online System for First
Aid Tutorials on how to perform first aid will show how this web application will
work. The process will be illustrate on the figure below to explain the flow of
system provided. The data and information that are included on this web
application has indicated its relationship to each other. The main functions of this
web application is to provide assistance to the users.
Context Diagram
Figure 3. Context Diagram
This Figure shows the relationship between the user and web application entitled,
EducAid. The processes of the figure above is this First aid tutorials are
connected to the only one entity which is the users. The task of the user is to give
commands to the system by selecting the provided buttons that has their own
23
corresponding uses, it will occur on the interaction between the users and
devices.
Diagram 0
Figure 4. Diagram 0
The figures shows the processes of this web Application. The user will be the
only one entity and the others will be the processes on how will the System will
work to its functions. The process are connected to each other to execute
EducAid web application.
24
System Flow Chart
25
Figure 5. System Flowchart
In this figure it shows how the system will work from the beginning of the program.
The User Interface has been in detailed to execute the process of the system.
The flow of the system shows the features and provided knowledge and
information to the users.
Software Design and Development Tool
The Software design are base from the preferences of the developers. The idea
are more likely into connected to a medical field since this is a first aid. The
developmental tool that will be use for this web application entitled “EducAid: An
Interactive and Online System for First Aid Tutorials “ is HTML, CSS and
Bootstrap and for the database management system where the data and
information stored inside the system is MYSQL. These tools has a functions that
provides an output if its combined together. These are the tools that the
developers will be using throughout the session of building the system.
Chapter 4
Presentation of the System Output
This is the final Output of the system that the developers created. This is the web
application of EducAid: An Interactive and Online System for First Aid Tutorials.
The user interface wa being presentable and the text is visible, the features of
this system provides an information about performing first aids.
Figure 6. Sign up page
This is the user interface of sign up page where the user will create an account
to access the whole web application.
27
Figure 7. Login page
This is the Log in page which the user will input their created account to access
the system
Figure 8. Front page
This is the user interface that the user will show after successfully log in their
account.
28
Figure 9. Homepage
This is the user interface of Home under the navigation bar that provides
information of web application that may offer.
Figure 10. First Aid Information

29
This is the crucial first aid information that everyone should know, so it is included
to display the information about performing CPR to ensure that everyone will
notice.
Figure 11. Services
This is the services of the web application, it provides variety of information about
medical assistances.
Figure 12. Emergency Contacts

30
This is the number of Emergency Contacts that the user will use in case of
emergencies.
Figure 13. Map
This is the maps inlcluded on the web application, the displayed map will help
you to see the location that may help you in crisis.
Figure 14. Contact page

31
This is the Contact page of the web application which are providing the contact
information of the developers
Figure 15. First Aid keyword
This is the uses of search bar, entering the keyword will redirest the user to
specific first aid treatment.
Figure 16. First Aid keyword Information

32
This is the example of the results after entering the first aid keyword. This page
will show the treatments, suggestions and information how to help somebody.
Evaluation of the System
This will shows the data gathered from the answered questionnaires. The
interpretation will be based from the results of distributed sheets of questions to
a random person who lived around Victoria.
Respondents
Figure 17. Respondents
Based on the table above, College of Teacher Education has the largest
percenatage of respondents, it has 40% while the College of Computer got 28%,
College of Agriculture and allied fields got 18% and College of Business
Management got 14% particapated on the conducted survey web questionnaire.
33
Criteria
Criteria Weighted Mean Verbal Interpretation
Functional Suitability 4.53 Very Acceptable
Performace Efficiency 4.55 Very Acceptable
Compatibility 4.5 Very Acceptable
Usability 4.6 Very Acceptable
Reliability 4.5 Very Acceptable
Security 4.53 Very Acceptable
Maintainability 4.51 Very Acceptable
Portability 4.54 Very Acceptable
Total 4.53 Very Acceptable
Table 2
This table shows the overall interpretation based from its criteria, it shows that
the criteria has been reach that results to 4.53 mean which means it is very
acceptable. The web application is being effective and efficient to the needs of
the user.
34
Functional Suitability
1. Functional Suitability
ITEMS Weighted Rank Verbal Interpretation

Mean
1.1 The web application 4.56 2 Very Acceptable

achieves it expected output.
1.2 The project is well 4.46 3 Acceptable

structured according to the
needs of the user.
1.3 The project is running 4.58 1 Very Acceptable

according to its uses and
functions.
4.53 Very Acceptable
Table 3
The table above shows the state of fuctional suitability as a category on

interpreting the feautres of this web application.
The item 1.1 The web application achieves it expected output rank 2 with a
weighted mean of 4.58 and a verbal interpretation as Verbal Acceptable. Item 1.2
The project is well structured according to the needs of the user rank as 3 with
a weighted mean of 4.46 and its verbal intepretation is aaceptable. The item 1.3
The project is running according to its uses and functions rank 1 with the
weighted mean of 4.58 and its verbal interpretation is very acceptable. Functional
35
suitability got an overall mean of 4.53 with a verbal interpretation of Very
Acceptable
Performance Efficiency
2. Performance Efficiency

Mean
2.1 The project is responsive 4.62 1 Very Acceptable

to the users' command.
2.2 The project can be 4.56 2 Very Acceptable

utilized by many users at the
same time in different
platforms without
interference.
2.3 The system does not 4.46 3 Acceptable

experience any lag or slow
response times.
Table 4
In this table it shows that the Performance Efficiency got a overall mean of 4.55
with a verbal interpretation of Very Acceptable. Items 2.1 The project is
responsive to the users' command has a 4.62 mean with a rank 1 and its verbal
interpretation of very acceptable. 2.2 The project can be utilized by many users
36
at the same time in different platforms without interference has a 4.56 mean with
a rank 2 and a verbal interpretation of very acceptable. 2.3 The system does not
experience any lag or slow response times has a 4.46 mean with a rank 3 and a
verbal interpretation of acceptable.
Compatiblity
3. Compatibility

Mean
3.1 The system works on 4.48 3 Acceptable

different web browsers
without any compatibility
issues.
3.2 The project is 4.52 1 Very Acceptable

accessible on any android
mobile devices with internet
connection.
3.3 The web application 4.4 2 Very Acceptable

can run on any kind of
smartphones.
4.5 Very Acceptable
Table 5
In the table above shows that the compatibility got a overall mean of 4.5 with a
verbal interpretation of very acceptable. The items 3.1 The system works on
37
different web browsers without any compatibility issues has a 4.48 mean with a
rank 3 and a verbal interpretation of acceptable. 3.2 The project is accessible on
any android mobile devices with internet connection has a 4.52 mean with a
rank 1 and a verbal interpretation of acceptable. 3.3 The web application can
run on any kind of smartphones has a 4.4 mean with a rank 2 and a verbal
interpretation of acceptable.
Usability
4. Usability
ITEMS Weighted Rank Verbal

Mean Interpretation
4.1 The project meets the 4.66 1 Very Acceptable

needs of the target users.
4.2The project is easy to 4.52 3 Very Acceptable

understand, operate, and
control by the end users.
4.3 The project user 4.62 2 Very Acceptable

interface is pleasing and
satisfies user interaction.
4.6 Very Acceptable
Table 6
In the table above shows the usability has a overall mean of 4.6 and its verbal
interpretation of verbal acceptable. The item 4.1 The project meets the needs of
the target users has a 4.66 mean with a rank 1 and a verbal interpretation of
very acceptable. 4.2 The project is easy to understand, operate, and control by
38
the end users has a 4.52 mean with a rank 3 and a verbal interpretation of very
acceptable. 4.3 The project user interface is pleasing and satisfies user
interaction has a 4.62 mean with a rank 2 and a verbal interpretation of very
acceptable.
Reliability
5. Reliability

Mean
5.1The project works properly. 4.6 1 Very Acceptable
5.2 The project facilitates 4.38 3 Acceptable

recovery procedure in the event
of system failure.
5.3 The system can recover 4.52 2 Very Acceptable

from errors without any data
loss.
4.5 Very Acceptable
Table 7
In the table above shows the reliability has a 4.5 overall mean with a verbal
interpretation of very acceptable. The items 5.1 The project works properly has a
4.6 mean with a rank 1 and a verbal interpretation of very acceptable. 5.2 The
project facilitates recovery procedure in the event of system failure has a 4.38
mean with a rank 3 and a verbal interpretation of acceptable. 5.3 The system
can recover from errors without any data loss has a 4.52 mean with a rank 2
and a verbal interpretation of very acceptable.
39
Security
6. Security

Mean
6.1The project can be accessed 4.62 1 Very Acceptable

only by the authorized
users.
6.2 The project is secured and 4.46 3 Acceptable

protected in terms of data
transmission.
6.3 The project provides its 4.52 2 Very Acceptable

unique account to each end
user.
Table 8
In the table above shows that the Security has a overall mean of 4.53 with a
verbal interpretation of very acceptable. The item 6.1 The project can be
accessed only by the authorized users has a 4.62 mean with a rank 1 and a
verbal interpretation of very acceptable. 6.2 The project is secured and protected
in terms of data transmission has a 4.46 mean with a rank 3 and a verbal
interpretation of acceptable. 6.3 The project provides its unique account to each
end user has a 4.52 mean with a rank 2 and a verbal interpretation of very
acceptable.
40
Maintainability
7. Maintainability
ITEMS Weighted Rank Verbal

Mean Interpretation
7.1 The project is easy to install 4.4 3 Acceptable

and maintain.
7.2 The project can be modified 4.62 1 Very

to improve, correct or adapt it to Acceptable
changes in environment, and in
requirements.
7.3 The project is running 4.52 2 Very

according to its uses and Acceptable
functions.
4.51 Very
Acceptable
Table 9
In the table above shows that the maintainability has a 4.51 overall mean and its
verbal interpretation of Very Acceptable. The items 7.1 The project is easy to
install and maintain has a 4.4 mean with a rank 3 and a verbal interpretation of
acceptable. 7.2 The project can be modified to improve, correct or adapt it to
changes in environment, and in requirements has a 4.62 mean with a rank 1 and
a verbal interpretation of Verbal acceptable. 7.3 The project is running
according to its uses and functions has a 4.52 mean with a rank 2 and a verbal
interpretation of Verbal acceptable.
41
Portability
8. Portability

Mean
8.1 The project is handy 4.66 1 Very Acceptable

and easy to manage.
8.2 The project can be 4.5 2 Very Acceptable

transferred to another
location conveniently.
8.3 The project is 4.46 3 Very Acceptable

adaptable to any given
environment.
Table 10
In the table above shows that the Portability has a 4.66 overall mean and its
verbal interpretation of Very Acceptable. The items 8.1 The project is handy and
easy to manage has a 4.66 mean with a rank 1 and a verbal interpretation of
very acceptable. 8.2 The project can be transferred to another location
conveniently has a 4.5 mean with a rank 2 and a verbal interpretation of very
acceptable. 8.3 The project is adaptable to any given environment has a 4.46
mean with a rank 3 and a verbal interpretation of very acceptable.
Chapter 5
Summary, Conclusions and Recommendation
Summary
“EducAid: An Interactive and Online System for First Aid Tutorials ” it is a web-
based application that provide varieties of information including its effectivity to a
certain injuries. This website will offer information that can be used to administer
first aid.The location will be displayed and the user will see the nearest hospitals
located on the map. The study was all about performing first aid, it will show the
basic steps on how to help somebody in a certain injuries or damages, applying
the first treatment to reduce the risk of infections or severe situations of a
patients. With the help of this web application, people will be guided by from the
instructions provided features stored on this application.
To evaluate the effectiveness of the web application, a rigorous testing process

was conducted. Fifty evaluation questionnaires were distributed randomly among
individuals in Victoria, Oriental Mindoro. The evaluation encompassed eight
crucial criteria, including Functional Suitability, Performance Efficiency,
Compatibility, Usability, Reliability, Security, Maintainability, and Portability.
The results of the evaluation revealed that EducAid received an overall rating of
4.53, signifying its high level of acceptability. Among the specific criteria,
Functional Suitability achieved a score of 4.53, Performance Efficiency scored
43
4.56, Compatibility scored 4.5, Usability scored 4.6, Reliability scored 4.5,
Security scored 4.53, Maintainability scored 4.51, and Portability scored 4.54.
These ratings demonstrate the effectiveness and reliability of the web application
across multiple dimensions. With EducAid, users can rest assured that they have
a reliable and user-friendly resource at their fingertips. By providing clear
instructions and real-time information, EducAid equips individuals with the
knowledge and confidence to administer first aid effectively, potentially saving
lives and reducing the risk of further harm.
This Web Application is created to provide assistances and various of information

towards to greater opportunities and ciscumstances that these kinds of medical
scenario may be applied.EducAid is an advanced web application meticulously
designed to offer users a comprehensive guide on administering first aid in
emergency situations. It caters to a wide range of injuries and medical conditions,
spanning from minor cuts and bruises to severe incidents like heart attacks and
seizures. By providing step-by-step tutorials complemented by instructive images
and videos, EducAid ensures that users can easily access and understand the
information.
The primary objective of EducAid is to equip users with fundamental knowledge

of first aid, enabling them to respond promptly and effectively during
emergencies. The application places significant emphasis on accuracy and
reliability, ensuring that users receive diverse and precise information across
various medical assistance domains.
44
Conclusions
EducAid is an interactive and user-friendly web-based application that serves as

a valuable resource for administering first aid. It provides a wide range of
information and instructions on treating injuries, along with the ability to display
the locations. The evaluation results demonstrate its effectiveness and reliability,
making EducAid a trusted tool for prompt and effective emergency response.
 EducAid is an interactive and online web-based application that provides a

variety of information, including its effectiveness in treating specific injuries.
 The application offers step-by-step instructions on how to administer first aid

and reduce the risk of infections or worsening conditions for patients.
 Through the integrated map feature, users can see the location with the help
of the map, enhancing prompt and informed decision-making.
 The evaluation of EducAid involved distributing 50 questionnaires among

individuals in Victoria, Oriental Mindoro, assessing criteria such as Functional
Suitability, Performance Efficiency, Usability, and more.
 The results of the evaluation revealed a high acceptability level, with an

overall rating of 4.53 and impressive scores across various criteria,
demonstrating the effectiveness and reliability of EducAid as a valuable
resource.
 EducAid aims to empower users by providing comprehensive first aid

knowledge and practical guidance through user-friendly interfaces, step-by-
step tutorials, and accurate information across various medical domains.
45
Recommendation
Based on the study conducted on EducAid, an interactive and online system for
first aid, there are several areas where additional features and improvements can
be considered to enhance the user experience and further extend the
functionality of the application. These recommendations include:
1. Integration of Real-Time Emergency Services: In addition to displaying the

nearest hospitals, consider integrating real-time emergency service information,
such as ambulance dispatch and emergency hotlines, to provide users with a
more comprehensive emergency response system.
2. Multilingual Support: To cater to a wider audience, consider incorporating

multilingual support within the application. This would enable users to access
information and instructions in their preferred language, improving accessibility
and usability for individuals with diverse linguistic backgrounds.
3. Personalized User Profiles: Implementing personalized user profiles would

allow users to save their preferences, medical history, and emergency contacts
within the application. This feature would enable faster access to vital information
during emergencies and facilitate more tailored first aid guidance.
4. Community-Driven Content: Consider incorporating a community-driven

content feature, allowing users to contribute their own first aid tips, success
stories, and experiences. This collaborative approach would enrich the
application's content, promote knowledge sharing, and foster a sense of
community among users.
5. Offline Access: Develop an offline mode feature that allows users to access
essential first aid information even without an internet connection. This would
46
ensure that the application remains functional and valuable in areas with limited
or no internet access, where immediate first aid knowledge may be crucial.
By implementing these recommendations, EducAid can further enhance its

functionality, user engagement, and overall effectiveness in promoting first aid
knowledge and emergency response.
Bibliography
Chel-Mari Spies,Abdelbaset Khalaf,Yskandar Hamam.(2018).Development of a

First Aid Smartphone App for Use by Untrained Healthcare Workers. Retrieved
From:
https://www.researchgate.net/publication/322452172_Development_of_a_First_A
id_Smartphone_App_for_Use_by_Untrained_Healthcare_Workers
inettutor.com(2021).First Aid Knowledge Based Mobile Application. Retrieved

From:https://www.inettutor.com/source-code/first-aid-mobile-application/
Panos Theodoromanolakis 1, Nikolaos Zygouras, John Mantas.(2019).First aid

manual in an android environment.Retrived from:
https://pubmed.ncbi.nlm.nih.gov/23823410/
Hindy.(2022).The best first aid apps for Android
American Red Cross First Aid Fat Belly First Aid New Zealand Red Cross First
Aid Offline Survival Manual YouTube.Retrieved
From:https://www.androidauthority.com/best-first-aid-apps-android-842599/
Sunstar.(2023).First aid in your phone.
Retrieved From:https://www.sunstar.com.ph/article/98907/Business/First-aid-in-
your-phone
Furst.(2021). The best first aid training videos. Retrieved From:

https://www.firstaidforfree.com/the-best-first-aid-training-videos/
48
IFRC.(2021).International first aid, resuscitation, and education guidelines.

Retrieved From: https://www.globalfirstaidcentre.org/first-aid-guidelines-
2020/international First aid reference centre(ifrc)
Castillo.(2018). BASIC FIRST AID (PHILIPPINE STANDARD).Retrieved From:

https://www.slideshare.net/mavee100690/basic-first-aid-philippine-standard
Emre Dandıl, İzzet Öztürk,Ziya Ekşi,Murat Çakıroğlu.(2019).First Aid Guide

Application for Mobile Devices.Retrieved from:
https://www.researchgate.net/publication/272789196_First_Aid_Guide_Applicatio
n_for_Mobile_Devices
Pattaraporn Khuwuthyakorn.(2018).First Aid Literacy Mobile Application

Development.Retrived From:
https://www.researchgate.net/publication/327901054_First_Aid_Literacy_Mobile_
Application_Development
Marjory Faye.(2020).First Aid Mobile Application for University Clinic using

Predictive String Search Algorithm.Retrieved from:
https://www.researchgate.net/publication/339325850_First_Aid_Mobile_Applicati
on_for_University_Clinic_using_Predictive_String_Search_Algorithm
Ignacio.(2019). First Aid Mobile Application. Retrieved

From.https://www.researchgate.net/publication/348153953_First_Aid_Mobile_Ap
plication
Kumar.(2023).EFFECT OF SIMULATION ASSISTED TRAINING PROGRAM

(SATP) VERSUS MOBILE APP BASED TRAINING PROGRAM ON FIRST AID
(FA) AND BASIC LIFE SUPPORT (BLS) AMONG UNDERGRADUATE
NURSING STUDENTS; A PILOT STUDY REPORT. Retrieved From:
49
https://www.researchgate.net/publication/369146650_EFFECT_OF_SIMULATIO
N_ASSISTED_TRAINING_PROGRAM_SATP_VERSUS_MOBILE_APP_BASED
_TRAINING_PROGRAM_ON_FIRST_AID_FA_AND_BASIC_LIFE_SUPPORT_
BLS_AMONG_UNDERGRADUATE_NURSING_STUDENTS_A_PILOT_STUDY
_REPORT
Kullian.(2023).Mobile Health Application to Strengthen Postnatal Care: A Case of

Tanzania.Retrieved From:
https://www.researchgate.net/publication/369005347_Mobile_Health_Application
_to_Strengthen_Postnatal_Care_A_Case_of_Tanzania
Schneider.(2023).First Aid in the Pocket: The Psychosocial Benefits of

Smartphones in Self-threatening Situations.Retrieved From:
https://www.researchgate.net/publication/366920102_First_Aid_in_the_Pocket_T
he_Psychosocial_Benefits_of_Smartphones_in_Self-threatening_Situations
Appendix A
Program Listing

<!DOCTYPE html> <link rel="stylesheet" href="css/custom.css">
<html lang="en"> 
 <script

src="https://kit.fontawesome.com/4500b2dac7.js"
<meta charset="utf-8"> crossorigin="anonymous"></script>
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<script src="js/modernizer.js"></script>

<script src="try.js"></script>
<meta name="viewport" content="width=device-width,
initial-scale=1"> 
<meta name="viewport" content="initial-scale=1, </head>

maximum-scale=1">
<body class="clinic_version">


<title>educAid</title>
<div id="preloader">
<meta name="keywords" content="">
<img class="preloader" src="images/loaders/heart
<meta name="description" content=""> beat.gif" alt="" style="height: 100%; width: 100%;">
<meta name="author" content="">
 </div>
<link rel="shortcut icon" href="images/icon.png" 

type="image/x-icon" / style="height: 40px; width: 40px;">
<header>
<link rel="apple-touch-icon" href="images/apple-touch-
icon.png"> <div class="header-top wow fadeIn" style="height:
100px;">

<div class="container">
<link rel="stylesheet" href="css/bootstrap.min.css">
<a class="navbar-brand"
 href="index.html"><img src="images/logo.png"
alt="image" style="justify-content: center;"></a>
<link rel="stylesheet" href="style.css">
</div>

</div>
<link rel="stylesheet" href="css/colors.css">
<div class="header-bottom wow fadeIn">

<link rel="stylesheet" href="css/versions.css">
<nav class="main-menu">

<div class="navbar-header">
<link rel="stylesheet" href="css/responsive.css">
51
<button type="button" class="navbar-toggle <div id="home" class="parallax first-section wow
collapsed" data-toggle="collapse" data-target="#navbar" fadeIn" data-stellar-background-ratio="0.4"
aria-expanded="false" aria-controls="navbar"><i class="fa style="background-image:url('images/aidbg.png');">
fa-bars" aria-hidden="true" sty></i></button>
</div>
<div class="row">
<div id="navbar" class="navbar-collapse
collapse"> <div class="col-md-12 col-sm-12">
<ul class="nav navbar-nav"> <div class="text-contant">
<li><a class="active" <h2>

href="index.html">Home</a></li>
<span class="center"><span
<li><a data-scroll class="icon"><img src="images/icon2.png" alt="#"
href="#about">CPR</a></li> /></span></span>
<li><a data-scroll <a href="" class="typewrite" data-

href="#service">Services</a></li> period="2000" data-type='[ "Welcome to EducAid",
"Learn", "Help","Survive" ]' style="color: #fff;">
<li><a data-scroll
href="#doctors">Contacts</a></li> <span class="wrap"></span>
<li><a data-scroll </a>

href="#getintouch">Map</a></li>
</h2>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="serch-bar">

<div id="custom-search-input">
</div>
<div class="input-group col-md-12">

<input type="search" id="search" value=""
onchange="openPage()" class="form-control input-lg" </div>
placeholder="Search"/>

<span class="input-group-btn">
<div id="time-table" class="time-table-section">
<button class="btn btn-info btn-lg"
type="button"> <div class="container">
<i class="fa fa-search" aria-hidden="true" <div class="col-lg-4 col-md-4 col-sm-12 col-xs-

type="submit"></i> 12">
</button> <div class="row">
</span> <div class="service-time one"

style="background:linear-gradient(to right,#e52d27
</div> 0%,#b31217 100%);">
</div> <span class="info-icon"><i class="fa-solid

fa-book" aria-hidden="true"></i></span>
</div>
<h3>Learn</h3>
</div>
<p>"learn how to examine a casualty, use a
</div> defibrillator. familiarize yourself with basic life support and
learn how to control bleeding and trauma."</p>
</header>
</div>
52
</div> </div>
</div> 
<div class="col-lg-4 col-md-4 col-sm-12 col-xs- <div class="row">

12">
<div class="col-md-6">
<div class="row">
<div class="message-box">
<div class="service-time middle"
style="background:linear-gradient(to right,#e52d27 <h4>What is</h4>
0%,#b31217 100%);">
<h2>CPR</h2>
<span class="info-icon"><i class="fa-solid
fa-handshake-angle" aria-hidden="true"></i></span> <p class="lead">CPR, or cardiopulmonary
resuscitation can help save a life during cardiac arrest,
<h3>Help</h3> </p>
<p>"to give assistance or support to <p> when the heart stops beating or beats
(someone): to provide someone with something that is too ineffectively to circulate blood to the brain and other
useful or necessary in achieving an end."</p> vital organs. </p>
</div> <a href="https://www.redcross.org/take-a-

class/cpr/performing-cpr/cpr-
</div> steps#:~:text=CPR%2C%20or%20cardiopulmonary%20r
esuscitation%20can,brain%20and%20other%20vital%20
</div> organs." data-scroll class="btn btn-light btn-radius btn-brd
grd1 effect-1">Learn More</a>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-
12"> </div>
<div class="row"> 
<div class="service-time three" </div>
style="background:linear-gradient(to right,#e52d27
0%,#b31217 100%);"> 
<span class="info-icon"><i class="fa-solid <div class="col-md-6">

fa-suitcase-medical" aria-hidden="true"></i></span>
<div class="post-media wow fadeIn">
<h3>Survive</h3>
<img src="images/about_03.png" alt=""
<p>"to continue to live or exist, especially class="img-responsive">
after coming close to dying or being destroyed or after
being in a difficult or threating situation"</p> <a href="https://youtu.be/6eRwgM2Pa4o"
data-rel="prettyPhoto[gal]" class="playbutton"><i
</div> class="flaticon-play-button"></i></a>
</div> </div>
</div> 
</div> </div>
</div> 
<div id="about" class="section wow fadeIn"> </div>
<div class="container"> 
<div class="heading"> <hr class="hr1">
<span class="icon-logo"><img <div class="row">

src="images/icon3.png" alt="#" style="width: 100px;
height: 100px;"></span> <div class="col-md-3 col-sm-6 col-xs-12">
<h2>Cardiopulmonary Resuscitation </h2> <div class="service-widget">

53
<div class="post-media wow fadeIn"> <img src="images/pic4.png" alt=""
class="img-responsive">
<a href="images/pic.jpg" data-
rel="prettyPhoto[gal]" class="hoverbutton global- </div>
radius"><i class="flaticon-unlink"></i></a>
</div>
<img src="images/pic.jpg" alt=""
class="img-responsive"> 
</div> </div>
</div> </div>
 
</div> </div>
<div class="col-md-3 col-sm-6 col-xs-12"> 
<div class="service-widget"> </div>
<div class="post-media wow fadeIn"> <div id="service" class="services wow fadeIn">
<a href="images/pic2.jpg" data- <div class="container">

rel="prettyPhoto[gal]" class="hoverbutton global-
radius"><i class="flaticon-unlink"></i></a> <div class="row">
<img src="images/pic2.jpg" alt="" <div class="col-lg-8 col-md-8 col-sm-6 col-xs-

class="img-responsive"> 12">
</div> <div class="inner-services">
</div> <div class="col-lg-4 col-md-6 col-sm-6 col-

xs-12">

<div class="serv">
</div>
<span class="icon-service"><img
<div class="col-md-3 col-sm-6 col-xs-12"> src="images/service-icon1.png" alt="#" /></span>
<div class="service-widget"> <h4>PREMIUM FACILITIES</h4>
<div class="post-media wow fadeIn"> <p>Premium Facility Services also

provides fast responses for emergency needs at any
<a href="images/pic3.jpg" data- location. </p>
rel="prettyPhoto[gal]" class="hoverbutton global-
radius"><i class="flaticon-unlink"></i></a> </div>
<img src="images/pic3.jpg" alt="" </div>

class="img-responsive">
<div class="col-lg-4 col-md-6 col-sm-6 col-
</div> xs-12">
</div> <div class="serv">
 <span class="icon-service"><img

src="images/service-icon2.png" alt="#" /></span>
</div>
<h4>LARGE LABORATORY</h4>
<div class="col-md-3 col-sm-6 col-xs-12">
<p>Designed and manufactured for
<div class="service-widget"> reliable and repeatable sterilization processing needed in
Scientific Research and QC laboratories.</p>
<div class="post-media wow fadeIn">
</div>
<a href="images/pic4.png" data-
rel="prettyPhoto[gal]" class="hoverbutton global- </div>
radius"><i class="flaticon-unlink"></i></a>
54
<div class="col-lg-4 col-md-6 col-sm-6 col- </div>
xs-12">
</div>
<div class="serv">
</div>
src="images/service-icon3.png" alt="#" /></span> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-
12">
<h4>DETAILED SPECIALIST</h4>
<div class="appointment-form">
<p>the smooth and efficient daily
operations of a company. The operations specialist's <h3><span></span>Ask Question</h3>
responsibilities may vary depending on the sector</p>
<div class="form">
</div>
<form action="index.html">
</div>
<fieldset>
<div class="col-lg-4 col-md-6 col-sm-6 col-
xs-12"> <div class="col-lg-12 col-md-12 col-
sm-12 col-xs-12">
<div class="serv">
<div class="row">
src="images/service-icon4.png" alt="#" /></span> <div class="form-group">
<h4>CHILDREN CARE CENTER</h4> <input type="email"

placeholder="Email Address" id="email" />
<p>Child care centers provide care for
groups of children, often placed in classrooms by age</p> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 col-sm-6 col- <div class="col-lg-12 col-md-12 col-

xs-12"> sm-12 col-xs-12">
<div class="serv"> <div class="row">
<span class="icon-service"><img <div class="form-group">

<textarea rows="4"
<h4>FINE INFRASTRUCTURE</h4> id="textarea_message" class="form-control"
placeholder="Your Message..."></textarea>
<p>Infrastructure refers to the basic
systems and services that a country or organization</p> </div>
</div> </div>
</div> </div>
<div class="col-lg-4 col-md-6 col-sm-6 col- <div class="col-lg-12 col-md-12 col-

xs-12"> sm-12 col-xs-12">
<div class="serv"> <div class="row">
<span class="icon-service"><img <div class="form-group">

<div class="center"><button
<h4>ANYTIME BLOOD BANK</h4> type="submit">Submit</button></div>
<p>Whole blood donations are </div>

separated into components using a special equipment to
generate one unit each of red blood cells, plasma and </div>
platelets</p>
</div>
</div>
55
</fieldset> <div class="widget clearfix">
</form> <img src="images/ambulance.png" alt=""

class="img-responsive img-rounded">
</div>
<div class="widget-title">
</div>
<h3>Ambulance</h3>
</div>
<small>0912-764-6136</small>
</div>
</div>
</div>

</div>
</div>
</div>

<div id="doctors" class="parallax section db" 12 wow fadeIn">
data-stellar-background-ratio="0.4"
style="background:#fff;" data-scroll-id="doctors" <div class="widget clearfix">
tabindex="-1">
<img src="images/minsudrrm.png" alt=""
<div class="container"> class="img-responsive img-rounded">
<div class="heading"> <div class="widget-title">
<span class="icon-logo"><img <h3>MinSu DRRM</h3>

src="images/icon3.png" alt="#" style="height: 100px;
width: 100px;"></span> <small>0906-552-2137</small>
<h2>Emergency Contacts</h2> </div>
</div> </div>
<div class="row dev-list text-center"> </div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs- </div>

12 wow fadeIn" data-wow-duration="1s" data-wow-
delay="0.2s" style="visibility: visible; animation-duration: </div>
1s; animation-delay: 0.2s; animation-name: fadeIn;">
</div>
<div class="widget clearfix">
<img src="images/mdrrmo.png" alt=""
class="img-responsive img-rounded"> <div id="getintouch" class="section wb wow fadeIn"
style="padding-bottom:0;">
<div class="widget-title">
<h3>MDRRMO</h3>
<div class="heading">
<small>0908-897-4394</small>
<span class="icon-logo"><img
</div> src="images/icon3.png" alt="#" style="height: 20%; width:
20%;"></span>
</div>
<h2>Get in Touch</h2>
</div>
</div>
</div>
12 wow fadeIn" data-wow-duration="1s" data-wow- <div id="googleMap"
delay="0.4s" style="visibility: visible; animation-duration: style="width:100%;height:450px;"></div>
1s; animation-delay: 0.4s; animation-name: fadeIn;">
<div style="text-align:center;">
56
<a href="map.html" alt=""><h2>More <div class="mailchimp-alerts">
map</h2></a>
<div class="mailchimp-
</div> submitting"></div>
</div> 
</div> <div class="mailchimp-

success"></div>
<footer id="footer" class="footer-area wow fadeIn">

<div class="mailchimp-error"></div>
<div class="row">

<div class="col-md-4">
</div>
<div class="logo padding">

<a href=""><img src="images/logo.png"
alt=""></a> </div>
</div> </form>
</div> </div>
<div class="col-md-4"> </div>
<div class="footer-info padding"> </div>
<h3>CONTACT US</h3> </div>
<p><i class="fa fa-paper-plane" aria- </div>

hidden="true"></i> EducAid@gmail.com</p>
</footer>
<p><i class="fa fa-phone" aria-
hidden="true"></i>0908 134 756</p> <div class="copyright-area wow fadeIn">
</div> <div class="container">
</div> <div class="row">
<div class="col-md-4"> <div class="col-md-8">
<div class="subcriber-info"> <div class="footer-text">
<h3>SUBSCRIBE</h3> <p>© 2018 EducAid. All Rights

Reserved.</p>
<p>Get healthy news, tip and solutions to
your problems from our experts.</p> </div>
<div class="subcriber-box"> </div>
<form id="mc-form" class="mc-form"> <div class="col-md-4">
<div class="newsletter-form"> <div class="social">
<input type="email" autocomplete="off" <ul class="social-links">

id="mc-email" placeholder="Email address" class="form-
control" name="EMAIL"> <li><a href=""><i class="fa fa-
rss"></i></a></li>
<button class="mc-submit"
type="submit"><i class="fa fa-paper-plane"></i></button> <li><a href=""><i class="fa fa-
facebook"></i></a></li>
<div class="clearfix"></div>
<li><a href=""><i class="fa fa-
 twitter"></i></a></li>
57
<li><a href=""><i class="fa fa-google- 
plus"></i></a></li>
<script src="js/all.js"></script>
<li><a href=""><i class="fa fa-
youtube"></i></a></li> 
<li><a href=""><i class="fa fa- <script src="js/custom.js"></script>

pinterest"></i></a></li>

</ul>
<script
</div> src="https://maps.googleapis.com/maps/api/js?key=AIza
SyCNUPWkb4Cjd7Wxo-
</div> </div> </div> </div> T4uoUldFjoiUA1fJc&callback=myMap"></script>

<a href="#home" data-scroll class="dmtop global- </body>

radius"><i class="fa fa-angle-up"></i></a>
</html>
<!DOCTYPE html> <div class="login__box">
<html lang="en"> <i class='bx bx-user login__icon'></i>
<head> <input type="text" name="email"

placeholder="Email" class="login__input">
<meta charset="UTF-8">
</div>
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <div class="login__box">
 <i class='bx bx-lock-alt login__icon'></i>
<link rel="stylesheet" href="assets/css/styles.css"> <input type="password"

name="password" placeholder="Password"
 class="login__input">
<link </div>
href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/box
icons.min.css' rel='stylesheet'> <div class="login__button" >
<title>educAid</title> <input type="submit" class="btn_submit"

value="Sign in" name="submit">
<link rel="shortcut icon" href="images/icon.png"
type="image/x-icon" / style="height: 40px; width: 40px;"> </div>
</head> <div>
<body> <span class="login__account">Don't

have an Account ?</span>
<div class="login">
<span class="login__signin" id="sign-
<div class="login__content"> up"><a href="signup.php">Sign Up</a></span>
<div class="login__img"> </div>
<img src="assets/img/logoSVG.svg" alt=""> </form>
</div> <div class="login__social">
<div class="login__forms"> <a href="#" class="login__social-
icon"><i class='bx bxl-facebook' ></i></a>
<form action="login.php"
class="login__registre" id="login-in" method="GET"> <a href="#" class="login__social-
icon"><i class='bx bxl-twitter' ></i></a>
<h1 class="login__title">Sign In</h1>
58
<a href="#" class="login__social- 
icon"><i class='bx bxl-google' ></i></a>
<script src="assets/js/main.js"></script>
</div> </form> </div> </div>
</div> </body>
</html>
<!DOCTYPE html> <div class="login__box">
<html lang="en"> <i class='bx bx-user login__icon'></i>
<head> <input type="text" name="username"

placeholder="Username" class="login__input">
<meta charset="UTF-8">
</div>
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> <div class="login__box">
 <i class='bx bx-user login__icon'></i>
<link rel="stylesheet" href="assets/css/styles.css"> <input type="text" name="email"

placeholder="Email" class="login__input">

</div>
<link
href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/box <div class="login__box">
icons.min.css' rel='stylesheet'>
<i class='bx bx-user login__icon'></i>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/cs <input type="password"
s/bootstrap.min.css" integrity="sha384- name="password" placeholder="Password"
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH class="login__input">
61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"> </div>
<link rel="stylesheet" href="signup.css"> <div class="login__button">
<title>educAid</title> <input type="submit"

class="btn_submit" value="Create Account"
</head> name="submit">
<body> </div><div>
<div class="login"> <span class="login__account"> Have

an Account ?</span>
<div class="login__content">
<span class="login__signin" id="sign-
<div class="login__img"> up"><a href="login.php">Sign In</a></span> </div>
</form> </div> </div>
<img src="assets/img/logoSVG.svg" alt="">

</div>
<script src="assets/js/main.js"></script>
<div class="login__forms">
</body>
<form action="signup.php"
class="login__registre" id="login-in" method="POST"> </html>
<h1 class="login__title">Create
Account</h1>
<?php
$server = "localhost";
59
$userName = "root"; if (md5($password) === $row['password']) {
$password = ""; // Password is correct, proceed with login
$dbName = "aid"; $_SESSION['user'] = $row;
$dbConnection = new mysqli($server, $userName, header("Location: index.html");

$password, $dbName);
exit();
if ($dbConnection->connect_error) {
} else {
die("Connection failed: " . $dbConnection-
>connect_error); // Invalid password
}else{ // echo'Successful';}?> header("Location: login.html");
} else {
// Invalid username
header("Location: login.html");
<?php } }}?>
include ('database.php');
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') { <?php
$email = $_POST['email']; include ('database.php');
$password = $_POST['password']; $username = $_POST['username'];
if(empty($email)||empty($password)){ $password=$_POST['password'];
echo '<script>alert("Please Input Fields!")</script>'; $email =$_POST['email'];
echo "<script>window.location.href =
'signup.html'</script>"; if(empty($username)||empty($password)||empty($email)){
} echo '<script>alert("Please Input Fields!")</script>';
else{ echo
"<script>window.location.href = 'signup.html'</script>"; }
// Validate the submitted username and password,
and perform database query else{
$stmt = $dbConnection->prepare("SELECT * FROM $sql = "INSERT INTO tbl_signup

tbl_signup WHERE email = ?"); (`username`,`email`,`password`) VALUES
('$username','$email',md5('$password'))";
$stmt->bind_param("s", $email);
$result = $dbConnection->query($sql);
$stmt->execute();
if($result){
$result = $stmt->get_result();
echo
'<script>alert("Successfully Inserted!")</script>';
if ($result->num_rows === 1) { echo "<script>window.location.href =

'login.html'</script>";
$row = $result->fetch_assoc();
}else{echo 'error on saving'; }
}$dbConnection->close();
// Compare the hashed passwords
?>
Appendix B
Grammarian’s Certificate
GRAMMARIAN’S CERTIFICATE
This is to certify that the enudersigned has reviewed the grammatical

construction and the text organization of this System Development Project
entitled “ EducAid: An Interactive and Online System for First Aid Tutorials“.
Signed:
SARAH YAHEL A. CAOLI

Grammarian
Conformed:
JOHN EDGAR S. ANTHONY, MSIT
Research Adviser
61
Appendix C
System Evaluation Form
SYSTEM DEVELOPMENT PROJECT EVALUATION QUESTIONNAIRE
System Title : EducAid: An Interactive and Online System for

First Aid Tutorials
Developers: Campos, Janna Lei Ann A.
Camacho, Emmanuel F.
Villeza, Hannah Grace T.
Directions: Test the performance and acceptability of the System Project based
on the rating below. Put a check (/) on the corresponding box of rate.
Name:________________________________ Course:______________
Date:____________
RATING:
5 – Very Acceptable 4- Acceptable 3- Moderately Acceptable 2- Not acceptable

1- Very Not Acceptable
1. Functional Suitability 5 4 3 2 1
1.1 The web application achieves it expected
output.
1.2 The project is well structured according to the
needs of
the user.
62
1.3 The project is running according to its uses and
functions.
2. Performance Efficiency 5 4 3 2 1
2.1 The project is responsive to the users'
command.
2.2 The project can be utilized by many users at the
same
time in different platforms without interference.
2.3 The system does not experience any lag or slow
response times.
3. Compatibility 5 4 3 2 1
3.1 The system works on different web browsers
without
any compatibility issues.
3.2 The project is accessible on any android mobile
devices with internet connection.
3.3 The web application can run on any kind of
smartphones.
4. Usability 5 4 3 2 1
4.1 The project meets the needs of the target
users.
4.2 The project is easy to understand, operate, and
control by the end users.
63
4.3 The project user interface is pleasing and
satisfies user interaction.
5. Reliability 5 4 3 2 1
5.1 The project works properly.
5.2 The project facilitates recovery procedure in the
event of system failure.
5.3 The system can recover from errors without any
data
loss.
6. Security 5 4 3 2 1
6.1 The project can be accessed only by the
authorized
users.
6.2 The project is secured and protected in terms
of data
transmission.
6.3 The project provides its unique account to each
end
user.
7. Maintainability 5 4 3 2 1
7.1 The project is easy to install and maintain.
7.2 The project can be modified to improve, correct
or adapt it to changes in environment, and in
requirements.
64
7.3 The project is running according to its uses and
functions.
8. Portability 5 4 3 2 1
1.1 The project is handy and easy to manage.
8.2 The project can be transferred to another location
conveniently.
8.3 The project is adaptable to any given
environment.
Recommendations/Comments:
________________________________________________________________
________________________________________________________________
_______________________________________________________________
______________________
Respondent’sSignature
Appendix D
Summary Results of System Evaluation
Items Weighted Mean Verbal Interpretation
Functional Suitability 4.53 Very Acceptable
Performace Efficiency 4.55 Very Acceptable
Compatibility 4.5 Verr Acceptable
Usability 4.6 Very Acceptable
Reliability 4.5 Very Acceptable
Security 4.53 Very Acceptable
Maintainability 4.51 Very Acceptable
Portability 4.54 Very Acceptable
Overall Mean 4.53 Very Acceptable
This table shows the summary of the evaluation with the results of 4.53 overall
mean with a verbal interpretation of Very Acceptable
Appendix F
Curriculum Vitae
PERSONAL INFORMATION
Name : Emmanuel F. Camacho
Email Address : fainacamacho08@gmail.com
Contact Number : +639458472117
Address : Pantalan Poblacion, Mansalay, Oriental

Mindoro
Age : 20
Birthday : January 8, 2003
Father : Eusebio Camacho
Mother : Evelyn Camacho
EDUCATIONAL ATTAINMENT
Tertiary Mindoro State University – Main Campus

Bachelor of Science in Information Technology
2023 – 2024
Secondary Fe Del Mundo National High School

B del Mundo, Mansalay, Oriental Mindoro
2020 - 2021
Elementary Mansalay Central School

Poblacion, Mansalay, Oriental Mindoro
2014 - 2015
67
Curriculum Vitae
Name : Hannah Grace T. Villeza
Email Address : hanavilleza@gmail.com
Address : Sampaguita, Naujan, Oriental

Mindoro
Age : 20
Birthday : March 22, 2003
Father : Dennis Villeza
Mother : Josephine Villeza

2023 – 2024
Secondary Porfirio G. Comia Memorial High School

Barcenaga, Naujan, Oriental Mindoro
2020 - 2021
Elementary Sampaguita Elementary School

Sampaguita, Naujan, Oriental Mindoro
2014 - 2015
68
Curriculum Vitae
Name : Janna Lei Ann A. Campos
Email Address : jannaleiannacampos@gmail.com
Address : Inarawan, Naujan, Oriental

Mindoro
Age : 19
Birthday : January 14, 2004
Father : Leonil C. Campos
Mother : Ana Rose A. Campos

2023 – 2024
Secondary Inarawan National High School

Inarawan, Naujan, Oriental Mindoro
2020 - 2021
Elementary Inarawan, Elementary School

Inarawan, Naujan, Oriental Mindoro
2014 - 2015

EducAid FINALLLLL

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EducAid FINALLLLL

Uploaded by

Copyright:

Available Formats

EducAid: An Interactive and Online System for First Aid Tutorials

A Software Development Research Study

Campos, Janna Lei Ann A.

JOHN EDGAR S. ANTHONY

EducAid is a web-based application designed to provide comprehensive

The data gathering used a evaluation questionnaire and distributed to 50

The study focuses on developing a user-friendly and interactive web

Based on the study findings, several recommendations are proposed to

In conclusion, EducAid is a valuable resource for individuals seeking to

List of Tables vii

List of Figues vii

Objectives of the Study 3

Scope and Limitation of the Study 4

Significance of the Study 5

Chapter 2: Review of Related Literature and Studies

Description of the Respondents 18

Data Gathering Procedure 18

Statistical Treatment of Data 19

Data Flow Diagram 22

System Flow Chart 24

Software Design and Development Tool 25

Chapter 4: Results and Discussion

PresenTation of the System Output 26

Evaluation of the System 32

Chapter 5: Summary, Conclusion and Recommendation

Summary Results of System Evaluation 65

Pictures During Final Presentation

10 First Aid Information 28

15 Fist Aid Keyword 31

16 Fist Aid Keyword Information 31

C System Evaluation Form 61

D Summary Results of System Evaluation 65

E Pictures During Final Presentation

A web-based application that provide varieties of information including its

 This web application will provide various of information accordingly on its

Significance of the Study

Hospitals- The nearest hospital can be suggested on the location of incidents.

Medical Rescuers- The locations might be a reason of delay response and

Researchers. The researchers of the study will gain credits in developing a

Input Process Output

Figure 1. Conceptual Framework

Hospitals- A hospital is a health care institution providing patient treatment

Medical Rescuers- EMS personnel rescue victims of an accident or take

Tutorials- A tutorial, in education, is a method of transferring knowledge and

Web application- A web application is a computer program that uses a web

Review of Related Literature and Studies

According to (Khuwuthyakorn, 2018), In emergency medical situations, providing

According to (Spies, Khalaf, Hamm, 2018), Communities facing shortages of

According to (Mantas, 2019), As our modern lifestyle becomes more advanced

The best first aid apps for Android:

 American Red Cross First Aid

According to (Kumar, 2023), A person's well-being can be influenced by various

According to ( Schneider, 2023), suggests that smartphones serve as physical

Based on a 2010 survey by St John's Ambulance in London, it was found that a

To address this issue, the researcher developed an application with a

A good first aider should possess the following characteristics:

 Gentle - A first aider should avoid causing or inflicting pain as much as

Reference: Philippine National Red Cross.

In this study, The Prototyping Model is used on developing the system.

Population, sample Size, and Sampling Technique

Population and Sample Size

The University Minsu Main Campus has approximately thousands of students

The researcher’s uses random sampling to collect data out of thousand of