When students take introductory programming courses in university, they often need to setup a development environment. Development environments enable all students to execute code, but also provide a uniform environment to compare results and facilitate troubleshooting. Typical enviroments may range from a loose collection of packages, to an Integrated Development Environment (IDE), to signing up to various web services.

In this paper, we present an alternative approach in the form of a slideshow system called Interactive Code Playgrounds (ICPs). ICPs embed code in HTML slides, enabling code execution and output visualisation directly in the browser. By using a browser and WebAssembly (WASM), we eliminate the need to install separate programs, and even to have a server component. The paper presents ICPs’ design principles, including considerations on inclusion and accessibility, and reports on the outcomes of a mixed-methods field study of ICP effectiveness that involved 95 participants at three introductory programming courses at a medium-sized European university. Our research, which combined surveys with a micro-ethnography, suggests that students generally understood well how ICPs work, and successfully used ICPs to follow the lectures in which they were used, with the emergence of patterns of lecture self-pacing and self-tailoring.

Since introducing ICPs in a course does not require radical changes in the course’s teaching methods, we hope to show that education technologies do not necessarily need to disrupt teaching and learning, but can also take a slower approach that still yields meaningful pedagogical benefits.