Story Board, Mock Ups : Teaching Computer Programming To Kids Lesson #6

C. is anxious to get her magic eight ball game working on Firefox and was excited with a lot of ideas.  Little does she know that I’m a backend programmer and don’t know a whole lot about animation, Javascript and CSS.  But I could learn this stuff easily if she wants to as well.  So I told her like I tell the Yahoo! product managers, give me a mock up.

So she drew up a few  screens for me.

First, she wanted more answered added to the magic eight ball.

Then she thought it would be good if we kept a history of your previous questions, so you should tell us your name

Follow by the magic eight ball bouncing around in a room of springs!  Help YUI or Javascript gurus

I was very happy to see the mock ups and we started working on the first welcome screen after dinner of homemade avocado rolls.

Looking at the first screen, I asked her what font faces she wanted, so she opened up Font Book on the mac and she decided on the Arial Rounded MT Bold

Next lesson: using div tags, CSS to format the welcome screen!

This is a series that documents my daughter’s curiosity to learn about computer programming

Lists and Tables in HTML: Lesson #5

C. started to learn about creating lists of things and tables in HTML

<UL>

: to create an Unordered List of items

<LI>

: to start a List Item

<OL>

: to start to create an Ordered Lists and the computer will add the numbers automatically

Then if we want to create a table to remember things like the gifts that C. got for Christmas from all her relatives from since was born, then we can use a table.

<table>

: to start creating the table

<tr>

:to create a row

<td>

: to create a column

So the following would show what Dad and Mom gave for gifts in 2001 and 2002

<table>
<tr><td>person/year</td><td>2001</td><td>2002</td></tr>
<tr><td>Dad</td><td>blanket</td><td>socks</td></tr>
<tr><td>Mom</td><td>gloves</td><td>wrap</td></tr>
</table>

person/year 2001 2002
Dad blanket socks
Mom gloves wrap

This is a series that documents my daughter’s curiosity to learn about computer programming

Magic Eight Ball engine in JavaScript: Lesson #4

C. wants to make a computer program be to be like the Magic 8 ball, in my last post, I couldn’t remember how to generate a random number. But found it here

Math is a class (not an object ), it has 2 class member functions.

 random()

which will give me a random decimal between 0 and 1, like 0.11, 0.34. If we take this and multiply by 6, then we will get a number between 0 and 6, but less than 6

floor()

will round off the decimal number to an integer.

Math.floor( Math.random() * 6)

So here is the program, which will magically give you an answer to any question you have in the word

<body>


var question  = window.prompt("Ask a question! :)");
/* RFE: time thing change question after 5 secs, to ask the user to hurry up */

var magicAnswers = [
"Duh",
"Hazy, try again",
"No way",
"Awoooga",
"We'll see",
"Of course!",
"Yawn...",
"Yep."];
/* Math.random() the computer makes a random number between 0 and 1, 
  gives you answer to your question
 multiply by 5 would give you a number between 0 and 4
 Math.floor makes the number a round number
*/
var randAnswer = Math.floor(
 Math.random()
 *8)

window.alert("Q: " + question + "nn" + "A: "+ magicAnswers[randAnswer]); 



</body>
/* the engine of the Magic 8 ball game is simple and complete, some ideas 
for the UI
 1) have a wizard stand behind a crystal ball, ask a question, zoom in to
 the crystal ball and show the answer
 2) have a bouncing black eight ball, ask a question and the eight ball 
shakes a bit and shows the answer, it prompts you every 3-5 seconds.

 As another enhacement, we can keep a history of all the previous 
questions and answers. display the question a bubble next an avatar
 of the person asking follow by the answer 
almost like a comic strip
 This will allow us to see the previous history of all the funny 
question and answers
*/

This is a series that documents my daughter’s curiosity to learn about computer programming

Simple HTML and Javascript Operators: Lesson 3

As C. and I were walking to 16th and Mission street Bart station at 7:30am, I talked to her about the arithmetic operators in Javascript.

There is

  • for addition
  • for subtraction
  • (kinda funny) for multiplication
    / (forward slash) for division

We went through some examples

var x = 12
 x = x + 5
x = 12
 x = x - 1
x = 12
 x = x * 3
x = 12
 x = x / 3

Then I talked to her about variables multiplying itself, which is a square root and she seem to understand

var x = 3
x = x * x

When we got to BART, I brought the computer out and we typed in some simple HTML
into Emacs and I showed her using CTRL-X CTRL-S to save files

<body>
ninepins
<b>now</b>
</body>

I talked with her about balancing the tags with closing tags using ‘/’

<b> == bold

Then she tried
<i> and <u> by herself and I taught her to use Firefox and open the file and display it whenever she saved

I showed her <s> for strike-thru

We tried <font color=”#ff0000″> for red and 00ff00 for green and 0000ff for blue.  And she remembers the
Lesson #1 when we talked about the RGB values.

Then as we pull into 19th street BART station and need to transfer, we built a simple Javascript program to prompt and using
if … then … to display different answers


