Nền tảng lý thuyết của dự án được tập hợp trong khái niệm chính ["uchitsya-legko.rf — học đọc như giải mã mã chữ viết"](/concepts/uchitsya-legko-rf-obuchenie-chteniyu-kak-deshifrovke-pismennogo-koda). Đây là điểm trung tâm của dự án: mô tả mô hình chung, trạng thái hiện tại và liên kết các khái niệm cụ thể.

Hiện tại, dự án đang ở giai đoạn **Ý tưởng (Idea)**. Lý thuyết cơ bản về việc đọc như một quá trình khôi phục thông tin từ mã chữ viết đã được hình thành. Các thực thể thông tin làm nền tảng cho việc học đã được ghi nhận: đối tượng và tình huống, khái niệm, hình ảnh, từ nói, âm thanh, từ viết, chữ cái và các phần cấu trúc lớn hơn của từ.

Các thành phần chính của lý thuyết:

- [Đọc là nhận diện từ và khôi phục ý nghĩa, chứ không phải là phát âm tuần tự các chữ cái](/concepts/chtenie-eto-raspoznavanie-slova-i-vosstanovlenie-smysla).
- [Từ viết liên kết nhiều biểu hiện của cùng một nội dung](/concepts/pismennoe-slovo-svyazyvaet-neskolko-predstavleniy).
- [Học đọc phải đi từ điểm tựa đã biết đến mã chưa biết](/concepts/obuchenie-chteniyu-ot-izvestnyh-opor-k-neizvestnomu-kodu).
- [Từ vựng nói là cơ sở nhận diện khi học đọc](/concepts/ustnyy-slovar-baza-raspoznavaniya-pri-obuchenii-chteniyu).
- [Từ dài phải được làm rõ thông qua các phần cấu trúc quen thuộc](/concepts/dlinnoe-slovo-cherez-znakomye-strukturnye-chasti).
- [Các gợi ý phải biến mất dần khi các mối liên hệ được làm chủ](/concepts/podskazki-dolzhny-postepenno-ischezat).

Hướng đi thực tế là một hệ thống tương tác, trong đó trẻ bắt đầu với các đối tượng và từ ngữ dễ nhận biết, xác nhận âm thanh của chúng, làm quen với cách viết, phát hiện các yếu tố lặp lại của mã chữ viết và sau đó áp dụng các sự tương ứng tìm được để giải mã các từ mới.

Nguyên tắc quan trọng: hệ thống không được đòi hỏi trẻ phải tiếp thu đồng thời nhiều cấp độ chưa biết. Nếu trẻ chưa biết khái niệm, từ nói, âm thanh và chữ cái của nó, thì từ đó không phù hợp để làm tài liệu bắt đầu. Bài tập tiếp theo phải dựa trên kiến thức đã được xác nhận của riêng đứa trẻ đó.

Giai đoạn tiếp theo của dự án là biến lý thuyết thành cơ chế tương tác tối thiểu và kiểm tra tiêu chí chính: liệu trẻ có khả năng chuyển các mối liên hệ đã thành thạo sang các từ chưa từng gặp trước đó, chứ không chỉ ghi nhớ các ví dụ được hiển thị.

Một dự án học đọc tương tác dưới dạng giải mã dần dần mã chữ viết thông qua các ý nghĩa, hình ảnh và từ ngữ phát âm mà trẻ đã quen thuộc.

uchitsya-legko.rf

## Nhiệm vụ

Tách logic thực thi chung của `VoiceScenario` thành một module runtime duy nhất và sử dụng nó đồng thời trong cả bộ tổng hợp (synthesizer) và bộ trực quan hóa (visualizer).

Hiện tại, logic của `prepareScenario`, `evaluateBezier`, `updateAutomations`, `executeCommand` và việc tính toán `VoiceControlState` hiện tại đang bị trùng lặp. Điều này tạo ra rủi ro lệch pha: bộ trực quan hóa có thể hiển thị trạng thái không giống với trạng thái mà DSP thực sự đang sử dụng.

## Những việc cần làm

