Our goal at Kodable has always been not to just teach kids how to think like a programmer, but to prepare them to learn a real programming language by the time they reach middle school. The challenge that most educators face when making this jump is that block-based coding and syntax based coding are very visually different things. This is where we see most kids get frustrated and stop coding altogether! You can’t simply toggle from one to another and assume kids will make the connection. And that’s why we created KODE.
Let’s get ready to KODE!
this.body = new FuzzBody(“Black”);
This line of code sets the body type of a created fuzz character to have black fur. There are seven different parts to this one line of code:
- The keyword “this”
- The property “body”
- The “=” sign
- The word “new”
- The Class “FuzzBody”
- The string “Black”
- The semicolon
If that looks like a lot - it is! What’s more, if you’re an educator, you know that explaining all seven of these parts to a six or seven year old child is going to be…a challenge. Well, the good news is that with KODE you don’t have to – because while there are seven pieces, there are only two important parts on this line:
- Choosing the property we want to set - ‘this.body’
- Setting the value for that property - “new FuzzBody(“Black”);.
With KODE, we focus on maintaining a one-to-one relationship between logical segments of code and a child’s interaction with that screen (i.e. a tap or click) to reinforce comprehension of key concepts while abstracting out the excess noise. In this instance, all a child needs to do is tap to choose they want to set the body type:
Then select the corresponding body type that they’d like to use:
The KODE Editor
Now, when using the KODE editor, you’ll see the KODE editor everywhere you write code. We’ve designed it to be modular – so you might see slightly different versions in Asteroidia than the Fuzz Builder – but the editor is separated into five logical parts:
This is where your code lives. Newly written lines appear here, and lines you have completed can be edited here as well.
This is where you go first to write your code! It is separated into two parts:
You can add properties and functions from here, and contextual hints help kids know where to place them in their programs.
When writing a new function or property, the library pane will contextually swap with the value pane to show all available values and inputs available for the code you are writing.
See the output of your code here. This is done in real time, so all changes are visible immediately after writing each line.
Learning is a life-long journey, pace yourself!
“Now what about those other areas you didn’t use?” you might ask. “Aren’t they important?” Of course they are! But not for six year-olds. Most kids at these ages are still learning how to write their names, let alone write code. We have a long time before they’ll be building the next Google or Facebook, so its OK if we start with just the essentials and add more detail as they get older.
We’re just getting started
This is just the first step in what is an exciting new chapter for Kodable. In the coming months we’ll be adding all kinds of new features to KODE, integrating it more fully into the all-new Bug World, and making it easier for kids to share their creations with the world. We can’t wait to share it all with you soon!