Programming Learning Platform with Visual Aids

Foong Yuh Chung

Abstract


This paper presents the design and development of a user-centric web-based programming learning platform aimed at novice programmers. The platform addresses common challenges in learning programming by integrating visual learning aids and interactive features. A real-time code visualization tool enables learners to trace code execution line-by-line, helping demystify abstract concepts and debug code logic. The system also incorporates progress tracking dashboards, formative assessments (quizzes and coding exercises), and a digital badge reward system to motivate continuous learning. The platform was implemented as a Single-Page Application using a cloud Backend-as-a-Service (Firebase) to support real-time data synchronization and user management. Development followed an iterative, user-centered approach, including usability testing with target users that informed subsequent refinements. Results indicate that the platform effectively engages beginners by bridging the gap between theoretical knowledge and practical application through interactive visual feedback. This work contributes an innovative e-learning solution that leverages visualization and gamification to enhance the learning experience for novice programmers. 


Keywords: E-learning; Gamification; Novice programmers; Programming education; Visual code execution



Full Text:

PDF

References


Ahadi, A., Lister, R., & Mathieson, L. (2018). Syntax error based quantification of the learning progress of the novice programmer. OPUS - Open Publications of UTS Scholars (University of Technology Sydney), 138, 10–14. https://doi.org/10.1145/3197091.3197121

Andries, F., & Lengkoan, F. (2023). The Importance of Students’ Perception of Online Learning During Pandemic. International Journal of Applied Business and International Management, 8(2), 142–152. https://doi.org/10.32535/ijabim.v8i2.2475

Brown, P. C., Roediger III, H. L., & McDaniel, M. A. (2014). Make it stick: The science of successful learning. The Belknap Press of Harvard University Press.

Garner. (2002). Reducing the Cognitive Load on Novice Programmers. https://files.eric.ed.gov/fulltext/ED477013.pdf

Gong, X., Xu, W., Yu, S., Ma, J., & Qiao, A. (2024). Enhancing computational thinking and spatial reasoning skills in gamification programming learning: A comparative study of tangible, block and paper?and?pencil tools. British Journal of Educational Technology, 56(1). https://doi.org/10.1111/bjet.13482

Guo, P. (2013). Online Python Tutor: Embeddable Web-Based Program Visualization for CS Education. https://pg.ucsd.edu/publications/Online-Python-Tutor-web-based-program-visualization_SIGCSE-2013.pdf

Hamari, J., Koivisto, J., & Sarsa, H. (2014, March 10). Does Gamification Work? -- A Literature Review of Empirical Studies on Gamification - IEEE Conference Publication. Ieee.org. https://ieeexplore.ieee.org/document/6758978

Hudin, S., Adil, A., Raja, P., Pahat, B., & Corresponding Author, M. (2024). Programming Challenges Experience by Primary School Students: A Systematic Literature Review. Programming Challenges Experience by Primary School Students: A Systematic Literature Review, 13(4). https://doi.org/10.6007/IJARPED/v13-i4/23238

III, H. L., & Butler, A. C. (2011). The critical role of retrieval practice in longterm retention. Trends in Cognitive Sciences, 15(1), 20–27. https://doi.org/10.1016/j.tics.2010.09.003

Kalelioglu, F., & Allsop, Y. (2024). International Journal of Computer Science Education in Schools. International Journal of Computer Science Education in Schools, 7(1). https://doi.org/10.21585/ijcses.v7i1

Lackner, K., & Podlipnig, S. (2022). Aiding Novice Programmers’ understanding of program flow by introducing sequential visualisation of graphical output and real-time visual debugging -a case study Bachelor of Science in Media Informatics and Visual Computing. https://static1.squarespace.com/static/60c2161caca2a51211d56f07/t/62c709449ba148099c5c8e39/1657211207612/Aiding_Novice_Programmers%E2%80%99_understanding_of_program_flow_by_introducing_sequential_visualisation_of_graphical_output_and_real-time_visual_debugging-a_case_study+study.pdf

Lahtinen, E., Ala-Mutka, K., & Järvinen, H.-M. (2005, September). (PDF) A study of the difficulties of novice programmers. ResearchGate. https://www.researchgate.net/publication/220808194_A_study_of_the_difficulties_of_novice_programmers

Ou Yang, F.-C., Lai, H.-M., & Wang, Y.-W. (2023). Effect of augmented reality-based virtual educational robotics on programming students’ enjoyment of learning, computational thinking skills, and academic achievement. Computers & Education, 195, 104721. https://doi.org/10.1016/j.compedu.2022.104721

Sabeh, H., Husin, H., Kee, D., Baharudin, A., & Abdullah, R. (2021). A systematic review of the DeLone and McLean model of information systems success in an e-learning context (2010–2020). IEEE Access, PP, 1–1. https://doi.org/10.1109/ACCESS.2021.3084815

Singh, S. (2022). Identifying Learning Challenges faced by Novice/Beginner Computer Programming Students: An Action Research Approach. https://ceur-ws.org/Vol-3330/Paper-09-SEED.pdf

Sorva, J., Karavirta, V., & Malmi, L. (2013). A review of generic program visualization systems for introductory programming education. ACM Trans. Comput. Educ., 13, 4. https://doi.org/10.1145/2490822

Tahir, F., Mitrovic, A., & Sotardi, V. (2022). Investigating the causal relationships between badges and learning outcomes in SQL-Tutor. Research and Practice in Technology Enhanced Learning, 17(1). https://doi.org/10.1186/s41039-022-00180-4

Zainudin, Z. A., & Zulkiply, N. (2023). Gamification in Learning: Students’ Motivation and Cognitive Engagement in Learning Business Using Quizizz. Asian Journal of University Education, 19(4), 823–833. https://doi.org/10.24191/ajue.v19i4.24928




DOI: https://doi.org/10.32535/jicp.v8i1.4002

Refbacks

  • There are currently no refbacks.


Copyright (c) 2025 Foong Yuh Chung

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Flag Counter

Published by:

AIBPM Publisher

Editorial Office:

JL. Kahuripan No. 9 Hotel Sahid Montana, Malang, Indonesia
Phone:
+62 341 366222
Email: journal.jicp@gmail.com
Website:http://ejournal.aibpmjournals.com/index.php/JICP

Supported by: Association of International Business & Professional Management

If you are interested to get the journal subscription you can contact us at admin@aibpm.org.

ISSN 2622-0989 (Print)
ISSN 2621-993X (Online)

DOI:Prefix 10.32535 by CrossREF

Journal of International Conference Proceedings (JICP) INDEXED:

 

In Process


This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.