Small Basic for Little Kids Series #01 – A Typing Game
It’s always fun to teach the little ones to learn and do something.
Teaching programming is no different. As previously mentioned, I have been on the lookout for a fun and low-barrier language for beginners, a third grader to be exact.
So far, all in all, I’ve spent about 20-30 hours with my son on getting used to the idea of Small Basic.
He is proficiently familiar with operating a computer, playing some games, including MineCraft (yeah, it’s Java based I know. Trying to explain heap size to him was no fun…)
Anyway, we were on vacation recently and he got really bored with swimming and sand digging, and decided to write a game himself. So, that’s what we have here.
I had to explain the concept of array to him, and didn't exactly remember how I learned array when I was a kid or how others normally do. So, after struggling for like five minutes, I finally came up with the analogy of showing him a picture of a string bean.
The string bean itself is an array, and all the beans inside are the element. Truth be told, I am not sure the analogy really helped. But between the picture and my three or four attempts are explaining this, he finally got it. Not completely, but enough to get going.
After that, he pretty much did all that by himself – I think in less than one hour while my wife and I were dozing off. Too much sun does make you sleepy :)
For those of you just started to learn programming and MS Small Basic in particular, I will run through the code briefly, since there wasn’t much (any!) comments in the code.
The last program he wrote (which I will get to in the next installment of the series), he had a lot of comments – more than I see for some programmers code.
But this time around, he was in a big hurry to get the game working, and told me he would add the comments later when he is done. Of course, the vacation was over, his interest (for the moment) moved onto something else. And we left with a piece of code with no comment whatsoever. Sounds familiar, no? On the bright side, I am sure he is not doing it for job security :)
Anyway, I digress. So, let me get back to the code.
These two lines below set up the Graphics Window with a defined width and height. Straightforward enough.
GraphicsWindow.Width = 500
GraphicsWindow.Height = 400
The next three lines set up three controls: 2 Text Boxes and 1 Button. Don’t overlook those three lines. There are actually a lot to it.
tbShow = Controls.AddTextBox(170,110)
tbType = Controls.AddTextBox(170,200)
bNext = Controls.AddButton("next",350,200)
- Variable name convention. In the past I showed him how to prefix all TextBox controls with ‘tb’. I don’t think he quite understand the concept of camel case, but somehow he stuck with the ‘tb’ convention. That’s the thing with kids. Sometimes they are willing to do/try things without fully understanding/accepting the rationale behind it. Further, he improvised by using ‘b’ for button. I personally use ‘btn’ (dropping the vowel). He must have decided that the proper way to do it is to use the first letter of the control. Interesting.
- Lack of Label control. Of course, if one graduates to full VB (Visual Basic), the full array of controls (including Label) will be available. So, he has to make do with Text Box instead.
- Positioning of the controls. This he told me he had to try a few times until he felt he got it right.
The next 26 lines are pretty interesting.
letter[1] = "a"
letter[2] = "b"
…
letter[26] = "z"
I am still waiting for a proper moment to tell him about the character function, or Text.GetCharacterCode and Text.GetCharacter functions in the case of SB, and ASCII code, and all that.
But if you are in a hurry, you can give it a try yourself.
These two lines of code will give you the idea of getting the ASCII code for a letter, and displaying a letter (character) based on the ASCII code.
TextWindow.WriteLine("ASCII
code for 'a' is: " + Text.GetCharacterCode("a"))
TextWindow.WriteLine(Text.GetCharacter(97))
Here is the output on the TextWindow console.
ASCII code for 'a' is: 97
a
Moving on to the rest of the code.
He decided to declare two variables.
a = "0"
b = "0"
This alarms me. I am not entirely sure where he picked up the bad habit of using one letter meaningless variable names. I don’t think it’s from me :)
I am going to do more observations on this, to partially fulfill my quest to understand whether a bad programmer was born that way, or taught that way …
Regardless, he decided that one of the variable is used to keep track (counts) of the 10 questions, while the other one is used to track the correctly typed ones.
n = Math.GetRandomNumber(26)
This line picks a random number between 1-26, and assigns it to n.
For functions like this in any programming language, one thing to watch out for is the lower and upper bounds, e.g., does it start from 0 or 1? Does it end with 26 (inclusive or not)? This constitutes a more-than-you-think number of errors.
The next line display the letter in the textbox, by setting the display text for that textbox.
Note the reference to the array element letter[n].
Controls.SetTextBoxText(tbShow,letter[n])
The next line associated the subroutine ‘subButtonClicked’ with the button click event handling.
Controls.ButtonClicked = subButtonClicked
It is a bit different from the “usual” way of doing it in that the event handling is at button clicked level. Then within the subroutine ‘subButtonClicked’, it’s further checked which button is clicked by
btnClicked = Controls.LastClickedButton
So, hopefully, now you get the idea of the flow of the program. I will probably have done it differently to make code tighter. But I guess it’s good enough for a little kid :)
I will leave the rest of the code for you read through at your own place. Please feel free to comment here if you have any questions.
Here is the complete code:
The indention might be a bit off due to copy-and-paste...
GraphicsWindow.Width = 500
GraphicsWindow.Height = 400
tbShow = Controls.AddTextBox(170,110)
tbType = Controls.AddTextBox(170,200)
bNext = Controls.AddButton("next",350,200)
letter[1] = "a"
letter[2] = "b"
letter[3] = "c"
letter[4] = "d"
letter[5] = "e"
letter[6] = "f"
letter[7] = "g"
letter[8] = "h"
letter[9] = "i"
letter[10] = "j"
letter[11] = "k"
letter[12] = "l"
letter[13] = "m"
letter[14] = "n"
letter[15] = "o"
letter[16] = "p"
letter[17] = "q"
letter[18] = "r"
letter[19] = "s"
letter[20] = "t"
letter[21] = "u"
letter[22] = "v"
letter[23] = "w"
letter[24] = "x"
letter[25] = "y"
letter[26] = "z"
a = "0"
b = "0"
n = Math.GetRandomNumber(26)
Controls.SetTextBoxText(tbShow,letter[n])
Controls.ButtonClicked = subButtonClicked
Sub subButtonClicked
btnClicked = Controls.LastClickedButton
If (Controls.GetTextBoxText(tbType) = letter[n]) Then
n = Math.GetRandomNumber(26)
Controls.SetTextBoxText(tbShow,letter[n])
a = a + 1
b = b + 1
Controls.SetTextBoxText(tbType,"")
Else
a = a + 1
n = Math.GetRandomNumber(26)
Controls.SetTextBoxText(tbShow,letter[n])
Controls.SetTextBoxText(tbType,"")
EndIf
If (a = 10) Then
Controls.HideControl(tbShow)
Controls.HideControl(tbType)
Controls.HideControl(bNext)
scoredisplay = Controls.AddTextBox(170,160)
score = Controls.AddTextBox(170,200)
Controls.SetTextBoxText(scoredisplay," \/ score \/")
Controls.SetTextBoxText(score,b + " out of " + a)
brestart = Controls.AddButton("restart",310,300)
EndIf
If (brestart = Controls.LastClickedButton) Then
a = 0
b = 0
Controls.HideControl(scoredisplay)
Controls.HideControl(score)
Controls.HideControl(brestart)
Controls.ShowControl(tbShow)
Controls.ShowControl(tbType)
Controls.ShowControl(bNext)
n = Math.GetRandomNumber(26)
Controls.SetTextBoxText(tbShow,letter[n])
EndIf
EndSub
Here's the listing: