The StackBlitz activity allows you to embed the StackBlitz editor or content area as an activity.
How to add a StackBlitz activity to your course
Select +Add new, go to Embeds & integrations, and choose StackBlitz
Get the StackBlitz embed code (learn more about this below)
Paste the StackBlitz embed code into your StackBlitz activity in Eduflow
Adjust the width and aspect ratio in Settings
How to get the embed code from StackBlitz
From your StackBlitz project, click the Share button in the editor page.
Once the popup is open, click the Embed tab.
Depending on the method of integration (see below), you can choose to copy the Embed URL or Embed code:
Option 1: Embed URL (easiest)
From Eduflow, go to the course you'd like to add the activity to, add a new StackBlitz Activity from the Create activity page
From the StackBlitz project, copy the Embed URL:
e.g. https://stackblitz.com/edit/js-tpd4vw?embed=1&file=index.js:Read this step carefully, you will need adjust the code slightly!
From Eduflow, open the Embed activity's settings. Copy the "Embed URL" from StackBlitz to the Embed activity's "Embed code" text area.One special change. Wrap the URL into an iframe:
<iframe src="[Embed URL]"></iframe>
Example:<iframe src="https://stackblitz.com/edit/js-tpd4vw?embed=1&file=index.js"></iframe>
Save
Option 2: Embed code using StackBlitz SDK (more difficult, better result)
In Eduflow, add a new Embed activity in Activities
Read these next 2 steps carefully, you will need adjust the code slightly!
From Eduflow, open the Embed activity's settings. Copy the Embed using StackBlitz SDK HTML from StackBlitz to the "Embed code" text area:import sdk from '@stackblitz/sdk'
sdk.embedProjectId(
'elementOrId',
'js-tpd4vw',
{
forceEmbedLayout: true,
openFile: 'index.js',
}
);Adjust the HTML
From Eduflow, within the Embed activity setting's Embed Code text area, modify the HTML to work in the browser as such:
1. Replaceimport sdk from '@stackblitz/sdk'
with<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>
2. Changesdk.embedProjectId
toStackBlitzSDK.embedProjectId
3. Wrap theStackBlitzSDK.embedProjectId(...)
block in<script type="text/javascript">StackBlitzSDK.EmbedProject(...)</script>
<script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>
<div id="elementOrId"></div>
<script type="text/javascript">
StackBlitzSDK.embedProjectId(
'elementOrId',
'js-tpd4vw',
{
forceEmbedLayout: true,
openFile: 'index.js',
}
);
</script>Save
Example of a proper integration
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.