Using generator functions in algorithmic visualizations

Electronic course materials can provide students a better learning experience compared to traditional paper-based presentation. This is especially true in the case of programming, where proper understanding of algorithms is based on understanding the computational processes they perform [2]. Web pages are particurarly suited to the development of these materials, because the usual text and image based multimedia content can be accompanied by automatically generated visualizations. As the web browser platform is itself programmable, the visualizations shown by the browser can be controlled by the learner, and can even be interactive. However, the web browser platform is inherently event-driven, that requires the developer to reformulate the algorithms to be presented in an unusual manner, usually by converting the structured program code to nitestate automata. This is time-consuming and error-prone work. This article presents and evaluates several possible solutions to this problem. The main focus of the investigation is on generator functions, a new feature of JavaScript, available in ECMA-262 since 2015 [1]. This new language feature enables the developer to implement the algorithms to be presented without any modi cation to their control structure, thereby making development and maintaining of the course materials easier.