Numbers in Computer Science

We're winding down the summer at my school and teachers report back on Monday. This will be my first school year working in the tech department and I'm thrilled. I still have one class to teach and that's AP Computer Science Principles.

Part of the summer I decided to work on some of my web apps/widgets for that class and I'm ready to talk about them. Teaching numbers in CS to teenagers can be really difficult. It's abstract, mathy, and doesn't have the glitz and glammor of changing code outputs or updating CSS for a new color. I think the most traditional way of approaching this is to teach students to memorize a few binary numbers and their hexadecimal digits. Then spend a few days just going through conversion and conversion. As fun as that sounds (jk), I'm not doing that this year. I'll be using a few things I built:

• Binary and Hex Number Converter
• Binary and Hex Quiz
• Hex Color Picker

Feel free to check these out before reading further.

Classroom Plan

I plan to start off teaching Binary Numbers with some easy examples. I think explaining them as lights turning on and off is easy. Talk with the students about what could you communicate with 1 light, 2 lights, 3 lights, ... , and then what about 8 lights? What all combinations could use with 8 lights? Then, we'll compare that to decimal digits. With decimal digits, how many more things can you communicate with 1 digit, 2 digits, etc. Then, go into why you can't use a light for a decimal digit. You need something like a stoplight that displays at least 9 colors.

Then, let's break out the Internet! This is when we'll use the number converter that I made. It has sliders on it. It's meant to slide a digit on or off like a light switch. You flip the slider up to turn on a digit and flip the slider down to turn off a digit. See, the light bulbs should be going off all over the place at this point! Students will go through conversions all during class now using the conversion tool I built for them.

Then - let's do a quiz! Just below the binary converter is a button that takes them to a 5 question quiz on conversions. The quiz pulls randomly from a library of 50 questions that also randomly mixes up the answer choices. Everytime they take the quiz, it asks new questions and new answer orders. I'll expect them to get mastery on it, so we're talking 5 out of 5. Show me screenshots of each question, their work, and the final score at the end.

Hexadecimal will work very similar to binary, but definitely take some more time for it to sink in. I think some extra work from Khan Academy would help the students.

Lets Take This Further

All the time as teachers, we get asked the question, "When am I ever going to use this?", which can be rephrased to, "Why?". Well that's when I get to explain to them how the RGB color system works...exciting! It's the first color system we learn when doing any CSS on the web. Yes, there are other color systems that are better, but it's typically the first.

So in class, we'll dive into the hex color picker I built. I'm pretty excited with how it works. So there's a simple form that a student can type in. The form will check if they typed in an actual color that can be rendered. It accepts the textual color codes that are used on browsers, the 6 digit hex format and the 3 digit hex format for colors. If something that doesn't match that (which is checked with regex), then the app just takes them to the landing page. I love this because this is a great application of dynamic routes....over 16,000,000 routes to create this and all get rendered dynamically.

Measuring Progress

I've never created this many things for one concept, but this is usually the one that students forget by the time they sit for their AP exam. I'm really excited to showcase some of my projects, but I've even more stoked to get students up to high levels of learning.

My goal and aspiration is that this will propel me to make more things like this. If I could make little web apps and widgets for teachers to help them teach something new, that would be so rad. It's so much fun designing these projects. I can't wait for the next idea.