CodeFlip Docs Open the visualizer

Embed on a website

Put a program right on your class website, so students step through it without leaving the page.

Get the embed code

  1. Open the program in the visualizer and step to where students should start.
  2. Press Share, then Copy next to Embed with an iframe.
<iframe src="https://codeflip.dev/embed/Ab3xK9pQ2z#step=3"
        width="100%" height="600"
        title="Step-by-step visualization"></iframe>

Paste it into your site

Google Sites
Insert → Embed → Embed code, paste, and press Next, then Insert. Drag the box's edges to make it taller.
WordPress
Add a Custom HTML block and paste the code into it.
A Canvas page
Paste into the page's HTML editor. To add programs to modules and assignments, add CodeFlip to Canvas instead.
Any other site
Look for "Embed", "HTML" or "Code" in the editor, and paste the code there.

Change the size

Change height="600" to make the box taller or shorter. Programs with more variables need more room. width="100%" fills the width of the page.

Change settings in the address

Everything after # in the src address is a setting. Join several with &, like #step=3&bp=5,9.

SettingWhat it does
step=3Opens on step 3. step=end opens on the last step.
bp=5,9Next and Back stop only on lines 5 and 9. See stopping points.
cumulative=1Keeps finished function calls on screen.
grid=0Draws 2D arrays as separate arrays instead of a grid.

Coming from Python Tutor?

Your Python Tutor embeds work on CodeFlip after you change pythontutor.com to codeflip.dev. The converter does it for you.