Coding Outside the Computer Classroom

Do this on pencilcode.net

Why teach coding to students who may never code for a living?

  1. Because computation is a model for cognition.
  2. Because programming teaches that tenacity pays off.

Two tips for non-computer-science teachers who introduce a bit of coding into their classrooms:

  1. Students should write programs that model their own thinking process.
  2. Students should be aware that preserverence in debugging is part of what they are learning.

As with any discipline, coding takes time and practice to master, so you should not expect code to work right away. However, with modern tools and a few examples to start with, basic coding is accessible to all students.

Example: Copyediting

Student project: identify words to remove from wordy text.

Here is a program that highlights patterns found in text. The student's sample text is stored in a variable, and the string "replace" method is used to mark the matching patterns with an HTML tag.

Students should consult a writing style guide for ideas on wordy text patterns to flag. 

text = """
When writing is found to be cluttered with unnecessary
phrases, a large number of readers lose interest, turning 
elsewhere for their information.
"""

text = text.replace /ing/g, '<mark>$&</mark>'
text = text.replace /to be/g, '<mark>$&</mark>'
write text

There are a few tricks at work here that should be shown to students by giving them an example:

Although these programming tools can be explored and tweaked, the focus of the exercise is to think about editing and build a program that flags more wordy patterns.

Writing the program is a way for a student to model the process of editing. Working together, students can build more comprehensive programs and test with each others' text.

This exercise can be extended in ways that let students explore more advanced coding:

Just as wordy text can be trimmed, a wordy program can also be slimmed down. A computer science teacher would teach the following technique using loops and variables: 

...
text = text.replace /ing/g, '<mark>$&</mark>'
text = text.replace /to be/g, '<mark>$&</mark>'
text = text.replace /large number/g, '<mark>$&</mark>'
...

Each of the above lines is identical except for the highlighted pattern. So the highlighted patterns could be replaced by a variable, and the variable could be assigned a variety of values in a loop: 

...
for p in patterns
  text = text.replace p, '<mark>$&</mark>'
...

Here is a slimmed down program using a loop: 

text = """
When writing is found to be cluttered with unnecessary
phrases, a large number of readers lose interest, turning 
elsewhere for their information.
"""
patterns = [
  /ing/g
  /to be/g
  /large number/g
  /elsewhere/g
]
for p in patterns
  text = text.replace p, '<mark>$&</mark>'
write text

Example: Mapping Statistics example by teachers at Beaver Country Day School

Student project: represent statistics on a map.

To draw information on map, we can make a turtle that uses "wear" to display a map from the internet. Then we can draw some information on the map by drawing dots with the main turtle. 

Somalia = new Turtle
Somalia.wear 'http://goo.gl/4E8BcV'
Somalia.css 'z-index', -1
moveto 110, 80
dot yellow, 30
label "Eyl"
moveto -25, -105
dot skyblue, 70
label "Merca"
ht()

There are some tricks that should be given to students to make this work: put the map turtle "behind" the drawing layer by setting its "z-index" to -1. Use "label" to draw text. And hide the drawing turtle at the end using "ht()".

The process of finding the right coordinates for each city on the map requires trial and error. This trial-and-error is part of the learning process! Making the program work leads to the questions:

Here is a program that clarifies the program using computer science tools: a list of objects, and a loop. It defines cities as a list of objects, each one with a name, coordinates, exports, and color. Then by writing for city in cities, it loops through each item in the list, repeating a similar process for each one. 

Somalia = new Turtle
Somalia.wear 'http://goo.gl/4E8BcV'
Somalia.css 'z-index', -1
cities = [
    name: "Eyl"
    coordinates: [110, 80]
    exports: 40
    color: yellow
  ,
    name: "Merca"
    coordinates: [-25, -105]
    exports: 90
    color: skyblue
  ]
for city in cities
  moveto city.coordinates
  dot city.color, 5 * sqrt(city.exports)
  label city.name
ht()

The process of abstracting from the original program to the second program allows the student to think about what goes in to mapmaking as a general process: each point has a name, a coordinate, a color, a statistic, and so on.

Example: Chinese Characters example by teachers at Beaver Country Day School

Student project: write a program to draw a Chinese character.

Turtle motions can be used to stroke a Chinese character. Students should choose a character and use a Chinese dictionary to make sure strokes are in the right direction, order, and proportion.

The starting grid is given (the first 8 lines of code), and the basic turtle motions are explained. 

chgrid = (size) ->
  d = size * sqrt 2
  pen gray, 0.5
  for [1..4]
    for [1..4]
      fd size; rt 90
    rt 45; fd d; bk d; rt 45
chgrid(150)
pen blue, 5
pen off
movexy -25, 125
pen on
rt 135
fd 50
pen off
movexy -75, -40
lt 45
pen on
fd 65
rt 90
fd 175
rt 135
fd 40
pen off
movexy -75, 95
rt 135
pen on
fd 75
rt 135
fd 130
pen off
movexy +200, +120
pen on
rt 25
fd 75
pen off
fd 5
pen on
lt 120
fd 150

Possible extensions: