Python Code Lab: A Browser-Based Python IDE Built for Teaching

Your online editor at: https://jamesabela.github.io/jsfun/pythoncopy

Teaching Python often involves moving between several different tools. Students may write code in one application, trace algorithms on paper, use a separate website for exercises and then submit their work somewhere else. Python Code Lab brings these activities together in one browser-based environment designed specifically for computer science classrooms.

Students can write, run and debug Python programs without installing any software. Teachers can demonstrate algorithms line by line, provide self-marking programming challenges and share complete lessons using a single link.

Getting started

When Python Code Lab opens, users can begin in several ways. They can write a new program using Blank File, upload an existing Python file, select a ready-made algorithm example or load code from a web address.

Teachers can paste the raw URL of a Python file into the loader. Python Code Lab then adds the file address to the page URL, creating a link that can be shared directly with students.

This makes it possible to prepare a program once and open it on every student device without distributing files manually.

Short programs can also be shared using Copy Link. In this case, the code itself is stored within the URL, removing the need to host a separate file.

A straightforward Python editor

Edit Mode provides the familiar features students need when learning Python:

  • A code editor
  • A Run button
  • A console for output
  • Support for input()
  • A Reset button for cancelling a program or clearing its output

The aim is to remove unnecessary complexity. Students can concentrate on writing and understanding Python rather than configuring an advanced development environment.

The browser environment currently supports commonly used classroom modules, including random, math, statistics, datetime, string, time and turtle.

Programs requiring specialist packages may still need to be downloaded and run in a local Python environment.

Moving from blocks to Python

For students who are moving from Scratch or another block-based language, Python Code Lab includes a visual Blocks Mode.

Students begin with a Scratch-style event block and connect instructions underneath it. The blocks generate standard Python code, helping learners see the relationship between visual programming structures and their text-based equivalents.

For example, students can use blocks for:

  • Variables and input
  • Selection
  • Repetition
  • Text joining
  • Turtle movement
  • Pen controls
  • Timed waits

A forever block becomes a while True: loop, while motion and pen blocks generate familiar turtle commands.

Students can run their program without leaving the block workspace. When they are ready, Back to Text Mode transfers the generated Python into the main editor.

Python Code Lab also includes a Python-to-blocks tool. This attempts to convert suitable Python programs back into visual blocks. Not every Python structure can be converted, but the tool can help teachers test whether a short example is appropriate for block-based exploration.

Seeing Python execute

One of the most useful teaching features is Display Mode.

When a program enters Display Mode, the editor becomes read-only and Python Code Lab prepares the code for visual tracing. Teachers and students can then move through the program one instruction at a time.

The current line is highlighted while separate panels show:

  • Variables and their current values
  • Program output
  • Active function calls
  • The call stack

Users can step forwards, move backwards, reset the trace or use automatic playback.

This is particularly useful when explaining variables, loops, functions, searching algorithms, sorting algorithms and recursion. Instead of asking students to imagine what the computer is doing, the class can watch the program state change.

A full-screen option also makes the tracing interface suitable for classroom demonstrations.

Reviewing how code developed

Python Code Lab records a history of the program while the page is open.

Different markers identify important moments:

  • Green records when the program was run.
  • Orange records an edit used during playback or saving.
  • Red records code that was pasted or loaded.

Students can use playback to review how their solution developed. This can help them identify when an error was introduced or revisit a previously working version.

A counter also records pastes and uploads. This provides teachers with additional context about how a program was produced without preventing students from using external resources appropriately.

Turtle graphics in the browser

Python Code Lab includes an integrated turtle canvas. When a program imports turtle, the drawing area appears beside the editor.

It supports frequently used movement commands such as:

turtle.forward(100)
turtle.backward(50)
turtle.left(90)
turtle.right(90)
turtle.goto(0, 100)
turtle.circle(40)

Students can also control the pen, choose colours, fill shapes and change the turtle cursor.

Turtle programs can be traced in Display Mode, allowing students to connect each line of Python with the change it produces on the canvas.

