Last week I made the small card sorting game called The Climate Impact Sorting Challenge where the challenge is to sort cards with different foods in the order of their climate impact. But then the thought hit me: Any time you find yourself with a dataset with labels (say, types of foods) mapped to numbers (say, climate impact in CO2e) you could turn that into a card sorting game! So, I created a template to facilitate this, and in this post, I’ll show you how to make card sorting games like these using R (or really any data-savvy language):

But first, here are the games I’ve made so far:

• It’s the Calories Sorting Challenge! Place the cards in order of increasing calorie content. How many can you get right before you make a mistake? ( source code )
• It’s the Countries Population Sorting Challenge! Place the cards in order of increasing population. How many can you get right before you make a mistake? ( source code )
• It’s the U.S. Presidents Sorting Challenge! Place the cards in order of when each U.S. president first took office. How many can you get right before you make a mistake? ( source code )
• It’s the Climate Impact Sorting Challenge! Place the cards in order of increasing climate impact. How many can you get right before you make a mistake? ( source code )

How to make a card sorting game using the template?

In the sorting-challenges-template GitHub repo you’ll find a file called template-sorting-challenge.html which is the whole game packaged into one stand-alone HTML file, except that it contains a number of placeholder variables that need to be filled in. Let’s define those in R:

library(jsonlite)
library(tidyverse)
library(glue)

# Define the placeholder variables to be inserted into the template
# You can see a variable is a placeholder, as it uses a weird UpperCamelCase name.
GameTitle <- "Calorie Content Sorting Challenge"
GameDescription <- "Place the foods in order of increasing calorie content per 100g."
AuthorName <- "Rasmus Bååth"
Instructions <- "
  Drag and drop the food items to arrange them in order of increasing
  calorie content per 100g. See how many you can get right before making a mistake!
"
LeftGuidanceText <- "← Less calories"
RightGuidanceText <- "More calories →"
InfoText <- "<p>
  <b>About this game</b><br>
  This game helps you learn about the calorie content of different foods.
</p>"

Here we’re creating a small example game that’s about sorting foods according to their calorie content. There’s one placeholder variable left, and that’s the data for the cards. Here we’ll fill that in with some made-up example calorie values:

# Create the candidates cards, here with made up with food items, 
# but generally here's where you would read in some data and munge it into 
# the target formar with the following columns:
# description: The name of the card
# value: The numeric value of the card
# display: The string that will be revealed on the card
candidate_cards <- tribble(
  ~description,       ~value, ~display,
  "Apple",            52,     "52 kcal per 100g",
  "Banana",           96,     "96 kcal per 100g",
  "Broccoli",         34,     "34 kcal per 100g",
  "Cheddar Cheese",   403,    "403 kcal per 100g",
  "Chicken Breast",   165,    "165 kcal per 100g",
  "White Rice",       130,    "130 kcal per 100g",
  "Avocado",          160,    "160 kcal per 100g",
  "Salmon",           208,    "208 kcal per 100g",
  "Almonds",          579,    "579 kcal per 100g",
  "Dark Chocolate",   546,    "546 kcal per 100g"
)
# Convert the candidate_cards dataframe to JSON format for the template
CandidateCardsArray <- toJSON(candidate_cards, auto_unbox = TRUE)

Finally we replace the placeholders in the template, write it to a file…

sorting_challenge_template <- read_file("template-sorting-challenge.html" ) 
example_sorting_game <- glue(sorting_challenge_template, .open = "{{", .close = "}}")
write_file(example_sorting_game, "example-sorting-game.html")

and presto, a game!

Here’s the full R script for creating this example game. Do let me know if you make something fun with it!