development experience, complexity and MidJourney for UI
It was time for my daughter to learn the multiplication tables, and I couldn’t find any normal training equipment. As a result, a couple of hours of work on the software part and a day of work on the UI/UX resulted in a full-fledged project for Yandex.Games.
Introduction
My idea was simple – to create a clear and convenient simulator for learning the multiplication table. But, as often happens, the implementation turned out to be much more difficult than expected. The most difficult and interesting thing was creating a scalable interface that would look correct on all devices and creating a UI.
In this article, I will share my experience in developing the simulator, tell you what technologies I used and what problems I encountered on the way to the final product.
Where did it all start?
The main trigger for the development was my daughter, who had just started learning the multiplication tables. I decided to find a suitable online trainer, but did not find anything free that was not a test with answers, you could choose to train multiplication by a specific number with time limits and duration of the training.
This is how the idea of creating my own simulator was born. The first version seemed simple: an HTML + CSS + JavaScript application, basic logic for checking responses and counting results. I implemented the functionality quickly, using Chat GPT in literally 3-4 hours. And I decided to post it on Yandex.Games, because… I didn't find anything similar there. When it came to publishing screenshots, I felt a little ashamed to post what happened. I decided to quickly sketch out the UI and layout it. Hehehe 🙂
Rendering UI with MidJourney
I wanted to create a bright, intuitive and childish UI that would motivate children to learn the multiplication tables. I decided to ask for help MidJourney, to set the basic style and then complete all the elements.
MidJourney came up with some interesting concepts that helped guide my direction: bright colors, messy styling, and large elements that fit small screens. Here are examples of requests:
“Kid‑friendly UI for educational app, handpaint”
“Colorful multiplication table for children app interface”
“draw an icon for multiplication table app”
From these requests I was able to take inspiration and start drawing the UI. It took a little longer than expected, but after about 3-4 hours the main windows were ready.
Difficulties with adaptability
One of the biggest challenges I faced was creating scalable interface. I wanted the application to look correct on different devices: from small smartphones to large monitors. Because Yandex does not accept games that do not scale correctly. It was important to maintain the proportions of all interface elements when resizing the window.
I decided to use CSS calc() for positioning and scaling elements. This feature allowed me to set dynamic sizing and padding based on the size of the browser window. Here's an example of what it looks like:
.question { font-size: calc(var(--font-size-factor) * 0.2); color: #31c4bd; -webkit-text-stroke: 1px #192229; left: 3%; top: 5%; position: absolute; padding: 20px; }
The main difficulty was that the elements had to be scaled not only relative to the width of the screen, but also relative to the height. This has proven to be especially true for tablets and phones, where aspect ratios can vary greatly.
The result was a scaling script like this:
// Скрипт для масштабирования
function updateScale() { const container = document.querySelector('.container'); const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight; // Поддерживаем пропорции исходного изображения
const containerWidth = 715; // Исходная ширина
const containerHeight = 896; // Исходная высота
// Масштабируем контейнер пропорционально размеру окна
const scaleWidth = windowWidth / containerWidth;
const scaleHeight = windowHeight / containerHeight;
const scale = Math.min(scaleWidth, scaleHeight); // Масштабирование по минимальному измерению
document.documentElement.style.setProperty('--scale', scale); container.style.width = `${containerWidth * scale}px`;
container.style.height = `${containerHeight * scale}px`; // Обновляем ширину шрифтов и элементов на основе ширины контейнера
const fontSizeFactor = containerWidth * scale;
document.documentElement.style.setProperty('--font-size-factor', fontSizeFactor + 'px');
}window.addEventListener('resize', updateScale);
window.addEventListener('load', updateScale);
We spent a lot of time experimenting with the behavior of the interface when changing the screen orientation.
Application Features
As a result, I ended up with an application that includes the following key features:
Interactive buttons for selecting multiplication tables.
Ability to configure training time and response time.
Adaptive interface that displays correctly on all devices.
Sound effects and animations that help create an interactive atmosphere.
Conclusion
Developing this project was a very fun process. With Chat GPT and Midjourey you can quickly do some pretty decent things. Although I spent a lot more time than I expected. I just received a response from Yandex Games; moderation closed my application. I can write in the next article what didn’t suit them and how I corrected it.