var STRIKE=”Are we there yet?”
var guru = window.confirm(STRIKE);
if (guru)
window.alert(“Yipee!!”)
else
window.alert(“Too bad :(/”)

C. thought this is pretty funny and asked me if we can build a magic eight ball program

I started to design it with her, but I had forgotten how to do random numbers in Javascript and told her
we’ll have to look it up when we have a reference book or online documentation.

It’s time to get off BART at the Ashby station as we have to pick up a Zipcar to drive to the school.
I can’t wait until the next lesson.  I can understand how C.’s brain thinks as she gets exposed to computer programming

var magicAnswers = [“Yippe”, “Oh boy”, “hazy”, “No way”, “Outlook looks good”, “We’ll see”];
var randAnswer = rand(0,6)
var answer = window.confirm(“Are we almost there?”);
window.alert(magicAnswer[randAnswer]);


This is a series that documents my daughter’s curiosity to learn about computer programming

Baic HTML and Javascript: Lesson 2

After dinner, C. asked if we can continue to learn about computer programming. I told her I would love nothing more.

I told her that I will teach her HTML, Hypertext Markup Language and Javascript. HTML is what designers use to control how a page looks like in Firefox. Javascipt let the programmer add interactivity.

I show her a bit of HTML source code and open and close tags. Some sample tags like <b> and <font> and the tag to start telling the computer that we are about to start writing javascript

So we reviewed the few simple reserved words like

var

To declare a variavble


while

A loop that stops when an expression is false. 0, false or null is false, anything else is true.


for(initiator, conditional; increment)

A loop with an initiator, conditional and increment


new

To create a new object. An object has state and methods or actions.


wondow.alert

To display a message to the programmer or user

We added tonight


int

To declare an integer which is a non-decimal. So 2, 8, 66 are integers while 9.6 is not.


if ... then...

Conditionals that will only do something if an expression is true

We then talked about ++ and += and went throaugh examples like


var x=2
x ++
window.alert(x)

I found a small tutorial on the window object.
we looked at and played with an example

window.alert()
Used to display a simple message

window.prompt()
Used to ask for input from the user

wndow.confirm()
Used to ask for a yes or no type of answer.

Then at night she wanted me to review what we learned. As she was falling asleep, I talked with her about the syntax of the Javascript keywords, talked about how we can build loops using for, and 5 minutes later she was asleep.

This is a series that documents my daughter’s curiosity to learn about computer programming

Binary Numbers: Lesson 1

Crepe at Home
Crepe at home

This morning C. and I were eating crepes with hazelnut chocolate and she asked me what this means? “10001001” I think she must have seen it somewhere on a piece of paper or an advertisement. I’ve always found it difficult to talk to her about what my job as a software engineer is, so I decided to use this a chance to get her more interested in computer science.

This is beginning of my attempt to start a series on educating kids on computer programming.

Computers are pretty simple machines, they do what humans tell them to do, no more. On the basic level, the computer has a brain, the CPU that is made of millions of transistors which has only 2 states, either on or off.

The 1 means it’s on, 0 means it’s off

Humans count using decimals 0123456789, computers count with binary. 0/1

Let’s start counting like a computer, turn on our binary brain. The numbers are all in binary.

0 is the number zero
1 is the number one
10 is the number two
11 is the number two plus the number one which is three
100is the number four
101 is the number five
110 is the number six
111 is the number seven
1000 is the number eight
10000 is the number sixteen
100000 is the number thirty two
1000000 is the number sixty four
10000000 is the number 128
100000000 is the number 256

Then I started just asking her some random numbers like what
101, 110,10001 and she seem to enjoy it, great.

We started walking to the ZipCar to drive to Berkeley for school and I was explaining to her about pixels on the computer monitor. The typical monitor is 800 pixels across and 640 and each pixel is represented by a byte for each color. A byte has 8 bits. We have 3 colors RBG. Red, Green and Blue.

To make a color dot on the screen the computer has to turn on bits. So for the red part of the pixel, if all the bits are turned on R = 1111111, the pixel would be red. If R and B are both all turned on, the dot would be purple. R=11111111, B=1111111.

C. then asked what is a computer language. I said a computer language is a very limited set of vocabulary that allows humans to talk to the computer and tell the computer what to do. Most computer languages have only about 40 words, much simpler than the French and Chinese that C. is learning.

C.: “Can I tell the compute to blow dry my hair?”
Tony: “Sure, let’s try it”

While C. was in the back of the car seat, I told her, if we were to do it in JavaScript, this would be how we will tell the computer

var purpleHairdryer = new HairDryer();
purpleHairdryer.blowDry(“C.”);
purpleHairdryer.stop(15);

var, new are the only vocabulary words we used.

Before I left her at school, she asked me to give her at least 5 vocabularies from JavaScript.

I gave her var, new, for, do {} while, alert

Then I said goodbye and we’ll do more programming on Sunday. That was a fun morning. I drove back to San Francisco to catch my Yahoo! bus.

Note to self, there are plenty of links out there about teaching kids to program

Scratch from MIT looks interesting

More links:
http://www.daddymodern.com/what-is-the-first-programming-language-you-would-teach-your-child/
http://en.wikipedia.org/wiki/Logo_%28programming_language%29


This is a series that documents my daughter’s curiosity to learn about computer programming

Update 12/14/2010 : This post has also been published on the Yahoo! Contributor Network