Using PlainCards to create classroom materials

For a while I've had my eyes open to pick up some printable cardstock that was pre-perforated to make 'playing card'-sized classroom material.

I've tried printing the cards out on regular paper, but that doesn't feel right when you have a stack of them. Laminating helps make the cards sturdier, but they still don't slide off each other the way regular playing cards do (and the cards tend to stick together a bit).

The standard place to go for cardstock products like this is Avery, and they have a number of products that are almost (but not quite) like this: they list Business Cards, Greeting Cards, Note Cards, Index Cards, Postcards, Tent Cards, Rotary Cards, and ID Cards.

But not Playing Cards.

This is unfortunate because the cardstock products that they have don't work well for cards that you want to stack and hold in your hand. Either the size is wrong (business cards are too small; greeting and note cards are too big) or the cards don't slide against each other well.

PlainCards

However, a company called PlainCards makes exactly what I was looking for: micro-perforated cardstock that you can run through your printer to make custom cards.

My immediate need was to create "number system" cards to teach binary, octal and hexadecimal, so I picked up a set of the Blank Playing Cards with Pattern Backs.

These are blank on one side and have a standard 'playing card' pattern on the back so that you only need to print on one side. They also offer cards that are blank on both sides so you can print your own card backs, but this seems unnecessary for classroom material.

Software

To layout the card designs, PlainCards offers their own QuickCards3 software. This is free to download, but you need to buy it for ~$17 if you want to be able to print. I can't comment on the quality of the software since I haven't used it, but I didn't feel it was worth purchasing. One annoying thing about how they market this software is that they divide it into three separate versions: one for Playing Cards, another for Game & Trading Cards and yet another for Tarot Cards. Of course, you have to buy each one separately (or get the special bundle pricing).

Rather than use their software, I created some blank templates in Inkscape, which is a freely available, open-source vector drawing package (download here for Mac, Windows, et al.). Note that these template are SVG files, so they should work fine in any vector drawing application like Illustrator or Freehand.

Download: PlainCards Blank Template

The templates are quite simple: they contain boxes marking the micro-perforation outlines on the PlainCards cardstock. To use the templates, simply:

• Add your design/artwork
• Use the bounding box outlines to center the design for each card
• Delete (or hide) the bounding box outlines
• Print

Note that the perforations are centered and symmetric on the cardstock, so you don't need to worry about paper orientation when printing.

Overall

Overall, the PlainCards did exactly what I wanted them to do and I'll certainly be using more of them to create class materials. After I finish the current batch of number system cards, I plan on going back and re-doing the Binary Magic Trick cards so they can be printed directly onto PlainCards.

Other Reviews

Here are a couple other reviews for PlainCards, written by people using them to make custom cards for their games. They provide some useful tips on how to carefully remove the cards from the cardstock after printing.

• PlainCards FTW!
• Making Mordheim Campaign Cards with PlainCards

Getting "Computing in the Core"

I've typically avoided spending much time on trying to convince school board (or whomever) that they should do more to include Computer Science & Engineering & Programming in the K-12 curriculum. This is not because I feel this is unimportant (double-negative = yes, I think it's important), but rather that I'd rather not get mired in the politics at this point. In any case there are lots of competent people already working on this (uphill) battle.

I've also felt that I can do my part by creating and publishing various assignments, projects and presentations so that other instructors can make use of them. (I've been doing OK on the 'creating' part, but I have a large backlog of material I need to get around to 'publishing').

Getting back to the 'lots of competent people already working on this' topic, I just saw the announcement for Computing in the Core (CinC) which touts itself as a:

...non-partisan advocacy coalition of [blah, blah, blahs] that strive to elevate computer science education to a core academic subject in K-12 education...

And it made me go 'yea!'

