Untitled

STI College Global City
i
Senior High School
A Correlational Study of the Satisfactory Rate in Using HTMLIFY as

Perceived by Selected Grade 11 and 12 Information Technology
Mobile Application and Web Development Students of STI
College Global City AY 2019 – 2020
A Research Study
Presented to the
Faculty of Senior High School Department
of STI College Global City
Taguig City
In Partial Fulfillment of the Requirements for the Subject

Inquiries, Investigation and Immersion
Ablen, Ysabelle Dannielle

Arroyo, Kurt Paul M.
Cabreros, Cloyd George C.
Ishiguro, Sherei Dane A.
Mequequeni, Louie Mar P.
Miguel, Valjoemari D.
Moratillo, Masi John T.
Paisano, Melchor R.
Salvador, Justin Seth E.
Ms. Stephanie B. Tabifranca, LPT

Research Adviser
March 2020
ii
Senior High School
APPROVAL SHEET
This research entitled “A Correlational Study of the Satisfactory Rate in

Using HTMLify as Perceived by Selected Grade 11 and 12 Information
Technology Mobile Application And Web Development Students of STI
College Global City for A.Y. 2019 – 2020” has been prepared and submitted by
Ysabelle Dannielle Ablen, Kurt Paul M. Arroyo, Cloyd George C. Cabreros,
Sherei Dane A. Ishiguro, Louie Mar P. Mequequeni, Valjoemari D. Miguel, Masi
John T. Moratillo, Melchor R. Paisano and Justin Seth E. Salvador in partial
fulfillment of the requirements for the subject Inquiries, Investigations and
Immersion, are hereby recommended for oral examination.
MS. STEPHANIE B. TABIFRANCA, LPT

Inquiries, Investigations and Immersion
Adviser
Approved in partial fulfillment of the requirements for Inquiries, Investigations

and Immersion by the Committee on Oral Examination with a grade of 97.00 on 20th
of February 2020.
MS. STEPHANIE B. TABIFRANCA, LPT

Chairman
MR. MARK FREDERICK V. SALONGA MR. BENJIE D. GAYONDATO

Panel Member Panel Member
MR. CARLO P. CORTEZ ENGR. RENIA R. MATIRA

Assistant Principal Principal
Senior High School Department Senior High School Department
iii
Senior High School
ACKNOWLEDGMENT
First and foremost, it must be made known that this study would not be made
possible without the guidance, support and counseling that our research adviser,
Ms. Stephanie B. Tabifranca, has provided throughout the course of the making of
this paper. She had always found ways to support us, keeping our morale in check
by motivating and inspiring us throughout our class sessions, and in some cases,
surrendering her own leisure time in order to give us guidance, advice, and even the
much needed proper permissions and clearance for the school’s facilities, needed
to complete our research paper. We express the greatest appreciation for the
endless bout of unsung sacrifices that you may have done for the sake of our 1 st
term prerequisite.
Secondly, we would like to extend our gratitude to all our subject teachers:
Mr. Christian Paul L. Tacsuan, our Physical Science teacher, for confirming any
inquiries related to the mathematical treatment of data and statistics. Mr. Mark
Frederick V. Salonga, our Computer Programming teacher, who served as the
shining beacon on giving feedback; suggesting improvements and going as far as
providing assistance by tackling the related lessons and capitalizing on its relevance
towards the conception of our product. Mr. Benjie D. Gayondato, also our
Computer Programming teacher, for always being available for questions and by
giving generously his indispensable support, time, and vast knowledge in website
user interface and database, which has helped us in improving our product.
iv
Senior High School
Mr. Carlo S. Patricio, our Personal Development teacher, for using his own
resources in helping us further our own research paper whilst reminding us of
keeping our own health, physical and mental, in check.
To the governing principal of the senior high school department, Engr. Renia
R. Matira and assistant principal, Mr. Carlo P. Cortez, for generously and graciously
allowing us to use the school facilities in helping us conduct the survey needed to
acquire the data for our research paper.
Lastly, the researchers themselves who assisted each other which ultimately
made the conception of this paper: from the first word entered into the word editor
of their choice down to the last period of our preliminaries. The support that was
given to one another is one to remember which hopefully, one day, would serve as
a memory to treasure as part of our bonding during our time together as classmates.
The Researcher Team

v
Senior High School
ABSTRACT
Students aspiring to become programmers with the intention of starting their
career upon its related fundamentals are introduced with one of the most basic
platforms to build their skills – HTML. With the implementation of the K-12 program,
students entering grade 11 are given options of multiple strands as preparation for
college. This study is geared towards Senior High School students who took the
course of Information and Communications Technology (ICT) under the Technical –
Vocational Livelihood (TVL) Track.
HTMLify is a visual-novel game which introduces the HTML platform to
students. It is used to correlate the satisfactory rate of the grade 11 and 12 students
during the game’s play-testing sessions. HTMLify must prove successful in
satisfying the students regarding content, usability, and aesthetics, all of which are
the fundamentals of user satisfaction. (Thielsch & Moshagen, 2015)
This study presents the quantitative method on the acquisition of the
necessary data, condensed into a sample size after being treated with the Slovin’s
formula. All respondents of this study hail from STI College – Global City and are
sampled randomly, with data sampling also being stratified per section in order to
assure that the data gathered is not biased.
The study aims to determine whether HTMLify is a feasible product to cater
for today’s aspiring IT students’ needs or not. Based on the feedback acquired from
vi
Senior High School
the respondents, they are satisfied and willing to recommend the game to others
based on the experience they had during the play testing of the game.
As such, the general hypothesis is that HTMLify is indeed, able to satisfy and
enhance a student’s HTML programming skills. It could be a potential product to
satisfy a wider range of audience should further studies be conducted regarding the
use of HTMLify, as well as continuing its own development.

vii
Senior High School
TABLE OF CONTENTS
TITLE PAGE ..................................................................................................................... i
APPROVAL SHEET ........................................................................................................ ii
ACKNOWLEDGMENT .................................................................................................... iii
ABSTRACT ..................................................................................................................... v
LIST OF FIGURES.......................................................................................................... ix
LIST OF TABLES ........................................................................................................... ix
CHAPTER 1: THE PROBLEM AND ITS BACKGROUND ............................................... 1
Introduction .................................................................................................................. 1
Background of the Study .............................................................................................. 3
Statement of the Problem ............................................................................................. 7
Significance of the Study .............................................................................................. 8
Conceptual Framework ................................................................................................ 9
Hypothesis ................................................................................................................. 12
Scope and Delimitation............................................................................................... 12
Definition of Terms ..................................................................................................... 13
CHAPTER 2: REVIEW OF RELATED LITERATURES.................................................. 14
Foreign Literatures and Studies .................................................................................. 14
Local Literatures and Studies ..................................................................................... 25
CHAPTER 3: RESEARCH METHODOLOGY ................................................................ 32
Research Method ....................................................................................................... 32
Research Design ........................................................................................................ 33

viii
Senior High School
Population of the Study .............................................................................................. 34
Research Locale ........................................................................................................ 34
Sampling Technique ................................................................................................... 34
Research Instrument .................................................................................................. 39
Validation of Instrument .............................................................................................. 40
Data Gathering Procedures ........................................................................................ 40
Statistical Treatment of Data ...................................................................................... 42
CHAPTER 4: PRESENTATION, ANALYSIS AND INTERPRETATION OF DATA ....... 46
CHAPTER 5: SUMMARY, CONCLUSIONS, AND RECOMMENDATIONS ...……….…65

Summary and Conclusion .......................................................................................... 65
Recommendation ....................................................................................................... 69
REFERENCES
APPENDICES
Appendix A: Letter for Validation
Appendix B: Letter for Respondents
Appendix C: Survey Questionnaire
Appendix D: Curriculum Vitae

ix
Senior High School
LIST OF FIGURES
FIGURE 1: IPO MODEL................................................................................................... 9
FIGURE 2: FACTORS AFFECTING USER SATISFACTION ........................................ 11
LIST OF TABLES
TABLE 1.1: DEMOGRAPHIC PROFILE OF THE RESPONDENTS AS TO AGE .......... 46
TABLE 1.2: DEMOGRAPHIC PROFILE OF THE RESPONDENTS AS TO SEX .......... 47
TABLE 1.3: DEMOGRAPHIC PROFILE OF THE RESPONDENTS AS TO: SECTION. 48
TABLE 1.4: DEMOGRAPHIC PROFILE OF THE RESPONDENTS AS TO: GRADE

LEVEL ........................................................................................................................... 49
TABLE 2.1.1: SATISFACTION RATE OF GRADE 11 ITMAWE

RESPONDENTS:CONTENT .......................................................................................... 50

RESPONDENTS:USABILITY ........................................................................................ 52

RESPONDENTS:AESTHETICS .................................................................................... 54

RESPONDENTS:CONTENT .......................................................................................... 56

RESPONDENTS:USABILITY ........................................................................................ 58

RESPONDENTS:AESTHETICS .................................................................................... 60
1
Senior High School
CHAPTER 1
THE PROBLEM AND ITS BACKGROUND
This chapter is comprised by eight parts: the introduction, statement of the
problem, significance, scope and limitation, and background of the study,
hypothesis, conceptual framework and definition of terms that would support
credibility of the research.
Introduction
Hypertext Markup Language (HTML), is one example of a programming
language needed for web development and basic design. They are beneficial to
learn for developers, marketers, and people in many other disciplines. Learning
HTML and its additional components can prove to be an advantage for independent
entrepreneurs looking to save resources where possible.
Phelps (2018) stated that knowing how to use HTML can save you a sizable
amount of time from potential miscommunications or unsatisfactory designs with a
third-party design team, or even signing a contract with an external, independent
programmer. HTML has always been a handy programming language to learn for
designing the basic webpage. It stands true for individuals looking to save money
when making a personalized web design.
Students tend to turn towards third-party website generators because they
face difficulties in making a website themselves. This is done in order to save time
2
Senior High School
and effort, to reduce the risk of making an unstable website and wading over
complex codes, all the while increasing the ease of use and aesthetic design of a
website. This study, entitled “A Correlational Study of the Satisfactory Rate in Using
HTMLify as Perceived by Selected Grade 11 and 12 Information Technology Mobile
Application And Web Development Students on STI College Global City for AY 2019
– 2020”, is conducted to assure the students that are using HTML, and possibly its
supplementary platforms, JavaScript and Cascading Style Sheets, are not difficult
to learn and use.
Visual novel is a genre of video games that typically have little game play
elements and a greater focus on the storyline (Amalo, Murdaningtyas, & Agusalim,
2017).
Visual novels typically offer basic decision-making as one of its core game
mechanics, as the story revolves around the decisions the player makes. This is so
that the player need not worry about sudden, erratic, and fast-paced nature of the
game, thus relieving the player of any potential risks typically found in actions games
and placing heavier emphasis on the story within the game. The current study shall
be conducted to acquire the students’ level of satisfaction when using the product,
HTMLify, with a visual story or novel approach.
A typical visual novel is set up as follows: a character is displayed with a box
of text below the character. This box of text holds the character’s dialogue, as well
as the protagonist’s speech and thoughts, depicted in first-person when more than
two characters are present. The character’s emotion may change depending on the
3
Senior High School
scenario they currently face, the other characters the interact with, and the like.
Different characters’ names are denoted with different colors as to avoid confusion.
The protagonist is often not displayed, as the game would often portray them in the
first-person throughout the story.
Hung et al. (2015) emphasized that games effectively reduce gaps in terms
of students’ achievement as outside classroom, students can outperform
autonomously.
The researchers’ aim is that after the students use HTMLify, they will be
satisfied with the elements presented in the game. As a bonus, HTMLify could help
further improve their basic HTML skills, as the game’s moniker is derived from the
programming platform it represents.
Background of the Study
Experts in the field of Information Technology are currently in high demand,
especially with the rapid evolution of today’s technologies that presents innovative
and efficient solutions that would often prove better, if not more reliable, than
technologies presented in the past. Examples would be the phonograph, now
obsoleted by radio-based devices; the decline of mail caused by the advent of the
e-mail; and the library housing thousands of books, now slowly being replaced by e-
books which can perfectly fit into a pocket-sized machine. Therefore, it is no surprise
4
Senior High School
that there lies a significant population of students looking towards the IT branch
willing to secure a stable career.
According to Schwalbe (2015), the future of many organizations depends on
their ability to harness the power of Information Technology. It can be concluded
that the field of Information Technology would be raising significant demands on the
market, as many corporations and companies are leaning towards electronic-based
systems. There lies a problem, however, with a select number of students who wish
to take IT courses who seem to be stuck in a perpetual loop of irresolution in whether
or not to take the course due to the stereotype of IT graduates finding their jobs
being 'too difficult’ or ‘time consuming’, thus ending up inconclusive with their
decisions. This could potentially disinterest a potentially skilled student from entering
IT courses.
Now, while it is true that, with the advent of the internet, access to virtual
libraries for open-source learning materials have become more readily accessible to
the worldwide academic world, it does not fully mitigate the stereotype behind the
fear of encountering the ‘wall of codes’ that new IT students may face. They still may
easily feel overwhelmed by the unfamiliar symbols and seemingly unintelligible
strings of words which may be met by an immediate discouragement by the student.
According to Bashova and Pachovski (2013), the visual novel is a multimedia
game, which is interactive and stimulates the player’s creativity, as well as making
decisions that affect the story that is being told.

