Task

Implement a universal mechanism for all site entities on "Uchitsya legko" that allows a child to independently receive two different types of information:

• 🔊 Speaker — find out how the entity sounds / is pronounced;
• ? Question — find out what it is / what it means.

These actions must be separated because knowing how a word sounds and understanding its meaning are not the same thing.

Why This is Needed

The current mechanics work well when the child already knows the object in the picture and knows what it is called. Then the site connects the already known meaning and sound with the new written form: the word, syllables, and letters.

However, it cannot be assumed in advance that the child knows every entity on the site. In the same set, some pictures may be familiar and some may not. Different states of knowledge are also possible:

• the child knows the object and its name;
• knows the object, but does not know what it is called;
• has heard the word, but does not know its meaning;
• knows neither the object nor its name.

Therefore, the interface should not try to pre-determine the child's level. Instead, it should give them simple, universal tools that they will quickly learn to use on their own.

Basic Mechanics

"Speaker" Button

On a regular card, the 🔊 button plays the audio for the current entity or its name.

Example:

• the child sees a picture of a tapir;
• clicks on the word TAPIR or the 🔊 button;
• hears: "tapir".

This makes it possible to establish a connection between the image, sound, and written form even if the name was previously unknown.

"?" Button

The ? button opens the expanded state of the same card.

It retains:

• the picture;
• the word;
• other existing card elements;

and additionally displays a short text description of the entity.

Example:

A tapir is a large animal with a short trunk. It lives in forests and swims well.

The description itself should not play automatically when opened.

There should be a separate 🔊 button next to the description. The ? button is no longer present in this state, since the child has already opened the entity explanation.

Description Voiceover

When clicking 🔊 next to the description, the entire text is read aloud.

During playback, there should be a synchronous background visual transition / text highlighting as the sound progresses.

The purpose of this effect is to show the child the direct correspondence between spoken speech and written text.

Even if the child does not yet know what a sentence, word, or writing as a system is, they begin to observe a pattern:

sound does not appear by itself — it corresponds to what is written on the screen.

Clickable Words Within the Description

Each individual word in the text description must be clickable.

When clicked, the word is pronounced separately.

Example:

Text:

A tapir lives in the forest.

During full playback, the highlight consistently moves across the words:

Tapir → lives → in → the → forest

After that, the child can separately click:

• lives → hear "lives";
• forest → hear "forest".

In this way, the child can independently notice that:

• all text has a sound;
• the sound is connected to what is written;
• the written form is divided into separate parts;
• each part corresponds to its own sound;
• individual words combine into a common sounding phrase.

This creates a natural transition from the current mechanics of word → syllables → letters to a higher level of text / sentence → words, without the need to pre-explain the theory of sentences or writing to the child.

General Interface Principle

The mechanics should be universal for the site's entities:

• 🔊 — how does this sound / how is it pronounced?
• ? — what is this / what does this mean?

The child should quickly master the purpose of these two elements and independently choose which level of information they need in a particular case.

It is important not to mix these functions: opening an explanation should not automatically trigger long audio, and knowing the pronunciation should not be considered equivalent to understanding the meaning.

Connection to the Main Task

This task is a subtask of Task "Develop the second level of literacy acquisition: reading sentences and punctuation".

The mechanics are important as an independent extension of the current level and as a basis for further mastering more complex writing structures.