CodePlay: Adaptive Coding Discovery for Kids

A game where children discover real HTML concepts by experimenting — not being taught. An AI Game Director watches their behavior and adapts the next challenge accordingly.

Comment

Inspiration

I built CodePlay because of my children.

I want my kids to learn coding. I believe it will be an important skill for them as they grow up. But at the same time, I don't want to ruin their childhood by making them sit through boring technical lessons.

I want them to play. I want them to explore. I want them to be curious.

And if they can learn something while doing that, even better.

That was the idea behind CodePlay.

The first experience I built for it is Pixel Zoo.

I wanted to find a way to introduce HTML without starting with a long list of tags and definitions. Instead of telling a child to memorize what <h1>, <p>, or <ul> means, why not give them something to build and let them discover these things along the way?

So I made a zoo.

The child gets different jobs to do. The zoo needs a big title. It needs a description. It needs a list of animals. It needs a map link. It needs a picture.

The child chooses what they think should be used.

That felt much more natural to me than starting with a textbook.

What it does

Pixel Zoo is a small coding discovery game for kids.

Right now it has five levels that introduce some basic HTML concepts:

  • Headings
  • Paragraphs
  • Lists
  • Links
  • Images

Each level gives the child a simple job inside the zoo.

For example, they might need to add the main title for their zoo. They see different heading choices and have to figure out which one makes sense.

The important part is what happens when they get it wrong.

The game doesn't just say "Wrong."

It explains what they selected and why it doesn't fit the current job.

The mistake becomes part of the lesson.

The AI Game Director

There is also an AI Game Director powered by Gemini.

The game tracks things such as the attempts the child makes, how quickly they complete a challenge, and what concept they are learning.

When a challenge is completed, the game sends information about the learner's performance to the Game Director.

Gemini then helps decide what the child should experience next.

This means the game can eventually give different children different learning journeys instead of sending everyone through exactly the same fixed sequence.

The child sees:

Your Zoo Guide is thinking...

While that happens, the AI Game Director analyzes the learner's progress and chooses the next adventure.

How we built it

The frontend is built with Next.js and hosted on Cloudflare Pages.

The backend runs on Google Cloud Run using Google ADK and Gemini.

Firestore is used for learner and game state data.

The AI Game Director is designed to make the learning experience adaptive rather than simply following a predetermined sequence.

If the AI service is temporarily unavailable, the game also has a deterministic fallback progression so the learner can continue playing.

Why it matters

My bigger goal with CodePlay is simple.

I want my children to learn coding without feeling like they are being forced to learn coding.

If they finish playing Pixel Zoo and say:

"That was fun. What can I build next?"

then I think I've done something right.

I don't want to teach kids coding as early as possible.

I want to make them want to learn it. 🦁

Built With

  • adaptive-learning
  • ai
  • ai-agents
  • cloud-firestore
  • cloudflare-pages
  • coding-education
  • edtech
  • fastapi
  • gamification
  • gemini
  • generative-ai
  • google-cloud
  • google-cloud-run
  • google-gemini
  • kids-education
  • next.js
  • python
  • react
  • typescript
Share this project:

Updates

Submission history