Gamifying Learning Umbraco

posted on Dec 19 by Paul Seal

Tagged with:: .NET 6; .NET Core; Backoffice; Community; Developer; Fun; GitHub; v10

In this article we explore the idea of gamifying learning Umbraco to increase engagement and motivation amongst the Umbraco Community.

Where it all began

Back in July, I was hyped after a great Codegarden and was brewing up an idea for the Umbraco Community. I had noticed there wasn't so much engagement online about Umbraco, especially the .NET Core versions (v9 and v10). I can't prove it, but it just really felt like that.

We were in a weird state where people who were working on v7 and v8 seemed to feel it was irrelevant to write and share content about those versions of Umbraco, and not enough people were yet using the new versions v9 and v10.

So I got to thinking, how can we help the whole Umbraco Community to learn about the new versions of Umbraco together? How can we make it fun, interesting and engaging.

Gamification

I realised that if I were to find a way to gamify learning Umbraco, that could add the fun element and it could create a buzz around the community.

What is Gamification?

Gamification is the process of applying game mechanics to a non-gaming environment to increase engagement, happiness and loyalty.

I decided to look into the aspects of gamification and what motivates people and this is what I found:

Action and objectives are key motivators for gamers, as they want to be challenged and to feel like they are making progress and achieving something through their actions.
Social competition is another important motivator for gamers, as they often enjoy competing with other players and comparing their skills and progress.
Mastery and scoring are also important motivators for gamers, as they want to improve their skills and to see their progress reflected in the form of points and high scores.
Achievement and awards are also important motivators for gamers, as they want to be recognized for their accomplishments and to feel like they are making progress and achieving something through their actions.
Immersion and roleplaying are key motivators for gamers, as they want to feel like they are part of the game world and to be able to take on different roles and identities.
Customisation is also an important motivator for gamers, as they want to be able to personalize their game experience and to make the game their own.

What should we take from this?

From this, we can see that competition is an important motivator for many gamers, and incorporating competition into our learning experience can help to increase engagement and motivation.

We can also see that challenges and rewards are key motivators for gamers, so incorporating these elements into our learning experience can help to make it more engaging and rewarding.

Additionally, badges and win streaks can be effective motivators for gamers, so using these elements in our learning experience can help to increase user engagement and motivation.

Overall, we can take from this that using game design elements and principles in our learning experience can help to make it more engaging and enjoyable, which can help to increase user engagement and motivation.

Gamifying Umbraco

By gamifying Umbraco, we can add action and excitement to the learning experience by creating a weekly quiz where users can test their knowledge about the platform.
We can also incorporate social elements into the gamified learning experience by allowing users to compete with each other and to share their results online.
Mastery and scoring are also important elements of gamification, so we could use a leaderboard to show users their scores and ranks, which can help to increase their motivation and engagement.
Achievements and badges are also key elements of gamification, so we could use these to recognize users for their accomplishments and to motivate them to continue learning and improving.
Immersion is another important element of gamification, so we could create a learning experience that allows users to learn in reverse by starting with a blog post, video, or other resource and then working backwards to explore the related topics and concepts.
Finally, we could also allow users to customize their learning experience by allowing them to submit their own questions to be included in the quiz, which can help to make the learning experience more personal and relevant for each user.

Introducing the Umbraco Community Quiz

I pitched the idea of building this quiz site to Arnold Visser with the intention of launching it during my talk at the Dutch Umbraco User Group Festival 22 (DF22) and he said I should go for it.

So with 3 months to build it, I inevitably put off building it for 2 months. I finally got started on building it at Codecabin 22. Codecabin is such an inspiring place to be, with so many awesome people around me, I felt in the right headspace to make a start.

With some hard work in the evenings and some help from my friends Aaron, Nik, Matt and Owain I was able to get it working for the talk and that's how the Umbraco Community Quiz was born.

A screenshot of the Community Quiz leaderboard

So how does it work?

