ساختار HTML
خوب، بیایید شروع کنیم. ساختار HTML از عناصر زیر تشکیل خواهد شد.
- یک دکمه تایمر
- یک
- یک متن ورودی برای تایپ کلمات.
- یک دکمه تنظیم مجدد که از کاربر می خواهد پس از اتمام تایمر آزمایش را دوباره انجام دهد.
ما از Bootstrap برای ساخت رابط استفاده خواهیم کرد.
بیایید با اضافه کردن عنوان در داخل ظرف جهانی شروع کنیم.
1 | class="container mt-5 text-center">
|
2 | class="row">
|
3 | class="col">
|
4 | TYPING SPEED TEST
|
5 |
|
6 |
|
7 |
|
8 | |
سپس دکمه شمارش معکوس تایمر و یک عدد خالی را اضافه کنید
1 | class="row mt-5">
|
2 | class="col">
|
3 |
|
4 | id="wpm" class="mt-3">
|
5 |
|
6 | |
ردیف بعدی حاوی عناصر زیر خواهد بود
- یک
- زیر
textarea ورودی جایی که کاربر تایپ خواهد کرد.
1 | class="row mt-5" id="main">
|
2 | class="col-9 mx-auto">
|
3 | id="word" class="display-6">
|
4 | |
5 | class="form-control text_input mb-3"
|
6 | placeholder="Start typing here..."
|
7 | >
|
8 |
|
9 |
|
آخرین عنصر دکمه تنظیم مجدد است که با کلیک کردن، به کاربر اجازه بازی می دهد از نو: این ردیف حاوی دکمه خواهد بود پنهان شود به صورت پیش فرض.
1 | class="row mt-5" id="reset">
|
2 | class="col">
|
3 |
|
4 |
|
5 |
|
6 |
|
عملکرد CSS
علاوه بر آنچه بوت استرپ به ما می دهد، از برخی سبک های CSS سفارشی نیز مانند شکل زیر استفاده خواهیم کرد.
1 | @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
|
2 |
|
3 | body {
|
4 | font-family: "DM Mono", monospace;
|
5 | }
|
6 |
|
7 | h1 {
|
8 | font-weight: 900;
|
9 | }
|
10 |
|
11 | #word {
|
12 | min-height: 11rem;
|
13 |
|
14 | }
|
15 |
|
16 | .correct {
|
17 | color: green;
|
18 | }
|
19 |
|
20 | .incorrect {
|
21 | color: red;
|
22 | }
|
23 |
|
24 | #reset {
|
25 | display: none;
|
26 | } |
رنگ سبز روی حروفی که درست تایپ شده اند و رنگ قرمز روی حروفی که اشتباه تایپ شده اند اعمال می شود. هنگامی که کاربر در حال تایپ است، چیزی شبیه به این خواهد بود:
عملکرد جاوا اسکریپت
با توجه به ساختار و استایل، بیایید به رفتار با جاوا اسکریپت گیر کنیم. ما با ایجاد تایمر شروع می کنیم، بنابراین عنصر دکمه تایمر را دریافت کنید.
1 | const timerElement = document.getElementById("countdown");
|
سپس، یک ثابت مدت تعریف کنید، این نشان دهنده مدت زمان تایمر 1 دقیقه (60 ثانیه) است.
سپس یک تابع به نام ایجاد کنید startTimer() . در داخل تابع، a را تعریف کنید timer متغیر و مقداردهی اولیه آن را با duration ثابت .
1 | function startTimer() {
|
2 | let timer = duration;
|
3 |
|
4 |
|
5 | } |
بعد از آن استفاده خواهیم کرد setInterval() روشی که یک تابع را به طور مکرر در بازه های زمانی مشخص اجرا می کند. در مورد ما، تایمر را در هر ثانیه 1 کاهش می دهد و آن را به روز می کند timerElement با مقدار تایمر جدید هنگامی که تایمر به 0 رسید، فاصله زمانی برای توقف شمارش معکوس پاک می شود.
1 | function startTimer() {
|
2 | let timer = duration;
|
3 | interval = setInterval(() => {
|
4 | timer--;
|
5 | timerElement.textContent = `${timer}s`;
|
6 |
|
7 | }, 1000);
|
8 | } |
مناگر تایمر به 0 برسد، آن را با علامت پاک می کنیم clearInterval() روش و تنظیم محتوای متنی timerElement به "زمان به پایان رسیده است." را به روز کنید startTimer() عملکرد مانند این:
1 | function startTimer() {
|
2 | let timer = duration;
|
3 |
|
4 | interval = setInterval(() => {
|
5 | timer--;
|
6 | timerElement.textContent = `${timer}s`;
|
7 |
|
8 | if (timer <= 0) {
|
9 | clearInterval(interval);
|
10 | timerElement.textContent = "Time\'s up!";
|
11 |
|
12 | }
|
13 | }, 1000);
|
14 | } |
عبارتی که باید تایپ کرد
مرحله بعدی نمایش بخشی از متن به تایپ شود. متن به این شکل است:
1 | const phrase = `People often look for ways to improve their lives. They want to be happy, healthy, and successful.
|
2 | To achieve these goals, they work hard, spend time with family and friends, and enjoy hobbies.
|
3 | Eating well and staying active are important for health.
|
4 | Learning new things and setting goals can help people grow.
|
5 | Everyone has challenges, but staying positive and focused can make a big difference.
|
6 | Helping others and being kind can also bring joy.
|
7 | Life is a journey, and every day is a chance to make it better.
|
8 | Enjoy the little things and appreciate what you have.
|
9 | It\'s important to stay connected with others, communicate openly, and listen carefully.
|
10 | Reading books, exploring new places, and trying new activities can expand our horizons.
|
11 | Balancing work and relaxation helps maintain a healthy lifestyle.
|
12 | Remember to laugh often, love deeply, and live fully.
|
13 | Taking time to reflect on our experiences and learn from them can lead to personal growth.
|
14 | The support of loved ones can provide strength and comfort.
|
15 | Every moment is an opportunity to create lasting memories and build a fulfilling life.
|
16 | In the end, it\'s not the years in your life that count. It\'s the life in your years. - Abraham Lincoln`;
|
از آنجایی که برای قالب بندی متن از حروف الفبای الگو استفاده می کنیم، در انتهای هر خط، فضای خالی داریم، بنابراین باید متن را قالب بندی کنیم تا مطمئن شویم متن فاقد شکستگی های غیرضروری و فاصله اضافی است.
1 | const text = phrase.replace(/(\\r\)+\\s*/g, \' \') .replace(/\\s{2,}/g, \' \'); ; |
در کد بالا، ما از عبارات منظم برای پاکسازی متن با حذف خطوط شکسته و کاهش چندین کاراکتر فضای خالی متوالی به یک فاصله استفاده می کنیم.
هنگامی که برنامه برای اولین بار بارگیری می شود، تنها بخشی از متن را نشان خواهیم داد. بیایید استفاده کنیم splice() روش بدست آوردن اولین 10 کلمات متن و سپس تنظیم کنید textContent از عنصر کلمه به این رشته از 10 کلمه اول.
1 | const word = document.getElementById("word");
|
2 | word.textContent = text.split(" ").slice(0
|
3 | , 10).join(" "); |
همانطور که کاربر تایپ می کند، ما همچنین می خواهیم به طور مداوم بخشی از متن را بسته به جایی که کاربر تایپ کرده است اضافه کنیم. به عنوان مثال، سه خط متن در هر نمونه یک عدد ایده آل خواهد بود.
یک ثابت ایجاد کنید displayLength برای تعیین طول قسمت قابل مشاهده متن بر اساس موقعیت تایپ.
1 | const displayLength = 80;
|
در مرحله بعد، ورودی متن را دریافت می کنیم و به رویداد ورودی گوش می دهیم. رویداد ورودی زمانی فعال می شود که کاربر هر چیزی را در ناحیه ورودی تایپ یا حذف کند. ما همچنین یک را ایجاد خواهیم کرد timerStarted متغیر و آن را روی false قرار دهید. timerStarted متغیر اطمینان حاصل می کند که زمانی که کاربر در حال تایپ کردن است، تایمر به 0 بازنشانی نمی شود.
1 | let timerStarted = false;
|
2 |
|
3 | const textInput = document.querySelector(".text_input");
|
4 | textInput.addEventListener("input", (e) => {
|
5 |
|
6 | }
|
در تابع شنونده رویداد، یک دستور if ایجاد می کنیم که اطمینان حاصل می کند که تایمر تنها یک بار در هنگام روشن شدن رویداد ورودی شروع می شود.
1 | textInput.addEventListener("input", (e) => {
|
2 | if (!timerStarted) {
|
3 | startTimer();
|
4 | timerStarted = true;
|
5 |
|
6 | }
|
7 | } |
متن تایپ شده را واکشی کنید
بعد، بیایید مقدار the را بدست آوریم typedtext. typedtext متنی است که کاربر تایپ کرده است و به دست آمده است از مقدار عنصر ورودی مقداردهی اولیه displayText، متغیری که نشان دهنده بخشی از متن است که باید تایپ شود و به کاربر نشان داده می شود:
1 | const typedText = textInput.value;
|
2 | let displayText = ""; |
بعد، a ایجاد کنید startIndex و الف stopIndex، که بر اساس موقعیت تایپ کاربر، نمایه شروع متنی که باید تایپ شود را تعیین می کند.
1 | let startIndex = Math.max(0, typedText.length - displayLength / 2);
|
2 | let endIndex = startIndex + displayLength;
|
در مرحله بعد، می خواهیم یک حلقه for ایجاد کنیم که از روی آن تکرار می شود startIndex تا endIndex و در محدوده متن به تایپ شود.
در داخل حلقه for، ما به طور مداوم بررسی می کنیم که آیا شاخص فعلی در محدوده متن تایپ شده است یا خیر. اگر کاراکتر در نمایه فعلی متن تایپ شده با کاراکتر در همان نمایه در متن مطابقت داشته باشد تایپ شود، یعنی کاربر به درستی تایپ می کند. در این حالت، کاراکتر صحیح را در یک span با کلاسی که رنگ سبز را اعمال می کند، قرار می دهیم به آن.
اگر ناهماهنگی ایندکس وجود داشته باشد، کاربر شاخص فعلی را اشتباه نوشته باشد، آن را در یک کلاس span قرار می دهیم و یک رنگ قرمز اعمال می کنیم.
همانطور که کاربر تایپ می کند، هایلایت رنگ نمایش داده خواهد شد روی عنصر حاوی متن نمایش داده شده در زمان واقعی.
به روز رسانی نتایج
آخرین مرحله این است که یک بار نتایج را به روز کنید تایمر به 0 می رسد. یک تابع به نام ایجاد کنید updateResults() که به شکل زیر خواهد بود:
1 | function updateTyping() {
|
2 | mainContainer = document.getElementById("main");
|
3 | mainContainer.style.display = "none";
|
4 | const wordsTypedValue = document.querySelector(".text_input").value;
|
5 | const wordsTyped = wordsTypedValue.trim().split(/\\s+/).length
|
6 | wpm.textContent = `Your speed was: ${
|
7 | (wordsTyped * 60) / duration
|
8 | } WPM `;
|
9 |
|
10 | resetContainer.style.display = "block";
|
11 | } |
پس از اینکه مدت زمان تایمر به 0 رسید:
- ما متن را پنهان می کنیم در حال تایپ شدن و عنصر ورودی textarea.
- سپس مقدار ورودی را دریافت می کنیم که نشان دهنده تعداد کلماتی است که کاربر در مدت زمان تایمر 1 دقیقه ای تایپ کرده است.
const wordsTyped=wordsTypedValue.trim().split(/\\s+/).length محتوای تایپ شده را تقسیم می کند و تعداد کل کلمات تایپ شده را دریافت می کند.- سپس سرعت تایپ را با فرمول به روز می کنیم
(wordsTyped*60) /duration.
- در نهایت دکمه ریست را نمایش می دهیم. این دکمه از کاربر می خواهد که متن را دوباره بگیرد.
در شما startTimer() تابع، آن را برای فراخوانی به روز کنید updateResults() وقتی تایمر به 0 رسید.
1 | function startTimer() {
|
2 | let timer = duration;
|
3 | // let interval;
|
4 | interval = setInterval(() => {
|
5 | timer--;
|
6 | timerElement.textContent = `${timer}s`;
|
7 |
|
8 | if (timer <= 0) {
|
9 | clearInterval(interval);
|
10 | timerElement.textContent = "Time\'s up!";
|
11 | updateTyping();
|
12 | }
|
13 | }, 1000);
|
14 | } |
وقتی تایمر به پایان می رسد، باید چیزی شبیه به این را ببینید:
برای یادآوری، این نسخه ی نمایشی است:
نتیجه
این آموزش نحوه ایجاد یک برنامه تست تایپ کاملاً کارآمد با جاوا اسکریپت Vanilla را پوشش می دهد. تو خیلی چیزها یاد گرفتی! ما بسیاری از مفاهیم جاوا اسکریپت را پوشش دادیم، مانند مدیریت رویداد، دستکاری DOM، دستکاری رشته، تابع ریاضی، منطق شرطی، حلقه ها و کار با فواصل.
می توانید با افزودن ویژگی های بیشتر، مانند محدودیت های زمانی مختلف، دقت، خطاها و غیره، برنامه را بهبود ببخشید. موفق باشید!
منبع: https://webdesign.tutsplus.com/how-to-create-a-typing-test-application-with-vanilla-javascript--cms-108721t