Article Details

Abstract

The abstractness and dynamic characteristics of algorithm teaching consistently constrain learning effectiveness in algorithm education. To address this issue, an interactive Web-based teaching platform integrating algorithm visualization, active interaction, and AI-assisted learning is designed and implemented. Based on HTML5 Canvas and Node.js, the platform visualizes algorithm execution processes and adopts a step-driven model to synchronize source code, animation, and variable states. Learners can independently control the execution pace and observe algorithm behavior in real time. An AI-assisted module provides personalized guidance and error diagnosis through a progressive prompting mechanism, encouraging learners to think actively. With a low technical threshold, the platform supports multi-language code execution within a secure sandbox environment, enabling algorithm experimentation and visual comparison. Teaching practice demonstrates that the platform effectively enhances learners' understanding of algorithm logic and exploratory interest, providing a feasible approach for information-based algorithm course teaching and AI-assisted learning models.

Keywords

algorithm visualization; active learning; teaching platform; AI-assisted teaching

References

1. [1] Wang Shumei, Wang Shuqin Application of Algorithm Visualization in Data Structure Course Teaching [J]. Computer Education, 2022 (7): 190-193198
2. [2] Xia Zhenghua, Hu Baokun, Diaowan Bay, etc Design of Interactive Computer Algorithm Learning Platform [J]. Journal of Hangzhou Normal University (Natural Science Edition), 2022, 21 (5): 536-541552
3. [3] Zhang Yichi Research and Implementation of Visualization Example Teaching System for Ten Classic Algorithms of Big Data [D]. Xi'an: Xi'an University of Petroleum, 2021
4. [4] Shao Guanghui Design and Implementation of Algorithm Visualization Language [D]. Chengdu: University of Electronic Science and Technology of China, 2024
5. [5] Xu Chuanfu, Wang Xi, Liu Shu, etc Large scale high-performance LBM multiphase flow simulation based on Python [J]. Computer Science, 2020, 47 (1): 17-23
6. [6] Liang Xiaobing Design and Development of "Algo Bridges" Algorithm Visualization Platform Based on HTML5 [D]. Guangzhou: Guangdong Normal University of Technology, 2025
7. [7] Stanqing Research on Intelligent Design System and Method of Information Visualization [D]. Shanghai: Tongji University, 2022
8. [8] Pang Ruiyang, Lu Xuesong Visualization Implementation of Interactive Data Structures and Algorithms Based on Intelligent Agents [J]. Journal of East China Normal University (Natural Science Edition), 2025 (5): 32-42
9. [9] Wei Li Design and Implementation of Visualization System for Common Sorting Algorithms Based on OpenGL [J]. Journal of Anhui Radio and Television University, 2019 (3): 92-96
10. [10] Ping Shuwen, Pan Jueyu, Zhang Xuejin, etc Development of Lightweight Animation Framework Based on HTML5 and JavaScript [J]. Computer Technology and Development, 2013, 23 (12): 5-10

Funding

Provincial College Students' Innovation and Entrepreneurship Training Program (S202513241026)

About the authors

Li Mintao (March 2004-), male, Han ethnicity, from Yichang, Hubei Province, is currently pursuing a bachelor's degree with a research focus on computer science and technology; Corresponding author: Li Qin (1978.10-), female, Han ethnicity, from Wuhan, Hubei, associate professor, master's student, research direction: computer application technology; Hao Yinrui (May 2005-), male, Han ethnicity, from Yichang, Hubei Province, is currently pursuing a bachelor's degree with a research focus on computer science and technology.