Turn Your Moodle Into A Web Coding Forest With The CodePen Filter Plugin

AI in Education Leaderboard Post Page
Ai In Education Square Post Page

--- Advertisement ---

Disponible en Español.

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

Turn Your Moodle™ Into A Web Coding Forest With The CodePen Filter Plugin
A “pen” from CodePen.

After installation, it is disabled by default. Activate it by going to Dashboard > Site administration > Plugin > Filters > Manage filters.

Turn Your Moodle™ Into A Web Coding Forest With The CodePen Filter Plugin
Enabling the CodePen Text Filter.

This makes the CodePen text filter ready to recognize any valid pen URL. These begin with “” followed by the author’s CodePen username, then “/pen/” and finally the pen’s ID. (Our example uses, 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.

Turn Your Moodle™ Into A Web Coding Forest With The CodePen Filter Plugin
The CodePen Text Filter will work on any Moodle™ Activity that opens a text editor.

On any text field, all it takes for the filter to work is pasting a pen URL.

Turn Your Moodle™ Into A Web Coding Forest With The CodePen Filter Plugin
Adding the pen URL is all it takes. Save, display, that’s it!

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, 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.

Moonami LogoThis 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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

The Latest

The eLearn Podcast

--- Advertisement ---

Subscribe to our newsletter

Education technology has the power to change lives. 

To get the latest news, information and resources about online learning from around the world by clicking on the button below.