Dashboards That Pop: Gamification (GIS Day Edition)
I’ve talked before about how I like to expand my skills and creativity by assigning myself silly little challenges. First there was the ArcGIS StoryMap Escape Room, then there was the ArcGIS Experience Builder Zombie Tracker, and now I present the Gamification Dashboard.
Gamification is the process of adding games or gamelike elements to something in order to encourage participation. GIS Day 2024 is fast approaching, so what better theme to build this dashboard around?
My hypothetical GIS Day includes 5 map-tastic activities for participants to do. To keep this example simple, I’ll say I had 15 folks register for GIS Day and I split them into 5 teams of 3 people. My goal is that everyone will do all 5 activities, which means each team will have done 15 activities for an overall total of 75 completed activities.
Of course, I could easily create a dashboard showing the number of participants, activities completed, and overall progress. But could I make it fun? Could the dashboard itself encourage more participation? With no actual participants it’s hard to tell, but i certainly had fun making the dashboard.
Set-Up
Before I can start building my dashboard, I need something to power it. I decided to create a survey that participants would fill out as they complete activities. I kept it pretty straightforward. What team are you on? What activity did you participate in? What was the activity codeword? I have a constraint on my survey, so they can only submit a record if they input the correct codeword for their selected activity. At the end of each activity session, they will receive the appropriate codeword. There’s no room for cheaters in this game!
I have a unique design planned for my dashboard that requires me to have at least 1 record for each team to pull it off. So, I have an additional activity called ‘initial’ in the dropdown that is just for me. Once my survey is published, I’ll submit a record for each team with this initial activity. Then I can remove that activity from the dropdown list and republish my survey.
I’m also planning on including an activities recommender in my dashboard, so I need to create a layer with information about each activity and fun flyers. I’ve added a number field to this data and assigned each activity a unique number between 1 and 5. We’ll find out why when we get to the dashboard.
The Dashboard
Finally, the moment everyone has been waiting for, the dashboard reveal! The more team members participate, the more the dashboard comes alive. Here we are at the very start of the challenge.
Here we are partway through the challenge.
Our team members are off and running. Eagle-eyed readers might have noticed a secret image starting to appear now that our participants have started finishing activities.
If our participants need a little help deciding on their next activity, they can always leave it up to fate.
Finally, here is the result when (hopefully) everyone has completed all 5 activities.
The Configuration
I wanted my dashboard to feel alive. I wanted participants to see their engagement immediately reflected in the dashboard. Let's see how exactly I set all this up.
Racetrack
I used a simple Group By Data Expression to count the number of survey submissions each team has. I then used that in a List element with some custom HTML that basically sticks a black box behind each emoji. As more submissions come in, the box gets bigger – pushing the emoji to the finish line. This is why I had to do some pre-submission on my survey. To ensure there was a record for each team so that they could be positioned on the racetrack at the start.
// remove the initial submission from the movement calculations
var scalc = ($datapoint.total_rate - 1)
// how large (in percentages) the black box can be that pushes the emojis forward. Too large and they will get pushed back to the start. Also the skinny flamingo needed a bit extra to finish even w/ the others.
var maxspeed = When($datapoint.team_name == 'pink', 96, 95)
// goal submissions for each team
var goal = 15
// calculate percentage complete
var speed = When(scalc >= goal, maxspeed, scalc > 0, ((scalc/goal)*100), '0')
// give teams fun emojis
var racer = When($datapoint.team_name == 'blue', '🐳',
$datapoint.team_name == 'green', '🐊',
$datapoint.team_name == 'orange', '🐅',
$datapoint.team_name == 'pink', '🦩',
$datapoint.team_name == 'red', '🦞','')
return {
textColor: '',
backgroundColor: '',
separatorColor:'',
selectionColor: '',
selectionTextColor: '',
attributes: {
speed: speed,
racer: racer
}
}
If you want to be able to see your racers move across the racetrack, be sure to set a refresh interval in your Data Expression and the List itself.
Then I used some HTML in the Line Item Template to pull it all together.
<div style="background-color:#000000;float:right;width:{expression/speed}%;">
</div>
<div>
<p style="text-align:right;">
<span style="font-size:48px;"><strong>{expression/racer}</strong></span>
</p>
</div>
Activity Recommender
This is a nicely styled Details element that uses my activities layer. My dashboard doesn't include a map, so I applied the pop-up style directly to the layer using the Visualization tab in the Item Details. The Details element is powered by a Numeric Selector. I have the Details element set to only render when filtered and changed the No Selection message to something more fortune teller-y. Pick a card number and see your results. Now you can see why I needed to add unique numbers to my dataset.
It’s the Final Countdown 🎶
Here is an Indicator element turned countdown clock. I’ve used some Arcade to calculate the days (optional), hours, and minutes until a set date and time (the end of my event). Once we reach our event ending time, the display flips to show a time’s up message.
// Event day and time: year, month (-1), day, hour, minute, seconds, miliseconds
var eventdate = Date(2024, 8, 12, 17, 35, 0, 0)
// Total countdown time in minutes
var mindiff = DateDiff(eventdate, Now(), 'minutes')
// Grab whole minutes value
var totalmin = Floor(mindiff)
// Find number of days
var totalday = totalmin / 1440
// Grab whole days value
var dvalue = Floor(totalday)
// Find hours from remaining minutes
var totalhour = (totalmin - (dvalue*1440)) / 60
// Grab whole hours value
var hvalue = Floor(totalhour)
// Find remaining minutes
var mvalue = totalmin - (dvalue*1440) - (hvalue*60)
// Zero padded
var dpretty = When(dvalue < 10, Concatenate('0',dvalue), dvalue)
var hpretty = When(hvalue < 10, Concatenate('0',hvalue), hvalue)
var mpretty = When(mvalue < 10, Concatenate('0',mvalue), mvalue)
// Create countdown
var countdown = Concatenate(hpretty + ':' + mpretty)
// var countdown2 = Concatenate(dpretty + ':' + hpretty + ':' + mpretty)
// Time's up!
var display = When(Now() > eventdate, "Time's Up!", countdown)
// Top text
var top = When(Now() <= eventdate, "Time Remaining", "")
return {
textColor:'#ffffff',
backgroundColor:'#000000',
topText: top,
//topTextColor: '',
//topTextOutlineColor: '',
//topTextMaxSize: 'medium',
middleText: display,
middleTextColor: '',
middleTextOutlineColor: '',
middleTextMaxSize: 'large',
// bottomText: Text($datapoint.set_up_date, 'MM/DD/Y hh:mm'),
//bottomTextColor: '',
//bottomTextOutlineColor: '',
//bottomTextMaxSize: 'medium',
//iconName:'',
//iconAlign:'left',
//iconColor:'',
//iconOutlineColor:'',
//noValue:false,
//attributes: {
// attribute1: '',
// attribute2: ''
// }
}
Once again, set that refresh interval in the element.
Surprise Trophy
Next up is the secret image that only reveals itself as participants complete activities. I am using an Indicator element that uses the same Data Expression as the racetrack. Instead of using a hex code for my icon color, I’m using HSLA, where A controls the transparency of the color. 100% is full color while 0% is fully transparent. I’m using the completion percentage to populate the alpha value. So, if my participants have completed 75% of their activities, then my icon color is 75% color (25% transparent).
var activities = $datapoint.sum_total_rate - 5
// Set goal
var goal = 75
// Set starting color
var hue = 254
var sat = 69
var lum = 66
var lightPer = Round((activities/goal)*100,2)
// Lightness Function ********************************************************
function lightness(lightPer){
return ('hsl(' +hue+ ', ' +sat+ '%, ' +lum+ '%, ' +lightPer+ '%)')
}
return {
//textColor:'',
backgroundColor:'#000',
//topText: '',
//topTextColor: '',
//topTextOutlineColor: '',
//topTextMaxSize: 'medium',
// middleText: lightness(lightPer),
// middleTextColor: '',
// middleTextOutlineColor: '',
middleTextMaxSize: 'xx-large',
//bottomText: '',
//bottomTextColor: '',
//bottomTextOutlineColor: '',
//bottomTextMaxSize: 'medium',
iconName:'trophy',
iconAlign:'center',
iconColor: lightness(lightPer),
iconOutlineColor:'',
//noValue:false,
//attributes: {
// attribute1: '',
// attribute2: ''
// }
}
Once again be sure to set that script refresh interval.
Encouraging Message
The final element in the dashboard is an Indicator the randomly displays emoji related puns. This I shamelessly stole from @jcarlson. Link here.
Bonus Idea
Build anticipation with this single element dashboard counting down the days, hours, and minutes to your GIS Day event. Display it on a wall monitor in your office, embed it in a sites page with more information, or just leave it up on your desktop as you eagerly await the best day of the year.
I not only had fun creating this dashboard, but it also forced me to flex some Arcade muscles trying to make it all happen. It was a nice combination of fun, challenging, and educational. Which is where most satisfying projects tend to lie. Hopefully this blog has encouraged you to incorporate some dashboards into your GIS Day activities.
Happy Dashboarding!