How I Turned a Knowledge Gap Into a Quiz Game

I’m embarrassingly bad at identifying flags. Like, really bad. Show me anything beyond the major world powers and I’m guessing. I recently saw the Scottish flag and could only identify it because the name Scotland was right next to it. This, eventhough I was recently in Scotland (🏴󠁧󠁢󠁳󠁣󠁴󠁿 just in case you were curious). I decided to see if Claude could help me with this so I started a quick session and said it would be fun to build a matching game to practice.

My actual prompt was:

I am really bad about identifying flags. It would be fun to create a game where the player matches a flag to a country.

What happened next was a nice little example of how AI-assisted building actually works in practice—including the parts that don’t go smoothly.

From idea to working game

Within a minute, Claude had generated a full React component: 50 countries, multiple choice questions, score tracking, progress bar, the works. Clean code. Looked great on paper.

Then I asked for more features. Difficulty modes. Region filters. Timed mode with bonus points. Streak tracking. A learning mode that shows facts about each flag after you answer. Claude added all of it without breaking anything. The country list expanded to 150+ with fun facts for each one.

At this point I had a game I’d probably use. One problem: the flags weren’t showing up.

The debugging loop

Claude’s first attempt used flagcdn.com for images. Didn’t render in the artifact preview. Second attempt tried flagsapi.com with a fallback. Still nothing.

This is the part where working with AI gets interesting. The code was correct. The URLs were valid. But something about the sandbox environment wasn’t playing nice with external image requests. Rather than keep troubleshooting network issues, Claude pivoted to using emoji flags instead.

{currentQ.country.code
  .toUpperCase()
  .split('')
  .map(char => String.fromCodePoint(char.charCodeAt(0) + 127397))
  .join('')}

That little snippet converts a two-letter country code like “us” into the 🇺🇸 emoji. No external dependencies. Works everywhere. Problem solved.

Making it mine

The last request was simple: match my site’s color scheme. Claude pulled up ado.im, grabbed the dark theme colors, and restyled everything. Dark charcoal backgrounds. Teal accents. Subtle borders. The game now looks like it belongs here.

Total time from “wouldn’t it be fun to build a flag game” to a finished, styled, feature-rich quiz: maybe 10 minutes of actual interaction. Most of that was me playing with the settings and realizing the images weren’t loading.

Flag Quest Game Play

What this shows

A few things stood out:

Iteration is cheap. Adding five major features took seconds. The cost of asking “can you also add X” is basically zero, which changes how you think about scope.

Debugging still happens. AI doesn’t eliminate the “why isn’t this working” phase. But it does make pivoting to alternative approaches fast. Instead of me researching emoji unicode conversion, Claude just wrote it.

Context matters. Claude read my site, understood the aesthetic, and applied it without me specifying hex codes. That’s the kind of small thing that adds up.

The artifact system is genuinely useful. Being able to run React components directly in the chat, iterate on them, and immediately see results removes a ton of friction. No local dev environment needed for quick experiments like this.

I’ll probably actually use this game. There’s something satisfying about building a tool to fix your own knowledge gaps—especially when the building part takes less time than a coffee break.

Now if you’ll excuse me, I need to go learn which flag belongs to Kyrgyzstan. 🇰🇬

Oh, you can see this game in action here