An effective and time-honored technique for introducing teaching algorithmic thinking to a class is to make a peanut butter and jelly sandwich.
No, I’m not joking. Here’s proof: a university computer science class making a sandwich.
As humans, making a sandwich is easy. For computers (robots, at least), it can also be easy – given the right instructions. Leading the class through making a sandwich with one student as “Computer” can give students a sense of how literal computers are. Seeing a student poke through the foil on the jar of peanut butter with a knife because there were no instructions to remove it is a visual experience that they’ll be able to remember when programs inevitably do something unexpected.
Making Visual Code Examples
Code isn’t physical like Peanut Butter and Jelly. Can we make it visual?
A typical text illustration of a for loop might look like this (click Run to see what it does):
There is a good thing about this example: it’s interactive. Students can change the code and run it again to see what happens. (Try it yourself!) This kind of exploration builds confidence and curiosity. Great.
But many students won’t have a lasting understanding of the for loop from this example. It doesn’t encourage much creativity or remixing, so it’s easy for them to think they’ve gotten it only to be confused later. Let’s take that same for loop example and make it visual instead and see the differences (click Run, just like before):
Some things you and your students might try:
- Change one of the tina.forward(130) lines to say tina.forward(100) instead
- Change tina.color(‘blue’) to tina.color(‘green’)
- Change tina.width(4) to tina.width(8)
- See if you can make tina change colors or widths inside the for loop!
There is a lot of fertile ground for teaching here. When I’ve brought visual examples like this into classrooms, kids are instantly engaged. They can see that there’s something ‘in there’: the turtle. I’ve personified the variable, so they can realize that her name is ‘Tina’ and she’s the Turtle shape on the canvas. Their minds immediately leap to what else Tina could do. I’ve got their attention and we’re ready to dig into the example, change some of the code, and really understand what’s going on.
Going Deeper with Visual Examples
The great thing about the Turtle module we’ve been using is that it supports writing on the canvas in addition to drawing on it. This allows us to combine the two to produce an example that would sustain close to a full class period of experimentation and exploration:
Using an example like this I could talk about loops, objects, the Cartesian plane, even string interpolation, according to what students are interested in and are ready for. With hands-on experience in the code and a visual understanding of what it’s doing, this visual example gives students that confidence and familiarity with for loops they’ll need to move on to reading and writing even more complex code.
By the way, if you’re not familiar with Turtle, Logo, or the work of Seymour Papert, I highly recommend reading up. We have computer education pioneers like Papert to thanks for so many of the great ideas and resources we build on every day.
Visual Examples for Python with Trinket
As you might have guessed, Trinket is a big supporter of hands-on, visual teaching. We make free Python widgets that you can put on any page, such as Google Sites or Wikispaces. While many other sites are designed for students to find their own way, Trinket is a tool for teachers to guide students and there’s nothing we like better than helping Teachers be successful in the classroom. Check out our demo Hour of Python workshop and let us know what you think!
Questions? You can find us on Twitter, Facebook, and, of course, at Trinket.io.