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
Select + Add new, go to Embeds & integrations, and choose CodePen
Get the CodePen embed code (learn more about this below)
Paste the CodePen embed code into your CodePen activity in Eduflow
Adjust the width and aspect ratio in Settings
Getting embed code from CodePen
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.
If relevant, customise your embed content.
After you’ve finished customizing the embed code, copy the code from the Copy & Paste Code box below the embed preview.
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.