Azure Adventure Unleashed: Enhancing Learning with an Azure OpenAI HTML5 RPG Game

Iron Contributor

Sep 23, 2023

Introduction

Welcome to the world of Azure Adventure, where learning meets gaming in a dynamic and engaging way! Azure Adventure is a captivating HTML5 RPG game that offers a unique learning experience by harnessing the power of Microsoft Azure technology. In this open-source game, students embark on a thrilling journey where they interact with non-player characters (NPCs) that assign them real Azure tasks.

The Challenge

Complete these tasks within a given time frame to earn in-game coins. Over the past year, we've been hard at work, continuously improving the game to make it not only more enjoyable but also more secure and user-friendly. In this blog, we'll dive into the exciting updates that have transformed Azure Adventure into an even more immersive learning experience. We believe in sharing knowledge and enabling students and educators to make the most of Azure Adventure. So, we've prepared a comprehensive guide on how to deploy and use this incredible learning tool. Whether you're a student looking to embark on your Azure Adventure or an educator seeking to enhance your teaching methods, we've got you covered.

Are you ready to embark on this Azure Adventure?

Join us as we explore the latest features, enhancements, and technology that power Azure Adventure. Whether you're an aspiring Azure expert or simply someone who loves a good RPG, there's something here for everyone. Let's dive into the Azure Adventure and unlock the potential of Microsoft Azure in a fun and interactive way!

Ready to Start:

Ready to start your Azure Adventure? Dive into this immersive learning experience today by following our comprehensive deployment guide. Whether you're a student eager to sharpen your Azure skills or an educator looking to enhance your teaching methods, Azure Adventure is your gateway to the world of cloud computing.

Don't miss out on the opportunity to level up your Azure knowledge while having a blast. Get started now, and let the adventure begin!

The Solution

Azure Adventure is an HTML5 RPG game that is open source and utilizes the Azure Automatic Grading Engine. In this game, students interact with non-player characters (NPCs) who assign Azure tasks to the students. If the students can successfully complete these tasks within the given time limit, they are rewarded with in-game coins.
Over the course of a year, we have implemented several updates to make the game more enjoyable and improve the overall system. These updates include:

NPC instruction now utilizes Azure Open AI ChatGPT 3.5, enhancing the interaction and providing more dynamic and engaging conversations.
We have added the Azure Static Website Managed API and Active Directory Authentication to enhance the game's functionality and security.
The deployment process has been improved through the use of the Cloud Development Kit for Terraform (CDKTF), making it easier and more efficient to deploy the game.

Demo

Architecture Diagram

For more information, please consult the Microsoft Azure Automatic Grading Engine - Oct 2021 Update Update. Now, I will provide an overview of the update.

In the Grading Engine, a new Get API Key Azure Function has been added to allow the Azure Adventure Game to obtain the student's Azure Service Principal. This improvement addresses the issue where students were using different Service Principals between the engine and their project. The Grading Engine incorporates logic to verify the permissions of Service Principals and ensures that students cannot cheat by sharing the same subscription for the assignment.

In the Grading Engine Assignment (Grader), a new Game Task Azure Function has been implemented to dynamically generate game task instructions using C# reflection. Additionally, these instructions are rewritten using Azure Open AI ChatGPT 3.5. Further information will be provided in the upcoming session.

In the Azure Adventure Game:

Authentication is handled through the built-in Azure Active Directory (Azure AD) in the Azure Static Website, which retrieves the student's email address. All Managed Functions check the user's email in the Azure Storage table for users. Only users with existing emails are allowed to play the game.
The Azure task function, called Game Task Azure Function, uses function key authentication, and returns a list of game tasks to the React Game Apps via an Ajax call.
The Grader task function acts as a proxy with authentication to call the Game Task function. It also tracks grading results such as firstTrial, lastTrial, trialCourt, and passAt. When restarting the game, students are required to read the magic book to reload their coins. Instead of re-running all tests (which may exceed the Managed Functions timeout limit of 45 seconds), the coins are loaded from the database.

Educators will be able to comprehend the duration of each task in the Azure assignments.

Utilizing Azure OpenAI ChatGPT for the Generation of Dynamic and Engaging Instructions

