CodePen Activity

Learn how to set up the CodePen activity

David Kofoed Wind avatar
Written by David Kofoed Wind
Updated over a week ago

CodePen is a social development environment for front-end designers and developers. The CodePen activity allows you to embed CodePen content into Eduflow as a learning activity. Your learners will be able to interact with your CodePen content without having to leave Eduflow.

How to add a CodePen activity to your course

  1. Select + Add new, go to Embeds & integrations, and choose CodePen

  2. Get the CodePen embed code (learn more about this below)

  3. Paste the CodePen embed code into your CodePen activity in Eduflow

  4. Adjust the width and aspect ratio in Settings


Getting embed code from CodePen

  1. When logged into CodePen, you can get the code by clicking the Embed button in the footer of the Editor on any Pen. This will open the Embed Builder.

  2. If relevant, customise your embed content.

  3. After you’ve finished customizing the embed code, copy the code from the Copy & Paste Code box below the embed preview.

the CodePen embed builder displaying an example embed.

4. Copy the code and add it to the CodePen activity in Eduflow. The code you get should look something like this:

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="Mamboleoo" data-slug-hash="XWJPxpZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Walkers - How to">
<span>See the Pen <a href="https://codepen.io/Mamboleoo/pen/XWJPxpZ">
Walkers - How to</a> by Louis Hoebregts (<a href="https://codepen.io/Mamboleoo">@Mamboleoo</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Learners will mark the activity as complete themselves after interacting with the CodePen content. It's important to note that learners are able to mark the activity as complete without filling out the CodePen.


Completion & Visibility settings

You can use completion and visibility settings to add specific rules for who can view and access this activity, including setting deadlines and prerequisites. You can see details about these rules here.

Did this answer your question?