5
Senior High School
HTMLify is the proposed product to be used within this study for an attempt
to improve a student’s basic skills in programming. HTMLify is a website-based
visual story/novel that aims to show that programming is a subject not difficult to
learn in terms of logical prowess and application as it shares similar traits with
subjects learned beforehand, such as basic mathematical and basic algebraic
principles, and is not extremely exasperating as they anticipated it to be.
Ambalina (2019) defined visual novels as novels presented in digital format
and playable on video game consoles, smartphones or computers.
Ambalina further states that visual novels present their stories using text,
voice-overs, background music and pictures. In most, players take control of a main
character, see the story unfold through that character’s first-person perspective and
make decisions for them throughout the story.
HTMLify will contain parts of the aforementioned elements that comprise that
of a typical visual novel – parts which are deemed necessary as to give the visual
novel its distinctive genre: the narrative text, background music, and unique art-style
approached in the form of scenic backgrounds or photography including places and
people; thus invoking and stimulating imagination and potential outcomes based on
the events read throughout the visual novel's plot.
Sanford (2015) stated that video games are games that use electronic
systems (either personal computers or video game consoles) and involve interaction
with a user interface to generate visual feedback on a video device.

6
Senior High School
Therefore, it should be noted that HTMLify can be classified as a video game,
for HTMLify satisfies all stated conditions. It uses an electronic medium, specifically
a web browser through a personal computer, to which where it can be played on. It
also provides an interactive user interface which generates feedback based on their
input by means of visual and/or auditory cues.
A study conducted by Cavallaro (2010) states that: to ensure the player’s
creative involvement, the visual novel seeks to draw the player into its textual skein
through immersive strategies. In doing so, it challenges the mimetic imperatives of
narrative absorption by self-consciously foregrounding its artificiality.
In accordance to the study above, HTMLify aims to first immerse the user into
its virtual world through immersive strategies. This includes the detailed story
elements, the materialization of visual scenes and imagery, auditory resources
(music, effects, soundbites, and the like). It should be noted that HTMLify’s content
should be naturally integral towards the overall package it bears as to ascertain the
elements needed to satisfy its audience.
HTMLify first introduces the basic ropes of HTML before delving into other
potential programming platforms which may come in useful as a supplement to the
HTML platform, depending on the user’s progress in the visual novel. The
respondents, the grade 11 and 12 ITMAWE students of STI College – Global City,
shall be given questionnaires and will be able to rate the game on a quantifiable
scale based on their satisfaction.

7
Senior High School
Statement of the Problem
The research studied the satisfaction rate of HTMLify, an interactive visual novel
about HTML as perceived by the selected grade 11 and 12 ITMAWE students of STI
College – Global City. The data gathered were analyzed using correlational analysis.
The study will specifically determine the following:
1. The demographic profile of the respondents as to:
1.1. age;
1.2. sex;
1.3. section; and
1.4. grade level.
2. The satisfactory rate of the selected grade 11 and 12 ITMAWE students in
using HTMLify in terms of:
2.1. content;
2.2. usability; and
2.3. aesthetics.
3. If there is a significant relationship between the satisfactory rate of HTMLify
as an interactive HTML website in terms of grade level.

8
Senior High School
Significance of the Study
This study is specifically significant to the following:
IT Students. This study could give IT students an insight into the ropes of
programming first by HTML. By constructing a website which could potentially
satisfy the students into playing the visual novel, it is expected that they
improve their skills in regards with the HTML language.
IT Teachers. This website could contribute to the IT teachers as well because
this could potentially simplify their work. Allowing the students to play the
visual novel for an allotted time could possibly help them grasp the basic
fundamentals of HTML.
Future Researchers. This study could be beneficial to other researchers in
conducting their own study in the form of related literature.
School. By conducting this research, the school may consider using HTMLify
as an alternative past-time activity for IT students and teachers who wish to
sharpen their HTML skills.
Web Developers. Programmers may take advantage of this study should
they consider building a website identical to HTMLify. This study could serve
as a form of guide, taking notes of the factors considered within this study in
order to further their own products.

9
Senior High School
Conceptual Framework
Figure 1 below presents the IPO model used to conduct the study.
Input Process Output
Quantitative
Demographic method
A Correlational
profile:
Study of the
Slovin’s formula
Satisfactory Rate
age
Proportionate in Using
sex
stratified random HTMLIFY as
section
sampling Perceived by
grade level
technique Selected Grade
11 and 12
User
Survey via Information
satisfaction as
researcher-made Technology
to:
questionnaire Mobile
Application and
content
Likert Scale Web
usability
Development
aesthetics Frequency Students of STI
Distribution College Global
Significant
City AY 2019 –
relationship Percentage 2020
between the
satisfactory rate Weighted Mean
of HTMLify as an
interactive HTML Pearson’s R Test HTMLify
website in terms
of grade level Correlational
analysis
Feedback Loop
Figure 1. IPO Model
10
Senior High School
The model above demonstrates the procedure of the correlational
investigation. The principal box shows the demographic profile of the respondents
as to their age, sex and grade level. The researcher explicitly chose the grade 11
and 12 ITMAWE students as the respondents, for the proposed item would
deliberately take into account their needs. It likewise incorporates HTMLify's user
fulfillment depending on the accompanying determinants: content, usability and
aesthetics. The researchers would scrutinize their agreeable levels as to HTMLify's
aforementioned determinants.
The second box demonstrates the process in conducting the study. The study
utilized the quantitative method of research through the use of researcher-made
survey questionnaires with a four-point Likert scale in order to gather data from the
respondents. To determine the sample size needed for each population, the
researchers used Slovin’s formula with proportionate random sampling. The data
accumulated from the survey will be measurably broken down by the researchers
using the frequency distribution, percentage, weighted mean, Pearson’s R Test and
correlational analysis. Based on the findings, the researchers will determine whether
the respondents were satisfied with using HTMLify. After acquiring the data from the
survey, the researchers can then make a conclusion if there is a significant
relationship between the satisfactory rate of the respondents of grade 11 ITMAWE
students and the satisfactory rate of the respondents of grade 12 ITMAWE students.
11
Senior High School
The third box demonstrates the output of the study. Through the data
gathered from the survey which were answered by the respondents, the researchers
were able to come up with a product, HTMLify - a visual novel.
Figure 2 below presents the user experience factors which affects the overall
user satisfaction.
Aesthetics
Content Usability
User
Satisfaction
Figure 2. Factors Affecting User Satisfaction
The figure above presents the three factors of user experience which affects
the overall user satisfaction of website: content, aesthetics and usability.
Thielsch and Moshagen (2015) stated that content, usability and aesthetics
are fundamental principles of the perceptual organization of a website. Proper

12
Senior High School
implementation of these principles will lead to immediate pleasurable subjective
experience which determines the user satisfaction.
The researchers of the current study decided to implement these fundamental
principles in order to provide the users of HTMLify a satisfactory experience while
using the website.
Hypothesis
Ho: There is no significant relationship between the satisfactory rate of grade
11 and 12 ITMAWE students in using HTMLify.
Ha: There is a significant relationship between the satisfactory rate of grade
11 and 12 ITMAWE students in using HTMLify.
Scope and Delimitation
This study entitled, ‘The Correlational Study of the Satisfactory Rate in Using
HTMLify as Perceived by of Grade 11 and 12 Information Technology Mobile
Application And Web Development Students of STI College Global City for AY 2019
– 2020’, is limited to Grade 11 and 12 ITMAWE students of STI College - Global City
in the Senior High School Department. This is made to be able to determine whether
there is a correlational relationship between the satisfactory rate of the Grade 11
and 12 students in order to produce output, HTMLify, an interactive website about
HTML programming.
13
Senior High School
Definition of Terms
Aesthetics. The visual credibility of a subject topic.
Content. The elements which comprise a certain aspect of any object.
HTML. Stands for Hypertext Markup Language. A language used to create
webpages.
HTMLify. A visual novel about HTML programming.
ITMAWE. Information Technology in Mobile Application and Web
Development. STI College’s designation for Senior High School students who
took the Information-Communication Technology strand under the technical-
vocational-livelihood track.
Usability. Refers to the general ease-of-use of a certain product.
User Experience. It is the overall experience of a person using a product
such as a website or computer application, especially in terms of how easy
or pleasing it is to use.
User Satisfaction. It refers to the user's comfort and acceptability of a
website during the consumption of the content and the interaction with the
product.
Visual Novel. It is an interactive game genre featuring text-based story with
narrative style of literature and interactivity aided by static or sprite-based
visuals, most often using anime-style art.

14
Senior High School
CHAPTER 2
REVIEW OF RELATED LITERATURE
This chapter includes the ideas, studies, researches, generalizations,
conclusions, and methodologies related to the present research for better
comprehension of the study.
Foreign Literatures and Studies
Visual Novel as a Visual Learning Tool
Stenliden (2014) argued that visual learning tools allow students to first
connect to and analyze the visualized content, then to investigate and decide what
matters to them. This leads them to translate with the object of knowledge, which in
turn enables them to evaluate and draw conclusions.
Visual novel is an example of visual learning tools as it encourages students
to analyze the plot within the game and by means of deduction, be able to ultimately
conclude and decide a path on which the story will flow. HTMLify aims to emulate
and immerse the environment of the HTML programming language wherein the
player must analyze, construct, and deduce on what block of codes is most
appropriate to use in order to produce the desired output in the most efficient method
possible whilst delivering satisfactory gameplay by means of aesthetics and content.
Geest (2015) explains that the narrative world in a visual novel can be built
not only by showing or notifying, but the information conveyed is very important. If it
15
Senior High School
is well visualized, the reader or player can conclude the message in question, but
the reader or player has also built a more personal narrative world, which
encourages the desire to find out what is happening on the next page.
The above statement made by Geest explains how students can easily adapt
the content of the story through visualization. HTMLify also provides visual
illustrations and audio which could potentially attract ITMAWE students to participate
in the game and show interest in HTML.
According to Andalucía (2009), one of the most noteworthy contributions of
visual novel as an educational tool is to promote reading (a skill developed at
successive education levels, including the university level), and their huge
entertainment value.
The above statement talks about how visual novel as a tool can contribute to
the development of student’s skills. Using HTMLify in the classroom, like the use of
any new text or resource, involves teachers incorporating new technical techniques
with their current methods. If this is employed, it will benefit the students by engaging
at a more complex and interesting level.
Visual novels are heavy on text, but they generally have music, voice acting,
and character pictures to assist the reader in absorbing the information presented in
the story. It is a storytelling wise genre of video game that is very versatile. The
flexibility leads to a lot of visual novels having incredible stories and variety of
purposes (Mai, 2014).