In order to increase the enjoyment of the game and prevent students from easily sharing their answers, the Game Task Azure Function utilizes Azure OpenAI ChatGPT to rephrase all instructions. Here is a code snippet of GameTaskFunction.cs with a simple prompt.

  var openAiClient = new OpenAIClient(
     new Uri(azureOpenAiEndpoint),
     new AzureKeyCredential(azureOpenAiApiKey)
 );
 var chatCompletionsOptions = new ChatCompletionsOptions
 {
     Messages =
     {
         new ChatMessage(ChatRole.System, "You are a Microsoft Azure game dialogue designer, Good at designing lively and interesting dialogue." +
                                          "You only reply to instruction to ask the player setup something in Microsoft Azure."),
         new ChatMessage(ChatRole.User,
             $"You need to help me rewrite a sentence with the following rule:" +
             $"1. Keep all technical teams and Noun. " +
             $"2. It is instructions to ask player to complete tasks." +
             $"3. In a funny style to the brave (勇者) with some emojis" +
             $"4. In both English and Traditional Chinese." +
             $"5. English goes first, and Chinese goes next." +
             $"6. Only reply to the rewritten sentence, and don't answer anything else." +
             $"Rewrite the following sentence:\n\n\n{sentence}\n"
             ),
     },
     Temperature = (float)0.9,
     MaxTokens = 800,
     NucleusSamplingFactor = (float)0.95,
     FrequencyPenalty = 0,
     PresencePenalty = 0,
 };
 var chatCompletionsResponse = await openAiClient.GetChatCompletionsAsync(
     deploymentOrModelName,
     chatCompletionsOptions
 );
 var chatMessage = chatCompletionsResponse.Value.Choices[0].Message;

One downside is that it takes time to execute, and we attempted to have ChatGPT rewrite the entire conversation in a single prompt. However, it is difficult to anticipate when it will exceed the token limit, especially since we also need to generate Chinese text simultaneously.

To tackle this problem, we have implemented caching as a solution to decrease both the running time and cost. Specifically, we are keeping three versions every 15 minutes to ensure efficient caching.

 var rnd = new Random();
 var version = rnd.Next(1, 3);
 var cacheKey = sentence + version;
 var tokenContents = TokenCache.GetCacheItem(cacheKey);
 if (tokenContents != null)
 {
     return tokenContents.Value.ToString();
 }          
// Call Azure OpenAI Chat GPT
var chatMessage = chatCompletionsResponse.Value.Choices[0].Message;
var policy = new CacheItemPolicy
{
    Priority = CacheItemPriority.Default,
    // Setting expiration timing for the cache
    AbsoluteExpiration = DateTimeOffset.Now.AddMinutes(15)
};
tokenContents = new CacheItem(cacheKey, chatMessage.Content);
TokenCache.Set(tokenContents, policy);

Example Outputs

Task 0: 👾 Brave warrior, can you summon a technical team and create a resource group named 'projProd' in the vibrant city of Hong Kong? 🌟🏰 勇者啊，能否请你召唤一支技术团队，在香港这个充满活力的城市中，创建一个名为'projProd'的资源组？🌟🏰(You have 2 minutes and you can get 10 coins!)

Task 0: 👋 Sure thing, brave adventurer! Please summon your technical powers and create a resource group named 'projProd' in the majestic land of Hong Kong! :crystal_ball:🦾 請勇者大人展開你的技術之力，在香港這片寶地中創建一個名為「projProd」的資源群組吧！:crystal_ball:🦾(You have 2 minutes and you can get 10 coins!)

How to deploy and use it?

Prerequisite

To complete the deployment, follow these steps:

Deploy the AzureAutomaticGradingEngine_Assignments.
Deploy the AzureAutomaticGradingEngine.
Make sure to record the outputs of the Terraform Azure Function.

Deploy with Azure Adventure Game

Fork the repository at https://github.com/wongcyrus/azure-adventure-game.
Create a new Codespace. This project contains a CDK-TF project for deployment. Rename the file .env.template to .env.
For local development, rename the file local.settings.template to local.settings.json and update it as .env.
Log in to your Azure account and set the default subscription.
Execute the CDK-TF command.

Conclusion

The updates made to Azure Adventure have significantly enhanced the game's functionality, security, and overall user experience. The utilization of Azure Open AI ChatGPT 3.5 has allowed for the generation of dynamic and engaging instructions, making the game more enjoyable for students. The addition of the Azure Static Website Managed API and Active Directory Authentication has improved the game's functionality and provided an extra layer of security. The deployment process has also been streamlined and made more efficient using the Cloud Development Kit for Terraform (CDKTF). These updates have made Azure Adventure a more immersive and user-friendly game for students, while also providing educators with valuable insights into the duration of each task in the Azure assignments. Overall, the updates have been successful in improving the game and ensuring a better user experience for all players.

Project collaborators include, Kwok,Hau Ling, Lau Hing Pui, and Xu Yuan from the IT114115 Higher Diploma in Cloud and Data Centre Administration and Microsoft Learn Student Ambassadors candidates.