April 27, 2016

Embeddable p5 Learning Sandboxes

I’ve recently been helping my colleague Taeyoon Choi with his series of Signing Coders workshops, in which we’ve been teaching students who are hearing-impaired how to code using p5.js.

One of the challenges Taeyoon faced in writing his computer-based learning activities was providing students with a simple, welcoming coding environment in which they could tinker with example p5 sketches without fear, embedded in the context of his curriculum.

I noticed that there seemed to be a need for this across the p5 educator community, so I teamed up with Jess Klein and we built an embeddable widget:

The above example actually demonstrates the widget’s implicit setup() functionality, whereby beginners can start tinkering with simple sketches without needing to know what a function is, much like the original Processing language.

The widget deals gracefully with common errors that users make. For example:

  • Infinite loops won’t hang the browser;
  • Errors are displayed in a status bar area at the bottom of the widget, and source lines of the errors are highlighted in the editor;
  • An “Undo” button allows learners to easily recover from mistakes, while a “Revert” button takes them back to the original content the teacher populated the sandbox with.

The widget has a simple markup API with extensive documentation that allows educators to easily embed it in blog posts, standalone web pages, or anywhere else on the web that supports HTML authoring.

This tool is implemented using TypeScript and React. More details can be found at the project’s GitHub repository.

© Atul Varma 2017