Initiatives to teach coding, from K-12 to professionals, keep popping up in more places each day. But they all seem to fall into one of two booby traps. They are either too linear when illustrating the many moving parts of the operation, or give too limited a view of the true power of code. There are other platforms where developers—professionals and aspiring pros alike—can view code at work and interact with it. But these platforms are not designed with a classroom in mind and thus require some background for the user.
To harness the power of CodePen (one such platform for showcasing, editing, and general frolicking with code) and turn it into a learning experience, Moodlers Danny Wahl, creator, and Arnaud Trové, current maintainer, developed the CodePen Text Filter plugin for Moodle. It currently supports Moodle 3.1 up to 3.3.
As a text filter, the plugin only needs the URL of a “pen,” the name of a demonstration hosted at codepen.io.
After installation, it is disabled by default. Activate it by going to Dashboard > Site administration > Plugin > Filters > Manage filters.
This makes the CodePen text filter ready to recognize any valid pen URL. These begin with “https://codepen.io/” followed by the author’s CodePen username, then “/pen/” and finally the pen’s ID. (Our example uses https://codepen.io/zadvorsky/pen/PNXbGo, one of 2016’s top 100 pens.)
The powerful simplicity of text filters is on full display here. Rather than having to use a specific Activity, users can embed pens anywhere. Managers and teachers can limit the places where the text filter work.
On any text field, all it takes for the filter to work is pasting a pen URL.
This creates an embedded frame, responsive to the screen size, where the pen is shown in its entire beauty. Buttons on the frame header show the code that powers the pen, or open it on codepen.io, where students can “fork” it (make a copy for personal manipulation). A free user account is available upon sign-up.
While there are many similar platforms out there, CodePen offers many advantages, starting with the obvious one: it has a Moodle plugin. But there are more:
- Open Source, with free tier available
- Support for JavaScript libraries and frameworks
- Use code from other pens
- Console included (although available outside the Moodle frame only)
- Automatic detection of errors and cleaning code as you type
- The recently-added “Professor Mode” (requires paid subscription)
Teachers can take advantage of the CodePen Text Filter plugin to give students a “web development playground” within Moodle. They can create and share their own code, as well as explore and tweak code made by their peers or more skilled professionals.
Install or download the CodePen Text Filter plugin from the Moodle plugin directory.
This Moodle Technology related post is made possible by: Moonami a company that provides a full range of Moodle services that combine the flexibility, scalability, and power of Amazon’s world-leading cloud platform (AWS) with fanatical Moodle support. Click here to learn more.
