Hugo Cardoso Pedagogy and Clarification

by Michael MacKay

September 22th, 2020

This article is written in response to the following question from this article.

I’m intrigued by this and love that Cardoso is creating freely available tutorials to help others learn how to create gamified learning environments. I don’t know a ton about gamification (though I’m not bad at Mario Teach Typing) and am getting hung up on one sentence and am hoping you can do an ELI5 for me.

“This experiment can create authentic and realistic learner experiences because, unlike traditional lectures or asynchronous video tutorials, they allow the learner to explore the content in their original environments.”

What is meant by “in their original environments”? Do you mean that they are learning coding directly within a coding environment or is something else meant?

How does this experience differ from something like CSS Diner (, or even Mario Teaches Typing, or does it differ at all?

dpiechnik, 2020

Great question, David. What I mean by “original environments” is not the coding environment, but the context to which the environment is applied in normal operation. So for a game, this would be the game being played. In general, a developer would not want to let an end-user modify and play with a product’s code during runtime. This is where things get really hard for new coders and developers because, outside the language’s syntax, very few things in coding are required to be explicit. To explain this, I will give a simple example, I can write code to move a sprite on the screen, which can be entirely different from another person’s code, and both code fragments could be perfectly viable and functional.

Now, before I go on, games, as with most modern visual media, are built on multiple layers. To keep it simple, I will refer to the two main layers: the coding layer (or IDE, which stands for an integrated development environment) and the visual layer (the art, models and sprites). Going back to the sprite movement example above, and viewing this from the perspective of a would-be developer, a new student attempting to write code for a game for the first time has to take in account not only the code they write but how it will interact with the other layers of the game (which by the way are entirely external to an IDE). A learner wanting to move there sprite to the left needs to understand the 3D cartesian coordinate grid system the game is using, what dimension of the grid they are moving (x, y, z) in, the size of the sprite, possible collisions or interactions with other game entities and so on. As you can imagine, this is a lot of information to take in and can get very confusing, as coding alone can be a struggle to learn.

Most people I have talked to that teach people to code recommend focusing on one environment or layer before moving onto the next. But gaming, again like all interactive visual media, is built upon the interactions between these layers. Using this “master” and move on method once a learner has become a proficient coder, they need to learn (and, in many cases) relearn how their code interacts in the game environment. Cardoso allows learners, especially new learners, to explore how the code affects the gaming environment by enabling them to write code directly in it.

Yes, he does represent these “gamified challenges,” much like the game I created in the example, but gamification was not the purpose of this article. It was a teaching pedagogy that allows new learners to explore a complex system and apply and test their knowledge. It is the distillation and simplification of game development’s cores down to the explicit by using technology to create easily digestible lessons. Speaking hypothetically, what is more interesting with this approach is the original complexity is still there and can be introduced to the new learner as they better grasp the concepts, akin to the scaffolding strategies use by so many educators.

Going back to one of your original questions, Typing Mario is not an example because you are not typing in its original environment (you are not typing to create a written product); though, it is a great and high-quality example of gamification. But, CSS Diner could be considered another example of an approach like this because it considers the HTML and CSS languages associated with front-end development (though I would like it to include JavaScript).

Sorry for the long post. As you can see, I found the 250-word cap limiting, and there was a lot I wanted to break down but found it was not possible. I hoped that my media example would bridge some of the connections my writing could not. Still, I appreciate your interest and hope this was a sufficient answer.

Mark as Complete