StackBlitz Activity

Learn how to use Eduflow's StackBlitz activity to embed your StackBlitz project

Tony avatar
Written by Tony
Updated over a week ago

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

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

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

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

  4. Adjust the width and aspect ratio in Settings


How to get the embed code from StackBlitz

  1. From your StackBlitz project, click the Share button in the editor page.

  2. 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)

  1. From Eduflow, go to the course you'd like to add the activity to, add a new StackBlitz Activity from the Create activity page

  2. From the StackBlitz project, copy the Embed URL:

    e.g. https://stackblitz.com/edit/js-tpd4vw?embed=1&file=index.js:

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

  4. 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>
  5. Save


Option 2: Embed code using StackBlitz SDK (more difficult, better result)

  1. In Eduflow, add a new Embed activity in Activities

  2. 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',
    }
    );

  3. 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. Replace import sdk from '@stackblitz/sdk' with <script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>

    2. Change sdk.embedProjectId to StackBlitzSDK.embedProjectId

    3. Wrap the StackBlitzSDK.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>
  4. 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.

Did this answer your question?