در این سوال قصد داریم یک جدول به شکل زیر طراحی کنیم:
بخشی از پیاده‌سازی در فایلهای `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
```
جدول‌بازی
در این سوال قصد داریم یک جدول به شکل زیر طراحی کنیم:
بخشی از پیاده‌سازی در فایلهای table.html و 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
Plain text
متأسفانه امروز خبردار شدیم که چهار تن از دوستان قدیمی ما، 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
```
دوزیستان ناکام
متأسفانه امروز خبردار شدیم که چهار تن از دوستان قدیمی ما، Zeno ،Zhi ،Ziv
و Zuberi، در یک نزاع برکه‌ای، توسط جمعی متشکل از راکون‌ها، مار‌ها، پرندگان وحشی
و قوهای ساکن در اطراف برکه‌ی Z خورده شده‌اند. تصمیم داریم برای مراسم ترحیم آنها
اعلامیه‌ای مانند تصویر زیر در سایت برکه قرار دهیم.
پس از نوشتن کدها، هنگام بازبینی فایل‌ها، بر اثر ناراحتی و بی دقتی دوستان،
ترتیب فایل‌ها به هم ریخت و فایل index.html بدون ذخیره‌سازی تغییرات بسته شد.
حالا محتوای لازم برای نمایش اعلامیه را نداریم. از شما می‌خواهیم این فایل را تکمیل
کنید و سایر فایل‌ها را در جای صحیح خود قرار دهید. ساختار صحیح فایل‌ها در انتها
ذکر شده است.
اعلامیه، در بدنه‌ی فایل 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:
Plain text
یک لیست بدون ترتیب، شامل حیواناتی که حضور آنها در مراسم ممنوع شده است.
موارد لیست همانند تصویر به ترتیب کلمات زیر هستند:
شکل زیر یک **ماشین‌حساب ساده** را نشان می‌دهد که قرار است برای انجام عملیات ساده‌ی
چهارگانه روی اعداد پیاده‌سازی شود.
می‌خواهیم رابط کاربری این ماشین‌حساب را با 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 *
```
ماشین‌حساب ساده
شکل زیر یک ماشین‌حساب ساده را نشان می‌دهد که قرار است برای انجام عملیات ساده‌ی
چهارگانه روی اعداد پیاده‌سازی شود.
می‌خواهیم رابط کاربری این ماشین‌حساب را با HTML و CSS پیاده‌سازی کنیم.
بخشی از کدها نوشته شده است که در اختیار شما قرار می‌گیرد.
از شما می‌خواهیم با تکمیل کدهای CSS و HTML این کار را به پایان برسانید.
می‌توانید در صورت لزوم این تغییرات را در فایل HTML بدهید:
کلاس‌های جدیدی به عناصر اضافه کنید
و یا کلاس‌های موجود را تغییر دهید، برای عناصری که
شناسه ندارند شناسه تعریف کنید، و یا ترتیب کلیدها
را در HTML تغییر دهید. تغییرات دیگر مجاز نیستند.
توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود،
پس دقت کنید که شناسه‌های موجود را تغییر ندهید.
محتوای عناصر (مثلاً حروف +، ×، 2) را تغییر ندهید.
پروژه را با ساختار زیر ارسال کنید.
تغییر تنها در مواردی که با * مشخص شده مجاز است
و ارسال سایر فایل‌ها الزامی نیست.
در این سوال قصد داریم دو حلقه‌ی مربعی تودرتو بسازیم. هدف نهایی در زیر به تصویر کشیده شده است.
همانطور که می‌بینید وقتی ماوس روی یک حلقه قرار گیرد، آن را از حلقه‌ی دیگر خارج می‌کند.
بخشی از پیاده‌سازی در فایل `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
```
حلقه‌های مربعی
در این سوال قصد داریم دو حلقه‌ی مربعی تودرتو بسازیم. هدف نهایی در زیر به تصویر کشیده شده است.
همانطور که می‌بینید وقتی ماوس روی یک حلقه قرار گیرد، آن را از حلقه‌ی دیگر خارج می‌کند.
بخشی از پیاده‌سازی در فایل rectangular_ring.html صورت گرفته است.
شما باید تنها با استفاده از عناصر این فایل، ویژگی‌های مطلوب را در فایلی به نام style.css بنویسید.
عنصر #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
Plain text
می‌خواهیم یک صفحه وب ایجاد کنیم که کد 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)
```
نمایش رنگ‌ها
می‌خواهیم یک صفحه وب ایجاد کنیم که کد Hex یک رنگ را دریافت کند و آن رنگ را
به ما نشان دهد.
برای این کار کد HTML زیر را نوشته‌ایم.
از شما می‌خواهیم عملکرد این صفحه را با استفاده از JavaScript پیاده‌سازی کنید.
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>HTML Color Test</title><styletype="text/css">#color_preview{width: 200px;height: 200px;border: 1px solid grey;background-color: white;}</style></head><body><h1>HTML Color Test</h1><inputid="color_input"type="text"/><br/><br/><divid="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)
Plain text
در این سوال قصد داریم یک بازی ساده چند مرحله‌ای را پیاده‌سازی کنیم.
نحوه اجرای بازی به این گونه است که در هر مرحله یک نقطه از صفحه به عنوان گنج انتخاب می‌شود
و هر چه قدر که موس را به آن نقطه نزدیک‌تر کنید رنگ صفحه روشن‌تر می‌شود.
همچنین این بازی باید شامل تعدادی مرحله باشد که در هر مرحله نقطه‌ای که
به عنوان گنج انتخاب می‌شود متفاوت است و باید اطلاعات مربوط به مکان گنج را از یک فایل *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)
```
پیداکردن گنج
در این سوال قصد داریم یک بازی ساده چند مرحله‌ای را پیاده‌سازی کنیم.
نحوه اجرای بازی به این گونه است که در هر مرحله یک نقطه از صفحه به عنوان گنج انتخاب می‌شود
و هر چه قدر که موس را به آن نقطه نزدیک‌تر کنید رنگ صفحه روشن‌تر می‌شود.
همچنین این بازی باید شامل تعدادی مرحله باشد که در هر مرحله نقطه‌ای که
به عنوان گنج انتخاب می‌شود متفاوت است و باید اطلاعات مربوط به مکان گنج را از یک فایل JSON بخوانید.
برای درک جزئیات بیشتر می‌توانید این نمونه را ببینید.
این فایل مراحل بازی را مشخص می‌کند و یک ویژگی به نام levels
دارد که حاوی یک آرایه است که مختصات گنج را در آن مرحله مشخص می‌کند.
اندازه لیست موجود در این فایل هم تعداد مراحل را مشخص می‌کند.
ویژگی background-color برای square:
در صورتی که موس خارج از این شی باشد باید رنگ #000 باشد.
در غیر این صورت ابتدا مقدار فاصله منهتنی موس و مکان گنج را به دست آورید و نام این مقدار را
dist بگذارید. در آن صورت هر سه مولفه رنگ باید 255−⌊2dist⌋ باشد.
منظور از فاصله منهتنی دو نقطه در این سوال مجموع اختلاف مولفه x و y آن‌هاست، یعنی اگر دو نقطه (x1,y1) و (x2,y2) داشته باشیم فاصله آنها برابر با ∣x1−x2∣+∣y1−y2∣ است.
مقدار متنی ویژگی 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 و یا npx http-server)
serve
کنید، و یا مرورگر FireFox را امتحان کنید.
فرض کنید سیستم به اینترنت متصل نیست، بنابراین از ارجاع به فایلهای موجود
در وب (CDN ها) خودداری کنید.
پروژه را با ساختار زیر ارسال کنید.
تغییر تنها در مواردی که با * مشخص شده مجاز است
و ارسال سایر فایل‌ها الزامی نیست.
[your-zip-file-name].zip
├── index.html
└── your .js files (Optional)
