Building a Smarter Python Editor

Teachers and students from all over the world are using our Python trinket to write code in their CS, Math and Science classes. As we’ve visited classrooms using Trinket, we’ve heard requests for an even smarter python editor that helps students learn as they code. There are plenty of tutorials out there, but Trinket students and teachers want help making their own code projects, not just pre-cut examples.

So over the past few weeks we’ve quietly added key features to make our Python trinket more helpful for beginning coders. These updates include

• Auto-complete. Inspired by Bret Victor’s idea of “creating by reacting”, Trinket’s autocomplete is designed to help students see what’s possible in Python as they code.
• In-Editor Explanations. Python’s 20-some keywords, like if, for, def, and import, form the core of the language.  Our new contextual explanations help students learn what they are and how they’re used, right from the editor.
• Highlighted Errors. We’ve learned that simple typos are the second most common source of error for students.  By highlighting them early, we prevent frustrating errors as students code, similar to how red sqwiggly lines help writers catch spelling errors early.

We’ve got many more exciting ideas in the works.  In the meantime, we hope these three new features help make Trinket an even more indispensable tool for coding in the classroom. Read on for a brief description of each new feature.

Auto-Complete

One of the great things about block-based programming tools, like Scratch and even our own Blocks trinket, is that they let students know what’s possible. Beginners can quickly get an overview of what commands are available to them. This is something you don’t typically see with text-based editors. Or if you do, there’s little additional information or context that comes along. We’ve changed that.

Let’s see an example. In the trinket below, we’ve started writing a program that uses turtle. As a beginner I may have no idea what else tina the turtle can do. Try this: on the last line type a dot (.) after tina and you’ll see all the methods she understands.

You’ll notice some methods, like forward, have extended documentation. We’re providing much more than just the method names and their arguments – we’re giving students practical descriptions in easy to understand language. Auto-complete also works for everything in a Python trinket: keywords, user-defined variables, even your own modules.

Keyword Descriptions

Auto-complete is unbeatable when you’re writing a new program or adding to an existing one. When students encounter existing code, however, there are likely keywords in the program that the student hasn’t seen before. In the example trinket below, place your cursor anywhere in the “for” keyword. At the bottom of the editor, you’ll see a short description of what “for” does. You’ll also notice a “more” link which will give students additional info about what exactly “for” does and how it’s useful.

Check out the other keywords too, like import, in, and print. The editor highlights keywords in purple.

Highlighting Name Errors

A common issue for developers of all experience levels is dealing with simple typos. In many of our examples we use a variable named tina, which is an instance of the turtle module. It’s so easy to switch a letter, run the program, and get some cryptic error. These “simple” errors can cause confusion and frustration for beginners. Another of our recent updates now checks your program for issues like this and will highlight variable names not found anywhere else in your code. Take a look at the example below and notice that “tian” (a misspelling of tina) is highlighted. Hover your mouse over the highlighted word to see the error.

This is just the beginning. We’re working on exciting new ways to identify things like syntax errors and also to guide students to solutions.  Stay tuned for updates in the coming weeks!

We hope you and your students find these updates useful. We’re pretty excited about them and can’t wait to hear your feedback and reactions. Try these updates out and let us know how they work and what we can do to make them better.

P.S. We recently released Instant Login with Clever, which lets students log in to Trinket with one click using an existing SIS account. If you are a district administrator, teacher, or school administrator and are interested in learning more get in touch and we can help get you set up.