Azure Adventure – A RPG game to test student’s Azure practical skills with Microsoft Azure Automatic Grading Engine 2022
Introduction
Students love to play game and learn with fun is the key to a successful course! At this moment, there is no something like AWS Game Day and Google Cloud Hero for Microsoft Azure. Those type of event is to gamify learn creating or debugging cloud in practical way and my students are all love those games!
Azure Adventure is an open source HTML5 RPG game that builds on top of the latest version of Azure Automatic Grading Engine. Students need to talk to non-player character (NPC) in the game, then NPC will give some Azure tasks to students. If students can complete those tasks within time limit, then students can get some coins in the game.
Demo
Architecture Diagram
Microsoft Azure Automatic Grading Engine 2022
There are several improvements after Microsoft Azure Automatic Grading Engine - Oct 2021 Update release.
- Upgrade everything to .Net 6.0 and code refactoring.
- Students don’t need to run "az ad sp create-for-rbac -n "gradingengine" --sdk-auth" and the new version students need to run “az ad sp create-for-rbac -n "AzureAutomaticGradingEngine" --role="Contributor" --scopes="/subscriptions/student-subscription-id". For the current Azure Adventure, students can use "Reader" role.
- Change to run the grader NUnit test executable in File share mounted to Azure Function. This change allows updating the unit test without redeployment the Grader Azure Function App and it does not require to compile NUnit test into single executable file, which is not working for .Net core 6.0 for my NUnit test project.
- Change to use our CDK-TF for Azure library for the deployment as the project deployment step including upload file to file share and I want to standardize all my project’s deployment.
- Add filtering logic to the grader Azure function.
- Add GameTaskGeneratorConsoleApp project to AzureAutomaticGradingEngine_Assignments, and this project generates tasks.json based on C# attribute for Azure Adventure Game and the grader Azure function. This prevent the potential command injection security project.
NUnit test code sample:Outputs:
The overall function of Azure Automatic Grading Engine is the same as previous version.
How Azure Adventure Game works?
Firstly, I would like to say thanks to Pablo Benmaman for his great blog post and source code as we are naïve in game development and this is the first time for us to create a game. We just add ajax call logic when the game hero starting conversion.
https://github.com/wongcyrus/azure-adventure-game/blob/main/src/App.js
let taskNumber = 0;
let reloadCoin = false;
const checkTasks = (heroSprite, detail, task) => {
setTimeout(() => {
let formData = new FormData();
formData.append('credentials', JSON.stringify(detail.servicePrincipal));
formData.append('filter', task ? task.name : "");
fetch(gradingEngineBaseUrl, {
method: 'POST',
body: formData
}).then((res) => res.json()).then(
(data) => {
if (task) {
for (let key in data) {
console.log(key + "->" + data[key]);
if (data[key] !== 1) {
console.log("failed!");
return;
}
}
heroSprite.collectCoin(task.reward);
taskNumber++;
}
else {
for(let t of tasks){
const passAllRequiredTestsForATask = t.tests.map(c=> data[c] === 1).every(element => element === true);
if(passAllRequiredTestsForATask){
console.log("Passed: "+t.name);
heroSprite.collectCoin(t.reward);
taskNumber++;
}else{
break;
}
}
reloadCoin = false;
}
},
(error) => {
console.log(error);
}
);
}, task ? task.timeLimit * 1000 * 60 : 1);
};
useEffect(() => {
const dialogBoxEventListener = ({ detail }) => {
// TODO fallback
const heroSprite = detail.heroSprite;
if (detail.characterName === "book_01") {
setCharacterName(detail.characterName);
setMessages(
dialogs[detail.characterName]
);
reloadCoin = true;
checkTasks(heroSprite, detail);
return;
}
if (!detail.characterName.startsWith("npc_") || reloadCoin) {
setCharacterName(detail.characterName);
setMessages(
dialogs[detail.characterName]
);
return;
}
let taskMessages = [...dialogs[detail.characterName]];
if (taskNumber >= tasks.length) {
taskMessages.push({ "message": "Sorry we don't have any task for you!" });
setCharacterName(detail.characterName);
setMessages(
taskMessages
);
return;
}
const task = tasks[taskNumber];
checkTasks(heroSprite, detail, task);
taskMessages.push({ "message": `Task ${taskNumber}: ` + task.instruction + `(You have ${task.timeLimit} minues and you can get ${task.reward} coins!)` });
setCharacterName(detail.characterName);
setMessages(
taskMessages
);
};
window.addEventListener('new-dialog', dialogBoxEventListener);
Grader Azure Function runs one or more NUnit tests based on predefined filter in tasks.js and if all of the tests passed for the task, then game hero will receive some coins.
There is no database to keep track of students progress. However, students can read the magic book, then it will run all NUnit tests and get back their coins.
Hero cannot get a new task before they get back their coins.
After hero get back his coins, students need to keep talking to NPC for Azure tasks and win all coins until all tasks completed!
This is a Reactjs SPA and we host it in Azure Static Web Apps.
How to deploy Azure Adventure Game?
It cannot build under Windows environment and open a Linux terminal.
git clone https://github.com/wongcyrus/azure-adventure-game
cd azure-adventure-game
npm i
Play with deployment server.
npm run start
Build the deployment package.
npm run build
Deploy with Azure Static Web Apps
az login
az group create \
--name azure-adventure-game-group \
--location "eastasia"
GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
az staticwebapp create \
--name azure-adventure-game \
--resource-group azure-adventure-game-group \
--source https://github.com/$GITHUB_USER_NAME/azure-adventure-game \
--location "eastasia" \
--branch main \
--app-location "/" \
--output-location "build" \
--login-with-github
az staticwebapp show \
--name azure-adventure-game \
--query "repositoryUrl"
az staticwebapp show \
--name azure-adventure-game \
--query "defaultHostname"
Conclusion
This update makes my students learning Azure with fun and motived students practice Azure skills under the guided manner. The further development will integrate the Azure Cloud Lab Environment as we can create predefined Azure Environment and let students play a debugging game or enhance existing Azure Environment. Azure Automatic Grading Engine is independent of the Azure Adventure game and it can keep grading students progress periodically, and send the mark report to teachers.
Project collaborators include, Andy Lum, Jerry Lee, Fong Ho Luen, Jenny Cheung, Woodi Tsang, Eric Luan and Wina Yu from the IT114115 Higher Diploma in Cloud and Data Centre Administration.