๐ŸŽฎ AI Workshop ยท Educational Games

Create your own educational game

On this page you will find instructions and ready-made prompts to ask an AI for help, create a simple HTML game and improve it step by step. It can be a quiz, but also an arcade game, a dodging game, a catching game, a sorting game, a matching game or a challenge-based game.

๐Ÿงฉ

One single file

Your game must be in one single file called index.html.

๐Ÿ•น๏ธ

A game with a challenge

The educational content must be part of the game mechanics, not just decoration.

๐ŸŒ

Final result

At the end, you will have a public link to share your game.

1

The challenge

You are going to create a mini-game that helps people practise something from class.

It does not have to be a question game. You can create an arcade game where the player catches correct answers, avoids mistakes, sorts objects, moves through levels, unlocks clues or completes small challenges related to educational content.

  • Arcade
  • Catch objects
  • Avoid mistakes
  • Sort
  • Match
  • Solve challenges
  • Memory
  • Quick questions
Before asking for code Decide what will be practised, what the player does, how the player wins, how the player loses and what role the class content has.
After asking for code Save the file, test it, find mistakes and ask for specific improvements.
Important rule: whenever you ask the AI for changes, ask it to return the complete HTML. This makes it easier to copy and test.
2

Game ideas

Choose a simple game mechanic and turn it into a way to practise content.

๐ŸŽ Catch the correct items Objects with words, numbers or concepts fall from above. Catch the correct ones and avoid the wrong ones.
๐Ÿšง Avoid mistakes The character must avoid false answers, spelling mistakes, incorrect operations or wrongly classified concepts.
๐Ÿงบ Sort quickly Drag or click items to place them into categories: animals, word types, historical periods, materials, and so on.
๐Ÿ—๏ธ The correct key To open a door, choose a path or move to the next level, the player must solve a small challenge.
๐Ÿง  Educational memory game Match concepts with definitions, words with translations, formulas with examples or images with names.
โšก Answer race The player moves forward after choosing the correct option, but moves back or loses time after a mistake.
3

Ready-made prompts

Copy one of these texts, fill in the gaps and paste it into the AI.

๐Ÿง  Master prompt Start
Act as an educational programming assistant.

I want to create a simple game that helps students practise class content.
The game should be fun and have clear mechanics. It should not necessarily be limited to asking questions.

Technical conditions:
- it must be in one single HTML file;
- it must include HTML, CSS and JavaScript in the same file;
- it must not use external libraries;
- it must work when opened in a browser;
- it must have clear instructions;
- it must have scoring, lives, time or another progress system;
- it must have a start screen;
- it must have an end screen;
- it must have a play again button;
- the design must be clear, accessible and attractive.

Game details:
Subject or area: [write the subject or area here]
Content I want to practise: [write the content here]
Type of game: [arcade, catch objects, avoid, sort, memory, race, challenge...]
Mechanics: [explain what the player does]
How the educational content is integrated: [explain what the player must identify, solve, sort or remember]
How to win: [explain the victory condition]
How to lose or what causes penalties: [mistakes, time, lives, points...]
Difficulty level: [easy, medium, progressive]
Visual style: colourful, clear and easy to use
Language: English

Return the complete code for the index.html file.
๐ŸŽ Arcade: catch the correct items Dynamic
Create an educational arcade-style game in one single HTML file.

Game idea:
The player moves a basket or character left and right.
Objects fall from above with texts related to class content.
The player must catch the correct objects and avoid the incorrect ones.

Educational content:
Subject or area: [write here]
Topic: [write here]
Correct objects: [examples of words, operations, concepts or valid answers]
Incorrect objects: [examples of mistakes, distractors or concepts that do not belong]

Rules:
- catching a correct object adds points;
- catching an incorrect object removes one life;
- the game ends when all lives are lost or when a target score is reached;
- it must include a start screen, instructions, score, lives and end screen.

Design:
- clear and colourful;
- simple keyboard controls and on-screen buttons;
- no external libraries.

Return the complete code for the index.html file.
๐Ÿšง Arcade: avoid mistakes Action
Create an educational arcade-style game in one single HTML file.

Game idea:
The player controls a character that must avoid incorrect items and collect correct items.

Educational content:
Subject or area: [write here]
Topic: [write here]
Correct items: [examples]
Incorrect items: [examples]

Rules:
- collecting a correct item adds points;
- touching an incorrect item removes life or time;
- the game gradually becomes a little more difficult over time;
- at the end, show the score and a message based on the result.

