Season 3 Episode 6 Dec 16, 2020

How to Gamify Coding

Pitch

When you turn coding into a game, everyone wins

Description

In this episode, we talk about gamified coding with senior curriculum developer at CodeCombat, Charlotte Cheng, and lead developer of TwilioQuest at Twilio, Kevin Whinnery.

Hosts

Ben Halpern

Forem - Co-founder

Ben Halpern is co-founder and webmaster of DEV/Forem.

Jess Lee

Forem - Co-founder

Jess Lee is co-founder of DEV.

Guests

Charlotte Cheng

Charlotte Cheng's is senior curriculum developer at CodeCombat. Her expertise is creating effective and engaging content for kids at the intersection of education, media, and technology. With over 15 years of experience in Education Technology, she has developed learning content and curriculum for CodeCombat, Wonder Workshop, the Walt Disney Company, LeapFrog, and several edtech startups.

Kevin Whinnery

Kevin is the creator and team leader for TwilioQuest, an educational video game for teaching real world software engineering skills. He lives just outside Minneapolis, MN, with his wife and three devious children.

Show Notes

Audio file size

64156990

Duration

00:44:33

Transcript

[AD]

 

[00:00:01] JL: Triplebyte is a job search platform that allows you to take a coding quiz for a variety of tracks to identify your strengths, improve your skills, and help you find your dream job. The service is free for engineers and Triplebyte will even cover your flights and hotels for final interviews. So go to triplebyte.com/devdiscuss today.

 

[00:00:19] RudderStack is the warehouse-first customer data platform built for devs. It is open source and built API first. So it is easily customizable and fits into your existing development processes. RudderStack’s multitude of SDKs, sources, and destinations make it easy to instrument, adjust, and route customer data from all of your digital touchpoints. Start building a better CDP for free today at rudderstack.com.

 

[00:00:45] The more you know about web development, the more fun it is. With Pluralsight, you can take your skills and your career to the next level. Start a free account today to access 50 expert-led courses, plus five extra free courses rotating in each week, charged into 2021 with the confidence of someone who has development experts in their corner. Go to pluralsight.com/free to create your free Pluralsight Skills account today.

 

[AD ENDS]

 

[00:01:12] CC: And what’s great about a coding game is it enfolds all of that into one experience. So you’re learning the concept, but then you’re immediately immersed into a world where you need to practice and apply it to solve problems.

 

[00:01:34] BH: Welcome to DevDiscuss, the show where we cover the burning topics that impact all our lives as developers. I’m Ben Halpern, a co-founder of Forem.

 

[00:01:42] JL: And I’m Jess Lee, also a co-founder of Forem. Today, we’re talking about gamified coding with Senior Curriculum Developer at CodeCombat, Charlotte Cheng, and Lead Developer of TwilioQuest at Twilio, Kevin Whinnery. Thank you both so much for joining us.

 

[00:01:54] CC: Glad to be here.

 

[00:01:55] KW: Of course. Very stoked to be here.

 

[00:01:57] BH: I can’t wait to get into the meat of the topic today. But first, we’re going to just get to know you two a little bit. So Charlotte, can you tell us a bit about your background as a developer?

 

[00:02:05] CC: Sure. So I am the Senior Curriculum Developer at CodeCombat, and I’ve worked at other companies such as Wonder Workshop, LeapFrog, and have also developed curriculum for Disney English as well. At CodeCombat, basically my role is to look at the learning objectives that we want to teach kids about coding. And I work with the game design team almost on a daily basis on how can we integrate these learning objectives into a fun and engaging game for kids. Then I also develop the curriculum materials for teachers, so they know how to implement the video game in their classrooms.

 

[00:02:41] JL: Very cool. Did you have any computer science in your background? It seems like you do have some educational stuff with LeapFrog in there. Can you tell us a little bit more?

 

[00:02:50] CC: Well, that’s a funny story. So in my undergrad, I went to Stanford and I studied something called “Cognitive Science”, and that is looking at the intersection of computer science, linguistics, psychology, and also philosophy. And I took enough computer science classes to almost minor in it, but then it actually got extremely boring with the projects that they were offering. And so I actually decided to pivot out of it and I dove into education because I was interning at LeapFrog and I really loved the educational technology space and decided my expertise would be education. So I went and got a master’s in elementary education and spent a lot of time in the classroom and designing curriculum. But when Wonder Workshop saw my resume and saw that I had cognitive science and saw that I had some CS, they pulled me in and asked me to design their curriculum. So I did have to relearn computer science from scratch when they asked me to join their team. And it was great because I got to design curriculum with the mindset of someone who was diving into coding from the start all over again.

 