- Tạo một module runtime chung cho `VoiceScenario` (ví dụ: `VoiceSynthesizer/src/runtime.ts`).
- Tách phần chuẩn bị bố cục kịch bản và timeline chung vào đó.
- Tách phần diễn giải `set` và `animate`.
- Tách phần tính toán cubic bezier.
- Tách phần cập nhật automation đang hoạt động và ngữ nghĩa giữ lại giá trị `to` sau khi kết thúc `duration`.
- Đảm bảo khả năng lấy `VoiceControlState` thực tế theo thời gian hoặc lặp trạng thái dọc theo thang thời gian.
- Chuyển `synthesizeScenario` sang sử dụng runtime này.
- Chuyển `ScenarioVisualizer` sang dùng chung runtime đó để biểu đồ là sự phản ánh trạng thái thực tế của bộ tổng hợp, chứ không phải là một cách diễn giải kịch bản riêng biệt.
- Giữ nguyên ngữ nghĩa kết hợp mảng kịch bản hiện tại: `initial` chỉ có ở kịch bản đầu tiên, các kịch bản tiếp theo tiếp tục trạng thái hiện tại mà không reset.

## Tiêu chí hoàn thành

Đối với cùng một `VoiceScenario`, bộ tổng hợp và bộ trực quan hóa sử dụng chung một triển khai state machine. Sau khi thay đổi ngữ nghĩa runtime, không thể xảy ra tình huống DSP thực thi kịch bản theo một cách còn bộ trực quan hóa hiển thị theo một cách khác.

Loại bỏ việc trùng lặp logic thực thi VoiceScenario giữa synthesizeScenario và ScenarioVisualizer.

Tách runtime VoiceScenario thành một module chung cho bộ tổng hợp và bộ trực quan hóa

## Bối cảnh

Cần phải tách biệt rõ ràng giữa **tương tác thực tế cốt lõi với sản phẩm** và **lớp giải thích/tiếp thị**.

Người dùng, đặc biệt là trẻ em, phải có khả năng truy cập trang web và sử dụng các cơ chế ngay lập tức mà không cần đọc sứ mệnh, lý thuyết, mô tả phương pháp luận, văn bản tiếp thị hoặc giải thích nguyên lý.

Đồng thời, toàn bộ lý thuyết dự án, lý luận, nghiên cứu, nguyên lý, giải thích cách tiếp cận và nội dung SEO phải được cung cấp riêng cho phụ huynh, giáo viên, học viên trưởng thành và những người dùng quan tâm khác.

Vì vậy, một blog là cần thiết.

## Nguyên lý kỹ thuật cốt lõi

**Blog không được là một thực thể kỹ thuật riêng biệt.**

Nó phải được xây dựng dựa trên các concept đã tồn tại sẵn.

Cơ chế phân biệt chính là trường `type` trên concept.

Cần phải lên kế hoạch và triển khai trước **thư mục các loại concept**, trong đó các loại blog sẽ có một namespace thống nhất:

```text
blog:default
blog:article
```

và các loại khác bắt đầu bằng:

```text
blog:
```

Nói cách khác, blog không phải là một mô hình dữ liệu riêng biệt, mà là một cách phân loại, truy vấn và hiển thị các concept.

## Những việc cần phải thiết kế và xử lý

- định nghĩa hệ thống `type` chung cho các concept;
- định nghĩa namespace `blog:*`;
- quyết định những loại blog cụ thể nào là cần thiết;
- chốt mục đích của từng loại;
- xác định loại nào là cơ bản/mặc định;
- xác định các trường concept nào được sử dụng để hiển thị blog;
- định nghĩa quy tắc URL/định tuyến (routing);
- định nghĩa quy tắc danh sách bài viết;
- định nghĩa quy tắc hiển thị từng bài viết riêng lẻ;
- xác định cách các concept blog liên kết với các concept kiến thức thông thường;
- xác định xem các tài liệu giống nhau có thể đồng thời tham gia vào cấu trúc kiến thức và blog hay không;
- định nghĩa bộ lọc theo `type`;
- triển khai thư mục loại sao cho tránh việc rải rác các giá trị chuỗi khắp mã nguồn;
- dự trù khả năng mở rộng loại trong tương lai mà không làm thay đổi mô hình dữ liệu;
- định nghĩa các trường SEO và quy tắc cho tài liệu blog;
- xác định cách cấu trúc blog có thể lập chỉ mục được hình thành;
- định nghĩa điều hướng theo chủ đề mà không biến blog thành lối vào chính của sản phẩm.

## Các loại tiềm năng

