` នឹងមាន?
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*ចម្លើយ៖ ក្រហម (element selector បង្ហាញទៅ h1 បន្ទាន់)*
+
+## ការជំនាញ CSS Selectors
+
+CSS selectors ជាវិធីសាស្រ្តដើម្បីគោលដៅធាតុជាក់លាក់សម្រាប់រចនាបទ។ វាដូចជាការបញ្ជាទិសត្រឹមត្រូវ - មិនមែននិយាយថា "ផ្ទះ" ទេ តែថា "ផ្ទះពណ៌ខៀវដែលមានទំពារក្រហមនៅផ្លូវ Maple"។
+
+CSS ផ្តល់ជម្រើសផ្សេងៗបំផុតសម្រាប់ការជាក់លាក់ ហើយការជ្រើសរើស selector ត្រឹមត្រូវដូចជាការជ្រើសឧបករណ៍អាចមួយសម្រាប់អង្គភាព។ ពេលខ្លះអ្នកត្រូវរចនាបទទៅលើទ្វារទាំងអស់ក្នុងតំបន់ ហើយពេលមួយគ្រាន់តែទ្វារមួយជាក់លាក់។
+
+### Element Selectors (ស្លាក)
+
+Element selectors គោលដៅទៅធាតុ HTML ដោយឈ្មោះស្លាករបស់វា។ វាជាជម្រើសល្អសម្រាប់កំណត់រចនាបទមូលដ្ឋានដែលប្រើប្រាស់ទូទាំងទំព័រ៖
+
+```css
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ color: #3a241d;
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+```
+
+**យល់ដឹងអំពីរចនាបទទាំងនេះ៖**
+- **កំណត់** typography សរុបនៅទំព័រទាំងមូលដោយ selector `body`
+- **ដកចេញ** margins និង padding ដើមរបស់កម្មវិធីរុករកសម្រាប់ការត្រួតផ្នែកត្រឹមត្រូវ
+- **រចនា** អក្សរពហុចំណងជើងដោយ color, alignment និងspacing
+- **ប្រើ** `rem` ជាឯកតាដើម្បីមើលថាហួសកំណត់ដល់ទំហំអក្សរជាប្រកបដោយអាចចូលដំណើរការ
+
+បើទោះ Element selectors ចំណាស់ល្អសម្រាប់រចនាបទទូទៅ អ្នកត្រូវការជ្រើសរើស selectors ផ្សេងៗសម្រាប់រចនារឿងផ្សេងៗដូចជារុក្ខជាតិនៅក្នុង terrarium របស់អ្នក។
+
+### ID Selectors សម្រាប់ធាតុឯកទេស
+
+ID selectors ប្រើសញ្ញា `#` ហើយគោលដៅទៅធាតុដែលមាន attributes `id` ជាក់លាក់។ ពីព្រោះ ID ត្រូវតែមានតែមួយក្នុងទំព័រ វាជាជម្រើសល្អសម្រាប់រចនាបទធាតុឯកខ្លួនដូចជា containers រុក្ខជាតិខាងឆ្វេង និងខាងស្តាំរបស់ terrarium ។
+
+ចូរបង្កើតរចនាបទសម្រាប់ containers ភាគខាងដៃនៃ terrarium ដែលរុក្ខជាតិរស់នៅ៖
+
+```css
+#left-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ left: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#right-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ right: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+```
+
+**អ្វីដែលកូដនេះសម្រេច៖**
+- **ដាក់ទីតាំង** containers នៅគ្រាប់ឆ្វេងចុងក្រោយ និងស្តាំអេក្រង់ដោយ `absolute` positioning
+- **ប្រើ** `vh` ឯកតាបរិមាណកម្ពស់ដើម្បីឆ្លើយតបទៅនឹងទំហំអេក្រង់
+- **អនុវត្ត** `box-sizing: border-box` ដើម្បីបញ្ចូល padding ទៅក្នុងទទឹងសរុប
+- **ដកចេញ** ឯកតា `px` មិនចាំបាច់ពីតម្លៃសូន្យសម្រាប់កូដស្អាត
+- **កំណត់**ពណ៌ផ្ទៃខាងក្រោយស្រាលដែលងាយស្រួលមើលជាងពណ៌ប្រផេះខាងចចារ
+
+✅ **កិច្ចការបញ្ញាតិចំពោះគុណភាពកូដ**: ចូរបញ្ជាក់ថា CSS នេះបន្សល់នៅលើក្បាលបញ្ជារបស់ DRY (កុំធ្វើម្តងទៀត)។ តើអ្នកអាចធ្វើការកែប្រែវា ដោយប្រើទាំង ID និង class ទេ?
+
+**វិធីសាស្រ្តបានធ្វើឱ្យប្រសើរ:**
+```html
+
+
+```
+
+```css
+.container {
+ background-color: #f5f5f5;
+ width: 15%;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#left-container {
+ left: 0;
+}
+
+#right-container {
+ right: 0;
+}
+```
+
+### Class Selectors សម្រាប់រចនាបទអាចប្រើឡើងវិញ
+
+Class selectors ប្រើសញ្ញា `.` ហើយល្អសម្រាប់ការអនុវត្តរចនាបទដូចគ្នាចំពោះធាតុជាច្រើន។ ខុសពី IDs, classes អាចប្រើឡើងវិញបាននៅទូទាំង HTML របស់អ្នក ដែលធ្វើឲ្យវាល្អសម្រាប់មូឌែលរចនាបទថេរ។
+
+នៅក្នុង terrarium របស់យើង រុក្ខជាតិមួយៗត្រូវការរចនាបទដូចគ្នា ប៉ុន្តែក៏ត្រូវការ ទីតាំងផ្សេងៗផ្ទាល់ខ្លួន។ យើងនឹងប្រើការរួមបញ្ចូលគ្នារវាង classes សម្រាប់រចនាបទសំរបសំរួល និង IDs សម្រាប់ទីតាំងតែមួយៗ។
+
+**នេះគឺជារចនាសម្ព័ន្ធ HTML សម្រាប់រុក្ខជាតិមួយៗ:**
+```html
+
+
+
+```
+
+**ធាតុសំខាន់ៗបានពណ៌នា៖**
+- **ប្រើ** `class="plant-holder"` សម្រាប់រចនាគ្រឿងទ្រង់ទ្រាយដូចគ្នាទៅលើរុក្ខជាតិទាំងអស់
+- **អនុវត្ត** `class="plant"` សម្រាប់រចនារូបភាព និងស្វ័យប្រវត្តិការព្រិត្តិការណ៍
+- **រួមបញ្ចូល** `id="plant1"` ឯកជនសម្រាប់ការដាក់ទីតាំង និងអន្តរកម្មជាមួយ JavaScript
+- **ផ្តល់** អត្ថបទ alt ដែលពិពណ៌នាសម្រាប់ជំនួយអ្នកប្រើអានអេក្រង់
+
+ឥឡូវបន្ថែមរចនាបទទាំងនេះទៅក្នុងឯកសារ `style.css` របស់អ្នក៖
+
+```css
+.plant-holder {
+ position: relative;
+ height: 13%;
+ left: -0.6rem;
+}
+
+.plant {
+ position: absolute;
+ max-width: 150%;
+ max-height: 150%;
+ z-index: 2;
+ transition: transform 0.3s ease;
+}
+
+.plant:hover {
+ transform: scale(1.05);
+}
+```
+
+**បំបែករចនាបទទាំងនេះ៖**
+- **បង្កើត** ទីតាំង relative សម្រាប់ container រុក្ខជាតិដើម្បីបង្កើត context ទីតាំង
+- **កំណត់** ទំហំជម្ពស់ 13% សម្រាប់រាល់ container ដើម្បីធានារុក្ខជាតិទាំងអស់ស្ថិតខាងលើតួរអេក្រង់ដោយគ្មានការផ្លាស់ទី
+- **ផ្លាស់ទី** container ថ្មីៗឲ្យផ្នែកខាងឆ្វេងបន្តិច សម្រាប់មធ្យមកណ្ដាលល្អជាង
+- **អនុញ្ញាត** រុក្ខជាតិធ្វើបរិមាត្រស្វ័យប្រវត្តិដោយប្រើគុណលក្ខណៈ `max-width` និង `max-height`
+- **ប្រើ** `z-index` ដើម្បីដាក់រុក្ខជាតិឲ្យនៅផ្នែកលើធាតុផ្សេងៗនៅក្នុង terrarium
+- **បន្ថែម** ផលប៉ះពាល់ hover ស្រាលជាមួយ transition CSS សម្រាប់អន្តរកម្មល្អប្រសើរ
+
+✅ **គិតយ៉ាងយកចិត្តទុកដាក់**: ហេតុអ្វីក្រុមប្រើផ្នែកទាំងពីរ `.plant-holder` និង `.plant`? តើអ្វីដែលកើតឡើងប្រសិនបើយើងប្រើមួយគត់?
+
+> 💡 **គំរូរចនា**: container (`.plant-holder`) គ្រប់គ្រងទីតាំង និងប្លង់ ខណៈដែលមាតិកា (`.plant`) គ្រប់គ្រងរូបរាង និងការវាស់។ ការបំបែកនេះធ្វើឲ្យកូដងាយថែរក្សា និងបត់បែនបានល្អ។
+
+## ការយល់ដឹងអំពីទីតាំង CSS
+
+ទីតាំង CSS ដូចជាអ្នកដឹកនាំឆាកមួយ - អ្នកបញ្ជាថាតេទីតាំងនិងចលនារបស់សមាជិកគ្រប់គ្នាទៅនៅចន្លោះឆាក។ មានអ្នកត ស្គាល់តាមរចនាសម្ព័ន្ធផ្លូវបុរាណ ខណៈអ្នកផ្សេងទៀតត្រូវការទីតាំងជាក់លាក់សម្រាប់ប្រយោជន៍លើសកម្មភាព។
+
+ពេលអ្នកយល់ពីទីតាំង សំណួររចនាសម្ព័ន្ធជាច្រើនក្លាយជាអាចគ្រប់គ្រងបាន។ តើអ្នកចង់មានបណ្តាញ navigation រិះរិះនៅលើខ្លួនម៉ឺនណាស់នៅពេលអ្នករុករកទេ? ទីតាំងគ្រប់គ្រងយ៉ាងហោចណាស់។ តើអ្នកចង់មាន tooltip បង្ហាញនៅទីតាំងជាក់លាក់? នោះក៏ជាទីតាំងផងដែរ។
+
+### មូលដ្ឋានទាំងប្រាំរបស់ទីតាំង
+
+```mermaid
+quadrantChart
+ title អ(strategyកម្រិត CSS Positioning)
+ x-axis ដំណើរការឯកសារ --> លុបចេញពីដំណើរការ
+ y-axis ទីតាំង статಿಕ್ --> ការគ្រប់គ្រងបានត្រឹមត្រូវ
+ quadrant-1 Absolute
+ quadrant-2 Fixed
+ quadrant-3 Static
+ quadrant-4 Sticky
+
+ Static: [0.2, 0.2]
+ Relative: [0.3, 0.6]
+ Absolute: [0.8, 0.8]
+ Fixed: [0.9, 0.7]
+ Sticky: [0.5, 0.9]
+```
+| តម្លៃទីតាំង | អាកប្បកិរិយា | ករណីប្រើប្រាស់ |
+|----------------|--------------|----------------|
+| `static` | រលកទុតិយភាពដើម មិនគិត top/left/right/bottom | រចនាសម្ព័ន្ធឯកសារធម្មតា |
+| `relative` | ទីតាំងក្នុងការចុះថ្មីតាមទីតាំងធម្មតា | ការកំណត់តែបន្តិច, បង្កើត context ទីតាំង |
+| `absolute` | ទីតាំងភ្ជាប់ទៅបុត្រដែលមានទីតាំងដែលបានកំណត់ជិតស្និទ | ទីតាំងត្រឹមត្រូវ, យ៉ាងក្រាល |
+| `fixed` | ទីតាំងភ្ជាប់ទៅអេក្រង់កម្មវិធីរុករក | បណ្តាញ navigation, ធាតុហោះហើរ |
+| `sticky` | ប្តូររវាង relative និង fixed ដោយផ្អែកលើស្ក្រុល | ក្បាលដែលនៅជាក់លាក់ពេលរុករក |
+
+### ទីតាំងក្នុង Terrarium របស់យើង
+
+Terrarium របស់យើងប្រើការបញ្ចូលសមាសធាតុទីតាំងយ៉ាងយុទ្ធសាស្រ្ត ដើម្បីបង្កើតរចនាសម្ព័ន្ធដែលចង់បាន៖
+
+```css
+/* Container positioning */
+.container {
+ position: absolute; /* Removes from normal flow */
+ /* ... other styles ... */
+}
+
+/* Plant holder positioning */
+.plant-holder {
+ position: relative; /* Creates positioning context */
+ /* ... other styles ... */
+}
+
+/* Plant positioning */
+.plant {
+ position: absolute; /* Allows precise placement within holder */
+ /* ... other styles ... */
+}
+```
+
+**យល់ដឹងពីយុទ្ធសាស្រ្តទីតាំង៖**
+- **Containers absolute** ត្រូវបានដកចេញពីរលកស្គាល់ឯកសាររបស់ពិភពលោក ហើយត្រូវបានត្រួតត្រាចូលទន្លេអេក្រង់
+- **Plant holders relative** បង្កើត context ទីតាំងខណៈនៅក្នុងរលកស្គាល់ឯកសារ
+- **រុក្ខជាតិ absolute** អាចដាក់ទីតាំងបានយ៉ាងត្រឹមត្រូវក្នុង container relative របស់ពួកវា
+- **ការរួមបញ្ចូលនេះ** អនុញ្ញាតឲ្យរុក្ខជាតិត្រូវដាក់ជួរទៅនឹងទិសដៅដេក លើសពីនេះអាចបំពានតាមទីតាំងផ្ទាល់ខ្លួនបាន
+
+> 🎯 **ហេតុអ្វីវាសំខាន់**: ធាតុ `plant` ត្រូវការទីតាំង absolute ដើម្បីធ្វើឲ្យវាអាចទាញចុចបាននៅក្នុងមេរៀនបន្ទាប់។ ទីតាំង absolute នេះដកវាចេញពីរចនាសម្ព័ន្ធឯកសារ រួមជាមួយការអន្តរកម្មទាញ-បោះ។
+
+✅ **ពេលសាកល្បង**: សូមផ្លាស់ប្ដូរទីតាំង និងកំណត់មើលលទ្ធផល៖
+- តើមានអ្វីកើតឡើងបើអ្នកប្ដូរ `.container` ពី `absolute` ទៅ `relative`?
+- តើរចនាប័ទ្មមានការផ្លាស់ប្តូរយ៉ាងដូចម្តេច ប្រសិនបើ `.plant-holder` ប្រើ `absolute` ជំនួស `relative`?
+- តើមានអ្វីកើតឡើងពេលអ្នកប្ដូរ `.plant` ទៅ `relative` positioning?
+
+### 🔄 **ការត្រួតពិនិត្យផ្នែកសិក្សា**
+**ភាពជួសជុលក្នុងការចាត់តាំង CSS**៖ រំលឹកដើម្បីផ្ទៀងផ្ទាត់ការយល់ដឹងរបស់អ្នក៖
+- ✅ តើអ្នកអាចពណ៌នាហេតុផលដែលរុក្ខជាតិត្រូវការជួសជុលតាំង `absolute` សម្រាប់ការទាញនិងដាក់ទុកបានទេ?
+- ✅ តើអ្នកយល់ដឹងយ៉ាងដូចម្តេចពីរបៀប Containers `relative` បង្កើតបរិបទចាត់តាំង?
+- ✅ ហេតុអ្វីបានជាកុងតឺន័រខｓចំហៀងប្រើជួសជុលតាំង `absolute`?
+- ✅ តើមានអ្វីកើតឡើង ប្រសិនបើអ្នកយកការបញ្ជាក់់ជួសជុលតាំងចេញទាំងស្រុង?
+
+**ការតភ្ជាប់ជាមួយពិភពជាក់ស្ដែង**៖ គិតអំពីរបៀបដែលការចាត់តាំង CSS ស្រដៀងទៅនឹងរចនាប័ទ្មក្នុងពិភពជាក់ស្ដែង៖
+- **Static**៖ សៀវភៅនៅលើធ្នេញ (លំដាប់ធម្មជាតិ)
+- **Relative**៖ ផ្លាស់ទីសៀវភៅបន្តិច ប៉ុន្តែមិនបាត់ទីតាំងវា
+- **Absolute**៖ ដាក់ស្លាកសៀវភៅនៅលើគេហទំព័រ
+- **Fixed**៖ សន្លឹកតំណាកដែលនៅតែឃើញនៅពេលអ្នកបត់ទំព័រ
+
+## ការសង់ Terrarium ជាមួយ CSS
+
+ឥឡូវនេះ យើងនឹងសង់ដបន្ទប់កញ្ចក់ដោយប្រើតែ CSS ប៉ុណ្ណោះ - មិនចាំបាច់រូបភាព ឬកម្មវិធីគំនូរ។
+
+ការបង្កើតកញ្ចក់ដែលមើលទៅពិតជាមួយស្រមោល និងផលប៉ះពាល់ជ្រៅដោយប្រើការចាត់តាំងនិងភាពត្រជាក់បង្ហាញពីសមត្ថភាពទស្សនិកជនរបស់ CSS។ បច្ចេកទេសនេះស្រដៀងនឹងរបៀបដែលស្ថាបតិករនៅចលនាបោហៅហ្សបានប្រើរូបរាងជាគោលចំបងដើម្បីបង្កើតអាគារស្អាតស្មុគស្មាញ។ ពេលអ្នកយល់រឿងទាំងនេះ អ្នកនឹងទទួលស្គាល់បច្ចេកវិទ្យា CSS នៅក្រោយរចនាប័ទ្មបណ្ដាញជាច្រើន។
+
+```mermaid
+flowchart LR
+ A[កំពូលធុង] --> E[ទឹកអាំងបិទ]
+ B[ជញ្ជាំងធុង] --> E
+ C[ស្រទាប់ដី] --> E
+ D[ទាន់ខាងក្រោមធុង] --> E
+ F[ផលប៉ះពាល់កញ្ចក់] --> E
+
+ A1["ទទឹង ៥០%
កម្ពស់ ៥%
ទីតាំងកំពូល"] --> A
+ B1["ទទឹង ៦០%
កម្ពស់ ៨០%
មุมម្នាស់
ភាពម្អូស ០.៥"] --> B
+ C1["ទទឹង ៦០%
កម្ពស់ ៥%
ពណ៌ត្នោតស្រៅ
ស្រទាប់ខាងក្រោម"] --> C
+ D1["ទទឹង ៥០%
កម្ពស់ ១%
ទីតាំងខាងក្រោម"] --> D
+ F1["ស្រមោលបន្តិច
ភាពថ្លា
តំលៃ z-index ស្រប"] --> F
+
+ style E fill:#d1e1df,stroke:#3a241d
+ style A fill:#e8f5e8
+ style B fill:#e8f5e8
+ style C fill:#8B4513
+ style D fill:#e8f5e8
+```
+### ការបង្កើតគ្រឿងបន្លាស់ធុងកញ្ចក់
+
+ឲ្យយើងសង់ធុង Terrarium រៀងរាល់ផ្នែកមួយៗ។ ផ្នែកនីមួយៗប្រើជួសជុលតាំង `absolute` និងទំហំពាណលើភាគរយសម្រាប់រចនាប័ទ្មឆ្វេងឆ្វាញ៖
+
+```css
+.jar-walls {
+ height: 80%;
+ width: 60%;
+ background: #d1e1df;
+ border-radius: 1rem;
+ position: absolute;
+ bottom: 0.5%;
+ left: 20%;
+ opacity: 0.5;
+ z-index: 1;
+ box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
+}
+
+.jar-top {
+ width: 50%;
+ height: 5%;
+ background: #d1e1df;
+ position: absolute;
+ bottom: 80.5%;
+ left: 25%;
+ opacity: 0.7;
+ z-index: 1;
+ border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.jar-bottom {
+ width: 50%;
+ height: 1%;
+ background: #d1e1df;
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ opacity: 0.7;
+ border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.dirt {
+ width: 60%;
+ height: 5%;
+ background: #3a241d;
+ position: absolute;
+ border-radius: 0 0 1rem 1rem;
+ bottom: 1%;
+ left: 20%;
+ opacity: 0.7;
+ z-index: -1;
+}
+```
+
+**ការយល់ដឹងពីការសាងសង់ terrarium៖**
+- **ប្រើ** ទំហំផ្អែកលើភាគរយសម្រាប់ការកំណត់ទំហំឆ្វេងឆ្វាញគ្រប់ទំហំអេក្រង់
+- **តាំងទីតាំង** ធាតុដោយជួសជុលតាំង absolut ដើម្បីធ្វើឱ្យដាក់ទៅលើនិងស្របគ្នាយ៉ាងច្បាស់
+- **អនុវត្ត** តម្លៃភាពច្បាស់ផ្សេងៗដើម្បីបង្កើតផលប៉ះពាល់ត្រជាក់កញ្ចក់
+- **ប្រើ** `z-index` ដើម្បីដាក់រុក្ខជាតិក្នុងធុង
+- **បន្ថែម** ប្លុកស្រមោល និងព្រំដែនបត់សម្រាប់មើលទៅពិតជាងមុន
+
+### រចនាប័ទ្មឆ្វេងឆ្វាញជាមួយភាគរយ
+
+មើលឃើញបានដូច្នេះទាំងអស់ទំហំប្រើភាគរយ មិនមែនម៉ាស៊ីនជាន់ pixel ទេ៖
+
+**ហេតុអ្វីបានជាវាមានសារៈសំខាន់៖**
+- **ធានា** ថា terrarium មានការកើនទំហំនឹងអេក្រង់គ្រប់ទំហំប្រកួតគ្នា
+- **ថែរក្សា** ទំនាក់ទំនងរវាងផ្នែកនានារបស់ធុង
+- **ផ្តល់** បទពិសោធន៍មានលក្ខណៈទីតាំងរួមពីទូរស័ព្ទដល់កុំព្យូទ័រធំៗ
+- **អនុញ្ញាត** រចនាប័ទ្មឲ្យផ្លាស់ប្ដូរដោយគ្មានការបាក់បែកក្នុងរចនាប័ទ្មទស្សនា
+
+### អង្គធាតុ CSS កំពុងដំណើរការ
+
+យើងប្រើអង្គធាតុ `rem` សម្រាប់ border-radius ដែលធៀបមកពីទំហំណូតផ្ទាល់អក្សរដើម។ វាបង្កើតរចនាប័ទ្មមានភាពងាយស្រួល និងគោរពចំពោះចំណូលចិត្តអក្សររបស់អ្នកប្រើ។ សូមស្វែងយល់បន្ថែមពី [អង្គធាតុចាំបាច់ CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths) នៅក្នុងការពិពណ៌នាផ្លូវការជាថ្មី។
+
+✅ **ការប្រឡងរូបភាព**៖ សាកល្បងកែប្រែតម្លៃទាំងនេះ ហើយមើលផលប៉ះពាល់៖
+- កែប្រែភាពត្រជាក់របស់ធុងពី 0.5 ទៅ 0.8 – តើវាធ្វើអោយកញ្ចក់មើលទៅយ៉ាងដូចម្តេច?
+- កែទឹកពណ៌ដីពី `#3a241d` ទៅ `#8B4513` – មានផលប៉ះពាល់ភ្នែកយ៉ាងដូចម្តេច?
+- ប្ដូរ `z-index` របស់ដីទៅ 2 – តើការដាក់ជាន់មានអ្វីបម្លែង?
+
+### 🔄 **ការត្រួតពិនិត្យផ្នែកសិក្សា**
+**ការយល់ដឹងរចនាតុបតែង CSS**៖ ប្រាកដថាអ្នកយល់ពី CSS ទស្សនិកភាព៖
+- ✅ តើការប្រើទំហំជាភាគរយធ្វើឲ្យរចនាប័ទ្មឆ្វេងឆ្វាញដូចម្តេច?
+- ✅ ហេតុអ្វីបានជា opacity បង្កើតលក្ខណៈត្រជាក់កញ្ចក់?
+- ✅ តើតួនាទីរបស់ z-index នៅក្នុងការដាក់ទង់ធាតុមានអ្វីខ្លះ?
+- ✅ តើតម្លៃ border-radius បង្កើតរូបរាងធុងយ៉ាងដូចម្តេច?
+
+**គោលការណ៍រចនា**៖ សង្កេតឃើញថាយើងកំពុងបង្កើតរូបភាពស្មុគស្មាញពីរូបរាងសាមញ្ញ៖
+1. **ប្រអប់មូល** → **ប្រអប់មូលបត់គម្រប់** → **ផ្នែកធុង**
+2. **ពណ៌ទត់** → **ភាពច្បាស់** → **ផលប៉ះពាល់កញ្ចក់**
+3. **ធាតុបុគ្គល** → **ការប្រឡងតំឡើង** → **ការមើលជា 3D**
+
+---
+
+## ត្រូវប្រើ GitHub Copilot Agent Challenge 🚀
+
+ប្រើរបៀប Agent ដើម្បីបញ្ចប់បច្ចេកទេសដូចខាងក្រោម៖
+
+**ពណ៌នា:** បង្កើតAnimation CSS ដែលធ្វើអោយរុក្ខជាតិ terrarium រុំរៀបឯកោ ប្រើបែបទ្រនាប់ខ្យល់ធម្មជាតិ។ វាជួយឱ្យអ្នកសម្រួលកាន់តែច្បាស់ អំពីCSS animations, transforms និង keyframes ខណៈពេលបង្កើតទស្សនៈមានភាពគួរឱ្យទាក់ទាញ។
+
+**សេចក្តីជូនដំណឹង:** បន្ថែមAnimation keyframe CSS ដើម្បីធ្វើឲ្យរុក្ខជាតិនៅក្នុងធុងរុំរៀបឆ្វេង-ស្ដាំយឺតៗ។ បង្កើតអនុការ swaying ដែលបង្វិលរុក្ខជាតិស្ទួន ២-៣ ដឺក្រេ ខាងឆ្វេងនិងស្ដាំក្នុងរយៈពេល ៣-៤ វិនាទី ហើយអនុវត្តទៅក្លាស `.plant`។ ធានាថាអនុការនេះវដ្តពុំមានលប់ និងមានមុខងារសម្រាលសម្រាប់ចលនាធម្មជាតិ។
+
+ស្វែងយល់បន្ថែមអំពី [របៀប agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ទីនេះ។
+
+## 🚀 បញ្ហា៖ ការបន្ថែមការបញ្ចាំងកញ្ចក់
+
+រៀបចំបន្ថែមភាពត្រជាក់របស់ terrarium ជាមួយបញ្ចាំងកញ្ចក់ពិតប្រាកដ។ បច្ចេកទេសនេះនឹងបន្ថែមជ្រៅ និងភាពពិតប្រាកដទៅក្នុងការរចនា។
+
+អ្នកនឹងបង្កើតចំណុចពន្លឺស្លោះៗ ដែលធ្វើឲ្យវាស្រដៀងទៅនឹងការបញ្ចាំងពន្លឺនៅលើផ្ទៃកញ្ចក់។ វាជាជំហានដូចជាគំនូរល្បី Jan van Eyck បានប្រើពន្លឺ និងការបញ្ចាំងដើម្បីធ្វើឲ្យកញ្ចក់គំនូរមើលទៅជា 3D។ នេះជាគោលដៅថា៖
+
+
+
+**បញ្ហារបស់អ្នក៖**
+- **បង្កើត** រូបរាងវង់ពណ៌ស ឬពណ៌ស្រាលសម្រាប់បញ្ចាំងកញ្ចក់
+- **តាំងទីតាំង** នៅខាងឆ្វេងនៃធុង
+- **ប្រើ** opacity និង blur សម្រាប់បញ្ចាំងពន្លឺពិតប្រាកដ
+- **ប្រើ** `border-radius` ដើម្បីបង្កើតរាងហ៊ុនសំរាប់ក្រែមចាត
+- **សាកល្បង** ជាមួយ gradients ឬ box-shadows សម្រាប់ភាពពិតប្រាកដជាងមុន
+
+## ប្រឡងក្រោយមេរៀន
+
+[ប្រឡងក្រោយមេរៀន](https://ff-quizzes.netlify.app/web/quiz/18)
+
+## ពង្រីកចំណេះដឹង CSS របស់អ្នក
+
+CSS អាចមានភាពស្មុគស្មាញនៅដើម ប៉ុន្តែការយល់ដឹងពីគំនិតមូលដ្ឋានទាំងនេះផ្ដល់មូលដ្ឋានរឹងមាំសម្រាប់បច្ចេកវិទ្យាទំនើបជាងនេះ។
+
+**ដែនការសិក្សា CSS បន្ទាប់របស់អ្នក៖**
+- **Flexbox** - ធ្វើឲ្យការតំទីនិងចែកចាយធាតុមានភាពងាយស្រួល
+- **CSS Grid** - ផ្ដល់ឧបករណ៍សម្រាប់បង្កើតរចនាប័ទ្មស្មុគស្មាញ
+- **អថេរ CSS** - កាត់បន្ថយការបញ្ជូនពាក្យ និងធ្វើឲ្យងាយជួសជុល
+- **រចនាប័ទ្មឆ្វេងឆ្វាញ** - ធានាថាគេហទំព័រផ្ទុះល្អនៅលើអេក្រង់នានា
+
+### ប្រភពសិក្សាដែលអាចចូលរួមបាន
+
+ហាត់ប្រាណគំនិតទាំងនេះដោយហ្គេមដែលមានការចូលរួមខ្ពស់៖
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - រៀន Flexbox តាមការប្រកួតកម្សាន្ត
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - រៀន CSS Grid ដោយដាំកាំបិតវីរុស
+- 🎯 [CSS Battle](https://cssbattle.dev/) - សាកល្បងជំនាញ CSS ជាមួយបញ្ហាកូដ
+
+### ការសិក្សាបន្ថែម
+
+សម្រាប់មូលដ្ឋាន CSS ពេញលេញ បញ្ជប់មេរៀន Microsoft Learn នេះ៖ [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **អ្វីដែលអ្នកអាចធ្វើក្នុង ៥ នាទីបន្ទាប់**
+- [ ] បើក DevTools និងពិនិត្យរចនាប័ទ្ម CSS នៅលើគេហទំព័រណាមួយជាមួយផ្ទាំង Elements
+- [ ] បង្កើតឯកសារ CSS សាមញ្ញ និងភ្ជាប់វាទៅកាន់ទំព័រ HTML
+- [ ] សាកល្បងប្ដូរពណ៌ដោយវិធីជាប្រភេទផ្សេងៗ៖ hex, RGB, និងពណ៌ឈ្មោះ
+- [ ] ហាត់ធ្វើ box model ដោយបន្ថែមpadding និង margin ទៅ div
+
+### 🎯 **អ្វីដែលអ្នកអាចសម្រេចបានក្នុងមួយម៉ោងនេះ**
+- [ ] បញ្ចប់ប្រឡងក្រោយមេរៀន និងពិនិត្យមើលគោលការណ៍ CSS មូលដ្ឋាន
+- [ ] តុបតែងទំព័រ HTML របស់អ្នកជាមួយអក្សរ ពណ៌ និងចន្លោះ
+- [ ] បង្កើតរចនាប័ទ្មសាមញ្ញដោយប្រើ flexbox ឬ grid
+- [ ] សាកល្បង CSS transitions សម្រាប់ផលប៉ះពាល់រលោង
+- [ ] ហាត់វិនិយោគរចនាប័ទ្មឆ្វេងឆ្វាញជាមួយ media queries
+
+### 📅 **ការផ្សងព្រេងCSS រយៈពេលមួយសប្តាហ៍របស់អ្នក**
+- [ ] បញ្ចប់ភារកិច្ចរចនាប័ទ្ម terrarium ជាមួយភាពច្នៃប្រឌិត
+- [ ] ដោះស្រាយ CSS Grid ដើម្បីបង្កើតរាងកាងមួយសម្រាប់រូបថត
+- [ ] រៀន CSS animations ដើម្បីនាំមកជីវភាពរចនា
+- [ ] ស្វែងយល់ preprocessors CSS ដូចជា Sass ឬ Less
+- [ ] សិក្សាគោលការណ៍រចនា និងអនុវត្តវាទៅ CSS របស់អ្នក
+- [ ] វិភាគ និងបង្កើតរចនាប័ទ្មគួរឱ្យចាប់អារម្មណ៍ដែលអ្នកត្រូវបានឃើញលើបណ្ដាញ
+
+### 🌟 **ភាពជំនាញរចនាប័ទ្មរយៈពេលមួយខែរបស់អ្នក**
+- [ ] សង់ប្រព័ន្ធវែបសាយឆ្វេងឆ្វាញពេញលេញ
+- [ ] រៀន CSS-in-JS ឬ frameworks ផ្អែកលើ utility ជាដូចជា Tailwind
+- [ ] ចូលរួមគម្រោងបើកចំហ ដោយធ្វើការ উন্ন센ן CSS
+- [ ] ជំនាញ CSS កម្រិតខ្ពស់ ដូចជា custom properties និង containment
+- [ ] បង្កើតបណ្ណាល័យឧបករណ៍ដែលអាចប្រើបានច្រើនជាមួយ CSS ម៉ូឌុលា
+- [ ] ជំនួយអ្នករៀន CSS ផ្សេងទៀត និងចែករំលែកចំណេះដឹងរចនា
+
+## 🎯 ពេលវេលាកំណត់ភាពជំនាញ CSS របស់អ្នក
+
+```mermaid
+timeline
+ title ការបន្តរៀន CSS
+
+ section មូលដ្ឋាន (១០ នាទី)
+ File Connection: ការតភ្ជាប់ CSS ទៅ HTML
+ : យល់រចនាបថ cascade
+ : រៀនមូលដ្ឋាននៃការ inheritance
+
+ section Selectors (១៥ នាទី)
+ Targeting Elements: ជ្រើសរើសធាតុ
+ : លំនាំថ្នាក់
+ : ភាពخصوصية ID
+ : Combinators
+
+ section Box Model (២០ នាទី)
+ Layout Fundamentals: មារ្ខីន និង បន្ទាត់ខាងក្នុង
+ : លក្ខណៈគែម
+ : ទំហំមាតិកា
+ : បើកបង្ហាញ box-sizing
+
+ section Positioning (២៥ នាទី)
+ Element Placement: ថិចភាគរយ vs តាមបន្ទាត់
+ : ការតំណត់ទីតាំង absolute
+ : ការរៀបចំ Z-index
+ : ឯកតារឮ信ឿន
+
+ section Visual Design (៣០ នាទី)
+ Styling Mastery: ពណ៌ និង ភាពថ្លា
+ : ធ្វើស្រមោល និង អត្ថប្រយោជន៍
+ : ការផ្លាស់ប្តូរ
+ : លក្ខណៈបម្លែង
+
+ section Responsive Design (៤៥ នាទី)
+ Multi-Device Support: សំណួរពីមេឌៀ
+ : ការរៀបចំឆាប់បត់បែន
+ : វិធីសាស្ត្រចាប់ផ្តើមលើទូរសព្ទដៃ
+ : ការបង្កើតពហុផ្ទាំង
+
+ section Advanced Techniques (១ សប្ដាហ៍)
+ Modern CSS: ការរៀបចំ Flexbox
+ : ប្រព័ន្ធ CSS Grid
+ : លក្ខណៈផ្ទាល់ខ្លួន
+ : ស្ទីលភាគរយ animation
+
+ section Professional Skills (១ ខែ)
+ CSS Architecture: លំនាំក្រុមឧបករណ៍
+ : កូដដែលអាចថែទាំបាន
+ : ការវៃតម្រូវល្បឿន
+ : គ្មានបញ្ហារបស់កម្មវិធីរក្សាភាពប្រើប្រាស់
+```
+### 🛠️ សង្ខេបឧបករណ៍ CSS របស់អ្នក
+
+បន្ទាប់ពីបញ្ចប់មេរៀននេះ អ្នកមាន៖
+- **ការយល់ដឹងប្រលោម**៖ របៀបលំអៀងនិងលុបបំបាត់ស្ទាយ
+- **ជំនាញជ្រើសរើស**៖ គោលដៅច្បាស់លាស់ជាមួយធាតុ ក្លาส និង ID
+- **ជំនាញជួសជុលតាំង**៖ ការដាក់ធាតុផ្ដោតនិងការកំណត់ជាន់
+- **ការរចនាទស្សនិក**៖ បង្កើតផលប៉ះពាល់កញ្ចក់ ស្រមោល និងភាពត្រជាក់
+- **បច្ចេកទេសឆ្វេងឆ្វាញ**៖ រចនារូបភាពដោយភាគរយដែលអាចផ្លាស់ប្តូរបានក្នុងគ្រប់ទំហំអេក្រង់
+- **ការរៀបចំកូដ**៖ រចនាប័ទ្ម CSS ស្អាតងាយស្រួលថែទាំ
+- **ការប្រពៃណីទំនើប**៖ ប្រើអង្គធាតុស្របបាត និងរចនាប័ទ្មងាយចូលរួម
+
+**ជំហានបន្ទាប់**៖ terrarium របស់អ្នកឥឡូវមានសរុបរចនាសម្ព័ន្ធ (HTML) និងស្ទាយ (CSS)។ មេរៀនចុងក្រោយនឹងបន្ថែមការបញ្ចូលអន្តរកម្មជាមួយ JavaScript!
+
+## ភារកិច្ច
+
+[CSS Refactoring](assignment.md)
+
+---
+
+
+**ការព្រមាន**៖
+ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈដែលយើងខិតខំក្នុងការផ្តល់ភាពត្រឹមត្រូវ សូមយល់អំពីថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមដែលមាននៅក្នុងភាសាម៉ាស៊ីនគួរត្រូវបានចាត់ទុកជាឯកសារដើមដែលមានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមបញ្ជាក់អោយមានការបកប្រែដោយមនុស្សជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ខុស ឬការបកស្រាយខុសដែលអាចកើតមានពីការប្រើប្រាស់ការបកប្រែនេះនោះទេ។
+
\ No newline at end of file
diff --git a/translations/km/3-terrarium/2-intro-to-css/assignment.md b/translations/km/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 000000000..678e44187
--- /dev/null
+++ b/translations/km/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,126 @@
+# កិច្ចការផ្លាស់ប្តូររចនាសម្ព័ន្ធ CSS
+
+## គោលដៅ
+
+ផ្លាស់ប្តូរគម្រោង terrarium របស់អ្នក ដើម្បីប្រើបច្ចេកវិទ្យារចនាសម្ព័ន្ធ CSS ម៉ូដដែល! បម្លែងវិធីសាស្រ្តកំណត់តំណែងអប្បបរមា (absolute positioning) បច្ចុប្បន្នក្នុងការអនុវត្ត **Flexbox** ឬ **CSS Grid** សម្រាប់រចនាបទដែលអាចថែរក្សា បានងាយ និងមានការឆ្លើយតបល្អ។ កិច្ចការនេះធ្វើឱ្យអ្នកមានការប្រឈមក្នុងការអនុវត្តស្ដង់ដារផ្នែក CSS ថ្មីៗ ខណៈបន្តរក្សាសម្រស់ភ្នាក់ងាររបស់ terrarium របស់អ្នក។
+
+ការយល់ដឹងពីពេលវេលានិងវិធីសាស្រ្តប្រើការរចនា layout ខុសៗគ្នា គឺជាទំនុកចិត្តមួយសំខាន់សម្រាប់ការអភិវឌ្ឍវែបសម័យថ្មី។ ការហាត់នេះជាស្ពានភ្ជាប់វិធីសាស្រ្តកំណត់តំណែងចាស់ៗជាមួយប្រព័ន្ធរចនាសម្ព័ន្ធ CSS បច្ចុប្បន្ន។
+
+## សេចក្តីណែនាំសម្រាប់កិច្ចការ
+
+### ជំហានទី 1: វិភាគ និង គម្រោង
+1. **ពិនិត្យកូដ terrarium បច្ចុប្បន្នរបស់អ្នក** - ស្វែងរកធាតុដែលកំពុងប្រើកំណត់តំណែងអប្បបរមា
+2. **ជ្រើសរើសវិធីសាស្រ្តរចនា layout របស់អ្នក** - សម្រេចថាតើ Flexbox ឬ CSS Grid ត្រូវគ្នាជាងសម្រាប់គោលដៅរចនារបស់អ្នក
+3. **គូររចនាសម្ព័ន្ធ layout ថ្មីរបស់អ្នក** - វិភាគពីរបៀបដាក់តំណែងកុងត្ន័រនិងធាតុរុក្ខជាតិ
+
+### ជំហានទី 2: អនុវត្ត
+1. **បង្កើតកំណែថ្មី** នៃគម្រោង terrarium របស់អ្នកនៅថតថ្មីមួយ
+2. **ធ្វើបច្ចុប្បន្នភាពរចនាសម្ព័ន្ធ HTML** តាមតម្រូវ ដើម្បីគាំទ្រវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើស
+3. **ផ្លាស់ប្តូរ CSS** ដើម្បីប្រើ Flexbox ឬ CSS Grid ជំនួសការកំណត់តំណែងអប្បបរមា
+4. **រក្សាសមាមាត្ររូបភាព** - រក្សាការបង្ហាញរុក្ខជាតិ និងចាន terrarium នៅតំណែងដដែល
+5. **អនុវត្តចម្លើយបត់បែន** - រចនាសម្ព័ន្ធរបស់អ្នកគួរតែអាចបត់បែនឱ្យសម្រួលទៅទំហំអេក្រង់ខុសៗគ្នា
+
+### ជំហានទី 3: សាកល្បង និង ឯកសារព័ត៌មាន
+1. **សាកល្បងក្នុងកម្មវិធីរុករក** - បញ្ជាក់ថារចនារបស់អ្នកដំណើរការល្អនៅក្នុង Chrome, Firefox, Edge និង Safari
+2. **សាកល្បងចម្លើយបត់បែន** - ពិនិត្យរចនារបស់អ្នកនៅលើទូរស័ព្ទចល័ត, ថេប្លេត និងកុំព្យូទ័រឡេបតុប
+3. **ឯកសារព័ត៌មាន** - បន្ថែមមតិយោបល់ទៅ CSS របស់អ្នកដើម្បីពន្យល់ពីជម្រើសរចនា
+4. **ថតរូបអេក្រង់** - ចាប់ផ្តើម terrarium របស់អ្នកនៅក្នុងកម្មវិធីរុករកនិងទំហំអេក្រង់ផ្សេងៗ
+
+## កម្រិតបច្ចេកទេសត្រូវការ
+
+### ការអនុវត្តរចនាសម្ព័ន្ធ
+- **ជ្រើសរើស១យ៉ាង**: អនុវត្ត Flexbox ឬ CSS Grid (មិនប្រើពីរទាំងពីរជាមួយធាតុដូចគ្នា)
+- **រចនារឆ្លើយតប**: ប្រើឯកតាដូចជា (`rem`, `em`, `%`, `vw`, `vh`) ជំនួស pixels កំណត់ថេរ
+- **ចូលដំណើរការ**: រក្សារចនាសម្ព័ន្ធ HTML មានអត្ថន័យ និងអត្ថបទ alt ដូចគ្នា
+- **គុណភាពកូដ**: ប្រើឈ្មោះសម្គាល់រួមគ្នានិងចាត់តាំង CSS យ៉ាងសមរម្យ
+
+### លក្ខណៈ CSS ម៉ូដែលដើម្បីបញ្ចូល
+```css
+/* Example Flexbox approach */
+.terrarium-container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ align-items: center;
+ justify-content: center;
+}
+
+.plant-containers {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 1200px;
+}
+
+/* Example Grid approach */
+.terrarium-layout {
+ display: grid;
+ grid-template-columns: 1fr 3fr 1fr;
+ grid-template-rows: auto 1fr;
+ min-height: 100vh;
+ gap: 1rem;
+}
+```
+
+### តម្រូវការគាំទ្រកម្មវិធីរុករក
+- **Chrome/Edge**: ចុងក្រោយ ២ កំណែ
+- **Firefox**: ចុងក្រោយ ២ កំណែ
+- **Safari**: ចុងក្រោយ ២ កំណែ
+- **កម្មវិធីរុករកលើទូរស័ព្ទ**: iOS Safari, Chrome Mobile
+
+## ឯកសារដែលត្រូវឲ្យប្រគល់
+
+1. **ឯកសារ HTML បច្ចុប្បន្នភាព** ជាមួយរចនាសម្ព័ន្ធសម្រួលធំ
+2. **ឯកសារ CSS បានផ្លាស់ប្តូរ** ប្រើបច្ចេកទេសរចនាសម្ព័ន្ធម៉ូដ។
+3. **បណ្ណាល័យថតរូបអេក្រង់** បង្ហាញការចូលគ្នានៃកម្មវិធីរុករក:
+ - មើលលើកុំព្យូទ័រ (1920x1080)
+ - មើលលើថេប្លេត (768x1024)
+ - មើលលើទូរស័ព្ទចល័ត (375x667)
+ - យ៉ាងហោចណាស់ ២កម្មវិធីរុករកផ្សេងគ្នា
+4. **ឯកសារ README.md** បង្ហាញសេចក្តីហេតុផលជ្រើសរើសរចនា (Flexbox ឬ Grid) និងហេតុផល
+ - បញ្ហាសម្រេចក្នុងពេលផ្លាស់ប្តូរ
+ - កំណត់សម្គាល់ការចូលរួមកម្មវិធីរុករក
+ - សេចក្តីណែនាំក្នុងការបញ្ជួរកូដរបស់អ្នក
+
+## វិច្ឆ័យការវាយតម្លៃ
+
+| កម្រិត | អតិភាព (4) | បរិញ្ញាបត្រ (3) | កំពុងអភិវឌ្ឍ (2) | ចាប់ផ្តើម (1) |
+|----------|-------------|------------------|------------------|---------------|
+| **ការអនុវត្តរចនា layout** | ប្រើខ្លាំង Flexbox/Grid ជាមួយលក្ខណៈវាងវៃ; រចនារឆ្លើយតបពេញលេញ | អនុវត្តត្រឹមត្រូវ ជាមួយរចនារឆ្លើយតបល្អ | អនុវត្តមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតបតិច | ការអនុវត្តរចនា layout មិនពេញលេញ ឬខុស |
+| **គុណភាពកូដ** | CSS ស្អាត រៀបចំល្អ មានមតិយោបល់មានន័យ និងឈ្មោះធម្មតា | រៀបចំបានល្អ មានមតិយោបល់ខ្លះ | រៀបចំបានត្រឹមត្រូវ មានការចង្អុលខ្លះ | រៀបចំខ្សោយ ធ្វើអោយស្មុគស្មាញក្នុងការយល់ |
+| **ភាពឆបគ្នាក្នុងកម្មវិធីរុករក** | មានភាពស្របគ្នាទាំងអស់ជំនួយដោយថតរូបអេក្រង់ | មានភាពឆបគ្នាល្អ បញ្ជាក់បញ្ហានៅកម្រិតតូច | មានបញ្ហាភាពឆបគ្នាដែលមិនប៉ះពាល់មុខងារ | មានបញ្ហាធំ ឬខ្វះការសាកល្បង |
+| **រចនារឆ្លើយតប** | វិធីសាស្រ្តម៉ូប៊ីល-ផ្តើមល្អ ជាមួយចំណុចឆក់ខ្សែភាពយន្ដទន់ | រចនារឆ្លើយតបល្អ ជាមួយចំណុចឆក់សមរម្យ | រចនាមូលដ្ឋាន មានបញ្ហារចនារឆ្លើយតប | រចនារឆ្លើយតបមានកំណត់ ឬខូចខាត |
+| **ឯកសារព័ត៌មាន** | README ពេញលេញ មានពន្យល់លម្អិត និងយល់ដឹង | ឯកសារយ៉ាងល្អគ្របដណ្តប់ទាំងអស់ | ឯកសារមូលដ្ឋាន មានការពន្យល់តិច | ឯកសារខ្វះ ឬមិនមាន |
+
+## ឧបករណ៍ជួយ
+
+### មេរៀនវិធីសាស្រ្តរចនា layout
+- 📖 [មេរៀនពេញលេញអំពី Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- 📖 [មេរៀនពេញលេញអំពី CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- 📖 [Flexbox នឹង Grid - ជ្រើសឧបករណ៍ត្រឹមត្រូវ](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
+
+### ឧបករណ៍សាកល្បងកម្មវិធីរុករក
+- 🛠️ [ម៉ូដឆ្លើយតប DevTools របស់កម្មវិធីរុករក](https://developer.chrome.com/docs/devtools/device-mode/)
+- 🛠️ [Can I Use - គាំទ្រលក្ខណៈពិសេស](https://caniuse.com/)
+- 🛠️ [BrowserStack - សាកល្បងគន្លងកម្មវិធីរុករក](https://www.browserstack.com/)
+
+### ឧបករណ៍គុណភាពកូដ
+- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
+- ✅ [HTML Validator](https://validator.w3.org/)
+- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+
+## បញ្ហាបន្ថែម
+
+🌟 **រចនាលំនាំបច្ចេកទេស**: អនុវត្តទាំង Flexbox និង Grid នៅផ្នែកផ្សេងៗនៃរចនារបស់អ្នក
+🌟 **បញ្ចូលកម្មវិធីចលនា**: បន្ថែមការផ្លាស់ប្តូរឬចលនាដែលដំណើរការជាមួយ layout ថ្មីរបស់អ្នក
+🌟 **របៀបខ្មៅ**: អនុវត្តអ្នកប្តូរមុខងារធ្វើពីលក្ខណ: CSS custom properties
+🌟 **ការសួរក្រោមកុងតឺន័រ**: ប្រើបច្ចេកវិទ្យារចនាក្រោម container query សម្រាប់ភាពឆ្លើយតបនៅកម្រិតធាតុ
+
+> 💡 **ចងចាំ**: គោលបំណងមិនមែនគ្រាន់តែធ្វើឲ្យវាដំណើរការ ប៉ុន្តែគឺយល់ថា ហេតុអ្វីបានជាវិធីសាស្រ្តរចនារបស់អ្នកជ្រើសរើសគឺជាចម្លើយល្អបំផុតសម្រាប់បញ្ហារចនានេះ!
+
+---
+
+
+**ប្រកាសលើកលែង**៖
+ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ទោះបីយើងខិតខំសម្រាប់ភាពត្រឹមត្រូវ ក៏សូមយកចិត្តទុកដាក់ថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាមានដើមគួរត្រូវបានគេចាត់ទុកជាធនធានដ៏មានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ ដាក់សំណើរសូមប្រើការបកប្រែដោយមនុស្សជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសណាមួយដែលកើតមានពីការប្រើប្រាស់បកប្រែនេះទេ។
+
\ No newline at end of file
diff --git a/translations/km/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/km/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 000000000..611874619
--- /dev/null
+++ b/translations/km/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,761 @@
+# គម្រោង Terrarium ផ្នែក 3៖ ការគ្រប់គ្រង DOM និង JavaScript Closures
+
+```mermaid
+journey
+ title ជម្រើស JavaScript DOM របស់អ្នក
+ section មូលដ្ឋាន
+ យល់ដឹងអំពី DOM: 3: Student
+ រៀនអំពី closures: 4: Student
+ តភ្ជាប់ធាតុ: 4: Student
+ section ប្រតិបត្តិការ
+ កំណត់ព្រឹត្តិការណ៍សំរាប់ការទាញ: 4: Student
+ តាមដានកូអអរដោនេត: 5: Student
+ ការគ្រប់គ្រងចលនា: 5: Student
+ section ប៊្លេស
+ បន្ថែមការសម្អាត: 4: Student
+ សាកល្បងមុខងារ: 5: Student
+ បញ្ចប់ terrarium: 5: Student
+```
+
+> Sketchnote ដោយ [Tomomi Imura](https://twitter.com/girlie_mac)
+
+សូមស្វាគមន៍មកកាន់មុខងារដ៏ទាក់ទាញបំផុតមួយនៃការអភិវឌ្ឍ ន់បណ្ដាញ - ការបង្កើតអ្វីៗឲ្យមានអន្តរកម្ម! Document Object Model (DOM) គឺដូចជាស្ពានរវាង HTML និង JavaScript របស់អ្នក ហើយថ្ងៃនេះយើងនឹងប្រើវាដើម្បីនាំឲ្យ terrarium របស់អ្នកមានជីវិត។ នៅពេលដែល Tim Berners-Lee បង្កើតកម្មវិធីរុករកបណ្ដាញជាលើកដំបូង គាត់បានស្រមៃឃើញបណ្ដាញដែលឯកសារអាចមានលក្ខណៈសកម្ម និងអន្តរកម្មបាន - DOM ធ្វើឲ្យចក្ខុវិស័យនោះក្លាយជាការពិត។
+
+យើងនឹងសិក្សាផងដែរពី JavaScript closures ដែលប្រហែលជាស្តាប់ហើយអាចធ្វើឲ្យខ្លាចបន្តិចផ្ទាល់ខ្លួន។ គិតថា closures គឺដូចជាការបង្កើត “កិរិយាបទចងចាំ” ដែលមុខងាររបស់អ្នកអាចចាំព័ត៌មានសំខាន់ៗបាន។ វាដូចជាព प्रत्येकរុក្ខជាតិក្នុង terrarium របស់អ្នកមានកំណត់ត្រាទិន្នន័យផ្ទាល់ខ្លួនដើម្បីកត់ត្រាតំបន់ទីតាំង។ នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងយល់ថាវាជារឿងធម្មជាតិ និងមានប្រយោជន៍ប៉ុណ្ណា។
+
+នេះគឺជាអ្វីដែលយើងកំពុងបង្កើត៖ terrarium ដែលអ្នកប្រើអាចចម្លង ហើយទម្លាក់រុក្ខជាតិបានគ្រប់ទីកន្លែងយ៉ាងងាយស្រួល។ អ្នកនឹងរៀនបច្ចេកទេស DOM manipulation ដែលផ្ដល់ថាមពលដល់អ្វីៗទាំងអស់ពីការផ្ទុកឯកសារដែលអាចទាញ និងទម្លាក់ ដល់ហ្គេមអន្ទរកម្ម។ មកធ្វើឲ្យ terrarium របស់អ្នកមានជីវិត។
+
+```mermaid
+mindmap
+ root((DOM & JavaScript))
+ DOM Tree
+ ជ្រើសរើសធាតុ
+ ការចូលប្រើទ្រព្យសម្បត្តិ
+ ការគ្រប់គ្រងព្រឹត្តិការណ៍
+ បច្ចុប្បន្នភាពឌីណាមិច
+ Events
+ ព្រឹត្តិការណ៍បង្ហាញ
+ ព្រឹត្តិការណ៍កណ្តុរ
+ ព្រឹត្តិការណ៍ប៉ះ
+ អ្នកស្ដាប់ព្រឹត្តិការណ៍
+ Closures
+ អថិជនឯកជន
+ ដែនកំណត់មុខងារ
+ ការស្ថិតនៅម៉ែនម៉ូរី
+ ការគ្រប់គ្រងស្ថានភាព
+ Drag & Drop
+ ការតាមដានទីតាំង
+ គណិតវិទ្យាភាគីស្រប
+ ជីវិតសកម្មភាពព្រឹត្តិការណ៍
+ អន្តរកម្មអ្នកប្រើ
+ Modern Patterns
+ ការបែងចែកព្រឹត្តិការណ៍
+ លទ្ធភាពប្រតិបត្តិការ
+ ឆ្លងកាត់ឧបករណ៍
+ សមត្ថភាពចូលរួម
+```
+## សំនួរពិចារណាមុនមេរៀន
+
+[សំនួរពិចារណាមុនមេរៀន](https://ff-quizzes.netlify.app/web/quiz/19)
+
+## ការយល់ដឹងអំពី DOM៖ ទ្វារចូលរបស់អ្នកទៅក្នងទំព័របណ្ដាញអន្ទរកម្ម
+
+Document Object Model (DOM) គឺជាវិធីដែល JavaScript សម្ភាសន៍ជាមួយធាតុ HTML របស់អ្នក។ នៅពេលកម្មវិធីរុករករបស់អ្នកបង្ហាញទំព័រ HTML វាបង្កើតតំណាងរាងច្បាស់លាស់សម្រាប់ទំព័រនោះក្នុងអនុស្សា - នេះគឺជា DOM។ គិតថាវាដូចជារុក្ខជាតួរសាស្រ្តនៅក្នុង គ្រួសារដែលធាតុ HTML មួយចំណាត់ថ្នាក់ជាសមាជិកគ្រួសារ ដែល JavaScript អាចចូលដំណើរការ កែប្រែ ឬរៀបចំឡើងវិញបាន។
+
+ការគ្រប់គ្រង DOM បម្លែងទំព័រជាស្ថិរជាពីតោងទៅជាគេហទំព័រអន្ទរកម្ម។ រាល់ពេលដែលអ្នកឃើញប៊ូតុងប្ដូរពណ៌នៅពេលរុញ ឬមាតិកាអាប់ដេតដោយមិនត្រូវ刷新ទំព័រ ឬធាតុដែលអ្នកអាចទាញ និងដាក់ កំពុងធ្វើការនោះគឺជាការគ្រប់គ្រង DOM។
+
+```mermaid
+flowchart TD
+ A["ឯកសារ"] --> B["HTML"]
+ B --> C["ក្បាល"]
+ B --> D["រាងកាយ"]
+ C --> E["ចំណងជើង"]
+ C --> F["ស្លាកមេតា"]
+ D --> G["H1: ទូទឹកជ្រលក់របស់ខ្ញុំ"]
+ D --> H["Div: ការត្រួតពិនិត្យទំព័រ"]
+ H --> I["Div: ការត្រួតពិនិត្យខាងឆ្វេង"]
+ H --> J["Div: ការត្រួតពិនិត្យខាងស្តាំ"]
+ H --> K["Div: ទូទឹកជ្រលក់"]
+ I --> L["ធាតុរុក្ខជាតិ ១-៧"]
+ J --> M["ធាតុរុក្ខជាតិ ៨-១៤"]
+
+ L --> N["រូបភាព#plant1"]
+ L --> O["រូបភាព#plant2"]
+ M --> P["រូបភាព#plant8"]
+ M --> Q["រូបភាព#plant9"]
+
+ style A fill:#e1f5fe
+ style B fill:#f3e5f5
+ style D fill:#e8f5e8
+ style H fill:#fff3e0
+ style N fill:#ffebee
+ style O fill:#ffebee
+ style P fill:#ffebee
+ style Q fill:#ffebee
+```
+
+
+> តំណាងរបស់ DOM និង HTML markup ដែលយោងវា។ ពី [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+**នេះគឺជាអ្វីដែលធ្វើឲ្យ DOM មានថាមពល៖**
+- **ផ្តល់** វិធីសាស្ត្រច្បាស់លាស់ក្នុងការចូលដល់ធាតុណាមួយនៅលើទំព័ររបស់អ្នក
+- **អនុញ្ញាត** អាប់ដេតមាតិកាសកម្មដោយមិនចាំ刷新ទំព័រ
+- **អនុញ្ញាត** ភាពឆ្លើយតបពេលជាក់លាក់ចំពោះអន្តរកម្មអ្នកប្រើដូចជាការចុច និងការទាញ
+- **បង្កើត** មូលដ្ឋានសម្រាប់កម្មវិធីវេបសាយអន្តរកម្មទាន់សម័យ
+
+## JavaScript Closures៖ បង្កើតកូដបានត្រឹមត្រូវ ហើយមានថាមពល
+
+[JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closures) គឺដូចជាការផ្តល់ផ្ទាំងការងារផ្ទាល់ខ្លួនមុខងារមួយដែលមានអនុស្សាវរីយ៏ដ៏ធន់នូវអនុស្សា។ សូមគិតពីពីរុក្ខជាតិ Darwin ក្នុងកោះ Galápagos ដែលរាល់មិនមានមុនពួកវាបានអភិវឌ្ឍចំហាយបង្គោលជាក់លាក់ទៅតាមបរិយាកាសផ្ទាល់ខ្លួន — closures ក៏ដូចគ្នា ផ្ទុកមុខងារពិសេសដែល“ចាំ”បរិបទផ្ទាល់ខ្លួន របស់ពួកវា ទោះបីមុខងារបាដំបូងបានបញ្ចប់រួចហើយក៏ដោយ។
+
+នៅក្នុង terrarium របស់យើង closures ជួយឲ្យរុក្ខជាតិមួយៗចាំទីតាំងផ្ទាល់ខ្លួនដោយឯករាជ្យ។ បែបបទនេះបង្ហាញឲ្យឃើញក្នុងការអភិវឌ្ឍ JavaScript មុខម៉ាស៊ីនវិជ្ជាជីវៈ ផ្តល់ឱ្យវាជាគំនិតដ៏មានតម្លៃក្នុងការយល់ដឹង។
+
+```mermaid
+flowchart LR
+ A["dragElement(រុក្ខជាតិ1)"] --> B["បង្កើតចំណុចបិទ"]
+ A2["dragElement(រុក្ខជាតិ2)"] --> B2["បង្កើតចំណុចបិទ"]
+
+ B --> C["អថេរឯកជន"]
+ B2 --> C2["អថេរឯកជន"]
+
+ C --> D["pos1, pos2, pos3, pos4"]
+ C --> E["មុខងារ pointerDrag"]
+ C --> F["មុខងារ elementDrag"]
+ C --> G["មុខងារ stopElementDrag"]
+
+ C2 --> D2["pos1, pos2, pos3, pos4"]
+ C2 --> E2["មុខងារ pointerDrag"]
+ C2 --> F2["មុខងារ elementDrag"]
+ C2 --> G2["មុខងារ stopElementDrag"]
+
+ H["រុក្ខជាតិ 1 កាន់តែកាន់ទីតាំងរបស់វា"] --> B
+ H2["រុក្ខជាតិ 2 កាន់តែកាន់ទីតាំងរបស់វា"] --> B2
+
+ style B fill:#e8f5e8
+ style B2 fill:#e8f5e8
+ style C fill:#fff3e0
+ style C2 fill:#fff3e0
+```
+> 💡 **ការយល់ដឹងអំពី Closures**៖ Closures គឺជាបញ្ហាសំខាន់មួយក្នុង JavaScript ហើយអ្នកអភិវឌ្ឍជាច្រើនប្រើពួកវាជាយូរមកហើយមុនពួកគេយល់ពេញលេញពីទ្រឹស្ដីទាំងអស់។ ថ្ងៃនេះយើងផ្ដោតលើការដាក់ពាក្យជាក់ស្តែង - អ្នកនឹងឃើញ closures ប្រែប្រួលធម្មជាតិកើតឡើងពេលយើងបង្កើតមុខងារអន្តរកម្ម។ ការយល់ដឹងនឹងរីកចម្រើននៅពេលអ្នកឃើញពួកវាផ្តល់ដំណោះស្រាយបញ្ហាជាក់ស្តែង។
+
+
+
+> តំណាងរបស់ DOM និង HTML markup ដែលយោងវា។ ពី [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+ក្នុងមេរៀននេះ យើងនឹងបញ្ចប់គម្រោង terrarium អន្តរកម្មដោយបង្កើត JavaScript ដែលនឹងអនុញ្ញាតឲ្យអ្នកប្រើបង្កើតការគ្រប់គ្រងរុក្ខជាតិនៅលើទំព័រ។
+
+## មុននឹងចាប់ផ្តើម៖ រៀបចំឱ្យជោគជ័យ
+
+អ្នកនឹងត្រូវការឯកសារ HTML និង CSS ពីមេរៀន terrarium មុនៗ - យើងនឹងធ្វើឲ្យរចនាសម្ព័ន្ធស្ថិតឆ្នាសក្លាយជាអន្តរកម្ម។ ប្រសិនបើអ្នកចូលរួមជាលើកដំបូង ការសិក្សាទាំងមុននឹងផ្តល់បរិបទសំខាន់។
+
+អ្វីដែលយើងនឹងបង្កើត៖
+- **ការទាញ និងដាក់យ៉ាងទื่นចិត្ត** សម្រាប់រុក្ខជាតិទាំងអស់ក្នុង terrarium
+- **ការតាមដានសមាសភាព** ដើម្បីឲ្យរុក្ខជាតិចាំទីតាំងបាន
+- **ចំណុចប្រទាក់ពេញលេញ** ដោយប្រើ vanilla JavaScript
+- **កូដស្អាត ទៀងទាត់** ដោយប្រើគំរូ closure
+
+## រៀបចំឯកសារ JavaScript របស់អ្នក
+
+មកបង្កើតឯកសារ JavaScript ដែលនឹងធ្វើឲ្យ terrarium របស់អ្នកមានអន្តរកម្ម។
+
+**ជំហានទី 1៖ បង្កើតឯកសារស្ក្រីប**
+
+នៅក្នុងថត terrarium របស់អ្នក បង្កើតឯកសារថ្មីឈ្មោះ `script.js`។
+
+**ជំហានទី 2៖ តភ្ជាប់ JavaScript ជាមួយ HTML របស់អ្នក**
+
+បន្ថែម tag script នេះទៅផ្នែក `` នៃឯកសារ `index.html` របស់អ្នក៖
+
+```html
+
+```
+
+**ហេតុអ្វី `defer` មានសារៈសំខាន់៖**
+- **ធានា** ការ JavaScript របស់អ្នករង់ចាំរហូតដល់ HTML ទាំងអស់បានបញ្ចូល
+- **ជៀសវាង** កំហុសដែល JavaScript ស្វែងរកធាតុដែលមិនទាន់មាន
+- **ធានា** ឲ្យរុក្ខជាតិទាំងអស់មានស្រាប់សម្រាប់អន្តរកម្ម
+- **ផ្តល់** ប្រសិទ្ធភាពល្អជាងការដាក់ script នៅចុងទំព័រ
+
+> ⚠️ **កំណត់ចំណាំសំខាន់**៖ attribute `defer` ជៀសវាងបញ្ហាពេលវេលាទូទៅ។ បើគ្មានវា JavaScript អាចព្យាយាមចូលដល់ធាតុ HTML មុនពេលយកឡើងបង្ករសេចក្តីខុសប្លែក។
+
+---
+
+## ភ្ជាប់ JavaScript ជាមួយធាតុ HTML របស់អ្នក
+
+មុនពេលយើងអាចធ្វើឲ្យធាតុអាចទាញបាន JavaScript ត្រូវការស្វែងរកពួកវាក្នុង DOM។ គិតថាវាដូចជាប្រព័ន្ធសៀវភៅបណ្ដាញ - ពេលអ្នកមានលេខប្រព័ន្ធ អ្នកអាចស្វែងរកសៀវភៅដែលត្រូវការ និងចូលដល់មាតិកាទាំងមូល។
+
+យើងនឹងប្រើវិធីសាស្រ្ត `document.getElementById()` ដើម្បីធ្វើការតភ្ជាប់ទាំងនេះ។ វាដូចជាប្រព័ន្ធដាក់ទ្រង់ទ្រាយច្បាស់លាស់ - អ្នកផ្តល់ ID ហើយវាស្វែងរកធាតុដែលអ្នកត្រូវការ។
+
+### បើកប្រើមុខងារទាញរបស់ធាតុទាំងអស់
+
+បន្ថែមកូដនេះទៅឯកសារ `script.js` របស់អ្នក៖
+
+```javascript
+// បើកមុខងារទាញសម្រាប់រុក្ខជាតិទាំង 14
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+**អ្វីដែលកូដនេះបានធ្វើ៖**
+- **ស្វែងរក** អ្នកតំណាងរុក្ខជាតិមួយចំនួននៅក្នុង DOM ដោយប្រើ ID ផ្ទាល់ខ្លួន
+- **យក** យោង JavaScript ទៅធាតុ HTML មួយៗ
+- **ផ្ញើ** រាល់ធាតុទៅមុខងារ `dragElement` (ដែលយើងនឹងបង្កើតបន្ទាប់)
+- **រៀបចំ** ឲ្យរុក្ខជាតិគ្រប់គ្រងជាមួយការទាញ និងដាក់
+- **ភ្ជាប់** រចនាកម្ម HTML របស់អ្នកទៅមុខងារ JavaScript
+
+> 🎯 **ហេតុអ្វីប្រើ IDs ជំនួស Classes?** IDsផ្ដល់សម្គាល់អត្តសញ្ញាណតែមួយសម្រាប់ធាតុជាក់លាក់ ខណៈ Classes CSS គឺសម្រាប់រចនាទ្រង់ទ្រាយក្រុមធាតុ។ នៅពេល JavaScript ត្រូវការកែប្រែធាតុបុគ្គល ជ្រើសរើស IDs ផ្ដល់ភាពត្រឹមត្រូវ និងប្រសិទិ្ធភាព។
+
+> 💡 **កញ្ចើមជំនាញ**៖ មើលថាយើងកំពុងហៅ `dragElement()` ចំពោះរុក្ខជាតិមួយៗជាបុគ្គល។ វាធានាថា រុក្ខជាតិមួយៗមានឥរិយាបថទាញដោយឯករាជ្យដែលទន់ភ្លន់ សំខាន់សម្រាប់អន្តរកម្មអ្នកប្រើ។
+
+### 🔄 **ពិនិត្យមើលផ្នែកបង្រៀន**
+**ការយល់ដឹងការភ្ជាប់ DOM**៖ មុនពេលផ្លាស់ទៅមុខងារទាញ អ្នកអាច៖
+- ✅ ពន្យល់បាន `document.getElementById()` រកយកធាតុ HTML យ៉ាងដូចម្តេច
+- ✅ យល់ហេតុផលដែលយើងប្រើ IDs ផ្ទាល់ខ្លួនសម្រាប់រុក្ខជាតិមួយៗ
+- ✅ ពិពណ៌នាពីគោលបំណងនៃ attribute `defer` នៅក្នុង script tags
+- ✅ ស្គាល់ថា JavaScript និង HTML ភ្ជាប់គ្នាតាម DOM ដោយរបៀបណា
+
+**សំណួរឆ្លើយខ្លី**៖ តើវាអ្វីដែលកើតឡើងបើធាតុពីរ មាន ID ដូចគ្នា? ហេតុអ្វី `getElementById()` ត្រឡប់តែធាតុមួយតែប៉ុណ្ណោះ?
+*ចម្លើយ៖ IDs ត្រូវតែតែមួយ; ប្រសិនបើចម្លង មួយតែធាតុដំបូងត្រូវបានត្រឡប់*
+
+---
+
+## បង្កើត Closure សម្រាប់ធាតុទាញ
+
+ឥឡូវនេះ យើងនឹងបង្កើតបេះដូងនៃមុខងារទាញ៖ closure ដែលគ្រប់គ្រងអាកប្បកិរិយាទាញពីរុក្ខជាតិមួយៗ។ Closure នឹងមានមុខងារច្រើននៅខាងក្នុង ដែលសហការជាទ្រង់ទ្រាយដើម្បីតាមដានចលនាសាំញ៉ាំ និងអាប់ដេតទីតាំងធាតុ។
+
+Closures សាកសមសម្រាប់ការងារនេះ ព្រោះពួកវាឱ្យយើងបង្កើតអថេរផ្ទាល់ខ្លួន ដែលបន្តមានអានុភាពរវាងការហៅមុខងារ ហើយផ្តល់ឲ្យរុក្ខជាតិមួយៗមានប្រព័ន្ធតាមដានទីតាំងឯករាជ្យ។
+
+### យល់ដឹងអំពី Closures ជាមួយឧទាហរណ៍សាមញ្ញ
+
+អនុញ្ញាតឲ្យខ្ញុំបង្ហាញតែ closures ជាមួយឧទាហរណ៍សាមញ្ញដែលបង្ហាញពីគំនិត៖
+
+```javascript
+function createCounter() {
+ let count = 0; // នេះគឺដូចជាអថេរឯកជន
+
+ function increment() {
+ count++; // ហត្ថលេខារងចាំអថេរខាងក្រៅ
+ return count;
+ }
+
+ return increment; // យើងកំពុងផ្តល់ត្រឡប់មកហត្ថលេខារង
+}
+
+const myCounter = createCounter();
+console.log(myCounter()); // 1
+console.log(myCounter()); // 2
+```
+
+**អ្វីកំពុងកើតឡើងក្នុងគំរូ closure នេះ៖**
+- **បង្កើត** អថេរ `count` ផ្ទាល់ខ្លួន មិនមាននៅក្រៅ closure នេះឡើយ
+- **មុខងារខាងក្នុង** អាចចូលដល់ និងកែប្រែអថេរខាងក្រៅ (តាមដាន closure)
+- **ពេលយើងត្រឡប់** មុខងារខាងក្នុង វាអាចរក្សាទំនាក់ទំនងទៅទិន្នន័យផ្ទាល់ខ្លួននោះ
+- **បើទោះបី** `createCounter()` បានបញ្ចប់ ក៏អថេរ `count` នៅតែមាន និងចាំតម្លៃ
+
+### ហេតុអ្វី Closures សមរម្យសម្រាប់មុខងារទាញ
+
+សម្រាប់ terrarium របស់យើង រុក្ខជាតិមួយៗត្រូវការចាំពីតំណាងទីតាំងបច្ចុប្បន្ន។ Closures ផ្តល់ដំណោះស្រាយល្អបំផុត៖
+
+**អត្ថប្រយោជន៍សំខាន់សម្រាប់គម្រោងរបស់យើង៖**
+- **រក្សា** អថេរទីតាំងផ្ទាល់ខ្លួនសម្រាប់រុក្ខជាតិម្ដងមួយដោយឯករាជ្យ
+- **រក្សាទុក** ទិន្នន័យសមាសភាពរវាងព្រឹត្តិការណ៍ទាញ
+- **ជៀសវាង** ការប្រហែលអថេររវាងធាតុទាញផ្សេងៗ
+- **បង្កើត** រចនាសម្ព័ន្ធកូដស្អាត ទៀងទាត់
+
+> 🎯 **គោលបំណងរៀន**៖ អ្នកមិនចាំបាច់ជាន់ខ្ពស់ទាំងអស់ពី closures ឥឡូវនេះទេ។ ផ្ដោតសំខាន់លើការមើលថាពួកវាជួយរៀបចំ កូដ និងរក្សាស្ថានភាពនៃមុខងារទាញរបស់យើង។
+
+```mermaid
+stateDiagram-v2
+ [*] --> Ready: ទំព័រត្រូវបានផ្ទុក
+ Ready --> DragStart: អ្នកប្រើចុចចុះ (pointerdown)
+ DragStart --> Dragging: កណ្តុរ/ចន្ទ្រាលបានផ្លាស់ទី (pointermove)
+ Dragging --> Dragging: បន្តផ្លាស់ទី
+ Dragging --> DragEnd: អ្នកប្រើដោះចេញ (pointerup)
+ DragEnd --> Ready: កំណត់ចំនុចឡើងវិញសម្រាប់ការទាញបន្ទាប់
+
+ state DragStart {
+ [*] --> CapturePosition
+ CapturePosition --> SetupListeners
+ SetupListeners --> [*]
+ }
+
+ state Dragging {
+ [*] --> CalculateMovement
+ CalculateMovement --> UpdatePosition
+ UpdatePosition --> [*]
+ }
+
+ state DragEnd {
+ [*] --> RemoveListeners
+ RemoveListeners --> CleanupState
+ CleanupState --> [*]
+ }
+```
+### បង្កើតមុខងារ dragElement
+
+ឥឡូវនេះ មកផលិតមុខងារសំខាន់ដែលនឹងគ្រប់គ្រងយុទ្ធសាស្រ្តទាញទាំងមូល។ បន្ថែមមុខងារនេះក្រោម ប្រកាសធាតុរុក្ខជាតិរបស់អ្នក៖
+
+```javascript
+function dragElement(terrariumElement) {
+ // ម៉េចដើម្បីតាមដានទីតាំង
+ let pos1 = 0, // ទីតាំងមូលដ្ឋាន X នៃ mouse មុន
+ pos2 = 0, // ទីតាំងមូលដ្ឋាន Y នៃ mouse មុន
+ pos3 = 0, // ទីតាំងបច្ចុប្បន្ន X នៃ mouse
+ pos4 = 0; // ទីតាំងបច្ចុប្បន្ន Y នៃ mouse
+
+ // កំណត់សកម្មភាពស្ដាប់ព្រឹត្តិការណ៍ចាប់ផ្តើមDrag
+ terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+**យល់ដឹងពីប្រព័ន្ធតាមដានទីតាំង៖**
+- **`pos1` និង `pos2`**៖ រក្សាការប្រវែងចន្លោះរវាងទីតាំងមក និងចេញនៃសំញ៉ាំកណ្តាល
+- **`pos3` និង `pos4`**៖ តាមដានសហវត្សមកបច្ចុប្បន្ន
+- **`terrariumElement`**៖ រុក្ខជាតិជាក់លាក់ដែលយើងចង់អោយអាចទាញបាន
+- **`onpointerdown`**៖ ព្រឹត្តិការណ៍ដែលកើតឡើងពេលអ្នកប្រើចាប់ផ្តើមទាញ
+
+**គំរូ closure ធ្វើការដូចជា៖**
+- **បង្កើត** អថេរទីតាំងផ្ទាល់ខ្លួនសម្រាប់រុក្ខជាតិមួយៗ
+- **រក្សា** អថេរទាំងនេះរវាងរបាយការណ៍ទាញ
+- **ធានា** រុក្ខជាតិមួយៗតាមដានទីតាំងដោយឯករាជ្យ
+- **ផ្តល់** ចំណុចប្រទាក់ស្អាតតាមរយៈមុខងារ `dragElement`
+
+### ហេតុអ្វីប្រើ pointer events?
+
+អ្នកអាចសួរថាហេតុអ្វីយើងប្រើ `onpointerdown` ជំនួស `onclick` ដែលអាចស្គាល់ល្អជាង។ សូមមើលហេតុផល៖
+
+| ប្រភេទព្រឹត្តិការណ៍ | សាកសមសម្រាប់ | ខ្សែសង្វាក់ |
+|-------------|--------------|-----------------|
+| `onclick` | ចុចប៊ូតុងសាមញ្ញ | មិនត្រួតពិនិត្យការទាញ (គ្រាន់តែចុច និងដោះចុច) |
+| `onpointerdown` | ទាំងម៉ៅស៍ និងចុចប៉ុង | ថ្មី ប៉ុន្តែគាំទ្រល្អសព្វថ្ងៃ |
+| `onmousedown` | ម៉ៅស៍លើកុំព្យូទ័រតែមួយ | មិនគ្របដណ្តប់អ្នកប្រើម៉ូបាយ |
+
+**ហេតុអ្វី pointer events សមរម្យសម្រាប់អ្វីយើងកំពុងបង្កើត៖**
+- **ដំណើរការល្អ** មិនថាអ្នកប្រើម៉ៅស៍ ឬនឹងដៃ ឬជាប៊ិចសរសេរ
+- **មានអារម្មណ៍ដូចគ្នា** លើកុំព្យូទ័រ តុប្លេត ឬទូរស័ព្ទ
+- **គ្រប់គ្រង** ចលនាទាញពិត (មិនត្រឹមតែចុចអីចុចទេ)
+- **ផ្តល់** បទពិសោធពីរមុខងារមានភាពរលូនដែលអ្នកប្រើរង់ចាំពីកម្មវិធីទំនើប
+
+> 💡 **ការពារអនាគត**៖ Pointer events ជាវិធីទំនើបសម្រាប់គ្រប់គ្រងអន្តរកម្ម។ មិនចាំបាច់សរសេរកូដផ្សេងគ្នាសម្រាប់ម៉ៅស៍ និងទស្សនកិច្ចទេ ទទួលបានទាំងពីរបញ្ជ្រាប។
+
+### 🔄 **ពិនិត្យមើលផ្នែកបង្រៀន**
+**ការយល់ដឹងពីការគ្រប់គ្រងព្រឹត្តិការណ៍**៖ ឈប់ផ្លាស់ផ្តួចផ្លាស់ផ្តើមដើម្បីបញ្ជាក់ភាពយល់ដឹង៖
+- ✅ ហេតុអ្វីយើងប្រើ pointer events ផ្ទាល់ម្ដងទៀត មិនប្រើ mouse events?
+- ✅ អថេរ closure រក្សាទុករវាងហៅមុខងារបែបណា?
+- ✅ តើយ៉ាងដូចម្តេច `preventDefault()` ជួយឲ្យទាញរលូន?
+- ✅ ហេតុអ្វីយើងភ្ជាប់ event listeners ទៅឯកសារម៉្យាង មិនមែនធាតុឯកាក់ៗ?
+
+**ភ្ជាប់ជាមួយពិភពពិត**៖ សូមគិតពីផ្ទាំងទាញ និងដាក់ដែលអ្នកប្រើជាប្រចាំ៖
+- **ផ្ទុកឯកសារ**៖ ទាញឯកសារចូលក្នុងកម្មវិធីរុករក
+- **ក្រឡាចត្រង្គ Kanban**៖ ផ្លាស់ប្តូរគំនិតរវាងជួរផ្សេងៗ
+- **ភាពយន្តពិព័រណ៍**៖ រៀបចំលំដាប់រូបថត
+- **ចំណុចប្រទាក់ម៉ូបាយ**៖ កន្រ្តក់ និងទាញលើអេក្រង់ប៉ះ
+
+---
+
+## មុខងារ pointerDrag៖ ចាប់ផ្តើមការទាញ
+
+ពេលអ្នកប្រើចុចលើរុក្ខជាតិ (ជាមួយម៉ៅស៍ ឬដៃប៉ះ) មុខងារ `pointerDrag` ត្រូវបញ្ចាប់ចលនា។ មុខងារនេះយកទីតាំងដើមទាញ និងរៀបចំប្រព័ន្ធទាញ។
+
+បន្ថែមមុខងារនេះនៅក្នុង closure `dragElement` របស់អ្នក បន្ទាប់ពីបន្ទាត់ `terrariumElement.onpointerdown = pointerDrag;`៖
+
+```javascript
+function pointerDrag(e) {
+ // បម្រាមអាកប្បកិរិយាមូលដ្ឋានរបស់កម្មវិធីរុករក (ដូចជាការជ្រើសអត្ថបទ)
+ e.preventDefault();
+
+ // ចាប់អាសយដ្ឋានកំណត់កណ្តាលកណ្តាប់ мышឬប៉ះ
+ pos3 = e.clientX; // អ័ក្ស X កន្លែងចាប់ផ្តើមការជ្រុះ
+ pos4 = e.clientY; // អ័ក្ស Y កន្លែងចាប់ផ្តើមការជ្រុះ
+
+ // កំណត់អ្នកស្តាប់ព្រឹត្តិការណ៍សម្រាប់ដំណើរការជ្រុះ
+ document.onpointermove = elementDrag;
+ document.onpointerup = stopElementDrag;
+}
+```
+
+**ជាដំណាក់កាលៗ វាធ្វើអ្វីខ្លះ៖**
+- **បញ្ឈប់** អាកប្បកិរិយាមូលដ្ឋានរបស់កម្មវិធីរុករកដែលអាចរំខានការទាញ
+- **កត់ត្រា** ទីតាំងចាប់ផ្តើមនៃរូបមនុស្សអ្នកប្រើ
+- **បង្កើត** អ្នកស្ដាប់ព្រឹត្តិការណ៍ចលនាទាញបន្ត
+- **រៀបចំ** ប្រព័ន្ធតាមដានចលនាមៅស៍/ដៃទាំងមូលឯកសារ
+
+### យល់ដឹងអំពីការទប់ស្កាត់ព្រឹត្តិការណ៍
+
+បន្ទាត់ `e.preventDefault()` ខ្លាំងណាស់សម្រាប់ការទាញរលូន៖
+
+**បើមិនទប់ស្កាត់ ព្រឹត្តិការណ៍រុករកអាច៖**
+- **ជ្រើសរើស** ខ្សែអក្សរពេលដង្ហើមគេច្រើនទំព័រ
+- **បង្ហាញ** មឺនុយបរិបទពេលចុចស្ដាំ
+- **ចុះបរាជ័យ** បុគ្គលិកលេខខាងការទាញផ្ទាល់ខ្លួន
+- **បង្ហាញ** បញ្ហាទម្រង់ពេលប្រតិបត្តិការទាញ
+
+> 🔍 **សាកល្បង**៖ បន្ទាប់ពីបញ្ចប់មេរៀននេះ សូមព្យាយាមដោះបញ្ចេញ `e.preventDefault()` ហើយមើលថាវាធ្វើឲ្យបទពិសោធន៍ទាញរបស់អ្នកផ្លាស់ប្ដូរយ៉ាងដូចម្តេច។ អ្នកនឹងយល់បានយ៉ាងឆាប់រហ័សហេតុផលនៃបន្ទាត់នេះ។
+
+### ប្រព័ន្ធតាមដានសមាសភាព
+
+គូផ្សំ `e.clientX` និង `e.clientY` ផ្តល់សមាសភាពម៉ៅស៍/ប៉ះនៃទីតាំងច្បាស់លាស់៖
+
+| សម្បត្តិ | អ្វីដែលវាវាស់ | ករណីប្រើប្រាស់ |
+|----------|-----------------|-----------------|
+| `clientX` | ទីតាំងផ្លូវដែកទទឹងទាក់ទិនរហែមើល | តាមដានចលនាបង្វិលឆ្វេង-ស្តាំ |
+| `clientY` | ទីតាំងផ្លូវដែកកម្ពស់ទាក់ទិនរហែមើល | តាមដានចលនាឡើង-ចុះ |
+- **ផ្តល់** ព័ត៌មានកំណត់ទីតាំងពិចខែលបានយ៉ាងច្បាស់លាស់
+- **ធ្វើបច្ចុប្បន្នភាព** នៅពេលពេលវេលាពិតទាំងអស់ជាមួយការរីកចម្រើនរបស់អ្នកប្រើ
+- **នៅតែម្យ៉ាងត្រួតត្រា** នៅលើទំហំអេក្រង់នានា និងកម្រិតសម្រុងជាបន្តបន្ទាប់
+- **អនុញ្ញាត** ការចលនាប្រតិកម្មរលូន និងឆ្លើយតបបានយ៉ាងលឿន
+
+### ការតំឡើងអ្នកស្ដាប់ព្រឹត្តិការណ៍នៅកម្រិតឯកសារ
+
+ចំណាំពីរបៀបយើងភ្ជាប់ព្រឹត្តិការណ៍ចលនានិងបញ្ឈប់ទៅឯកសារទាំងមូល `document` មិនមែនតែធាតុរុក្ខជាតិទេ៖
+
+```javascript
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+**ហេតុអ្វីបានភ្ជាប់ទៅឯកសារ:**
+- **បន្ត** តាមដានទោះបីជា មាន់កណ្តាប់ដៃខ្លាចចេញពីធាតុរុក្ខជាតិ
+- **បង្ការបញ្ហា** ការបំបែកចលនាពីពេលអ្នកប្រើផ្លាស់ទីយ៉ាងលឿន
+- **ផ្តល់** ចលនារលូនសង្វាក់នៅលើអេក្រង់ទាំងមូល
+- **ដោះស្រាយ** ប្រការព្រួយបារម្ភនៅពេលកណ្តាប់ដៃចុះក្រៅប្រអប់កម្មវិធីរកមើលវេបសាយ
+
+> ⚡ **កំណត់សម្គាល់មុខងារ**: យើងនឹងសម្អាតអ្នកស្ដាប់ព្រឹត្តិការណ៍កម្រិតឯកសារទាំងនេះនៅពេលចលនាបញ្ឈប់ ដើម្បីជៀសវាងការចំណាយអង្គចងចាំ និងបញ្ហាមុខងារ។
+
+## បញ្ចប់ប្រព័ន្ធចាប់ទម្លាក់៖ ចលនា និងការសម្អាត
+
+ឥឡូវនេះយើងនឹងបន្ថែមមុខងារចុងក្រោយទាំងពីរដែលដំណើរការចលនាចាប់ទម្លាក់ពិតៗ និងសម្អាតពេលចាប់ទម្លាក់បញ្ឈប់។ មុខងារទាំងនេះរួមគ្នាបង្កើតចលនារលូន និងឆ្លើយតបទាន់ពេលវេលា នៃរុក្ខជាតិរបស់អ្នកនៅលើទេរេរីរម៉ិន។
+
+### មុខងារ elementDrag: តាមដានចលនា
+
+បន្ថែមមុខងារ `elementDrag` បន្ទាប់ពីសញ្ញាខ្ចីធាត់បិទរបស់ `pointerDrag`៖
+
+```javascript
+function elementDrag(e) {
+ // គណនាចម្ងាយដែលបានផ្លាស់ទីចាប់តាំងពីព្រឹត្តិការណ៍ចុងក្រោយ
+ pos1 = pos3 - e.clientX; // ចម្ងាយផ្លូវដេកដែលបានផ្លាស់ទី
+ pos2 = pos4 - e.clientY; // ចម្ងាយផ្លូវបញ្ឈរដែលបានផ្លាស់ទី
+
+ // កែប្រែតាមដានទីតាំងបច្ចុប្បន្ន
+ pos3 = e.clientX; // ទីតាំង X បច្ចុប្បន្នថ្មី
+ pos4 = e.clientY; // ទីតាំង Y បច្ចុប្បន្នថ្មី
+
+ // អនុវត្តចល័តទៅកាន់ទីតាំងធាតុ
+ terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+ terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
+
+**ការយល់ដឹងអំពីគណិតវិទ្យាកូអរដោនេ:**
+- **`pos1` និង `pos2`**៖ គណនាពីចម្ងាយដែលកណ្តាប់ដៃបានផ្លាស់ទីចាប់តាំងពីបច្ចុប្បន្នភាពចុងក្រោយ
+- **`pos3` និង `pos4`**៖ ទុកទីតាំងកណ្តាប់ដៃបច្ចុប្បន្នសម្រាប់គណនាថ្មី
+- **`offsetTop` និង `offsetLeft`**៖ ទទួលទីតាំងបច្ចុប្បន្ននៃធាតុនៅលើទំព័រ
+- **តុល្យភាពដកស្រង់**៖ ផ្លាស់ទីធាតុដោយចំនួនដូចនឹងកំណត់ចលនាកណ្តាប់ដៃ
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Mouse
+ participant JavaScript
+ participant Plant
+
+ User->>Mouse: ចាប់ផ្តើមអូសនៅ (100, 50)
+ Mouse->>JavaScript: ព្រឹត្តិការណ៍ pointerdown
+ JavaScript->>JavaScript: ផ្ទុកទីតាំងដើម (pos3=100, pos4=50)
+ JavaScript->>JavaScript: កំណត់អ្នកស្តាប់ចលនា/លែងកាន់
+
+ User->>Mouse: ធ្វើចលនា ទៅ (110, 60)
+ Mouse->>JavaScript: ព្រឹត្តិការណ៍ pointermove
+ JavaScript->>JavaScript: គណនា: pos1=10, pos2=10
+ JavaScript->>Plant: បន្ទាប់បន្ថែម: left += 10px, top += 10px
+ Plant->>Plant: បង្ហាញនៅទីតាំងថ្មី
+
+ User->>Mouse: ថប់នាយនៅ (120, 65)
+ Mouse->>JavaScript: ព្រឹត្តិការណ៍ pointerup
+ JavaScript->>JavaScript: ដកអ្នកស្តាប់
+ JavaScript->>JavaScript: កំណត់ឡើងវិញសម្រាប់ការអូសបន្ទាប់
+```
+**នេះជាការបំបែកគណនាចលនា៖**
+1. **វាស់** បម្រែបម្រួលរវាងទីតាំងកណ្តាប់ដៃចាស់និងថ្មី
+2. **គណនា** ចំនួនផ្លាស់ទីរបស់ធាតុដោយផ្អែកលើចលនាកណ្តាប់ដៃ
+3. **ធ្វើបច្ចុប្បន្នភាព** គុណលក្ខណ៍ CSS នៃទីតាំងធាតុនៅពេលពិត
+4. **រក្សាទុក** ទីតាំងថ្មីជាការចាប់ផ្តើមសម្រាប់ការគណនាចលនាថ្មី
+
+### ការបង្ហាញផ្ទាំងវិចិត្រសិល្បៈនៃគណិតវិទ្យា
+
+```mermaid
+sequenceDiagram
+ participant Mouse
+ participant JavaScript
+ participant Plant
+
+ Mouse->>JavaScript: ធ្វើចលនាពី (100,50) ទៅ (110,60)
+ JavaScript->>JavaScript: គណនា៖ ធ្វើចលនា 10px ទៅស្ដាំ, 10px ទៅក្រោម
+ JavaScript->>Plant: បន្ទាន់សម័យទីតាំងដោយ +10px ទៅស្ដាំ, +10px ទៅក្រោម
+ Plant->>Plant: មើលបង្ហាញនៅនៅទីតាំងថ្មី
+```
+### មុខងារ stopElementDrag: ការសម្អាត
+
+បន្ថែមមុខងារសម្អាតបន្ទាប់ពីសញ្ញាខ្ចីធាត់បិទរបស់ `elementDrag`៖
+
+```javascript
+function stopElementDrag() {
+ // ទំនួញអ្នកស្ដាប់ព្រឹត្តិប័ត្រថ្នាក់ឯកសារ
+ document.onpointerup = null;
+ document.onpointermove = null;
+}
+```
+
+**ហេតុអ្វីសម្អាតគឺសំខាន់:**
+- **បញ្ឈប់** ការជម្រាបអង្គចងចាំពីអ្នកស្ដាប់ព្រឹត្តិការណ៍នៅក្រោយ
+- **បញ្ឈប់** អាកប្បកិរិយាចាប់ទម្លាក់ទៅពេលអ្នកប្រើដោះវា
+- **អនុញ្ញាត** ឲ្យធាតុផ្សេងទៀតអាចចាប់ទម្លាក់ដោយឡែក
+- **កំណត់ស្ថានភាព** សម្រាប់ប្រតិបត្តិការចាប់ទម្លាក់លើកក្រោយ
+
+**អ្វីដែលកើតជាមួយបញ្ហាបំផុតក្រោយគ្មានការសម្អាត:**
+- អ្នកស្ដាប់ព្រឹត្តិការណ៍បន្តដំណើរការទោះបីចាប់ទម្លាក់ទៅហើយ
+- មុខងារព្រួយបារម្ភត្រូវកើតឡើងព្រោះអ្នកស្តាប់មិនបានដក
+- អាកប្បកិរិយាមិនបានរំពឹងទុកនៅពេលរៀបចំការបន្តផ្សេងទៀត
+- ការចំណាយធនធានកម្មវិធីរកមើលវេបសាយមានច្រើនលើការគ្រប់គ្រងព្រឹត្តិការណ៍មិនចាំបាច់
+
+### ការយល់ដឹងអំពីគុណលក្ខណ៍ CSS ទីតាំង
+
+ប្រព័ន្ធចាប់ទម្លាក់របស់យើងគ្រប់គ្រងគុណលក្ខណ៍ CSS សំខាន់ពីរមាន៖
+
+| គុណលក្ខណ៍ | អ្វីដែលវាគ្រប់គ្រង | របៀបប្រើប្រាស់ |
+|----------|------------------|---------------|
+| `top` | ចម្ងាយពីមូលដ្ឋានខាងលើ | កំណត់ទីតាំងឈរ ក្នុងអំឡុងចាប់ទម្លាក់ |
+| `left` | ចម្ងាយពីមូលដ្ឋានខាងឆ្វេង | កំណត់ទីតាំង ឈរ តាមទិសទ្រង់ទ្រាយ |
+
+**ចំណុចសំខាន់អំពីគុណលក្ខណ៍ offset:**
+- **`offsetTop`**៖ ចម្ងាយបច្ចុប្បន្នពីខាងលើនៃធាតុឪពុកដែលបានកំណត់
+- **`offsetLeft`**៖ ចម្ងាយបច្ចុប្បន្នពីខាងឆ្វេងនៃធាតុឪពុកដែលបានកំណត់
+- **បរិបទកំណត់ទីតាំង**៖ តម្លៃទាំងនេះគឺជាទំនាក់ទំនងទៅថ្មើរជាប់ឪពុកដែលមានទីតាំងកំណត់ជិតបំផុត
+- **ការធ្វើបច្ចុប្បន្នភាពពេលពិត**៖ ប្ដូរឡើងវិញភ្លាមពេលយើងផ្លាស់ប្តូរកុំនលក្ខណ៍ CSS
+
+> 🎯 **ទស្សនវិជ្ជានៃការរចនា**: ប្រព័ន្ធចាប់ទម្លាក់នេះត្រូវបានរចនាឡើងយ៉ាងបត់បែន—គ្មាន "តំបន់ទម្លាក់" ឬការកំណត់។ អ្នកប្រើអាចដាក់រុក្ខជាតិទៅកន្លែងណាមួយដោយមានការគ្រប់គ្រងគំនិតប្លែកៗលើការរចនាទេរេរីរម៉ិន។
+
+## រួមបញ្ចូលគ្នា៖ ប្រព័ន្ធចាប់ទម្លាក់របស់អ្នកពេញលេញ
+
+អបអរសាទរ! អ្នកទើបតែបង្កើតប្រព័ន្ធចាប់ទម្លាក់ដែលមានភាពស្មុគស្មាញមួយដោយប្រើ vanilla JavaScript។ មុខងារ `dragElement` របស់អ្នកឥឡូវមានបិទបញ្ជូនមួយរាប់អានមុខងារដែលគ្រប់គ្រង៖
+
+**អ្វីដែលបិទបញ្ជូនរបស់អ្នកធ្វើបាន៖**
+- **រក្សា** អថេរកន្លែងឯកជនសម្រាប់រាល់រុក្ខជាតិយ៉ាងឯករាជ្យ
+- **គ្រប់គ្រង** សុវត្ថិភាពចាប់ទម្លាក់ចាប់ពីចំណុចចាប់ផ្តើមដល់ចប់
+- **ផ្តល់** ចលនារលូន និងឆ្លើយតបលឿននៅលើអេក្រង់ទាំងមូល
+- **សម្អាត** ធនធានយ៉ាងត្រឹមត្រូវ ដើម្បីជៀសវាងការចំណាយអង្គចងចាំ
+- **បង្កើត** មុខងារយោគយល់ងាយស្រួល និងនិម្មិតសម្រាប់ការរចនាទេរេរីរម៉ិន
+
+### សាកល្បងទេរេរីរម៉ិនបង្កើតដោយអ្នក
+
+ឥឡូវនេះសាកល្បងទេរេរីរម៉ិនបង្កើតដោយអ្នក! បើកឯកសារ `index.html` នៅក្នុងកម្មវិធីរកមើលវេបសាយ ហើយសាកល្បងមុខងារ៖
+
+1. **ចុចហើយកាន់** រុក្ខជាតិណាមួយដើម្បីចាប់ផ្តើមចាប់ទម្លាក់
+2. **ផ្លាស់ទីកណ្តាប់ដៃឬម្រាមដៃ** ហើយមើលរុក្ខជាតិអនុវត្តយ៉ាងរលូន
+3. **បោះចោល** ដើម្បីទម្លាក់រុក្ខជាតិទៅទីតាំងថ្មី
+4. **សាកល្បង** ជាមួយការរៀបចំផ្សេងៗដើម្បីស្វែងយល់ពីផ្ទាំងផ្ទាល់ខ្លួន
+
+🥇 **សមិទ្ធផល**: អ្នកបានបង្កើតកម្មវិធីវេបអ៊ីនធើរ៉ាក់ទីវមួយដោយប្រើគំនិតស្នូលដែលអ្នកអភិវឌ្ឍជំនាញប្រើរៀងរាល់ថ្ងៃ។ មុខងារចាប់ទម្លាក់ទាក់ទងទៅនឹងគោលការណ៍ដូចគ្នានៃការផ្ទុកឯកសារ ការគ្រប់គ្រងទិន្នន័យ Kanban Board និងផ្ទាំងអ៊ីនធើរ៉ាក់ទីវផ្សេងៗទៀត។
+
+### 🔄 **ការត្រួតពិនិត្យវិជ្ជាសាស្ត្រ**
+**ការយល់ដឹងប្រព័ន្ធពេញលេញ**៖ បញ្ជាក់ពីការប្រើប្រាស់មុខងារបិទបញ្ជូនដ៏ពេញលេញរបស់អ្នក៖
+- ✅ តើបិទបញ្ជូនរក្សាទុកស្ថានភាពឯករាជ្យសម្រាប់រាល់រុក្ខជាតិតូចម៉េច?
+- ✅ ហេតុអ្វីគណនាគូរដោនេត្រូវការសំរាប់ចលនារលូន?
+- ✅ តើអ្វីជាការកើតមានបើយើងភ្លេចសម្អាតអ្នកស្ដាប់ព្រឹត្តិការណ៍?
+- ✅ តើគំរូនេះអាចពង្រីកទៅប្រតិកម្មស្មុគស្មាញជាងនេះដូចម្តេច?
+
+**ការប្រើប្រាស់គុណភាពកូដ**៖ ពិនិត្យដំណោះស្រាយពេញលេញរបស់អ្នក៖
+- **រចនាម៉ូឌុល**៖ រាល់រុក្ខជាតិទទួលបានបិទបញ្ជូនផ្ទាល់ខ្លួន
+- **ប្រសិទ្ធភាពព្រឹត្តិការណ៍**៖ ការតំឡើង និងសម្អាតអ្នកស្ដាប់សមរម្យ
+- **គាំទ្រឧបករណ៍ចម្រុះ**៖ ធ្វើការ លើវិបកុំព្យូទ័រនិងទូរស័ព្ទ
+- **ចំណាយមុខងារ**៖ គ្មានការបាត់បង់អង្គចងចាំ ឬការគណនាចម្រូងចម្រាស់
+
+
+
+---
+
+## ការប្រកួតប្រជែង GitHub Copilot Agent 🚀
+
+ប្រើរបៀបAgent ដើម្បីបំពេញការប្រកួតប្រជែងដូចខាងក្រោម៖
+
+**ការពិពណ៌នា**៖ ពង្រីកគម្រោងទេរេរីរម៉ិនដោយបន្ថែមមុខងារកំណត់ឡើងវិញដែលនាំឲ្យរុក្ខជាតិទាំងអស់ត្រឡប់ទៅទីតាំងដើមដោយមានចលនារលូន។
+
+**បម្រុង**៖ បង្កើតប៊ូតុងកំណត់ឡើងវិញដែលនៅពេលចុច នឹងធ្វើអង់មេស្យុងឲ្យរុក្ខជាតិទាំងអស់ត្រឡប់ទៅទីតាំងផ្នែកបន្ទាត់ជាមួយការផ្លាស់ប្តូរលម្អៀង CSS។ មុខងារនេះគួរតែរក្សាទុកទីតាំងដើមនៅពេលទំព័រត្រូវបានផ្ទុក ហើយបំលែងរុក្ខជាតិវិញទៅទីតាំងនោះយ៉ាងរលូនរំកិលក្នុងរយៈពេល ១ វិនាទីពេលបានចុចប៊ូតុងកំណត់ឡើងវិញ។
+
+សូមស្វែងយល់បន្ថែមអំពី [របៀបAgent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) នៅទីនេះ។
+
+## 🚀 ការប្រកួតអប្សរៈបន្ថែម៖ ពង្រីកជំនាញរបស់អ្នក
+
+ត្រៀមខ្លួនត្រៀមទទួលទេរេរីរម៉ិនរបស់អ្នកទៅកម្រិតបន្ទាប់? សាកល្បងដំណើរការកែលម្អទាំងនេះ៖
+
+**ការពង្រីកបែបបញ្ចូលគ្នា:**
+- **ចុចពីរជាន់ឡើងលើ** រុក្ខជាតិ ដើម្បីនាំវាទៅមុខ (ការគ្រប់គ្រង z-index)
+- **បន្ថែមមតិយោបល់ភ្នែក** ដូចជាភ្លឺយាយមួយបន្តិចនៅពេលបង្ហាញលើរុក្ខជាតិ
+- **អនុវត្តការបង្កប់ដែនកំណត់** ដើម្បីមិនឲ្យរុក្ខជាតិចាប់ទម្លាក់ទៅក្រៅទេរេរីរម៉ិន
+- **បង្កើតមុខងាររក្សាទុក** ដែលចងចាំទីតាំងរុក្ខជាតិដោយផ្អែកលើ localStorage
+- **បន្ថែមសម្លេង** សម្រាប់ការលើក និងដាក់រុក្ខជាតិ
+
+> 💡 **ឱកាសរៀន**: ការប្រកួតប្រជែងទាំងនេះនឹងបង្រៀនអ្នកពីចំណុចថ្មីៗនៃការកែលម្អ DOM ការគ្រប់គ្រងព្រឹត្តិការណ៍ និងការរចនាបទពិសោធន៍អ្នកប្រើ។
+
+## សំនួរប្រលងខាងក្រោយថ្នាក់
+
+[សំនួរប្រលងបន្ទាប់ថ្នាក់](https://ff-quizzes.netlify.app/web/quiz/20)
+
+## ពិនិត្យមើល និងរៀនដោយខ្លួនឯង៖ ការផ្លាស់ប្តូរជ្រាលជ្រៅក្នុងការយល់ដឹងរបស់អ្នក
+
+អ្នកបានចេះដឹងមូលដ្ឋានរបស់ DOM manipulation និង closures តែមានតែងតែមានអ្វីខ្លះសម្រាប់ស្វែងយល់បន្ថែម! ខាងក្រោមជាចំណុចណែនាំសម្រាប់ពង្រីកចំណេះដឹង និងជំនាញរបស់អ្នក។
+
+### វិធីសាស្ត្រចាប់ទម្លាក់ទម្លាក់ជាជម្រើសផ្សេងៗ
+
+យើងបានប្រើ pointer events ដើម្បីមានភាពបត់បែនខ្ពស់បំផុត ប៉ុន្តែមូលដ្ឋានបណ្តាញមានជម្រើសជាច្រើន៖
+
+| វិធីសាស្ត្រ | សមស្របសម្រាប់ | តម្លៃរៀនសូត្រ |
+|----------|----------|----------------|
+| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | ផ្ទុកឯកសារ និងតំបន់ចាប់ទម្លាក់ផ្លូវការហ្នឹង | ការយល់ដឹងសមត្ថភាពម៉ាស៊ីនរកមើលវេបសាយដើម |
+| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | ប្រតិកម្មជាក់លាក់លើទូរស័ព្ទចល័ត | គំរូអភិវឌ្ឍន៍ផ្អែកលើទូរស័ព្ទជាដំបូង |
+| គុណលក្ខណ៍ CSS `transform` | អាំងមេស្យុងរលូន | បច្ចេកទេសបង្កើនប្រសិទ្ធភាព |
+
+### ប្រធានបទកម្រិតខ្ពស់នៃ DOM Manipulation
+
+**ជំហានបន្ទាប់ក្នុងដំណើររបស់អ្នក៖**
+- **ការបញ្ជូនព្រឹត្តិការណ៍**: គ្រប់គ្រងព្រឹត្តិការណ៍ឲ្យមានប្រសិទ្ធភាពសម្រាប់ធាតុជាច្រើន
+- **Intersection Observer**: សម្គាល់ពេលធាតុចូល/ចេញពីកន្លែងបង្ហាញ
+- **Mutation Observer**: មើលការផ្លាស់ប្ដូរនៅទំរង់ DOM
+- **គ្រឿងបន្លាស់វេប**: បង្កើត UI ប្រើឡើងវិញដែលមានបិទបញ្ជូន
+- **គំនិត Virtual DOM**: យល់ពីលទ្ធកម្មដែល frameworks ប្រើសម្រាប់បន្ទាន់សម័យ DOM
+
+### ឯកសារសំខាន់សម្រាប់បន្តរៀន
+
+**ឯកសារបច្ចេកទេស:**
+- [MDN Pointer Events Guide](https://developer.mozilla.org/docs/Web/API/Pointer_events) - ឯកសារយោងព្រឹត្តិការណ៍ pointer
+- [W3C Pointer Events Specification](https://www.w3.org/TR/pointerevents1/) - ឯកសារតំរូវការផ្លូវការ
+- [JavaScript Closures Deep Dive](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - គំរូកម្រិតខ្ពស់នៅលើ closures
+
+**ការគាំទ្រព្រមទាំងកម្មវិធីរកមើល:**
+- [CanIUse.com](https://caniuse.com/) - ប្រៀបធៀបទៅនឹងគ្រប់កម្មវិធីរកមើល
+- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - ពត៌មានលម្អិតរួម
+
+**ឱកាសហាត់ប្រាណ:**
+- **បង្កើត** ល្បែង puzzle ដោយប្រើចលនាចាប់ទម្លាក់
+- **បង្កើត** បញ្ជីការងារ Kanban ជាមួយការគ្រប់គ្រងតាមការចាប់ទម្លាក់
+- **រចនា** ផ្ទះរូបភាពជាមួយការរៀបចំរូបភាពដែលអាចចាប់ទម្លាក់បាន
+- **សាកល្បង** ការចលនាពីស្នាដៃពាក់កណ្តាប់ដៃសម្រាប់ផ្ទាំងទូរស័ព្ទចល័ត
+
+> 🎯 **យុទ្ធសាស្ត្ររៀន**: វិធីល្អបំផុតក្នុងការចងក្រងចំណេះដឹងទាំងនេះគឺតាមរយៈការអនុវត្ត។ សាកល្បងបង្កើតរូបមន្តរូបភាពចាប់ទម្លាក់នានា – រាល់គំរោងនឹងបង្រៀនអ្នកអំពីប្រតិកម្មអ្នកប្រើ និង DOM manipulation។
+
+### ⚡ **អ្វីដែលអ្នកអាចធ្វើបានក្នុង ៥ នាទីបន្ទាប់**
+- [ ] បើក DevTools កម្មវិធីរកមើល ហើយវាយ `document.querySelector('body')` ក្នុង console
+- [ ] ព្យាយាមផ្លាស់ប្ដូរអត្ថបទក្នុងគេហទំព័រដោយប្រើ `innerHTML` ឬ `textContent`
+- [ ] បន្ថែមអ្នកស្ដាប់ព្រឹត្តិការណ៍ចុចទៅកាន់ប៊ូតុងឬតំណភ្ជាប់ណាមួយលើគេហទំព័រ
+- [ ] ពិនិត្យរចនាសម្ព័ន្ធ DOM tree ដោយប្រើផ្ទាំង Elements
+
+### 🎯 **អ្វីដែលអ្នកអាចបំពេញបានក្នុងមួយម៉ោងនេះ**
+- [ ] បញ្ចប់សំនួរប្រលងបន្ទាប់ថ្នាក់ និងពិនិត្យមើលគំនិត DOM manipulation
+- [ ] បង្កើតគេហទំព័រអ៊ីនធើរ៉ាក់ទីវដែលឆ្លើយតបចំពោះការចុចអ្នកប្រើ
+- [ ] ហាត់ការគ្រប់គ្រងព្រឹត្តិការណ៍ជាមួយវ៉ារ្យប៊ុលព្រឹត្តិការណ៍ផ្សេងៗ (ចុច, រុំលើ, ចុចក្តារចុច)
+- [ ] បង្កើតបញ្ជីធ្វើការ ឬម៉ាស៊ីនរាប់កំណត់ដោយប្រើ DOM manipulation
+- [ ] ស្វែងយល់ទំនាក់ទំនងរវាងធាតុ HTML និងអ объект Javascript
+
+### 📅 **ដំណើរការជាមួយ JavaScript រយៈពេលមួយសប្ដាហ៍**
+- [ ] បំពេញគម្រោងទេរេរីរម៉ិនអ៊ីនធើរ៉ាក់ទីវជាមួយមុខងារចាប់ទម្លាក់
+- [ ] ចេះឱ្យបានជំនាញការបញ្ជូនព្រឹត្តិការណ៍ផ្នែកមានប្រសិទ្ធភាព
+- [ ] រៀនអំពី event loop និង JavaScript មិនសូវជ្រាបដល់
+- [ ] ហាត់ការបិទបញ្ជូនដោយបង្កើតម៉ូឌុលដែលមានស្ថានភាពឯកជន
+- [ ] ស្វែងយល់ពី API DOM របស់សម័យថ្មីៗដូចជា Intersection Observer
+- [ ] បង្កើតធាតុអ៊ីនធើរ៉ាក់ទីវដោយគ្មាន frameworks
+
+### 🌟 **ជំនាញ JavaScript រយៈពេលមួយខែរបស់អ្នក**
+- [ ] បង្កើតកម្មវិធីទំព័រតែមួយស្មុគស្មាញដោយប្រើ vanilla JavaScript
+- [ ] រៀន frameworks សម័យថ្មី (React, Vue, ឬ Angular) ហើយប្រៀបធៀបជាមួយ DOM vanilla
+- [ ] ចូលរួមគម្រោង open source JavaScript
+- [ ] ចេះគំនិតកម្រិតខ្ពស់ដូចជា web components និង custom elements
+- [ ] បង្កើតកម្មវិធីវេបមានប្រសិទ្ធភាពដោយគំរូ DOM អុបទិម
+- [ ] បង្រៀនអ្នកផ្សេងទៀតអំពី DOM manipulation និងគំនិតមូលដ្ឋាន JavaScript
+
+## 🎯 រយៈពេលសម្រាំងជំហានជំនាញ DOM JavaScript របស់អ្នក
+
+```mermaid
+timeline
+ title ជម្រើសការសិក្សា DOM & JavaScript
+
+ section មូលដ្ឋាន (15 នាទី)
+ DOM ការយល់ដឹង៖ វិធីជ្រើសរើសធាតុ
+ : ការនាវីហ្គេតរចនាសម្ព័ន្ធដើមឈើ
+ : លំនាំការចូលសម្បត្តិ
+
+ section ការដោះស្រាយព្រឹត្តិការណ៍ (20 នាទី)
+ អន្តរកម្មអ្នកប្រើ៖ មូលដ្ឋានព្រឹត្តិការណ៍ Pointer
+ : ការតំឡើងអ្នកស្ដាប់ព្រឹត្តិការណ៍
+ : ភាពឆបគ្នារវាងឧបករណ៍ផ្សេងៗ
+ : បច្ចេកទេសការការពារព្រឹត្តិការណ៍
+
+ section ការបិទជិត (25 នាទី)
+ ការគ្រប់គ្រងតំបន់៖ ការបង្កើតអថេរឯកជន
+ : ការអរស់រវល់មុខងារ
+ : លំនាំការគ្រប់គ្រងស្ថានភាព
+ : ប្រសិទ្ធភាពចងចាំ
+
+ section ប្រព័ន្ធទាញ (30 នាទី)
+ លក្ខណៈអន្តរកម្ម៖ ការតាមដានសមីការសម្លឹង
+ : ការគណនាទីតាំង
+ : គណិតវិទ្យាចលនា
+ : របៀបសម្អាត
+
+ section លំនាំកម្រិតខ្ពស់ (45 នាទី)
+ ជំនាញវិជ្ជាជីវៈ៖ ការបែបផែនព្រឹត្តិការណ៍
+ : ការកែលម្អប្រសិទ្ធភាព
+ : ការដោះស្រាយកំហុស
+ : ការពិចារណាអំពីការចូលដំណើរការ
+
+ section ការយល់ដឹងស៊ុមវិធីសាស្រ្ត (1 សប្តាហ៍)
+ ការអភិវឌ្ឍទំនើប៖ គំនិត Virtual DOM
+ : បណ្ណាល័យគ្រប់គ្រងស្ថានភាព
+ : សំណង់បន្ទុកផ្សំនិ
+ : ការរួមបញ្ចូលឧបករណ៍កសាង
+
+ section កម្រិតជំនាញខ្ពស់ (1 ខែ)
+ APIs DOM លំនាំខ្ពស់៖ Intersection Observer
+ : Mutation Observer
+ : ធាតុប្ដូរប្តូរ
+ : គ្រឿងផ្សំគេហទំព័រ
+```
+### 🛠️ សង្ខេបឧបករណ៍ JavaScript របស់អ្នក
+
+បន្ទាប់ពីបញ្ចប់មេរៀននេះ អ្នកមាន៖
+- **ជំនាញ DOM**: ជ្រើសរើសធាតុ ការគ្រប់គ្រងគុណលក្ខណ៍ និងការបើកប្រាក់ដើមទន់
+- **ជំនាញព្រឹត្តិការណ៍**: ការគ្រប់គ្រងអន្តរកម្មឆ្លើយតបចម្រុះឧបករណ៍ជាមួយ pointer events
+- **ការយល់ដឹងពី closures**: ការគ្រប់គ្រងស្ថានភាពឯកជន និងការបន្តនៅក្នុងមុខងារ
+- **ប្រព័ន្ធអ៊ីនធើរ៉ាក់ទីវ**: ការអនុវត្តចាប់ទម្លាក់ទម្លាក់ពីគន្លងក្នុង
+- **ប្រសិទ្ធភាព**: ការសម្អាតព្រឹត្តិការណ៍ និងគ្រប់គ្រងអង្គចងចាំត្រឹមត្រូវ
+- **គំរូសម័យថ្មី**: គន្លងកូដដែលបានប្រើនៅក្នុងការអភិវឌ្ឍជំនាញវិជ្ជាជីវៈ
+- **បទពិសោធន៍អ្នកប្រើ**: បង្កើតផ្ទាំងមានប្រតិកម្មងាយប្រើ និងឆ្លើយតបរលូន
+
+**ជំនាញវិជ្ជាជីវៈដែលទទួលបាន**: អ្នកបានបង្កើតមុខងារដូចគ្នានឹង
+- **បន្ទះ Trello/Kanban**: ចាប់ទម្លាក់កាតជារៀងរាល់ស៊ីស្តម
+- **ប្រព័ន្ធផ្ទុកឯកសារ**: គ្រប់គ្រងចាប់ទម្លាក់ទម្លាក់ឯកសារ
+- **ផ្ទះរូបភាព**: ផ្ទាំងរៀបចំរូបភាពបានខ្ពស់
+- **កម្មវិធីទូរស័ព្ទ**: គំរូអន្តរកម្មប៉ះ
+
+**ជំហានបន្ទាប់**: អ្នកមានត្រៀមខ្លួនសម្រាប់ចូលរៀនស្គាល់ frameworks សម័យថ្មីដូចជា React, Vue, ឬ Angular ដែលបន្ថែមមុខងារចូលពីគំនិត DOM manipulation មូលដ្ឋានផងដែរ!
+
+## ការងារ
+
+[ធ្វើការជាមួយ DOM បន្ថែម](assignment.md)
+
+---
+
+
+**ការបដិសេធ**៖
+ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលយើងខិតខំរកភាពត្រឹមត្រូវ សូមចងចាំថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាម្ដងនឹងត្រូវបានគេចាត់ទុកជាផ្នែកទិន្នន័យផ្លូវការជាមូលដ្ឋាន។ สำหรับThông tin quan trọng, khuyến nghị nên sử dụng dịch vụ dịch thuật chuyên nghiệp do con người thực hiện។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុស ទាំងស្រុងដែលកើតមានពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
+
\ No newline at end of file
diff --git a/translations/km/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/km/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 000000000..e14b558a2
--- /dev/null
+++ b/translations/km/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,130 @@
+# ការប្រាស់និន្នាការធាតុ DOM
+
+## ទិដ្ឋភាពទូទៅ
+
+ឥឡូវនេះដែលអ្នកបានជួបប្រទៈនូវអំណាចនៃការគ្រប់គ្រង DOM ដោយផ្ទាល់ អ្នកបានពេលវេលាដើម្បីស្វែងយល់អំពីពិភពធំទូលាយនៃរូបមន្ត DOM។ ការប្រឡងនេះនឹងពង្រឹងការយល់ដឹងរបស់អ្នកអំពីរបៀបដែលបច្ចេកវិទ្យាវែបផ្សេងៗទំនាក់ទំនងជាមួយ DOM លើសពីការទាញធាតុ។
+
+## គោលបំណងរៀន
+
+តាមរយៈការបញ្ចប់ការប្រឡងនេះ អ្នកនឹង៖
+- **ស្រាវជ្រាវ** និងយល់ដឹងជ្រៅអំពីរូបមន្ត DOM មួយជាក់លាក់
+- **វិភាគ** ការអនុវត្តជាក់ស្តែងនៃការគ្រប់គ្រង DOM
+- **ភ្ជាប់** គំនិតទ្រឹស្តីទៅនឹងកម្មវិធីជាក់ស្តែង
+- **អភិវឌ្ឍ** ជំនាញក្នុងការសរសេរឯកសារ និងវិភាគបច្ចេកទេស
+
+## សេចក្តីណែនាំ
+
+### ជំហាន ១៖ ជ្រើសរើសរូបមន្ត DOM របស់អ្នក
+
+ចូលទៅកាន់បញ្ជីពេញលេញ [ចំណងជើងរូបមន្ត DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) នៅលើ MDN ហើយជ្រើសរើសរូបមន្តដែលអ្នកមានចំណាប់អារម្មណ៍។ សូមពិចារណាជ្រើសរើសពីចំណាត់ថ្នាក់ទាំងនេះសម្រាប់ភាពចម្រុះ៖
+
+**ជម្រើសសមរម្យសម្រាប់អ្នកចាប់ផ្ដើម៖**
+- `Element.classList` - ការគ្រប់គ្រងថ្នាក់ CSS យ៉ាង δυναμμικό
+- `Document.querySelector()` - ការជ្រើសរើសធាតុជាន់ខ្ពស់
+- `Element.addEventListener()` - ការគ្រប់គ្រងព្រឹត្តិការណ៍លើសពីព្រឹត្តិការណ៍មូលដ្ឋាន
+- `Window.localStorage` - ការផ្ទុកទិន្នន័យនៅផ្នែកអតិថិជន
+
+**ការបញ្ចេញបញ្ហាកម្រិតមធ្យម៖**
+- `Intersection Observer API` - ការទទួលស្គាល់ភាពមើលឃើញនៃធាតុ
+- `MutationObserver` - ការគ្រប់គ្រងការផ្លាស់ប្តូរនៅក្នុង DOM
+- `Drag and Drop API` - ជំរើសផ្សេងពីវិធី pointer-based របស់យើង
+- `Geolocation API` - ការចូលប្រើទីតាំងអ្នកប្រើប្រាស់
+
+**ការស្វែងយល់ជម្រៅ៖**
+- `Web Components` - ធាតុកំណត់ផ្ទាល់ និង shadow DOM
+- `Canvas API` - ក្រាហ្វិកកម្មវិធី
+- `Web Workers` - ការដំណើរការប្រមូលផ្តុំក្រោយកញ្ចក់
+- `Service Workers` - មុខងារឥតចូលបណ្ដាញ
+
+### ជំហាន ២៖ ស្រាវជ្រាវ និងចុះឯកសារ
+
+បង្កើតវិភាគជម្រៅ (300-500 ពាក្យ) រួមមានៈ
+
+#### ទិដ្ឋភាពបច្ចេកទេស
+- **កំណត់** រួមបញ្ចូលពីរូបមន្តដែលអ្នកបានជ្រើសក្នុងភាសាសាមញ្ញ និងសម្រួលសម្រាប់អ្នកចាប់ផ្ដើម
+- **ពន្យល់** អំពីវិធីសាស្រ្ត សម្បត្តិ ឬព្រឹត្តិការណ៍ដែលរូបមន្តផ្តល់ជូន
+- **ពណ៌នា** ប្រភេទបញ្ហាដែលវាត្រូវបានបង្កើតសម្រាប់ដោះស្រាយ
+
+#### ការអនុវត្តជាក់ស្តែង
+- **ស្វែងរក** វែបសាយមួយដែលប្រើរូបមន្តដែលអ្នកជ្រើស (ពិនិត្យកូដឬស្រាវជ្រាវឧទាហរណ៍)
+- **ចុះឯកសារ** ការអនុវត្តជាក់លាក់ជាមួយកូដខ្នាតខ្នាតប្រសិនបើអាចធ្វើទៅបាន
+- **វិភាគ** ហេតុអ្វីបានជ المطورين ជ្រើសរើសវិធីនេះ
+- **ពន្យល់** របៀបវាប្រែប្រួលបទពិសោធន៍អ្នកប្រើប្រាស់
+
+#### ការអនុវត្តជាក់ស្តែង
+- **ប្រៀបធៀប** រូបមន្តរបស់អ្នកជាមួយបច្ចេកទេសដែលយើងប្រើនៅក្នុងគម្រោង terrarium
+- **ស្នើសុំពីរបៀបដែលរូបមន្តរបស់អ្នកអាចបង្កើន ឬបន្តភាពអាចប្រើប្រាស់របស់ terrarium
+- **កំណត់** គម្រោងផ្សេងទៀតដែលរូបមន្តនេះនឹងមានតម្លៃ
+
+### ជំហាន ៣៖ ឧទាហរណ៍កូដ
+
+រួមបញ្ចូលឧទាហរណ៍កូដសាមញ្ញ និងដំណើរការដែលបង្ហាញរូបមន្តរបស់អ្នក។ វាគួរតែ៖
+- **ដំណើរការ** - កូដគួរតែដំណើរការពិតប្រាកដពេលបានសាកល្បង
+- **មានមតិយោបល់** - ពន្យល់អំពីអ្វីដែលមុខម្ខាងទាំងអស់ធ្វើ
+- **ពាក់ព័ន្ធ** - តភ្ជាប់ទៅករណីប្រើប្រាស់ដែលជារូបភាពពិត
+- **សមរម្យសម្រាប់អ្នកចាប់ផ្ដើម** - ងាយយល់សម្រាប់អ្នករៀនអភិវឌ្ឍវែប
+
+## ទម្រង់ការដាក់ស្នើ
+
+រៀបចំការដាក់ស្នើរបស់អ្នកជាមួយចំណងជើងច្បាស់លាស់៖
+
+```markdown
+# [Interface Name] DOM Investigation
+
+## What It Does
+[Technical overview]
+
+## Real-World Example
+[Website analysis and implementation details]
+
+## Code Demonstration
+[Your working example with comments]
+
+## Reflection
+[How this connects to our terrarium project and future applications]
+```
+
+## វិធីសម្រាប់វាយតម្លៃ
+
+| កាលាដ្ឋាន | ល្អឥតខ្ចោះ (A) | មានជំនាញ (B) | កំពុងអភិវឌ្ឍ (C) | ត្រូវការកែលម្អ (D) |
+|----------|-----------------|----------------|----------------|------------------|
+| **ការយល់ដឹងផ្នែកបច្ចេកទេស** | បង្ហាញការយល់ដឹងជ្រៅជាមួយការពន្យល់ត្រឹមត្រូវនិងពាក្យបច្ចេកទេសសមរម្យ | បង្ហាញការយល់ដឹងរឹងមាំ ជាមួយការពន្យល់ត្រឹមត្រូវភាគច្រើន | មានការយល់ដឹងមូលដ្ឋាន និងកំហុសខ្លះៗ | ចាញ់ការយល់ដឹងខ្លាំង ជាមួយកំហុសធំនានា |
+| **វិភាគពីពិភពពិត** | កំណត់ និងវិភាគការអនុវត្តជាក់ស្តែងជាមួយខ្លឹមសារត្រឹមត្រូវ | រកឃើញឧទាហរណ៍ជាក់ស្តែងសឹងតែមានការវិភាគគ្រប់គ្រាន់ | រកឃើញឧទាហរណ៍ ប៉ុន្តែការវិភាគមិនមានជម្រៅ | ភ្ជាប់មិនច្បាស់ ឬខុសពីពិភពពិត |
+| **ឧទាហរណ៍កូដ** | កូដដំណើរការប្រកបដោយមតិយោបល់ច្បាស់លាស់បង្ហាញរូបមន្ត | កូដដំណើរការជាមួយមតិយោបល់គ្រប់គ្រាន់ | កូដដំណើរការ ប៉ុន្តែត្រូវការព័ត៌មានបន្ថែម | កូដកំហុស ឬពន្យល់មិនច្បាស់ |
+| **គុណភាពសរសេរ** | សរសេរប្រាប់បែបច្បាស់ តូបពិសោធន៏ ជាមួយរចនាសម្ព័ន្ធត្រឹមត្រូវ | រៀបចំបានល្អ ជាមួយសម្រិតសរសេរបច្ចេកទេសល្អ | រៀបចំបានគ្រប់គ្រាន់ និងច្បាស់លាស់ | រៀបចំខ្សោយ ឬអសកម្មភាពកិច្ចសម្រួល |
+| **គំនិតវិគ្គចារណា** | បង្កើតការតភ្ជាប់ឆ្លាតវៃចំពោះគំនិត និងស្នើសុំ ការអនុវត្តថ្មីៗ | បង្ហាញគំនិតវិភាគល្អ និងតភ្ជាប់ពាក់ព័ន្ធ | មានវិភាគមួយចំនួន ប៉ុន្តែមិនជ្រៅ | គ្មានភស្តុតាងបង្ហាញពីគំនិតវិគ្គចារណា |
+
+## គន្លឹះសម្រាប់ជោគជ័យ
+
+**យុទ្ធសាស្ត្រស្រាវជ្រាវ៖**
+- **ចាប់ផ្តើម** ជាមួយឯកសារពី MDN សម្រាប់ព័ត៌មានផ្តល់អំណាច
+- **ស្វែងរក** ឧទាហរណ៍កូដនៅ GitHub ឬ CodePen
+- **ពិនិត្យ** វែបសាយពេញនិយមដោយប្រើឧបករណ៍អភិវឌ្ឍន៍កម្មវិធីរក្សាទុកកម្មវិធីរុករក
+- **មើល** វីដេអូសិក្សាសម្រាប់ការពន្យល់ផ្ទាំង
+
+**គន្លឹះសរសេរ៖**
+- **ប្រើ** ពាក្យរបស់អ្នកផ្ទាល់ មិនកូពីឯកសារព័ត៌មាន
+- **រួមបញ្ចូល** ឧទាហរណ៍ និងឧទាហរណ៍កូដជាក់លាក់
+- **ពន្យល់** គំនិតបច្ចេកទេសដូចជាកំពុងបង្រៀនមិត្តភក្តិ
+- **ភ្ជាប់** រូបមន្តរបស់អ្នកទៅនឹងគំនិតអភិវឌ្ឍន៍វែបទូលំទូលាយ
+
+**គំនិតឧទាហរណ៍កូដ៖**
+- **បង្កើត** ដេមូសាមញ្ញដែលបង្ហាញមុខងារចម្បងរបស់រូបមន្ត
+- **សាងសង់** លើគំនិតពីគម្រោង terrarium របស់យើង ប្រសិនបើមានភាពពាក់ព័ន្ធ
+- **ផ្តោត** លើមុខងារ ជាងរចនាបថ
+- **សាកល្បង** កូដរបស់អ្នកដើម្បីធៀបប្រតិបត្តិការឲ្យបានត្រឹមត្រូវ
+
+## កាលបរិច្ឆេទដាក់ស្នើ
+
+[បន្ថែមកាលបរិច្ឆេទនៅទីនេះ]
+
+## សំណួរណាមួយ?
+
+ប្រសិនបើអ្នកត្រូវការពន្យល់បន្ថែមអំពីផ្នែកណាមួយនៃការប្រឡងនេះ សូមកុំស្ទាក់ស្ទើរពួកគេ! ការស្រាវជ្រាវនេះនឹងពង្រឹងការយល់ដឹងរបស់អ្នកអំពីរបៀបដែល DOM បណ្ដាលឲ្យមានបទពិសោធន៍វែបចម្រង់ចរណ៍ដែលយើងប្រើគ្រប់ថ្ងៃ។
+
+---
+
+
+**ការបដិសេធ**៖
+ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលយើងខិតខំប្រឹងប្រែងឱ្យបានត្រឹមត្រូវ សូមដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិក្នុងជើងនេះអាចមានកំហុស ឬមិនត្រឹមត្រូវ។ ឯកសារដើមក្នុងភាសាម្តាយគួរត្រូវបានគេចាត់ទុកជាមូលដ្ឋានដែលមានប្រយោជន៍។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមណែនាំឱ្យបកប្រែដោយអ្នកជំនាញផ្នែកមនុស្ស។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសដែលកើតឡើងពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
+
\ No newline at end of file
diff --git a/translations/km/3-terrarium/README.md b/translations/km/3-terrarium/README.md
new file mode 100644
index 000000000..966caa8ab
--- /dev/null
+++ b/translations/km/3-terrarium/README.md
@@ -0,0 +1,21 @@
+## ប្រើប្រាស់ Terrarium របស់អ្នក
+
+អ្នកអាចប្រើប្រាស់ ឬបោះពុម្ពផ្សាយ Terrarium របស់អ្នកលើបណ្ដាញតាមរយៈ **Azure Static Web Apps**។
+
+1. Fork ឃ្លាំងនេះ
+
+2. ចុចប៊ូតុងនេះ 👇
+
+[](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+3. អនុវត្តមគ្គុទេសក៍ការតំឡើងដើម្បីបង្កើតកម្មវិធីរបស់អ្នក។
+ - កំណត់ **App root** ទៅ `/solution` ឬឫសនៃមូលដ្ឋានកូដរបស់អ្នក។
+ - នៅក្នុងកម្មវិធីនេះគ្មាន API ទេ ដូច្នេះអ្នកអាចរំលងការកំណត់ API ។
+ - ហ្វូុលឌ័រ `.github` នឹងត្រូវបង្កើតឡើងដោយស្វ័យប្រវត្តិដើម្បីជួយ Azure Static Web Apps សាងសង់ និងបោះពុម្ពផ្សាយកម្មវិធីរបស់អ្នក។
+
+---
+
+
+**ការបំភ្លឺ**:
+ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលយើងខំប្រឹងធ្វើឱ្យបានត្រឹមត្រូវ សូមយល់ដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬការមិនត្រឹមត្រូវខ្លះ។ ឯកសារដើមនៅក្នុងភាសាទូទៅគួរត្រូវបានពិចារណាថាជាការលក្ខណៈត្រឹមត្រូវដ៏សំខាន់។ សម្រាប់ព័ត៌មានសំខាន់ៗ ខួបបកប្រែដោយមនុស្សជាអ្នកជំនាញត្រូវបានផ្ដល់អនុសាសន៍។ យើងមិនទទួលខុសត្រូវចំពោះអ្វីដែលយល់ច្រឡំ ឬការបកស្រាយខុសពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
+
\ No newline at end of file
diff --git a/translations/km/3-terrarium/solution/README.md b/translations/km/3-terrarium/solution/README.md
new file mode 100644
index 000000000..250b827ef
--- /dev/null
+++ b/translations/km/3-terrarium/solution/README.md
@@ -0,0 +1,32 @@
+# កន្លែងដាំរុក្ខជាតិរបស់ខ្ញុំ៖ គម្រោងសម្រាប់ការសិក្សាអំពី HTML, CSS និងការគ្រប់គ្រង DOM ដោយប្រើ JavaScript 🌵🌱
+
+ការប្រមូលកូដតូចៗដោយទាញ និងទម្លាក់។ ជាមួយនឹង HTML, JS និង CSS ទំហំតូច អ្នកអាចបង្កើតការផ្ទាំងវ៉ែប ស្ទីលវា និងបន្ថែមអន្តរកម្ម។
+
+
+
+## ការសរសើរ
+
+បានសរសេរជាមួយ ♥️ ដោយ [Jen Looper](https://www.twitter.com/jenlooper)
+
+កន្លែងដាំរុក្ខជាតិដែលបង្កើតឡើងតាមរយៈ CSS ត្រូវបានចូលបំផុតពីកូដកន្ត្រកកំផ្លេណ៍របស់ Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)។
+
+ស្នាដៃវិចិត្រសិល្បៈត្រូវបានគូរដោយដៃ ដោយ [Jen Looper](http://jenlooper.com) ប្រើប្រាស់កម្មវិធី Procreate។
+
+## បញ្ចូនកន្លែងដាំរុក្ខជាតិរបស់អ្នក
+
+អ្នកអាចបញ្ចូន ឬផ្សព្វផ្សាយកន្លែងដាំរុក្ខជាតិរបស់អ្នកទៅលើវ៉ែបដោយប្រើ Azure Static Web Apps។
+
+1. Fork ដាក់កូដនេះ
+
+2. ចុចប៊ូតុងនេះ
+
+[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. ដើរតាមកម្មវិធីមនុស្សដឹកនាំបង្កើតកម្មវិធីរបស់អ្នក។ ត្រូវប្រាកដថាអ្នកបានកំណត់ root app ទៅជា `/solution` ឬ root នៃកូដប៊េសរបស់អ្នក។ គ្មាន API នៅក្នុងកម្មវិធីនេះ ដូច្នេះកុំបារម្ភអំពីការបន្ថែមវា។ ថត .github នឹងត្រូវបានបង្កើតនៅក្នុង repo ដែលបាន fork នេះ ដែលនឹងជួយសេវាកម្មកសាងរបស់ Azure Static Web Apps ក្នុងការសាងសង់ និងផ្សព្វផ្សាយកម្មវិធីរបស់អ្នកទៅ URL ថ្មីមួយ។
+
+---
+
+
+**ការបដិសេធ**៖
+ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលយើងខិតខំសម្រាប់ភាពត្រឹមត្រូវ សូមយល់ព្រមថាការបកប្រែដោយស្វ័យប្រវត្ដិអាចមានកំហុស ឬមិនត្រឹមត្រូវ។ ឯកសារដើមជាភាសាមូលដ្ឋានគួរត្រូវបានគេយកទៅជាប្រភពដែលមានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមណែនាំឱ្យប្រើការបកប្រែដោយអ្នកជំនាញមនុស្ស។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការ អត្រាខុសផ្សេងៗដែលកើតឡើងពីការប្រើប្រាស់ការបកប្រែនេះទេ។
+
\ No newline at end of file
diff --git a/translations/km/4-typing-game/README.md b/translations/km/4-typing-game/README.md
new file mode 100644
index 000000000..e3fbb4f07
--- /dev/null
+++ b/translations/km/4-typing-game/README.md
@@ -0,0 +1,281 @@
+# កម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍ - សាងសង់ហ្គេមវាយអក្សរ
+
+```mermaid
+journey
+ title ជំហានអភិវឌ្ឍន៍ហ្គេមវាយពុម្ពរបស់អ្នក
+ section មូលដ្ឋាន
+ រៀបចំបញ្ចាត់ហ្គេម: 3: Student
+ រចនាផ្ទៃមុខអ្នកប្រើប្រាស់: 4: Student
+ ដំឡើងធាតុ HTML: 4: Student
+ section មុខងារ
+ គ្រប់គ្រងការបញ្ចូលអ្នកប្រើ: 4: Student
+ តាមដានពេលវេលា: 5: Student
+ គណនាការត្រឹមត្រូវ: 5: Student
+ section លក្ខណៈពិសេស
+ បន្ថែមមតិយោបល់រូបភាព: 5: Student
+ អនុវត្តតុល្យភាពហ្គេម: 5: Student
+ សម្រួលបទពិសោធន៍: 5: Student
+```
+## ការណែនាំ
+
+នេះជារឿងដែលអ្នកអភិវឌ្ឍន៍គ្រប់រូបដឹង ប៉ុន្តែមិនដែលនិយាយច្រើនទេ៖ វាយអក្សរលឿនគឺជាពលរដ្ឋពិសេសមួយ! 🚀 សូមចងចាំថា - លឿនប៉ុណ្ណាដែលអ្នកអាចយកគំនិតពីខួរក្បាលទៅកាន់កម្មវិធីកូដបានត្រង់ណា ការច្នៃប្រឌិតរបស់អ្នកនឹងហូរច្រើនប៉ុណ្ណា។ វាដូចជាម៉ាស៊ីនផ្លូវផ្ទាល់ខាងតាំងពីគំនិតរបស់អ្នកមកកាន់អេក្រង់។
+
+```mermaid
+pie title លក្ខណៈពិសេសហ្គេម
+ "មតិយោបល់ពេលវេលានៅពេលពិត" : 25
+ "ការតាមដានសមត្ថភាព" : 20
+ "UI អន្តរកម្ម" : 20
+ "ប្រព័ន្ធម៉ោងចាប់ពេល" : 15
+ "ការគ្រប់គ្រងពាក្យពេចន៍" : 10
+ "ការបង្ហាញលទ្ធផល" : 10
+```
+ចង់ដឹងពីវិធីល្អបំផុតមួយសម្រាប់ធ្វើឲ្យជំនាញនេះប្រសើរឡើងទេ? អ្នកត្រូវសន្មត់ហើយ - យើងនឹងសាងសង់ហ្គេមមួយ!
+
+```mermaid
+flowchart LR
+ A[កីឡាករចាប់ផ្តើមហ្គេម] --> B[បង្ហាញសម្រង់ចៃដន្យ]
+ B --> C[កីឡាករបញ្ចូលតួអក្សរ]
+ C --> D{តួអក្សរត្រឹមត្រូវទេ?}
+ D -->|Yes| E[ពន្លូតបៃតង]
+ D -->|No| F[ពន្លូតក្រហម]
+ E --> G[ធ្វើបច្ចុប្បន្នភាពភាពត្រឹមត្រូវ]
+ F --> G
+ G --> H{សម្រង់បញ្ចប់ទេ?}
+ H -->|No| C
+ H -->|Yes| I[គណនាពាក្យក្នុងមួយនាទី]
+ I --> J[បង្ហាញលទ្ធផល]
+ J --> K[លេងម្ដងទៀតទេ?]
+ K -->|Yes| B
+ K -->|No| L[ហ្គេមបញ្ចប់]
+
+ style A fill:#e1f5fe
+ style D fill:#fff3e0
+ style E fill:#e8f5e8
+ style F fill:#ffebee
+ style I fill:#f3e5f5
+```
+> មកបង្កើតហ្គេមវាយអក្សរដ៏អស្ចារ្យរួមគ្នា!
+
+តើអ្នកបានត្រៀមខ្លួនសម្រាប់ដាក់ជំនាញ JavaScript, HTML និង CSS ដែលអ្នកបានរៀនមកហើយចូលប្រើប្រាស់ទេ? យើងនឹងសង់ហ្គេមវាយអក្សរមួយដែលនឹងបញ្ចេញការប្រកួតប្រជែងជាមួយអត្ថបទចម្លែកៗពីអ្នកស៊ើបអង្កេតដ៏ល្បី [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)។ ហ្គេមនេះនឹងតាមដានថាអ្នកអាចវាយលឿននិងត្រឹមត្រូវប៉ុណ្ណា - ហើយជឿល្អថា វាធ្វើឲ្យអ្នកចូលចិត្តជាងដែលអ្នកគិត!
+
+```mermaid
+mindmap
+ root((ការអភិវឌ្ឍហ្គេមវាយបញ្ចូលអក្សរ))
+ User Interface
+ Input Elements [ធាតុបញ្ចូល]
+ Visual Feedback [មតិអ្នកប្រើប្រាស់វិចិត្រសាល]
+ Responsive Design [ការរចនាឆ្លើយតប]
+ Accessibility [ភាពងាយស្រួលចូលដំណើរការ]
+ Game Logic
+ Quote Selection [ការជ្រើសរើសអត្ថបទ]
+ Timer Management [ការគ្រប់គ្រងម៉ោង]
+ Accuracy Tracking [ការតាមដានភាពត្រឹមត្រូវ]
+ Score Calculation [ការគណនារង្វាន់]
+ Event Handling
+ Keyboard Input [ការបញ្ចូលក្តារចុច]
+ Button Clicks [ការចុចប៊ូតុង]
+ Real-time Updates [ការអាប់ដេតពេលវេលាពិត]
+ Game State Changes [ការផ្លាស់ប្តូរទីតាំងហ្គេម]
+ Performance Metrics
+ Words Per Minute [ពាក្យក្នុងមួយនាទី]
+ Character Accuracy [ភាពត្រឹមត្រូវតួអក្សរ]
+ Error Tracking [ការតាមដានកំហុស]
+ Progress Display [ការបង្ហាញកម្រិតជោគជ័យ]
+ User Experience
+ Immediate Feedback [មតិកាន់តែទាន់ពេល]
+ Clear Instructions [ការណែនាំច្បាស់លាស់]
+ Engaging Content [មាតិកាទាក់ទាញ]
+ Achievement System [ប្រព័ន្ធសម្រេចបាន]
+```
+
+
+## អ្វីដែលអ្នកត្រូវដឹង
+
+```mermaid
+flowchart TD
+ A[សកម្មភាពអ្នកប្រើ] --> B{ប្រភេទព្រឹត្តិការណ៍?}
+ B -->|ចុចក្តារចុច| C[ព្រឹត្តិការណ៍ក្តារចុច]
+ B -->|ចុចប៊ូតុង| D[ព្រឹត្តិការណ៍ម៉ៅស៍]
+ B -->|ម៉ោងរាប់| E[ព្រឹត្តិការណ៍ពេលវេលា]
+
+ C --> F[ពិនិត្យតួអក្សរ]
+ D --> G[ចាប់ផ្តើម/កំណត់ឡើងវិញហ្គេម]
+ E --> H[អាប់ដេតម៉ោងរាប់]
+
+ F --> I{ត្រឹមត្រូវ?}
+ I -->|បាទ| J[បំភ្លឺពណ៌បៃតង]
+ I -->|ទេ| K[បំភ្លឺពណ៌ក្រហម]
+
+ J --> L[អាប់ដេតពិន្ទុ]
+ K --> L
+ L --> M[ពិនិត្យស្ថានភាពហ្គេម]
+
+ G --> N[បង្កើតអត្ថបទថ្មី]
+ H --> O[បង្ហាញពេលវេលា]
+
+ M --> P{ហ្គេមបានបញ្ចប់?}
+ P -->|បាទ| Q[បង្ហាញលទ្ធផល]
+ P -->|ទេ| R[បន្តលេងហ្គេម]
+
+ style A fill:#e1f5fe
+ style F fill:#e8f5e8
+ style I fill:#fff3e0
+ style Q fill:#f3e5f5
+```
+មុនពេលចាប់ផ្តើម សូមធ្វើអោយប្រាកដថាអ្នកស្គាល់យ៉ាងដឹងដល់ពីគំនិតទាំងនេះ (កុំបារម្ភបើអ្នកត្រូវការចងចាំម្តងទៀត - ពួកយើងគ្រប់រូបធ្លាប់មានទីនេះ!)៖
+
+- ការបង្កើតប្រអប់បញ្ចូលអក្សរ និងប៊ូតុង
+- CSS និងការកំណត់រចនាបថតាមតាថ្នាក់
+- មូលដ្ឋាន JavaScript
+ - បង្កើតអារេ
+ - បង្កើតលេខចៃដន្យ
+ - ទទួលពេលវេលាបច្ចុប្បន្ន
+
+បើមានអ្វីណាមួយមើលទៅមិនពិសេសទេ វាត្រូវឲ្យចេះសុខសប្បាយ! ពេលខ្លះវិធីល្អបំផុតសម្រាប់មាំមួនជំនាញគឺចូលទៅក្នុងគម្រោងមួយហើយស្វែងរកដំណោះស្រាយដូចដែលអ្នកធ្វើ។
+
+### 🔄 **ការត្រួតពិនិត្យគន្លងរៀន**
+**ការវាយតម្លៃមូលដ្ឋាន**៖ មុនចាប់ផ្តើមការអភិវឌ្ឍ ត្រូវប្រាកដថាអ្នកយល់ដឹងពី៖
+- ✅ របៀប HTML form និងធាតុ input ដំណើរការ
+- ✅ ថ្នាក់ CSS និងការរៀបរយរចនាបថ dynamique
+- ✅ អ្នកស្ដាប់ព្រឹត្តិការណ៍ JavaScript និងអ្នកគ្រប់គ្រង
+- ✅ ការកែច្នៃអារេ និងជ្រើសយកចៃដន្យ
+- ✅ ការវាស់វេលា និងគណនា
+
+**ការប្រលងខ្លីផ្ទាល់ខ្លួន**៖ តើអ្នកអាចពន្យល់ថាគំនិតទាំងនេះធ្វើការ ដោយសហគ្រិនក្នុងហ្គេមប្រតិបត្តិការថែមទៀតដូចម្តេច?
+- **ព្រឹត្តិការណ៍** បញ្ចេញពេលអ្នកប្រើប្រាស់អង្គធាតុ
+- **អ្នកគ្រប់គ្រង** ដំណើរការព្រឹត្តិការណ៍និងធ្វើបច្ចុប្បន្នភាពស្ថានភាពហ្គេម
+- **CSS** ផ្តល់មតិយោបល់សម្រាប់សកម្មភាពអ្នកប្រើប្រាស់
+- **ពេលវេលា** អនុញ្ញាតឲ្យវាស់វែងការប្រតិបត្តិ និងដំណើរការហ្គេម
+
+```mermaid
+quadrantChart
+ title ការអភិវឌ្ឍជំនាញហ្គេមវាយអក្សរ
+ x-axis អ្នកចាប់ផ្តើម --> អ្នកជំនាញ
+ y-axis ស្ថិតស្ថេរបាន --> មានអន្តរកម្ម
+ quadrant-1 ហ្គេមកម្រិតខ្ពស់
+ quadrant-2 កម្មវិធីពេលវេលាពិត
+ quadrant-3 ទំព័រមូលដ្ឋាន
+ quadrant-4 វេបសាយមានអន្តរកម្ម
+
+ HTML Forms: [0.3, 0.2]
+ CSS Styling: [0.4, 0.3]
+ Event Handling: [0.7, 0.8]
+ Game Logic: [0.8, 0.9]
+ Performance Tracking: [0.9, 0.7]
+```
+## មកសាងសង់រឿងនេះ!
+
+[ការបង្កើតហ្គេមវាយអក្សរដោយប្រើកម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍](./typing-game/README.md)
+
+### ⚡ **អ្វីដែលអ្នកអាចធ្វើបានក្នុងរយៈពេល 5 នាទីក្រោយនេះ**
+- [ ] បើកផ្ទាំង console របស់អ្នក និងសាកល្បងស្តាប់ព្រឹត្តិការណ៍ក្តារចុចជាមួយ `addEventListener`
+- [ ] បង្កើតទំព័រ HTML សាមញ្ញមួយជាមួយប្រអប់បញ្ចូល និងសាកល្បងរកដំណឹងវាយអក្សរ
+- [ ] ប្រើប្រាស់ការបំលែងខ្សែអក្សរដោយប្រៀបធៀបអក្សរវាយនិងអក្សរគោលដៅ
+- [ ] សាកល្បង `setTimeout` ដើម្បីយល់ពីមុខងារពេលវេលា
+
+### 🎯 **អ្វីដែលអ្នកអាចសម្រេចបានក្នុងមួយម៉ោងនេះ**
+- [ ] បញ្ចប់ការប្រលងក្រោយមេរៀនហើយយល់ដឹងពីកម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍
+- [ ] សាងសង់ជំនាន់មូលដ្ឋាននៃហ្គេមវាយអក្សរជាមួយការត្រួតពិនិត្យពាក្យ
+- [ ] បន្ថែមមតិយោបល់វិជ្ជមានសម្រាប់ការវាយត្រឹមត្រូវនិងមិនត្រឹមត្រូវ
+- [ ] អនុវត្តប្រព័ន្ធពិន្ទុសាមញ្ញដោយផ្អែកលើល្បឿននិងការត្រឹមត្រូវ
+- [ ] បំពាក់រចនាបថហ្គេមរបស់អ្នកជាមួយ CSS ដើម្បីធ្វើឲ្យវាស្រស់ស្អាត
+
+### 📅 **ការអភិវឌ្ឍហ្គេមរយៈពេលមួយសប្តាហ៍របស់អ្នក**
+- [ ] បញ្ចប់ហ្គេមវាយអក្សរពេញលេញជាមួយមុខងារទាំងអស់ និងការសម្រួល
+- [ ] បន្ថែមកម្រិតភាពតឹងរឹងជាមួយភាពស្មុគស្មាញនៃពាក្យផ្សេងៗគ្នា
+- [ ] អនុវត្តការតាមដានស្ថិតិអ្នកប្រើប្រាស់ (WPM, ការត្រឹមត្រូវក្រោមពេលវេលា)
+- [ ] បង្កើតផលប៉ះពាល់សម្លេងនិងសកម្មភាពសម្រាប់បទពិសោធន៍ប្រើប្រាស់ល្អប្រសើរ
+- [ ] ធ្វើឲ្យហ្គេមរបស់អ្នកឆបគ្នាជាមួយទូរស័ព្ទដៃសំរាប់ការប៉ះប៉ោះ
+- [ ] ចែករំលែកហ្គេមរបស់អ្នកតាមអ៊ីនធឺណិត ហើយប្រមូលមតិយោបល់ពីអ្នកប្រើប្រាស់
+
+### 🌟 **ការអភិវឌ្ឍរបស់អ្នករយៈពេលមួយខែ**
+- [ ] សាងសង់ហ្គេមច្រើនៗស្វែងរកគន្លងអន្តរកម្មផ្សេងៗគ្នា
+- [ ] រៀនអំពីរលកហ្គេម, ការគ្រប់គ្រងស្ថានភាព, និងការបង្កើនប្រសិទ្ធភាព
+- [ ] ចូលរួមខែក្នុងគម្រោងអភិវឌ្ឍហ្គេម Open source
+- [ ] ជំនាញខ្ពស់ក្នុងគន្លងពេលវេលា និងសកម្មភាពរលូន
+- [ ] បង្កើតពូត្វហ្វូលីយ៉ូបង្ហាញកម្មវិធីអន្តរកម្មច្រើន
+- [ ] ជាមេធាវីអូបង្គំអ្នកដទៃចាប់អារម្មណ៍ការអភិវឌ្ឍហ្គេម និងអន្តរកម្មអ្នកប្រើ
+
+## 🎯 ពេលវេលាសម្រាប់មានជំនាញល្បឿនវាយអក្សររបស់អ្នក
+
+```mermaid
+timeline
+ title ការសិក្សាការអភិវឌ្ឍហ្គេម
+
+ section ការតំឡើង (10 នាទី)
+ រចនាសម្ព័ន្ធគម្រោង: មូលដ្ឋាន HTML
+ : ការតំឡើងកែសម្រួល CSS
+ : ការបង្កើតហ фай JavaScript
+
+ section មុខងារអ្នកប្រើ (20 នាទី)
+ ធាតុអន្ដរាគមន៍: បញ្ចូលទិន្នន័យ
+ : គ្រប់គ្រងប៊ូតុង
+ : តំបន់បង្ហាញ
+ : គំរូឆ្លូតឆ្លាយ
+
+ section ការកាន់កាប់ព្រឹត្តិការណ៍ (25 នាទី)
+ អន្តរកម្មអ្នកប្រើ: ព្រឹត្តិការណ៍ក្តារចុច
+ : ព្រឹត្តិការណ៍កណ្តុរ
+ : មតិយោបល់ពេលវេលាពិត
+ : ការគ្រប់គ្រងស្ថានភាព
+
+ section តុល្យភាពហ្គេម (30 នាទី)
+ មុខងារស្នូល: ការបង្កើតសម្រង់
+ : ការប្រៀបធៀបតួអក្សរ
+ : ការគណនាការពេញចិត្ត
+ : ការអនុវត្តម៉ោង
+
+ section ការតាមដានប្រសិទ្ធភាព (35 នាទី)
+ មាត្រដ្ឋាន និងវិភាគ: ការគណនាពាក្យក្នុងមួយនាទី
+ : ការតាមដានកំហុស
+ : ការបង្ហាញកំណត់ត្រាកើតឡើង
+ : ការបង្ហាញលទ្ធផល
+
+ section ការតុបតែង និងការកែលម្អ (45 នាទី)
+ បទពិសោធន៍អ្នកប្រើ: មតិយោបល់មើលឃើញ
+ : អ efectos សំឡេង
+ : អនុភាពចលនា
+ : មុខងារចូលដំណើរការ
+
+ section មុខងារលំដាប់ខ្ពស់ (1 សប្តាហ៍)
+ មុខងារពង្រីក: ដំណាក់កាលលំបាក
+ : តារាងជើងឯក
+ : សម្រង់ផ្ទាល់ខ្លួន
+ : ជម្រើសលេងច្រើនលើ
+
+ section ជំនាញវិជ្ជាជីវៈ (1 ខែ)
+ ការអភិវឌ្ឍហ្គេម: ការបង្កើនប្រសិទ្ធភាព
+ : សំណង់កូដ
+ : ផែនការតេស្ត
+ : រចនាប័ទ្មដាក់ឲ្យប្រើ
+```
+### 🛠️ សង្ខេបឧបករណ៍អភិវឌ្ឍហ្គេមរបស់អ្នក
+
+បន្ទាប់ពីបញ្ចប់គម្រោងនេះ អ្នកនឹងមានជំនាញលើ៖
+- **កម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍**: ចំណុចប្រទាក់ប្រតិកម្មដែលឆ្លើយតបទៅនឹងការបញ្ចូល
+- **មតិយោបល់ពេលវេលាចាំបាច់**: ការអាប់ដេតភ្លាមៗទាំងត្រឹមត្រូវនិងការបង្ហាញ
+- **ការវាស់វែងប្រសិទ្ធភាព**: ការវាស់វេលានិងប្រព័ន្ធពិន្ទុត្រឹមត្រូវ
+- **ការគ្រប់គ្រងស្ថានភាពហ្គេម**: គ្រប់គ្រងដំណើរការនិងបទពិសោធន៍អ្នកប្រើ
+- **រចនាបទអន្តរកម្ម**: បង្កើតបទពិសោធន៍ដែលគួរឲ្យចាប់អារម្មណ៍ និងបង្វិលរូប
+- **Web APIs សម័យថ្មី**: ប្រើប្រាស់សមត្ថភាពប្រេរស័ព្ទសម្រាប់អន្តរកម្មសម្បូរ
+- **លំនាំគាំទ្រអ្នកចូលដំណើរការ**: រចនាដើម្បីចូលរួមសំរាប់អ្នកប្រើគ្រប់រូប
+
+**កម្មវិធីដាក់ឲ្យប្រើបានជាក់ស្តែង**៖ ជំនាញទាំងនេះអាចប្រើប្រាស់ថ្ងៃនេះដូចជា៖
+- **កម្មវិធីវែប**: ចំណុចប្រទាក់អន្តរកម្មឬផ្ទាំងតំណាងណាមួយ
+- **កម្មវិធីសិក្សា**: វេទិកាអប់រំ និងឧបករណ៍វាយតម្លៃជំនាញ
+- **ឧបករណ៍ផលិតកម្ម**: កម្មវិធីកែសម្រួលអត្ថបទ IDE និងកម្មវិធីសហការណ៍
+- **ឧស្សាហកម្មហ្គេម**: ហ្គេមប្រេរស័ព្ទ និងកម្សាន្តអន្តរកម្ម
+- **អភិវឌ្ឍន៍លើទូរស័ព្ទដៃ**: ចំណុចប្រទាក់ប៉ះប៉ះ និងការរងចាំចលនា
+
+**កម្រិតបន្ទាប់**: អ្នកបានត្រៀមខ្លួនសម្រាប់ជ្រាបចូលក្នុងផ្នែកហ្គេមកម្រិតខ្ពស់ ប្រព័ន្ធពហុអ្នកលេងពេលវេលាពិត ឬកម្មវិធីអន្តរកម្មស្មុគស្មាញ!
+
+## ខ្លឹមសារប្រគល់កិត្តិយស
+
+បានសរសេរជាមួយ ♥️ ដោយ [Christopher Harrison](http://www.twitter.com/geektrainer)
+
+---
+
+
+**ការបដិសេធ**៖
+ឯកសារនេះបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលដែលយើងខំប្រឹងរកភាពត្រឹមត្រូវ សូមយល់ដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមនៅភាសាម្ចាស់គួรถูกទុកចិត្តឲ្យជាឯកសារដែលមានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ ការប្រែដោយអ្នកជំនាញមនុស្សគឺត្រូវបានអញ្ជើញណែនាំ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។
+
\ No newline at end of file
diff --git a/translations/km/4-typing-game/solution/README.md b/translations/km/4-typing-game/solution/README.md
new file mode 100644
index 000000000..cc0b931d9
--- /dev/null
+++ b/translations/km/4-typing-game/solution/README.md
@@ -0,0 +1,8 @@
+នេះគឺជាទីតាំងដាក់អាសយដ្ឋាន ដែលបានទុកទទេដោយមានគោលបំណង
+
+---
+
+
+**ការបដិសេធ**៖
+ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលដែលយើងខំប្រឹងប្រែងដើម្បីភាពត្រឹមត្រូវ សូមជ្រាបថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវខ្លះៗ។ ឯកសារដើមក្នុងភាសាមាតុភូមិនោះគួរត្រូវបានគិតថា ជាទិន្នន័យដែលមានអំណាចផ្លូវការនៅតែសំខាន់។ សម្រាប់ព័ត៌មានដ៏សំខាន់ ការបកប្រែដោយមនុស្សដែលមានជំនាញត្រូវបានផ្ដល់អនុសាសន៍។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំណា ឬការបកប្រែខុសព្រោះការប្រើប្រាស់ការបកប្រែនេះឡើយ។
+
\ No newline at end of file
diff --git a/translations/km/4-typing-game/typing-game/README.md b/translations/km/4-typing-game/typing-game/README.md
new file mode 100644
index 000000000..5bb9264b0
--- /dev/null
+++ b/translations/km/4-typing-game/typing-game/README.md
@@ -0,0 +1,603 @@
+# ការបង្កើតហ្គេមដោយប្រើព្រឹត្តិការណ៍
+
+តើអ្នកធ្លាប់ចាប់អារម្មណ៍ទេថា តើគេហទំព័រមានវិធីដឹងពីពេលដែលអ្នកចុចប៊ូតុង ឬវាយអក្សរចូលទៅក្នុងប្រអប់ខ្សែអត្ថបទដូចម្តេច? នេះជាគំន្យមន្តរបស់កម្មវិធីដែលគ្រប់គ្រងដោយព្រឹត្តិការណ៍! វិធីណាមួយល្អបំផុតក្នុងការរៀនជំនាញសំខាន់នេះ គឺដោយកសាងអ្វីមួយមានប្រយោជន៍ — ហ្គេមវាយល្បឿនដែលឆ្លើយតបនឹងរាល់ការចុចក្តារចុចដែលអ្នកធ្វើ។
+
+អ្នកនឹងឃើញដោយផ្ទាល់វិធីដែលកម្មវិធីរុករកបណ្តាញ "និយាយ" ទៅកូដ JavaScript របស់អ្នក។ រាល់ពេលដែលអ្នកចុច វាយ ឬផ្លាស់ទីកណ្ដុរ កម្មវិធីរុករកកំពុងផ្ញើសារតូចៗ (យើងហៅថា ព្រឹត្តិការណ៍) ទៅកូដរបស់អ្នក ហើយអ្នកមានសិទ្ធិតัดสินចម្លើយថាតើបើករបៀបណា!
+
+នៅពេលដែលយើងបញ្ចប់នៅទីនេះ អ្នកនឹងបានបង្កើតហ្គេមវាយពិតប្រាកដមួយដែលតាមដានល្បឿននិងភាពត្រឹមត្រូវ។ ច្រើនសំខាន់ជាងនេះ អ្នកនឹងយល់ដឹងពីគំនិតមូលដ្ឋានដែលជំរុញគេហទំព័រជាមួយនឹងអន្តរកម្មទាំងអស់ដែលអ្នកធ្លាប់ប្រើ។ ចាប់ផ្តើមទៅ!
+
+## សំណួរពិនិត្យមុនវគ្គសិក្សា
+
+[សំណួរពិនិត្យមុនវគ្គសិក្សា](https://ff-quizzes.netlify.app/web/quiz/21)
+
+## កម្មវិធីដែលគ្រប់គ្រងដោយព្រឹត្តិការណ៍
+
+គិតពីកម្មវិធីឬគេហទំព័រដែលអ្នកចូលចិត្ត — អ្វីធ្វើឲ្យវាហាក់ដូចជាផ្ទេចផ្លាក និងឆ្លើយតប? វាគឺពឹងផ្អែកលើរបៀបវាសកម្មចំពោះអ្វីដែលអ្នកធ្វើ! រាល់ការចុច ការចុចក្តារចុច ការប្រមូល ផ្លាស់ទីឬដើរយកក្នុងកំណត់ព្រឹត្តិការណ៍នេះ បង្កើតអ្វីដែលយើងហៅថា "ព្រឹត្តិការណ៍" ហើយវាជាគន្លងពិសេសនៃការអភិវឌ្ឍគេហទំព័រប្រកបដោយសមត្ថភាព។
+
+នេះគឺជាវត្ថុដែលធ្វើឲ្យកម្មវិធីសម្រាប់បណ្តាញគឺគួរឱ្យចាប់អារម្មណ៍: យើងមិនដឹងទេថា ពេលណាអ្នកណាអាចចុចប៊ូតុងនោះ ឬចាប់ផ្តើមវាយនៅប្រអប់អត្ថបទឡើយ។ គេអាចនឹងចុចភ្លាមៗ រង់ចាំប្រាំនាទី រឺមិនចុចទេ! ការមិនអាចទាយបាននេះមានន័យថា យើងត្រូវគិតខុសពីរបៀបការសរសេរកូដរបស់យើង។
+
+មិនមែនសរសេរកូដដែលរត់ពីលើក្រោមដូចមុខម្ហូបញ៉ាំនោះទេ យើងសរសេរកូដដែលរង់ចាំយ៉ាងអំពេនសម្រាប់អ្វីមួយកើតឡើង។ វាស្រដៀងនឹងអ្នកប្រើតេលេក្រาฟនៅលើសតវត្សទី ១៨០០ដែលអង្គុយដោយម៉ាស៊ីនរបស់ពួកគេ ពីរជាចាំបាច់ឆ្លើយតបភ្លាមៗពេលដែលមានសារ។
+
+តើព្រឹត្តិការណ៍ជាអ្វី? បែបសាមញ្ញ វាជាអ្វីដែលកើតឡើង! ពេលអ្នកចុចប៊ូតុង — នោះជាព្រឹត្តិការណ៍។ ពេលអ្នកវាយតួអក្សរ — នោះជាព្រឹត្តិការណ៍។ ពេលអ្នកផ្លាស់ទីកណ្ដុរ — នោះជាព្រឹត្តិការណ៍មួយទៀត។
+
+កម្មវិធីដែលត្រូវគ្រប់គ្រងដោយព្រឹត្តិការណ៍អនុញ្ញាតឲ្យយើងដាក់កូដរបស់យើងឲ្យស្តាប់និងឆ្លើយតប។ យើងបង្កើតមុខងារពិសេសហៅថា **ស្ដាប់ព្រឹត្តិការណ៍** ដែលរង់ចាំយ៉ាងអំពេនសម្រាប់អ្វីមួយច្បាស់លាស់កើតឡើង ហើយបន្ទាប់មកឆក់ចរន្តចូលសកម្មភាពពេលវាកើត។
+
+គិតពីស្ដាប់ព្រឹត្តិការណ៍ដូចជាមានទូរស័ព្ទច្រកសម្រាប់កូដរបស់អ្នក។ អ្នកដាក់ជាមួយទូរស័ព្ទច្រក (`addEventListener()`), ផ្ដល់សំឡេងដែលត្រូវស្តាប់ (ដូចជា ‘click’ រឺ ‘keypress’), ហើយបញ្ជាក់ថាតើអ្វីគួរត្រូវកើតឡើងពេលដែលមាននរណាម្នាក់ចុចនោះ (មុខងាររបស់អ្នក)។
+
+**នេះជាវិធីស្ដាប់ព្រឹត្តិការណ៍ដំណើរការ:**
+- **ស្ដាប់** សម្រាប់សកម្មភាពអ្នកប្រើជាក់លាក់ដូចជាចុច ចុចក្តារចុច ឬផ្លាស់ទីកណ្ដុរ
+- **អនុវត្ត** កូដផ្ទាល់ខ្លួនរបស់អ្នកពេលព្រឹត្តិការណ៍បានកើតឡើង
+- **ឆ្លើយតប** បន្ទាន់ចំពោះអន្តរកម្មអ្នកប្រើ បង្កើតបទពិសោធន៍រលូនមិនមានឈរ
+- **ដោះស្រាយ** ព្រឹត្តិការណ៍ជាច្រើនលើធាតុដូចគ្នា ដោយប្រើស្ដារព្រឹត្តិការណ៍ផ្សេងៗគ្នា
+
+> **[!NOTE]** វាសមរម្យសម្គាល់ថាមានវិធីជាច្រើនដើម្បីបង្កើតស្ដារព្រឹត្តិការណ៍។ អ្នកអាចប្រើមុខងារដែលមិនមានឈ្មោះ ឬបង្កើតមុខងារដែលមានឈ្មោះ។ អ្នកអាចប្រើក្វីកខាត់ផ្សេងៗ ដូចជាការកំណត់គុណលក្ខណៈ `click` ឬប្រើ `addEventListener()`។ ក្នុងលំហាត់របស់យើង យើងនឹងផ្តោតលើ `addEventListener()` និងមុខងារមិនមានឈ្មោះ ព្រោះវាជាវិធីដែលអ្នកអភិវឌ្ឍន៍បណ្តាញភាគច្រើនប្រើ។ វាក៏មានភាពបត់បែនខ្ពស់ផង ដូចដែល `addEventListener()` ធ្វើការសម្រាប់ព្រឹត្តិការណ៍ទាំងអស់ និងអាចផ្ដល់ឈ្មោះព្រឹត្តិការណ៍ជាប៉ារ៉ាម៉ែត្រ។
+
+### ព្រឹត្តិការណ៍រួម
+
+បើទោះបីកម្មវិធីរុករកបណ្តាញផ្ដល់លេខព្រឹត្តិការណ៍ជាច្រើនដែលអ្នកអាចស្ដាប់បាន កម្មវិធីសកម្មភាពច្រើនទើបយូនិយោបល់ច្រើនលើព្រឹត្តិការណ៍សំខាន់ៗមួយចំនួនប៉ុណ្ណោះ។ ការយល់ដឹងពីព្រឹត្តិការណ៍មូលដ្ឋានទាំងនេះ នឹងផ្ដល់គ្រឹះដើម្បីបង្កើតអន្តរកម្មអ្នកប្រើមានសមត្ថភាព។
+
+មាន [ព្រឹត្តិការណ៍ជាច្រើន](https://developer.mozilla.org/docs/Web/Events) សម្រាប់អ្នកស្តាប់នៅពេលបង្កើតកម្មវិធីណាមួយ។ គ្រប់អ្វីដែលអ្នកប្រើធ្វើនៅលើទំព័រមួយបន្ទះបង្កើតព្រឹត្តិការណ៍។ វាផ្ដល់អំណាចច្រើនដើម្បីធានាថាអ្នកប្រើទទួលបានបទពិសោធន៍ដែលអ្នកចង់បាន។ សំណាងល្អ ជាទូទៅ អ្នកត្រូវការព្រឹត្តិការណ៍តិចតួចប៉ុណ្ណោះ។ តោះមកមើលពីព្រឹត្តិការណ៍ទូទៅខ្លះៗ (រួមទាំងពីរព្រឹត្តិការណ៍ដែលយើងនឹងប្រើនៅពេលបង្កើតហ្គេម):
+
+| ព្រឹត្តិការណ៍ | ពិពណ៌នា | ករណីប្រើរួមបញ្ចូល |
+|-------------|-----------|-----------------------|
+| `click` | អ្នកប្រើបានចុចលើអ្វីមួយ | ប៊ូតុង តំណភ្ជាប់ ធាតុមានអន្តរកម្ម |
+| `contextmenu` | អ្នកប្រើបានចុចប៊ូតុងកណ្តុរខាងស្តាំ | មេនឺចុចប៊ូតុងស្តាំសម្រាប់ផ្ទាល់ខ្លួន |
+| `select` | អ្នកប្រើបានដាក់ពណ៌លើអត្ថបទខ្លះ | ការកែសម្រួលអត្ថបទ ការចម្លង |
+| `input` | អ្នកប្រើបានវាយអត្ថបទមួយ | ការត្រួតពិនិត្យបែបបទ ស្វែងរកពេលជាក់លាក់ |
+
+**ការយល់ដឹងពីប្រភេទព្រឹត្តិការណ៍ទាំងនេះ:**
+- **បើកសកម្មភាព** ពេលអ្នកប្រើប្រាស់ធ្វើអន្តរកម្មលើធាតុជាក់លាក់នៅលើទំព័ររបស់អ្នក
+- **ផ្ដល់** ព័ត៌មានលម្អិតអំពីសកម្មភាពអ្នកប្រើតាមរយៈវត្ថុព្រឹត្តិការណ៍
+- **អនុញ្ញាត** អ្នកបង្កើតកម្មវិធីបណ្តាញដែលឆ្លើយតប និងមានអន្តរកម្ម
+- **ដំណើរការ** ដោយមានគោលការណ៍ដូចគ្នាបានលើកម្មវិធីរុករកនិងឧបករណ៍ផ្សេងៗ
+
+## ការបង្កើតហ្គេម
+
+ឥឡូវនេះអ្នកយល់ដឹងពីរបៀបព្រឹត្តិការណ៍ដំណើរការ តោះយកចំណេះដឹងនោះទៅអនុវត្តដោយបង្កើតអ្វីមួយមានប្រយោជន៍។ យើងនឹងបង្កើតហ្គេមវាយល្បឿនមួយដែលបង្ហាញការជួយគ្រប់គ្រងព្រឹត្តិការណ៍ខណៈកំពុងជួយអ្នកបង្កើតជំនាញសំខាន់មួយចំពោះអ្នកអភិវឌ្ឍន៍។
+
+យើងនឹងបង្កើតហ្គេមមួយ ដើម្បីស្វែងយល់ពីរបៀបព្រឹត្តិការណ៍ដំណើរការនៅក្នុង JavaScript។ ហ្គេមរបស់យើងនឹងសាកល្បងជំនាញវាយរបស់អ្នកលេង មួយក្នុងចំណោមជំនាញតិចតួចដែលមានតម្លៃសម្រាប់អ្នកអភិវឌ្ឍន៍ទាំងអស់។ ព័ត៌មានស្ដើងៗ: បន្ទាត់ក្តារចុច QWERTY ដែលយើងប្រើនៅថ្ងៃនេះ ត្រូវបានរចនាឡើងនៅចលនាសតវត្សទី ១៨៧០ សម្រាប់ម៉ាស៊ីនវាយអក្សរ — និងជំនាញវាយល្អនៅតែមើលថ្លៃសម្រាប់អ្នកគូដនៅថ្ងៃនេះ! របៀបលំហូរទូទៅរបស់ហ្គេមមានដូចជា៖
+
+```mermaid
+flowchart TD
+ A[ចំណុចចាប់ផ្តើមលេង] --> B[បង្ហាញអត្ថបទចុងក្រោយរឿង]
+ B --> C[អ្នកលេងវាយនៅក្នុងប្រអប់អត្ថបទ]
+ C --> D{ពាក្យបានបញ្ចប់រួចហើយ?}
+ D -->|បាទ| E[គូសពាក្យបន្ទាប់]
+ D -->|ទេ| F{ត្រឹមត្រូវរហូតដល់បច្ចុប្បន្ន?}
+ F -->|បាទ| G[រក្សាររាងទ្រង់ទ្រាយធម្មតា]
+ F -->|ទេ| H[បង្ហាញរាងកំហុស]
+ E --> I{អត្ថបទបញ្ចប់រួចហើយ?}
+ I -->|ទេ| C
+ I -->|បាទ| J[បង្ហាញសារជោគជ័យជាមួយពេលវេលា]
+ G --> C
+ H --> C
+```
+**នេះជាវិធីដែលហ្គេមរបស់យើងនឹងដំណើរការ:**
+- **ចាប់ផ្តើម** នៅពេលអ្នកលេងចុចប៊ូតុងចាប់ផ្តើម ហើយបង្ហាញអត្ថបទយ៉ាងចៃដន្យមួយ
+- **តាមដាន** ការវាយវាយចាប់ពីមួយពាក្យទៅមួយពាក្យនៅពេលវិត
+- **បង្ហាញខ្លឹមសារពាក្យបច្ចុប្បន្នដើម្បីផ្តោតបំណងអ្នកលេង**
+- **ផ្ដល់** មតិយោបល់មើលឃើញភ្លាមៗសម្រាប់កំហុសវាយ
+- **គណនានិងបង្ហាញ** ពេលវេលាសរុបនៅពេលសម្រេចការសរសេរអត្ថបទ
+
+ចាំបាច់បង្កើតហ្គេមរបស់យើង ហើយរៀនអំពីព្រឹត្តិការណ៍!
+
+### រចនាសម្ព័ន្ធឯកសារ
+
+មុនចាប់ផ្តើមសរសេរកូដ ហ្នឹងត្រូវរៀបចំឡើង! ការមានរចនាសម្ព័ន្ធឯកសារស្អាតពីដំបូងនឹងជួយអ្នកបញ្ជាក់ក្បាលក្រោយ និងធ្វើឲ្យគម្រោងរបស់អ្នកមើលមានជំនាញជាងមុន។ 😊
+
+យើងនឹងរក្សាថ្មីតែមួយដែលមានបីឯកសារ៖ `index.html` សម្រាប់រចនាសម្ព័ន្ធទំព័រ, `script.js` សម្រាប់គ្រប់គ្រងហ្គេមទាំងមូល, និង `style.css` ដើម្បីធ្វើឲ្យទាំងអស់មើលស្អាត។ នេះជាក្រុមបីគ្រឿងទួតដែលគ្រប់គ្រងបណ្តាញភាគច្រើន!
+
+**បង្កើតថតថ្មីសម្រាប់ការងាររបស់អ្នក ដោយបើកផ្ទាំងបញ្ជា ឬទំព័របញ្ជា និងបញ្ជាក់បញ្ចូលបញ្ជាខាងក្រោម៖**
+
+```bash
+# Linux ឬ macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+**នេះជាអ្វីដែលបញ្ជាខាងលើធ្វើ៖**
+- **បង្កើត** ថតថ្មីឈ្មោះ `typing-game` សម្រាប់ឯកសារគម្រោងរបស់អ្នក
+- **ចូលទៅក្នុង** ថតដែលបានបង្កើតថ្មីដោយស្វ័យប្រវត្តិ
+- **រៀបចំ** កន្លែងធ្វើការស្អាតសម្រាប់ការអភិវឌ្ឍហ្គេមរបស់អ្នក
+
+**បើក Visual Studio Code៖**
+
+```bash
+code .
+```
+
+**បញ្ជានេះ:**
+- **បើក** Visual Studio Code នៅក្នុងថតបច្ចុប្បន្ន
+- **បើក** ថតគម្រោងរបស់អ្នកនៅក្នុងកម្មវិធីកែសម្រួល
+- **ផ្ដល់** ការចូលដំណើរការទៅកម្មវិធីអភិវឌ្ឍន៍ទាំងអស់ដែលអ្នកត្រូវការ
+
+**បន្ថែមបីឯកសារចូលក្នុងថតនៅ Visual Studio Code ជាមួយឈ្មោះដូចខាងក្រោម៖**
+- `index.html` - មានរចនាសម្ព័ន្ធនិងមាតិកាហ្គេមរបស់អ្នក
+- `script.js` - គ្រប់គ្រងតុល្យភាពហ្គេមនិងស្ដារព្រឹត្តិការណ៍
+- `style.css` - កំណត់រូបរាងនិងរាងកាយបណ្ដាញ
+
+## បង្កើតចំណុចប្រជុំបណ្ដាញអ្នកប្រើ
+
+ឥឡូវនេះតោះបង្កើតឆាកដែលនឹងធ្វើដំណើរការកម្មវិធីហ្គេមរបស់យើង! គិតថាវាដូចការរចនាផ្ទាំងគ្រប់គ្រងសម្រាប់យន្តហោះចរាចរណ៍ — ពួកយើងត្រូវធានាថា អ្វីៗដែលអ្នកលេងត្រូវការស្ថិតនៅកន្លែងដែលពួកគេទន្ទេញ។
+
+យើងត្រូវកំណត់គ្រាន់តែអ្វីដែលហ្គេមយើងត្រូវការ។ ប្រសិនបើអ្នកកំពុងលេងហ្គេមវាយ តើអ្នកចង់ឃើញអ្វីនៅលើអេក្រង់? នេះជាអ្វីដែលយើងត្រូវការ៖
+
+| ធាតុ UI | គោលបំណង | ធាតុ HTML |
+|----------|-----------|------------|
+| បង្ហាញពាក្យ | បង្ហាញអត្ថបទដែលត្រូវវាយ | `
` មាន `id="quote"` |
+| តំបន់សារ | បង្ហាញស្ថានភាពនិងសារជោគជ័យ | `
` មាន `id="message"` |
+| ប្រអប់វាយ | កន្លែងដែលអ្នកលេងវាយពាក្យ | `` មាន `id="typed-value"` |
+| ប៊ូតុងចាប់ផ្តើម | ចាប់ផ្តើមហ្គេម | `