[00:03:54] JL: And Kevin, can you tell us about your background?

 

[00:03:56] KW: So I had been at Twilio for about eight years. Before that, I had worked at a few other startup companies working on JavaScript programming and working on developer-facing tools. But even before that, similarly a couple of decades ago, much like Charlotte, I had studied computer science for a while, but also just stopped because I didn’t enjoy it anymore. I thought it was boring and I didn’t see how it would apply to things that I was interested in. And it was really only later that I discovered that programming was really a creative pursuit and it’s really about the experiences you can create. So after ending up with a computer science minor, I kind of got back into programming accidentally and now have been doing it for quite a while. Thankfully, I have enjoyed it quite a bit. And I’ve been working at TwilioQuest, the educational game that we build over at Twilio, for about two and a half years, maybe two years. Although I had built it kind of a while ago as sort of a side project hacky thing, but I’ve gotten to actually work on it in earnest quite a bit over the last couple of years.

 

[00:05:02] BH: What’s it like to have the company acknowledged that you can keep working on TwilioQuest? That just doesn’t seem totally obvious to me.

 

[00:05:12] KW: No, it is not obviously a good idea for a software company to build a video game. So I do pinch myself from time to time when I realized that this is the work that I get to do. But Twilio, first and foremost, is a company whose customers are developers. We provide APIs for voice messaging, SMS, WhatsApp, and lots of other communications platforms like email and everything in between and whether or not developers can use our APIs, that sort of determines the success of Twilio’s business. So we invest a lot in serving developer communities through our evangelism program. We invest a lot in documentation and learning resources and we also invest just in making more people into software developers, like increasing the number of people who can access the power of code, which is kind of where TwilioQuest comes in. So we have built TwilioQuest to focus on folks that are early in career and try to focus on really practical engineering skills, focus on folks that want to actually build and ship something. But yeah, you’re absolutely right. It’s not an obviously a great idea, but the reason we do it is because we are very interested in as many people becoming software developers as possible.

 

[00:06:32] JL: So if I have no coding experience, would I be able to approach TwilioQuest or would I need to have some background info and is TwilioQuest a little bit more focused on actually just learning the Twilio products?

 

[00:06:43] KW: The vast majority of the content in TwilioQuest is not related to the Twilio API actually. So our most popular content is based on learning the basics of the JavaScript programming language. We also have one for learning Python. That’s sort of in second place in popularity. We have another set of missions that kind of teaches you the Git Version Control System. That has been super popular. So yeah, the Twilio API is actually kind of a minority of the content in the game and that’s kind of a relatively recent thing where, for a time, TwilioQuest really was just our internal training tool, but now we’re building it with a focus on early in career developers and kind of teaching general engineering skills based on what we’ve learned from building TwilioQuest so far.

 

[00:07:32] JL: How big is the team working on TwilioQuest now? That’s so exciting for you.

 

[00:07:36] KW: So we have people full-time on the team. So a relatively small, but mighty. For a time, it was just me, but there’s one other person who works on the product and development side along with me. And then we have a couple of folks who work more on like community and marketing and partnerships and that sort of thing. Largely looking at following along in the footsteps of what other folks who’ve been in this space for a long time have done like the folks at CodeCombat and elsewhere, building those supporting resources to help educators understand like where TwilioQuest fits in, what they’re trying to teach, how it aligns to standards and how we can just generally how to be productive with it and where to include it in the curriculum.

 

[00:08:15] BH: So in exploring both of your careers and backgrounds, we got into TwilioQuest a little bit, but let’s find out a little bit more about what CodeCombat is. Charlotte, can you tell us a little bit?

 

[00:08:27] CC: So CodeCombat, at our company, we actually have two platforms. We started off with the CodeCombat game. And it’s basically like a dungeon crawl where kids use the power of coding to complete levels in this dungeon crawl. And they actually level up their hero. They gain new gear and we also evolved a tournament basically where kids actually develop their own AI and they compete against each other. And it’s an international tournament that happens every year. At the same time, we had this almost grassroots growth in the schools where they loved using CodeCombat with their students, but they felt like their students needed a little bit more guidance. So we created a new platform called Ozaria, which is more of an adventure. So the kids, when they’re playing Ozaria, they are a hero going on a multi-chapter quests and they’re actually trying to save the world from this darkness that’s taking over the world of Ozaria. And in order to do that, they level up their skill sets of coding, and they learn about coding concepts through almost like dialogues in a graphic-novel style and also coding in levels and defeating darkness and defeating enemies along the way.

 