Ví dụ khởi đầu:

```text
blog:default
blog:article
```

Các loại bổ sung cần được xác định riêng trong phạm vi nhiệm vụ. Các hướng đi có thể đánh giá:

- tổng quan;
- nghiên cứu;
- tài liệu phương pháp luận;
- ghi chú;
- nghiên cứu tình huống (case study);
- giải thích nguyên lý;
- bài viết SEO.

Đồng thời, danh sách cụ thể không được cố định chỉ dựa trên các danh mục CMS quen thuộc — nó phải phản ánh cách sử dụng nội dung thực tế trong dự án.

## Nguyên lý kiến trúc

Sản phẩm thực tế và blog phải tồn tại độc lập với nhau ở cấp độ lối vào của người dùng.

Logic cốt lõi:

> **sản phẩm trả lời cho câu hỏi "tôi có thể làm gì ngay bây giờ?"**
>
> **blog trả lời cho câu hỏi "tại sao nó lại được thiết kế như thế này?"**

Người dùng có thể sử dụng trang web trong thời gian dài mà không cần ghé thăm blog.

Blog cần thiết cho việc:

- khẳng định sứ mệnh và nguyên lý;
- giải thích phương pháp luận;
- xuất bản nghiên cứu và kết luận;
- cung cấp lý lẽ cho phụ huynh và giáo viên;
- SEO;
- tích lũy kiến thức cộng đồng xung quanh dự án;
- xây dựng niềm tin;
- giải thích các quyết định sản phẩm cho những ai thực sự quan tâm.

## Giới hạn

Không xây dựng blog như một phễu tiếp thị trung tâm đứng trước sản phẩm.

Không giới thiệu một thực thể mới chỉ vì blog nếu mô hình concept hiện tại đã đáp ứng được yêu cầu này.

Trước tiên cần thiết kế **thư mục loại và quy tắc hiển thị**, sau đó mới đến giao diện blog.

Hiện thực hóa blog như một cách thể hiện riêng biệt của các concept hiện có thông qua hệ thống type, mà không cần tạo ra một thực thể kỹ thuật mới.

Triển khai blog

# Nhiệm vụ

Triển khai trên trang "Uchitsya legko" một cơ chế chung cho tất cả các thực thể trên trang web, cho phép trẻ tự mình nhận được hai loại thông tin khác nhau:

- **🔊 Loa** — tìm hiểu xem thực thể phát âm / đọc như thế nào;
- **? Câu hỏi** — tìm hiểu xem đó là gì / nó có nghĩa là gì.

Các hành động này phải được tách biệt vì **biết cách phát âm một từ và hiểu nghĩa của nó không phải là một**.

## Tại sao điều này lại cần thiết

Cơ chế hiện tại hoạt động tốt khi trẻ đã biết đối tượng trong hình ảnh và biết tên gọi của nó. Khi đó, trang web liên kết ý nghĩa và âm thanh đã biết với hình thức viết mới: từ, âm tiết và chữ cái.

Nhưng không thể mặc định trước rằng trẻ biết mọi thực thể trên trang web. Trong cùng một bộ, một số hình ảnh có thể quen thuộc và một số thì không. Các trạng thái nhận biết khác nhau cũng có thể xảy ra:

- trẻ biết đối tượng và tên gọi của nó;
- biết đối tượng, nhưng không biết tên gọi của nó;
- đã nghe từ đó, nhưng không biết ý nghĩa của nó;
- không biết cả đối tượng lẫn tên gọi của nó.

Do đó, giao diện không nên cố gắng xác định trước trình độ của trẻ. Thay vào đó, nó nên cung cấp cho trẻ các công cụ chung đơn giản mà trẻ sẽ nhanh chóng học cách tự sử dụng.

## Cơ chế cơ bản

### Nút "Loa"

Trên một thẻ thông thường, nút `🔊` phát âm thực thể hiện tại hoặc tên của nó.

Ví dụ:

- trẻ nhìn thấy hình ảnh con heo vòi;
- nhấp vào từ `HEO VÒI` hoặc nút `🔊`;
- nghe thấy: "heo vòi".

Điều này cho phép thiết lập mối liên hệ giữa hình ảnh, âm thanh và hình thức viết ngay cả khi tên gọi trước đó chưa được biết đến.

### Nút "?"

