You can also listen to the article in audio version.
Looking for a holiday project to tackle with the kids? Which takes just as much time as you want to give it? Try the hot new product – it’s open to the public barely three weeks – and program whatever you want. It’s a lot easier than you might think. But of course mistakes happen, as with everything related to generative artificial intelligence.
As part of the series We play with AI, we also showed the basics of programming for children last year. Even back then, of course, it was possible to harness ChatGPT to programming as well. But it was completely impractical for anyone who didn’t know at least the basics of computer code and how to run it. Getting into chatbot programming back then was quite frustrating for beginners.
Now the situation is quite different. Chatbot Claude from Anthropic now has not only a faster version, but also the Artifacts feature, which allows you to smoothly write instructions and monitor the results on one screen. On the left, you talk to the chatbot and add instructions. On the right, your program is created (here the game Snake) and you can test it right away.
See how it works in practice:
Programming a simple game using the Claude 3.5 Sonnet tool and the Artifacts feature enabled. Video: Pavel Kasík, News List
Of course, you could already copy the generated code from the chatbot to an external editor, save it and run it. Now it happens by itself and surprisingly quickly. It sounds like a small thing, but it can make programming accessible to people who have been afraid of it so far.
Moreover, this experimental feature is available for free for anyone, no need to pay for the premium version (the free version has a limited number of entries). So let’s take a look at how to use Cloud to program something that both parents and children will enjoy. Maybe some “retro” computer game.
How to begin? However…
While real programming is a rather strict discipline, working with a chatbot is, on the contrary, a very informal affair. Therefore, instead of an exhaustive guide, here you will find a few tips to get you started.
The first rule is that there are no rules. If you or the children want to try something, then try it. All the code runs directly in the browser, so you shouldn’t do anything you regret. At most, your page will get stuck and you will refresh it. So our first step can look like this: Program the snake game in HTML, I will control it with the ASDW keys on the keyboard.
Photo: Pavel Kasík, Seznam Zpravy
You don’t need to write long instructions, a very simple command will be enough to get started.
If you have the Artifacts feature turned on (by clicking on the icon at the bottom left, Feature Preview, Artifacts – On), the chatbot will immediately start generating a bunch of code for you. When it’s done, it switches to the preview view. And you can immediately see what you have created so far, or what the chatbot has made for you.
Photo: Pavel Kasík, Seznam Zpravy
On the left, a conversation with a chatbot, on the right, a preview of the created HTML page, including a functional script. You can also switch to source code view or download the result to your computer as a .html file.
Your result may look completely different than what the chatbot produced for me. And that’s even if you typed the same instruction out loud. This co-creation is more like alchemy. So don’t hesitate to say anything you can think of.
I gradually improved the snake game as follows:
- Give the game a black background.
- Add buttons under the playing area so that it can be played on mobile, make the game responsive.
- Add sounds (using the oscillator function).
- Add a thin gray border to each square.
- Add high score saving.
In other words, you interact with the chatbot as if it were your backyard programmer. In some respects the programmer is above average capable, in others he makes primitive mistakes. But what cannot be denied: he is incredibly patient. That’s why you can give him your funny ideas and he always takes them seriously. It is an ideal combination for creative projects.
You learn from mistakes. AI not so much
To give this experimentation some pedagogical value, ask the chatbot to always explain to you what it did and why. You may also want detailed comments directly in the source code.
If you prefer visual diagrams, you can have them generated directly for you: I would also like to learn programming, but I don’t understand javascript yet. Show me a clear diagram of the entire code so I can understand how it works. Somewhat nicely graphically so I can understand it.
Photo: Pavel Kasík, Seznam Zpravy
Part of a diagram showing how the code works.
Such schemes will help children to better understand what they would not read from the source code. That the program makes decisions on the basis of clearly given commands and that we must think through all eventualities in advance and describe what should happen in such a case.
Common problems and their solutions
Has it happened to you that a previously working program suddenly fell apart and stopped working?
- You can go back to the previous version using the tab below.
- You can go back in the conversation with the chatbot and modify your previous instruction to avoid this error.
- You can look at the source code. If you find something like “this part of the code remains the same”, the chatbot wanted to save work and it didn’t work. Give it an instruction: “You must always generate the whole code, you can’t skip any earlier part.”
Are you getting an error under the Artifacts preview?
- You can copy the error to the chatbot (left) and maybe it can deal with it.
- You can also download the HTML file and try if it’s just because it runs in a small view.
Was the code too long to fit in the limit?
- You can ask for more economical writing: “Write the script sparingly and without long comments. Otherwise, you won’t fit into the answer limit.”
I don’t know what’s wrong at all, but it can’t be fixed…
- It might be best to start over, a whole new conversation.
I don’t want to use Claude.
- Most of what we have shown here also works in competing chatbots, namely ChatGPT or Gemini. You’ll just need to copy the code that the chatbot creates for you into some editor, and maybe also paste pieces of code (HTML, CSS styles and JS scripts) together. It’s less comfortable, but it works.
Show all
I’d hate to make it seem like Claude can handle everything. Far from it. It’s still just a language model that puts letters and words together. The results are often actionable. But other times it’s complete nonsense, and the conversation goes around in circles. But this is also part of the joint learning of what artificial intelligence can now handle and what it can’t yet.
Imagination has no limits (anymore).
The Snake game is pretty primitive. There’s no reason to stay down like that. Let’s make a rocket simulator. This time we will pay more attention to the description and leave nothing to chance. We will try if it will lead to better results the first time, or if it will be too big a bite for Claude.
I want to create a game that uses html+css+js and allows simulating the landing of a simple rocket. The game will be responsive, the black playing surface has a 4:3 format and is displayed to the width of the window, a maximum of 800 px. Below the playing surface are three buttons: left, up, right. In addition, it is possible to control the game with the cursor keys. Red rocket, orange nozzle flame, modern and simple pixel-art design. Randomly either to the left or to the right at the bottom of the playing area is a landing area, on a green platform. Before starting the game, show a short explanation of the game above the playing surface, a slider and the start button, after pressing it, the explanation disappears and the game starts. The slider allows you to choose the difficulty (degree of gravity in percent), the default is 50%. After a successful or unsuccessful landing, a message about success or failure. The user should constantly see the current horizontal and vertical speed in km/h on the left. The limit for a safe landing is five km/h vertical and two km/h horizontal. The left and right keys rotate the rocket, the up key is the main thruster (in the direction of the rocket). The result should be playable on both mobile and computer. Contact with the upper edge of the playing surface results in failure, contact with the left edge causes the rocket to appear on the right, and vice versa, contact with the bottom outside the landing platform also results in failure. The explosion is animated using a rapidly growing disappearing orange circle.
So, did he make it? I would say he met all my requirements first time. I imagined some things differently, but the result is not only functional, but even playable.
Photo: Pavel Kasík, Seznam Zpravy
A simple game in a few minutes.
The resulting html page you can view here. I recommend setting the Difficulty to about 20%, otherwise the game is practically unplayable. But I didn’t interfere with the code in any way. Of course, I can think of a number of improvements, and I’m sure you too. Go for it. For inspiration you can, for example:
- Tweak limits and values to make the game playable.
- Improve the tutorial at the beginning of the game.
- Adjust the buttons to make the game play better.
- Add sounds for the rocket engine and for the explosion.
- Add some obstacles.
- Invent a level system.
- Figure out how to play the game on the computer in two people.
- Store high scores (note, Artifacts do not have access to localStorage, so this will report an error).
- Collect bonus points along the way.
- Make it all three-dimensional…
Starting this summer, everyone became a programmer, one would like to say. But that would be quite misleading. Programming as such is a very broad discipline, and only some relatively small parts of programming can be completely left to the whims of artificial intelligence today.
In my opinion, it is definitely worth learning to program even today. This is exactly what this tool is great for. You can try with your children – and without them – how to formulate your ideas, build on them, look for mistakes and gradually improve the project. And most importantly, how to create something that other people will enjoy and it will be usable for them.
These are the skills that never go out of style. Not even now, when even a small child can boldly start programming.
How to explain artificial intelligence to children?
What is artificial intelligence? It sounds complicated, but you will see that it can be useful and even fun. Artificial intelligence works on a computer, but it behaves differently than we are used to with computers…
What is artificial intelligence? Explanation for children. Video: Pavel Kasík, News List
