Developing an Interactive HTML5-Based Game for Tenses Learning for Senior High School Students

This research study aims at developing an interactive HTML5-based game to facilitate senior high school students in learning tenses. This research is a research and development study. The development of the game is carried out through several steps, which are needs analysis, outline of materials design, product development, expert judgement, product revision, and final product development. The result of this study is a web-based game titled The Time Traveller. Based on the results of expert judgement, the game is appropriate for senior high school students based on the mean scores of 3.52, which is in the range of 3.25 ≤ x ≤ 4 and falls into the category of “Very Good.”


Introduction
The introduction of communicative language teaching in the Curriculum 2013 is a giant leap forward in the field of English Language Teaching (ELT) in Indonesia. The intention is clear, that is to bring back the nature of language usage as a mean of communication rather than teaching the linguistic aspects of the language. As the main notion of communicative language teaching is teaching the contextual use of language, grammar is taught implicitly within the context of communication instead of being taught explicitly for all communicative purposes. The learners are supposed to comprehend grammar from texts without being highlighted from time to time.
The expectation from the curriculum of what teachers are supposed to do and what teachers are accustomed to do in teaching grammar, especially tenses, creates a gap. The gap will eventually get larger and will disrupt the run of core and basic competencies in an academic year if it is not handled correctly.
One of the familiar words that can be closely related to supplementary materials is task. Task is one of the effective ways to serve supplementary materials. Nunan (2005) outlines what tasks development are supposed to be based on: tasks have a primary focus on meaning, learners are not given other people's meanings to regurgitate, tasks have an outcome other than the manipulation and practice of language forms, and generate language use that has some resemblance to real-world language.
Games as supplementary grammar materials can promote the various learning ways and employ the availability of facilities in schools. It will also help the teacher provide a wider variety in the classroom activities and even promote independent learning outside the classroom. Games embody well-established principles and models of learning. For instance, games are effective partly because the learning takes place within a meaningful context (Van Eck, 2006). A computer game is also fun and it will increase the students' interest and engagement with a fun classroom atmosphere (Reynolds & Caperton, 2011). Furthermore, games as media to learn tenses will fit right in the gap between the curriculum expectation, teacher's habituated grammar teaching, and the available school facilities.
Besides having positive connotation, computer games are compatible as an open-sourced content of education 4.0 in which education has to suit the fast-changing technology and information. It will also be suitable for digital-generated students with the accessible information through the internet. The choice of using Construct 2 as the development software and HTML5 as the web platform is also based on multiple considerations including compatibility with all computers and the fact that it does not need to be installed, among others. HTML5-based game is also compatible to web, which means it can be played in a website so everyone who has a personal computer with internet connection can directly access it.
The objective of this study is to develop the appropriate learning media in the form of a webbased game to facilitate senior high school students in learning tenses. The study is expected to give contribution to the English teacher as one of example in developing English learning materials in order to improve the quality of teaching and learning. For the students, it provides the learning sources in novel and challenging way.
Developing an Interactive HTML5-Based Game for Tenses Learning for Senior High School Students Faza Hannan Purinanda Page | 63

Method
This research was classified as Research and Development (R & D) study aimed at developing a new product. As noted by Gall et al. (2007), R & D study is a research process used to develop and validate educational products. To effectively develop the interactive grammar learning media in the form of HTML5-based game, a planning and good step of materials and program development were considered crucial. The researcher developed the game by adapting the model of media development proposed by Lee and Owens (2004). The development requires five steps: Needs assessment and analysis, design, development, implementation, and evaluation.
The subject of this research was high school students Grades X, XI, and XII from SMA Negeri 1 Galur and Grades X, XI from SMA Negeri 2 Wates. All 3 grades of high school were chosen as subject to represent the universality of the game as the grades have similar language features but in a wide range of themes and contents.
The data was collected from interviews and questionnaires. The students were given the questionnaires for the need analysis, and English teachers from each high school who were interviewed to gain information related to the data needed to develop the product of the research. There are two types of data that were collected in this research including quantitative data and qualitative data. Quantitative data was the main data in the research that represented students' needs, lacks, and wants that were the foundation of the development. The statistics of quantitative data was then analyzed by numbers and percentages. Qualitative data was the data about the process of learning media development in the form of aspiration, criticisms, and suggestions from students, teachers, material experts and media experts. The data represented the quality of the developed game.

The Description of the Target Needs
The analysis of target needs was viewed at three aspects, namely necessities, lacks, and wants. Based on the results of needs analysis, the students mainly needed to be able to write properly and comprehend text, with 53.6% respondents said so. In relation to the students' lack, they considered that their familiarity and understanding of English grammar, especially tenses, is low, with 43.8% stated their unfamiliarity with tenses.

The Description of the Target Needs
What the students required to do or to learn can be considered as the learning needs. In terms of the input, the students showed a great interest in the idea that a computer game need to be played as a classroom learning activity, with 77.6% of respondents showed positive responses.
In terms of the preferred ideas regarding the game, learning via game over the internet attracts the majority of respondents (51.8%). Also, the game needs to have a storyline or plot instead of random tasks (64.3) and a system of providing points as rewards and feedbacks when they make mistakes (83.1%).

Outline of Materials
After conducting the needs analysis, the outline of materials was developed. It was developed based on the results of the needs analysis and core and basic competencies of Curriculum 2013. Because the game divides tenses in three maps (present, past, future) and each map is divided into four tenses (simple, continuous, perfect, and perfect continuous), it is probable for several tenses to be unavailable in the materials based on the basic competencies.
In terms of learning input, the game has been completed with texts that are in line with basic competencies of Curriculum 2013, with additional materials when the particular tenses are not specifically found in the texts being used as required by basic competencies. For example, personal letter can be found in basic competencies of Grade XI and The Silvery Gate-medium level accommodates the particular text type. Meanwhile, future continuous tense is not specifically used in any text types in Grade XI, so Business Center-medium level accommodates the particular tense using movie scenes.

