لینک‌های مفید برای شرکت در مسابقه:

در زمان مسابقه می‌توانید سوال‌های خود را از قسمت "سوال بپرسید" مطرح کنید.

تست سرعت تایپ


در این سوال قصد داریم یک برنامه تست سرعت تایپ را پیاده‌سازی کنیم. ظاهر کلی برنامه به شکل زیر است:

توضیح تصویر

پروژه اولیه🔗

پروژه اولیه را از این لینک دانلود کنید.

ساختار فایل‌های این پروژه به این صورت است
typing-test
├── assets
│   ├── css
│   │   └── style.css
│   └── font
│       └── Vazir.ttf
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── sample.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
├── index.html
├── package.json
└── typing-test.js
Plain text
راه اندازی پروژه
  • ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
  • سپس فایل index.html را در مرورگر خود باز کنید.

جزئیات🔗

در فایل typing-test.js تعداد تابع وجود دارند که شما باید آنها را کامل کنید:

تابع initializeTest

این تابع دو پارامتر را به عنوان ورودی دریافت می‌کند. timeLimit زمان تست (در واحد ثانیه) و text متن تست می‌باشد. در این تابع باید مقدار اولیه زمان باقی‌ مانده (timeLeft) را در صفحه نمایش دهید. همچنین هر کاراکتر از متن را در یک تگ span قرار دهید و این تگ‌ها را به ترتیب داخل تگ div با آیدی type-text قرار دهید. برای مثال اگر متن اولیه کلمه سلام باشد HTML رندر شده به صورت زیر باید باشد:

<div id="type-text">
  <span>س</span>
  <span>ل</span>
  <span>ا</span>
  <span>م</span>
</div>
HTML
تابع updateCharactersStatus

در این تابع باید وضعیت هر کاراکتر آپدیت کنید. هر کاراکتر می‌تواند سه وضعیت داشته باشد:

  1. در صورتی که صحیح تایپ شده باشد فقط باید کلاس correct-char را به آن بدهید.
  2. در صورتی که صحیح تایپ شده باشد فقط باید کلاس incorrect-char را به آن بدهید.
  3. در صورتی که تایپ نشده باشد نباید هیچ کلاسی داشته باشد.

همچنین باید تعداد خطاهای کاربر (errors) را نیز آپدیت کنید.

تابع updateTimer

در این تابع در صورتی که زمان باقی مانده (timeLeft) بزرگتر از صفر باشد، باید زمان باقی مانده (timeLeft) و زمان گذشته شده (timeElapsed) و مقدار کلمه بر دقیقه (wpm) را آپدیت کنید. در غیر اینصورت تست تایپ باید تمام شود.

تابع finishTest

در این تابع باید تایمری که ایجاد شده است را clear کنید. همچنین textarea را disable کنید تا کاربر نتواند در آن تایپ کند.

تابع updateAccuracy

در این تابع باید درصد دقت تایپ (accuracy) را از طریق فرمول زیر محاسبه کنید و نمایش دهید:

accuracy=(typedCharactererrors)typedCharacter×100accuracy=\frac{(typedCharacter-errors)}{typedCharacter}\times100

همچنین باید عبارت بالا را به نزدیک‌ترین عدد صحیح رند کنید.

تابع updateErrors

در این تابع باید تعداد فعلی خطاهای کاربر را در صفحه نمایش دهید.

تابع updateWpm

در این تابع باید مقدار کلمه بر دقیقه (wpm) را از طریق فرمول زیر محاسبه کنید و نمایش دهید:

wpm=typedCharacter5timeElapsed×60wpm=\frac{\frac{typedCharacter}{5}}{timeElapsed}\times60

همچنین باید عبارت بالا را به نزدیک‌ترین عدد صحیح رند کنید.

نکات🔗

  • شما تنها مجاز به اعمال تغییرات در فایل typing-test.js هستید.
  • برای ارسال پاسخ میتوانید فقط فایل typing-test.js را بدون zip کردن ارسال کنید یا کل پروژه را zip کرده و ارسال کنید.
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.