Interactive Code Playgrounds

Rethinking the user experience of slideshows in programming classes

An interactive demo of the Interactive Code Playgrounds project

Recommended browser:

Learning to code isn't easy.

Especially if you're a beginner.

Your university probably teaches programming through a lab course.

One of the first steps in lab courses is to make students install a coding environment.

Without the coding environment, you can't start coding.

Often, the installation is quite complex.

Starting out should be simpler.

We want to propose a solution
that rethinks one of the staples of programming classes.

The humble slide deck.

A typical slide in a programming class looks like this.

Go down to analyse some of the issues this creates, or go right to continue.

  • The code to your right is an image.
  • You can't select text from it.
  • Even when you can, if it's on a PDF file, it often doesn't select properly.
  • If you try copying and pasting from it, the output might be, frankly, garbage.
  • Also, as a teacher, if you need to change something, you need to re-make the image.
  • To make matters worse, there is also a problem of accessibility:
    an image is hardly usable for a screen reader user.
  • And finally, even when you can see them, images often render ugly! Look at those compression artifacts!
  • But the biggest problem is this:
  • Are you studying, and curious to know what this bit of code does?

Tough luck.

Okay, that was maybe a bit excessive.

You can actually do that, but it'll take jumping through a few hoops.
Find out by going down, or just skip ahead to the right.

Alright, there was some interesting code on that slide!
Let's assume you want to run a bit of Python code...

You'll just need to...

Open the Python interpreter

Open a text editor

Select the code on the slide (if you can!)

Copy and paste it in the text editor (or transcribe it manually!)

Check for copy/paste mistakes

Run the code in the interpreter

Whew!

Can't we do better?

What if code on slides could look like...

this?

Go ahead and try clicking that "Run Code!" button.

Did you see what happened in the "Output" box?

The code was run directly on the slide!

What's more, you can edit the code directly in the text box!

Why don't you make some changes, run the code again, and see what happens?

Move on when you're done playing.

You just saw what we call an Interactive Code Playground (or ICP for short).
And there's more they can do...

You can restrict the editable parts of the code. It may be useful for guided exercises!

Clicking on the settings, you can find buttons to:

  • copy the code snippet
  • cancel all your changes
  • enable the 'tabs' handling in the editor

ICP is compatible with other languages!

  • Javascript
  • Typescript
  • Python
  • Java
  • C/C++
  • SQL
  • Standard-ML
  • p5.js
  • Processing

On the right, for instance, you can execute some Java code!

We hope the ICPs can make learning to code more *creative*, and based on *fast tinkering*.

Thanks for following this demo.