[00:09:35] BH: What’s the gameplay like? How much code do I run at a time before I see something happening? Can you give us a picture of exactly how that goes down?

 

[00:09:46] CC: Yeah. Sure. So kids can learn in JavaScript, Python, or C++. So first, they choose the language of preference. Right? And what’s really great is one of our founders, Nick, his first company was actually a Chinese language learning app. So when they designed CodeCombat, they looked at coding as if you’re learning a brand new language. So there’s a lot of scaffolding. So the first level that you see, you’ll see some starter code already there for you. So they get exposed to what the code looks like and we sort of nudge them towards adding another line of code, so we call the scaffolding, right? You want to start them off where they have all that support that they need to be successful in defeating this completing one level. And then as we level up in difficulty, the kids get less and less starter code along the way. And they have to code more and more. And the actions that they do is basically they code to move the hero up, down, left, and right. So that’s just basic sequencing. But along the way, we then teach them, “Hey, if you want to have more efficient movement, maybe use a loop.” And a loop lets you repeat the same movement over and over again with less lines of code. So we’re also teaching them the “why”. “Hey, you’re learning this concept about loops because it’s going to make your code more powerful and it’s going to let you complete this level a lot more efficiently, a lot more quickly.” So again, we’re really, really focused on the why, because if a kid doesn’t know why they’re learning this concept, what’s the point, they’re going to get disengaged very quickly. So they understand, “Oh, cool! If I can level up my powering skills, my hero’s going to be way more powerful, defeating and completing these levels.”

 

[00:11:22] JL: That sounds like such a fun way to learn. I feel like I was just like a year or two short of being able to take advantage of CodeCombat because I did some interactive gamified-ish coding when I was first starting to learn through like Code School and Codecademy. I thought that was a lot of fun with the different badges, but this just sounds like next level.

 

[00:11:44] CC: I agree. I really envy the kids right now who are learning coding because it’s so immersive. I grew up in the Carmen Sandiego, Oregon Trail days. Right? And I love those games and it was just little bits of graphics on the screen. And here, I’m working at a company where we’re spending a lot of time with the graphics because we know how important that is for the kids to feel like, “Hey, I really am this hero crawling across the dungeon and trying to defeat enemies and collect gems.” Yeah, I am envious of the kids and I have a one-year-old, so I can’t even imagine what the space is going to be like when she’s ready to code.

 

[00:12:21] BH: Do you consider yourself a game dev? I’m just curious about both of you. Are you, the creator of TwilioQuest, like a game dev by trade? Or did you just develop this game and that’s what you do? How do you identify in that sense?

 

[00:12:35] KW: I’m starting to kind of identify as a game developer because that is the software that I create. But partially because of the work that I’ve done before, I’ve been a web developer and I’ve been working in JavaScript and Node.js and Ruby and Java and like a server side programming for most of my career up until now, game development had been something I had dabbled in. I really enjoyed it, but I had never done anything professionally until relatively recently. So yeah. So I guess maybe I am now capable of claiming the mantle of a game developer, but also the technology we use keeps me from feeling like I’m not really a game developer because we lean heavily on open web technologies like HTML, CSS, JavaScript. A lot of our game is written in React actually. So it feels very much like web development most of the time, but I’m trying to kind of acquire the language of game development. It’s helpful when we are working through the user experience bits. Back before the fall of human civilization, I went to the game developer conference in San Francisco and just kind of drank in a lot of game design knowledge. And a lot of that has been super helpful in re-imagining how this kind of development works because I kind of thought web development was hard before game development, but game development is, in many respects, a hundred times harder because not only does it have to work, it has to be reasonably pleasurable to use. There has to be kind of an element of fun and there’s a lot of other layers to kind of get things working on this side.

 

[00:14:12] BH: And Charlotte, how about yourself?

 

