` with `id="quote"` | | Message Area | status နဲ့ အောင်မြင်မှု message တွေကို ပြသတယ် | `

` with `id="message"` | | Text Input | player တွေ စာသားကို ရိုက်ထည့်တဲ့နေရာ | `` with `id="typed-value"` | | Start Button | ဂိမ်းကို စတင်စေတယ် | `` with `id="start"` | **UI structure ကို နားလည်ခြင်း:** - **အကြောင်းအရာတွေကို logic အတိုင်း အပေါ်ကနေ အောက်ကို စီစဉ်တယ်** - **element တွေကို JavaScript နဲ့ target လုပ်ဖို့ unique IDs တွေ သတ်မှတ်တယ်** - **အသုံးပြုသူအတွေ့အကြုံကို ပိုမိုကောင်းမွန်စေဖို့ clear visual hierarchy ပေးတယ်** - **accessibility အတွက် semantic HTML elements တွေ ပါဝင်တယ်** အဲဒီ element တွေကို JavaScript မှာ အလုပ်လုပ်ဖို့ ID တွေလိုအပ်ပါတယ်။ CSS နဲ့ JavaScript ဖိုင်တွေကို reference တွေထည့်ပေးရပါမယ်။ ` | Quote Array | ဂိမ်းအတွက် အသုံးပြုနိုင်သော စကားများကို သိမ်းဆည်းထားရန် | `['Quote 1', 'Quote 2', ...]` | | စကားလုံး Array | လက်ရှိ စကားကို စကားလုံးတစ်ခုချင်းစီအဖြစ် ခွဲခြားရန် | `['When', 'you', 'have', ...]` | | စကားလုံး အညွှန်း | ကစားသူရိုက်နေသော စကားလုံးကို မှတ်သားရန် | `0, 1, 2, 3...` | | စတင်ချိန် | အချိန်ကုန်လွန်မှုကို ရမှတ်တွက်ရန် | `Date.now()` | **UI elements များအတွက် ရည်ညွှန်းချက်များလည်း လိုအပ်ပါမည်။** | Element | ID | ရည်ရွယ်ချက် | |---------|----|-------------| | Text input | `typed-value` | ကစားသူများ ရိုက်ထည့်ရန်နေရာ | | Quote display | `quote` | ရိုက်ရန် စကားကို ပြသရန် | | Message area | `message` | အခြေအနေ အပ်ဒိတ်များကို ပြရန် | ```javascript // inside script.js // all of our quotes const quotes = [ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', 'There is nothing more deceptive than an obvious fact.', 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', 'I never make exceptions. An exception disproves the rule.', 'What one man can invent another can discover.', 'Nothing clears up a case so much as stating it to another person.', 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', ]; // store the list of words and the index of the word the player is currently typing let words = []; let wordIndex = 0; // the starting time let startTime = Date.now(); // page elements const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message'); const typedValueElement = document.getElementById('typed-value'); ``` **ဒီ setup code က ဘာတွေကို ပြုလုပ်ပေးနိုင်သလဲဆိုတာ ခွဲခြမ်းစိတ်ဖြာကြည့်ပါ။** - **သိမ်းဆည်း** - `const` ကို အသုံးပြု၍ Sherlock Holmes စကားများကို array အဖြစ် သိမ်းဆည်းထားသည်။ စကားများသည် မပြောင်းလဲမည်မဟုတ်သောကြောင့် `const` ကို အသုံးပြုသည်။ - **စတင်** - `let` ကို အသုံးပြု၍ tracking variables များကို စတင်ထားသည်။ ဂိမ်းကစားနေစဉ်တွင် ဤတန်ဖိုးများ ပြောင်းလဲမည်ဖြစ်သည်။ - **ရယူ** - DOM elements များကို `document.getElementById()` ဖြင့် ရယူထားသည်။ အလွယ်တကူ access ရနိုင်ရန်။ - **အခြေခံအဆောက်အအုံ** - ဂိမ်း၏ လုပ်ဆောင်မှုအားလုံးအတွက် ရှင်းလင်းသော variable အမည်များဖြင့် အခြေခံအဆောက်အအုံကို ပြုလုပ်ထားသည်။ - **စီမံခန့်ခွဲမှု** - ဆက်စပ်သော data နှင့် elements များကို logic အရ စနစ်တကျ စီမံထားသည်။ ✅ သင့်ဂိမ်းအတွက် စကားများကို ထပ်မံထည့်သွင်းပါ။ > 💡 **Pro Tip**: `document.getElementById()` ကို အသုံးပြု၍ code တွင် elements များကို မည်သည့်အချိန်တွင်မဆို ရယူနိုင်သည်။ ဤ elements များကို regular basis ဖြင့် ရည်ညွှန်းမည်ဖြစ်သောကြောင့် string literals တွင် typographical error မဖြစ်စေရန် constants များကို အသုံးပြုပါ။ [Vue.js](https://vuejs.org/) သို့မဟုတ် [React](https://reactjs.org/) က frameworks များသည် သင့် code ကို အလွယ်တကူ စီမံရန် ကူညီပေးနိုင်သည်။ > **ဤနည်းလမ်းသည် အလွန်ကောင်းမွန်သောအကြောင်းရင်းများ:** - **ကာကွယ်** - elements များကို မကြိမ်ကြိမ် ရည်ညွှန်းသောအခါ spelling error မဖြစ်စေရန် - **တိုးတက်** - ရှင်းလင်းသော constant အမည်များဖြင့် code ကို ဖတ်ရှုနိုင်မှု တိုးတက်စေသည်။ - **အဆင်ပြေ** - IDE support ကို autocomplete နှင့် error checking ဖြင့် ပိုမိုကောင်းမွန်စေသည်။ - **ပြုပြင်ရန် လွယ်ကူ** - element IDs များ ပြောင်းလဲပါက refactoring ကို ပိုမိုလွယ်ကူစေသည်။ `const`, `let` နှင့် `var` အသုံးပြုမှုအကြောင်း ရှင်းပြထားသော ဗီဒီယိုကို ကြည့်ပါ။ [](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables") > 🎥 အထက်ပါပုံကို click လုပ်၍ variables အကြောင်း ဗီဒီယိုကို ကြည့်ပါ။ ### စတင်မှု logic ထည့်သွင်းပါ ဒီမှာ အားလုံးကို ပေါင်းစည်းထားပါပြီ! 🚀 သင့်ရဲ့ ပထမဆုံး event listener ကို ရေးသားမယ့်အချိန်ရောက်ပါပြီ။ Button ကို click လုပ်တဲ့အခါ code က အတုယူပြီး တုန့်ပြန်တာကို မြင်ရတာ အရမ်းကို စိတ်ကျေနပ်စရာကောင်းပါတယ်။ စဉ်းစားကြည့်ပါ: တစ်နေရာရာမှာ ကစားသူတစ်ဦးက "Start" button ကို click လုပ်မယ်၊ သင့် code က သူတို့အတွက် ပြင်ဆင်ထားရမယ်။ သူတို့ click လုပ်မယ့်အချိန်ကို မသိပါဘူး - ချက်ချင်းလား၊ coffee သွားယူပြီးမှလား - ဒါပေမယ့် သူတို့ click လုပ်တဲ့အခါမှာ သင့်ဂိမ်းက အသက်ဝင်လာမယ်။ User က `start` ကို click လုပ်တဲ့အခါမှာ quote တစ်ခုကို ရွေးချယ်ပြီး၊ user interface ကို ပြင်ဆင်ပြီး၊ လက်ရှိစကားလုံးနှင့် အချိန်ကို tracking ပြုလုပ်ရန် လိုအပ်ပါမည်။ အောက်တွင် သင့် JavaScript ကို ထည့်သွင်းရန်လိုအပ်သည်။ script block အပြီးမှာ ဆွေးနွေးထားပါမည်။ ```javascript // at the end of script.js document.getElementById('start').addEventListener('click', () => { // get a quote const quoteIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[quoteIndex]; // Put the quote into an array of words words = quote.split(' '); // reset the word index for tracking wordIndex = 0; // UI updates // Create an array of span elements so we can set a class const spanWords = words.map(function(word) { return `${word} `}); // Convert into string and set as innerHTML on quote display quoteElement.innerHTML = spanWords.join(''); // Highlight the first word quoteElement.childNodes[0].className = 'highlight'; // Clear any prior messages messageElement.innerText = ''; // Setup the textbox // Clear the textbox typedValueElement.value = ''; // set focus typedValueElement.focus(); // set the event handler // Start the timer startTime = new Date().getTime(); }); ``` **Code ကို logical အပိုင်းများအလိုက် ခွဲခြမ်းစိတ်ဖြာကြည့်ပါ:** **📊 စကားလုံး Tracking Setup:** - **ရွေးချယ်** - `Math.floor()` နှင့် `Math.random()` ကို အသုံးပြု၍ စုံလင်မှုရှိသော random quote ကို ရွေးချယ်သည်။ - **ပြောင်းလဲ** - quote ကို `split(' ')` ဖြင့် စကားလုံးတစ်ခုချင်းစီ array အဖြစ် ပြောင်းလဲသည်။ - **ပြန်စတင်** - ကစားသူသည် ပထမဆုံးစကားလုံးမှ စတင်ရမည်ဖြစ်သောကြောင့် `wordIndex` ကို 0 သို့ ပြန်စတင်သည်။ - **ပြင်ဆင်** - ဂိမ်းအခြေအနေကို အသစ် round အတွက် ပြင်ဆင်ထားသည်။ **🎨 UI Setup နှင့် Display:** - **ဖန်တီး** - `` elements array ကို ဖန်တီးပြီး၊ စကားလုံးတစ်ခုချင်းစီကို individual styling အတွက် wrap လုပ်ထားသည်။ - **ပေါင်းစည်း** - span elements များကို single string အဖြစ် ပေါင်းစည်းထားသည်။ - **အထူးပြု** - ပထမဆုံးစကားလုံးကို `highlight` CSS class ထည့်သွင်းထားသည်။ - **ရှင်းလင်း** - ယခင်ဂိမ်း message များကို ရှင်းလင်းထားသည်။ **⌨️ Textbox ပြင်ဆင်မှု:** - **ရှင်းလင်း** - input field တွင် ရှိနေသော text များကို ရှင်းလင်းထားသည်။ - **အာရုံစိုက်မှု** - textbox ကို focus လုပ်ထားပြီး ကစားသူများသည် ချက်ချင်းရိုက်နိုင်ရန် ပြင်ဆင်ထားသည်။ - **ပြင်ဆင်** - input area ကို ဂိမ်း session အသစ်အတွက် ပြင်ဆင်ထားသည်။ **⏱️ Timer Initialization:** - **ရယူ** - လက်ရှိ timestamp ကို `new Date().getTime()` ဖြင့် ရယူထားသည်။ - **တိကျမှု** - typing speed နှင့် ပြီးဆုံးချိန်ကို တိကျစွာတွက်ချက်နိုင်ရန်။ - **စတင်** - ဂိမ်း session အတွက် performance tracking ကို စတင်ထားသည်။ ### Typing logic ထည့်သွင်းပါ ဒီမှာ ဂိမ်းရဲ့ အဓိကအပိုင်းကို ရင်ဆိုင်ရတော့မယ်! အစမှာ အများကြီးလိုက်မယ်လို့ ထင်ရင် မစိုးရိမ်ပါနဲ့ - အပိုင်းတိုင်းကို ရှင်းလင်းစွာ လမ်းညွှန်ပေးမယ်၊ နောက်ဆုံးမှာ အားလုံးကို နားလည်နိုင်ပါလိမ့်မယ်။ ဒီမှာ တော်တော် advanced ဖြစ်တဲ့ logic ကို တည်ဆောက်မှာပါ: တစ်ယောက်ယောက်က စာလုံးတစ်လုံးကို ရိုက်တဲ့အခါမှာ၊ code က သူတို့ရိုက်တာကို စစ်ဆေးပြီး feedback ပေးပြီး၊ နောက်တစ်ခု ဘာလုပ်ရမယ်ဆိုတာ ဆုံးဖြတ်ပေးမှာပါ။ 1970s က WordStar လို word processors တွေက typists တွေကို real-time feedback ပေးတဲ့နည်းလမ်းနဲ့ ဆင်တူပါတယ်။ ```javascript // at the end of script.js typedValueElement.addEventListener('input', () => { // Get the current word const currentWord = words[wordIndex]; // get the current value const typedValue = typedValueElement.value; if (typedValue === currentWord && wordIndex === words.length - 1) { // end of sentence // Display success const elapsedTime = new Date().getTime() - startTime; const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; messageElement.innerText = message; } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { // end of word // clear the typedValueElement for the new word typedValueElement.value = ''; // move to the next word wordIndex++; // reset the class name for all elements in quote for (const wordElement of quoteElement.childNodes) { wordElement.className = ''; } // highlight the new word quoteElement.childNodes[wordIndex].className = 'highlight'; } else if (currentWord.startsWith(typedValue)) { // currently correct // highlight the next word typedValueElement.className = ''; } else { // error state typedValueElement.className = 'error'; } }); ``` **Typing logic flow ကို နားလည်ပါ:** ဒီ function က waterfall approach ကို အသုံးပြုပြီး၊ အခြေအနေများကို အထူးသက်သက်မှ အထွေထွေသက်သက်အထိ စစ်ဆေးသည်။ အခြေအနေတစ်ခုချင်းစီကို ခွဲခြမ်းစိတ်ဖြာကြည့်ပါ: ```mermaid flowchart TD A[Player types character] --> B[Get current word and typed value] B --> C{Quote complete?} C -->|Yes| D[Show completion message with time] C -->|No| E{Word complete with space?} E -->|Yes| F[Clear input, move to next word, update highlight] E -->|No| G{Typing correctly so far?} G -->|Yes| H[Remove error styling] G -->|No| I[Show error styling] ``` **🏁 Quote ပြီးဆုံး (Scenario 1):** - **စစ်ဆေး** - typed value က လက်ရှိစကားလုံးနှင့် ကိုက်ညီပြီး၊ နောက်ဆုံးစကားလုံးမှာ ရှိနေသည်။ - **တွက်ချက်** - start time ကို current time မှ ဖြုတ်၍ အချိန်ကုန်လွန်မှုကို တွက်ချက်သည်။ - **ပြောင်းလဲ** - milliseconds ကို seconds အဖြစ် `1,000` ဖြင့်စား၍ ပြောင်းလဲသည်။ - **ပြသ** - ပြီးဆုံးချိန်နှင့်အတူ အောင်မြင်မှု message ကို ပြသသည်။ **✅ စကားလုံး ပြီးဆုံး (Scenario 2):** - **ရှာဖွေ** - input က space ဖြင့် အဆုံးသတ်သောအခါ စကားလုံး ပြီးဆုံးမှုကို ရှာဖွေသည်။ - **အတည်ပြု** - trimmed input က လက်ရှိစကားလုံးနှင့် တိကျစွာကိုက်ညီမှုရှိသည်။ - **ရှင်းလင်း** - input field ကို ရှင်းလင်းထားသည်။ - **တိုးတက်** - `wordIndex` ကို တစ်ခုတိုး၍ နောက်တစ်ခုသို့ ရောက်သည်။ - **အထူးပြု** - visual highlighting ကို update လုပ်ပြီး၊ class များအားလုံးကို ဖယ်ရှားပြီး၊ စကားလုံးအသစ်ကို highlight လုပ်သည်။ **📝 Typing ဆက်လက်လုပ်ဆောင်မှု (Scenario 3):** - **စစ်ဆေး** - လက်ရှိစကားလုံးသည် ရိုက်ထားသော စာလုံးများနှင့် စတင်မှုကိုက်ညီမှုရှိသည်။ - **ဖယ်ရှား** - error styling ကို ဖယ်ရှားပြီး input မှန်ကန်မှုကို ပြသသည်။ - **ခွင့်ပြု** - interruption မရှိဘဲ typing ကို ဆက်လက်လုပ်ဆောင်နိုင်သည်။ **❌ Error State (Scenario 4):** - **စတင်** - typed text က မျှော်လင့်ထားသော စကားလုံးအစနှင့် မကိုက်ညီသောအခါ trigger ဖြစ်သည်။ - **အသုံးပြု** - error CSS class ကို ထည့်သွင်းပြီး visual feedback ကို ချက်ချင်းပေးသည်။ - **ကူညီ** - ကစားသူများသည် အမှားကို အလွယ်တကူ ရှာဖွေပြီး ပြင်ဆင်နိုင်သည်။ ## သင့် application ကို စမ်းသပ်ပါ သင်လုပ်ဆောင်ထားတာကို ကြည့်ပါ! 🎉 သင် event-driven programming ကို အသုံးပြု၍ အစမှစ၍ typing game တစ်ခုကို တည်ဆောက်ထားပါပြီ။ ဒီအောင်မြင်မှုကို ခံစားပါ - ဒါဟာ အလွယ်တကူလုပ်နိုင်တဲ့အရာမဟုတ်ပါဘူး! အခုတော့ စမ်းသပ်ဖို့အချိန်ရောက်ပါပြီ! အတိအကျအလုပ်လုပ်မလား? ဘာမှားနေမလား? အဓိကက - အလုပ်မလုပ်တာတွေ ရှိရင်လည်း အဆင်ပြေပါတယ်။ အတွေ့အကြုံရှိတဲ့ developer တွေတောင် code မှာ bug တွေကို regular အနေနဲ့ ရှာတွေ့ရတတ်ပါတယ်။ ဒါဟာ development process ရဲ့ အစိတ်အပိုင်းတစ်ခုပါပဲ! `start` ကို click လုပ်ပြီး ရိုက်လိုက်ပါ! အရင် animation ကို မြင်ခဲ့သလို ဖြစ်သင့်ပါတယ်။  **သင့် application ကို စမ်းသပ်ရန်:** - **စစ်ဆေး** - Start ကို click လုပ်တဲ့အခါ random quote ကို ပြသမှုရှိမရှိ - **အတည်ပြု** - typing က လက်ရှိစကားလုံးကို မှန်ကန်စွာ highlight လုပ်မှုရှိမရှိ - **စစ်ဆေး** - typing မှားသောအခါ error styling ပြသမှုရှိမရှိ - **အတည်ပြု** - စကားလုံးများ ပြီးဆုံးသောအခါ highlight ကို မှန်ကန်စွာ ပြောင်းလဲမှုရှိမရှိ - **စမ်းသပ်** - quote ပြီးဆုံးသောအခါ အချိန်နှင့်အတူ ပြီးဆုံး message ကို ပြသမှုရှိမရှိ **Common debugging tips:** - **စစ်ဆေး** - browser console (F12) တွင် JavaScript errors ရှိမရှိ - **အတည်ပြု** - file names အားလုံးကို အတိအကျကိုက်ညီမှုရှိမရှိ (case-sensitive) - **သေချာ** - Live Server အလုပ်လုပ်မှုနှင့် refresh မှန်ကန်မှုရှိမရှိ - **စမ်းသပ်** - random selection အလုပ်လုပ်မှုကို အတည်ပြုရန် စကားများကို အမျိုးမျိုးစမ်းသပ်ပါ --- ## GitHub Copilot Agent Challenge 🎮 Agent mode ကို အသုံးပြု၍ အောက်ပါ challenge ကို ပြီးမြောက်ပါ: **ဖော်ပြချက်:** ကစားသူ၏ စွမ်းဆောင်ရည်အပေါ်မူတည်၍ ဂိမ်းကို ပြောင်းလဲစေသော အခက်အခဲစနစ်ကို တိုးချဲ့ပါ။ ဤ challenge သည် advanced event handling, data analysis, နှင့် dynamic UI updates ကို လေ့ကျင့်ရန် ကူညီပေးပါမည်။ **Prompt:** Typing game ကို တိုးချဲ့ပြီး အခက်အခဲစနစ်ကို ဖန်တီးပါ: 1. ကစားသူ၏ typing speed (words per minute) နှင့် accuracy percentage ကို tracking ပြုလုပ်ပါ။ 2. Easy (ရိုးရှင်းသော စကားများ), Medium (လက်ရှိစကားများ), Hard (punctuation ပါသော စကားများ) ဆိုသော အခက်အခဲအဆင့် ၃ ခုကို အလိုအလျောက် ပြောင်းလဲစေပါ။ 3. လက်ရှိ အခက်အခဲအဆင့်နှင့် ကစားသူ၏ စာရင်းများကို UI တွင် ပြသပါ။ 4. 3 ကြိမ်ဆက်တိုက် ကောင်းမွန်သော စွမ်းဆောင်မှုရှိပါက အခက်အခဲကို တိုးမြှင့်ပါ။ 5. အခက်အခဲ ပြောင်းလဲမှုကို ပြသရန် visual feedback (အရောင်များ, animations) ထည့်သွင်းပါ။ HTML elements, CSS styles, နှင့် JavaScript functions များကို လိုအပ်သလို ထည့်သွင်းပါ။ အမှားများကို ကာကွယ်ရန် error handling ကို သေချာစွာ ပြုလုပ်ပါ။ ဂိမ်းကို accessible ဖြစ်စေရန် ARIA labels များကို ထည့်သွင်းပါ။ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) အကြောင်း ပိုမိုလေ့လာပါ။ ## 🚀 Challenge သင့် typing game ကို နောက်တစ်ဆင့်တိုးတက်စေဖို့ အဆင်သင့်ဖြစ်ပါပြီလား? Event handling နှင့် DOM manipulation ကို ပိုမိုနားလည်စေရန် ဤ advanced features များကို စမ်းသပ်ပါ: **Functionality ပိုမိုထည့်သွင်းပါ:** | Feature | ဖော်ပြချက် | သင်လေ့ကျင့်မည့် ကျွမ်းကျင်မှုများ | |---------|-------------|------------------------| | **Input Control** | `input` event listener ကို ပြီးဆုံးချိန်တွင် disable လုပ်ပြီး၊ button ကို click လုပ်သောအခါ ပြန်လည် enable လုပ်ပါ | Event management နှင့် state control | | **UI State Management** | ကစားသူသည် quote ကို ပြီးဆုံးသောအခါ textbox ကို disable လုပ်ပါ | DOM property manipulation | | **Modal Dialog** | အောင်မြင်မှု message ကို ပြသရန် modal dialog box ကို ဖန်တီးပါ | Advanced UI patterns နှင့် accessibility | | **High Score System** | `localStorage` ကို အသုံးပြု၍ high scores ကို သိမ်းဆည်းပါ | Browser storage APIs နှင့် data persistence | **Implementation tips:** - **လေ့လာ** `localStorage.setItem()` နှင့် `localStorage.getItem()` ကို persistent storage အတွက် - **လေ့ကျင့်** event listeners များကို dynamic အနေနဲ့ ထ --- **အကြောင်းကြားချက်**: ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု [Co-op Translator](https://github.com/Azure/co-op-translator) ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူ့ဘာသာပြန်ပညာရှင်များကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားယူမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။