16
Senior High School
Mai’s statement further reinforces the idea of using visual novel as a platform
to share information as it helps readers absorb the information presented to them.
This is the reason as to why the researchers decided to develop and study HTMLify’s
impact - to provide a game which would prove a satisfactory HTML learning material.
According to Morrison (2017), over the last decade, visual novels have
become a popular format in classrooms, partly due to their appeal to reluctant
readers. Visual novels are also excellent resources for advanced learners. With
visual novels, students use text and images to make inferences and synthesize
information, both of which are abstract and challenging skills for readers. When
students read visual narratives, the activity in the brain is similar to how readers
comprehend text-based sentences. However, when students learn to read visual
novels with an analytical eye, depth and complexity are added to the reading
process. All of this experience developing textual and visual reading skills contribute
to students’ understanding.
Morrison’s findings above further supports Mai’s statement as it emphasizes
on the idea that visual novel can be utilized in educating students. Furthermore, it
stresses that the aesthetic content of visual novels can further contribute to the
student’s understanding of the topic, as it encourages visual reading alongside
textual reading skills.
Cavallaro (2010), stated that visual novel is a form of interactive fiction that
calls upon players to engage in the production of the text as integrated agents. By
placing the interactor in an imaginary setting wherein he/she needs to deploy text-
17
Senior High School
analysis capabilities and puzzle-solving skills, the visual novel develops an
innovative way of presenting and receiving the narrative experience. The player is
urged to navigate the text in an attitude of sustained and conscious alertness in
exploring the visual novel’s simulated environment in order to discover and apply its
guiding rules while figuring out how to influence its events simultaneously.
Cavallaro’s statement above reinforces HTMLify’s potential to satisfy its
audience in terms of gameplay in visuals whilst helping convey information
containing HTML elements. Meaning to say, HTMLify is not only entertaining due to
its multimedia contents and story, but it is also educational due to the fact that HTML
lessons are incorporated in the storyline.
Lu (2014) studied that visual novels are a digital narrative-based medium
featuring interactive decision-making gameplay – much like that of choose-your-own
adventure books – which allows the player to decide how the visual novel
progresses and eventually how the visual novel will end. Visual novels’ stories vary
with the choices the player makes in each playthrough and so each story holds a
unique plot and multiple possible endings. The stories of visual novels are
communicated mostly via textual narration and dialogue and are complemented by
audio and digital imagery. Additionally, there are multiple possible paths that the
narrative can take based on the player’s choices.
Furthermore, visual novels should not be strictly limited to children’s literature.
It has the advantage to be adapted to any genre, from classical to contemporary
literature (Bashova & Pachovski, 2013).

18
Senior High School
HTMLify ticks the boxes of the very basic criteria needed to be attained in
order to be classified as a visual novel – offering simple, intuitive controls, only being
halted once a decision-making stage is attained, invoking multiple choices affecting
storyline. HTMLify offers decision-making for the reader, bifurcating towards one of
multiple possible outcomes based on the player’s prior decisions. The content it
provides also satisfies the criteria stated above, showing ‘textual narration and
dialogue and are complemented by audio and digital imagery’. Aesthetical
elements, such as the narration of the text, audio which includes music and sound
effects, is also part of what was described as being ‘audio and digital imagery’.
HTMLify, cannot be classified as a visual novel unless it projects imagery
pertaining to the story such as the characters, scenery, and the like. Whilst the
description above may easily lean towards describing on what would appear to be
a child’s story-time book, visual novels must also appeal to people of greater ranges.
HTMLify’s target audience, the Grade 11 and 12 ITMAWE students of STI College
– Global City, must be presented a game whose elements directly appeal specially
towards their satisfaction in terms of content, aesthetics, and usability.
Pratama et al. (2017) conducted a study entitled “Designing Visual Character
of Raden Wijaya As Historical Figure In Visual Novel”, which shows that Wijaya's
visual character design as a historical figure in Visual Novel can be shaped through
line, shape, texture, and color elements, and potentially brings cultural messages.
The design elements are able to build the association of meaning and image of
Raden Wijaya character based on informative function, interactive function, and

19
Senior High School
imaginative function. The entire interaction of these functions can be visualized
through illustrations of facial expressions, postures, costumes, and accessories
displayed. Discussion of the study of visual character design becomes important in
the visual novel game, because it can encourage creativity in creating similar visual
characters based on historical figures, thus potentially as a more informative and
entertaining educational media to meet the tastes of today's market.
Further solidifying HTMLify’s stance in being an informative game, it brings
the programming platform of interest – HTML, or Hypertext Markup Language – into
an entirely fantasy world of its own, featuring imagery which may cause the user to
interpret the story in a creative way supplicated by their own imagination. The
characters presented therein must accrue emotional reactions or, at the very least,
provide a directional sense of the plot for the audience in order to satisfy HTMLify’s
objective content-wise. Should HTMLify become a successful product, it should
satisfy the target audience as being an informative product, potentially surpassing
in satisfying the target audience intended.
Factors Affecting User Satisfaction
According to Thielsch and Moshagen (2015), content, usability and
aesthetics are the fundamental principles of the perceptual organization of a

20
Senior High School
website. Proper implementation of these principles will result in immediate enjoyable
subjective experience which will determine user satisfaction.
The current study aims to utilize these fundamental principles in its output,
HTMLify, and make the respondents assess their satisfaction level after using the
product according to the stated principles.
A favorable user interface starts from understanding people, rather than
figures, as software is merely the tool for certain objectives. The better satisfaction
would please the users more. The systems designed by designers are often different
from the users’ imagination and understanding of such systems. Learnability,
efficiency of use, memorability, and subjective satisfaction are some factors to
consider when designing the user interface that would result in the user’s satisfaction
(Lee & Lin, 2014).
The study above states that as designers (or developers) perceive using the
user interface differently from the user’s perspective, they must understand how the
average user would be satisfied. All the factors stated above plays a role in satisfying
the user. HTMLify must present a user interface that is easy to learn and memorize,
simple to navigate, and would satisfy the average user in terms of design, as each
user’s perception of the user interface is different.
The results from a study by Stinson et al. (2010) found that user satisfaction
from their site was based on the overall design aesthetics of the user interface,
content, functionality and features.

21
Senior High School
Stinson and his colleagues had observed that the aesthetics and the content,
as well as their functionality and their core features, all play a role in user satisfaction.
This would make sense as simplifying the usage of the website whilst presenting the
content in a pleasing manner encourages the user to further interact with the
website.
Usability
User’s perceived usability of the product facilitates interactions between the
parties and access to information and therefore, it may influence the levels of user
satisfaction (Corritore, et al., as cited in Akrimi & Khemakhem, 2014).
Corritore’s conclusion above affirms that the product’s usability affects the
user’s level of satisfaction. Therefore, the current study’s inclusion of usability
amongst the factors affecting user satisfaction to be assessed by the respondents
is a related and equally an important factor to consider.
A research conducted by Nitsch et al. (2016) found that the layout, navigation,
and content point to the usability aspect of their program’s theme.
In line with their research, HTMLify’s usability can therefore be defined by its
layout, navigation, and content of the website.
According to a study conducted by Kernot et al. (2014), ease of use and
navigation are key features of the usability aspect of the application. The key issues
are use of the application in multiple devices, operating systems, and software
22
Senior High School
where user’s found inconsistencies with the application’s display and performance
across varied devices.
Navigation and ease of use are some of the factors considered during
HTMLify’s development, as other research has repetitively showed that these bear
weight in a program’s usability. As HTMLify is a website, accessible through any
browser of any medium, such as a smartphone or a computer, any inconsistencies
must be addressed and absolved as to assure its usability across platforms.
The results from an experimental research by Miller et al. (2017) regarding
health applications showed that the conception of a simple interface, language, and
audio narration assisted those with literacy barriers. They also found that other
health apps with complex navigational designs, denser text, and sophisticated
terminology showed lesser ease-of-use, or usability.
This study supports the studies stated above. Manifesting the consistent
factor that is to say, the navigation by implementing a simpler interface leading to
easier use, will become the ultimate deciding element in HTMLify’s usability. In
addition, they added simple language and audio narration to aid in such usability,
further stating that more complex navigational designs, compacted texts, and
heavier vocabulary showed lesser ease-of-use.
Aesthetics
Aesthetic appeal significantly influences satisfaction (Wang, Hernandez &
Minor, 2010).
23
Senior High School
The statement of Wang et al. above reinforces Thielsch and Moshagen’s
argument that aesthetics is amongst the factors which determines the website user’s
satisfaction.
According to a study conducted by Garett et al. (2016) entitled “A Literature
Review: Website Design and User Engagement”, proper user interface design has
become a critical element needed to engage website and mobile application users.
This is most imminent with the modern generation, often opting for simple,
clean, and elegant interface designs as opposed to flashy, constricted, and overly
compacted user interface. HTMLify offers a relatively simple layout for an interface
design: buttons and clickable text. This is so the user need not worry about studying
the controls and would focus more on the game’s content itself.
Content
Kincl and Strach (2012) stated in the article Measuring website quality:
asymmetric effect of user satisfaction that content has been identified as one of the
key ingredients when users judged website quality.
HTMLify’s content must therefore be satisfactory and hold a certain,
consistent standard which would see students appreciate the quality of the game
itself. First from the visuals themselves, which must be consistent and stimulate
pleasurable visual contact. Second are the controls and its ease-of-use in interacting
with the game, as to not confuse the students when using the game. Lastly, the core
24
Senior High School
part of any visual novel, the content. It must appeal to the students in a manner
corresponding to its genre.
Sindhuja and Dastidar (2009), conducted a study entitled “Impact of the
Factors Influencing Website Usability on User Satisfaction” which found that
information content is among the factors that is considered to be significant in
explaining the satisfaction level of the users.
As with the factors stated above, the ‘information content’ employed within
the game must be a factor to consider when developing HTMLify. This is due to the
fact that users already interested in the first visual contact with the website must
further be impressed with the matching content that it aims to deliver.

25
Senior High School
Local Literatures and Studies
Visual Novel as a Visual Learning Tool
Detablan et al. (2013) conducted a study involving a project that has different
categories different shapes, math games, coloring games, typing games and
more. By creating various games that are fun yet educational, students can learn
skills like problem-solving and boosting creativity, so they’ll have advance learning
before they go to school.
Detablan’s statement above supports HTMLify’s purpose as a potential
informative/educational visual novel. As HTMLify aims to satisfy students via various
cognitive elements, such images, colors, and audio, related to HTML, it could boost
skills in terms of troubleshooting problems presented within the game as well as
giving students a chance to develop their creativity and assertive manner in
interpreting the code problems presented within.
Logarta (2014) wrote an article named "The gamification of education Why
playing is the future of learning", which stated that students can benefit more in
gamification of education rather than using traditional way of educating students.
Gamification means using game mechanics to make teaching more interesting,
motivating, casual and fun for students. So instead of restricting them from playing
games, why not use certain games that can increase their knowledge, memorization
and skills.
26
Senior High School
Logarta’s statement above talks about how gamification and traditional
teaching differs. He elaborated that gamification is more helpful and an easy way to
help students enhance their knowledge and skills which is similar to HTMLify. When
images are used alongside text, students can more easily decipher the meaning of
the text, as well as retain elements of the story. If HTMLify proves satisfactory by
students, it could easily translate as a good game to teach HTML materials. By
providing students with tools to increase their reading and writing ability, teachers
can promote student success.
According to Logarta (2017), the most important feature of a title in the visual
novel is a branching storyline that evolves according to the choices of the player.
You will be with their innermost ideas, and the visual novel makes them more
related, while assisting them to believe it and make it relevant.
Visual novel encourages each student to evaluate each choice they make
and to think about the possible outcome of their choice. For every decision they
make in HTMLify, it should also invoke a sense of their presence or contribution
within the game. HTMLify aims to achieve this by immersing the player alongside
the characters in the story as well as helping them solve any problems they face
within the plot.
According to Duque (2017), a commercial on television once said that
learning is a visual process. This is in fact true as most teachers know that learning
is in fact 70 percent a visual experience. This is why it is essential to help learn
through visual aids. Using visual facilitation and pre-drawn flip charts not only helps
27
Senior High School
draw in learners, so to speak, but makes it easier for them to remember the concepts
they’ve just learn. Visual learning often rates higher than audio or kinesthetic
learning for many people.
Learning through visual aids is much easier in helping students remember
their newly learned lessons. Visual learning has greater advantage to many
individuals than just listening to audios or the kinesthetic learning. If HTMLify can
satisfy visual learners by means of visual aids, they could vastly help in learning
HTML.
Palma (2016) stated that visual aids help learners comprehend theoretical
concepts and allow difficult data to be organized. Moreover, effective visual support
maintains learner’s attention and increases memory retention of the material being
presented. By merely choosing and using the appropriate visual aids, the learner
could potentially be attracted and be satisfied with the visual aids within the game.
Visual Novel is an example of a visual aid. It is much easier to learn something
if the content is organized and the learner’s interest will be awakened if there are
appropriate visual aids presented.
Abante et al. (2014) observed that many students discover that they are
visual learners. These learners commonly use visual aids, such as graphs and
diagrams, to assist them in putting material into perspective.
Visual novel is one of many forms of visual aids that can make it easier to
remember content later rather than if they had just heard the information. Visual
learners need to see material in order to understand it. If visual learners could be
28
Senior High School
satisfied with HTMLify’s visual imagery such as film, graphic displays, or pictures, it
could invoke learning.
Visual aids are among the school-factors to consider with regards the
academic performance of the students (Flores, et al., 2015).
The statement above emphasizes on the impact of implementation and
utilization of visual aids such as visual novel on students’ academic performance.
A study conducted by Magulod (2019) found that the learning style
preferences, study habits and level of academic achievement of students enrolled
in applied science courses. Results of the study revealed that the students of applied
sciences courses preferred visual, group and kinesthetic as major learning styles
while they consider tactile, auditory and individual learning styles as minor learning
preferences. It was also revealed that they manifested a moderate level of study
habits and skills along with time management, concentration, note taking, reading
comprehension, test preparation, and test taking, reading speed, writing skill, and
managing test anxiety.
HTMLify is a type of website product which specializes in the visual category
of informative literature. With HTMLify being specially programmed towards
students enrolled in the Information Technology strand, the resulting visual aspects
must apply towards their topic being studied. HTMLify must also prove a satisfying
game and an adequate supplement as the study above found that, albeit in a
different course, students preferred ‘visual, group and kinesthetic as major learning
styles’.
29
Senior High School
Content
Balatucan et al. (2015) states in their study that content published on a site
is often displayed in an inconsistent manner with varying layouts, confusing the
person using the site. They emphasized the use of a display standard that maintains
that consistent layout as to maintain the look and feel throughout the site in order to
leave an impression of the site bearing a professional image of uniformity for the site
visitor.
This is very much true to what HTMLify should be – offering simple controls
and layout as to provide a simple method of navigation within the site as to prevent
or minimize confusion for its use. HTMLify presents a straight-forward, simple-to-
use interface, featuring buttons engraved with texts or symbols which denotes their
function. It also maintains a consistent design throughout the game in terms of visual
and functional aspects, featuring identically sized buttons, dialogues, and text fonts
in displaying the character’s script within the game.
Evangelista et al. (2012) defined multimedia as computer software presenting
text, audio, video, animation, interactive features and still images in various ways
and combinations accessible through electronic means such as computers or other
electronic means. Multimedia can take on and work a with a variety of media forms
to get their content across. An example would be a website with the combination of
images, video, audio, and/or text.
HTMLify, in addition to being classified as a video game, also falls within the
category of a multimedia object. Multimedia can be seen as a broader term for

