Coding worlds

a comparative study of CodeCombat and Tynker

 

Learn to code! That is the great gold rush of 21st century!

It is rather ironic that at a point when machine learning is starting to promise the end of code, or rather coding as a human intellectual activity, the fever of coding education has just started to pick up its pace.

How do we teach coding to kids? Now that’s the million dollar problem.

This article is rather optimistic about the prospect of coding education in the coming decade. Playing piano, the author believes, does not necessarily mean committing to a career of pianist. Likewise learning coding doesn’t need to decide your future career. Computational thinking may have its limitations (see a serious critique of the hierarchical model implied by computational thinking here), but it is indeed a very interesting type of language that has almost become an integral part of the 21st century literacy. The younger generation will benefit from making some kind of acquaintance with coding, not only for future career prospects, but to get a glimpse of what a modern or future society is built upon.

There is certainly no shortage of learning resources and brilliant minds dedicated to this line of work. But what is working and what is not? In this article I want to study two coding platforms side by side, and study their relative strengths and weaknesses.

What I call a “coding platform” is a virtual environment where coding education happens. It is not taking a coding course, or a series of courses. The major difference between coding platform and coding course is that the former creatively reinvents the idea of course, class and everything that comes with it. A coding platform offers a special kind of experience that is far more immersive and coherent. Instead of watching videos (either fun animation or real instructor), doing exercises, taking quizzes, one plays through puzzles, levels and quests, getting rewards (badges, XPs, gems) and unlocking new avatars. Apart from this procedural gamification, one can also make games (in Tynker) or participate in competitive gaming (code combat).

There aren’t many such coding platforms that are complete and reasonably polished. By ““complete and polished”” I mean not only the learning process is completely scaffolded, but is also visually, narratively engaging. It gives you the sense there is a world of such activities that can keep you busy for a year. This is why I call it coding world. So far I know only two coding platform that are close enough to this concept: CodeCombat and Tynker.


Background

Both CodeCombat and Tynker are small companies located in the Bay area (SF downtown and Mountain View).

Both platform runs in your browser of choice. According to podcast by Nick Winter (cofounder of CodeCombat), the main language using which the system is written is Coffee script, a branch of Javascript. There are other frameworks involved but the main idea is that the IDE is cloud based but interpreted inside the local browser (swift playground is apparently different here). Cloud + web browser IDE is nothing new. But the heavy graphic processing required here may give your computer a good workout.

A lot of people come to Tynker already knowing something about Scratch, an open project from MIT. Scratch (1.0) initially is based on Squeak, which is an implementation of Allan Kay’s Smalltalk. And Scratch 3.0 is said to be on HTML5. Some Scratch aficionados say Tynker is derivative of Scratch. Well it is true that Tynker has a strong visual resemblance to Scratch. I don’t have concrete information on how Tynker is implemented but it is probably not a big deal to build it from scratch (pun intended). In terms of functionality it is much more expansive. It is an reimplemented extension, just like Snap! (or BYOB) is.

Code combat has a major selling point compared to Tynker, which is that it offers real languages (meaning that you can actually use that to get a job), instead of languages for teaching. Currently JavaScript and Python are available. One same scenario uses both Python and JS codes. This makes a lot of sense.

Content

coding courses available as of Sep 2016

Ina sense Tynker still have the idea of course. But it is now called a different name: quest. Every quest has a unique visual and narrative theme (zombie, sci-fi, dragon etc.) which is kept consistent throughout the quest. The quests themselves are categorized as beginner, intermediary or advanced.

A quest is a long learning sequence that has thematic connections between its segments. It has graphic coherence; it has thematic music and sound effects; most importantly, it pretends to have a story, just like Call of Duty would have a story behind it. To be more precise, what it offers is not a story but a world where stories can happen. Marie-Laure Ryan proposes the idea of narrative games (games that subject a narrative to its playable actions) as distinguished from playable stories (actions subject to stories). But this is not even narrative game. The narrative elements, such as protagonist, antagonist, psychological depth, narrative progression and resolution, are diluted where what remains is only the world.

Under the quest there are chapters, and under the chapter, sections. For instance a quest called “dragon attack” has the following chapters, or episodes.

chapters for dragon attack quest

Each chapter has its own steps, which I call sections.

sections for a particular chapter

A section is a lesson unit that involve the use of certain blocks and concepts. If you scroll down (most kids wouldn’t do that; this is for parents and educators), you would see a lesson summary like this:

