Teaching Technology

Happy CSEdWeek

In honor of CSEdWeek (Computer Science Education Week), I have a pledge to you all: I pledge to post a lesson plan or resource for every day of the week. I am a little behind, seeing as it’s already Tuesday, so I have some catching up to do.

Let’s start with Sunday, the first day of CSEdWeek. Since there’s no school on Sunday, I decided to turn my attention towards the usefulness of computational thinking around the home with my sock-sorting algorithm. Yes, you heard me right. Now, you can apply computational thinking to doing your laundry. But first, you might be wondering what I mean by computational thinking.

What is Computational Thinking?

Computational thinking builds on the power and limits of computing processes, whether they are executed by a human or by a machine. Computational methods and models give us the courage to solve problems and design systems that no one of us would be capable of tackling alone.

The beauty of computational thinking is that is helps us learn to use computers to solve problems or simply solve problems in any arena, such as dealing with the sock problem.

The Sock Problem

You’ve been there; I’ve been there too. Your laundry is piling high; your shirts are crushed under the weight of the three-plus loads you never bothered to fold; and now, your kids are looking for their underwear under their beds, in the laundry hamper, and anywhere but where they are supposed to be.

You head out to the laundry room, grab that pile of clothes and begin sorting. You start with the towels—they’re easy to find, easy to fold, and take up most of the bulk. Next, you find pants and shirts and go to work on them. Things are going well, in little to no time, your mountain of clothes is now more like the steppe of clothes.

You’re back is getting sore, but you plod on. You deal with t-shirts and underwear, and then, at the bottom, you see them: the socks. They lie in wait . They are the wiley clothes; in the many years you have folded laundry, you’ve never seemed to have completely folded them all. They are the smallest of the clothes, so even though they take up an eighth of the bulk of clothes, in number, they represent over half of the items in your laundry. If this weren’t bad enough, after dealing with the 30-some items of laundry, you’re still left with mis-matched socks and orphans. We’re they leftovers from a kid sleepover? Did one get lost at the last campout? Did they slip through your drier into another dimension…?

Few sober-minded laundry folders savor the thought of dealing with the socks. Socks are, after all, the dregs of laundry. Typically the last thing a person wants to do is go through this hodge podge of clothes: a sock jambalaya, as it were. Really, who in their right mind wants to go through the tedium of sifting through the 40+ socks to find their mates and return them to home base? What you need is a sock folding algorithm.

The Solution

The solution takes on two phases: divide and conquer and sort and match.

Divide and Conquer

Phase one has two steps that each follow the classic, Divide and Conquer algorithm. It’s where you divide your targets in half (or thirds or quarters). By doing this, you are able to focus on no more than half  of the possible outcomes at any given time. We’ll still have to deal with both halves in my sort, but this method helps you to not concern yourself with all the possiblities and focus on a manageable chunk.

With this in mind, the goal here is not to overthink.

  1. Begin with a general sort by color: this is no time to think, this is time to quickly toss your socks into one of two (or three) piles:
    • Whites
    • Darks
    • Multi-colored (this is optional, but often times necessary near the holidays)
    • Feel free to add a stack for greys &/or browns (also optional)
  2. Sort by Size: Take each of the three piles and apply one more general sort. Again, this is a quick divide and conquer sort without any thinking. The more you think, the longer and more cumbersome it becomes.
    • Short Socks here you want just socks that go no higher than above the ankles
    • Long Socks any sock longer than ankle length go in here

Apply a Sort to the Remaining Piles

At this point, you have 2-3 or so stacks of socks. It didn’t take long at all because you quickly divided them. Your job now is to sort each stack. There are all kinds of sorting methods, but there are two sorts worth mentioning: the bubble sort and the network sort. Some computer scientists will scoff at me for using the bubble sort, but remember, these are socks, not a table of database records.

The Bubble Sort: this is actually one of the most inefficient sorts as far as computer science goes, but in a short stack of maybe 10-20 socks, you probably won’t know the difference. Here’s how it goes. According to CSUnplugged.com

Bubble sort involves going through the list again and again, swapping any objects sideby-
side that are in the wrong order. The list is sorted when no swaps occur during a pass
through the list.

Technically, you aren’t actually sorting now. Instead you are matching socks with their mates, but the idea is the same, compare one sock to another, if it matches, fold them and pull them from the stack.

Network Sorting: in a network sort, you are applying multiple “threads” of sorting. You really need to watch the CS Unplugged Video on Sorting Networks or review the online lesson plan. Here’s how it works:

  1. Line all the socks from the remaining pile along the back of a couch
  2. Get your spouse and children (if you have them) to line up side by side starting on the left-hand side
  3. Each person takes a sock in front of them and compare to the person on your right.
    • If they match,
      • fold them.
    • If they don’t match,
      • check to see which of the two is smaller and put the smaller sock on the left and the larger on the right
  4. Continue this process until all are sorted or you’re left with sad lonely socks

What do we do with the left-overs?

I knew you were going to ask. This depends on your attitude. If you notice that a particular sock never seems to have a match or has a hole in it, it’s time to send it to the cleaning rag pile. If that solution does suit you—maybe you’re more the creative type—you could make a sock monkey or finger/hand puppet.

