KS4 Python IDE — Phase 1 + 2

Embeddable in-browser Python IDE for GCSE Computer Science. Console-based Python and Turtle graphics, accordion syntax helper, live variable watch table, and pre-authored trace-table exercises with auto-check.

📊 Open the Flowchart builder →

Editor (Python & Turtle modes)

Run the program and watch the Variables panel at the bottom fill in. Use ▶ Step to advance one trace row at a time — the current line is highlighted in the editor. Click the Turtle button in the toolbar to switch the same widget to graphics drawing.

Trace-table exercise

Pre-authored exercises. Pick one from the dropdown, fill in the blank cells, then press Check. Cells turn green when correct and red when wrong (with the expected value shown).

How to embed in a lesson page

Three steps for the plain editor / Turtle widget:

<link rel="stylesheet" href="ide.css">
<script src="ide-syntax.js"></script>
<script src="ide.js"></script>

<div class="ks4-ide" data-mode="python" data-id="my-snippet">
  <script type="text/python">
print("Hello, world!")
  </script>
</div>

For the trace-exercise widget, also include the snippet definitions and the trace script:

<script src="ide-snippets.js"></script>
<script src="ide-trace.js"></script>

<div class="ks4-ide" data-mode="trace" data-snippet="trace-for-loop"></div>

Available data- attributes:

• data-mode — "python" (default), "turtle", or "trace"
• data-lock-mode="true" — hide the Python/Turtle toggle
• data-id — stable id used for the localStorage key
• data-sidebar="false" — hide the syntax accordion
• data-watch="false" — start with the Variables panel collapsed
• data-starter — starter code as an attribute; for multi-line code use a child <script type="text/python">
• data-snippet — for data-mode="trace", the id of the snippet to load (see ide-snippets.js)