In addition to “home coding courses”, the website also offers “Home Minecraft courses” and “coding activities”. A coding activity is a medium length sequence that upon completion will issue you a certificate, like the ones you get from attending hour of code.

Coding activities are pretty extensive

CodeCombat is organized in bigger chunks. It embraces fully the idea of coding world as geographical locations. One recognizes from Tynker the templates of CAI (computer aided education); but CodeCombat is mainly inspired from dungeon maze exploration games.

there is more to the right…keep exploring!

You start from Kithgard Dungeon. All the other worlds are locked. In order to unlock a new world you need to complete a specific level in the previous world. This works very well. While you can’t access the more advanced worlds they are always already in your view. You feel their beckoning; their mere presence urges you to work hard to get there. This is a much better motivation than “oh I am gonna finish this course so I can do another one”.

Inside each world you have mini-puzzles: they follow a route but there are also side-quests, or additional puzzles you can solve once you have reached the exit. Your next advised destination is indicated by a yellow arrow.

Presentation:

Tynker has a three pane layout similar to Scratch’s interface. But it doesn’t have to come from Scratch. This is the design I see in almost every online coding education platform. On the left, available blocks; your code in the middle; assets and output (graphic or terminal window) on the right.

Code combat also uses a three pane layout, although it moves the graphics to the left and gives it more prominence. The code window goes to the upper right, and available commands lower right.

Both platforms use music and sound effects throughout the learning experience, and to great effects. Once you get used to them, the lack of sound in other coding platforms become quite unforgivable.

CodeCombat’s reward screen is one of the best things in the system. It is more than a stimulating closure. Level completed! Now the learner has an unmistakable sensation of playing a game and this sensation transformed the coding into something intensely pleasurable. But more than mere encouragement the learner is also rewarded by concrete game currency items which are very important in later stages.

Scaffolding

Since a coding world doesn’t have a teacher in it, how do we guide the learning process? This is not only about arranging material in an appropriate order (levels, quest categories, etc.) but also about proper scaffolding at every step. Someone, or something, needs to tell the learner what to do, and if the learner gets stuck, gives hints.

Tynker’s audience is a little younger, so its instructions are very precise. It even offers the option to “do this for me”.

this is like a lego instruction book with words

Code combat, although facing a more mature audience, still uses heavy scaffolding. A lot of what you end up doing, especially in the beginning, is simply to fill in the blanks. Given comments and instructions, all you need to do is to type underneath what is said in the comments. Sometimes the first instance is already given, and you need to do copy it to different locations. Adults may be bored with this; but kids are not. This is also good to encourage the habit of making a lot of comments in your code, and it may be necessary for the young learner to get used to typing.

Verbose instructions and heavy scaffolding are necessary to make learning feasible for the most passive students. But how does that help the most advanced students to use their brains often? It seems like the mechanism can use some tweaking so as to implement adaptive learning. Technically this is not even difficult. Just make different levels of instruction verbosity and track the user’s previous achievements to determine the current level.

This said, CodeCombat has a built in mechanism that makes more advanced players revisit early levels, simply to try a more efficient solution.

For the very first level an easy solution looks like this:

this is how you learn it the first time

But a more advanced solution may look like this:

For every level there is a leaderboard where you can see how other players perform, using their own algorithms to achieve the same goal. Top 5 solutions are kept secret.

Audience

Both platforms require reading; but CodeCombat also requires typing. Technically a 7 year old can try code combat, but it works better for middle schooler and above. It also works very well for adult beginners or anyone who had some previous experience in coding. So the two may have an overlapping (between 6–10 years) but their target audiences are differentiated already.

Although the design of the two systems is geared toward individual self-paced learning, both strive for curriculum adoption. This is real business and individual subscription is often not enough to sustain the company.

Tynker is much more developed in this direction as it offers a comprehensive curriculum for many scenarios.

In addition to learning to program, computer can also be used to assist learning other stem subjects.

CodeCombat is only starting to making the move towards this direction. And so far I am not impressed by its offerings. The platform also has an inherent limit, namely, it is a very much closed system. It will take some really smart people and considerable work to come up with good ideas on how to adapt it to stem related subjects.

Even for the subject of computer science CodeCombat is not easily adaptable. At this point avid young programmers are facing the prospect of college education and some of them may want to become a CS major. CodeCombat wants to appeal to this need by titling its offerings Computer Science 1 & 2, etc. Here is an example of how they present a CS title.

Course 1: intro to CS

Concepts Covered in this Course

