# ইভেন্ট ব্যবহার করে একটি গেম তৈরি করা
## প্রাক-লেকচার কুইজ
[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/21)
## ইভেন্ট চালিত প্রোগ্রামিং
ব্রাউজার ভিত্তিক অ্যাপ্লিকেশন তৈরি করার সময়, আমরা ব্যবহারকারীর জন্য একটি গ্রাফিকাল ইউজার ইন্টারফেস (GUI) প্রদান করি যাতে তারা আমাদের তৈরি করা জিনিসের সাথে ইন্টারঅ্যাক্ট করতে পারে। ব্রাউজারের সাথে ইন্টারঅ্যাক্ট করার সবচেয়ে সাধারণ উপায় হল বিভিন্ন উপাদানে ক্লিক করা এবং টাইপ করা। একজন ডেভেলপার হিসেবে আমাদের চ্যালেঞ্জ হল, আমরা জানি না তারা কখন এই কাজগুলো করবে!
[ইভেন্ট চালিত প্রোগ্রামিং](https://en.wikipedia.org/wiki/Event-driven_programming) হল সেই ধরনের প্রোগ্রামিং যা আমাদের GUI তৈরি করতে প্রয়োজন। যদি আমরা এই বাক্যাংশটি একটু বিশ্লেষণ করি, তাহলে দেখতে পাবো মূল শব্দটি হল **ইভেন্ট**। [ইভেন্ট](https://www.merriam-webster.com/dictionary/event), মেরিয়াম-ওয়েবস্টার অনুযায়ী, "কিছু যা ঘটে" হিসাবে সংজ্ঞায়িত। এটি আমাদের পরিস্থিতি পুরোপুরি বর্ণনা করে। আমরা জানি কিছু ঘটবে যার জন্য আমরা কিছু কোড চালাতে চাই, কিন্তু আমরা জানি না এটি কখন ঘটবে।
আমরা যে কোডটি চালাতে চাই তা চিহ্নিত করার উপায় হল একটি ফাংশন তৈরি করা। [প্রসিডিউরাল প্রোগ্রামিং](https://en.wikipedia.org/wiki/Procedural_programming) এ, ফাংশনগুলো একটি নির্দিষ্ট ক্রমে ডাকা হয়। ইভেন্ট চালিত প্রোগ্রামিংয়ের ক্ষেত্রেও একই জিনিস সত্য হবে। পার্থক্য হল **কীভাবে** ফাংশনগুলো ডাকা হবে।
ইভেন্ট (যেমন বোতাম ক্লিক করা, টাইপ করা ইত্যাদি) পরিচালনা করতে, আমরা **ইভেন্ট লিসেনার** নিবন্ধন করি। একটি ইভেন্ট লিসেনার হল একটি ফাংশন যা একটি ইভেন্ট ঘটার জন্য অপেক্ষা করে এবং তার প্রতিক্রিয়ায় কার্যকর হয়। ইভেন্ট লিসেনার UI আপডেট করতে পারে, সার্ভারে কল করতে পারে, বা ব্যবহারকারীর ক্রিয়ার প্রতিক্রিয়ায় যা প্রয়োজন তা করতে পারে। আমরা [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ব্যবহার করে একটি ইভেন্ট লিসেনার যোগ করি এবং কার্যকর করার জন্য একটি ফাংশন প্রদান করি।
> **NOTE:** এটি উল্লেখ করা গুরুত্বপূর্ণ যে ইভেন্ট লিসেনার তৈরি করার অনেক উপায় রয়েছে। আপনি অ্যানোনিমাস ফাংশন ব্যবহার করতে পারেন, অথবা নামকৃত ফাংশন তৈরি করতে পারেন। আপনি বিভিন্ন শর্টকাট ব্যবহার করতে পারেন, যেমন `click` প্রপার্টি সেট করা, অথবা `addEventListener` ব্যবহার করা। আমাদের অনুশীলনে আমরা `addEventListener` এবং অ্যানোনিমাস ফাংশনের উপর ফোকাস করব, কারণ এটি ওয়েব ডেভেলপারদের মধ্যে সবচেয়ে সাধারণ কৌশল। এটি সবচেয়ে নমনীয়ও, কারণ `addEventListener` সব ইভেন্টের জন্য কাজ করে এবং ইভেন্টের নাম প্যারামিটার হিসাবে প্রদান করা যায়।
### সাধারণ ইভেন্ট
অ্যাপ্লিকেশন তৈরি করার সময় [ডজনখানেক ইভেন্ট](https://developer.mozilla.org/docs/Web/Events) রয়েছে যা আপনি শুনতে পারেন। মূলত ব্যবহারকারী একটি পৃষ্ঠায় যা কিছু করে তা একটি ইভেন্ট তৈরি করে, যা আপনাকে তাদের অভিজ্ঞতা নিশ্চিত করার জন্য প্রচুর ক্ষমতা দেয়। সৌভাগ্যবশত, সাধারণত আপনাকে কেবল কয়েকটি ইভেন্টের প্রয়োজন হয়। এখানে কয়েকটি সাধারণ ইভেন্ট রয়েছে (যার মধ্যে দুটি আমরা আমাদের গেম তৈরি করার সময় ব্যবহার করব):
- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): ব্যবহারকারী কিছুতে ক্লিক করেছে, সাধারণত একটি বোতাম বা হাইপারলিঙ্ক
- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): ব্যবহারকারী ডান মাউস বোতামে ক্লিক করেছে
- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): ব্যবহারকারী কিছু টেক্সট হাইলাইট করেছে
- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): ব্যবহারকারী কিছু টেক্সট ইনপুট করেছে
## গেম তৈরি করা
আমরা একটি গেম তৈরি করব যাতে ইভেন্টগুলো কীভাবে কাজ করে তা অন্বেষণ করা যায়। আমাদের গেমটি একজন খেলোয়াড়ের টাইপিং দক্ষতা পরীক্ষা করবে, যা সমস্ত ডেভেলপারদের জন্য একটি অত্যন্ত গুরুত্বপূর্ণ দক্ষতা। আমাদের সবার টাইপিং অনুশীলন করা উচিত! গেমটির সাধারণ প্রবাহটি এরকম হবে:
- খেলোয়াড় স্টার্ট বোতামে ক্লিক করবে এবং টাইপ করার জন্য একটি কোট পাবে
- খেলোয়াড় যত দ্রুত সম্ভব একটি টেক্সটবক্সে কোটটি টাইপ করবে
- প্রতিটি শব্দ সম্পন্ন হওয়ার সাথে সাথে পরবর্তীটি হাইলাইট হবে
- যদি খেলোয়াড় টাইপো করে, টেক্সটবক্সটি লাল হয়ে যাবে
- খেলোয়াড় কোটটি সম্পন্ন করলে, একটি সাফল্যের বার্তা প্রদর্শিত হবে এবং সময় গণনা দেখানো হবে
চলুন আমাদের গেমটি তৈরি করি এবং ইভেন্ট সম্পর্কে শিখি!
### ফাইল কাঠামো
আমাদের মোট তিনটি ফাইল প্রয়োজন হবে: **index.html**, **script.js** এবং **style.css**। চলুন এগুলো সেটআপ করি যাতে আমাদের কাজ সহজ হয়।
- একটি নতুন ফোল্ডার তৈরি করুন এবং কনসোল বা টার্মিনাল উইন্ডোতে নিম্নলিখিত কমান্ডটি চালান:
```bash
# Linux or macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
- ভিজ্যুয়াল স্টুডিও কোড খুলুন
```bash
code .
```
- ভিজ্যুয়াল স্টুডিও কোডে ফোল্ডারে তিনটি ফাইল যোগ করুন নিম্নলিখিত নাম দিয়ে:
- index.html
- script.js
- style.css
## ইউজার ইন্টারফেস তৈরি করা
যদি আমরা প্রয়োজনীয়তাগুলো বিশ্লেষণ করি, তাহলে আমরা জানি আমাদের HTML পৃষ্ঠায় কয়েকটি উপাদান প্রয়োজন। এটি একটি রেসিপির মতো, যেখানে আমাদের কিছু উপাদান দরকার:
- ব্যবহারকারীর টাইপ করার জন্য কোট প্রদর্শনের জায়গা
- বার্তা প্রদর্শনের জায়গা, যেমন একটি সাফল্যের বার্তা
- টাইপ করার জন্য একটি টেক্সটবক্স
- একটি স্টার্ট বোতাম
প্রতিটি উপাদানের জন্য ID প্রয়োজন যাতে আমরা সেগুলোর সাথে আমাদের জাভাস্ক্রিপ্টে কাজ করতে পারি। আমরা CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলোর রেফারেন্সও যোগ করব।
একটি নতুন ফাইল তৈরি করুন যার নাম **index.html**। নিম্নলিখিত HTML যোগ করুন:
```html
Typing game
Typing game!
Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
```
### অ্যাপ্লিকেশন চালু করা
সবসময়ই ধাপে ধাপে ডেভেলপ করা ভালো যাতে জিনিসগুলো দেখতে কেমন তা বোঝা যায়। চলুন আমাদের অ্যাপ্লিকেশন চালু করি। ভিজ্যুয়াল স্টুডিও কোডের জন্য একটি চমৎকার এক্সটেনশন রয়েছে [লাইভ সার্ভার](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) ইনস্টল করুন লিঙ্কটি অনুসরণ করে এবং **Install** এ ক্লিক করে
- ব্রাউজার আপনাকে ভিজ্যুয়াল স্টুডিও কোড খুলতে বলবে, এবং তারপর ভিজ্যুয়াল স্টুডিও কোড ইনস্টলেশন সম্পন্ন করবে
- প্রয়োজন হলে ভিজ্যুয়াল স্টুডিও কোড পুনরায় চালু করুন
- ইনস্টল করার পরে, ভিজ্যুয়াল স্টুডিও কোডে Ctrl-Shift-P (বা Cmd-Shift-P) চাপুন কমান্ড প্যালেট খুলতে
- টাইপ করুন **Live Server: Open with Live Server**
- লাইভ সার্ভার আপনার অ্যাপ্লিকেশন হোস্ট করা শুরু করবে
- একটি ব্রাউজার খুলুন এবং **https://localhost:5500** এ যান
- আপনি এখন আপনার তৈরি পৃষ্ঠাটি দেখতে পাবেন!
চলুন কিছু কার্যকারিতা যোগ করি।
## CSS যোগ করা
আমাদের HTML তৈরি হয়ে গেলে, চলুন মূল স্টাইলিংয়ের জন্য CSS যোগ করি। আমাদের খেলোয়াড় যে শব্দটি টাইপ করা উচিত তা হাইলাইট করতে হবে এবং তারা ভুল টাইপ করলে টেক্সটবক্সটি রঙিন করতে হবে। আমরা এটি দুটি ক্লাস ব্যবহার করে করব।
একটি নতুন ফাইল তৈরি করুন যার নাম **style.css** এবং নিম্নলিখিত সিনট্যাক্স যোগ করুন:
```css
/* inside style.css */
.highlight {
background-color: yellow;
}
.error {
background-color: lightcoral;
border: red;
}
```
✅ CSS এর ক্ষেত্রে আপনি আপনার পৃষ্ঠাটি যেভাবে চান সেভাবে সাজাতে পারেন। কিছু সময় নিন এবং পৃষ্ঠাটিকে আরও আকর্ষণীয় করে তুলুন:
- একটি ভিন্ন ফন্ট বেছে নিন
- শিরোনামগুলো রঙিন করুন
- আইটেমগুলো পুনরায় আকার দিন
## জাভাস্ক্রিপ্ট
আমাদের UI তৈরি হয়ে গেলে, এখন আমাদের মনোযোগ কেন্দ্রীভূত করব জাভাস্ক্রিপ্টে যা লজিক প্রদান করবে। আমরা এটি কয়েকটি ধাপে ভাগ করব:
- [কনস্ট্যান্ট তৈরি করা](../../../../4-typing-game/typing-game)
- [গেম শুরু করার ইভেন্ট লিসেনার](../../../../4-typing-game/typing-game)
- [টাইপিংয়ের ইভেন্ট লিসেনার](../../../../4-typing-game/typing-game)
কিন্তু প্রথমে, একটি নতুন ফাইল তৈরি করুন যার নাম **script.js**।
### কনস্ট্যান্ট যোগ করা
আমাদের প্রোগ্রামিং সহজ করার জন্য কয়েকটি আইটেম প্রয়োজন হবে। এটি একটি রেসিপির মতো, যেখানে আমাদের কিছু উপাদান দরকার:
- সমস্ত কোটের তালিকা সহ একটি অ্যারে
- বর্তমান কোটের জন্য সমস্ত শব্দ সংরক্ষণ করার জন্য একটি খালি অ্যারে
- খেলোয়াড় বর্তমানে যে শব্দটি টাইপ করছে তার সূচক সংরক্ষণের জায়গা
- খেলোয়াড় স্টার্টে ক্লিক করার সময়
আমাদের UI উপাদানগুলোর রেফারেন্সও প্রয়োজন হবে:
- টেক্সটবক্স (**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');
```
✅ আপনার গেমে আরও কোট যোগ করুন
> **NOTE:** আমরা `document.getElementById` ব্যবহার করে যেকোনো সময় উপাদানগুলো পুনরুদ্ধার করতে পারি। যেহেতু আমরা নিয়মিত এই উপাদানগুলো উল্লেখ করব, তাই স্ট্রিং লিটারালের টাইপো এড়াতে আমরা কনস্ট্যান্ট ব্যবহার করব। [Vue.js](https://vuejs.org/) বা [React](https://reactjs.org/) এর মতো ফ্রেমওয়ার্কগুলো আপনাকে আপনার কোড কেন্দ্রীভূত করতে আরও ভালভাবে সাহায্য করতে পারে।
`const`, `let` এবং `var` ব্যবহার করার বিষয়ে একটি ভিডিও দেখুন
[](https://youtube.com/watch?v=JNIXfGiDWM8 "ভেরিয়েবলের ধরন")
> 🎥 উপরের ছবিতে ক্লিক করুন ভেরিয়েবল সম্পর্কে একটি ভিডিও দেখার জন্য।
### শুরু করার লজিক যোগ করা
গেমটি শুরু করতে, খেলোয়াড় স্টার্টে ক্লিক করবে। অবশ্যই, আমরা জানি না তারা কখন স্টার্টে ক্লিক করবে। এটি এমন একটি ক্ষেত্রে যেখানে [ইভেন্ট লিসেনার](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) কার্যকর হয়। একটি ইভেন্ট লিসেনার আমাদের কিছু ঘটার জন্য অপেক্ষা করতে এবং তার প্রতিক্রিয়ায় কোড কার্যকর করতে দেয়। আমাদের ক্ষেত্রে, আমরা চাই ব্যবহারকারী স্টার্টে ক্লিক করলে কোড কার্যকর হোক।
যখন ব্যবহারকারী **স্টার্ট**-এ ক্লিক করবে, তখন আমাদের একটি কোট নির্বাচন করতে হবে, UI সেটআপ করতে হবে, এবং বর্তমান শব্দ এবং টাইমিং ট্র্যাক করতে হবে। নিচে জাভাস্ক্রিপ্ট দেওয়া হয়েছে যা আপনাকে যোগ করতে হবে; আমরা স্ক্রিপ্ট ব্লকের পরে এটি আলোচনা করব।
```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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) এবং [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ব্যবহার করে আমরা `quotes` অ্যারে থেকে এলোমেলোভাবে একটি কোট নির্বাচন করি
- আমরা `quote` কে `words` এর একটি অ্যারেতে রূপান্তর করি যাতে আমরা খেলোয়াড় বর্তমানে যে শব্দটি টাইপ করছে তা ট্র্যাক করতে পারি
- `wordIndex` 0 এ সেট করা হয়, কারণ খেলোয়াড় প্রথম শব্দ দিয়ে শুরু করবে
- UI সেটআপ করুন
- `spanWords` এর একটি অ্যারে তৈরি করুন, যা প্রতিটি শব্দকে একটি `span` উপাদানের মধ্যে রাখে
- এটি আমাদের ডিসপ্লেতে শব্দটি হাইলাইট করতে দেবে
- `join` ব্যবহার করে অ্যারেটিকে একটি স্ট্রিংয়ে রূপান্তর করুন যা আমরা `quoteElement` এর `innerHTML` আপডেট করতে ব্যবহার করতে পারি
- এটি খেলোয়াড়ের জন্য কোটটি প্রদর্শন করবে
- প্রথম `span` উপাদানের `className` `highlight` এ সেট করুন যাতে এটি হলুদ রঙে হাইলাইট হয়
- `messageElement` পরিষ্কার করুন `innerText` কে `''` সেট করে
- টেক্সটবক্স সেটআপ করুন
- `typedValueElement` এর বর্তমান `value` পরিষ্কার করুন
- `typedValueElement` এ `focus` সেট করুন
- টাইমার শুরু করুন `getTime` কল করে
### টাইপিং লজিক যোগ করা
যখন খেলোয়াড় টাইপ করবে, তখন একটি `input` ইভেন্ট উত্থাপিত হবে। এই ইভেন্ট লিসেনারটি নিশ্চিত করবে যে খেলোয়াড় সঠিকভাবে শব্দটি টাইপ করছে কিনা এবং গেমের বর্তমান অবস্থা পরিচালনা করবে। **script.js** এ ফিরে যান, এবং নিচের কোডটি শেষে যোগ করুন। আমরা পরে এটি বিশ্লেষণ করব।
```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';
}
});
```
চলুন কোডটি বিশ্লেষণ করি! আমরা শুরু করি বর্তমান শব্দ এবং খেলোয়াড় এখন পর্যন্ত যা টাইপ করেছে তা ধরে নিয়ে। তারপর আমরা ধাপে ধাপে লজিক পরীক্ষা করি, যেখানে আমরা যাচাই করি কোট সম্পূর্ণ হয়েছে কিনা, শব্দ সম্পূর্ণ হয়েছে কিনা, শব্দ সঠিক কিনা, অথবা (শেষে), কোনো ত্রুটি আছে কিনা।
- কোট সম্পূর্ণ হয়েছে, যা নির্দেশ করে `typedValue` `currentWord` এর সমান এবং `wordIndex` `words` এর `length` এর চেয়ে এক কম
- `elapsedTime` গণনা করুন `startTime` থেকে বর্তমান সময় বিয়োগ করে
- `elapsedTime` কে ১,০০০ দিয়ে ভাগ করুন মিলিসেকেন্ড থেকে সেকেন্ডে রূপান্তর করতে
- একটি সাফল্যের বার্তা প্রদর্শন করুন
- শব্দ সম্পূর্ণ হয়েছে, যা নির্দেশ করে `typedValue` একটি স্পেস দিয়ে শেষ হয়েছে (শব্দের শেষ) এবং `typedValue` `currentWord` এর সমান
- `typedElement` এর `value` কে `''` সেট করুন যাতে পরবর্তী শব্দ টাইপ করা যায়
- `wordIndex` ইনক্রিমেন্ট করুন পরবর্তী শব্দে যাওয়ার জন্য
- `quoteElement` এর সমস্ত `childNodes` এর মাধ্যমে লুপ করুন এবং `className` কে `''` সেট করুন ডিফল্ট ডিসপ্লেতে ফিরে যাওয়ার জন্য
- বর্তমান শব্দের `className` `highlight` এ সেট করুন এটি পরবর্তী টাইপ করার শব্দ হিসাবে চিহ্নিত করতে
- শব্দটি বর্তমানে সঠিকভাবে টাইপ করা হয়েছে (কিন্তু সম্পূর্ণ নয়), যা নির্দেশ করে `currentWord` `typedValue` দিয়ে শুরু হয়েছে
- `typedValueElement` কে ডিফল্ট হিসাবে প্রদর্শন নিশ্চিত করুন `className` পরিষ্কার করে
- যদি আমরা এতদূর পৌঁছাই, তাহলে একটি ত্রুটি আছে
- `typedValueElement` এর `className` `error` এ সেট করুন
## আপনার অ্যাপ্লিকেশন পরীক্ষা করুন
আপনি শেষ পর্যন্ত পৌঁছেছেন! শেষ ধাপটি হল আমাদের অ্যাপ্লিকেশনটি কাজ করছে কিনা তা নিশ্চিত করা। এটি চেষ্টা করুন! যদি কোনো ত্রুটি থাকে তবে চিন্তা করবেন না; **সব ডেভেলপারদেরই ত্রুটি হয়**। বার্তাগুলো পরীক্ষা করুন এবং প্রয়োজন অনুযায়ী ডিবাগ করুন।
**স্টার্ট**-এ ক্লিক করুন এবং টাইপ করা শুরু করুন! এটি কিছুটা এরকম দেখতে হবে:
---
## 🚀 চ্যালেঞ্জ
আরও কার্যকারিতা যোগ করুন
- সম্পন্ন হলে `input` ইভেন্ট লিসেনার নিষ্ক্রিয় করুন এবং বোতামে ক্লিক করলে এটি পুনরায় সক্রিয় করুন
- খেলোয়াড় কোটটি সম্পন্ন করলে টেক্সটবক্স নিষ্ক্রিয় করুন
- একটি মডাল ডায়ালগ বক্সে সাফল্যের বার্তা প্রদর্শন করুন
- [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ব্যবহার করে উচ্চ স্কোর সংরক্ষণ করুন
## লেকচার-পরবর্তী কুইজ
[লেকচার-পরবর্তী কুইজ](https://ff-quizzes.netlify.app/web/quiz/22)
## পর্যালোচনা ও স্ব-অধ্যয়ন
[ওয়েব ব্রাউজারের মাধ্যমে ডেভেলপারদের জন্য উপলব্ধ সমস্ত ইভেন্ট](https://developer.mozilla.org/docs/Web/Events) সম্পর্কে পড়ুন এবং প্রতিটি ইভেন্ট কোন পরিস্থিতিতে ব্যবহার করবেন তা বিবেচনা করুন।
## অ্যাসাইনমেন্ট
[একটি নতুন কীবোর্ড গেম তৈরি করুন](assignment.md)
**অস্বীকৃতি**:
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসম্ভব সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা তার জন্য দায়ী থাকব না।