I’m sorry that my solution doesn’t sound much like computational thinking, but according to the Exploring Computer Science (ExploringCS) Curriculum…

analysis of various solutions and algorithms will highlight problems that are not easily solved by computer and for which there are no known solutions. (p. 21)

Maybe the leftovers are a traditionally unsolvable problem by computer standards. If so, maybe it can become a Turing Test.

Hello, Corvallis!

I want to give a shout out to all my workshop participants hanging out in Corvallis with me this week. Yo!

In case you’re wondering, I’m back at OSU for the SuperQuest Summer Institute to present a workshop titled, Web Design From Soup to Nuts: Develop Your Own Word Press Site. The workshop starts on Tuesday and goes through Friday.

When planning our offerings, we decided to hit web design from a new angle. I chose to make Word Press my vehicle for teaching the many technologies used in Web Development: HTML, CSS, PHP, MySQL, & JavaScript. I chose Word Press because

  • it encorporates all major aspects of web development
  • it’s quite easy to peek behind “the curtain” of the magic of this content management system (CMS)
  • it’s also easy to swap out new themes and tweak with the designs
  • it quite frankly “rocks the casbah

Today, I presented a sampling of CS Unplugged to around 20+ teachers, many of whom were completely new to CS Unplugged. In just a little over an hour, we counted in binary, became human fax machines, and played battleship using linear, binary, and hash searching techniques.

CS Unplugged in Eugene

Hello all teachers, administrators et. al. who have attended my CS Unplugged workshop in Eugene. I’m presenting a taste of CS Unplugged at the OACTE Spring Conference in Eugene, OR. I only have 1 hour and 15 minutes to attempt to cover 3 topics.

Below are the PDF versions of my presentations:

I hope I can get to the Searching Algorithms part because I have an idea for an epic human battleship contest. I spent much time preparing party hats and purchasing goodies for the winners. I might have to switch my initial order of events to make sure we can play battleship.

The Design Process for the Da Vinci Days Website

As a teacher of web design, I feel that teaching the web design process is essential, but it’s often times difficult to do, so whenever someone opens up their own process of designing a production site (especially one as nice as the site for the Da Vinci Days), I think I should link to that site. So, without further ado, you must visit The da Vinci Days Web Design Process (from the ProWorks Blog)


The next challenge for me as a designer is building the framework of the actual website so that it looks exactly like my design. The design also needs to hold up to real data getting plugged into it, so I make sure everything’s flexible. In the end we come up with an entire visual system for da Vinci Days that encompasses any type of page Brenda wants to make!

Notes For Stupid Browser Tricks Day 1

Various Built-in JavaScript Functions We Covered

  • alert("Help Me!!! I'm trapped in an alert box!");
    • Alert rings the bell and pops up a window of information
  • prompt("What's Your Sign?", "Neon");
    • Prompt asks a question (“What’s your sign?”), and then adds a prompt (“Neon”) as a possible answer or hint as to how to enter the box
    • Prompt will return what the user types in the input box
  • confirm("Can I move on now?");
    • Confirm asks a question (“Can I move on now?”), and returns either  a
      • true (if ‘okay’ was pressed)
      • false (if ‘cancel’ was pressed)

Objects in JavaScript

JavaScript is like PHP, ActionScript, or Python in that it can be coded as a top-down, procedural language (run one statement at a time, working your way from top to bottom) or it can be coded using the Object-Oriented Programming (OOP) paradigm. This makes JavaScript one way for a teacher to introduce Object-Oriented Programming in small chunks. When it comes to browsers, JavaScript has some built-in objects that make working with web pages very handy.

The three objects introduced yesterday were:

  • document – The document class refers to web pages. Every web page has properties and methods.
  • navigator
  • date


Anatomy of a Function & Function Calls

Best Web Design Tool Ever

No web designer or web design class is complete without Notepad++ (my favorite tool for working on web pages). Download it here: http://sourceforge.net/projects/notepad-plus/files/


  • It’s free
  • It can be loaded and run directly onto a flash drive (out of the box)
  • It has color coding for your pages and supports color coding for a huge number of languages (ASP, PHP, Python, & much more)
  • It allows you to open multiple windows for viewing multiple pages (Right-click and choose ‘move to another view’)
  • It has FTP built right in. If you want to upload your pages to a host, and you have all the settings for FTP, you can set up a connection and work directly on the host site or work on your local folders and click the upload button.
  • There’s a launch feature, it should be set up to launch pages in browser (Includes Firefox & IE out of the box)
  • And, for all the hello kitty fans out there, they even have a hello kitty theme where all your code looks like the hello kitty folks styled it (little known fact there).

Warning: setting Notepad++ theme to “Hello Kitty” may cause seizures.

SuperQuest Flash Files

Before I post all the files, I want to thank all who attended my workshop. We gathered quite the range of experience. I had so much fun, and I appreciated the input you gave. I hope you take more SuperQuest courses in the future.

Here you go folks!

Flash Files

These are the source files (.fla), shockwave movies (.swf), web pages (.html), & necessary JavaScript (.js) to both edit and post animations. They are all zipped, so you will need to save them (right-click > Save Target As…) and then extract the zipped files.