[00:14:13] CC: Oh, well, that’s a really interesting question. So to provide some context, a game like this, a game where you’re engaging kids and also they’re learning content at the same time is not made by one person usually. It takes a team of people who have a lot of different perspectives to really create a compelling product that’s well-rounded. So at our company, we have a game design team that I’m meeting with almost every day. And within that team, we have people from a lot of different perspectives. So I’m coming in with that learning background. And in past companies, I was the learning designer or the curriculum designer, and then we have people who’ve worked on actually really big games and then we also have an artist as well. So it’s with the combination of all of our perspectives that we’re able to develop this, not just the curriculum, but also the game itself. We always start, we call it backwards planning, right? We start with, “Okay, what’s the learning objective?” But then we also have a story we’re trying to tell. So we have writers in our team that we’re collaborating together on and saying, “Okay, what’s the story we’re trying to tell? How does that connect to the learning objective?” And then we also have the game designers, right? So we have game designers, including me. We’re wearing all the hats and we’re trying to use empathy to understand each of those objectives. So the game designers are thinking about, “Okay, here’s a story. Here’s the learning objective. What is the game mechanics in our story that could really align well with these coding concepts?” So I feel like I am a game developer during those meetings for some of the times, but then I’m also a learning designer. It’s a multi-hat type of role.

 

[00:15:50] KW: I think that is definitely one of the major differences between this type of development and other projects I’ve worked on in the past is how interdisciplinary it is, the weaving of the creative aspects of game development, the technical aspects of development, also the marketing aspects and the community management aspects of how you get a game in the hands of players and how you interact with that community. That’s been a great opportunity to grow for sure is all that collaboration and the necessity to wear all those different hats that Charlotte mentioned.

 

[MUSIC BREAK]

 

[AD]

 

[00:16:40] Join over 200,000 top engineers who have used Triplebyte to find their dream job. Triplebyte shows your potential based on proven technical skills by having you take a coding quiz from a variety of tracks and helping you identify high growth opportunities and getting your foot in the door with their recommendation. It’s also free for engineers, since companies pay Triplebyte to make their hiring process more efficient. Go to triplebyte.com/devdiscuss to sign up today.

 

[00:17:05] RudderStack is the warehouse-first customer data platform built for devs that builds your CDP on your data warehouse with support for cloud data warehouses like Amazon Redshift, Google BigQuery and Snowflake. RudderStack makes it easy to collect, unify, transform, and store your customer data as well as route it securely to a wide range of common, popular marketing sales and product tools. Start building a better CDP for free today at rudderstack.com.

 

[AD ENDS]

 

[00:17:37] JL: So CodeCombat is clearly the company’s core product. But for Twilio, TwilioQuest, you have like a smaller team, Kevin. What does the process look like for you?

 

[00:17:48] KW: Our team kind of came out of the documentation team at Twilio. So I managed the team that built Twilio’s documentation. We also kind of ran our live training program for a long time. So we had worked with professional software developers on like teaching them how to use Twilio, but often that would involve teaching them web development concepts and kind of equipping them with the prerequisite knowledge necessary to build the sorts of apps that you can build with Twilio’s APIs. So the work on documentation kind of informed how we build the content in TwilioQuest. We do typically tend to start with a set of learning objectives that we want to get you and that sort of often takes the form of a document that looks like a tree because we know that, well, in order to learn this, you actually have to learn this other thing first and you start to see a set of objectives that looks a bit like a tree structure. We have used that in various contexts in our documentation, certainly. But in terms of game design, that actually starts to look like a map. So in the JavaScript mission, we know that we want to take the developer, go through installing the Node.js runtime on their computer first, and that’s kind of the first step. So that manifests itself in the game as like a laser barrier that you have to get through first in order to progress into the level. You have to install Node on your computer and then provide the path to the Node executable in order for you to make progress. And then after that, it starts to open up a little bit. Well, once you know how a function works, then you can do lots of other things. Or maybe at this point, it doesn’t matter which direction you choose first. You could maybe learn how object instantiation works or you could learn how iteration works or how Boolean Logic works. So there’s an environment in the game kind of after a major plot point where you can kind of branch off in different directions based on what you want to learn. So we typically start in that document. We know what we want to do instructionally first and then we kind of craft a narrative around that tree structure. The current JavaScript mission in TwilioQuest is probably our most recent articulation of this, if folks are interested in checking it out, but that’s typically where we start. And because it is a relatively small team, my partner in crime, Ryan Kubik, is much more a game developer than I am and has been invaluable in building out the more gamey aspects. But having been a web developer and working in documentation, we have historically made a pretty good team in a subject matter expertise and doing the scripting and the level building and all the other things that you need to do to actually make emission like that a reality.

 

[00:20:30] BH: What have you learned about the concept of “gamification”? Because that’s really the topic today, something that isn’t normally a game that becomes a game. In building TwilioQuest, what did you learn about the gamification and how that can apply to pretty much any other software we build or at least for developers and young coders?

 

