در این سوال قصد داریم یک برنامه تست سرعت تایپ را پیاده‌سازی کنیم. ظاهر کلی برنامه به شکل زیر است:
پروژه اولیه
پروژه اولیه را از این لینک دانلود کنید.
ساختار فایل‌های این پروژه به این صورت است
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
راه اندازی پروژه
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- سپس فایل
index.htmlرا در مرورگر خود باز کنید.
جزئیات
در فایل typing-test.js تعداد تابع وجود دارند که شما باید آنها را کامل کنید:
تابع initializeTest
initializeTestاین تابع دو پارامتر را به عنوان ورودی دریافت می‌کند. timeLimit زمان تست (در واحد ثانیه) و text متن تست می‌باشد.
در این تابع باید مقدار اولیه زمان باقی مانده (timeLeft) را در صفحه نمایش دهید. همچنین هر کاراکتر از متن را در یک تگ span قرار دهید و این تگ‌ها را به ترتیب داخل تگ div با آیدی type-text قرار دهید. برای مثال اگر متن اولیه کلمه سلام باشد HTML رندر شده به صورت زیر باید باشد:
<div id="type-text">
<span>س</span>
<span>ل</span>
<span>ا</span>
<span>م</span>
</div>
تابع updateCharactersStatus
updateCharactersStatusدر این تابع باید وضعیت هر کاراکتر آپدیت کنید. هر کاراکتر می‌تواند سه وضعیت داشته باشد:
- در صورتی که صحیح تایپ شده باشد فقط باید کلاس
correct-charرا به آن بدهید. - در صورتی که صحیح تایپ شده باشد فقط باید کلاس
incorrect-charرا به آن بدهید. - در صورتی که تایپ نشده باشد نباید هیچ کلاسی داشته باشد.
همچنین باید تعداد خطاهای کاربر (errors) را نیز آپدیت کنید.
تابع updateTimer
updateTimerدر این تابع در صورتی که زمان باقی مانده (timeLeft) بزرگتر از صفر باشد، باید زمان باقی مانده (timeLeft) و زمان گذشته شده (timeElapsed) و مقدار کلمه بر دقیقه (wpm) را آپدیت کنید. در غیر اینصورت تست تایپ باید تمام شود.
تابع finishTest
finishTestدر این تابع باید تایمری که ایجاد شده است را clear کنید. همچنین textarea را disable کنید تا کاربر نتواند در آن تایپ کند.
تابع updateAccuracy
updateAccuracyدر این تابع باید درصد دقت تایپ (accuracy) را از طریق فرمول زیر محاسبه کنید و نمایش دهید:
$accuracy=\frac{(typedCharacter-errors)}{typedCharacter}\times100$
همچنین باید عبارت بالا را به نزدیک‌ترین عدد صحیح رند کنید.
تابع updateErrors
updateErrorsدر این تابع باید تعداد فعلی خطاهای کاربر را در صفحه نمایش دهید.
تابع updateWpm
updateWpmدر این تابع باید مقدار کلمه بر دقیقه (wpm) را از طریق فرمول زیر محاسبه کنید و نمایش دهید:
$wpm=\frac{\frac{typedCharacter}{5}}{timeElapsed}\times60$
همچنین باید عبارت بالا را به نزدیک‌ترین عدد صحیح رند کنید.
نکات
- شما تنها مجاز به اعمال تغییرات در فایل
typing-test.jsهستید. - برای ارسال پاسخ میتوانید فقط فایل
typing-test.jsرا بدون zip کردن ارسال کنید یا کل پروژه را zip کرده و ارسال کنید.
ارسال پاسخ برای این سؤال