magic of embed code, but we had a question this week from one of our school technology coordinators about embedding a graphing calculator tool (Desmos) into an assessment in Schoology, our LMS. While Desmos gives embed code for a graph that is saved and created (as a static .jpg or image), what if you want to embed the tool itself into a page? How can you insert an interactive tool or webpage if you don't have the actual embed code?
In this case, an easy option is to create your own using a variation of code with iframe attributes. When you embed media (like from YouTube, for example), the embed code looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/qp0HIF3SfI4?rel=0" frameborder="0" allowfullscreen></iframe>
The basic components above are the width, the height, and the source URL. If you want to embed something and you don't have the right embed code, you can just replace or change the parts of the code for what you want to embed.
So, in the scenario mentioned earlier for getting the graphing calculator into Schoology, I would change the code to look like this:
<iframe width="100%" height="400" src="https://www.desmos.com/calculator"></iframe>
- In the rich text editor window, use the "Insert Content" icon.
- Choose "Image/Media."
- Choose "From the Web" and make sure you choose "Media."
- Paste in the code, and the embedded item will appear when you save.
Pretty slick! Now you can just copy and paste the code I included above and replace the URL with whatever you need. While this doesn't work for everything (and you can find embed code for most things on the web), this is a good workaround when you need to embed something and aren't provided the code.