Basic Syntax

Syntax is the basic spelling and grammar of a language, and must be carefully paid attention to in order for code to properly execute. For example, while Python and Javascript are used to do similar things in Course 1, the syntax for them is noticeably different, because they are different programming languages.

Arguments

An argument (also referred to as a parameter) is extra information passed into a method in order to modify what the method does. In both Python and Javascript, arguments are represented by code that is inside the parentheses after a method. In Course 1, arguments must be used to define enemies before the hero can attack them, and can also be used to move multiple times without writing new lines of code.

Strings

A string is type of programming data that represents text. In both Python and Javascript, strings are represented by text inside quotes. In Course 1, strings are used to identify objects for the hero to attack.

Variables

While Loops

A while loop is used to repeat actions without the player needing to write the same lines of code over and over. In Python, the code that is looped must be indented underneath the while true statement. In Javascript, the code that is looped must be enclosed by curly brackets {}. In Course 1, while loops repeat forever, and are used to navigate mazes made up of identical paths, as well as attack objects that take a lot of hits to defeat (strong Doors, for example).

This sounds all right. But it is also somewhat superficial. In reality, what you do in CodeCombat is very different to how CS 101 is taught at the college level. It is true that they all talk about some CS concepts. But CodeCombat is not a college prep course. Nor should it pretend to be one.

If you like Seymour Papert’s ideas about how computer can be used in the classroom, then what CodeCombat offers is in many ways a superior experience. The only problem is that it is not congruent with the very idea of curriculum education.

This said, even from the methodology proposed and practiced by CodeCombat, the learning experience design can use some tweaking. It is already a very fine-grained work that threads the bite-sized puzzles together into a coherent world. Yet sometimes it still doesn’t feel completely smooth and meaningful. When I played through the levels, I feel that the various elements are not perfectly aligned. I can perceive the intention of an order; but there are many discrepancies to disrupt that perception.

CodeCombat is not a college prep course. Nor should it pretend to be one.

Bonus Features:

Tynker has an iPad app that has extensive content hidden under the workshop section. Every command available in the desktop version is also available here. If you think this should be obvious, check out Scratch Jr., or Lego’s iPad programming app. The nice thing about the workshop is that here you are given a series of project samples that illustrate key features of tynker programming. You learn these features by looking at real examples, and within a few clicks you are modding these examples and turning them into your own project.

The iPad app also have some quests of its own. Apparently these are technically not the same with what is available on desktop. One added bonus is that Tynker makes an effort to work with other educational toys such as Sphero or parrot drone, which are called “connected toys.”

CodeCombat doesn’t have any tablet solution yet. But it has a unique offer that I haven’t seen anywhere else: the multiplayer competition mode. I haven’t really tried this very much. But I think it is a very fresh idea. If we already have single player campaigns and online multiplayer mode in gaming, why not doing the same thing with coding by turning coding into a competitive exercise? By competing your code with those written by human beings you can really see how smart and efficient a piece of code can be.


Possibilities and Problems:

The biggest problem of both coding worlds is this:

All the activities are fun and engaging and make perfect sense within the particular world they belong. But they cannot leave this world. The coding world is a controlled environment, with customized classes and methods. These classes and methods are not available outside the domain of learning. Codes you have written in CodeCombat or Tynker cannot be used outside the given platform. Inside that platform, it makes you feel that programming is easy, as you are provided with all the media assets and a higher level of abstraction to work with. But when it is time to go to the real world, you suddenly see that coding anything fancy in Python or Scratch takes a huge amount of code and difficulty. In the case of CodeCombat, although Python or JS are real world languages, a lot of the stuff you do in CodeCombat cannot always be translated to real world performance. In contrast, if you learn pygame, you can expect this thing to work wherever you decide to deploy it; you learn something that can be reused over and over again.

All the activities are fun and engaging and make perfect sense within the particular world they belong. But they cannot leave this world.

Another discrepancy I notice is that the program does more than what the code says. The code only defines what the hero does and it never represents the side of the enemy. Sometimes the code is incomplete but the invisible code accepts that. This opaqueness is potentially problematic.

PS. what about Swift Playground?

As the time of this writing, Apple has just unveiled a new iPad app called Swift Playground. Apple’s offering has some interesting aspects and it certainly made some steps in facilitating iPad as a full-fledged coding hardware sans keyboard. But after I have played through the first coding package, my experience is hardly exhilarating. I think Apple can learn a lot from the two coding worlds discussed above.

Leave a Reply