Implementasi Frontend Sistem Pelaporan Tugas Harian Berbasis Web dengan Pendekatan Gamifikasi Menggunakan Vue.js
DOI:
https://doi.org/10.47065/bulletincsr.v6i4.1143Keywords:
Discipline; Frontend; Gamification; Task Reporting; VueAbstract
The phenomenon of students' lack of discipline in completing and reporting daily tasks is an academic problem that impacts learning achievement. Monotonous manual reporting systems often reduce intrinsic motivation and student participation rates. This study aims to design and implement a web-based daily task reporting system frontend with a gamification approach using the Vue.js framework, and analyze its impact on improving discipline. The research location is at Universitas Muhammadiyah Karanganyar involving 10 active students as trial respondents. The research method used is a qualitative approach with an implementative case study type. The system interface was developed using Vue.js 3, Pinia as state management, and Vue Router. Data collection techniques included participatory observation, in-depth interviews, and User Acceptance Test (UAT) questionnaires with a 1 to 5 Likert scale. Data testing was analyzed using the Miles and Huberman model consisting of data reduction, data display, and drawing conclusions. Interim research results show the functional success rate of the frontend reached 88 percent in the localhost environment. The UAT questionnaire obtained an overall average score of 4.21 which is classified as very good. Gamification features became the most preferred element by 60 percent of respondents, which effectively encouraged students' disciplined behavior in submitting assignments on time.
Downloads
References
S. Dhawan, “Online Learning?: A Panacea in the Time of COVID-19 Crisis,” J. Educ. Technol., vol. 49, 2020, doi: 10.1177/0047239520934018.
I. Fauzi, I. Hermawan, S. Khusuma, U. P. Indonesia, and U. N. Jakarta, “Teachers’ Elementary School in Online Learning of COVID-19 Pandemic Conditions,” J. iqra, vol. 5, no. 1, pp. 58–70, 2020, doi: 10.25217/ji.v5i1.914.
E. G. Rincon-flores and B. N. Santos-guevara, “Gamification during Covid-19?: Promoting active learning and motivation in higher education,” Australas. J. Educ. Technol., vol. 37, no. 5, pp. 43–60, 2021, doi: 10.14742/ajet.7157.
A. Z. Purba, F. H. Nasution, K. M. Parapat, and M. Jannah, “Gamifikasi Dalam Pendidikan?: Meningkatkan Motivasi dan Keterlibatan Siswa,” Maximal J. J. Ilm. Bid. Sos. Ekon. Budaya dan Pendidik., vol. 1, no. 5, pp. 299–305, 2024, [Online]. Available: https://malaqbipublisher.com/index.php/MAKSI
N. Andi, Z. Dewi, and E. Rilvani, “Prediksi Tingkat Keterlambatan Pengumpulan Tugas Mahasiswa Berdasarkan Aktivitas Perkuliahan Menggunakan Algoritma K-Nearest Neighbor ( KNN ),” J. Rekayasa Teknol. Nusa Putra, vol. 11, no. 2, pp. 103–110, 2025, doi: 10.52005/rekayasa.v11i2.653.
U. Nandhini., P. S. Pavai, and Assistant, “An Overview Of Cognitive Psychology With Reference,” EDUTERATE A Bi- Annu. Multidiscip. Peer Rev. Ref. Int. J., vol. 18, no. 1, pp. 9–12, 2023, [Online]. Available: https://www.researchgate.net/publication/377060156_AN_OVERVIEW_OF_COGNITIVE_PSYCHOLOGY_WITH_REFERENCE_TO_HUMAN-COMPUTER_INTERACTION_DESIGN
N. Rahayu, “Analisis UX Pada Aplikasi E-Learning Menggunakan Metode SUS ( System Usability Scale ) UX Analysis On E-Learning Application Using SUS ( System Usability Scale ) Method,” J. Komput., vol. 3, no. 2, pp. 49–54, 2023, doi: 10.70963/jk.v3i2.105.
J. Krath, L. Schürmann, and H. F. O. Von Korflesch, “Revealing the theoretical basis of gamification: A systematic review and analysis of theory in research on gamification, serious games and game-based learning,” Comput. Human Behav., vol. 125, no. August, p. 106963, 2021, doi: 10.1016/j.chb.2021.106963.
A. M. Toda et al., “Analysing gamification elements in educational environments using an existing Gamification taxonomy,” Smart Learn. Environ., vol. 1, pp. 1–14, 2023, doi: 10.1186/s40561-019-0106-1.
D. N. Sari, A. R. Alfiyan, and I. Bisnis, “Peran Adaptasi Game ( Gamifikasi ) dalam Pembelajaran untuk Menguatkan Literasi Digital?: Systematic Literature Review,” J. Pendidik. Teknol. Inf., vol. 1, no. 1, 2023, doi: 10.30812/upgrade.v1i1.3157.
M. Mahmubi and Homaidi, “Analisis Implementasi Pembelajaran Berbasis Gamifikasi Pada Peningkatan Motivasi Belajar Siswa,” J. Al-Abshor J. Pendidik. Agama Islam, vol. 2, no. 1, pp. 1–9, 2025, doi: 10.71242/wf9q5253.
C. Pletz and B. Zinn, “Evaluation of an immersive virtual learning environment for operator training in mechanical and plant engineering using video analysis,” Br. J. Educ. Technol., vol. 51, no. 6, 2021, doi: 10.1111/bjet.13024.
R. L. Rahardian and M. W. P. Wenas, “Rancang Bangun Sistem Informasi Koperasi XYZ,” J. Tek. Inform. DAN Teknol. Inf., vol. 2, no. 3, 2022, [Online]. Available: https://ejurnal.politeknikpratama.ac.id/index.php/JUTITI
Andhika Rizky Aryasta, “Pengembangan Front End Sistem Informasi Akuntansi Menggunakan Kerangka,” Univ. Islam Indones., 2022, [Online]. Available: https://journal.uii.ac.id/AUTOMATA/article/view/24208
I. A. Abel, I. Setiawan, and A. Hamdi, “Implementasi antarmuka single page application pada e- learning umi menggunakan react.js dan rest api 1) 1,3),” RABIT J. Teknol. dan Sist. Inf. Univrab, vol. 11, no. 1, pp. 1220–1229, 2026, doi: 10.36341/rabit.v11i1.7245.
R. Hurley and R. Sturgeon, “Framework to Model User Request Access Patterns in the World Wide Web,” J. Softw. Eng. Appl., vol. 17, pp. 69–88, 2024, doi: 10.4236/jsea.2024.172004.
L. A. Fitriani and S. Y. Wardani, “Dampak Doomscrolling Terhadap Prokrastinasi Akademik Mahasiswa Di Era Digital,” JUBIKOPS J. Bimbing. Konseling dan Psikol., vol. 6, pp. 76–88, 2026, doi: 10.56185/jubikops.v6i1.1240.
M. Armansyah and A. Sekti, “Pengembangan Fitur Penelitian Tugas Real – Time Pada Sistem E - Learning Berbasis Web Untuk Meningkatkan Interaktivitas Siswa,” Bull. Comput. Sci. Res., vol. 6, no. 1, pp. 325–331, 2025, doi: 10.47065/bulletincsr.v6i1.891.
J. M. Parra-ullauri, A. García-domínguez, J. Boubeta-puig, and N. Bencomo, “Towards an Architecture Integrating Complex Event Processing and Temporal Graphs for Service Monitoring,” Assoc. Comput. Mach., pp. 427–435, 2021, doi: 10.1145/3412841.344192.
E. S. Rivera, C. Louise, P. Garden, E. S. Rivera, C. Louise, and P. Garden, “Gamification for student engagement?: a framework Gamification for student engagement?: a framework ABSTRACT,” J. Furth. High. Educ., vol. 45, no. 7, pp. 999–1012, 2021, doi: 10.1080/0309877X.2021.1875201.
P. Gupta and P. Goyal, “Is game-based pedagogy just a fad? A self-determination theory approach to gamification in higher education,” Int. J. Educ. Manag., vol. 36, no. 3, pp. 341–356, Mar. 2022, doi: 10.1108/IJEM-04-2021-0126.
D. Ferrero-castro, “Design , Development and Use of a Digital Badges System in Higher Education,” Appl. Sci., 2022, doi: 10.3390/app12010220.
S. Park and S. Kim, “Leaderboard design principles to enhance learning and motivation in a gamified educational environment: Development study,” JMIR Serious Games, vol. 9, no. 2, pp. 1–13, 2021, doi: 10.2196/14746.
L. R. M. Zamorano, J. Ángel, L. Sánchez, A. Luisa, G. Caballero, and C. B. Muñoz, “Gamification and active learning in higher education?: is it possible to match digital society , academia and students ’ interests??,” Int. J. Educ. Technol. High. Educ., vol. 18, no. 1, pp. 1–27, 2021, doi: 10.1186/s41239-021-00249-y.
Bila bermanfaat silahkan share artikel ini
Berikan Komentar Anda terhadap artikel Implementasi Frontend Sistem Pelaporan Tugas Harian Berbasis Web dengan Pendekatan Gamifikasi Menggunakan Vue.js
ARTICLE HISTORY
How to Cite
Issue
Section
Copyright (c) 2026 Riza Al Hambra, Novi Tristanti
This work is licensed under a Creative Commons Attribution 4.0 International License.
Authors who publish with this journal agree to the following terms:
- Authors retain copyright and grant the journal right of first publication with the work simultaneously licensed under Creative Commons Attribution 4.0 International License that allows others to share the work with an acknowledgment of the work's authorship and initial publication in this journal.
- Authors are able to enter into separate, additional contractual arrangements for the non-exclusive distribution of the journal's published version of the work (e.g., post it to an institutional repository or publish it in a book), with an acknowledgment of its initial publication in this journal.
- Authors are permitted and encouraged to post their work online (e.g., in institutional repositories or on their website) prior to and during the submission process, as it can lead to productive exchanges, as well as earlier and greater citation of published work (Refer to The Effect of Open Access).