30
Senior High School
distinguishing other forms of media such as written or printed media. HTMLify
satisfies the criteria of being accessible via computers and takes on the form of a
visual novel, displayed in a website, in order to present its content.
Aesthetics
Placia et al. (2012), in their study, found that multimedia systems enhance
text-only presentations by adding interesting sounds and compelling visuals. These
factors increase learning effectiveness. They further defined multimedia to be the
integration of animation, audio, graphics, text, and/or full-motion video through
computer hardware and software which possesses the capabilities to produce them.
As already stated above, HTMLify can be classified as a form of a multimedia
object, presenting sounds and visuals within the game. Interestingly enough, they
found that these factors help in ‘increasing learning effectiveness’. In regard to the
research above, the graphics and auditory elements which HTMLify presents should
produce correlational relationships in a marginal/significant scale in improving the
learning effectiveness proportional to the quality and quantity of the elements.
Usability
The study of Thowfeek and Salam (2014) revealed that there is a greater
expectation from students with regards to the usability characteristics of e-learning
websites.
31
Senior High School
HTMLify is expected to produce the same behavior manifested by the
students. As HTMLify is already a simple, easy-to-use website, it is expected that
the students are able to grasp and assimilate the content presented therein –
spending lesser time analyzing and studying the game’s controls and mechanics
and focusing towards the core subject presented within the game.
Gano (2009) defines usability as the ease by which a student can navigate
and locate needed information. She measured usability in terms of appearance,
navigation, content, security, performance and efficiency, and interactivity.
As with other studies, usability goes hand-in-hand with navigation and content
and determines how users can interact with the website efficiently. Furthermore,
Gano measured usability in terms of appearance, interactivity, security and
performance, all pertaining to the responsiveness of a certain program which may
lead to user satisfaction.

32
Senior High School
CHAPTER 3
RESEARCH METHODOLOGY
This chapter presents the methods used in this study for the acquisition of the
statistical data needed to produce the yield. This chapter consists of research
method, design and locale, population, sampling method, research instrument,
validation of instrument, data collection procedures, and the statistical treatment of
data.
Research Method
Bhat (2018) stated that research method are the tools or instruments used to
accomplish the goals and attributes of a study.
Since the study is based on finding the correlational satisfactory rate of grade
11 and 12 ITMAWE students, the researchers deemed that one of the appropriate
research methods is the quantitative method.
Babbie (2010) defines quantitative research as methods that emphasize
objective measurements and the statistical, mathematical, or numerical analysis of
data collected through polls, questionnaires, and surveys, or by manipulating pre-
existing statistical data using computational techniques.
The primary objective of this study is to determine whether or not the grade
11 and 12 ITMAWE students are satisfied in using HTMLify. By providing a
numerical, measurable scale for the respondents to fill in so that the data can be
33
Senior High School
analyzed in a statistical manner, the researchers can conclude whether HTMLify is
successful or not in attaining its objective.
Research Design
According to Kerlinger in Kumar (2013), research design is the plan, structure
and strategy of investigation conceived so as to obtain answers to research
questions and to control variance. A research is the specification of methods and
procedures for acquiring the information needed.
The researchers determined, with the definitions given above, that the
research design used for this study shall be a correlational method.
Cherry (2019) stated that correlational studies are a type of research often
used as a preliminary way to gather information about a topic or in situations where
performing an experiment is not possible. The correlational method involves looking
at relationships between two or more variables. While researchers can use
correlations to see if a relationship exists, the variables themselves are not under
the control of the researchers. Hence, the researchers used the correlational
method.
Cherry’s statement above reinforces the use of the correlational method
because the study aims to determine whether or not there is a relationship between
the satisfactory rate of grade 11 and 12 ITMAWE in using HTMLify, based on the
data that the researchers would obtain.

34
Senior High School
Population of the Study
The population of the study are the grade 11 and 12 ITMAWE students for
AY 2019-2020, as stated in the first chapter. The research shall be conducted in STI
College – Global City. Surveying will exclusively occur on-campus, meaning any
form of interaction with the respondents shall not extend beyond the school’s
jurisdiction. Surveying the respondents shall take place no later than the 3 rd quarter
of 2019.
Research Locale
The present study was conducted in STI College - Global City located in STI
Academic Center, University Parkway Drive, Taguig, Metro Manila. Specifically, the
study was conducted in the classrooms of grade 11 and 12 ITMAWE students. The
researchers roamed around these classrooms to distribute questionnaires.
Sampling Technique
Liu and Su (2018) used random sampling in their study to process a part of a
dataset, as they deemed that sampling the entire dataset may be considered too
expensive in terms of response time or resource usage. Furthermore, they defined
random sampling as a method to support statistical analysis of a dataset, either to
estimate parameters of interest or for hypothesis testing.

35
Senior High School
As this study focused on the grade 11 and 12 students in the ITMAWE strand,
the random sampling technique was utilized in this study.
As the research problem is based on the satisfaction level of IT students, the
researchers deemed that all ITMAWE students of the Senior High School
department are the most optimal subjects to conduct a survey upon. Moreover, the
researchers selected the grade 11 and 12 ITMAWE students as the respondents as
the grade 11 students will most likely learn something new with HTMLify as HTML
is one of their major subjects. The grade 12 students already have prior experience
and knowledge with HTML, making their response and feedback a credible
reference for the improvement of the user’s satisfaction level whilst using the
website.
The study involved 141 respondents from grade 11 and 12 ITMAWE students
of STI College Global City AY 2019 - 2020. The sample size was determined using
the Slovin’s Formula.
Slovin's formula allows a researcher to sample the population with a
desired degree of accuracy and it gives the researcher an idea of how large the
sample size needs to be to ensure a reasonable accuracy of results (Ellen, 2018).
It was decided that the Slovin’s formula be used to determine the required
sample size whilst minimizing the margin for error in conducting the research. As
per default, the confidence level is set to 95%, leaving a 5% margin of error.
36
Senior High School
Formula:
𝑁
𝑛=
1 + 𝑁𝑒 2
Where:
n = sample size
N = total population
e = margin of error
For grade 11, there are 39 students from ITMAWE101, 38 students from
ITMAWE102 and 30 students from ITMAWE103. For grade 12, there are 37
students from ITMAWE301, 30 students from ITMAWE302, 35 students from
ITMAWE303 and 9 students from ITMAWE304, making the total population 218
ITMAWE students.
218
𝑛=
1 + (218)(0.052 )
218
𝑛=
1 + (218)(0.0025)
218
𝑛=
1 + (0.545)
218
𝑛=
1.545
𝑛 = 141.10 𝑜𝑟 141
Therefore, the sample size needed for the study to have high level of
accuracy based on the total population of the grade 11 and 12 ITMAWE students
from STI College Global City is 141.

37
Senior High School
As the researchers will further survey each ITMAWE sections from the grade
11 and 12 students, the researchers decided to use the proportionate stratified
random sampling method in order to find the required sample size per stratum.
Crossman (2019) states that stratified random sampling is a type of random
sampling method which is used when the researcher wants to examine subgroups
within a population. Researchers may also use this technique when they want to
observe relationships between two or more subgroups, or when they want to
examine the rare extremes of a population.
Furthermore, he defines that, in proportionate stratified sampling, the size of
each stratum is proportionate to the population size of the strata when examined
across the entire population. This means that each stratum has equal sampling
fraction.
Formula:
𝑛𝑡
𝑛𝑖 = ( )𝑁
𝑁𝑡 1
ni = stratum sample size

N1 = stratum size
nt = sample size
Nt = population size
For ITMAWE101:
141
𝑛𝑖 = ( ) 39
218
𝑛𝑖 = (0.65)39
𝑛𝑖 = 25.35 𝑜𝑟 25
38
Senior High School
The stratum sample size needed for ITMAWE101 is 25.35. However, since it
refers to a sample size, 25.35 is not a valid number because it is not a whole number.
Instead, the stratum sample size for ITMAWE101 is rounded off to 25.
As the researcher’s objective is to produce an unbiased presentation of the
data whilst measuring the correlational satisfactory rate of the students, the reason
for using the stated methodology beforehand is then made clear - the data acquired
can be measured in a numerical scale between the two sections.
The table below shows the produced sample size required per section after
using the proportionate stratified random sampling formula. A sample of how the
formula was used has already been given above.
Population and Sample Size
Section Population (N) Sample Size (n)
ITMAWE101 39 25
ITMAWE102 38 25
ITMAWE103 30 19
ITMAWE301 37 24
ITMAWE302 30 19
ITMAWE303 35 23
ITMAWE304 9 6
TOTAL 218 141

39
Senior High School
Research Instrument
A researcher-made questionnaire was used as the research instrument to
gather the data in conducting this study as the researchers believe that conducting
a survey by means of questionnaires can present the most accurate data within
reasonable balance of cost and time.
The questionnaire contains two distinctive segments where students must
appropriately fill in the required information: the first segment inquires about their
demographic profile; the second segment presents a numerical scale which
indicates their satisfaction.
First, the questionnaire obtains the student’s basic demographic profile, as stated
in the first chapter of the study. This segment contains their age, sex, section, grade
and year level. The students may optionally fill in the corresponding forms for their
name.
Second, the questionnaire shall present the Likert scale formatted in numerical
measurements which contains a range from 1 to 4, with each value representative
of their satisfaction level – one is the lowest, four is the highest. The scale will be
used to assess the following:
• Content
The respondents will indicate their satisfaction regarding the content
presented in the website.

