A Little Bit of Javascript

This post originally appeared on the Software Carpentry website.

As I've mentioned before, one actionable finding in educational research is that faded examples—ones in which progressively less of the solution is shown to students as they progress—are a very effective teaching tool. I've been thinking about how to add them to this course, and have an idea I'd like to try out. It requires more Javascript than I know, though, so I'm hoping someone who reads this blog will be willing to write it for us. (And in general, if anyone wants to help produce material for this course, please get in touch: we're looking for scripts, slides, voiceovers, examples, artwork, and everything else that an open education project needs.)

My idea is to create something like a simple folding editor to progressively expand solutions in place in a controlled order. I want to put specially-formatted comments in code to mark folds:

import sys, re
'''Find all duplicated words in an input file.'''
# <4> Finally, define a pattern that will match duplicated words.
pattern = r'(\b\w+\b)\s+\1'
# </4>

# <2> Process lines of text with a regular expression using the looping pattern we've seen before.
def process(lines):
  result = set()
  for the_line in lines:
    for match in re.findall(pattern, the_line):
      # <3> Extract data from matches. This is specific to *this* problem, and has to sync with the pattern.
      word = match.split()[0]
      result.add(word)
      # </3>
  return result
# </2>

if __name__ == '__main__':
  # <1> Write the main body of the program first using the read/process/write pattern we've seen before.
  lines = open(sys.argv[1], 'r').readlines()
  results = process(lines)
  for r in results:
    print r
# </1>

It will initially appear as:

import sys, re
'''Find all duplicated words in an input file.'''
...4...
...2...
if __name__ == '__main__':
  ...1: Write the main body of the program first using the read/process/write pattern we've seen before...

Clicking on the fold marked '1' expands it, and draws attention to fold #2 by putting its comment text inline:

import sys, re
'''Find all duplicated words in an input file.'''
# ...4...
# ...2: Process lines of text with a regular expression using the looping pattern we've seen before...
if __name__ == '__main__':
  # Write the main body of the program first using the read/process/write pattern we've seen before.
  lines = open(sys.argv[1], 'r').readlines()
  results = process(lines)
  for r in results:
    print r

Clicking '2' expands it to show (and draw attention to) #3, et cetera. And there would be markers of some kind to re-fold an item, which would automatically re-fold all higher-numbered items at the same time. This would let us show readers how we created a solution, not just the solution itself; the marked-up code would be a bit ugly, but pretty easy to create (at least for small examples).

So, any volunteers?