Even if they focus only on 9th-12th grade (which I hope they don't), their success would still makes a great start since eventually the requirements will trickle down to the lower grades. I strongly believe that we should be starting earlier with CS education and that many of the problems we encounter are due to the late start, but that's another topic for another day.

I was reminded of the importance of getting CS into the core curriculum when I was talking with a friend the other day:

This friend has a daughter who attends a middle-school with an after-school robotics program. She was interested in this class (and had done some robotics in the past) but none of here friends were going to be taking it. In the end, she chose not to sign up for the program.

If this had been a "6th period robotics" class that everyone had to take, this would not have happened. It's difficult to be the only one of your peers interested in something like this. Who knows, maybe her friends would have enjoyed it as well.

But to finish up on a positive note. Yea for CinC! I hope that they are wildly successful.

Computer Class - Week #1

[So, this past week my Computer Class finally started. We purposefully delayed the start until the school year was well underway so that the students didn't have everything starting at the same time. This class is sortof a continuation of what I taught last spring, and sortof a new class since we'll be taking things a different direction.

Last spring, I covered basic pre-programming skills: number systems + logic and data representation. Later we went into electronics since that meshed well with what was being taught in the students' regular class.

This year I'll be doing (roughly) the following:

• (Review) Pre-programming skills: number systems and logic
• How computers work and computer architecture
• Computer programming (embedded systems like GBA and Arduino, then HTML+JavaScript)

The rest of this post is a rough outline of what I covered in the first class.]

(1) Welcome - Introductions and getting settled.

This was a simple intro and an overview of what the goals are for the class. These goals are:

• Get everyone to understand how computers work
• Get everyone to understand how to write a basic program

I also emphasized that the class will be working together to learn these things. We're not going to zip along and leave people behind, so it's in everyone's best interest to collaborate and help each other out.

My goal is to make all of this seem easy. Your goal is to work together and let me know if anything doesn't make sense.

(2) Roadmap - What we'll be covering in this class.

As a roadmap for the class, I drew (something like) the following on the whiteboard:

	Java App	C# App	HTML/JavaScript
C/C++ App	JVM	CLR	Browser
Operating System (Windows, Mac, Linux)
Kernel, device drivers
~~~~~~~~~~~~~~~~~~~~
CPU, Memory, I/O Devices...
Functional units
Logic gates
Transistors
Electricity

Everything above the squiggly-line is software and everything below it is hardware.

Most desktop applications (like Microsoft Office or Adobe Photoshop) that you buy today fall into the "C/C++ App" bucket in the above diagram (although there are many other languages that can be used as well). You can also find a lot of applications written in Java or C# as well, and many websites make use of JavaScript in addition to basic HTML.

Computer classes will typically spend all their time in one of the upper "programming language" boxes: C, C++, Java, C#, JavaScript or whichever language the class is built around. There's nothing particularly wrong with that - it's perfectly valid to choose a language and focus on the parts of programming that are "above" this diagram (like data structures and algorithms).

But notice how many layers there are between the programs you write and the underlying hardware. You have at least the OS and you might also have one or more virtual machines (like the Java Virtual Machine - JVM) or an application (like your web browser).  Rarely do programming classes attempt to describe what it going on in these lower layers, and rarer still are those that attempt to describe what's going on in the hardware layers.

But this class is different. In this class we will:

• Start from the bottom and work our way up (for the most part)
• Explore embedded systems (like the GBA, Nintendo DS and Arduino) so that we have fewer layers between the software we write and the hardware we use.

This will help us to actually answer the question: "How do computers work?"

We'll still do some work at these upper layers as well. Once we'll built the foundation, we'll start covering higher level languages and discuss more advanced programming concepts.

(3) So, How do computers work?

I asked the class, does anyone know? How would you describe it to a friend who was curious to know how they worked?

The answers to this question typically fall into one of three categories:

• Magic gnomes
• CPU + Memory + "other stuff"
• '0's and '1's

What's interesting about these answers is that none of them really tell you anything useful about how a computer works.

Compare this to common answers for "how does a car work?" and you can see the difference. Yes, some people will simply say "I don't know" or have stop at an "engine + wheels" description, but a large number of people will be able to talk about "gasoline + pistons + tiny explosions + crankshaft to make rotary motion + wheels". It's not perfect, but there's enough information there to understand why you need put gasoline in a car and change your oil regularly.

Going back to the computer descriptions above, and you'll see that they are (at best) the "engine + wheels" variety. The last 2 (technically correct) descriptions are really not much better than the "magic gnomes" description - none of them make you feel like you understand what's going on.

This is why we'll be focusing (at least at the beginning) on "how computers work" rather than "how to use computers" or "how to program computers".

(4) Binary (review)

[This was a review from material covered at the end of last year, so we went pretty quickly over this.]

I took out a bunch of counters - I use glass counter beads because I like the feel - and dumped a bunch on the table in the front of the class.  How many glass beads do I have?

I forget the exact number, but it was something like 25. So I write '25' on the board.

What are some other ways of recoding this number?

• Tally marks: using vertical lines or 正 (in China, Japan and Korea)
• Roman numerals: XXV
• Chinese/Japanese characters: 二五 or 二十五
• Arabic (middle-eastern) numerals: ٢٥
• Scientific notation: 2.5e1 or 2.5 x 10¹.

What are the advantages/disadvantages of each?

• Tally marks: Good for counting, keeping score in a game (easy to add 1). Bad for numbers greater than ~50. No way to represent 0.
• Roman numerals: Better than tally marks for numbers greater than 20. Still not good for numbers larger than ~10,000.
• Scientific notation: Useful for very large and very small numbers.
• Chinese/Japanese/Arabic: Note that the actual symbols don't matter, they're all valid for representing numbers.

The number system we commonly use is a "positional number system" called decimal or base-10. Key features of our number system:

• Uses 10 distinct symbols, including a symbol to represent zero.
• Positional: Symbols are arranged in positions based on powers of 10: ones, tens, hundreds, ...
• Each symbol changes meaning based on its position. '3' in the ones position means 3, but in the tens position is means 30.

Why ten? We could have used any other number. In fact, some cultures have used 12 instead of 10 because 12 is 'more interesting' (evenly divisible by 2,3,4,6, whereas 10 is evenly divisible by only 2,5). We still have remnants of 12 in our culture (hours on a clock, dozen eggs, ...).

What about base-8 (for octal). That would have 8 symbols: 0,1,2,3,4,5,6,7.  Each position would be based on 8: ones, eights, sixty-fours (8x8), ...

How would we represent this number of counters (remember we had 25) in octal? 3 groups of 8 + 1 left over = 3 in the 'eights' position and 1 in the 'ones' position = 31.

What about base-2 (for binary). That would have 2 symbols: 0,1. Each position would be based on 2: ones, twos, fours (2x2), eights (2x2x2), sixteens (2x2x2x2), ...

We were running out of time, so we didn't have a lot of time to practice, but I gave each student a handful of counters and they each practiced counting in decimal and octal and binary. This was review from last year and most remembered how the process worked.

Key takeaways:

• The positional number system was a key cultural advance. Requires a symbol for zero to work.
• The choice of 10 was arbitrary - any number base could have been used.
• Binary uses only 2 symbols 0,1, but it can represent any number that you can in decimal. It just requires more digits.
• Computers do, in fact, use binary for everything. How this works will be covered later.

Ah, well. Out of time.... This is where we'll pick up next week as we do a bit more review of number systems...

Hiring 10,000 new STEM teachers

So, the White House announced today their goal of recruiting 10,000 new STEM (Science, Technology, Engineering & Math) teachers over the next two years, as a first step in recruiting 100,000 new STEM teachers over the next decade:

President Obama Announces Goal of Recruiting 10,000 STEM Teachers Over the Next Two Years

This follows the announcement last week of the Change the Equation (CTEq) program, which describes itself as a "CEO-led initiative to solve America’s innovation problem" and is focused on getting corporations to help fill the gaping holes in our K-12 STEM education. CTEq sounds rather interesting, with projects like Intel Math and FIRST Robotics, but it's also kinda disappointing that we have to rely so heavily on these external programs to fix our broken education system.

These announcements are all good news, but I don't see this helping out Computer Science education all that much.

I noted that, while "launch[ing] robotics competitions" sounded cool enough to get a mention in the White House blog's announcement for CTEq, not once did any of these White House announcements mention anything about computers or programming. It's always "math" and "science", where these terms retain their traditional meaning without expanding them to include the new sciences.

"Math & Science. Hey! We already have math and science programs in our schools. We just need more of it, right? Let's hire more teachers. We just need to keep doing what we have always been doing, only more so!"

These initiatives are a nice start, but it would be great if they did something like explicitly include computer science in what they mean by "science". The White House could do this and people would actually listen. As it is now, schools are tied to traditional definitions for math and science and will continue teaching to whatever graduation metric they have in place.

So how many K-8 STEM teachers do you think will be hired?  Something tells me that most (if not all) of this hiring will be at the high school level where, in my opinion, you've already missed the opportunity to get young students really excited about math, science and programming.

Starting the new school year...

The new school year has begun and I will soon be starting my computer class at a local (Seattle-area) Montessori school.  Since my class is extra-curricular, I delay the start a bit so that the students can settle into their normal routine before the new class begins. The planned start date is the first week of October.

The class is primarily 6th-8th graders. I focus on this age group (upper elementary/middle school) because I'm trying to catch the students before they learn (from where?! grrr...) things like "computers are difficult to understand" and "programming is hard".

I'll be posting each week about the topics covered and I'll be including the materials that I create/use.

The first 6 or so weeks will mostly be a review of what we covered during the 16 weeks of classes last year:

• Number systems (binary, hexadecimal)
• Boolean Logic (and, or, xor, not)
• Data encoding (ASCII, hex editors)
• Electronics (electricity, LEDs, resistors + using solderless breadboards)
• + some other stuff I can't recall at the moment...

And throughout this school year, I'll be covering:

• Electronics (more LEDs with Arduino microcontrollers)
• Transistors (and how to build basic logic gates from them)
• Web pages (HTML5 + CSS + canvas)
• Programming (Arduino, GameBoy/Nintendo DS)

and whatever else comes to mind that matches the students' interests. I'll probably also spend a day talking about ActionReplay codes and hacking DS games, but we'll see how much time there is for that.

The goal of this class is to teach the fundamentals of computers and programming so that the students actually understand what is going on under-the-covers.  I could skip all the details and just focus on the programming bits, but that's not nearly as interesting (for me nor the students).

How the Internet Works - Part III - Routing Traffic

[This is the third in a 4-part post that describes an activity to demonstrate how the internet works. This part describes how the internet routes traffic using IP addresses.]

Some notes on presentation:

This document presents the activity as a rough script with "ACTION" breakouts when you need to perform some task. In this activity, you will be presenting information and directing the students as they act out the various parts of the internet.

You shouldn't just read from this script verbatim (since that will be rather dull), but you will probably want to have this printed out with you while you're presenting. Use a highlighter and mark key points so that you can find them easily while presenting.

Feel free to include additional information if you feel like it and accept questions and ad lib to follow the class interest. Throughout the script, there are a number of questions for the students that can be used to make the presentation more interactive.

The files for this activity (internet packets and labels) can be downloaded from www.cse4k12.org/internet/how-internet-works.html.

Internet

The phone system (even in the very simplified form as described in the previous post), works reasonably well. But the internet differs from a phone network in a few key ways:

1. Packet-based communication. On the internet, data is bundled into self-contained "packets" that are routed through the internet.
2. Automatic address lookup. Every internet-connected device has an IP address, which is similar to a telephone number in that it uniquely identifies a computer on the internet. However, you don't need to know this IP address for the website you're visiting. To visit a website, you can simply type the domain name (like "http://www.google.com") and the correct IP address will be automatically looked up.

We'll look at these two differences in turn — starting with a discussion of packets. Address lookup will be covered in Part IV.

But first, a note on IP Addresses

Currently, an IP ("Internet Protocol") address consists of four 8-bit numbers (ranging from 0 to 255) written in decimal and separated by dots, for example: 74.125.19.104. This 32-bit (4 x 8-bit) number is known as an IPv4 address and it can provide unique IDs for up to 2³² (about 4 billion) computers.

Because the number of devices connected to the internet will soon exceed the number of available addresses in IPv4, a new standard called IPv6 is being introduced. An IPv6 address is 128-bits long and is written as a set of eight 16-bit hexadecimal numbers separated by colons (e.g., 2001:A3D2:32C9:1F37:0000:0000:0000:0000). These new IPv6 addresses can support up to 3.4 x 10³⁸ unique devices.

In this activity, we'll be using IPv4 addresses exclusively because they are easier to work with, but the same concepts presented here also apply to IPv6 addresses.

Packet-based communication

Unlike the traditional landline phone system, the internet is packet based. This means that computers on the internet communicate with each other by sending packets of information back and forth. Think of it as sending tiny electronic letters to each other with the internet acting as the postal service. Large "letters" are not allowed — they must be broken into smaller pieces, sent separately and then reassembled on the receiving end.

As an example, imagine writing a long letter (email) to grandma. You'd have to cut it into (say) 3 pieces, put each piece in a separate envelope (packet), number them (1,2,3), and mail them separately. When your grandmother receives the letter she would wait for all 3 pieces (packets), tape them together and then read the letter. Note that the pieces (packets) might not be received in the correct 1,2,3 order, so she may need to sort them before taping them together.

The advantage of the packet-based system is that doesn't require a dedicated connection (remember the rope in the phone system example). This allows computers to support a very large number of simultaneous connections — receive a packet, respond to it, go to the next packet. Imagine how inefficient it would be if you needed to have a dedicated connection to access every website you wanted to visit. And popular websites like Google or Wikipedia would only be able to support a relatively small number of simultaneous users. In addition, most of the connection capacity would be wasted while the computers waited for the next command/communication. And once people got a connection, they would probably try to hold on to it for as long as possible.

So, how does this work? Basically the same was as the phone network except that we use "routers" instead of "switches". A "switch" (like we saw in the phone network), takes an incoming connection and connects it to its destination. It also needs to maintain this connection for the duration of the call. A "router" accepts a packet of information and then sends it on its way — completely forgetting about it after sending it off. This allows the router to support a much larger number of users than it could otherwise handle.

ACTION: Collect the switching tables from nodes 1-6 and replace them with routing tables. The switching tables can be set aside since they are no longer needed.

Skipping over the issue (for the time being) of how we lookup an IP address from a domain name like "www.google.com", let's follow an internet connection like we did with a phone connection.

We'll start with a very small "internet". In this network, we have the basic elements that we find on the internet:

• Two websites: in this case, google.com and wikipedia.org. In this network, Google is represented by 2 nodes (#5 and #9). In general, large websites on the internet will be distributed across multiple machines.
• Two homes: you and your neighbor
• An ISP: this is your "Internet Service Provider". That's the company that you pay to keep you connected to the internet.
• Three routers: "1", "2" and "3"

ACTION: Relabel the nodes on the graph as you mention them:

4 : ISP — IP address = 65.32.236.122
5 : google.com — IP address = 74.125.45.100
6 : wikipedia.org — IP address = 208.80.152.2
7 : you — IP address = 65.32.200.101
8 : neighbor — IP address = 65.32.200.102
9 : www.google.com — IP address = 74.125.19.104

Note that nodes 1, 2 and 3 don't have labels. These are the “routers”. No need for a label, but they should be referred to as routers during this part of the activity.

ACTION: Assign new students to the graph nodes, or re-assign the students to play different roles. Nodes 6 (wikipedia.org) and 8 (neighbor) aren't used for this part of the activity, so you will only need 7 students for the nodes on the graph + 1 additional student to act as a "runner". This runner will propagate the packets through the network.

As mentioned earlier, we'll start by pretending that we already know the IP address of the website we want to visit. So we already know (somehow) that "www.google.com" has an IP address of "74.125.19.104".

Once we have the IP address of a website, we can send a request to it. These requests are similar to letters in that they have a "TO" and a "FROM" and some content that is being sent.

Here is a sample packet that we're going to send to Google:

• The "FROM" is your IP address.
• The "TO" is the IP address of Google.
• The default content is a generic "Hey, show me your website" request. This is what we commonly refer to as "visiting" a website.

When you want to visit a website, you send your request out so that it gets delivered to the correct website. Since your ISP is your connection to the internet, you sent your request first to your ISP which sends it along to its destination.

ACTION: Have the student at node 7 ("you") give the packet 1-1 to the "runner". The runner should then carry the packet, starting at “you”, to the ISP.

Packet: (1-1)
From: 65.32.200.101 (you)
To: 74.125.19.104 (www.google.com)
Message: Please show me website

The routers operate in much the same way at the phone switches do - except that they use IP addresses instead of telephone numbers to decide what to do.

ACTION: Follow this packet through the various routers, up to node #9: www.google.com.

When Google gets this request (packet), it sends back a response. This response is also a packet, but this time FROM google TO you. Since you didn't ask for anything specific, the contents of the packet are the main search page (the default for this website).

ACTION: Have the runner give the 1-1 packet to the "www.google.com" student at node #9. The website will now process the request and create a new packet to send back. Introduce packet 1-2 at node #9 and have the runner route it back to the user.

Packet: (1-2)
From: 74.125.19.104 (www.google.com)
To: 65.32.200.101 (you)
Message: Website contents (main search page with empty search box)

When you get the response packet, your web browser displays it on your computer screen. You can now interact with the webpage and enter a search term, like "donut", and send another request to Google.

ACTION: Have "you" give packet 1-3 to the runner and send it off.

Packet: (1-3)
From: 65.32.200.101 (you)
To: 74.125.19.104 (www.google.com)
Message: Search for "donut"

But this time, let's see what happens when the network is damaged. Let's pretend that link "Ii" is no longer working.

ACTION: Walk over to the "Ii" link and stand there as a reminder that this link is no longer functioning. Alternately, you can have a student stand there to block network traffic.

As with the phone example, the network routes around the damaged parts. Note that with the packet network, we didn't lose the connection and need to re-start it. The packet was already on its way and simply continued around the damage to reach the destination.

When "www.google.com" finally gets the request, it runs the requested search and creates a new packet with the results to send back.

ACTION: Have "www.google.com" give packet 1-4 to the runner to send back.

Packet: (1-4)
From: 74.125.19.104 (www.google.com)
To: 65.32.200.101 (you)
Message: Search results

If we have more damage to the network...

ACTION: Walk over to link "Dd" to take it out of commission. Make sure the keep "Ii" blocked as well.

...the network will route the packet around the new damage as well.

And eventually the search results come back to you.

So, a question: How long does all this take to run end-to-end? Well, how long do you wait for a webpage to return results before you start to get annoyed that the "internet is slow"? In general, anything that takes longer than 1 second is irritatingly slow.

Setup for part IV

So now we have our search results for "donut". Let's say there's a wikipedia link (http://en.wikipedia.org/wiki/Doughnuts) in the results. What happens when we click on that? And how do we find the wikipedia.org website if we don't know its IP address?

[to be continued in Part IV]

Boy Toys & Girl Toys

Saturday Morning Breakfast Cereal's take on "Why are there so few girl engineers?"