40
Senior High School
• Aesthetics
The respondents will indicate their satisfaction regarding the aesthetics
• Usability
The respondents will indicate their satisfaction regarding the usability
Validation of Instrument
The researchers sought assistance from their research adviser, Ms.
Stephanie B. Tabifranca, in order to validate the survey-questionnaire. Furthermore,
the researchers also consulted other faculty members, Mr. Mark Frederick V.
Salonga and Mr. Christian Paul L. Tacsuan, to assist in proofreading, checking the
questionnaires, and making necessary revisions. After the questionnaires were
approved for use, sufficient copies were produced and distributed to the
respondents.
Data Gathering Procedures
As seen in this chapter, the researchers stated the research design used for
this and the location and time of where the respondents shall be surveyed. The
researchers then determined the research instrument(s) to be used in conducting
the survey.
41
Senior High School
After finalizing the instrument for data collection, the researchers determined
the number or respondents needed for every section by means of using the Slovin’s
formula and the proportional stratified random sampling formula. Then, the
researchers visited the area as stated previously in Research Locale, which is STI
College – Global City. The researchers then requested permission from the faculty
members of each classroom to conduct a survey in order to collect the necessary
data. The researchers discussed at length with the school’s faculty the motive
behind their study and sought their permission for collecting the necessary data.
After acquiring the necessary permissions, the researchers moved to the first
phase: surveying. The researchers went to the classrooms of their subjects, the
grade 11 and 12 ITMAWE students. The subjects were briefed about the nature and
purpose of the study. They were then given a quick demonstration of how to use the
website before allotting a time for them to use the proposed output, HTMLify, first-
hand. The time allotted shall exceed no more than 20 minutes. During this time, the
respondents were given a chance to interact with HTMLify. An integrated test is
included within the game to determine whether or not did the website enhanced their
skillsets in HTML.
In the second phase, the respondents were asked to fill out the researcher-
made questionnaire previously mentioned in Research Instrument. Again, time shall
be allotted in answering the survey questionnaire, as to avoid interfering with the
respondent’s schedule and ensuring efficiency and discipline when conducting the
42
Senior High School
survey. After interviewing all prerequisite sections, the data gathered from the
respondents was then treated statistically using the Pearson’s R Test.
Statistical Treatment of Data
The quantitative data obtained through the survey conducted was analyzed and
evaluated using the following statistical treatment:
1. Frequency Distribution. This was utilized to facilitate the tallying and counting
of frequencies falling under the profile categories.
2. Frequency Percentage. This tool was used to find out the part of the whole
respondents’ assessment based on the frequency/tally gathered. The following
formula was used to determine the same based on the variables determined.
𝑓
𝑃= 𝑥 100
𝑁
Where:
f = Frequency
N = Total Population
P = Percentage
3. Four-point Likert Scale. This was used to determine the satisfaction rate of
grade 11 and 12 ITMAWE students in using HTMLify. The rating and verbal
interpretation used is presented below:

43
Senior High School
Four-Point Likert Scale with Verbal Interpretation
Likert Scale Range Verbal Interpretation

Equivalent
1 (Strongly Disagree) 1.0 – 1.50 Very Unsatisfied
2 (Disagree) 1.51 – 2.50 Unsatisfied
3 (Agree) 2.51 – 3.50 Satisfied
4 (Strongly Agree) 3.51 – 4.0 Very Satisfied
4. Weighted Mean (WM). This was used to determine the satisfaction rate of grade
11 and 12 ITMAWE students based on the three factors that affects user
satisfaction: content, aesthetics, and usability.
𝑇𝑊𝐹
𝑊𝑀 = 𝑥 100
𝑁
Where:
WM = Weighted Mean
TWF = Total Weighted Frequency
N = Total Population
5. Pearson’s R test. This was used to determine if there is a significant relationship
between the satisfactory rate of grade 11 and 12 ITMAWE students in using
HTMLify. The formula is as follows:
𝑛(∑ 𝑥𝑦) − (∑ 𝑥)( ∑ 𝑦)

𝑟=
√[𝑛 ∑ 𝑥 2 − (∑ 𝑥 )2] [𝑛 ∑ 𝑦 2 − (∑ 𝑦)2]
44
Senior High School
Where:
n = number of paired samples
x = first variable
y = second variable
Akoglu (2018), in his study entitled, “User’s guide to correlation coefficients”,
provided a table with the complete interpretation value for the Pearson’s R formula
alongside other methods of correlation.
Pearson’s R Test Interpretation
PEARSON’S R VALUE INTERPRETATION
+1 −1 Perfect relationship
+0.9 −0.9 Strong relationship
+0.6 −0.6 Moderate relationship
+0.3 −0.3 Weak relationship
0 0 No relationship
45
Senior High School
The table above was utilized in the study to determine the corresponding
relationship with the projected value from the computation of Pearson’s R which will
also be the basis for accepting or rejecting the null hypothesis stated in the 1 st
chapter of the study.

46
Senior High School
CHAPTER 4
PRESENTATION, ANALYSIS AND INTERPRETATION OF DATA
This chapter comprises the analysis, presentation and interpretation of the
findings resulting from this study. This study focuses the correlational analysis of the
satisfactory rate of grade 11 and 12 ITMAWE students of STI College Global City in
using HTMLify.
It is necessary to analyze the data collected in order to test the hypothesis
and answer the research questions.
I. Demographic Profile of the Respondents
The first section of the questionnaire sought to determine the demographic
profile of the respondents from grade 11 and 12 ITMAWE students of STI College
Global City.
Table 1.1. Age
Age Frequency Percentage

15 – Below 3 2.13%
16 – 17 108 76.59%
18 – 19 29 20.58%
20 – above 1 0.70%
Total 141 100%
47
Senior High School
The grade 11 and 12 ITMAWE students’ ages ranged from 15 - 20, with the
majority residing in the age bracket of 16 to 17 as 108 (76.59%) whilst respondents
aged 20 only contained 1 (.70%) respondent, the least of all age brackets.
The age bracket of 16 to 17 is expected for students entering their senior high
school years and is consistent with DepEd’s K-12 standard.
Table 1.2. Sex
Sex Frequency Percentage

Male 103 73%
Female 38 27%
Total 141 100%
The respondents were also asked to indicate their sex in the questionnaires.
Out of the 141 respondents, 103 (73%) were male and 38 (27%) were female.
The majority of the respondents are male due to the majority of IT sections
containing significantly more males than there are females, numbering them 3:1 on
average per section.

48
Senior High School
Table 1.3. Section
Section Frequency Percentage

ITMAWE101 25 17.73%
ITMAWE102 25 17.73%
ITMAWE103 19 13.475%
ITMAWE301 24 17.02%
ITMAWE302 19 13.475%
ITMAWE303 23 16.31%
ITMAWE304 6 4.26%
Total 141 100%
Lastly, the sections from which the respondents belong to was also tabulated.
ITMAWE101 and ITMAWE102 had the highest frequency of 25 (17.73%) while
ITMAWE304 had the lowest frequency of 4 (4.26%).
The grade 11 ITMAWE students have the greatest number of respondents
per section due to the fact that they only comprise of three sections, whereas the
grade 12 ITMAWE students have lesser respondents per section as they contain
one section more than the grade 11 students.

49
Senior High School
Table 1.4. Grade Level
Grade Level Frequency Percentage

Grade 11 69 48.94%
Grade 12 72 51.06%
Total 141 100%
69 out of 141 respondents (48.94%) were grade 11 students and 72 (51.06%)
were grade 12 students.
The respondents of grade 12 ITMAWE students are greater than grade 11
ITMAWE students. This is due to the fact that there are more grade 12 students then
there are grade 11.
II. Satisfactory Rate of Grade 11 and 12 ITMAWE Respondents
Criteria for Verbal Interpretation
Range Verbal Interpretation
1 – 1.50 Very Unsatisfied
1.51 – 2.50 Unsatisfied
2.51 – 3.50 Satisfied
3.51 - 4 Very Satisfied
The table above presents the criteria used in order to interpret the data
gathered by the researchers and shall be used as the basis for determining the
50
Senior High School
equivalent verbal interpretation corresponding to their satisfaction based on their
weighted mean.
The margin given per criteria in the Likert scale is 1 (with the exception of 1
and 4). Exceeding lower or higher than the margin will classify it in a different verbal
interpretation. As 1 cannot fall short of its own value and with 4 being the highest
attainable value, their margins are halved.
Table 2.1.1. Grade 11 ITMAWE Respondents: Content

Questions Weighted Mean Verbal Interpretation
1.) The information appears factual 3.3333 Satisfied

and free of inaccuracies or grammar
errors.
2.) The information on the website is 3.5652 Very Satisfied

clearly presented.
3.) The content of the website is 3.6231 Very Satisfied

reliable.
4.) The information presented by the 3.4782 Satisfied

website is useful.
5.) The information provided by the 3.5652 Very Satisfied

website is easy to understand.
Total Average Weighted Mean 3.5130
Verbal Interpretation Very Satisfied

51
Senior High School
Table 2.1.1 shows that a significant portion of the respondents are very
satisfied with the content HTMLify presented to them, producing an average
weighted mean of 3.51.
For the first question, the data has shown that the majority of the respondents
are satisfied (3.33) that the information presented in the game are factual and are
devoid of grammatical errors.
For the second and third question, the data has shown that the majority of the
respondents are very satisfied that the information of the website is clearly
presented (3.56) with the content presented also being perceived as reliable (3.62).
For the fourth question, the data has shown that the majority of the
respondents are satisfied (3.47) usefulness of the information presented within the
website.
For the fifth question, the data has shown that the majority of the respondents
are very satisfied (3.56) with the website is easy to understand.
Overall, the grade 11 ITMAWE students were very satisfied with HTMLify’s
content, which hints that the game delivered in terms of storyline and presentation.
The information content held weight in regards to satisfying the users
(Sanhuja and Dastidar, 2009). As the data shows that grade 11 students are very
satisfied with the content, it indicates that they might be satisfied with HTMLify’s
other two characteristics – usability and aesthetics.

52
Senior High School
Table 2.2.1. Grade 11 ITMAWE Respondents: Usability
1.) I feel comfortable in using the 3.4492 Satisfied

website.
2.) I find the website easy to use. 3.4492 Satisfied
3.) The fonts are appropriate in size, 3.5797 Very Satisfied

color and style. The user can easily
locate and read the text.
4.) I find the website easy to 3.4347 Satisfied

navigate.
5.) The website can be used without 3.3043 Satisfied

any written instructions.
Verbal Interpretation Satisfied
Table 2.2.1 shows that a significant portion of the respondents are satisfied
HTMLify’s usability, producing an average weighted mean of 3.44.
For the first and second question, the data has shown that the majority of the
respondents are satisfied (3.44) in regard to HTMLify’s attribute of being
comfortable and easy to use, respectively.
For the third question, the data has shown that the majority of the
respondents are very satisfied (3.57) with HTMLify’s presentation of textual motif,
offering the appropriate size, color, and styling thus making the story easy to read.
53
Senior High School
For the fourth and fifth question, the data has shown that the majority of the
respondents are satisfied with HTMLify’s ease of navigation (3.43), and that it can
be used without any written instructions (3.30).
The grade 11 ITMAWE students has shown that they are satisfied with
HTMLify’s usability. This could hint that HTMLify presents a readily accessible, easy-
to-use interface with which the majority of students were satisfied. However, a small
population disagreed, signifying that HTMLify could do better in delivering its
controls towards the grade 11 students.
The usability of a product facilitates interactions between the user and their
accessibility to information, which may influence levels of user satisfaction
(Corritore, et al., as cited in Akrimi & Khemakhem, 2014). HTMLify has been
observed to satisfy the grade 11 students in regards to its usability, further proving
that the game must have satisfied the users in delivering game content, information,
and aesthetical design.

54
Senior High School
Table 2.3.1. Grade 11 ITMAWE Respondents: Aesthetics
1.) The website has an attractive 3.4492 Satisfied

interface.
2.) The visual elements (text, image, 3.6086 Very Satisfied

font, etc.) are applied consistently
throughout the website.
3.) The design of the website is not 3.3478 Satisfied

overwhelming or confusing.
4.) The website’s user interface 3.3623 Satisfied

captures my interest.
5.) The position of messages on the 3.6086 Very Satisfied

screen is consistent.
Verbal Interpretation Satisfied
Table 2.3.1 shows that a significant portion of the respondents are satisfied
HTMLify’s aesthetics, producing an average weighted mean of 3.47.
are satisfied (3.44) with HTMLify’s interface.
For the second question, the data has shown that the majority of the
respondents are very satisfied with HTMLify’s consistent presentation of visual
elements (3.60).
For the third and fourth question, the data has shown that the majority of the
respondents are satisfied that HTMLify’s design does not exhibit flairs which may
55
Senior High School
impair attention towards the website’s core focus (3.34), thus leaving an impression
which captivates interest (3.36).
are very satisfied (3.60) with how HTMLify attains its consistent position of texts
on-screen.
Similar to the results above, the grade 11 ITMAWE students are satisfied with
how HTMLify presented its aesthetical content. This indicates that HTMLify
managed to entice and satisfy the majority of the students with its illustrative scenes
and characters, with only a small number of respondents finding the illustration
unsatisfactory.
As proper interface design is a critical element to engage users (Garett et al.,
2016) and with its aesthetic appeal significantly influencing satisfaction (Wang,
Hernandez, & Minor, 2010), HTMLify presented itself properly and aesthetically
pleasing. This has satisfied the grade 11 users in regards to aesthetics and possibly
affecting satisfaction in other key areas, as presented by the data.