First of all, visit communityquiz.net and register for an account.
Login and go to your profile. You can update your name and profile image. You can even set your profile to hidden if you just want to take part in the quizzes but not be visible to anyone else.
Go to the quizzes page and complete the quizzes from the previous weeks.
At the end of the quiz you get a score and you get the chance to see which questions you got right and which ones you got wrong.
Next to each of the answers when you are going through a completed quiz, you get the chance to click a link and learn more about that answer. This is the most valuable part of the quiz for me, because you are being directed to a resource that will help you learn more about something you may not have known before. I like to call this learning in reverse.
When you start completing quizzes you start appearing on the leaderboard.
You also earn badges as rewards for doing things on the site, such as updating your profile, getting a perfect score, etc.
You can view all of the badges that are available right now.
You can click on people's names on the leaderboard and see their results and which badges they have earned.
As well as taking the quizzes you can also set the questions for upcoming quizzes by submitting your own questions with the relevant links to find out more about the answers. Perhaps you have written a detailed blog post, you could turn it into an answer for a question and submit it.

Learning in different ways

Contribute to the source code

As well as learning in reverse by checking out the links to the solutions when you've completed a quiz, you can also learn from the source code. The site is completely open source so you can fork the GitHub repository and get it running on your own machine. This is a great way of learning and if you contribute to the code you can help teach other people as well. There have been 11 different people including myself who have contributed to the source code for the Community Quiz site at the point of writing this article.

Searching for the answers

Even if you don't click on the links for the answers after you complete the survey or you don't check out the source control, another way of learning is by googling for the answers as you are completing the quizzes. No one said you can't search for the answers. The way I see it is 'Cheating is learning'. Because by searching for the answers you are adding that information to your brain for later use.

Managing the questions, and quiz submissions

The site uses Konstrukt for managing the questions and quiz submissions in the backoffice of Umbraco. This means the data can be stored in SQL tables and be easily updated. Some the cool features of Konstrukt we are using are:

Cards

Here is the code used for that card:


.AddCard("Pending", "icon-help-alt", p => p.Status == ((int)QuestionStatus.Pending).ToString(), cardConfig => {
    cardConfig.SetColor("blue");
})

Cards code snippet

Data Views

Here is the code for the data views:


.AddDataView("All", p => p.Status == ((int)QuestionStatus.Pending).ToString()
					|| p.Status == ((int)QuestionStatus.Approved).ToString()
					|| p.Status == ((int)QuestionStatus.Incorrect).ToString()
					|| p.Status == ((int)QuestionStatus.Used).ToString()
					|| p.Status == ((int)QuestionStatus.Deleted).ToString()
					|| p.Status == ((int)QuestionStatus.Unknown).ToString())
.AddDataView("Pending", p => p.Status == ((int)QuestionStatus.Pending).ToString())
.AddDataView("Approved", p => p.Status == ((int)QuestionStatus.Approved).ToString())
.AddDataView("Incorrect", p => p.Status == ((int)QuestionStatus.Incorrect).ToString())
.AddDataView("Used", p => p.Status == ((int)QuestionStatus.Used).ToString())
.AddDataView("Deleted", p => p.Status == ((int)QuestionStatus.Deleted).ToString())
.AddDataView("Unknown", p => p.Status == ((int)QuestionStatus.Unknown).ToString())

Dataviews code snippet

Actions

Here is the code for the actions:


.AddAction<ChangeStatusAction>(actionConfig => actionConfig
	.SetVisibility(x => x.ActionType == KonstruktActionType.Bulk
		|| x.ActionType == KonstruktActionType.Row))

Actions code snippet

You can see the full configuration for Konstrukt in this site by checking it out on GitHub.

Thanks so much to Matt and Lucy from Outfield Digital for giving us the free license.

Hosting

My friend Aaron from UmbHost has let me host the site on his servers for free because it is an Umbraco Community initiative. He even set up a GitHub action for deploying it. Thanks so much Aaron.

How can you take part?

Complete the quizzes
Submit your own questions
Raise issues for features or bugs in GitHub
Contribute to the code
Spread the word

Paul Seal

Twitter: codesharepaul on Twitter
GitHub: prjseal on GitHub
LinkedIn: paul-seal-3064892 on LinkedIn

Tech Tip: JetBrains Rider

Check it out here