[00:20:50] KW: Gamification, as a word, I don’t love, as a description of the concept. What I prefer to think about it is, “Are we actually making this a game? Are we providing something that is of sort of intrinsic value that is gratifying?” But we have always sort of been surprised at how much motivation it provides just to give a narrative structure to a lesson of any kind. So earlier iterations of TwilioQuest were like a browser-based tutorial website that did have experienced points and loot and that sort of thing. And just those progression elements were so motivating, but like far past anything we actually thought was possible. We would be at training events where we’d be teaching the messaging API and folks wouldn’t let us leave until they had gotten that special hat, like by completing the last mission in TwilioQuest. So those things have been super helpful. And then the inclusion with the current iteration of TwilioQuest, actually controlling a character in 2D space. That’s been a real revelation for us. Just by literally placing a path in front of the developer, it becomes instantly and obviously clear, like these are the options where I can go next. And when you’re learning how to code, isn’t always obvious. After you learn one thing, what are you supposed to do next? Or what can I use these skills for? And just being able to sort of put the learner into 2D space where they are actually making progress in a visual way helps drive people to complete much more content than they ever did before we had that tool at our disposal.

 

[00:22:32] CC: Piggybacking on the gamification piece. I agree that gamification can be a double-edged sword. You need to make sure that if you turn something into a game, that it does feel authentic, that what you’re doing in the game feels like, “Oh, I’m not just earning points for funsies. Why am I earning points? How does that connect to what I’m learning right now?” That’s the key. But if you really do it authentically, it’s so much more engaging than what we’ve learned via standard textbook. And oftentimes with the textbooks, you just learn the “what”. “What am I learning? Maybe how am I learning it?” But oftentimes you don’t see the “why”. And when you put it in a game, oftentimes you’re able to see, “Oh, I’m learning this because I can apply it to solve problems.” And the game is actually just posing some really engaging problems for the kids to solve. And in a subtle way, we’re not like hand-holding them through it, they feel like, “Oh, I have agency in my learning. I can actually take control of my learning and level up my hero by leveling up my coding skills as well.”

 

[00:23:35] JL: Charlotte, do you get to connect with the kids who have graduated from CodeCombat to see what they’re up to now and how they’ve used the skills they’ve picked up?

 

[00:23:44] CC: Yes. So that’s also a really gratifying, satisfying part of the job is to hear how much it’s changed kids’ lives. So actually, I’m tearing up already, a couple months ago, hearing from a teacher whose kid, she had a student who was struggling in the classroom. But she put CodeCombat in front of him and he just dove into coding. And she recently connected with him after he had graduated from college and he actually is an engineer. And just hearing that kind of a story, we just had a webinar about distance learning and empathy right now, which is something that a lot of educators and kids are struggling through and we had a teacher who was using both of our products, CodeCombat and Ozaria, and sharing what their students have been doing, despite all of these hurdles, like she’s able to use our curriculum, even though the kids are at home. And they can sort of progress at their own pace and they all were designing a game at the end of one of our chapters in Ozaria. And I was like, “Oh, we internally, within our company, had a game design competition for that game.” We made everyone eat their own dog food and we all went through the chapter and they designed the game. And at the very end, the winner was someone in operations of all people. And I was like, “Oh, let me share this game with you.” So I gave that game to the teacher and the teacher shared it with her students and all of the students wanted to go back and revise their game to make it better. So it’s sort of that kind of feedback loop of like, “Wow! We’re really making an impact.” And I bring those stories back to our team too, because it really energizes us. We’re like, “Wow! We’re making an impact in kids’ lives by really getting them engaged about this coding concept.”

 

[00:25:24] KW: That is really what makes it gratifying. I think one of my favorite stories is we had a woman who had been a Salesforce administrator and was really interested in getting into coding, but had struggled to kind of apply the skills that she was learning. She had done some browser-based tutorials like a Codecademy style thing. But after having done so, like felt like she wasn’t closer to actually being able to build something, but she played some TwilioQuest, and in so doing like kind of got a local Python development environment going and kind of understood like, “Oh, this is what I actually need to do to be a developer and I can create files and I put things in the files and I run the Python code on my computer and now I have a flask application running and now I can modify it and deploy it.” Those stories of empowerment are really, I mean, we love making games and we love making great experiences, but that’s where the gas really comes from for this work, for sure.

 

[00:26:27] CC: Both of us, if you’ve heard us, we say, “We get to do this.” And you don’t often hear that when someone’s talking about their job, but it truly is such a rewarding job to see that impact. So that’s why I wake up every day, I hop into that meeting and we get to design this game. We get to work on this game because it’s heartening to see that effect.

 