56
Senior High School
Table 2.1.2. Grade 12 ITMAWE Respondents: Content
1.) The information appears factual 3.7536 Very Satisfied

and free of inaccuracies or grammar
errors.
2.) The information on the website is 3.8115 Very Satisfied

clearly presented.
3.) The content of the website is 3.7826 Very Satisfied

reliable.
4.) The information presented by the 3.7391 Very Satisfied

website is useful.
5.) The information provided by the 3.7681 Very Satisfied

website is easy to understand.
satisfied with the content HTMLify presented to them, producing an average
weighted mean of 3.77.
are very satisfied (3.75) that the information presented in the game are factual and
are devoid of grammatical errors.
respondents are very satisfied (3.81) that the information presented within the
website is presented clearly.

57
Senior High School
respondents are very satisfied (3.78) that content presented within HTMLify is
reliable.
respondents are very satisfied (3.73) that HTMLify presents useful information.
are very satisfied (3.76) that HTMLify provides information towards its audience in
a simple, easy-to-understand manner.
Overall, the grade 12 ITMAWE students showed that they are very satisfied
with HTMLify’s content. This signifies that HTMLify has properly presented the
storyline and the characters in it.
Seeing as how content is a factor in affecting satisfaction (Sindjhuja and
Dastidar, 2009), it is also identified to be one of the key ingredients when website
quality is judged. (Kincl and Strach, 2012). As HTMLify, based on the data, managed
to greatly satisfy the grade 12 students, it can be concluded that the game is
successful in presenting its content towards senior high school students as a whole.
58
Senior High School
Table 2.2.2. Grade 12 ITMAWE Respondents: Usability
1.) I feel comfortable in using the 3.7826 Very Satisfied

website.
2.) I find the website easy to use. 3.8115 Very Satisfied
3.) The fonts are appropriate in size, 3.8985 Very Satisfied

color and style. The user can easily
locate and read the text.
4.) I find the website easy to 3.7536 Very Satisfied

navigate.
5.) The website can be used without 3.7101 Very Satisfied

any written instructions.
satisfied with the HTMLify’s usability, producing an average weighted mean of 3.79.
are very satisfied (3.78) with how, with usage, comfortable HTMLify is.
respondents are very satisfied (3.81) with HTMLify’s ease of use.
respondents are very satisfied (3.78) with HTMLify’s presentation of text with the
proper integration of size, font, and color.

59
Senior High School
respondents are very satisfied (3.75) with how simple it is to navigate HTMLify.
For the fifth question, the data has shown that the majority of the respondents are
very satisfied (3.71) that HTMLify can be used beforehand without any written
instructions.
The grade 12 ITMAWE students were also found to be very satisfied with
HTMLify’s usability. This indicates that HTMLify was found to be usable and easy-
to-navigate even without introducing the controls in the game.
The layout, navigation, and content comprising the usability of a program’s
theme (Nitsch et al., 2016), as well as ease of use and navigation serving as key
features of an application’s usability aspect (Kernot et al., 2014), it can be deduced
that HTMLify managed a successful implementation of all four. This is proven by the
data presented as it greatly satisfied the grade 12 students, satisfying the entire
senior high school students as a whole.

60
Senior High School
Table 2.3.2. Satisfaction Rate of Grade 12 ITMAWE Respondents: Aesthetics
1.) The website has an attractive 3.7826 Very Satisfied

interface.
2.) The visual elements (text, image, 3.9275 Very Satisfied

font, etc.) are applied consistently
throughout the website.
3.) The design of the website is not 3.7971 Very Satisfied

overwhelming or confusing.
4.) The website’s user interface 3.7536 Very Satisfied

captures my interest.
5.) The position of messages on the 3.8840 Very Satisfied

screen is consistent.
satisfied with the HTMLify’s aesthetics, producing an average weighted mean of
3.87.
are very satisfied (3.78) with HTMLify’s attractive interface.
respondents are very satisfied (3.81) with HTMLify’s consistent application of
visuals and scenery.

61
Senior High School
respondents are very satisfied (3.78) with HTMLify’s aversion towards ‘extreme’
designs, instead opting for a simple approach as to avoid confusion.
respondents are very satisfied (3.75) with HTMLify can captivate the user.
are very satisfied (3.71) with HTMLify’s consistent positioning of narrative text.
The grade 12 ITMAWE students also found HTMLify’s aesthetical aspect to
be very satisfying. This indicates that HTMLify managed to present its visual
elements well in an orderly manner.
Interesting sounds and compelling visuals and the integration of animation,
audio, graphics, text, and full-motion video helps increase learning effectiveness
(Placia et al., 2012) and its overall aesthetic appeal significantly increases
satisfaction (Wang, Hernandez, & Minor, 2010). As HTMLify has greatly satisfied the
grade 12 students in terms of aesthetics, it can be said that HTMLify’s
implementation of the aforementioned elements is executed without much
compromise.
Furthermore, HTMLify has shown that its content, usability, and aesthetics –
the fundamental principles of a website’s perceptual organization (Thielsch and
Moshagen, 2015) – has been presented well and has satisfied most senior high
school students.
62
Senior High School
III. Significant Relationship Between the Satisfactory Rate of the Grade 11
and 12 ITMAWE Respondents
Pearson’s R Test
With the average mean per grade level having been computed per question,
it is now possible to determine whether or not the acquired data have a significant
relationship with each other, which would indicate whether or not the researchers
should accept or reject the null hypothesis of this study. The Pearson’s R Test
formula found in the 3rd chapter of the study will be used in order to determine the
value of r for each sector. The computation for the r of content (one of the sectors),
is presented below.
Sample Computation for Pearson’s R Test: Content
x y xy x2 y2
3.3333 3.7536 12.51187 11.11089 14.08951
3.5652 3.8115 13.58876 12.71065 14.52753
3.6231 3.7826 13.70474 13.12685 14.30806
3.4782 3.7391 13.00534 12.09788 13.98087
3.5652 3.7681 13.43403 12.71065 14.19858
Σx = Σy = Σxy = Σx2 = Σy2 =
17.565 18.8549 66.24474 61.75692 71.10455
n = Number of Paired Samples

x = Weighted Mean of Grade 11 Students’ Satisfaction Rate
y = Weighted Mean of Grade 12 Students’ Satisfaction Rate
63
Senior High School
𝑛(∑ 𝑥𝑦) − (∑ 𝑥)( ∑ 𝑦)
𝑟=
√[𝑛 ∑ 𝑥 2 − (∑ 𝑥 )2 ] [𝑛 ∑ 𝑦 2 − (∑ 𝑦)2 ]
5(66.24474) − (17.565)(18.8549)
𝑟=
√[5(61.75692) − (17.565)2 ][5(71.10455) − (18.8549)2 ]
331.2235 − 331.1863
𝑟=
√[308.7846 − 308.5292][355.5227 − 355.5073]
0.0372
𝑟=
√[0.2554][0.0154]
0.0372
𝑟=
√0.0039
0.0372
𝑟=
0.0624
𝑟 = 0.59
Pearson’s R Test Result
Sector Pearson’s R Value Relationship
Content 0.59 Moderately positive

relationship
Usability 0.95 Strong positive relationship
Aesthetics 0.91 Strong positive relationship
Average 0.85 Strong positive relationship
The table above shows the result and interpretation after finding the
Pearson’s R value for determining the comparative rate of the two means.
64
Senior High School
With the data presented above, it can be seen that in terms of content, the
values produced only enough correlation to classify it as having a moderately
positive relationship. The usability, aesthetics, and overall satisfaction in HTMLify
have all returned a strong positive relationship.
On average, the Pearson’s R value of all elements presented returned 0.85,
which classifies it the relationship between the two variables as having a strong
positive relationship.
In regard to this, with the researchers indeed finding a relationship in the
comparative interests of the grade 11 and 12 ITMAWE students, the null hypothesis
is rejected.
65
Senior High School
CHAPTER 5
SUMMARY, CONCLUSIONS, AND RECOMMENDATIONS
This chapter presents the summary, conclusions, and recommendations of
this study. The summary and conclusions show the verdict of the data gathered in
the 4th chapter of this study. The conclusion contains the general idea of what can
be drawn based on said data.
Summary and Conclusion
With the 1st chapter’s statement of the problem serving as the reason for
acquiring the data presented in the 4th chapter, the following statements summarizes
the findings presented in the latter chapter.
1.) Demographic profile of the respondents as to:
• Age
Table 1.1 shows that the majority of the respondents are within the age
bracket of 16 – 17, comprising 76.59% of the total population in terms of age. The
least number of respondents are found in the age bracket of 20 and above,
comprising only .70% of the population.
High school student’s expected age range is at least 14 for freshmen and 18
for seniors. The age range of 16 – 17 indicates that most of the students are in their
junior to senior year of high school.

66
Senior High School
• Sex
The data shown in table 1.2 projects that the majority of the respondents are
male, comprising 73% of the population, with females filling in the remaining 27%.
The surveyed campus, STI College – Global City, has more males enrolled
in the ICT, or ITMAWE strand, than females.
• Section
The data from table 1.3 shows that a huge chunk of the respondents, in terms
of section, are from ITMAWE 101 and 102, both comprising 17.73% of the total
population size. On the other hand, ITMAWE 304 comprises only 4.26% of the
population size.
It can be expected that there are more students per section in grade 11
compared to grade 12 students. Though it should be noted that the grade 12 has
more sections than Grade 11.
• Grade Level
Table 1.4 shows that there are more grade 12 students than there are grade
11 students, with the former comprising 51.04% of the total population compared to
the latter’s 48.94%.
This is due to the fact that grade 12 has one more section than grade 11, thus
students in the higher enjoy more students uniformly distributed throughout each
section when compared to the lower levels.

67
Senior High School
2.) The satisfactory rate of grade 11 and 12 ITMAWE students in using HTMLify in
terms of:
• Content
Table 2.1.1 shows that the grade 11 students produced a weighted mean of
3.51, indicating that they are very satisfied with HTMLify’s content. Table 2.1.2 also
shows similar results, with grade 12 students projecting a greater weighted mean of
3.77, which also indicates that they are also very satisfied.
Both grade levels are very satisfied with HTMLify’s content, showing
consistency in presenting the story and information without much errors.
• Usability
Table 2.2.1 and 2.2.2 shows different results regarding the grade 11 and 12’s
satisfaction rates, respectively. The grade 11 student’s weighted mean was
measured to be at 3.44, which interprets to them being satisfied. grade 12 students,
on the other hand, produced a weighted mean of 3.79, which shows that they are
very satisfied.
HTMLify’s usability appeals better towards students of higher-grade level. It
can be proposed that HTMLify’s interface be further simplified and better designed
in order to appeal towards those in lower-grade levels.

68
Senior High School
• Aesthetics
Table 2.3.1 and 2.3.2 follow the same trend, with grade 11 students projected
as being lesser satisfied than grade 12 students. The grade 11 students’ average
weighted mean of 3.48 indicates that they were satisfied with HTMLify’s aesthetics,
while the grade 12 students’ weighted mean of 3.83 points to them as being very
satisfied.
HTMLify should also be further developed so that it’s aesthetics could be
found more appealing by grade 11 students. This means improving the interface
design and visual elements, all necessary components in capturing the respondent’s
interest.
3.) The significant relationship between the satisfactory rate of HTMLify as an
interactive HTML website in terms of grade level.
After computing the weighted mean of each satisfactory rate per grade level,
the resulting values were treated with the Pearson R formula. This produced a
resulting value of .89, which shows that there is a very strong positive correlation
between the satisfactory rate of grade 11 and 12 ITMAWE students, thus leading
the researchers to reject the null hypothesis.
From the statement above, the researchers can conclude that there is a
strong correlation between the satisfactory rate of grade 11 and 12 ITMAWE
students in using HTMLify.

