Online python tkinter simulator: 3 games to help you create python GUIs

I made create.withcode.uk to let teachers and students write, run, debug and share python code online a few years ago in order to try to make it easier for students to experiment with code on any device.

Because create.withcode.uk runs python code in your web browser, you don’t need to install any software or download the code before you run it. You just press Ctrl + Enter to run the whole code, or Ctrl + Space to run it line by line.

This makes it much easier to try out code, tweak it and share it as you’re learning, but it’s only a simulation Python: it doesn’t contain all of the features of Python 3 running offline.

One feature that teachers and students have often requested is Tkinter support.

Tkinter is the GUI (Graphical User Interface) module that comes bundled with python. It lets you create programs that have buttons, text boxes and windows rather than just a text console.

I’m in the process of adding some Tkinter support for create.withcode.uk. It’s a work in progress but I’ve implemented enough for you to get some simple GUI programs working.

There are some great website for running python code online such as trinket.io and repl.it. As far as I know, create.withcode.uk is the only one to have an online python tkinter simulator so that you can test out code to build GUIs in your browser.

Here are some of the programs I’ve been using to test out python tkinter GUI support on create.withcode.uk:

Snake game: Online python tkinter simulator
Game 1: Snake in python tkinter
Bounce game: Online python tkinter simulator
Game 2: Bounce in tkinter
Colour Quiz: Online python tkinter simulator
Game 3: Colour Quiz in tkinter

Note:

These games are examples I’m using to test tkinter support on create.withcode.uk. I didn’t write them: the original authors are credited for each game in the source code and description. Please get in touch if you created these and want me to change the way I’ve attributed your work.

Tkinter isn’t really designed for making games – it’s useful for simple GUIs but there are better python modules out there for creating games (such as pygame). You can find some great books and resources here if you’re interested: https://inventwithpython.com/

Tkinter is a huge module so there’s no way I can simulate it all accurately in a web browser but if you have some code that works offline in ‘proper’ python that doesn’t yet work properly on create.withcode.uk, please share a link to it as a comment on this page and I can use it to help add more features and support.

Have fun!

Create.withcode.uk now supports debugging python code with breakpoints

I made create.withcode.uk a few years ago to try to make it as easy as possible for my computing students to interact with python code examples on any device. I wanted to be able to step through lines of code, discuss how it worked then share it with students in a way that let them tweak it, debug it, extend it and share it without the hassle of creating user accounts.

I’ve been thinking a lot recently about how to boost resilience and independence for students in a Computing classroom, particularly when it comes to debugging.

One thing that I’ve noticed that makes a big difference to students is if they’re taught early on how to use debugging tools like breakpoints, stepping and watches.

Step: running one line at a time to check the sequence of instructions runs in the order you’re expecting

Watch: checking the value of a variable as each line of code executes to see how data changes

Breakpoint: telling your code to pause when it gets to a particular line of code so that you can see what happens next

Useful debugging features of an Integrated Development Environment

Stepping and watching variable values has been possible for a while in create.withcode.uk but yesterday I released an update to allow you to set breakpoints on any line of code.

Debugging python code with breakpoints with create.withcode.uk
Debugging python code with breakpoints with create.withcode.uk

The above example shows some python code which will draw some butterfly in random colours.

On the right of the screen you can see the value of each global and local variable. This is really useful for explaining how data changes as your code runs.

The red blobs next to the line numbers show two breakpoints on line 21 and 28. You can toggle a breakpoint on or off by clicking on the line number.

To run the whole code (or up to a breakpoint) in create.withcode.uk, press Ctrl + Enter

To step through one line of code at a time, press Ctrl + .

To run the whole code (up to a breakpoint or the end of the program) press

Ctrl+Enter

To step through just one line of code press

Ctrl+Full Stop

instead. Try out the breakpoints in the example below:

It’s a work in progress, so let me know when you find any bugs or if you have any suggestions on how to improve it.

Happy debugging!

Free tools for teaching data representation of images with python

Free tools for teaching data representation of images with python

In Computing atĀ KS3 in England, students have to learn how images can be stored and manipulated using binary data.

Pupils should be taught to:

…understand how instructions are stored and executed within a computer system; understand how data of various types (including text, sounds and pictures) can be represented and manipulated digitally, in the form of binary digits

This can be a tough part of the curriculum to cover in the limited time available to most schools but it can also be a really exciting way of bridging the gap between the Computer Science and iMedia / IT facets of the course.

In order to follow up from a series of lessons using Photoshop to create and manipulate high quality graphics, I wanted students to be able to understand how the images that they’d just created were stored on a computer.

There are some excellent ‘unplugged’ resources out there where students can see how simple images can be represented by binary data but I wanted Y8 students to be able to write, edit and debug some simple python code that showed them how computers store and process images.

There are two main ways that computers use binary data to represent images. This blog post details how you can use free web based tools to get students to explore how computers can represent and manipulate both bitmap and vector images.

Data representation of images: Bitmap images
Data representation of images: Bitmap images

Data representation of images: Vector images
Data representation of images: Vector images using

The next page gives some activity ideas for getting students to understand how vector images work.