[00:26:51] BH: All right, Charlotte, now that you’ve said that part, what’s the worst part about this kind of work? What days suck the most? It can’t all be great.

 

[00:27:01] CC: Okay. Fine. You want me to be honest here? Well, the reality is CodeCombat, we’re still a startup. We’ve been in the game for several years, but we’re still a startup. So it often comes to pass when your vision doesn’t meet the resources that you have. And to me, that’s when it’s the hardest is when you have to choose what to implement and what not to implement based on the resources that you have.

 

[00:27:29] BH: That is all very relatable.

 

[00:27:31] KW: Yeah. That’s a hard plus one over here. Often, the vision does outstrip your ability to execute with the resources you have. There are just always the constraints of things you have to do to keep the lights on and sort of justify that. Your program is working, like doing the work of measurement and seeing how things are going and communicating the vision of the project to internal stakeholders and making sure that you’re hitting the numbers that you need to hit. The things that we leap out of bed to do are creating content and making the experience better. The things that we are grown at typically are the other things that we have to do in order to allow ourselves to have those days where we can work on code.

 

[00:28:15] JL: What would be your biggest advice for anyone who is interested in making an educational game about coding?

 

[00:28:21] CC: Play lots of games, like lots of games.

 

[00:28:25] KW: Yeah.

 

[00:28:25] CC: And we even have a weekly meeting where we just talk about games that we’re playing right now and reflecting on, “Oh, what worked? What didn’t work? What can we use to play in the game?” So I mean, I play board games too. Don’t just like confine yourself to video games because games are really engaging, but it also helps you break down what works in a game and what doesn’t work with a game, what feels authentic and what doesn’t feel authentic. So there’s that piece. But then for the coding piece or the curriculum piece, put the learner hat on. Pretend you’re the learner and go and learn that content and do a deep dive because then you can focus on what are the possible stumbling blocks along the way when you’re trying to learn a skill or a concept and document that because you know that when you’re designing a game for kids that they’re going to stumble on those same things. So you know where to focus the most attention on with your content. So I would say that’s a dual thing, deep dive into what you’re teaching and look at the stumbling blocks and then also deep dive in a game, just so you know what the tools are. And once you have a really nice toolbox of tools that you can use in game design, the sky’s the limit on what you can build.

 

[00:29:35] KW: I think I’d add to that, like if you are interested in doing an educational video game and building one, kind of starting with “why”, like understanding like, “Well, why are we building this? What is it that we are trying to make that is different from what exists? Is there a problem that we are trying to solve that is really novel here with regard to education?” Like going through and playing games and seeing what else is out, there is an important part of that. For instance, when we were getting started with TwilioQuest, I played some CodeCombat myself and my daughter actually has played a lot of CodeCombat and is still cranking through it. And you learn a lot about how other folks have approached the problem and you kind of need to articulate, like, what is your hypothesis around, what is going to be different about this or what is going to be useful about this.

 

[00:30:22] CC: Yeah, plus one on that with Kevin. Definitely with the “why”, I think we see a huge drop-off with students going from block-based coding, which somebody might’ve heard of with Scratch and Code.org. But when they head into programming and text, you see a huge drop-off of students who remained engaged in coding because getting syntax errors, debugging, misspellings, et cetera, just can be extremely frustrating. And so they wanted to build a platform where you sort of alleviate those frustrations or they have a very sophisticated debugging system that actually pushes informative errors to the kids so they can debug the code themselves. And so things like that, I think the “why” really also helps you make decisions when you’re at that crucial point, where you go, “I have this many resources and this much to build,” you always go back to your “why”. “Okay. Why are we here? Why are we building this?” And that really helps clarify what features should be prioritized over others as well.

 

[00:31:20] KW: Absolutely.

 

[00:31:21] CC: The other piece I’m thinking of too is start small. Don’t feel like you have to build an entire game, right? Apply the design thinking process and iterate over and over again on small pieces of your game to see, oh, what’s working, what’s not before you expand that world and expand that experience.

 

[MUSIC BREAK]

 

[AD]

 

[00:31:55] It’s hard to believe that JavaScript is 25 years old this month. Why not celebrate the occasion by sharpening your JavaScript skills? Pluralsight is making five of its expert-led JavaScript courses free each week in December. So you can learn something new, whether you’re a beginner or advanced. That means you could theoretically take 25 free courses before the start of 2021. If you’re wanting to do a frenzied movie montage thing where you transform your entire life in the time it takes to play a shortened version of Eye of the Tiger, or you could just have a pleasant time learning something new and start next year with Gusto. Go to javascript.com to get access to some really helpful JavaScript resources and start building new skills for free.

 

