در این سوال قصد داریم یک جدول به شکل زیر طراحی کنیم:
بخشی از پیاده‌سازی در فایلهای `table.html` و `style.css` انجام شده است.
شما باید با توجه به جزئیاتی که در ادامه می‌آیند، فایل `table.html` را تکمیل کنید.
# پروژه اولیه
پروژه اولیه را از
[اینجا](https://quera.ir/qbox/download/5qMEt862aO/jadval-bazi.zip)
دانلود کنید.
ساختار فایلهای این پروژه به صورت زیر است.
```
jadval_bazi
├── style.css
└── table.html
```
# جزئیات
باید یک `<table>` را به گونه‌ای به `<body>` در فایل `table.html` اضافه کنید که:
- دارای ۱۶ خانه مانند شکل فوق باشد.
- شناسه (`id`) هر خانه به صورت `cell_i` باشد که `i` عدد داخل آن خانه است.
- تنها از tag های `td`، `tr` و `table` استفاده کنید؛
زیرا برای این موارد در فایل `style.css` ویژگی‌هایی در نظر گرفته شده
که آنها را در مکان مورد نظر برای داوری در صفحه قرار می‌دهد.
فایل `table.html` را پس از تکمیل، فشرده و ارسال کنید.
# نکات
- فایل `style.css` بخشی از تنظیمات مربوط به ابعاد خانه‌های جدول،
تنظیمات مربوط رنگ و فونت، و جهت‌گیری متن درون خانه‌ها را انجام می‌دهد.
این موارد به هیچ وجه نباید از درون `table.html` تغییر کنند.
- توجه کنید که داوری خودکار بر مبنای شناسه (`id`) عناصر انجام می‌شود.
پس دقت کنید که عناصر شناسه‌ی صحیح داشته باشند.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── table.html
```
جدول‌بازی
متأسفانه امروز خبردار شدیم که چهار تن از دوستان قدیمی ما، Zeno ،Zhi ،Ziv
و Zuberi، در یک نزاع برکه‌ای، توسط جمعی متشکل از راکون‌ها، مار‌ها، پرندگان وحشی
و قوهای ساکن در اطراف برکه‌ی Z خورده شده‌اند. تصمیم داریم برای مراسم ترحیم آنها
اعلامیه‌ای مانند تصویر زیر در سایت برکه قرار دهیم.
پس از نوشتن کدها، هنگام بازبینی فایل‌ها، بر اثر ناراحتی و بی دقتی دوستان،
ترتیب فایل‌ها به هم ریخت و فایل `index.html` بدون ذخیره‌سازی تغییرات بسته شد.
حالا محتوای لازم برای نمایش اعلامیه را نداریم. از شما می‌خواهیم این فایل را تکمیل
کنید و سایر فایل‌ها را در جای صحیح خود قرار دهید. ساختار صحیح فایل‌ها در انتها
ذکر شده است.
# پروژه اولیه
پروژه اولیه را از
[این لینک](/contest/assignments/48962/download_problem_initial_project/165504/)
دانلود کنید.
ساختار فایلهای این پروژه به صورت زیر است.
```
funeral-invitation
├── index.html
├── style_1.css
├── style_2.css
├── zeno.jpg
├── zhi.jpg
├── ziv.jpg
└── zuberi.jpg
```
# جزئیات
اعلامیه، در بدنه‌ی فایل `index.html` ، **به ترتیب**، شامل موارد زیر است:
- یک عنوان `h1` با محتوای `Condolences`
- تصاویر قربانیان به ترتیب زیر با برچسب‌های `img` قرار می‌گیرند. همچنین تمامی
تصاویر از کلاس `image` هستند:
+ تصویر مربوط به Zeno با شناسه‌ی `zeno`
+ تصویر مربوط به Zhi با شناسه‌ی `zhi`
+ تصویر مربوط به Ziv با شناسه‌ی `ziv`
+ تصویر مربوط به Zuberi با شناسه‌ی `zuberi`
- یک بلوک `div` با شناسه‌ی `container` بعد از چهار تصویر، شامل موارد زیر:
+ یک بند نوشته، با برچسب `p` که محتوای آن در ادامه می‌آید.
```
We learned with regret the death of Zeno, Zhi, Ziv and Zuberi.
The ceremony will take place in Z lake on Friday.
All animals in Z forest are invited except:
```
+ یک لیست بدون ترتیب، شامل حیواناتی که حضور آنها در مراسم ممنوع شده است.
موارد لیست همانند تصویر به ترتیب کلمات زیر هستند:
```
Swans, Snakes, Birds, Raccoons
```
و شناسه‌های آنها عبارتند از
```
swans, snakes, birds, raccoons
```
# نکات
- توجه کنید که داوری خودکار بر مبنای شناسه (id) و کلاس‌های عناصر انجام می‌شود.
پس دقت کنید که عناصر، شناسه و کلاس صحیح داشته باشند.
- بزرگی و کوچکی حروف در داوری تأثیرگذار است.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
├── images
│ ├── zeno.jpg
│ ├── zhi.jpg
│ ├── ziv.jpg
│ └── zuberi.jpg
├── stylesheets
│ ├── style_1.css
│ └── style_2.css
└── index.html
```
دوزیستان ناکام
شکل زیر یک **ماشین‌حساب ساده** را نشان می‌دهد که قرار است برای انجام عملیات ساده‌ی
چهارگانه روی اعداد پیاده‌سازی شود.
می‌خواهیم رابط کاربری این ماشین‌حساب را با HTML و CSS پیاده‌سازی کنیم.
بخشی از کدها نوشته شده است که در اختیار شما قرار می‌گیرد.
از شما می‌خواهیم با تکمیل کدهای CSS و HTML این کار را به پایان برسانید.
# پروژه اولیه
پروژه اولیه را از
[اینجا](https://quera.ir/qbox/download/4qHkOhWczi/simple-calculator.zip)
دانلود کنید.
ساختار فایلهای این پروژه به صورت زیر است:
```
simple-calculator
├── DigitalNumbers.woff
├── RobotoCondensed.woff
├── calculator.html
└── style.css
```
# جزئیات
همانطور که در فایل `calculator.html` مشاهده می‌کنید، ساختار عناصر ماشین‌حساب به صورت زیر است:
```html
<div id="app">
<div id="result">1428.57</div>
<div id="keypad">
<div id="nums">
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">0</div>
<div class="key">.</div>
<div class="key">=</div>
</div>
<div id="ops">
<div class="key">×</div>
<div class="key">-</div>
<div class="key">+</div>
<div class="key">÷</div>
<div class="key">CM</div>
<div class="key">M-</div>
<div class="key">M+</div>
</div>
</div>
</div>
```
از شما می‌خواهیم بر اساس توضیحات زیر، پیاده‌سازی ظاهر این ماشین‌حساب را تکمیل کنید.
## عنصر `#app`
- ارتفاع این عنصر ۷۰٪ ارتفاع صفحه (و حداقل ۲۸۰ پیکسل) است.
- عرض این عنصر ۸۰٪ عرض صفحه (و حداکثر ۵۸۰ پیکسل) است.
- این عنصر همواره دقیقاً در مرکز صفحه قرار دارد.
## عنصر `#result`
- ارتفاع این عنصر ۲۸٪ ارتفاع ماشین‌حساب و عرض آن به اندازه‌ی عرض ماشین‌حساب است.
- رنگ پس‌زمینه `#EEE` و رنگ متن `#444` است.
- فونت این عنصر `DigitalNumbers` است.
## عنصر `#keypad`
- ارتفاع این عنصر ۷۲٪ ارتفاع ماشین‌حساب و عرض آن به اندازه‌ی عرض ماشین‌حساب است.
- رنگ متن همه‌ی کلیدها `#DDD` است.
- فونت همه‌ی کلیدها `RobotoCondensed` است.
## عنصر `#nums`
- ارتفاع این عنصر به اندازه‌ی ارتفاع بخش کلیدها و عرض آن ۵۴٪ عرض بخش کلیدها است.
- عرض و ارتفاع این عنصر مطابق شکل به طور مساوی بین ۱۲ کلید آن تقسیم می‌شود.
- کلیدهای این بخش مطابق شکل رنگ‌های `#19676E` و `#095057` را به صورت شطرنجی دارند.
## عنصر `#ops`
- ارتفاع این عنصر به اندازه‌ی ارتفاع بخش کلیدها و عرض آن ۴۶٪ عرض بخش کلیدها است.
- کلیدهای این بخش (به جز کلید`+`) نیمی از عرض و یک‌چهارم ارتفاع این عنصر را دارند.
- کلیدهای این بخش (به جز کلید`+`) مطابق شکل رنگ‌های `#D34E47` و `#B52D26`
را به صورت شطرنجی دارند.
- ارتفاع کلید `+` دو برابر بقیه و رنگ آن `#C43E37` است.
## سایر توضیحات
- بین کلیدها هیچ فاصله‌ای وجود ندارد.
- هیچ عنصری حاشیه (border) ندارد.
- فایل فونت‌های `RobotoCondensed` و `DigitalNumbers` به شما داده شده است.
باید قبل از استفاده، آنها را با `font-face` در فایل `style.css` تعریف کنید.
# نکات
- می‌توانید در صورت لزوم این تغییرات را در فایل HTML بدهید:
کلاس‌های جدیدی به عناصر اضافه کنید
و یا کلاس‌های موجود را تغییر دهید، برای عناصری که
شناسه ندارند شناسه تعریف کنید، و یا ترتیب کلیدها
را در HTML تغییر دهید. تغییرات دیگر مجاز نیستند.
- توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود،
پس دقت کنید که شناسه‌های موجود را تغییر ندهید.
- محتوای عناصر (مثلاً حروف `+`، `×`، `2`) را تغییر ندهید.
- پروژه را با ساختار زیر ارسال کنید.
تغییر تنها در مواردی که با `*` مشخص شده مجاز است
و ارسال سایر فایل‌ها الزامی نیست.
```
[your-zip-file-name].zip
├── calculator.html *
├── DigitalNumbers.woff
├── RobotoCondensed.woff
└── style.css *
```
ماشین‌حساب ساده
در این سوال قصد داریم دو حلقه‌ی مربعی تودرتو بسازیم. هدف نهایی در زیر به تصویر کشیده شده است.
همانطور که می‌بینید وقتی ماوس روی یک حلقه قرار گیرد، آن را از حلقه‌ی دیگر خارج می‌کند.
بخشی از پیاده‌سازی در فایل `rectangular_ring.html` صورت گرفته است.
شما باید تنها با استفاده از عناصر این فایل، ویژگی‌های مطلوب را در فایلی به نام `style.css` بنویسید.
# پروژه اولیه
پروژه اولیه را از
[اینجا](https://quera.ir/qbox/download/OyRteXilO6/rectangular-rings.zip)
دانلود کنید.
ساختار فایلهای این پروژه به صورت زیر است.
```
rectangular-rings
└── rectangular_ring.html
```
# جزئیات
فایل `rectangular_ring.html` شامل عناصر زیر در بدنه‌ی خود است:
```html
<div id="container">
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
</div>
```
+ عنصر `#container` همان مربع خاکستری رنگی است که در تصویر دیده می‌شود.
این بلوک در پس‌زمینه‌ی حلقه‌ها قرار می‌گیرد،
هر کدام از ابعاد آن `400px` ، فاصله‌ی آن از هر کدام از اضلاع سمت چپ
و بالای صفحه برابر با `100px` ، و رنگ پس‌زمینه‌ی آن `#D5D8DC` است.
+ عناصر `.right` حلقه‌ی سمت راست را تشکیل می‌دهند.
هر کدام از `div` ها یکی از اضلاع حلقه هستند. رنگ پس‌زمینه‌ی هر کدام از اضلاع این حلقه `#2ECC71` است.
+ عناصر `.left` نیز حلقه‌ی سمت چپ را تشکیل می‌دهند.
هر کدام از `div` ها یکی از اضلاع حلقه هستند و رنگ پس‌زمینه‌شان `#E74C3C` است.
+ دو مربع در دو نقطه یکدیگر را قطع می‌کنند؛ همانطور که در نمایش بالا مشاهده می‌شود،
ضلع سمت چپ مربع سبز بر روی ضلع بالایی مربع قرمز قرار می‌گیرد،
و ضلع سمت راست مربع قرمز بر روی ضلع پایینی مربع سبز کشیده می‌شود.
به این ترتیب دو مربع تودرتو به نظر خواهند رسید.
+ با قرار گرفتن و حرکت ماوس بر روی هر کدام از اضلاع یک حلقه،
اضلاع آن در هر دو نقطه‌ی تقاطع بر روی اضلاع حلقه‌ی دیگر قرار خواهند گرفت.
به این ترتیب به نظر می‌رسد که حلقه‌ی مورد نظر از حلقه‌ی دیگر خارج شده است.
+ ابعاد حلقه‌ها مانند یکدیگر است و فاصله‌ها متقارن هستند.
نسبت ابعاد حلقه‌ها به `#container` در زیر قابل مشاهده است.
+ توصیه می‌شود ابتدا ویژگی `margin` را برای `body` برابر با صفر قرار دهید
و سپس مکان بقیه‌ی عناصر را تعیین کنید تا `#container` دقیقا `100px` از بالا و از چپ صفحه فاصله داشته باشد.
# نکات
- به هیچ عنوان فایل `rectangular_ring.html` را تغییر ندهید؛
تنها کد مورد نظر خود را در فایل `style.css` بنویسید.
- داوری بر اساس شناسه (`id`) و کلاس عناصر صورت خواهد گرفت؛
بنابراین دقیقا از اسامی تعریف شده در فایل اولیه استفاده کنید.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── style.css
```
حلقه‌های مربعی
می‌خواهیم یک صفحه وب ایجاد کنیم که کد Hex یک رنگ را دریافت کند و آن رنگ را
به ما نشان دهد.
برای این کار کد HTML زیر را نوشته‌ایم.
از شما می‌خواهیم عملکرد این صفحه را با استفاده از JavaScript پیاده‌سازی کنید.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Color Test</title>
<style type="text/css">
#color_preview {
width: 200px;
height: 200px;
border: 1px solid grey;
background-color: white;
}
</style>
</head>
<body>
<h1>HTML Color Test</h1>
<input id="color_input" type="text"/>
<br/><br/>
<div id="color_preview"></div>
</body>
</html>
```
# جزئیات
باید به محض تغییر مقدار داخل input، رنگ div بر اساس آن مقدار به روز شود.
همچنین می‌خواهیم در صورتی که کاربر مقدار نامعتبری وارد کرد، رنگ div سیاه شود.
- مثال‌هایی از مقادیر نامعتبر: `aa`، `4a4b4z`، `aaaaaaa`
- مثال‌هایی از مقادیر معتبر: `777`، `4f568e`، `a8c`
تغییرات موردنظر را اعمال کنید و فایل(ها) را به صورت Zip ارسال کنید.
نام فایل HTML اصلی را `index.html` قرار دهید.
همچنین می‌توانید در کنار آن تعدادی فایل `.js` قرار دهید.
# نکات
- توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود.
پس دقت کنید که عناصر، شناسه صحیح داشته باشند.
- فرض کنید سیستم به اینترنت متصل نیست، بنابراین از ارجاع به فایلهای موجود
در وب (CDN ها) خودداری کنید.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
├── index.html
└── your .js files (Optional)
```
نمایش رنگ‌ها
در این سوال قصد داریم یک بازی ساده چند مرحله‌ای را پیاده‌سازی کنیم.
نحوه اجرای بازی به این گونه است که در هر مرحله یک نقطه از صفحه به عنوان گنج انتخاب می‌شود
و هر چه قدر که موس را به آن نقطه نزدیک‌تر کنید رنگ صفحه روشن‌تر می‌شود.
همچنین این بازی باید شامل تعدادی مرحله باشد که در هر مرحله نقطه‌ای که
به عنوان گنج انتخاب می‌شود متفاوت است و باید اطلاعات مربوط به مکان گنج را از یک فایل *JSON* بخوانید.
برای درک جزئیات بیشتر می‌توانید این نمونه را ببینید.
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/jVjs1SCPaI/findtreasure.zip) دانلود کنید.ساختار فایلهای این پروژه به صورت زیر است.
```
findtreasure
├── index.html
├── levels.json
└── style.css
```
# جزئیات
فایل `levels.json`:
+ این فایل مراحل بازی را مشخص می‌کند و یک ویژگی به نام `levels`
دارد که حاوی یک آرایه است که مختصات گنج را در آن مرحله مشخص می‌کند.
+ اندازه لیست موجود در این فایل هم تعداد مراحل را مشخص می‌کند.
ویژگی `background-color` برای `square`:
+ در صورتی که موس خارج از این شی باشد باید رنگ `#000` باشد.
+ در غیر این صورت ابتدا مقدار فاصله منهتنی موس و مکان گنج را به دست آورید و نام این مقدار را
$dist$ بگذارید. در آن صورت هر سه مولفه رنگ باید $255 - \lfloor \dfrac {dist}{2} \rfloor $ باشد.
منظور از فاصله منهتنی دو نقطه در این سوال مجموع اختلاف مولفه $x$ و $y$ آن‌هاست، یعنی اگر دو نقطه $(x_1, y_1)$ و $(x_2, y_2)$ داشته باشیم فاصله آنها برابر با $|x_1 - x_2| + |y_1 - y_2|\ $ است.
مقدار متنی ویژگی `level`:
+ در هر زمان که فاصله منهتنی موس و گنج کم‌تر از $10$ شد این مرحله تمام می‌شود و باید مرحله بعدی
نمایش داده شود و ویژگی `level` هم باید مقدارش یکی بیشتر شود. در ابتدای بازی در مرحله ۰ هستیم و مقدار ویژگی `level` هم باید به صورت `Level #id` باشد که `#id` شماره مرحله کنونی است.
+ همچنین در صورتی که آخرین مرحله هم تمام شد باید مقدار این ويژگی به `You won!` تغییر کند و رنگ `square` هم برای همیشه سفید بماند. (حتی در زمانی که موس از صفحه خارج شد.)
تغییرات لازم را در فایل `index.html` و در صورت نیاز فایلهای `.js` خود را اضافه کنید.
توجه کنید که در هنگام تست‌کردن ممکن است فایل `levels.json` تغییر کند.
# نکات
- توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود.
پس دقت کنید که عناصر شناسه‌ی صحیح داشته باشند.
- در صورتی که هنگام ارسال درخواست برای دریافت فایل `levels.json` با خطای `Cross Origin`
از طرف مرورگر مواجه شدید، به جای باز کردن مستقیم فایل *HTML* با مرورگر،
پوشه پروژه را با یک وب‌سرور (مثلاً
[`python -m http.server`](https://docs.python.org/3/library/http.server.html) و یا `npx http-server`)
serve
کنید، و یا مرورگر *FireFox* را امتحان کنید.
- فرض کنید سیستم به اینترنت متصل نیست، بنابراین از ارجاع به فایلهای موجود
در وب (*CDN* ها) خودداری کنید.
- پروژه را با ساختار زیر ارسال کنید.
تغییر تنها در مواردی که با `*` مشخص شده مجاز است
و ارسال سایر فایل‌ها الزامی نیست.
```
[your-zip-file-name].zip
├── index.html
└── your .js files (Optional)
```