Completed drawings can be exported as PNG images using Save Image. This makes turtle suitable for creative programming activities in which students design artwork, patterns, flags, diagrams or simple visualisations.

Instructions beside the code

Python Code Lab automatically finds web links included in Python comments or strings.

These links appear in a Reference Links panel. Students can open a link in another tab or preview it directly beside their program.

The first ordinary link in a course file can therefore point to a tutorial page containing:

  • The lesson context
  • Instructions
  • Images
  • Worked examples
  • Hints
  • Extension challenges

This allows the code editor and lesson instructions to remain visible at the same time. Students do not need to continually move between separate tabs or applications.

YouTube links and Shorts links can also be converted into embedded previews.

Creating self-marking coding challenges

Teachers can turn an ordinary Python file into an automated coding task by adding specially formatted comments.

For example:

#Input
# 5, 10
# 3, 2

#output
# 15
# 5

Each line beneath #Input represents one test case. Values separated by commas are entered into consecutive input prompts.

Each corresponding line beneath #output describes what must appear in the program output.

When Python Code Lab detects these comments, it displays a Run Tests button. The tool runs every test and shows students which cases passed or failed.

The tests check output rather than requiring students to write one exact solution. This gives learners freedom to develop their own algorithm while still receiving immediate feedback.

Test instructions are hidden during normal execution, preventing students from simply reading the expected results from the editor.

Building connected courses

Several Python challenges can be connected to create a complete learning sequence.

The #Next command identifies the next Python file:

#Next https://raw.githubusercontent.com/example/course/level2.py

The next level remains locked until the student passes the current tests.

The final activity uses #End instead:

#End Introduction to Python Selection

After completing the final challenge, students receive a course completion screen and can generate a personalised certificate image.

This structure allows teachers to create progressive courses in which each activity introduces or reinforces a particular skill.

A typical course folder can include:

  • Python starter files
  • HTML instruction pages
  • Images or animated demonstrations
  • A README containing the course order and launch link
  • A teacher guide containing lesson notes and solutions

Reading and writing files

Python Code Lab includes browser-based support for simple text-file programs.

When a program attempts to open a file that is not yet available, the tool asks the student to upload it. The uploaded filename does not need to match the name used in the Python code.

Teachers can also preload a file by adding a #load comment:

#load https://raw.githubusercontent.com/example/files/scores.txt

Python Code Lab downloads the file before running the program.

Multiple files can be loaded using several #load lines. If the program creates or updates a file, students can download the saved version to their computer.

This makes it possible to teach practical file-handling activities such as high-score tables, quiz data, simple records and text analysis without requiring local file configuration.

Automatically generating flowcharts

The Create Flowchart feature attempts to turn a short Python algorithm into a visual flowchart.

It is intended for programs of up to approximately 30 lines and works best with clear, conventional programming structures.

The generated diagram can help students compare code with its algorithmic representation. It is also useful when discussing sequence, selection and iteration or preparing students for examination questions that move between pseudocode, flowcharts and Python.

Automatic conversion will not interpret every possible program perfectly, but it provides a useful starting point that students can evaluate and discuss.

Ready-made challenges

Python Code Lab includes access to a collection of programming challenges. Many are designed to encourage creative solutions rather than only producing one prescribed answer.

Selecting a challenge opens it directly in the IDE. Teachers can also copy the generated link and distribute a particular activity through their learning platform.

This creates a quick route from discovering an exercise to writing and testing a solution.

A tool designed around classroom practice

Python Code Lab is not intended to replace every professional Python development environment. Its purpose is more focused: to make Python easier to teach, demonstrate, practise and understand.

For teachers, it provides a way to prepare shareable examples, demonstrate execution, build structured courses and offer immediate feedback.

For students, it reduces setup barriers while making the normally invisible behaviour of a program easier to see.

By bringing blocks, text-based programming, tracing, turtle graphics, instructions, tests, file handling and flowcharts into one browser window, Python Code Lab creates a practical bridge between learning Python syntax and understanding how programs actually work.

Author