Nút `?` mở ra trạng thái mở rộng của **chính thẻ đó**.

Nó giữ nguyên:

- hình ảnh;
- từ;
- các yếu tố hiện có khác của thẻ;

và bổ sung thêm **một mô tả văn bản ngắn về thực thể**.

Ví dụ:

> Heo vòi là một loài động vật lớn có chiếc vòi ngắn. Chúng sống trong rừng và bơi rất giỏi.

Bản thân mô tả **không được tự động phát** khi mở.

Phải có một nút `🔊` riêng bên cạnh phần mô tả. Nút `?` không còn xuất hiện ở trạng thái này, vì trẻ đã mở phần giải thích thực thể.

## Đọc mô tả

Khi nhấn vào `🔊` bên cạnh phần mô tả, toàn bộ văn bản sẽ được đọc lên.

Trong khi phát, sẽ có **sự chuyển đổi hình nền trực quan / làm nổi bật văn bản đồng bộ theo tiến trình âm thanh**.

Mục đích của hiệu ứng này là cho trẻ thấy sự tương ứng trực tiếp giữa lời nói phát ra và văn bản được viết.

Ngay cả khi trẻ chưa biết câu, từ hoặc hệ thống chữ viết là gì, trẻ bắt đầu quan sát thấy quy luật:

**âm thanh không tự nhiên xuất hiện — nó tương ứng với những gì được viết trên màn hình.**

## Các từ có thể nhấp bên trong phần mô tả

Mỗi từ riêng lẻ trong phần mô tả văn bản phải có thể nhấp được.

Khi nhấp vào, từ đó sẽ được phát âm riêng.

Ví dụ:

Văn bản:

> Heo vòi sống trong rừng.

Trong quá trình phát toàn bộ, hiệu ứng nổi bật sẽ di chuyển lần lượt qua các từ:

`Heo vòi → sống → trong → rừng`

Sau đó, trẻ có thể nhấp riêng vào:

- `sống` → nghe thấy "sống";
- `rừng` → nghe thấy "rừng".

Bằng cách này, trẻ có thể tự nhận ra rằng:

- toàn bộ văn bản đều có âm thanh;
- âm thanh được liên kết với những gì đã viết;
- chữ viết được chia thành các phần riêng biệt;
- mỗi phần tương ứng với âm thanh của riêng nó;
- các từ riêng lẻ kết hợp thành một câu âm thanh chung.

Điều này tạo ra một quá trình chuyển đổi tự nhiên từ cơ chế hiện tại `từ → âm tiết → chữ cái` sang cấp độ cao hơn `văn bản / câu → từ`, mà không cần phải giải thích trước cho trẻ về lý thuyết câu hay chữ viết.

## Nguyên tắc giao diện chung

Cơ chế này phải mang tính phổ quát đối với các thực thể trên trang web:

- `🔊` — **âm thanh / cách phát âm như thế nào?**
- `?` — **đây là cái gì / điều này có ý nghĩa gì?**

Trẻ nên nhanh chóng nắm vững mục đích của hai yếu tố này và tự lựa chọn cấp độ thông tin nào mà trẻ cần trong một trường hợp cụ thể.

Điều quan trọng là không trộn lẫn các chức năng này: việc mở phần giải thích không được tự động kích hoạt âm thanh dài, và việc biết cách phát âm không được coi là tương đương với việc hiểu nghĩa.

## Mối liên hệ với nhiệm vụ chính

Nhiệm vụ này là nhiệm vụ con của [Nhiệm vụ "Phát triển cấp độ học chữ thứ hai: đọc câu và dấu câu"](/tasks/cmu4sta4y0ldaqw0qjcf497ne).

Cơ chế này rất quan trọng như một phần mở rộng độc lập của cấp độ hiện tại và là cơ sở để tiếp tục làm chủ các cấu trúc viết phức tạp hơn.

Thêm các nút chung "Loa" và "?" để tự học ý nghĩa và cách phát âm của các thực thể, bao gồm cả việc đọc lời giải thích bằng văn bản kèm hiệu ứng sáng đồng bộ.

Nhiệm vụ

Triển khai cơ chế chung "Cái này là gì?" và phát âm thực thể

Triển khai blog

Tách runtime VoiceScenario thành một module chung cho bộ tổng hợp và bộ trực quan hóa