The Secret’s in the Code: Using a Puzzle Game to Boost Students’ Code-Reading Confidence
“I have a very special game for you to play today…”
My group of 4th and 5th graders get quiet as we all stand in a line outside the door to the media lab. Then, a slew of questions:
“What kind of game?”
“Is it a fighting game?”
“Are we playing Minecraft??”
“You’ll see,” I say, setting a mysterious tone as I open the door…
“A fundamental property of the web is that we can see its source code. It’s just as important to be able to read and understand code as it is to be able to write it.” — Tapan Parikh, Cornell Tech
Let me rewind for a second.
A couple of weeks earlier on November 9th, 2016, the day after the election, I had attended the second annual To Code and Beyond: Computer Science at Play Conference at Cornell Tech. Given the results of the election the day before, the atmosphere of the event was one of confusion and fear mixed with a sense of urgency. A quote that stood out to me was the one highlighted above from Tapan Parikh, associate professor at Cornell Tech. Just as students should be able to fact-check the content of their news sources, he explained, they should also be able to investigate the source code of a website and have a decent understanding of what’s going on beneath the surface. While it’s essential that we encourage students to use code as a tool for creative expression, it is equally critical that they are able to look at someone else’s code and say, “Oh, I see what’s going on here.”
A few days after the conference, I was sitting in the media lab by myself, browsing through random animations on Scratch’s website trying to find something silly and fun for my after-school students to watch at the beginning of class. I came across an animation called The Sandwich by FunnyAnimatorJimTV. Because I hoped to turn this into a lesson about code, I looked inside to see how it had been made. That’s when I noticed this:
(FYI: This block of code makes it so that if you type out the word “chocolate” while the animation is running, you’ll be rewarded with recordings of an airhorn and people yelling “OHHHH!” and “WOMBO COMBO!”)
Now I knew I had something that would REALLY get the kids’ attention, and it would make for a great lesson in deciphering other people’s code, too.
Later that day, I showed them the animation and they were indeed amused. “Let’s check out the code,” I said. I asked them a few questions about what some blocks in the code were doing, e.g. “Why does it say ‘switch costume’ here?” Then I navigated over to the easter egg. “Hmm, what’s this? Does someone want to raise their hand and tell me what this might do?”
The students studied the block of code with furrowed eyebrows. Then one student raised her hand and suggested that we type out each of the letters in the “key pressed” blocks. “Ah yes,” I said, “would you like to come up and help me with that?”
I started playing the animation. The student came up and carefully pecked out the letters that made up the secret word, one by one. Finally, she pressed on the last “e,” and suddenly the sound of screaming and airhorns blasted over the computer’s speakers, completely drowning out the animation’s original audio. The whole class howled with laughter and yelled, “AGAIN! DO IT AGAIN!” I sat and watched and laughed along with them as more students came up and typed out the secret word, their delighted shrieks unrelenting.
Once they’d all taken their turns and caught their breath, I asked them to think about how they might incorporate secrets like this into their own projects. They happily obliged, and proceeded to spend the rest of the class period recording themselves saying all manner of odd things and then planting secret trigger phrases within their code.
With Tapan Parikh’s words still rolling around in my mind, I tried to think of ideas for how I might extend this lesson. That’s when I remembered a strange online “game” that I had played in college called “Notpron.”
In this game, you must change URLs and find clues embedded in the website’s source code in order to progress and ultimately win. I knew that I wanted my students to become “code detectives,” and I figured that a game like this could serve as a highly motivating context within which they could do so. So basically, I decided to create my own kid-friendly version of Notpron in Scratch.
Fast forward to the present moment. The students walk slowly into the room and notice that the same Scratch game is open on all 13 computer screens that together form a jagged semi-circle along the edge of the lab walls. Before class started, I had purposefully organized all of the chairs so that they were away from the computers and facing the whiteboard at the front of the room.
“Take a seat and listen closely,” I say as I draw their attention to three rules scrawled in dry-erase marker on the board:
- Do not move the bear with your mouse.
- Do not click on or change the blocks of code before you beat the game.
- You must go through all 4 levels before entering the castle.
“And finally,” I say, “remember this: The answers that you seek can be found within the code.” And then I let them loose, all of them scrambling to their computers hoping to be the first to figure out just what on earth this strange game has in store for them.
(1 minute later…)
“HOW DO YOU MOVE THE BEAR! I DON’T GET IT! I’M PRESSING THE ARROW KEYS BUT THE BEAR WON’T MOVE!”
“HOW DO I GET TO LEVEL 2?? WHAT IS THIS?”
My students throw their hands up in the air, some of them getting out of their seats and jumping up and down in bewilderment. One student runs up to me and shouts, “THIS GAME IS EVIL!!”
“This game is not any normal game,” I say calmly. “It may not be what it seems.”
But another minute passes by and they’ve had enough of my cryptic clues. Sensing their imminent disengagement, I suggest something more concrete: “Maybe you should look for something that’s broadcasting ‘LEVEL 2’.”
This renews their determination. Now they have something that they know they should be looking for. And that something is this:
(Look familiar?)
Finally, a student locates the block of code pictured above and yells “OH!!”
All the students’ heads snap in his direction, and some actually run over to his computer. “What? What is it?? Where is it?!”
Without saying another word, he begins to type slowly on the keyboard, surrounded by eyes that watch him intently. And then he sees this:
“OHHHH YEAH! I DID IT! LEVEL 2, BABY!”
The kids all freak out and run back to their computers, and one by one they pump their fists in the air as they reach Level 2. They all get it now: If they want to win the game, they’ll have to decipher the secrets within the code.
The rest of the class period continues in this way, and I continue to drop small hints for those who are struggling. Eventually, some students reach the end of the game and do a celebratory dance as happy music plays over the “YOU WIN!” screen. Energized by their success, they bounce from classmate to classmate, offering helpful advice to those who are still figuring out the puzzles.
After beating the game, a student who had previously been feeling distracted and unmotivated in class came up to me and asked, “Can I make my own version of a game like this?”
“Of course,” I said, “that would be awesome!” I could tell the gears were beginning to turn as he ran back to his computer.
How can we use computer science to spark joy in young people?
I was initially drawn to coding as a teenager because I realized that I could use it to make cool things and express myself. I looked at the source code for my LiveJournal and thought, “What’s going on here?” I browsed through communities of LiveJournal users who were creating custom layouts with HTML and CSS and was amazed by the fact that all these strange words and numbers could apparently be used to change the way that something looked on my computer screen. Before I wrote any of my own code, I was looking through other people’s code and trying to understand the role that each element was playing. I had no idea what most of the stuff was doing, but I noticed that if I changed a 300 to a 400, my journal entries shifted slightly to the left or to the right, and this was exciting.
Looking at a screen full of code can be extremely intimidating, even when it’s made up of colorful blocks. I want my students to be able to look at someone else’s code and feel confident that they can figure out what it’s doing, but even more than that I want them to have fun in the process.
If an unassuming adult had walked into the media lab and observed the students interacting with my game, they may have thought it was far too loud and unreasonably chaotic. But from my point of view, if even one student associates that feeling of excitement with a moment of deep learning, then I’ll have done my job.
(P.S. If you’re interested, you can play the game here.)
If you liked this post, please ♥ it and share with others.
