Embedding Online Python Tutor visualizations
This document is a starting point for anyone who wants to embed Online Python Tutor (OPT) visualizations in their webpage. View it online at:
Look at the Git history to see when this document was last updated; the more time elapsed since that date, the more likely things are out-of-date.
An easy way to embed an OPT visualization on your website is to enclose it within an iframe.
If you generate a visualization (e.g., click here) and then click the "Generate embed code" button at the bottom of the page, the following code will be generated:
<iframe width="800" height="500" frameborder="0" src="http://pythontutor.com/iframe-embed.html#code=x+%3D+5%0Ay+%3D+10%0Az+%3D+x+%2B+y&cumulative=false&py=2&curInstr=3"> </iframe>
If you copy-and-paste the above code into your HTML webpage, then it will embed the given visualization as an iframe.
https:// in the
src attribute if you want to embed it in a webpage served over https.
iframe embedding parameters
You can customize the iframe's size by adjusting the
height parameters. All other parameters are passed
after the hash mark (
# character) in the
src= URL string. Note that OPT uses the hash mark rather than the usual
? query string. Here are the currently-supported parameters:
code- The Python code to visualize (mandatory: URL-encoded string)
py- Language version (mandatory:
2for Python 2.7 or
3for Python 3.3, other languages: js, ts, ruby, java, c, cpp)
verticalStack- Set to
trueif you want the code and visualization to stack atop one another (optional)
curInstr- A (zero-indexed) integer of the execution point to directly jump to in the visualization (optional)
cumulative- Set to
trueif you want exited functions to be displayed (optional)
The iframe-based approach has some limitations (e.g., hard to dynamically resize the enclosing iframe, cannot run while offline, limited parameter choices). Here are instructions for a more powerful but harder-to-use alternative -- directly embedding visualizations.
To directly embed a visualization, you:
- Include some other stuff in your .js file and then embed it within your HTML webpage.
Note that the embedded visualization is read-only -- that is, the user can interact with the visualization by stepping forward and backward, but they cannot edit the code. If the user wants to click the 'Edit code' button to edit the code, then they are brought to the code editor page.
Also, note that the visualization is run client-side; thus, after the user loads the webpage (from the Internet or, say, a USB drive), they can play with the visualization without an Internet connection.
Finally, multiple visualizations can be embedded in a single HTML webpage, although you need to be careful to redraw the SVG arrows when page elements are resized or moved.
Let's attempt to go literate programming style now ... load up
your browser to see a demo. And then view its source code and follow the instructions there,
which should then lead you to
Everything you need to know should be in the demo code!