` `id="quote"` सहित | | मेसेज क्षेत्र | स्टाटस र सफलता सन्देशहरू देखाउँछ | `

` `id="message"` सहित | | टेक्स्ट इनपुट | जहाँ खेलाडीहरूले कोट टाइप गर्छन् | `` `id="typed-value"` सहित | | स्टार्ट बटन | खेल सुरु गर्छ | `` `id="start"` सहित | **UI संरचना बुझ्दै:** - **सामग्रीलाई** माथिबाट तलसम्म तार्किक रूपमा व्यवस्थित गर्छ - **तत्वहरूलाई** JavaScript टार्गेटिङको लागि युनिक IDs प्रदान गर्छ - **स्पष्ट दृश्यात्मक पदानुक्रम प्रदान गर्छ** राम्रो प्रयोगकर्ता अनुभवको लागि - **सामाजिक HTML तत्वहरू समावेश गर्छ** पहुँचयोग्यताको लागि यी सबैलाई JavaScript मा काम गर्नको लागि IDs चाहिन्छ। हामीले सिर्जना गर्न लागेको CSS र JavaScript फाइलहरूको सन्दर्भ पनि थप्नेछौं। `index.html` नामको नयाँ फाइल सिर्जना गर्नुहोस्। निम्न HTML थप्नुहोस्: ```html

Typing game!

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

