4 Tips for Showing Code to Students

One of the core things we do as teachers is show interesting things to students, inciting curiosity and motivating learning.  Teaching code is no different, yet showing code to students can be needlessly difficult.  Here are four tips for showing your students code we’ve learned from observing teachers in the classroom.

1. Be clear about *which* code you’re showing

There’re so many details in code.  It can be quite difficult for students to actually see which thing you’re talking about, like showing them a picture of a forest to teach about tree frogs.  Highlight the ‘treefrog’ by isolating the concept you’re talking about.  For instance, in this example it’s difficult to know what to pay attention to:

Pulling the key variables to the top and adding comments makes it much clearer, even if it adds detail:

Try changing any of the numbers and see what happens. Can you make a symmetrical shape with 5 pentagons?

This second example is both more easily accessible to students – they can change the numbers at the top and see the differences immediately – and more rewarding of sustained inquiry. The improved example can motivate a discussion of for loops, variables, and even coordinate plane Geometry.


2. Your screen should look like their screen

Context switching makes learning harder.  Make sure that the setup you have is exactly like what the students will see on their computers.  This means your code editor should be exactly like theirs, and customization kept to a minimum.  Small changes like custom colors or fonts can have a huge negative impact on students’ learning.

3. Get them hands on!

Code is like language, which means students won’t fully learn it until they do it.  Get students hands on as quickly as possible!  Turn the code you’re showing them into a shared learning object that they can discuss and explain to each other.

4. Pick Examples with Narrative Arc

If you expect students to engage with it, your example should have some sort of narrative arc to it.  For instance this code has little narrative arc:

But this code, demonstrating the same concept of opacity, has a mystery about it that motivates an authentic inquiry into how the code is doing what it does:

Code that is mysterious or even broken in some way lays the foundation for the most fruitful exploration by students.

Showing Students Code with Trinket

At trinket our mission is to make it dead simple to teach with code, so we’ve listened closely to teachers describing the principles above.  To teach with trinket, follow these steps:

  1. Put the code you want to show into a HTML or Python trinket.  Or, choose to start with any of the trinkets above.
  2. Click the Share button to get a link to send your students
  3. Once your students visit the link they’ll see exactly what you see

It’s that easy! We’ve also built great tools for presenting such as Fullscreen mode and font size adjustments into every trinket.  Find these controls

Fullscreen mode and font size adjustments help you clearly show your students the example you're talking about.
Fullscreen mode and font size adjustments help you clearly show your students the example you’re talking about.

in the left hand menu of every trinket above: