این مسابقه شامل چهار سوال HTML
، CSS
، و JavaScript
است. در صورتی که صورت سؤال به شما اجازه میدهد، میتوانید از کتابخانههای JavaScript
استفاده کنید. در این صورت حتماً فایل کتابخانه را همراه کد خود ارسال کنید و از ارجاع به صفحات وب و CDN ها اجتناب کنید.
جهت دریافت امتیاز مطلوب در مسابقه، به نکات زیر توجه کنید:
نمرهدهی به صورت خودکار توسط سامانه داوری آنلاین Quera انجام میشود. داوری هر پاسخ حدود ۲۰ تا ۳۰ ثانیه طول میکشد. ولی گاهی به دلیل شلوغی صف ارسالها ممکن است تا ۱ دقیقه یا کمی بیشتر نیز طول بکشد.
در صورت هر سوال،
لطفا پیش از ارسال، پاسخ خود را در رایانهی شخصی اجرا کنید و از صحت عملکرد آن اطمینان حاصل نمایید.
در صورتی که به ابهامی برخوردید، میتوانید در بخش «سوال بپرسید» سؤال خود را مطرح کنید. لطفا از طرح سوالات تکراری خودداری کنید. همچنین ابتدا سعی کنید مشکل را حل کنید و در صورتی که مشکل پابرجا بود، سؤال را مطرح کنید.
با مراجعه به بخش همهی ارسالها و کلیک بر روی نمرهی هر سوال، می توانید جزئیات نمرات را مشاهده کنید.
رتبهبندی مسابقه به ترتیب مجموع نمرهای است که از سوالها دریافت میکنید. شرکتکنندگان با نمرهی برابر بر اساس مجموع زمان ارسالهای نهایی رتبهبندی میشوند.
به بزرگ یا کوچک بودن حروف در اسامی توجه کنید.
در شکل زیر یک دیدگاه را مشاهده میکنید که کاربران مختلف به آن امتیاز دادهاند. اما امتیاز در تصویر نمایش داده نشده است.
امتیاز این دیدگاه در فایلی به نام count.json
وجود دارد.
از شما میخواهیم محتوای این فایل را دریافت کرده و امتیاز را مطابق
شکل زیر نمایش دهید.
فایلهای اولیه را از اینجا دانلود کنید. ساختار این فایلها به شرح زیر است:
باید به محض باز شدن صفحه، عدد موجود در count.json
را بخوانید و
آن را در بلوک div
با شناسه likes
(که درفایل HTML دادهشده
وجود دارد) نمایش دهید.
میتوانید در کنار فایل HTML، تعدادی فایل .js
قرار دهید.
توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام میشود. پس دقت کنید که عناصر شناسهی صحیح داشته باشند.
در صورتی که هنگام ارسال درخواست برای دریافت فایل count.json
با خطای Cross Origin
از طرف مرورگر مواجه شدید، به جای باز کردن مستقیم فایل HTML با مرورگر،
پوشه پروژه را با یک وبسرور (مثلاً
http.server پایتون)
serve
کنید، و یا مرورگر FireFox را امتحان کنید.
ساختار فایل ارسالی باید دقیقاً مطابق زیر باشد. در این غیر این صورت، کد شما قابل دسترسی برای داوری آنلاین نخواهد بود.
یک مربع در صفحه وجود دارد. میخواهیم با فشرده شدن کلیدهای جهت صفحه کلید (بالا، پایین، راست، چپ) مربع بر روی صفحه در همین جهتها حرکت کند.
کد HTML و CSS نوشته شده است و به شما داده میشود. از شما میخواهیم عملکرد موردنظر را با JavaScript پیادهسازی کنید.
فایلهای اولیه را از اینجا دانلود کنید. ساختار این فایلها به شرح زیر است:
باید با فشرده شدن هریک از کلیدهای بالا، پایین، راست و چپ، مربع
(بلوک div با شناسه square
) یک پیکسل در جهت موردنظر حرکت کند.
در صورتی که هنگام فشرده شدن کلید جهت، کلید shift نیز نگه داشته شده باشد، حرکت مربع بجای یک پیکسل، باید ۱۰ پیکسل باشد.
مثلاً با فشردن shift + up
، مربع باید ۱۰ پیکسل به بالا حرکت کند.
میتوانید در کنار index.html
، تعدادی فایل .js
(کتابخوانههای آماده و یا کد خودتان) قرار دهید و استفاده کنید.
کافیست با هر بار زدن کلید، یک بار حرکت موردنظر انجام شود. نیازی نیست تا زمانی که کلید پایین است، مربع به حرکت ادامه دهد.
حرکت مربع باید بلافاصله پس از فشردن کلید به صورت کامل و سریع انجام شود.
همانطور که در فایل CSS داده شده مشاهده میکنید مکان اولیهی مربع (200, 200)
است.
اما کد شما نباید به این موقعیت وابسته باشد، زیرا هنگام داوری خودکار یک
فایل CSS دیگر جایگزین میشود و مکان اولیه مربع متفاوت خواهد بود.
توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام میشود، پس دقت کنید که شناسههای موجود را تغییر ندهید.
ساختار فایل ارسالی باید دقیقاً مطابق زیر باشد. در این غیر این صورت، کد شما قابل دسترسی برای داوری آنلاین نخواهد بود.
شکل زیر یک ماشینحساب ساده را نشان میدهد که قرار است برای انجام عملیات سادهی چهارگانه روی اعداد صحیح پیادهسازی شود.
میخواهیم رابط کاربری این ماشینحساب را با HTML و CSS پیادهسازی کنیم. بخشی از کدها نوشته شده است که در اختیار شما قرار میگیرد. از شما میخواهیم با تکمیل کدهای CSS و HTML این کار را به پایان برسانید.
فایلهای اولیه را از اینجا دانلود کنید. ساختار این فایلها به شرح زیر است:
همانطور که در فایل calculator.html
مشاهده میکنید، ساختار عناصر ماشینحساب به صورت زیر است:
از شما میخواهیم بر اساس توضیحات زیر، پیادهسازی ظاهر این ماشینحساب را تکمیل کنید.
#app
🔗#result
🔗#EEE
و رنگ متن #444
است.DigitalNumbers
است.#keypad
🔗#DDD
است.RobotoCondensed
است.#nums
🔗#19676E
و #095057
را به صورت شطرنجی دارند.#ops
🔗+
) نیمی از عرض و یکچهارم ارتفاع این عنصر را دارند.+
) مطابق شکل رنگهای #D34E47
و #B52D26
را به صورت شطرنجی دارند.+
دو برابر بقیه و رنگ آن #C43E37
است.RobotoCondensed
و DigitalNumbers
به شما داده شده است.
باید قبل از استفاده، آنها را با font-face
تعریف کنید.میتوانید در صورت لزوم این تغییرات را در فایل HTML بدهید: کلاسهای جدیدی به عناصر اضافه کنید و یا کلاسهای موجود را تغییر دهید، برای عناصری که شناسه ندارند شناسه تعریف کنید، و یا ترتیب کلیدها را در HTML تغییر دهید. توجه کنید که تغییرات دیگر مجاز نیستند.
توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام میشود، پس دقت کنید که شناسههای موجود را تغییر ندهید.
محتوای عناصر (مثلاً حروف +
، ×
، 2
) را تغییر ندهید.
نمرهدهی از بخشهای مختلف تشکیل شده است. به هر میزان که موارد خواسته شده را پیادهسازی کنید، نمره خواهید گرفت.
ساختار فایل ارسالی باید دقیقاً مطابق زیر باشد. در این غیر این صورت، کد شما قابل دسترسی برای داوری آنلاین نخواهد بود.
در این سؤال قصد داریم از شما برای طراحی یک سودوکوی ساده کمک بگیریم. این سودوکو در ابتدا به این شکل است:
قوانین این سودوکو به این ترتیب هستند:
همه خانههای این جدول باید با اعداد ۱ تا ۸ پر شود.
در هر ردیف افقی یا مورب (در جهاتی که در شکل زیر مشخص شده است) و همچنین در هر شش خانه مجاور هریک از خانههای رنگی شکل زیر (مثلاً خانههای ۶، ۷، ۱۱، ۱۳، ۱۷ و ۱۸)، نباید عدد تکراری وجود داشته باشد.
Check
،درصورتی که تمام خانهها به درستی
پر شده باشند، جدول به شکلی مشابه تصویر زیر در میآید:Check
با نتیجهای مانند تصویر زیر مواجه میشویم:New
، جدول خالی میشود و بازی تازهای آغاز میشود.کد HTML و CSS نوشته شده است و به شما داده میشود. از شما میخواهیم عملکردهای خواستهشده را با JavaScript پیادهسازی کنید.
مثالی از نحوهی عملکرد:
فایلهای اولیه را از اینجا دانلود کنید. ساختار این فایلها به شرح زیر است:
همانطور که در فایل HTML دادهشده میبینید، هرکدام از خانههای جدول، یک
عنصر input
با کلاس cell
و شناسه cell_i
است.
همچنین کلیدهایCheck
و New
هر کدام یک عنصر button
هستند
که به ترتیب شناسهی check
و new
دارند.
از شما میخواهیم بر اساس توضیحات زیر، پیادهسازی عملکرد را انجام دهید.
با فشردن کلید Check
:
disable
میشوند.#37B75E
میشود.#F5BB88
میشود.
خانههایی که دارای مقادیر تکراری هستند رنگ #DE480D
خواهند داشت.
رنگ بقیهی خانههای پر نیز #F37540
میشود.1
داشته باشند،
هر سه دچار تغییر گفته شده خواهند شد.با فشردن کلید New
محتوای تمام خانهها خالی میشود،
رنگ پس زمینه و رنگ متن به حالت اولیه برمیگردد و میتوانند ورودی جدید بپذیرند.
در هر خانه، تنها یکی از ارقام 1
تا 8
میتواند قرار بگیرد.
در صورت وارد شدن چند رقم متوالی، تنها اولین رقم در خانه قرار میگیرد
و کاراکترهای دیگر نیز به کلی پذیرفته نمیشوند. مثلاً در صورتی که در خانهای
رقم 9
یا حرف a
تایپ شود، این حرف نباید وارد input شود، یا در صورتی که
در یک خانه که با رقم 1
پر شده است، رقم 2
تایپ شود، این حرف نیز نباید
وارد input شود.
(میتوانید پس از ورود حروف غیرمجاز، آنها را از input حذف کنید.)
a925
تایپ شود،
انتظار داریم داخل خانه رقم 2
قرار بگیرد.اطلاعات دقیقتر در مورد ویژگی های هر کلاس و هر عنصر در فایلهای اولیهی دادهشده موجود است. لذا این فایلها به طور دقیق بررسی کنید.
توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام میشود. پس دقت کنید که عناصر شناسهی صحیح داشته باشند.
ساختار فایل ارسالی باید دقیقاً مطابق زیر باشد. در این غیر این صورت، کد شما قابل دسترسی برای داوری آنلاین نخواهد بود.