69
Senior High School
Recommendation
Following the outcome of the research, this study can be recommended, with
those found on the significance of the study, based on the elements presented under
the statement of the problem all found in the 1st chapter of this study.
1.) IT Students
With the grade 11 and 12 ITMAWE students having been the core subjects
of this study and them being the primary respondents, it is only appropriate that the
output of this study be recommended to them, especially after the results concluded
with them being satisfied with it.
• Content
HTMLify’s content left both grade 11 and 12 students very satisfied with how
the information is presented and its content is perceived as reliable and easy to
understand.
However, the grade 11 were only satisfied with how information appeared to
be factual whilst being free of grammatical errors and the usefulness of the website’s
information. It is suggested that HTMLify be proofread further and that the
information contained within be adjusted to be more appropriate towards the subject
to which HTMLify tackles.

70
Senior High School
• Usability
HTMLify’s usability aspect left the grade 12 very satisfied in all aspects in
regard to the website’s comfort, ease of use, consistency, ease of navigation;
meaning that the use of any written manual could be deemed unnecessary. Grade
11 students, however, were only satisfied with HTMLify’s usability.
Improving HTMLify’s general ease of use and navigation to be more friendly
towards the lower grade levels could see the overall perception of its usability aspect
to be more positive.
• Aesthetics
HTMLify’s aesthetics managed to appease the grade 12’s satisfaction, with
the data showing that they are very satisfied with the website’s interface and overall
visual elements. They are also very satisfied with how HTMLify’s design was able to
capture their interest and was almost never found to be overwhelming and
confusing. It had always retained a consistent position of its messages on-screen
during the play-testing sessions.
The grade 11 students, however, were only satisfied with HTMLify’s interface.
This may indicate that they may have perceived the interface as less interesting or
confusing.
Working on a more simple, streamlined, and minimal interface could help
further satisfy the grade 11 student’s perception of the overall aesthetics of the
website.
71
Senior High School
2.) IT Teachers
With the game satisfying IT students, it could be said that IT teachers may
also benefit with the content HTMLify presents.
• Content
It is expected that teachers be found satisfied with the game as its content
presents various topics useful towards improving one’s skills in the HTML
programming language.
• Usability
The researchers also expect that the teachers be satisfied with how
comfortable it is to use HTMLify’s throughout their play sessions – giving emphasis
on its feasibility in regard to its ease of use and navigation without any written
instructions.
• Aesthetics
Finally, it is expected that the teachers be satisfied with HTMLify’s user
interface, and that the arrangement of visual elements applied throughout the
website be perceived as consistent, and not too confusing/overwhelming.
It is further hoped that HTMLify captivates the teacher’s interest the same
way that it did towards its grade 11 and 12 respondents.

72
Senior High School
3.) Future Researchers
Future researchers who aim to conduct a study involving a similar output and
structure with HTMLify could potentially find this study useful as some form of
reference, basis, or as a related literature to their own research.
The researchers may also find the correlative data pertaining to the content,
usability, and aesthetics aspect of this website useful to consider when determining
which give weight to a website’s overall satisfaction.
• Content
In terms of content, the researchers may probe into the data with how
grammatically correct/factual information may bear weight towards satisfaction,
alongside the usefulness of information and the reliability of the presented within the
website, as well as how easy it is to be understood.
• Usability
With usability, researchers may conduct studies with how a website’s ease of
use and navigation, and consistent text positioning, play a role in a website’s
perceived satisfaction in regard to comfort without the use of any written instruction.
• Aesthetics
Finally, in regards to aesthetics, researchers may see and use our study as
basis on what can be perceived as attractive with HTMLify – its interface, visual
elements, and the consistent positioning of messages leading to a non-

73
Senior High School
confusing/overwhelming orchestra of elements – which all trickles down to how the
website may satisfy the subjects.
4.) School
As this study took place in a school setting, this study could be of use towards
not only students of higher-grade levels, but potentially towards those who aspire to
become an IT student in the future.
• Content
As HTMLify’s content satisfied its respondents, it is expected that the output
of this study will transition well into other grade levels.
• Usability
As per usability’s state, it is also expected that other grade levels be able to
adapt with HTMLify as it has been shown to be comfortable by higher grade levels,
as well as being easy to use and navigate without the aid of any written instructions.
• Aesthetics
In regards to aesthetics, students of other grade levels are anticipated to
similarly perceive HTMLify as its own respondents did, as the website managed to
prove that it has an attractive interface, a consistent positioning of text and visual
elements which manage to grasp the respondent’s interest without impacting the
website’s usability as to confuse or overwhelm the respondents.

74
Senior High School
5.) Web Developers
The data presented within this study could be useful towards web developers
with intentions to create a website similar to HTMLify.
• Content
As the output of this study suggests potential improvement in the area of
giving off factual and useful information without grammatical fallacy, web developers
may take into consideration these elements as to improve their own product in terms
of content.
• Usability
HTMLify also saw room for improvement in building a comfortable website.
Web developers also need to consider the website’s comfort, ease of use and
navigation, and the degree of how it can be used without any further written
instructions as these are the aspects where HTMLify fell short of.
• Aesthetics
In terms of aesthetics, web developers must keep in mind to design an
interface which does not overwhelm or confuse their users whilst managing to
capture their interest. The interface and its perception of the written text of the story
is where HTMLify managed to satisfy but a few of its respondents.

75
Senior High School
REFERENCES
Abante, M. R., Almendral, B. C., Manansala, J.-r. E., & Mañibo, J. (2014). Learning
Styles and Factors Affecting the Learning of General Engineering Students.
International Journal of Academic Research in Progressive Education and
Development, 16-27.
Akoglu, H. (2018). User's guide to correlation coefficients. Turkish Journal of
Emergency Medicine, 91-93.
Akrimi, Y., & Khemakhem, P. (2014). An Analysis of Perceived Usability,
Perceived Interactivity and Website Personality and their effects on
Consumer Satisfaction. International Journal of Management Excellence,
227-236.
Amalo, E. A., Murdaningtyas, C. D., & Agusalim, I. D. (2017). Developing Visual
Novel Game with Speech-Recognition Interactivity To Enhance Students’
Mastery On English Expressions. Jurnal Sosial Humaniora.
Ambalina, L. (2019, April 10). Japanese Visual Novels: What They Are, Plus 5
Reading Recommendations. Retrieved from GaijinPot Blog:
https://blog.gaijinpot.com/japanese-visual-novels-what-they-are-and-5-
recommendations/
Andalucía, F. d. (2009). El cómic como recurso didáctico en la educación primaria.
Temas para la educación.
Babbie, E. R. (2010). Empirical Political Analysis: Quantitative and Qualitative
Research Methods. The Practice of Social Research.
Balatucan, R. B., Factura, V. B., Javeluna, M. C., & Manuel, A. G. (2015). Web-
based Alumni Management Portal for St. Paul College of Makati.
Bashova, K., & Pachovski, V. (2013). Visual novel.
Bhat, A. (2018). WHAT IS RESEARCH – DEFINITION, METHODS, TYPES &
EXAMPLES. Retrieved from Question Pro.
Cavallaro, D. (2010). Anime and the Visual Novel: Narrative Structure, Design and
Play at the Crossroads of Animation and Computer Games. North Carolina:
McFarland & Company, Inc., Publishers.
Cherry, K. (2019, July 25). How Correlational Studies Are Used in Psychology.
Retrieved from Verywell Mind: https://www.verywellmind.com/correlational-
research-2795774
76
Senior High School
Corritore, C. L., Kracher, B., & Wiedenbeck, S. (2003). On-line trust: concepts,
evolving themes, a model. International Journal of Human-Computer
Studies, 737-758.
Crossman, A. (2019, July 3). Understanding Purposive Sampling. Retrieved from
ThoughtCo.: https://www.thoughtco.com/purposive-sampling-3026727
Detablan, M., Ferolino, M. A., Villeta, J., Abiera, J., & Yasis, J. (2013). “Mixed Up
E-Games”.
Duque, K. S. (2017, June 12). Visual Learning and Visual Aids. Retrieved from
Press Reader:
https://www.pressreader.com/search?query=Khristina%20duque&language
s=en&groupBy=Language&hideSimilar=0&type=1&state=1&fbclid=IwAR3n8
SonINI02N3iMHsfqv7eyO7wDYFLoDu-8KUymOtvV_41Sz_tk0dz7hQ
Ellen, S. (2018, May 29). Slovin's Formula Sampling Techniques. Retrieved from
Sciencing: https://sciencing.com/slovins-formula-sampling-techniques-
5475547.html
Evangelista, R. B., Gestopa, P. L., & Manundan, C. C. (2012). Computer Aided
Instruction for Kinder I in Filipino Subject for Pasig Christian Academy.
Flores, J., Masangcay, R. M., Mendoza, M. P., Garcia, O. B., Aguado, C. L., &
Laguador, J. M. (2015). Attitude on School Facilities and Services of High
and Low Performing Marine Engineering Students. Asian Journal of Social
Sciences, Arts and Humanities, 1-8.
Gano, L. R. (2009). The University of the East Student Portal: A Usability
Assessment. Philippine E-Journals.
Garett, R., Chiu, J., Zhang, L., & Young, S. D. (2016). A Literature Review:
Website Design and User Engagement. Online Journal of Communication
and Media Technologies, 1-14.
Geest, D. v. (2015). The role of Visual Novels as a Narrative Medium.
Hung, H.-C., Young, S. S.-C., & Lin, C.-P. (2015). No Student Left Behind: A
Collaborative and Competitive Game-Based Learning Environment to
Reduce the Achievement Gap of EFL Students in Taiwan. Technology,
Pedagogy and Education, 35 - 49.
Kerlinger, F. N. (1986). Foundations of Behavioral Research. New York: Holt,
Rinehart and Winston.
77
Senior High School
Kernot, J., Olds, T., Lewis, L. K., & Maher, C. (2014). Usability Testing and Piloting
of the Mums Step It Up Program - A Team-Based Social Networking
Physical Activity Intervention for Women with Young Children. Public Library
of Science One Journal.
Kincl, T., & Strach, P. (2012). Measuring website quality: Asymmetric effect of user
satisfaction. Behaviour and Information Technology, 647-657.
Kumar, R. (2011). Research Methodology: a step-by-step guide for beginners.
SAGE Publications Inc.
Lee, Y.-J., & Lin, C.-J. (2014). Evaluation and Satisfaction Survey on the Interface
Usability of Online Publishing Software. Mathematical Problems in
Engineering, 1-10.
Liu, W., & Su, J. (2018). Online digital library sampling based on query related
graph. The Electronic Library, 1082 - 1098.
Logarta, M. (2014, June 11). The gamification of education: Why playing is the
future of learning. Retrieved from GMA News Online:
https://www.gmanetwork.com/news/scitech/technology/365281/the-
gamification-of-education-why-playing-is-the-future-of-
learning/story/?fbclid=IwAR1ap7W7WmRAq7vBGRv3_xnaovWE6JKmpELE
sA-HR8MxMTCuwBJBcBl8aQ4
Logarta, M. (2017, August 10). Pinoy-made horror visual novel ‘The Letter’ earns
stellar ratings on Steam. Retrieved from GMA News Online:
https://www.gmanetwork.com/news/scitech/technology/621300/pinoy-made-
horror-visual-novel-the-letter-earns-stellar-ratings-on-steam/story/
Lu, B. (2014). Hikikomori: The Need to Belong and the Activation of Narrative
Collective-Assimilation through Visual Novels. Journal of Interpersonal
Relations, Intergroup Relations and Identity, 50-61.
Magulod Jr., G. (2019). Learning styles, study habits and academic performance of
Filipino University students in applied science courses: Impications for
instruction. Journal of Technology and Science Education.
Mai, K. (2014, March 12). Rockmandash's Beginner's Guide To Visual Novels.
Retrieved from Rockmandash Reviews:
https://rockmandash12.kinja.com/the-beginners-guide-to-visual-novels-
1541975662
78
Senior High School
Miller Jr., D. P., Weaver, K. E., Case, L., Babcock, D., Lawler, D., Denizard-
Thompson, N., . . . Spangler, J. G. (2017). Usability of a Novel Mobile
Health iPad App by Vulnerable Populations. Journal of Medical Internet
Research.
Morrison, L. (2017, April 14). The Research Behind Graphic Novels and Young
Learners. Retrieved from Northwestern:
https://www.ctd.northwestern.edu/blog/research-behind-graphic-novels-and-
young-learners
Nitsch, M., Dimopoulos, C. N., Flaschberger, E., Saffran, K., Kruger, J. F., Garlock,
L., . . . Jones, M. (2016). A Guided Online and Mobile Self-Help Program for
Individuals With Eating Disorders: An Iterative Engagement and Usability
Study. Journal of Medical Internet Research.
Palma, A. S. (2016, September 19). Characteristics of Effective Visual Aids.
Retrieved from Press Reader:
https://www.pressreader.com/philippines/sunstar-
pampanga/20160919/281659664509164
Phelps, J. (2018, March 15). The Benefits of Learning HTML. Retrieved from TL
Winset Coding: https://www.tlwinset.com/the-benefits-of-learning-html/
Placia, K. C., Reposon, D. L., Reslin, J. V., & Santos, M. F. (2012). Web-based
Computer Aided Instruction Ibong Adarna - Grade VII for Pateros National
High School.
Pratama, D., Wardani, W. W., & Akbar, T. (2017). Designing Visual Character of
Raden Wijaya as Historical Figure in Visual Novel. International Journal of
Scientific & Technology Research, 207-210.
Sanford, K., Starr, L. J., Merkel, L., & Kurki, S. B. (2015). Serious games: video
games for good? E-Learning and Digital Media, 90 - 106.
Schwalbe, K. (2015). Information Technology Project Management. Boston:
Schwalbe Publishing.
Sindhuja, P. N., & Dastidar, S. G. (2009). Impact of the Factors Influencing
Website Usability on User Satisfaction.
Stenliden, L. (2014). Visual Storytelling Interacting in School - Learning Conditions
in the Social Science Classroom.
Stinson, J., McGrath, P., Hodnett, E., Feldman, B., Duffy, C., Huber, A., . . . White,
M. (2010). Usability Testing of an Online Self-management Program for
79
Senior High School
Adolescents With Juvenile Idiopathic Arthritis. Journal of Medical Internet
Research.
Thielsch, M., & Moshagen, M. (2015). VisAWI Manual (Visual Aesthetics of
Websites Inventory) and the short form VisAWI-S (Short Visual Aesthetics
of Websites Inventory).
Thowfeek, M. H., & Salam, M. A. (2014). Students’ Assessment on the Usability of
E-learning Websites. Procedia - Social and Behavioral Sciences, 916-922.
Wang, Y., Hernandez, M. D., & Minor, M. S. (2010). Web aesthetics effects on
perceived online service quality ad satisfaction in an e-tail environment: The
moderating role of purchase task. Journal of Business Research, 935-942.
APPENDICES
Appendix A
Letter for Validation
STI College - Global City
University Parkway Drive
Taguig City, Metro Manila
Dear Teachers,
Good day!
We, the ITMAWE 301 students of STI College – Global City, would like to ask
for your permission to conduct our survey to your students for our study entitled “A
Correlational Study of the Satisfactory Rate in Using HTMLify as Perceived by
Selected Grade 11 and 12 Information Technology Mobile Application And
Web Development Students of STI College Global City for A.Y. 2019 – 2020”
as a partial fulfillment of our requirements for Practical Research 2 and Inquiries,
Investigations and Immersion. This survey will take 15 minutes of your time.
We are hoping that you would allow us to come in and let your students take
our survey.
Thank you very much!
Respectfully yours,
The Research Team
Noted by:
Research Adviser
Appendix B
Letter for Respondents
STI College - Global City
University Parkway Drive
Taguig City, Metro Manila
Dear Respondents,
Greetings! Attached herewith is a questionnaire to gather data and/or

