One single file
Your game must be in one single file called index.html.
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.
Your game must be in one single file called index.html.
The educational content must be part of the game mechanics, not just decoration.
At the end, you will have a public link to share your game.
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.
Choose a simple game mechanic and turn it into a way to practise content.
Copy one of these texts, fill in the gaps and paste it into the AI.
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.
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.
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.
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.
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.
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 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 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 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.
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.
When it works on your computer, you can upload it and share it with a link.