Inside a winning TwilioQuest extension

Inside a winning TwilioQuest extension

Last week, we released TwilioQuest extensions, a toolkit for you to create your own content and missions with TwilioQuest. What better way to kick the tires on these new tools, than with a retro-game themed hackathon? We challenged the 300 students at Hack-cade to build the best TwilioQuest extension. Although all the submissions were spectacular, one in particular captured our hearts and took the prize. Read on to learn how to create a winning TwilioQuest extension, from La’Kaleigh, creator of bot.NET.

Sharing the love of C#

TwilioQuest is at its heart an educational game, and whilst you can create all sorts of experiences with your own missions, La’Kaleigh decided to follow the example of existing missions like the Top-secret Javascript Test Lab and Mysteries of the Pythonic Temple by teaching a programming language. La’Kaleigh’s go-to programming language is C#, and so she aimed to create an extension that would teach the basics of C# and .NET. La’Kaleigh likes C# for its similarity to other popular programming languages like Java, and its connection to the .NET ecosystem and Visual Studio makes it a great jumping off point for learning C++.

La’Kaleigh’s extension, named bot.NET, teaches C# with a storyline driven by wordplay and references to the .NET community. A malicious botnet takes control of an R&D facility, corrupting the resident Dotnet bots, based on the .NET mascot. The player must build a C# program to kick out the botnet and restore the Dotnet bots to normal function.

During the hackathon, La’Kaleigh used a heap of TwilioQuest extension features. She imported custom sprites to use in her map, edited with Tiled. The bot.NET bots are custom objects, and users are taught C# basics through a series of objectives. Most impressive though is the validator used to check whether users have completed the assigned tasks.

Validating code with syntax trees

Validators in TwilioQuest are short scripts that check whether an objective has been completed. For a simple objective, such as asking a user a knowledge-based question, the validator could be as simple as an equality check on a submitted string. Other validators are more complicated. How do you check if someone has written a correct program, for example? You could test for a particular string of code, but there’s often many ways to write the same piece of code, and it being different doesn’t mean it doesn’t produce the correct result. Many TwilioQuest missions check submitted code by actually running it and checking the output.

La’Kaleigh’s validator goes one step further. She was worried about users finding other ways to get to the output, shortcutting instructions and missing out on key learnings. She also didn’t want her exercises to always revolve around printing output. Instead, she used the .NET Compiler Platform, otherwise known as Rosalyn, to analyze the submitted code. Using Rosalyn, the validator could parse the player’s code, get a syntax tree, and see if it contained key elements that the objective asked them to include. Other parts of the Compiler Platform allowed La’Kaleigh to run the code and check for errors. Whilst most validators are written in Javascript, La’Kaleigh wrote almost all of her validator in C# to take advantage of the .NET Compiler Platform, and then called the C# script from the JS validator.

What’s next for Bot.net?

La’Kaleigh has big plans for the future of this extension. Since the hackathon, she has already added a new NPC, and cleaned up some code - code can get messy during a 24-hour hackathon. She hopes to revisit the validator, and apply Rosalyn not only to the player’s code, but to the ideal solution, comparing the syntax trees directly. The Dotnet bots and Kyle aren’t the only characters in the mission. La’Kaleigh has already created an animated monster, this cute little green fella, inspired by the ASP.NET monsters from Channel 9. The monsters will feature in future objectives teaching about ASP.NET.

If you want to follow along with the development of Bot.net, or try it yourself, you can find the extension on La’Kaleigh’s GitHub. Follow the TwilioQuest extension documentation to install the extension.

Build your own TwilioQuest mission

Bot.net was built with the TwilioQuest extension template. The template gets you started quickly with examples for all the major features. Grab the template, and follow the Get Started guide to build your own extension.

Looking for more inspiration? Check out the other TwilioQuest submissions at Hack-cade. These extensions range from treasure hunts to Tensorflow tutorials, using a wide range of TwilioQuest features (and even some that weren’t documented!).

If you have questions or want to share your extension with the community, join us in the TwilioQuest Discord, or on the Twilio Community forum. Our weekly Twitch stream also regularly features TwilioQuest extension development, and Q&A with the developers.