Embedding Executable Code in Programming Slideshows: Design Considerations and Field Tests for Interactive Code Playgrounds

When students take introductory programming courses in university, they often need to setup a development environment. Development environments enable code execution while also providing a uniform setting for students to compare results and facilitate troubleshooting. At the same time, though, development enviroments often require installing applications or signing up to web services. In this paper we present an alternative approach, in the form of an in-browser slideshow system called Interactive Code Playgrounds (ICPs). ICPs aim to create a uniform environment while also making programming lectures more approachable facilitating code execution. In ICPs, code is embedded in webpages displayed as slides, enabling code execution and output visualisation directly in the browser through the use of JavaScript and WebAssembly. This paper presents ICPs’ design principles, and reports on the outcomes of a mixed-methods validation study that, through a combination of surveys and micro-ethnographies, involved 95 participants at three introductory programming courses at the University of Trento. Our research suggests that students generally understood ICPs’ functionalities, and successfully used ICPs to follow their lectures, with the emergence of patterns of self-pacing and self-tailoring. By introducing an education technology that does not require radical changes in the course’s teaching and delivery, we hope to show that education technologies do not necessarily need to disrupt teaching and learning, but can also take an incremental approach while still yielding meaningful pedagogical benefits.