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.
When logged into Eduflow, and in the right course, click '+add New' to add the CodePen activity to your course
Get your CodePen embed code (you can learn more about this below)
Paste your CodePen embed code into your CodePen activity in Eduflow
Decide if you want to use the 'standard view' or 'wide view'
Set up any other relevant common activity settings, such as prerequisites, or an open date & deadline.
How to get your 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.
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>
Things to note
Learners will have to mark the activity as complete themselves after interacting with your CodePen content.
Learners are able to mark the activity as complete without interacting with the content.