The Expert Judgement and the Evaluation of the first Draft
Before the product is finalized and used by the students, the first draft, which was divided into materials and multimedia aspects, was tested and evaluated by an expert to improve the quality of the product. The first draft of the game was evaluated by distributing the expert judgement questionnaires to an expert. The expert was a Ph.D. holder with 12 years of working experience in the field of English Language Teaching and is currently the Head of English Developing an Interactive HTML5-Based Game for Tenses Learning for Senior High School Students Faza Hannan Purinanda Education Department at Faculty of Languages and Arts, Yogyakarta State University. The results of the expert judgment were then analyzed and became the bases to revise the first draft. The mean value of the evaluation results from the overall expert judgement, consisting of content quality, materials quality, presentation quality, and programming quality is 3.52. This value is in the range of 3.25 ≤ x ≤ 4 which falls into the category of "Very Good".

Discussions of Final Product
The materials of the developed game were made and collected based on the results of the needs analysis. The materials were arranged in a way that can easily be accessed depending on the user's necessity of learning certain tenses. In terms of target needs, this part covered the students' goals, lacks, and wants in learning English. Students apparently wanted to be able to write properly and comprehend texts more than to be able to speak and comprehend conversations in English. It implies that the students believed that writing and reading are more likely to be used frequently compared to speaking and listening. Also, it is apparent that the proper grammar use in the written form is considered highly important for the students. One of the focuses in learning grammar is tenses. The use of tenses was still considered difficult by the students despite knowing the importance of tenses when writing or reading. To accommodate students recognizing different kind of tenses, there are three maps representing present, past, and future tense. In each map, there are four destinations which represent simple, continuous, perfect, and perfect continuous tense. Also, before playing, the user can open "Formula" first, in which each tense is briefly explained and given examples.
The students revealed that they tend to explore the internet using phones or computers to learn or to find out more about English compared to reading textbooks. This personal awareness of using internet for educational purposes led the game to be developed based on HTML5 web platform. This means the game can be accessed by everyone as long as they are on personal computer that have internet access. The game itself can be accessed by visiting bit.ly/thetimetraveller. There are differences in practical use between playing the game on web platform using personal computer and on android phones as an app. Phone apps need to be installed first and if not developed carefully, would tend to be overly big in terms of size in the phone storage. This would not sit well with phones with limited storage and memory. Meanwhile, HTML5-based game would not need to be installed first. Phone's small screen would also limit the materials to be developed as complete as they are necessary. In comparison, HTML-based game which is played in the computer and laptop, can be displayed externally using projector for the whole class to see and play. In terms of classroom usage, students with phones allowance in the middle of a lesson can easily misuse it to do anything else, while centralized game displayed by the teacher would be more appropriate, if not the whole class attend their own computer in the computer laboratory. Despite the stark differences of the two platforms on two devices, further development would be able to make the game accessed using android phones.
The main game elements were also designed to be simple, consistent, and contrast. The pop-ups with the similar function were in the same size, the buttons have an outline to differ them with the background colors, the colorway use light cream and dark red, are some examples of the consistent design that does not change despite many variations of color, fonts, and visual language in the gameplays.

Conclusions
The conclusions of this research, aiming to answer the research questions in the first chapter, were generated from the findings and discussions presented in Chapter IV. This research was conducted to find the following objectives: 1) the target and learning needs of high school students in learning tenses, and 2) the appropriate interactive HTML5-based game to be developed for learning tenses for high school Based on the results of the needs analysis, it is shown that most of the students' goal regarding grammar learning is that they wanted to be able to write properly and comprehend texts. In terms of grammar, the students were not familiar with what tenses are and how tenses are practically used despite them knowing the importance of tenses. Although they have difficulties in this area, they said that the exposure of grammar, especially tenses, in learning English was minimum and the teacher did not explain much about the use of tenses.
The game for tenses learning was developed based on the needs of the students of SMA N 1 Galur and SMA N 2 Wates, despite the game can be played by virtually everyone. The developed game as an interactive learning media was categorized as appropriate since it had fulfilled the following aspects: a. The game was developed based on the students' target and learning needs, core competencies, and basic competencies. b. The developed game emphasized on students' grammatical knowledge on tenses. c. The developed game included the instructions to play, the necessary explanation about tenses, and gameplays to test students' knowledge. d. The developed game provided different types of quiz with different complexity. e. The developed game provided topics related to students' daily life such as job application letter, movie scenes, and worldwide news. f. The developed game provided learning inputs including various texts with different topics, relevant pictures, and necessary illustration. g. The developed game was designed for web platform that can be accessed using personal computer easily. h. The developed game was designed with various illustration in each gameplay. i. The developed game was equipped with background music and sound effects. j. The developed game can be fully played without programming and navigational errors.
Developing an Interactive HTML5-Based Game for Tenses Learning for Senior High School Students Faza Hannan Purinanda

Suggestions
English teachers are suggested that they should utilize alternative learning resources in class activities. For example, they can implement the available interactive multimedia among other resources like the product that came as the result of this research in the classroom learning process with modified steps that befit both the teacher and the students. The students are expected to be able to play this game autonomously or with a guidance from their teacher as a classroom learning activity. They can also play and explore the world of tenses after which can be discussed together with their friends. The game is intended to help them to learn.