Sebuah Kajian Pustaka: IT Journal Research and Development (ITJRD) Vol.8, No.1, March 2023, E-ISSN : 2528-4053 | P-ISSN : 2528-4061 DOI : 10.25299/itjrd.2022.10068 254 Journal homepage: http://journal.uir.ac.id/index/php/ITJRD Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes Kurnia Rahman Agus1, Dadang Syarif Sihabuddin Sahid2, Syabdan Dalimunthe3 Departement of Computer Engineering, Politeknik Caltex Riau1,2,3 Kurnia20s2tk@mahasiswa.pcr.ac.id1, dangsyarif@gmail.com2, syabdan20s2tk@mahasiswa.pcr.ac.id Article Info ABSTRACT Article history: Received Jun 17, 2022 Revised Aug 16, 2022 Accepted Jan 3, 2023 The demands of the learning process during the current pandemic force teachers and students to carry out digital transformation in the learning process. Especially in the new normal where the learning process is done online. Thus, the learning media made by the teacher must also be adapted to online media so that the learning process can be maximized and increase the activeness of students in learning while online. This study aims to create an online learning media by applying the concept of gamification. The method used in this research is R&D (Research and Development) using analysis, design, and development development models. Stages of analysis are carried out to determine the needs of students when learning online. Then in the design stage, the selection of media formats and media design is carried out, and finally at the development stage, the advanced process of making games with programming languages is carried out as a learning medium. The use of gamification learning media is very practical, which can be accessed by students through their devices at home via the internet network. In the learning process, this game can be used to assist teachers in achieving learning objectives so that they can increase learning activity and the value of students in one basic competency. Keyword: Gamification Learning media Learning Process Analysis Design Development Programming Language © This work is licensed under a Creative Commons Attribution- ShareAlike 4.0 International License. Corresponding Author: Kurnia Rahman Agus Departement of Computer Engineering Politeknik Caltex Riau Jl. Umban Sari, Pekanbaru, Indonesia Email: kurnia20s2tk@mahasiswa.pcr.ac.id 1. INTRODUCTION Vocational High School (SMK) is one of the secondary vocational education in Indonesia that has various expertise programs. One of the vocational skills programs currently available is Computer Engineering and Informatics which oversees the competence of Computer Network Engineering and Software Engineering expertise. One of the Basic Skills Program subjects (C2) in Computer Engineering and Informatics is Basic Programming (Kemendikbud, 2017) [1]. Mastery of learning in basic programming lessons is mandatory because this lesson is the basis for students of level 10 software engineering competency skills to continue to levels 11 and 12. IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 255 The teaching and learning process is the main activity of the entire educational process in schools which aims to produce behavioral changes. These changes include the cognitive, affective and psychomotor domains. Learning activities require active learning, participation and interactive communication between teachers and students [2]. Success in the learning process can be seen from understanding the concept, mastery of the material and learning achievement. Students with a high level of conceptual understanding and mastery of the material, the higher the achievement. In addition, the determining factor for learning success is the accuracy of the application of learning methods and media. A teacher is required to understand learning methods, especially those related to learning models. learning outcomes and student learning activities are something that is common in the world of Indonesian education [3]. Most educators still use classical learning media such as books, presentation slides and videos, where students are passive recipients of knowledge, while educators are the givers of information and expect students to memorize and remember the information they provide [4]. This less interesting conventional learning makes students tend to be bored and do not understand what is conveyed by the educator [5]. Especially during a pandemic like today which requires the learning process to be done online. The use of interactive learning media is needed so that students' motivation in learning increases. Gamification is the application of gaming elements into activities that are not usually related to games [6]. Gamification can be applied for various purposes, such as improving customer service and satisfaction (Customer Loyalty), making the process of working in a team more enjoyable (Happines), and creating a better teaching and learning atmosphere (Engagement). The application of gamification in the learning process, especially in learning media, can be accessed by students both offline and online. There are several previous studies discussing interactive learning media that can be carried out online, such as what Surya Amami Pramuditya did in his research on Android-Based Educational Game Design on Mathematical Logic Materials. This study aims to create a valid and practical educational game as a medium for learning mathematics. However, in this study, there are weaknesses in the distribution of the application used, because to run the application it must be installed on an Android device with certain hardware specifications. This of course cannot be applied to students who have other types of cellphones or who do not have smartphones at all [7]. This research will produce web-based interactive learning media by applying the concept of gamification that can be accessed online using various platforms, such as smart phones and computers or laptops. The learning media will be tested on basic programming subjects with the basic competencies of looping and branching control structures. By using the gamification method in making learning media, students can carry out the learning process independently to complete each existing instruction so as to make students more active in the learning process, and it is also expected to improve student learning outcomes. 2. LITERATURE REVIEW Several previous studies related to previous interactive learning media include: a. Science Adventure Educational Game Development To Improve Students' Problem Solving Skills [8]. This research aims to determine the effectiveness of science adventure educational games as a medium for learning science on global warming material in training students' problem solving skills. This research uses development research. The science adventure game was developed by first analyzing the needs of students in integrated science learning on global warming material for class VII students and referring to research and development (R&D) methods. The science adventure game media development design uses a 4D development model consisting of (1) define, (2) design, (3) develop and (4) disseminate. b. Application of Interactive Multimedia Applications for Learning to Read Syllable Methods and Digital Media for Fairy Tale Characters [9] IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 256 This study aims to design an application using interactive multimedia, in the form of images, sounds, and animations that can be used as a teacher's tool in learning to read, write, and count for early childhood children. Method The development of multimedia application devices uses the Multimedia Development Life Cycle (MDLC) method which consists of 6 stages, namely Concept, Design, Material collection, Assembly, Testing, and Distribution. These six stages do not have to be sequential in practice, they can switch positions. Even so, the concept stage should be the first thing to do. Figure 1. Methodology MDLC c. Application of Gamification in Economics Learning in High School [10] This research aims to improve teachers' understanding and skills in utilizing mobile learning in learning activities carried out especially during the pandemic era. Student learning activities are expecting not only to be carried out through the Whatsapp group or Google Classroom, but can also doing by using other applications that can attract students' learning interest. 3. RESEARCH METHOD Gamification is a creative learning method that has a tremendous impact on increasing the level of independent learning and improving one's mathematical abilities. Furthermore, an expert system is needed to create content from the material presented [11]. Experimentally, the gamification strategy has been confirmed to be successful in increasing the enthusiasm of the assessment students used to survey client behavior and observations about the use of iLearning [12]. IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 257 Figure 2. Gamification concept According to Jusuf and colleagues, Gamification is a learning approach using elements in games or video games with the aim of motivating students in the learning process and maximizing feelings of enjoyment and engagement in the learning process [13]. In addition, this media can be used to capture things that interest students and inspire them to continue learning. Gamification, providing alternatives to make the learning process more interesting, fun, and effective [14] [15] [16]. Student motivation to take part in learning depends on the context of the learning material and learning model. Gamification is a powerful tool for providing training and education to companies or schools [17]. Gamification is an effective approach to make positive changes in students' behavior and attitudes towards learning, to increase motivation and engagement as stated by Kiryakova, et al. [18] [19]. 3.1 Gamification Design This process began with problem identification and problem-solving based on the gamification approach. In terms of problem identification, it had been figured out that most students in Information Technology could not apply the web design theories to real-life situations. A reason behind this phenomenon was the lack of innovative and easy-to-understand instructional media. Most instructional media were available in texts such as classroom materials and eBooks for computer language learning. Thus, game-based instructional media were proposed for solving this problem. The developed game for the Informational Technology students was available on the web base platform. The visual aids could support the students to learn quickly and comfortably. Above all, the students could immediately recognize their learning outcomes and productivity by checking the correct answers. They did not need to wait until the game under each topic would end. Figure 3 shows the method of this research created using the gamification base model. IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 258 Figure 3. The gamification-based model According to Fig. 3, the contents in the course syllabus of the Web Programming course consisted of weekly lessons on five topics, their descriptions, and expected learning outcomes. Each learning topic is divided into a different number of subtopics according to the learning objectives and outcomes. Each subtopic contains learning content and a post-study quiz. Furthermore, each learning topic has a test at the end of the lesson. Thus, the learning outcomes can be measured or assessed from the scores obtained by taking the corresponding test according to the learning content of each topic. In addition, the learners can be tracked their learning outcomes from the learning progression at any time. Therefore, these course contents, quizzes, and tests were used to develop the course materials. 3.2 Gamification Development This work applied the Rapid Application Development (RAD) approach to save cost and development time. Therefore, it is suitable to use in a small development team with the knowledge and ability to the project and quickly develop the work system. The RAD consists of four distinct phases: requirements planning, system design, development, and cutover [15], as shown in Figure. 4. Figure 4. RAD Process IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 259 3.3 The Application Evaluation At this stage the learning media is ready to be used in class X RPL SMK Labor fostered by FKIP UNRI Pekanbaru. The types of data obtained from this trial are quantitative data and qualitative data. Quantitative data in this study is media assessment from the results of questionnaires distributed to media experts, material experts, and class X students of the RPL Expertise Program from the Vocational School of Labor fostered by FKIP UNRI Pekanbaru. From the questionnaire, data will be obtained by calculating the answer scores. Qualitative data is data in the form of sentences, words, or pictures. In this study, qualitative data were obtained from responses by material experts, media experts, and respondents. The data are in the form of criticism, suggestions, and comments about the media. The questionnaire uses a 4 Likert scale technique, so that there are no doubtful answers from the test subjects. Based on the quantitative data, the level of validity and feasibility of the developed teaching materials will be known. In determining the results of feasibility/validity, it is done using the assessment criteria which can be seen in Table 1. Tabel 1. Criteria for assessing the feasibility of teaching materials No Persentage Indicator Desciption 1 76% - 100,00% Valid Decent and does not need to be revised 2 51% - 75,00% Quite Valid Fairly valid Fairly decent and needs minor revision 3 26% - 50,00% Not Valid Less valid Not feasible and needs partial revision 4 < 26% - Not Valid Invalid use and need a whole revision 4. RESULTS AND DISCUSSIONS The resulting learning media is in the form of a Web Application that contains learning content for basic programming subjects for class X with competency standards in accordance with the 2013 revised 2017 curriculum structure packaged with gamification. The learning materials taught are looping and branching control structures. In this learning media, students will do online programming. The system in real time will display the results of the script written by students. The following is the result of the learning media interface display. 4.1. Feature Application This page contains an introduction to learning media. In the header there are two menus, namely the register and enter menus. The list menu will take the user to the registration page, while the login menu will take the user to the login page which is used to authenticate to enter the learning media. In addition there is a start menu that is intended for users who are just starting out. IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 260 a) Homepage b) SignIn (c) Sign Up Figure 5. User Interface Application A. Sign In and SignUp Page The Sign In page is used to authenticate before entering the learning media. On the Sign In Form there are 2 inputs, namely email and password, besides that there are 2 buttons, namely the SIGN IN button which is used to authenticate and the SIGN UP button which will take the user to the registration page. If the email and password entered are correct, they will be redirected to the user dashboard page, if incorrect, a warning will appear that the email or password is incorrect. The Sign Up page is used to register if the user does not have an account yet. On the Sign Up page there are 3 inputs, namely name, email, and password that must be filled in. If the user has completed the form, then the next step is to press the SIGN UP button which is used to send registration data to the server and save it, if the registration process is successful, the page will be redirected to the Sign In page, if it fails, a warning will appear as if someone already uses the email. B. Dashboard page The Dashboard page (Figure 7) is the start page after the user authenticates. This page will display a summary of the user's progress. The data displayed is the total achievement, badges, and stars that have been collected by students. In addition, there is information on level and experience points (exp), the higher the exp value, the higher the level. Under the User Summary section there are My Course and Daily Target sections. My Course is a list of lessons that the user is currently taking. While the Daily Target is the daily target of exp that must be achieved to get the achievement. IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 261 a) Dashboard page (e) Achievement Page b) Course page (f) Leaderboard Page c) Stage Page Figure 6. Fiture System C. Achievements page On the achievement page there are 2 sections, namely achievements and badges. To get the achievement, the user must meet the requirements in the achievement. If successful, the stars will increase and new, more challenging conditions will appear to get the next star. Badges are earned if the user successfully completes 1 course. In the example above the user gets a "Recurring" badge which means the user has completed the "Looping" course. D. Course Page The Course List page displays all courses that can be taken by the user. In the picture above there are 3 courses, namely Looping, Branching, and Advanced Programming. Each user is free to choose the course to be run. In each course, there will be several stages that must be completed sequentially. IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 262 E. Leaderboard Pages This page will display a list of the Stages of the Course along with the highest Leaderboard score that the user has obtained on the Course. Stages must be completed sequentially, a stage with a lock icon is a stage that cannot be played because the previous stage has not been successfully completed. If the user has successfully completed the stage, a star icon will appear indicating the star the user has successfully obtained on that stage. In the leaderboard section, 10 usernames will appear who managed to get the highest accumulative score on the course. F. Stage Page The Stage page is a page where users will carry out the learning process by completing the missions on that page. Here the user is required to complete the mission with the shortest time and minimal errors to get a high score. On the Stage page there are 5 sections, namely the Status Bar, Guide, Interactive Coding, Output and Navigation sections. Each section has its own functionality to help students in the learning process. In the Status Bar there is information on life, score, and time. Lives will be reduced if the user makes an error during code check. If the life runs out then the user must repeat the stage. The score information will increase every time the user successfully completes the mission. Time information provides information about how long the user is in the process. The shorter the time, the better. The navigation section serves to navigate between stages, and view a list of Stages of the currently running Course. Navigation can only be done on an already open stage. There are 2 navigation sections, namely the sidebar which displays a list of stages on the running course, and the footer section which is used to navigate forward or backward. The Guide section will display material related to the stage, the material will be read by students first before continuing to work on the mission. The material is rich content, in the sense that it is not only written media that can be displayed but can also be images, audio, or video. In addition, the guide section also displays a list of missions that must be completed by the user. The list of missions will be green if they have been successfully completed. The Interactive Coding section is a place for users to write scripts according to the mission that must be completed. Just like in a programming editor, in Interactive Coding there is also Syntax Highlighting to make it easier for users to do programming. In this section there are 3 buttons, namely Run, Check, and Expand. Run button is used to run the script and the results will be displayed in the Output section. The Check button is used to send the script if it is deemed correct to verify whether the typed script is in accordance with the mission requirements. The Expand button is used to expand the Interactive Coding section. The Output section functions like a browser, this section will display the output results according to the typed script. There are 3 buttons, namely Output, Console, and Expand. The Output button is used to change the display so that it can display the rendering results of the typed c++ script. While the Console button is used to display the console output that was written earlier. The Expand button is used to expand the output display to make it easier for users to see the website display. After all missions have been successfully completed, a Score Board will appear containing information on the score, completion time, and the stars that were successfully obtained. There are several buttons on the Score Board, namely the Continue button, Play again, and back. The continue button only appears if the user successfully completes the stage. The next button is used to move to the next stage. The Play button is again used to repeat the current Stage. While the Back button is used to return to the Stage list page. 4.2 The Result of the Web Application Evaluation The developed web application gamification-based result was evaluated in black-box by nine experts as follows. First, the ‘Security testing’ had the highest mean at 4.89, with Standard Deviation (SD) at 0.33. Next, the ‘Usability testing’ and ‘Compatibility testing’ had a mean of 4.78 and SD of 0.44. Last, the IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 263 ‘Performance testing’ and ‘Stress testing’ mean was 4.67, with SD was 0.50. In addition, the mean in total was 4.74 and SD was 0.44, as showed in Fig. 7. Figure 7. The result of application evaluation in black-box testing 4.3 The Result of the Game Effectiveness Evaluation Experts evaluated the game effectiveness among four indicators. The result was found that the ‘Knowledge’, ‘Psychology’, and ‘Interaction’ indicators had the highest mean value at 4.56. Next, the ‘Measurement’ had a mean value was 4.44. All four indicators gave the same SD value was 0.53. The overall game effectiveness by experts, the mean was 4.53, and the SD was 0.51. For the result of game effectiveness evaluated by users, the ‘Interaction’ indicators had the highest mean at 4.62, together with the SD at 0.49. The remaining indicators, ‘Knowledge’, ‘Psychology’, and ‘Measurement’, had mean values were 4.58, 4.57, and 4.55, with SD values were 0.49, 0.50, and 0.50, respectively. Finally, the users evaluated the overall mean was 4.57, with SD was 0.50. Thus, the Web programming course developed in gamification had the highest effectiveness evaluated by experts and users, as shown in Fig. 8. Figure 8. The result of game effectiveness evaluation IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 264 5. CONCLUSION This gamification learning media was developed to help students understand the material and increase learning motivation. With the increase in learning motivation is also expected to increase student achievement. Multimedia elements such as text, images, sounds, animations serve as interactive ways for students to learn programming and increase student interest in learning. This game can also help teachers to explain learning material control structure repetition and branching in basic programming lessons in vocational high schools. For further development, this learning media needs to be improved in terms of system management such as teacher access in entering questions and game missions. and also to be able to connect with online classes such as Google Classroom and others. REFERENCES [1] Kemendikbud, "Surat Keputusan Direktur Jendral Pendidikan Dasar dan Menengah nomor 330 tentang Kompetensi Inti dan Kompetensi dasar Mata Pelajaran Muatan Nasional(A), Muatan Kewilayahan (B), Dasar Bidang Keahlian(C1), Dasar Program Keahlian(C2), dan Kompetensi Keahlian," 2017. [2] E. Nurhayati, "Meningkatkan Keaktifan Siswa Dalam Pembelajaran Daring Melalui Media Game Edukasi Quiziz pada Masa Pencegahan Penyebaran Covid-19," Jurnal Penelitian dan Pengembangan Pendidikan Vol. 7. No. 3, 2020. [3] E. K. Ariwibowo, "GAMIFICATION: ADAPTASI GAME DALAM DUNIA PENDIDIKAN," in Prosiding Seminar Nasional Pendidikan ISPI, 2017. [4] M. Rumansyah, "Perbedaan Pengaruh Pembelajaran dengan menggunakan Modul Interaktif dan Modul Konvensional terhadap Pemahaman Konsep IPA.," Jurnal Pendidikan Matematika dan Sains, pp. 54-62, 2017. [5] F. Sri Lestari Rahayu, "Penerapan Game Design Document Dalam Perancangan GameEdukasi Yang Interaktif Untuk Menarik Minat Siswa Dalam Belajar Bahasa Inggris," Jurnal Teknologi Informasi dan Ilmu Komputer (JTIIK), 2018. [6] S. D. D. K. R. N. L. Deterding, "From game design elements to gamefulness: defining “gamification"," in Proceedings of the 15th International Academic MindTrek Conference: Envisioning Future Media Environments, MindTrek, 2017. [7] S. A. Pramuditya, "Desain Game Edukasi Berbasis Android pada Materi Logika Matematika," JNPM (Jurnal Nasional Pendidikan Matematika), 2018. [8] D. S. W. Y. W. J. Naimah, "Pengembangan Game Edukasi Science Adventure Untuk Meningkatkan keterampilan Pemecahan Masalah Siswa," Indonesian Journal of Science Education, 2019. [9] A. K. Lutfiyah Dwi Setia, "Penerapan Aplikasi Multimedia Interaktif Pembelajaran Membaca Metode Suku Kata dan Digital Media Dongeng Karakter, Seminar Nasional Teknologi Informasi dan Komunikasi," Seminar Nasional Teknologi Informasi dan Komunikasi, 2019. [10] R. M. Y. D. S. Annisya, "Penerapan Gamification Pada Pembelajaran Ekonomi Di SMA," Jurnal Pengabdian Nusantara, 2021. [11] P. W. A. S. K. A. I B Kade Merta Sudana, "EFEKTIFITAS MEDIA PEMBELAJARAN BERKONSEP GAMIFIKASI PENGENALAN TATA SURYA MATA PELAJARAN IPA TERPADU KELAS VII DI SMP NEGERI 2 KUBUTAMBAHAN," Jurnal Pendidikan Teknologi dan Kejuruan, 2021. [12] B. A. &. S. N. A. Binarsatya, "Rancang Bangun Aplikasi Game Avatar dengan Menerapkan Gamifikasi untuk Meningkatkan Minat Pengunjung Objek–Objek Bersejarah di Surabaya," Jurnal Teknik ITS, 2018. [13] H. Jusuf, "Penggunaan Gamifikasi dalam Proses Pembelajaran," Jurnal TICOM, vol. 5, pp. 1-6, 2017. [14] Q. R. U. M. A. d. A. D. M. Aini, " Penerapan Gamifikasi pada Sistem Informasi Penilaian Ujian Mahasiswa untuk Meningkatkan Kinerja Dosen," Jurnal Informatika Upgris, pp. 46-55, 2018. IT Jou Res and Dev, Vol.8, No.1, March 2023 : 254 - 265 Implementation Of Gamification In Learning Media To Improve Student Activity And Learning Outcomes, Kurnia Rahman Agus 265 [15] K. Y. d. P. R. W. Y. Farida, "Pengembangan Bahan Ajar Gamifikasi pada Materi Bangun Ruang Sisi Lengkung," Jurnal Penelitian dan Pembelajaran Matematika, pp. 192-204, 2018. [16] A. Pratomo, "Pengaruh Konsep Gamifikasi terhadap Tingkat Engagement (Studi Kasus Pelatihan Karyawan the Park Lane Jakarta)," Tourism and Hospitality Essentials Journal, pp. 63-74, 2018. [17] U. R. A. K. Qurotul Aini, "Blockchain Technology into Gamification on Education," Indonesian Journal of Computing and Cybernetics Systems, 2020. [18] U. &. H. E. P. Rahardja, " Implementation Of Information Planning and Strategies Industrial Technology 4.0 to Improve Business Intelligence Performance on Official Site APTISI," Journal of Physics: Conference Series, vol. 1179, p. 1, 2019. [19] H. S. M. d. F. H. A. Maryanto, "Penerapan Gamification Cashflow sebagai Media Pembelajaran Pengelolaan Keuangan Pribadi pada Anak Usia Dasar (Studi Kasus: SDN Plumpung 1 Plaosan Magetan)," Jurnal Telematika, pp. 166-178, 2017. [20] A. M. F. J. J. Azani Cempaka Sari, "Interactive Gamification Learning Media Application For Blind Children Using Android Smartphone in Indonesia," International Conference on Computer Science and Computational Intelligence, 2019. 1. INTRODUCTION 2. LITERATURE REVIEW 3. RESEARCH METHOD 3.1 Gamification Design 3.2 Gamification Development 3.3 The Application Evaluation 4. RESULTS AND DISCUSSIONS 4.1. Feature Application A. Sign In and SignUp Page B. Dashboard page C. Achievements page D. Course Page E. Leaderboard Pages F. Stage Page 4.2 The Result of the Web Application Evaluation 4.3 The Result of the Game Effectiveness Evaluation REFERENCES