Include:
- start screen with instructions;
- keyboard controls and touch buttons;
- visible score;
- lives or timer;
- end screen;
- play again button.

Do not use external libraries.
Return the complete code for the index.html file.
๐Ÿงบ Sorting game Content
Create an educational sorting game in one single HTML file.

Game idea:
Cards appear with words, concepts, simple text-based images or numbers.
The player must sort them into the correct category by clicking buttons or dragging cards.

Educational content:
Subject or area: [write here]
Topic: [write here]
Categories: [for example: noun, verb, adjective / solid, liquid, gas / correct, incorrect]
Items to sort: [include several examples]

Rules:
- each correct answer adds points;
- each mistake shows a brief explanation;
- there must be a limited number of rounds;
- at the end, show the score and a review message.

Design:
- large cards;
- clear buttons;
- readable text;
- no external libraries.

Return the complete code for the index.html file.
๐Ÿ—๏ธ Level-based challenge Adventure
Create an educational level-based challenge game in one single HTML file.

Game idea:
The player must complete several doors, rooms or levels.
To move forward, the player has to solve a small challenge related to class content.

Educational content:
Subject or area: [write here]
Topic: [write here]
Types of challenges: [calculate, translate, order, sort, choose the correct concept...]
Number of levels: [for example, 5]

Rules:
- each completed level gives points;
- if the player fails, they receive a hint or explanation;
- the game may include lives, attempts or time;
- at the end, show a final screen with the result.

Design:
- simple adventure style;
- clearly separated levels;
- large buttons;
- no external libraries.

Return the complete code for the index.html file.
๐Ÿ”ง Fix a bug Debug
This game has a problem.

Bug I found:
[explain what happens here]

Steps to reproduce the problem:
1. [first step]
2. [second step]
3. [what incorrect result appears]

What I expected to happen:
[explain the correct result]

Fix the bug.
Keep the game in one single HTML file with integrated CSS and JavaScript.
Do not use external libraries.
Return the complete code for the index.html file.
๐Ÿ“š Improve the educational value Learning
Improve the educational value of this game.

I want:
- the class content to be integrated into the game mechanics;
- it should not be just decoration or a single question;
- mistakes should show a brief explanation or hint;
- the player should have to recognise, sort, solve, connect or apply the content;
- the difficulty level should be progressive;
- the final screen should include a review message.

Do not change the main idea of the game.
Do not use external libraries.
Return the complete code for the index.html file.
โœจ Improve the design Visual
Improve the visual design of the game to make it more attractive.

I want it to have:
- pleasant colours;
- large buttons;
- easy-to-read text;
- clearly separated cards or game areas;
- a clear start screen;
- a motivating end screen;
- a design that adapts to mobile or small screens;
- simple animations that are not distracting.

Do not change the main game mechanics.
Do not use external libraries.
Return the complete code for the index.html file.
โ™ฟ Improve accessibility Important
Improve the accessibility of the game.

I need:
- large buttons that are easy to press;
- text with good contrast;
- clear instructions;
- the game should not require sound to play;
- it should be clear what happens when the player is correct, wrong, wins or loses;
- it should work well on small screens;
- the controls should be simple.

Keep the game in one single HTML file.
Do not use external libraries.
Return the complete code for the index.html file.
4

Test and improve

A game is not finished until someone has really tested it.

When you have your code, save it as index.html and open it in the browser. Then play a full round and check this list.

โœ“
The file opens correctly in the browser.
โœ“
The game has clear instructions.
โœ“
The game can be played from start to finish.
โœ“
The score, lives, time or progress system works.
โœ“
The play again button works.
โœ“
The educational content is integrated into the game.
โœ“
Mistakes help the player learn or give useful hints.
โœ“
The design looks good and is easy to understand.
Tip: if something fails, do not just say โ€œit does not workโ€. Tell the AI what you did, what you expected to happen and what actually happened.
5

Publish the game

When it works on your computer, you can upload it and share it with a link.

Option A: Neocities

  1. Go to Neocities and sign in to your account.
  2. Open your site dashboard.
  3. Upload the index.html file.
  4. Open your public website address.
  5. Check that the game works online.
  6. Copy the link and hand it in to your teacher.

Option B: GitHub Pages

  1. Create a new repository on GitHub.
  2. Upload the index.html file.
  3. Go to Settings โ†’ Pages.
  4. Choose to publish from the main branch.
  5. Save and open the generated link.
  6. Test the game and share the final URL.
Check before handing it in: the link must open on another computer or in a private window. If it only works on your own computer, it has not been published correctly yet.
๐Ÿ’ก Copy, test and improve