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.