Embedding PHET, Geogebra, and Desmos into Canvas

Full Description

Introduction(Please read first)

Embedding PHET simulations

Embedding Geogebratube applets

Embedding Desmos Graphs

The WYSIWYG (What You See Is What You Get) editor in Canvas is used for most of the components, like the Syllabus, Pages, Discussions description, Quizzes description, and Assignments description. This means that PHETs (that are HTML5, more on that below), Geogebra applets from Geogebratube, and Desmos graphs can be embedded into any of those aspects of Canvas. These items have been tested in the iOS version of Canvas as well and have appeared to work well. The WYSIWYG editor looks like this; 

Screen Shot 2016 01 12 at 2.32.29 PM

Embedding PHETs into the WYSIWYG editor

Only PHET simulations that have been converted from JAVA to HTML5 can be embedded into Canvas. There is a list here, or you can look for the symbol below in the lower right corner of the sim preview image. 

HTML5 Badge 512

To embed the PHET you first need to get the embed code. Click on a sim image to get to that sim's home page, then find the Embed button as shown below. 

Balancing Act Force Torque Rotation PhET

Copy all of the "Embed a running copy of the simulation" code; it should start and end with the word iframe. Note the < at the start and > at the end are important as well. 

Go to the WYSIWYG editor in Canvas and click on HTML editor on the right side. Paste the simulation code into the code editor in Canvas. You can place it anywhere and then move the the simulation in Rich content (visual) mode. VERY IMPORTANT: You must add an 's' after the 'http' in the code, as shown below. 

PHET Embed

When you click on Save at the bottom of the page, the PHET should load in the window. Note that it won't view correctly if you switch back to Rich Content (visual) mode before saving, but it should after you save. 

Embedding Geogebra applets from Geogebratube

Go to Geogebratube and find an applet you would like to embed (note: you can easily share your own creations from the web version of Geogebra to Geogebratube, then embed them in this same way from there. Just click on the three lines in the upper right corner of the Geogebra Window and click Share). In the far upper right corner of the browser window, click on the share button, as shown below. 

share button geogebra

 

On the new screen find the Embed button. This will show the embed code. Click on the embed code and copy it. See picture below for the Embed button as well as the embed code. 

Geogebra code

Go to the WYSIWYG editor in Canvas and click on HTML editor on the right side. Paste the simulation code into the code editor in Canvas. You can place it anywhere and then move the applet in Rich content (visual) mode.

When you click on Save at the bottom of the page, the applet should load in the window. Note that it won't view correctly if you switch back to Rich Content (visual) mode before saving, but it should after you save.

Embedding Desmos Graphs

First go to the WYSIWYG editor in Canvas and paste in the following code: 

<iframe src="https://www.desmos.com/calculator/6pnwxdijdj" width="800" height="600"></iframe> (note that the red is to identify that section of the code later).

Go to a saved Desmos graph. click on the Share button in the upper right corner (see picture below), and copy the letters in the box after desmos.com/calculator/. NOTE: You do not want to click the embed code here, that only embeds a picture of the graph with a link to Desmos.

Desmos embed

 

Replace the red letters from the code you pasted in the WYSIWYG editor above with the ones you copied from your Desmos graph. 

When you click on Save at the bottom of the page, the graph should load in the window. Note that it won't view correctly if you switch back to Rich Content (visual) mode before saving, but it should after you save.

Need help with any of this? Contact the DLCs

Tags

math | science

App Request Forms

 

app request

 

Search

#ShakoEdu

Popular Blog Posts