Start ``` **यो HTML संरचनाले के हासिल गर्छ:** - **CSS स्टाइलशीटलाई लिंक गर्छ** `` मा स्टाइलिङको लागि - **प्रयोगकर्ताहरूको लागि स्पष्ट हेडिङ र निर्देशनहरू सिर्जना गर्छ** - **विशिष्ट IDs सहित प्लेसहोल्डर प्याराग्राफहरू स्थापना गर्छ** गतिशील सामग्रीको लागि - **एक इनपुट फिल्ड समावेश गर्छ** पहुँचयोग्यता विशेषताहरू सहित - **स्टार्ट बटन प्रदान गर्छ** खेल ट्रिगर गर्न - **JavaScript फाइल लोड गर्छ** अन्त्यमा, इष्टतम प्रदर्शनको लागि ### एप्लिकेसन लन्च गर्नुहोस् विकासको क्रममा बारम्बार तपाईंको एप्लिकेसन परीक्षण गर्दा तपाईंले समस्या चाँडै पत्ता लगाउन सक्नुहुन्छ र वास्तविक समयमा तपाईंको प्रगति देख्न सक्नुहुन्छ। लाइभ सर्भर एक अमूल्य उपकरण हो जसले तपाईंले फाइलहरू बचत गर्दा तपाईंको ब्राउजरलाई स्वतः रिफ्रेस गर्छ, विकासलाई धेरै कुशल बनाउँछ। सधैं उत्तम हुन्छ कि विकास क्रमिक रूपमा गरौं र चीजहरू कस्तो देखिन्छ हेर्नुहोस्। हाम्रो एप्लिकेसन लन्च गरौं। भिजुअल स्टुडियो कोडको लागि [लाइभ सर्भर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) नामक एक अद्भुत एक्सटेन्सन छ जसले तपाईंको एप्लिकेसनलाई स्थानीय रूपमा होस्ट गर्नेछ र तपाईंले फाइलहरू बचत गर्दा ब्राउजरलाई रिफ्रेस गर्नेछ। **[लाइभ सर्भर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) इन्स्टल गर्नुहोस् र लिंकमा क्लिक गरेर इन्स्टल गर्नुहोस्:** **इन्स्टलेसनको क्रममा के हुन्छ:** - **तपाईंको ब्राउजरलाई भिजुअल स्टुडियो कोड खोल्न प्रेरित गर्छ** - **एक्सटेन्सन इन्स्टलेसन प्रक्रियामा मार्गदर्शन गर्छ** - **भिजुअल स्टुडियो कोडलाई पुनः सुरु गर्न आवश्यक हुन सक्छ** सेटअप पूरा गर्न **इन्स्टल भएपछि, भिजुअल स्टुडियो कोडमा, Ctrl-Shift-P (वा Cmd-Shift-P) क्लिक गरेर कमाण्ड प्यालेट खोल्नुहोस्:** **कमाण्ड प्यालेट बुझ्दै:** - **भिजुअल स्टुडियो कोडका सबै कमाण्डहरूमा** छिटो पहुँच प्रदान गर्छ - **टाइप गर्दा कमाण्डहरू खोज्छ** - **छिटो विकासको लागि** किबोर्ड सर्टकटहरू प्रदान गर्छ **"Live Server: Open with Live Server" टाइप गर्नुहोस्:** **लाइभ सर्भरले के गर्छ:** - **तपाईंको प्रोजेक्टको लागि स्थानीय विकास सर्भर सुरु गर्छ** - **तपाईंले फाइलहरू बचत गर्दा ब्राउजरलाई स्वतः रिफ्रेस गर्छ** - **तपाईंको फाइलहरूलाई स्थानीय URL (सामान्यतया `localhost:5500`) बाट सर्भ गर्छ** **ब्राउजर खोल्नुहोस् र `https://localhost:5500` मा नेभिगेट गर्नुहोस्:** अब तपाईंले बनाएको पेज देख्न सक्नुहुन्छ! केही कार्यक्षमता थपौं। ## CSS थप्नुहोस् अब चीजहरू राम्रो देखाऔं! दृश्यात्मक प्रतिक्रिया कम्प्युटिङको सुरुवाती दिनदेखि नै प्रयोगकर्ता इन्टरफेसहरूको लागि महत्त्वपूर्ण भएको छ। १९८० को दशकमा, अनुसन्धानकर्ताहरूले पत्ता लगाए कि तत्काल दृश्यात्मक प्रतिक्रिया प्रयोगकर्ताको प्रदर्शनलाई नाटकीय रूपमा सुधार गर्छ र त्रुटिहरू कम गर्छ। यही कुरा हामी सिर्जना गर्नेछौं। हाम्रो खेलले के भइरहेको छ भन्ने कुरामा स्पष्ट हुनुपर्छ। खेलाडीहरूले तुरुन्तै थाहा पाउनुपर्छ कि कुन शब्द टाइप गर्नुपर्ने हो, र यदि उनीहरूले गल्ती गरे भने, उनीहरूले तुरुन्तै देख्नुपर्छ। केही सरल तर प्रभावकारी स्टाइलिङ सिर्जना गरौं: `style.css` नामको नयाँ फाइल सिर्जना गर्नुहोस् र निम्न सिंट्याक्स थप्नुहोस्। ```css /* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; } ``` **यी CSS क्लासहरू बुझ्दै:** - **हालको शब्दलाई हाइलाइट गर्छ** स्पष्ट दृश्यात्मक मार्गदर्शनको लागि पहेँलो पृष्ठभूमि सहित - **टाइपिङ त्रुटिहरूलाई संकेत गर्छ** हल्का कोरल पृष्ठभूमि रंगको साथ - **तुरुन्तै प्रतिक्रिया प्रदान गर्छ** प्रयोगकर्ताको टाइपिङ प्रवाहलाई बाधा नपुर्‍याई - **पहुंचयोग्यताको लागि** र स्पष्ट दृश्यात्मक सञ्चारको लागि विरोधाभासी रंगहरू प्रयोग गर्छ ✅ CSS को कुरा गर्दा तपाईं आफ्नो पेजलाई जस्तो चाहनुहुन्छ त्यस्तै लेआउट गर्न सक्नुहुन्छ। अलिकति समय निकालेर पेजलाई अझ आकर्षक बनाउनुहोस्: - फरक फन्ट चयन गर्नुहोस् - हेडरहरूलाई रंग दिनुहोस् - वस्तुहरूलाई पुनः आकार दिनुहोस् ## JavaScript अब चाखलाग्दो कुरा सुरु हुन्छ! 🎉 हामीसँग हाम्रो HTML संरचना र CSS स्टाइलिङ छ, तर अहिले हाम्रो खेल एउटा सुन्दर कार | उद्धरणहरूको सूची | खेलका लागि सबै सम्भावित उद्धरणहरू भण्डारण गर्नुहोस् | `['उद्धरण १', 'उद्धरण २', ...]` | | शब्दहरूको सूची | हालको उद्धरणलाई व्यक्तिगत शब्दहरूमा विभाजन गर्नुहोस् | `['जब', 'तपाईं', 'सँग', ...]` | | शब्द सूचकांक | खेलाडीले कुन शब्द टाइप गरिरहेको छ ट्र्याक गर्नुहोस् | `0, 1, 2, 3...` | | सुरु समय | स्कोरिङको लागि बितेको समय गणना गर्नुहोस् | `Date.now()` | **हामीलाई हाम्रो UI तत्वहरूको सन्दर्भ पनि चाहिन्छ:** | तत्व | ID | उद्देश्य | |------|----|---------| | पाठ इनपुट | `typed-value` | जहाँ खेलाडीले टाइप गर्छन् | | उद्धरण प्रदर्शन | `quote` | टाइप गर्न उद्धरण देखाउँछ | | सन्देश क्षेत्र | `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'); ``` **यो सेटअप कोडले के हासिल गर्छ भन्ने कुरा तोड्दै:** - उद्धरणहरू परिवर्तन नहुने भएकाले `const` प्रयोग गरेर शर्लक होम्स उद्धरणहरूको सूची **भण्डारण** गर्दछ - खेलको क्रममा यी मानहरू अपडेट हुने भएकाले `let` प्रयोग गरेर ट्र्याकिङ भेरिएबलहरू **सुरु** गर्दछ - DOM तत्वहरूको सन्दर्भहरू **क्याप्चर** गर्दछ `document.getElementById()` प्रयोग गरेर प्रभावकारी पहुँचको लागि - स्पष्ट र वर्णनात्मक भेरिएबल नामहरूको साथ सबै खेल कार्यक्षमता **सेटअप** गर्दछ - सम्बन्धित डेटा र तत्वहरू **व्यवस्थित** गर्दछ कोड मर्मतलाई सजिलो बनाउन ✅ आफ्नो खेलमा थप उद्धरणहरू थप्न अगाडि बढ्नुहोस् > 💡 **प्रो टिप**: हामीले `document.getElementById()` प्रयोग गरेर कोडमा जबसुकै तत्वहरू पुनः प्राप्त गर्न सक्छौं। किनकि हामीले यी तत्वहरूलाई नियमित रूपमा सन्दर्भ गर्नुपर्नेछ, हामी स्ट्रिङ लिटरलहरूमा टाइपोग्राफिकल त्रुटिहरूबाट बच्नका लागि स्थिरांकहरू प्रयोग गर्नेछौं। [Vue.js](https://vuejs.org/) वा [React](https://reactjs.org/) जस्ता फ्रेमवर्कहरूले तपाईंलाई आफ्नो कोडलाई केन्द्रित गर्न मद्दत गर्न सक्छ। > **यो दृष्टिकोण किन यति राम्रोसँग काम गर्छ:** - **स्पष्टता** प्रदान गर्दछ जब तत्वहरू बारम्बार सन्दर्भ गरिन्छ - **कोड पढ्न सजिलो बनाउँछ** वर्णनात्मक स्थिरांक नामहरूको साथ - **IDE समर्थन सुधार गर्दछ** स्वतः पूर्ण र त्रुटि जाँचको साथ - **पुनः संरचना गर्न सजिलो बनाउँछ** यदि पछि तत्व ID परिवर्तन हुन्छ `const`, `let` र `var` प्रयोग गर्नेबारे भिडियो हेर्न एक मिनेट समय लिनुहोस् [](https://youtube.com/watch?v=JNIXfGiDWM8 "भेरिएबल प्रकारहरू") > 🎥 माथिको छवि क्लिक गरेर भेरिएबलबारे भिडियो हेर्नुहोस्। ### सुरु गर्ने तर्क थप्नुहोस् अब सबै कुरा मिल्न थाल्छ! 🚀 तपाईं आफ्नो पहिलो वास्तविक इभेन्ट लिस्नर लेख्न जाँदै हुनुहुन्छ, र कोडले बटन क्लिकमा प्रतिक्रिया देखाउँदा केही सन्तोषजनक महसुस हुन्छ। सोच्नुहोस्: कतै बाहिर, एक खेलाडीले "सुरु" बटन क्लिक गर्न जाँदैछन्, र तपाईंको कोडले उनीहरूको लागि तयार हुनुपर्छ। हामीलाई थाहा छैन उनीहरूले कहिले क्लिक गर्नेछन् - तुरुन्तै हुन सक्छ, कफी लिन गएपछि हुन सक्छ - तर जब उनीहरूले क्लिक गर्छन्, तपाईंको खेल जीवन्त हुन्छ। जब प्रयोगकर्ताले `start` क्लिक गर्छ, हामीले उद्धरण चयन गर्न, प्रयोगकर्ता इन्टरफेस सेटअप गर्न, र हालको शब्द र समय ट्र्याकिङ सेटअप गर्न आवश्यक छ। तल तपाईंले थप्नुपर्ने JavaScript छ; हामी यसलाई स्क्रिप्ट ब्लकपछि छलफल गर्छौं। ```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(); }); ``` **कोडलाई तार्किक खण्डहरूमा तोड्दै:** **📊 शब्द ट्र्याकिङ सेटअप:** - **चयन गर्छ** `Math.floor()` र `Math.random()` प्रयोग गरेर विविधताको लागि एउटा र्यान्डम उद्धरण - **रूपान्तरण गर्छ** उद्धरणलाई व्यक्तिगत शब्दहरूको सूचीमा `split(' ')` प्रयोग गरेर - **रीसेट गर्छ** `wordIndex` लाई 0 मा किनकि खेलाडी पहिलो शब्दबाट सुरु गर्छन् - **तयार गर्छ** खेलको अवस्था नयाँ राउन्डको लागि **🎨 UI सेटअप र प्रदर्शन:** - **सिर्जना गर्छ** `` तत्वहरूको सूची, प्रत्येक शब्दलाई व्यक्तिगत शैलीको लागि र्याप गर्दै - **जोड्छ** span तत्वहरूलाई एकल स्ट्रिङमा प्रभावकारी DOM अपडेटको लागि - **हाइलाइट गर्छ** पहिलो शब्दलाई `highlight` CSS क्लास थपेर - **पछिल्लो खेल सन्देशहरू मेट्छ** सफा स्लेट प्रदान गर्न **⌨️ टेक्स्टबक्स तयारी:** - **मेट्छ** इनपुट फिल्डमा कुनै पनि विद्यमान पाठ - **फोकस सेट गर्छ** टेक्स्टबक्समा ताकि खेलाडी तुरुन्तै टाइप गर्न सुरु गर्न सकून् - **इनपुट क्षेत्र तयार गर्छ** नयाँ खेल सत्रको लागि **⏱️ टाइमर सुरुवात:** - **क्याप्चर गर्छ** हालको टाइमस्ट्याम्प `new Date().getTime()` प्रयोग गरेर - **सटीक गणना सक्षम गर्छ** टाइपिङ गति र पूरा गर्ने समयको - **सुरु गर्छ** खेल सत्रको लागि प्रदर्शन ट्र्याकिङ ### टाइपिङ तर्क थप्नुहोस् यहाँ हामी हाम्रो खेलको मुटु सम्हाल्छौं! यदि यो सुरुमा धेरै जस्तो लाग्छ भने चिन्ता नगर्नुहोस् - हामी प्रत्येक भागमा हिँड्नेछौं, र अन्त्यमा, तपाईंले यो सबै तार्किक देख्नुहुनेछ। हामी यहाँ निर्माण गर्दैछौं केहि परिष्कृत: जब कसैले अक्षर टाइप गर्छ, हाम्रो कोडले उनीहरूले के टाइप गरे जाँच गर्नेछ, उनीहरूलाई प्रतिक्रिया दिनेछ, र के गर्नुपर्ने निर्णय गर्नेछ। यो 1970 को दशकमा WordStar जस्ता प्रारम्भिक वर्ड प्रोसेसरहरूले टाइपिस्टहरूलाई वास्तविक समय प्रतिक्रिया प्रदान गर्ने तरिकासँग मिल्दोजुल्दो छ। ```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'; } }); ``` **टाइपिङ तर्क प्रवाह बुझ्दै:** यो फङ्सनले सबैभन्दा विशिष्टदेखि सामान्यसम्मका अवस्थाहरू जाँच गर्दै वाटरफल दृष्टिकोण प्रयोग गर्छ। प्रत्येक परिदृश्यलाई तोडौं: ```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] ``` **🏁 उद्धरण पूरा भयो (परिदृश्य १):** - **जाँच गर्छ** कि टाइप गरिएको मान हालको शब्दसँग मेल खान्छ र हामी अन्तिम शब्दमा छौं - **गणना गर्छ** सुरु समयबाट हालको समय घटाएर बितेको समय - **मिलिसेकेन्डलाई सेकेन्डमा रूपान्तरण गर्छ** 1,000 ले भाग गरेर - **प्रदर्शन गर्छ** बधाई सन्देश पूरा गर्ने समयको साथ **✅ शब्द पूरा भयो (परिदृश्य २):** - **पत्ता लगाउँछ** शब्द पूरा भएको जब इनपुट स्पेसमा समाप्त हुन्छ - **मान्य बनाउँछ** कि ट्रिम गरिएको इनपुट हालको शब्दसँग ठीक मेल खान्छ - **इनपुट फिल्ड मेट्छ** अर्को शब्दको लागि - **अगाडि बढ्छ** अर्को शब्दमा `wordIndex` बढाएर - **दृश्य हाइलाइटिङ अपडेट गर्छ** सबै क्लासहरू हटाएर र नयाँ शब्दलाई हाइलाइट गरेर **📝 टाइपिङ प्रगति (परिदृश्य ३):** - **पुष्टि गर्छ** कि हालको शब्दले अहिलेसम्म टाइप गरिएको कुराबाट सुरु हुन्छ - **कुनै पनि त्रुटि शैली हटाउँछ** इनपुट सही छ भनेर देखाउन - **टाइपिङ जारी राख्न अनुमति दिन्छ** बिना अवरोध **❌ त्रुटि अवस्था (परिदृश्य ४):** - **ट्रिगर गर्छ** जब टाइप गरिएको पाठले अपेक्षित शब्दको सुरुवातसँग मेल खाँदैन - **त्रुटि CSS क्लास लागू गर्छ** तुरुन्त दृश्य प्रतिक्रिया प्रदान गर्न - **मदत गर्छ** खेलाडीहरूलाई छिटो त्रुटिहरू पहिचान गर्न र सुधार गर्न ## आफ्नो एप्लिकेसन परीक्षण गर्नुहोस् हेर्नुहोस् तपाईंले के हासिल गर्नुभयो! 🎉 तपाईंले इभेन्ट-ड्राइभन प्रोग्रामिङ प्रयोग गरेर स्क्र्याचबाट वास्तविक, काम गर्ने टाइपिङ खेल निर्माण गर्नुभयो। यसलाई सराहना गर्न एक क्षण लिनुहोस् - यो सानो उपलब्धि होइन! अब परीक्षण चरण आउँछ! के यो अपेक्षाकृत काम गर्नेछ? के हामीले केही छुटायौं? यहाँ कुरा छ: यदि केहि तुरुन्तै पूर्ण रूपमा काम गर्दैन भने, त्यो पूर्ण रूपमा सामान्य हो। अनुभवी विकासकर्ताहरूले नियमित रूपमा आफ्नो कोडमा बगहरू पाउँछन्। यो विकास प्रक्रियाको हिस्सा हो! `start` मा क्लिक गर्नुहोस्, र टाइप गर्न सुरु गर्नुहोस्! यो पहिले देखिएको एनिमेसन जस्तै देखिनु पर्छ।  **तपाईंको एप्लिकेसनमा के परीक्षण गर्ने:** - **पुष्टि गर्छ** कि Start क्लिक गर्दा र्यान्डम उद्धरण देखिन्छ - **पुष्टि गर्छ** कि टाइप गर्दा हालको शब्द सही रूपमा हाइलाइट हुन्छ - **जाँच गर्छ** कि गलत टाइपिङको लागि त्रुटि शैली देखिन्छ - **पुष्टि गर्छ** कि शब्दहरू पूरा गर्दा हाइलाइट सही रूपमा अगाडि बढ्छ - **पुष्टि गर्छ** कि उद्धरण पूरा गर्दा समयको साथ पूरा गर्ने सन्देश देखिन्छ **सामान्य डिबगिङ सुझावहरू:** - **जाँच गर्नुहोस्** ब्राउजर कन्सोल (F12) मा JavaScript त्रुटिहरू - **पुष्टि गर्नुहोस्** कि सबै फाइल नामहरू ठीकसँग मेल खान्छन् (केस-संवेदनशील) - **पक्का गर्नुहोस्** कि लाइभ सर्भर चलिरहेको छ र ठीकसँग रिफ्रेस भइरहेको छ - **विभिन्न उद्धरणहरू परीक्षण गर्नुहोस्** र्यान्डम चयन काम गरिरहेको छ कि छैन भनेर पुष्टि गर्न --- ## GitHub Copilot Agent Challenge 🎮 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्: **विवरण:** खेलाडीको प्रदर्शनको आधारमा खेल समायोजन गर्ने कठिनाई प्रणाली कार्यान्वयन गरेर टाइपिङ खेल विस्तार गर्नुहोस्। यो चुनौतीले तपाईंलाई उन्नत इभेन्ट ह्यान्डलिङ, डेटा विश्लेषण, र गतिशील UI अपडेट अभ्यास गर्न मद्दत गर्नेछ। **प्रस्तावना:** टाइपिङ खेलको लागि कठिनाई समायोजन प्रणाली सिर्जना गर्नुहोस् जसले: 1. खेलाडीको टाइपिङ गति (शब्द प्रति मिनेट) र शुद्धता प्रतिशत ट्र्याक गर्छ 2. स्वचालित रूपमा तीन कठिनाई स्तरहरूमा समायोजन गर्छ: सजिलो (साधारण उद्धरणहरू), मध्यम (हालको उद्धरणहरू), कठिन (वर्ण विराम चिह्न सहित जटिल उद्धरणहरू) 3. UI मा हालको कठिनाई स्तर र खेलाडीको तथ्याङ्कहरू प्रदर्शन गर्छ 4. लगातार तीन राम्रो प्रदर्शन पछि कठिनाई बढाउने स्ट्रिक काउन्टर कार्यान्वयन गर्छ 5. कठिनाई परिवर्तनहरू संकेत गर्न दृश्य प्रतिक्रिया (रङहरू, एनिमेसनहरू) थप्छ आवश्यक HTML तत्वहरू, CSS शैलीहरू, र JavaScript फङ्सनहरू थप्नुहोस् यो सुविधा कार्यान्वयन गर्न। उचित त्रुटि ह्यान्डलिङ समावेश गर्नुहोस् र खेल पहुँचयोग्य रहन्छ सुनिश्चित गर्नुहोस्। [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) को बारेमा थप जान्नुहोस्। ## 🚀 चुनौती तपाईंको टाइपिङ खेललाई अर्को स्तरमा लैजान तयार हुनुहुन्छ? इभेन्ट ह्यान्डलिङ र DOM म्यानिपुलेसनको गहिरो समझको लागि यी उन्नत सुविधाहरू कार्यान्वयन गर्ने प्रयास गर्नुहोस्: **थप कार्यक्षमता थप्नुहोस्:** | सुविधा | विवरण | तपाईंले अभ्यास गर्ने सीपहरू | |--------|--------|---------------------------| | **इनपुट नियन्त्रण** | उद्धरण पूरा भएपछि `input` इभेन्ट लिस्नरलाई निष्क्रिय गर्नुहोस्, र बटन क्लिक गर्दा पुनः सक्रिय गर्नुहोस् | इभेन्ट व्यवस्थापन र अवस्था नियन्त्रण | | **UI अवस्था व्यवस्थापन** | खेलाडीले उद्धरण पूरा गरेपछि टेक्स्टबक्स निष्क्रिय गर्नुहोस् | DOM सम्पत्ति हेरफेर | | **मोडल संवाद** | सफलता सन्देशको साथ मोडल संवाद बक्स प्रदर्शन गर्नुहोस् | उन्नत UI ढाँचा र पहुँचयोग्यता | | **उच्च स्कोर प्रणाली** | `localStorage` प्रयोग गरेर उच्च स्कोरहरू भण्डारण गर्नुहोस् | ब्राउजर भण्डारण API र डेटा स्थायित्व | **कार्यान्वयन सुझावहरू:** - स्थायी भण्डारणको लागि `localStorage.setItem()` र `localStorage.getItem()` अनुसन्धान गर्नुहोस् - गतिशील रूपमा इभेन्ट लिस्नरहरू थप्ने र हटाउने अभ्यास गर्नुहोस् - HTML संवाद तत्वहरू वा CSS मोडल ढाँचाहरू अन्वेषण गर्नुहोस् - फारम नियन्त्रणहरू निष्क्रिय र सक्रिय गर्दा पहुँचयोग्यता विचार गर्नुहोस् ## पोस्ट-व्याख्यान क्विज [पोस्ट-व्याख्यान क्विज](https://ff-quizzes.netlify.app/web/quiz/22) --- ## 🚀 तपाईंको टाइपिङ खेल मास्टरी समयरेखा ### ⚡ **अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ** - [ ] विभिन्न उद्धरणहरूसँग आफ्नो टाइपिङ खेल परीक्षण गर्नुहोस् ताकि यो सहज रूपमा काम गर्छ भनेर सुनिश्चित गर्न सकून् - [ ] CSS शैलीको साथ प्रयोग गर्नुहोस् - हाइलाइट र त्रुटि रङहरू परिवर्तन गर्न प्रयास गर्नुहोस् - [ ] आफ्नो ब्राउजरको DevTools (F12) खोल्नुहोस् र खेल्दा कन्सोल हेर्नुहोस् - [ ] आफैंलाई चुनौती दिनुहोस् कि उद्धरण सकेसम्म छिटो पूरा गर्नुहोस् ### ⏰ **यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ** - [ ] सूचीमा थप उद्धरणहरू थप्नुहोस् (शायद तपाईंको मनपर्ने पुस्तकहरू वा चलचित्रहरूबाट) - [ ] चुनौती खण्डबाट localStorage उच्च स्कोर प्रणाली कार्यान्वयन गर्नुहोस् - [ ] प्रत्येक खेल पछि प्रदर्शन हुने शब्द प्रति मिनेट गणक सिर्जना गर्नुहोस् - [ ] सही टाइपिङ, त्रुटिहरू, र पूरा गर्नेका लागि ध्वनि प्रभावहरू थप्नुहोस् ### 📅 **तपाईंको हप्ताको साहसिक यात्रा** - [ ] मल्टिप्लेयर संस्करण निर्माण गर्नुहोस् जहाँ साथीहरूले सँगै प्रतिस्पर्धा गर्न सकून् - [ ] उद्धरण जटिलतासँग विभिन्न कठिनाई स्तरहरू सिर्जना गर्नुहोस् - [ ] उद्धरणको कति भाग पूरा भएको छ भनेर देखाउने प्रगति बार थप्नुहोस् - [ ] व्यक्तिगत तथ्याङ्क ट्र्याकिङको साथ प्रयोगकर्ता खाता कार्यान्वयन गर्नुहोस् - [ ] अनुकूलन थिमहरू डिजाइन गर्नुहोस् र प्रयोगकर्ताहरूलाई उनीहरूको मनपर्ने शैली चयन गर्न दिनुहोस् ### 🗓️ **तपाईंको महिनाको रूपान्तरण** - [ ] पाठको उचित औंलाको स्थान क्रमशः सिकाउने पाठहरू सहित टाइपिङ कोर्स सिर्जना गर्नुहोस् - [ ] विश्लेषण निर्माण गर्नुहोस् जसले देखाउँछ कि कुन अक्षर वा शब्दहरूले सबैभन्दा धेरै त्रुटिहरू उत्पन्न गर्छन् - [ ] विभिन्न भाषाहरू र किबोर्ड लेआउटहरूको लागि समर्थन थप्नुहोस् - [ ] साहित्य डेटाबेसबाट उद्धरणहरू तान्न शैक्षिक API हरूसँग एकीकृत गर्नुहोस् - [ ] अन्य प्रयोगकर्ताहरूले प्रयोग गर्न र रमाइलो गर्नको लागि आफ्नो उन्नत टाइपिङ खेल प्रकाशित गर्नुहोस् ### 🎯 **अन्तिम प्रतिबिम्ब जाँच** **अर्को चरणमा जानु अघि, एक क्षण लिनुहोस् र उत्सव मनाउनुहोस्:** - खेल निर्माण गर्दा सबैभन्दा सन्तोषजनक क्षण के थियो? - इभेन्ट-ड्राइभन प्रोग्रामिङको बारेमा तपाईंको अनुभव सुरुमा भन्दा अहिले कस्तो छ? - यो खेललाई अद्वितीय बनाउन थप्नको लागि तपाईं उत्साहित हुनुहुन्छ कि एक सुविधा के हो? - तपाईं अन्य परियोजनाहरूमा इभेन्ट ह्यान्डलिङ अवधारणाहरू कसरी लागू गर्न सक्नुहुन्छ? ```mermaid journey title Your Event Programming Confidence Journey section Today Understanding Events: 3: You Building UI: 4: You Writing Event Listeners: 5: You section This Week Adding Features: 4: You Debugging Issues: 5: You Enhancing UX: 4: You section Next Month Building Complex Apps: 5: You Teaching Others: 5: You Creating Frameworks: 5: You ``` > 🌟 **याद गर्नुहोस्**: तपाईंले अहिले मात्र अन्तरक्रियात्मक वेबसाइट र एप्लिकेसनलाई शक्ति दिने मुख्य अवधारणाहरूमा महारत हासिल गर्नुभएको छ। इभेन्ट-ड्राइभन प्रोग्रामिङले वेबलाई जीवन्त र प्रतिक्रियाशील महसुस गराउँछ। जब तपाईंले ड्रपडाउन मेनु, टाइप गर्दा मान्य गर्ने फारम, वा खेल जसले तपाईंको क्लिकहरूमा प्रतिक्रिया दिन्छ देख्नुहुन्छ, तपाईंले अब यसको पछाडि रहेको जादू बुझ्नुभएको छ। तपाईं केवल कोड सिक्दै हुनुहुन्न - तपाईं अनुभवहरू सिर्जना गर्न सिक्दै हुनुहुन्छ जसले सहज र आकर्षक महसुस गराउँछ! 🎉 --- ## समीक्षा र आत्म अध्ययन [वेब ब्राउजर मार्फत विकासकर्तालाई उपलब्ध सबै इभेन्टहरू](https://developer.mozilla.org/docs/Web/Events) को बारेमा पढ्नुहोस्, र तपाईंले प्रत्येकलाई प्रयोग गर्ने परिदृश्यहरू विचार गर्नुहोस्। ## असाइनमेन्ट [नयाँ किबोर्ड खेल सिर्जना गर्नुहोस्](assignment.md) --- **अस्वीकरण**: यो दस्तावेज AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।