Stupid App Idea: Goal With A Friend

I was trying to convince C. to work on this App with me, she didn’t really like the idea and thought it can be done with pen and paper instead.

App: Goal With A Friend

  • Set a goal
  • Pick a charity, schedule a payment
  • Invite a friend to help
  • How much is it worth?
  • Pay 10 percent first
  • Pay 90 percent when done


  • Accept to help a friend
  • Email, call friend to help
  • Get instant 10 percent fee
  • Get reminders to help ‘you’ to achive goal
  • Get final payment in cash or paypal when done

At the End
If goal is not done, final payment is donated to a charity

Why this is useful

  • We ignore reminders
  • Things get done when a friend knows and remind you
  • There are incentive for the friend and incentive for you

“24” math game with kids and adults

C., K. and I started playing this game in Paris using a deck of cards and trying o use addition, subtraction, multiplication and division to make 4 cards come to 24.  Jack, Queen, King are treated as 10.

Here are the official rules

These are some of the samples:

(6-4+1) * 8 = 24

(10 * 3) – (10 – 4) = 24

This is similar to 24 Game but public domain and using a standard deck of playing cards. The cards are shuffled and divided equally between four players. The cards become each player’s draw deck. Every player simultaneously flip open their top card. Then they try to reach “24” using (+,-,*,/) with the four open cards. J,Q,K count as ten. If any player thinks they have got it, they slam their hand on the table. One can also slam the table to bluff other players into thinking they have the solution. After three players have slammed their hands, the remaining player must choose one of the three players to give the solution. If the chosen player answers correctly, the remaining player takes the four cards and put them at the bottom of his draw deck. If the chosen player has no solution or answers wrongly, he/she must take the four cards and put them at the bottom of his/her draw deck. Game ends when one player exhausts his/her draw deck. If no player can think up a solution (some card combinations cannot form 24), they can all agree to put back their respective cards, reshuffle, and draw a new card from their draw deck. Game ends when one player exhausts his/her draw deck.

Javascript Animation : Teaching Kids Computer Programming Lesson #8

From the last session with C., we have a login screen.  Now C. would like the little Yahoo! Messenger guy to bounce around.

Click here to see the page in action

She fired up TuxPaint and created a drawing of a spring

We used Preview to copy it and rotate it into horizontal spring

I started to read about the YUI animation library

First, we copy these 2 lines to include YUI libraries

<link type="text/css" rel="stylesheet" href="" />

The happy face guy is in the div tag as id=”happy_home”

</div> </center>

YUI has very simple syntax and she was intrigued with syntax to create a node for #happy_home

 YUI().use('anim', function(Y) {
   var node ='#happy_home');

YUI has some sample code, at this point because I’m also learning Javascript and YUI, I experimented with the animation and finally was able to get the Yahoo! Messenger icon to bounce

 var anim = new Y.Anim({
 node: node,
 duration: .75,
 easing: Y.Easing.easeOut

node : is the the happy face guy with the speech bubble
duration: is how long the animation goes on each iteraction
easing : how you want the animation to easy into the position

 var bounceCurve = function(end) {
 var points = [],
       X = node.getX();
       Y = node.getY();
       points.push([X, Y - 60]);
       points.push([X, Y]);
       return points;

X, Y: is the point where the happy guy is
points : we create a point which is 60 pixels above where the happy guy is at, how high to bounce

 anim.set('to', {
              curve: bounceCurve(),
 anim.set('iterations', 100);;

 //'document').on('click', anim.stop());

to : We want the animation to run so that the happy face will go to the point at 60 pixels above the guy and
interactions: we want this to run for 100 times

Click here to see the page in action

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

  1. Using CSS To Realize The Mock Up: Teaching Computer Programming To Kids Lesson #7

Using CSS To Realize The Mock Up: Teaching Computer Programming To Kids Lesson #7

Magic Eight Ball Sign In
Magic Eight Ball Sign In Screen - Cate's Mock Up

Based on Cate’s mock up, we built a real HTML page using CSS.

Step 1: Here is how we built the page

First I told her about the <div> tag which we can use to divide up different sections of the mock up.
So she did the following to divide up the screen into 4 sections.

speech bubble
happy face
ask question

Step 2: She picked the font Arial Rounded MT Bold using the Font Book application on the Mac

I told her the div tag needs a class name and she can choose whatever she wanted, so she chose asdf for simplicity of typing, I think she understands the concept that humans are in charge of ‘names’ and variable names.


Then I talked to her about the <style> tag to change the font face for the class asdf

  • font-size : this is the number of ‘points’ or pixels of the height of the font she wanted to use, and we experimented with different numbers until she decided on 50
  • font-family : this is cut/pasted from Font Book
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";  text-align: center;}

For the speech bubble, we found a site which will allow us to type in any word and generate an image of a speech bubble with the text

<img src="ask_name.gif">

Cate wanted to use the Yahoo! Messenger happy face as the magic eight ball. I showed her how to Show Package Content for the Yahoo! Messenger app on the Mac. the file is Applications/Yahoo! Messenger/Contents/Resources/cesario.icns

We opened the file using the Mac Preview app and saved it as a .gif file so that transparency is preserved.  Cate remebers how to do width and height and chose to use 125.

<img src=”Yahoo!.gif” width=”125″ height=”125″>

Finally we talked about the text input field


To put the finishing touches, we played with more CSS to add a 60px whitespace

p {margin-top: 60px}

Here is the complete HTML code

<style type="text/css">
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";
 text-align: center;}

*.fd {align: center; }

p {margin-top: 60px}


<!--- TODO: figure how to center in CSS */ -->
<div style="margin-left: 200">
 <img src="ask_name.gif">
 <!-- from -->


<img src="Yahoo!.gif" width="125" height="125">


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

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

Cate 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: Teaching Computer Programming To Kids : Lesson #5

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


: to create an Unordered List of items


: to start a List Item


: 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 Cate got for Christmas from all her relatives from since was born, then we can use a table.


: to start creating the table


:to create a row


: to create a column

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


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: Teaching Computer Programming To Kids : Lesson #4

Cate 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.


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


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


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

var magicAnswers = [
"Hazy, try again",
"No way",
"We'll see",
"Of course!",
/* 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(

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


/* 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: Teaching Computer Programming To Kids: Lesson 3

As Cate 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


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

<script type=”text/javascript”>
var STRIKE=”Are we there yet?”
var guru = window.confirm(STRIKE);
if (guru)
window.alert(“Too bad :(/”)

Cate 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 Cate’s brain thinks as she gets exposed to computer programming

<script type=”text/javascript”>

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?”);


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

Baic HTML and Javascript: Teaching Computer Programming To Kids: Lesson 2

After dinner, Cate 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


To declare a variavble


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


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


To display a message to the programmer or user

We added tonight


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 ++

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

Used to display a simple message

Used to ask for input from the user

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