[AD ENDS]

 

[00:32:34] JL: Now we’re going to move into a segment where we look at responses that you, the audience, have sent to us to a question we made in relation to this episode.

 

[00:32:41] BH: The question we asked you all was, “What would you like to know about making educational coding games?”

 

[00:32:48] JL: Our first response is a message we received on our Google Voice.

 

[00:32:51] WOMAN: Regarding the question, what I’d like to know about making games for helping people learn to code, I’m curious like how you can think about the gamification aspects. What approaches do you have? Have do you check whether something’s right or wrong? Is it a multitude type of thing? Is it you could encode and it checks to get some tests? Sort of related to that, I’m curious of the math perspective of how do you know if someone’s completed or if they met whatever criteria to earn a badge, that sort of thing, sort of the math behind the gamifications is what I want to know about.

 

[00:33:24] BH: So I think this question is kind of about how do you measure success. I think, because we talked a little bit about what gamification means, but this kind of question gets more into, “How do you know if something is working the right way it’s supposed to?” Kevin, do you want to start us off?

 

[00:33:39] KW: Measurement of success for us, like we have instrumented the game with some analytics that give us a sense of how far folks progress into the content that we have because the content that we have is largely based on prerequisites. You won’t necessarily be able to move on to one concept before you have mastered the other end and they kind of build on one another oftentimes. We usually see from that data where people are getting stuck the most or where people actually end up. I mean, we can identify sort of some trouble spots usually based on that information, There’s one other part of the question about sort of, “How do you validate that they’ve completed the assignment?” That’s actually one of the biggest parts of the technology that we created is we have validation code that runs locally and that validation code is actually some of the most important instructional content we have in the game. We look at the code file that they submitted sometimes and we try to detect syntactical errors or if there’s errors in their environment configuration. That validation and then more importantly how we communicate that to the user is probably the most important part of the experience. So making sure that there’s like a feedback loop, which is useful is something that we work pretty hard at and still need to work hard at. It’s something that where you can never have quite enough.

 

[00:35:02] CC: I can piggy back off a little bit there too. So within our levels, we are very transparent to the user or the student or the player, what the goals are for that level. So it was actually literally shown off as a checklist and some of them are the goals we’re looking within the code itself. Are you using a function? Are you using a loop? And other ones are state-based goals. So when we mean by state-based goals is we check to see, “Did the character in your game go from Point A to Point B? And along the way, did the character collect these gems? Or along the way, did the character defeat these enemies?” And those state-based goals can only be achieved. We designed the level itself. It can only be achieved if they used code, like if they use proper code using conditionals, loops, functions, et cetera. So it’s a lot of thinking under the hood about how can we set up an experience where it authentically feels like I have to use a conditional to get past this cabbage cart guy in this village. And we set it up so it feels sort of authentic that, “Oh, it makes sense that if I can get past that cabbage cart guy, I actually authentically mastered conditionals in this level.” On the other hand, too, because this platform is being used by educators, we built a teacher dashboard where teachers can actually see the progress that their kids are making in the game itself. And especially in Ozaria, we even include multiple-choice questions along the way just to check that the kids understand specific concepts before they even dive into coding and the levels.

 

[00:36:41] JL: Given that there are so many ways to approach a problem, do you ever get like a snarky experienced developer coming in and just being like, “Oh, this should have been done this way or this solution should have been the one that was presented,” or anything like that?

 

[00:36:58] KW: I think you’ve been on the internet long enough to know that the answer to that yes. That definitely does happen from time to time. It’s kind of hard if you’re teaching something like JavaScript, there’s a lot of new technology and new shiny around that. If you’re not using a fat arrow function, then what are you doing with your life? But yeah, I mean, I think you just try to stay laser focused on the audience that you’re trying to serve. Most of the time for us, we are generally serving folks that are either professionals and transitioning careers or university students or folks that are trying to acquire the skills to become a professional developer and just trying to stay focused on what their needs are. And sometimes the solution that is the most clear and is the most sort of repeatable and teachable might be better than trying to teach how to do a fancy recursive algorithm implementation or using the latest and greatest technology.

 

[00:38:01] JL: I kind of hijacked our member responses just now. Ben, would you like to read our next question?

 

[00:38:07] BH: Yeah. Bernard asks a good one. “What frameworks and libraries are available to game development?” And let’s talk about maybe the kind of stuff that’s more browser-based or further from only game development stuff.

 

