Adding a PowerPoint slideshow to your Open edX Course

Slideshows are a commonly used way of presenting information, and there are a number of ways of importing them into your Open edX course. In order to do this, we're going to use PowerPoint online, a free service available with all Microsoft accounts and Office 365 subscriptions.

First things first, you'll need your slideshow. If you already have your slides but they're not on OneDrive already, simply head over to onedrive.live.com and drag and drop your file into your OneDrive.

Once it's uploaded, open up your file by clicking it, and check that everything still looks and functions the way you expect it to.

Once you're done editing or creating your presentation, Click File, then Share, then Embed.


In the window that appears, click the Generate button.

You'll see a new menu pop up with a few settings. We recommend the 962x565 option.

At the bottom of this box is the Embed Code. Copy the code, then open your course in Studio.

Over in Studio, navigate to the unit in which you would like to insert your slideshow, and insert a new HTML component. We recommend using the Raw HTML template, as it'll open straight up into the HTML editor.

Once it's inserted, click Edit to open up the editor.

Replace the HTML code that's there with the embed code you copied over in PowerPoint by pasting it in.

Once you click Save, you should see your slideshow appear on the page! Just make sure you click Publish to make it visible to learners, and you're done!

Advanced Bonus Round

The eagle-eyed among you may have noticed that in the Studio screenshot, the image is slightly cut off. This is because the PowerPoint Online embeds are, for reasons known only to Microsoft, not responsive for smaller screen sizes. While this size looks fine on desktop devices (check the LMS if you don't believe me!) learners on mobile devices and small laptop screens may get a worse experience with scrollbars. Fortunately, we have a fix for this that we can share with you. It's a little trickier than the normal way, but it makes for a better experience on those devices.

First, open up your HTML component again and delete the two attributes setting the "Width" and "Height", including their values

You should end up with nothing left behind, like this:

Next, we're going to add our own attribute so that we can apply some styling of our own to set the width and height.

Add the following where you just removed the width and height:

class="powerpoint"

Finally, on the line below your iframe (hit enter to add a new line), paste the following code:

<style type="text/css">
  .powerpoint{
    width:100%;
    min-height:512px;
  }
</style>

This should be all you need. Hit Save and check out how it looks! 

If you run into any trouble with this, please just reach out to our support channels or your assigned customer success manager and we'll help you get un-stuck.

Related Articles