information for our study entitled “A Correlational Study of the Satisfactory Rate
in Using HTMLify as Perceived by Selected Grade 11 and 12 Information
Technology Mobile Application And Web Development Students of STI
College Global City for A.Y. 2019 – 2020” as a partial fulfillment of our
requirements for Practical Research 2 and Inquiries, Investigations and Immersion.
In connection to this, may we solicit your kind indulgence and consideration

by answering every question included in the questionnaire. Rest assured that all
information you will provide will be treated with utmost confidentiality.
Thank you very much!
Respectfully yours,
The Research Team
Noted by:
Research Adviser
Appendix C
Survey Questionnaire
Survey Questionnaire
Name(Optional):______________________________________________ Date:___________________
Age: ____________ Sex:________________ Grade:________________ Section:_________________
Directions. Put check on the appropriate box that corresponds to your answer (1 –
Strongly Disagree, 2 – Disagree, 3 – Agree, 4 – Strongly Agree).
A. Content
1 2 3 4
1. The information appears factual and free of inaccuracies
or grammar errors.
2. The information on the website is clearly presented.
3. The content of the website is reliable.
4. The information presented by the website is useful.

5. The information provided by the website is easy to
understand.
B. Usability
1 2 3 4
1. I feel comfortable in using the website.
2. I find the website easy to use.

3. The fonts are appropriate in size, color and style. The
user can easily locate and read the text.
4. I find the website easy to navigate.
5. The website can be used without any written
instructions.
C. Aesthetics
1 2 3 4
1. The website has an attractive interface.
2. The visual elements (text, image, font, etc.) are applied
consistently throughout the website.
3. The design of the website is not overwhelming or
confusing.
4. The website’s user interface captures my interest
5. The position of messages on the screen is consistent.

Appendix D
Curriculum Vitae
Ysabelle Dannielle Ablen
18, Lot 1, Phase 3, Chavez St.,
Central Bicutan, Taguig City
09284163357
ysabelledannielleablen@yahoo.com
Personal Information
Birthday: May 5, 2002
Birthplace: Pasay City, Metro Manila
Age: 17 years old
Nationality: Filipino
Religion: Baptist
Civil Status: Single
Education
Elementary: Good Shepherd of Taguig Colleges, Inc.
Taguig City SY: 2013 – 2014
Junior High School: Dr. Arcadio Santos National High School

Senior High School: STI College - Global City

SY: 2019 – 2020
Taguig City
Kurt Paul Mendoza Arroyo
168 Bato St. Western Bicutan,
Taguig City
09568471850
kurtarroyo6@gmail.com
Birthday: September 6, 2001
Birthplace: Taguig City, Metro Manila
Age: 18 years old
Religion: Members Church of God International
Education
Elementary: Christian Light Academy
Junior High School: Signal Village National High School


SY: 2019 – 2020
Taguig City
Cloyd George Caseres Cabreros Jr.
296 Sampaloc St., Cembo,
Makati City
09283989316
cloyd329@gmail.com
Birthday: March 5, 2002
Birthplace: Makati City, Metro Manila
Age: 18 years old
Religion: Roman Catholic
Education
Elementary: Cembo Elementary School
Makati City SY: 2013 – 2014
Junior High School: Fort Bonifacio High School


SY: 2019 – 2020
Taguig City
Louie Mar Pastor Mequequeni
#89 3rd Street Barangay Katuparan,
Taguig City
09361887850
lm.louiemar@gmail.com
Birthday: March 4, 2002
Birthplace: Bayombong, Nueva Vizcaya
Age: 18 years old
Education
Elementary: SBP Child Learning Advancement School, Inc.
Junior High School: Fort Bonifacio Elementary School


SY: 2019 – 2020
Taguig City
Valjoemari De Luna Miguel
23 P. Conducto St. Caniogan,
Pasig City
09453662639
miguelvaljomari@gmail.com
Birthday: December 24, 2001
Birthplace: Pasig City, Metro Manila
Age: 18 years old
Education
Elementary: Arellano University Elementary
Pasig City SY: 2013 – 2014
Junior High School: Arellano University High School

Pasig City SY: 2017 – 2018

SY: 2019 – 2020
Taguig City
Sherei Dane Algura Ishiguro
#48 P. Lucas St. Napindan,
Taguig City
09453117667
sherei.ishiguro0712@gmail.com
Birthday: July 12, 2000
Birthplace: Pasig City, Metro Manila
Age: 19 years old
Education
Elementary: Colegio de San Juan de Letran
Manila City SY: 2012 – 2013
Junior High School: Colegio de Santa Ana


SY: 2019 – 2020
Taguig City
Masi John Tacurian Moratillo
77-29th Avenue, East Rembo,
Makati City
09453662639
miguelvaljomari@gmail.com
Birthday: November 10, 2001
Age: 18 years old
Education
Elementary: Comembo Elementary School
Junior High School: Benigno Ninoy S. Aquino High School


SY: 2019 – 2020
Taguig City
Melchor Ruta Paisano
Bula St. Corner Iriga, Western Bicutan,
Taguig City
09357310261
melchorpaisano9@gmail.com
Birthday: January 31, 2000
Age: 19 years old
Education
Elementary: Tenement Elementary School
Junior High School: Western Bicutan National High School


SY: 2019 – 2020
Taguig City
Justin Seth Estrada Salvador
Unit 252 Tenement Building, J. Posadas
Street, Manila City
09673006938
justinsethsalvador@gmail.com
Birthday: September 22, 2001
Birthplace: Riyadh, Kingdom of Saudi Arabia
Age: 18 years old
Religion: N/A
Education
Elementary: Metropolitan International Christian Academy
Junior High School: Metropolitan International Christian Academy


SY: 2019 – 2020
Taguig City

Untitled

Uploaded by

Copyright:

Available Formats

You might also like

Untitled

Uploaded by

Document Information

Original Description:

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

Untitled

Uploaded by

Copyright:

Available Formats

STI College Global City

A Correlational Study of the Satisfactory Rate in Using HTMLIFY as

In Partial Fulfillment of the Requirements for the Subject

Ablen, Ysabelle Dannielle

Ms. Stephanie B. Tabifranca, LPT

This research entitled “A Correlational Study of the Satisfactory Rate in

MS. STEPHANIE B. TABIFRANCA, LPT

Approved in partial fulfillment of the requirements for Inquiries, Investigations

MS. STEPHANIE B. TABIFRANCA, LPT

MR. MARK FREDERICK V. SALONGA MR. BENJIE D. GAYONDATO

MR. CARLO P. CORTEZ ENGR. RENIA R. MATIRA

Frederick V. Salonga, our Computer Programming teacher, who served as the

shining beacon on giving feedback; suggesting improvements and going as far as

resources in helping us further our own research paper whilst reminding us of

keeping our own health, physical and mental, in check.

acquire the data for our research paper.

The Researcher Team

Students aspiring to become programmers with the intention of starting their

course of Information and Communications Technology (ICT) under the Technical –

Vocational Livelihood (TVL) Track.

HTMLify is a visual-novel game which introduces the HTML platform to

during the game’s play-testing sessions. HTMLify must prove successful in

the fundamentals of user satisfaction. (Thielsch & Moshagen, 2015)

This study presents the quantitative method on the acquisition of the

assure that the data gathered is not biased.

The study aims to determine whether HTMLify is a feasible product to cater

enhance a student’s HTML programming skills. It could be a potential product to

use of HTMLify, as well as continuing its own development.

APPROVAL SHEET ........................................................................................................ ii

ACKNOWLEDGMENT .................................................................................................... iii

LIST OF TABLES ........................................................................................................... ix

CHAPTER 1: THE PROBLEM AND ITS BACKGROUND ............................................... 1

Background of the Study .............................................................................................. 3

Statement of the Problem ............................................................................................. 7

Significance of the Study .............................................................................................. 8

Conceptual Framework ................................................................................................ 9

Scope and Delimitation............................................................................................... 12

Definition of Terms ..................................................................................................... 13

CHAPTER 2: REVIEW OF RELATED LITERATURES.................................................. 14

Foreign Literatures and Studies .................................................................................. 14

Local Literatures and Studies ..................................................................................... 25

CHAPTER 3: RESEARCH METHODOLOGY ................................................................ 32

Research Method ....................................................................................................... 32

Research Design ........................................................................................................ 33

Population of the Study .............................................................................................. 34

Research Locale ........................................................................................................ 34

Sampling Technique ................................................................................................... 34

Research Instrument .................................................................................................. 39

Validation of Instrument .............................................................................................. 40

Data Gathering Procedures ........................................................................................ 40

Statistical Treatment of Data ...................................................................................... 42

CHAPTER 4: PRESENTATION, ANALYSIS AND INTERPRETATION OF DATA ....... 46

CHAPTER 5: SUMMARY, CONCLUSIONS, AND RECOMMENDATIONS ...……….…65

Appendix B: Letter for Respondents

Appendix C: Survey Questionnaire

Appendix D: Curriculum Vitae

FIGURE 2: FACTORS AFFECTING USER SATISFACTION ........................................ 11

TABLE 1.2: DEMOGRAPHIC PROFILE OF THE RESPONDENTS AS TO SEX .......... 47