[00:38:23] KW: Thankfully in 2020, there are some pretty good tools available for game development that’s focused on the browser. TwilioQuest does run on the desktop, but it uses a technology called “Electron”, which is a wrapper technology that lets you package HTML, CSS, and JavaScript as a desktop web application, which is used by Slack and Visual Studio Code and some other desktop applications that you might use every day. And the technologies that we use, we use React for a lot of the user interface components of the game. And from the actual game development, I’ll say like development in Unity and other things that I’ve dabbled in the past. HTML and CSS with React is about a hundred times better for creating user interfaces than a lot of those other technologies are at least right out of the box, in my humble opinion. So that piece of game development ends up being quite a bit easier. The thing where the tooling is less robust is around the more gamey elements, like the level editing and map design. There are some technologies out there to use. So the game development library we use primarily for the animated and interactive bits is called a Phaser.js, which has been really great. We’ve enjoyed working with it quite a lot. It renders to a web GL canvas, which kind of sits underneath the React application that we build. And that’s what we use for physics, collisions, animations, those types of things. For level design, we use an open source tool called “Tiled”, which is a map editor that exports the map information into a JSON format that you can consume in the browser. So that for a variety of reasons has been a good tool that we’ve leveraged quite a bit. But the thing that you’ll find lacking from like a game design and development standpoint is if you’re using something like Unity or even say a game maker studio, you might be used to some pretty robust like drag-and-drop tooling and level design niceties that if you’re developing for the web you won’t necessarily have access to. But with technologies like Phaser and some of the open source tools that are out there, you can sort of leverage the wins that you get from user interface being so much easier to maybe having a little bit more time to invest in some of those other bits.

 

[00:40:50] JL: So Ephraim wrote in and asked, “Why would you recommend a coding game to someone over a tutorial?”

 

[00:40:57] KW: The primary bit that I’d throw out there is when we see people that really do connect with the game, it kind of has succeeded where other tutorials have failed in giving them enough of a carrot and then enough motivation to make progress on something that is ordinarily pretty difficult. Software development generally is pretty difficult. It’s sort of defined by frustration. You’ll introduce syntax errors. You’ll execute code and it doesn’t work. There’s so much failure involved in the process of software development that having some motivation, having a goal, having something fun that happens as a result of your hard work, that can provide more motivation than you might have ordinarily, and also providing the narrative structure that you have in a game is probably the primary advantage I’ve noticed because I did write documentation and our team created a lot of documentation that was in more of a tutorial format. And folks just make it way further into the game content than they ever did in our written content largely because we are able to provide that narrative structure. You are making a character walk from one objective to another. So it’s clear what’s happening next. So I think like the power of providing that narrative structure along with the extra motivation and reward that you get are probably the primary differentiators between what works about a game versus what works about a tutorial.

 

[00:42:23] CC: Yeah. I definitely agree with the motivation piece too. Also along that same line, a tutorial often is just focused in the education, we call it “direct instruction”. So it’s sort of more of like a lecture. It’s a teacher teaching you the concepts. But you also then need to have the motivation to go and take what you learned and apply it and practice it. And what’s great about a coding game is it enfolds all of that into one experience. So you’re learning the concept, but then you’re immediately immersed into a world where you need to practice and apply it to solve problems. And because of that also, again, the way you learn to code is you’re failing forward and you’re embracing mistakes. And in a coding game, it sort of encourages you to do so. You’re rewarded to do so. And so I think the immersion and the motivation within that experience is to me far superior than checking a tutorial. Now a tutorial is greatest if you’re not a beginner and you just need a quick access to understanding or clarifying a question. But for me, a coding game is great for if you’re starting from the beginning, you really want to do a deep dive into a concept or a skill, I’d recommend that.

 

[00:43:33] JL: Thank you both so much for joining us today.

 

[00:43:35] CC: Thanks for having us.

 

[00:43:36] KW: Yeah, of course. 

 

[00:43:46] JL: I want to thank everyone who sent in responses. For all of you listening, please be on the lookout for our next question. We’d especially love it if you would dial into our Google Voice. The number is +1 (929) 500-1513 or you can email us a voice memo so we can hear your responses in your own beautiful voices. This show is produced and mixed by Levi Sharpe. Editorial oversight by Peter Frank and Saron Yitbarek. Our theme song is by Slow Biz. If you have any questions or comments, please email [email protected] and make sure to join our DevDiscuss Twitter chats on Tuesdays at 9:00 PM Eastern, or if you want to start your own discussion, write a post on Dev using the #discuss. Please rate and subscribe to this show on Apple Podcasts.