How to make an educational game with AI

Describe the thing you want somebody to understand, then ask for a game whose only available move is that thing. Not a quiz with a reward attached. If the subject is how an equation stays balanced, the player should be moving weights on a beam, and the beam should tilt when they get it wrong. The screen is the question, so there is no question screen.

Four steps to a game where playing is learning#

Build a balance scale game as ONE self-contained .html file. Canvas
only, no frameworks, no images.

THE IDEA BEING TAUGHT: an equation stays true as long as you do the
same thing to both sides. The mechanic has to BE that idea. Do not
build a quiz about it and do not reward correct answers with a
different game.

THE SCREEN: a beam on a pivot. The left pan holds some unit blocks and
some identical mystery bags, all bags weighing the same. The right pan
holds unit blocks only. The beam tilts according to the real weights,
so the player can always see which side is heavier.

THE MOVES: there are exactly two. Remove the same number of unit
blocks from both pans, or halve the contents of both pans. There is no
answer box anywhere in the game. A halving that would leave part of a
block is refused, with one short line saying why.

SOLVED: the round is done when one pan holds exactly one mystery bag
and the other holds only blocks. The blocks remaining are what the bag
weighs. Print that sentence when it happens.

A WRONG MOVE: never just mark it wrong. Apply it, let the beam swing
out of balance and stay there, and only then show a line explaining
what that move did to the two sides. Undo it and carry on in the same
round.

NO LOSS SCREEN: no lives, no game over, no restarting from round one.
A player who is stuck stays in the round they are stuck in.

ROUNDS: an array of rounds written out by hand, each giving the bags
and blocks on each side, in increasing order of difficulty. Do not
generate rounds randomly.

PHONE: blocks and bags can be dragged by touch. Add
canvas { touch-action: none; } to the CSS so a drag cannot scroll the
page.

Animate the beam from the number of seconds since the previous frame,
never letting that number exceed 0.05, so a tab returning from the
background does not snap the beam across. Collect every tunable value,
beam length, block size, tilt speed and the list of rounds, into one
CONFIG object at the top of the file.

The mechanic is the lesson#

Every educational game that works has the same property. The thing you do with your hands is the thing you are meant to understand. Get better at the game and you have got better at the subject, because they are not two activities.

There are two deletion tests and a design has to survive both. Take out the teaching: if a game remains, the teaching was an obstacle in front of it. Take out the game: if an intact worksheet remains, you built a worksheet with a scoreboard. Only when neither half stands alone is the lesson actually load bearing.

The other mark of the good version is how failure reads. A quiz says incorrect. A mechanic lets the bridge sag, the circuit stay dark, the beam tip over. The player sees a consequence that belongs to the subject rather than a judgement that belongs to the game, and a consequence is something you can reason backwards from.

This is also why the reward loop is not just ineffective but actively harmful. Pay a player to get through the content and you have told them the content is not the good part. They will believe you, because you built the whole screen to say so.

Turning a fact into something you do#

The move from topic to mechanic is a search for a verb. Here is the same subject written both ways, so the difference is visible rather than theoretical.

Notice what the right column has in common. The player can be partly right, the game can show how close they got, and nothing has to be marked.

Partial correctness is the quiet benefit. A pin lands near the right place and the distance tells you something a tick or a cross cannot. That near miss is also what makes a second attempt feel worth making, since the player can see they were close rather than being told they were wrong.

Some subjects resist this and that is honest. Vocabulary, dates, names of bones: those are recall, and recall practice really is drilling. For those, the useful lever is not the mechanic but how hard the questions are, which is the subject of the math game guide.

Feedback that says why, not just wrong#

A cross teaches nothing. Even the correct answer alongside it teaches less than you would hope, because the player still cannot see where their own reasoning went off. They retry by guessing differently.

That means choosing your wrong options on purpose. Each one should be a real misunderstanding somebody holds, and the explanation attached to it should address that misunderstanding by name. Random wrong numbers cannot do this, which is another reason generated content struggles here.

Place it where the player is looking. Next to the move they made, on the same screen, while the thing is still in front of them. A results page at the end of a round is read by almost nobody, and the parts of it that matter are about a decision they have already forgotten making.

Keep it short enough to be read. One line beats a paragraph, because a player who wanted to read a paragraph would be reading something else. If the explanation needs more room than that, the question was asking about two things at once.

Never put a loss screen in front of a retry#

The pattern to avoid is familiar from arcade games and borrowed without thinking. Wrong answer, lose a life. Three of those and a game over screen appears, and the player starts again from the beginning.

In a teaching game this is backwards in a way that is easy to miss. The mistake just told you exactly which idea has not landed yet. The right next move is to put that idea in front of them again. A loss screen does the opposite: it removes the material, then makes them replay the parts they had already understood.

• Retry the same item at once. Not the round, not the level, the item. The player is already thinking about it, which is the only moment the correction is cheap to absorb.
• Bring it back later as well. Put the missed item back in the queue a few items on. The second meeting with it is where it sticks, and the player gets to notice that they now know it.
• Let progress stay. Anything earned stays earned. A session that ends should leave somebody further along than it found them, even a session that went badly.
• No timers on the explanation. If a line of text appears and vanishes on a countdown, it has been written for the game's pacing rather than for the person reading it.

None of this means there can be no challenge. A teaching game can be hard, can be timed, and can be lost. What it cannot do is use failure as a gate between the player and the thing they came to understand.

🎓Educational games written by AI

‹ ›

GLM-5.3multi

★ 5.072 plays

▶

3D Rubik's Cube Lab

Common questions#

Where to go next#

When somebody plays it without being asked to, publish it. The page it gets records the model that wrote the code and the prompt behind it, which is useful to the next person building for the same subject.

The general method is in how to make a game with AI. For difficulty that follows the player, read the math game guide. For content that has to be valid rather than merely varied, the puzzle guide covers authored levels, and the word game guide covers word lists. Prompts for common faults are in the prompt guide, and the educational games here are worth a look first.