جدول‌بازی


در این سوال قصد داریم یک جدول به شکل زیر طراحی کنیم:

table

بخشی از پیاده‌سازی در فایل‌های table.html و style.css انجام شده‌ است. شما باید با توجه به جزئیاتی که در ادامه می‌آیند، فایل table.html را تکمیل کنید.

پروژه اولیه🔗

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

jadval_bazi
├── style.css
└── table.html
Plain text

جزئیات🔗

باید یک <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 خورده شده‌اند. تصمیم داریم برای مراسم ترحیم آن‌ها اعلامیه‌ای مانند تصویر زیر در سایت برکه‌ قرار دهیم.

Funeral Invitation

پس از نوشتن کدها، هنگام بازبینی فایل‌ها،‌ بر اثر ناراحتی و بی دقتی دوستان، ترتیب فایل‌ها به هم ریخت و فایل index.html بدون ذخیره‌سازی تغییرات بسته شد. حالا محتوای لازم برای نمایش اعلامیه را نداریم. از شما می‌خواهیم این فایل را تکمیل کنید و سایر فایل‌ها را در جای صحیح خود قرار دهید. ساختار صحیح فایل‌ها در انتها ذکر شده است.

پروژه اولیه🔗

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

funeral-invitation
├── index.html
├── style_1.css
├── style_2.css
├── zeno.jpg
├── zhi.jpg
├── ziv.jpg
└── zuberi.jpg
Plain text

جزئیات🔗

اعلامیه، در بدنه‌ی فایل 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
    • یک لیست بدون ترتیب، شامل حیواناتی که حضور آن‌ها در مراسم ممنوع شده است. موارد لیست همانند تصویر به ترتیب کلمات زیر هستند:
      Swans, Snakes, Birds, Raccoons
      Plain text
      و شناسه‌های آنها عبارتند از
      swans, snakes, birds, raccoons
      Plain text

نکات🔗

  • توجه کنید که داوری خودکار بر مبنای شناسه (id) و کلاس‌های عناصر انجام می‌شود. پس دقت کنید که عناصر، شناسه و کلاس صحیح داشته باشند.
  • بزرگی و کوچکی حروف در داوری تأثیرگذار است.
  • پروژه را با ساختار زیر ارسال کنید.
    [your-zip-file-name].zip
    ├── images
    │   ├── zeno.jpg
    │   ├── zhi.jpg
    │   ├── ziv.jpg
    │   └── zuberi.jpg
    ├── stylesheets
    │   ├── style_1.css
    │   └── style_2.css
    └── index.html
    Plain text

ماشین‌حساب ساده


شکل زیر یک ماشین‌حساب ساده را نشان می‌دهد که قرار است برای انجام عملیات ساده‌ی چهارگانه روی اعداد پیاده‌سازی شود.

Calculator

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

پروژه اولیه🔗

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است:

simple-calculator
├── DigitalNumbers.woff
├── RobotoCondensed.woff
├── calculator.html
└── style.css
Plain text

جزئیات🔗

همان‌طور که در فایل calculator.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>
HTML

از شما می‌خواهیم بر اساس توضیحات زیر، پیاده‌سازی ظاهر این ماشین‌حساب را تکمیل کنید.

عنصر #app🔗

  • ارتفاع این عنصر ۷۰٪ ارتفاع صفحه (و حداقل ۲۸۰ پیکسل) است.
  • عرض این عنصر ۸۰٪ عرض صفحه (و حداکثر ۵۸۰ پیکسل) است.
  • این عنصر همواره دقیقاً در مرکز صفحه قرار دارد.

Calculator

عنصر #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  *
    Plain text

حلقه‌های مربعی


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

حلقه‌های مربعی

همانطور که می‌بینید وقتی ماوس روی یک حلقه قرار گیرد، آن را از حلقه‌ی دیگر خارج می‌کند. بخشی از پیاده‌سازی در فایل rectangular_ring.html صورت گرفته است. شما باید تنها با استفاده از عناصر این فایل، ویژگی‌های مطلوب را در فایلی به نام style.css بنویسید.

پروژه اولیه🔗

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

rectangular-rings
└── rectangular_ring.html
Plain text

جزئیات🔗

فایل rectangular_ring.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>
HTML
  • عنصر #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 یک رنگ را دریافت کند و آن رنگ را به ما نشان دهد.

Color Viewer

برای این کار کد HTML زیر را نوشته‌ایم. از شما می‌خواهیم عملکرد این صفحه را با استفاده از JavaScript پیاده‌سازی کنید.

<!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>
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 بخوانید.

برای درک جزئیات بیشتر می‌توانید این نمونه را ببینید.

توضیح تصویر

پروژه اولیه🔗

پروژه اولیه را از اینجا دانلود کنید.ساختار فایل‌های این پروژه به صورت زیر است.

findtreasure
├── index.html
├── levels.json
└── style.css
Plain text

جزئیات🔗

فایل levels.json:

  • این فایل مراحل بازی را مشخص می‌کند و یک ویژگی به نام levels دارد که حاوی یک آرایه است که مختصات گنج را در آن مرحله مشخص می‌کند.

  • اندازه لیست موجود در این فایل هم تعداد مراحل را مشخص می‌کند.

ویژگی background-color برای square:

  • در صورتی که موس خارج از این شی باشد باید رنگ #000 باشد.
  • در غیر این صورت ابتدا مقدار فاصله منهتنی موس و مکان گنج را به دست آورید و نام این مقدار را ‍‍distdist بگذارید. در آن صورت هر سه مولفه رنگ باید 255dist2255 - \lfloor \dfrac {dist}{2} \rfloor باشد.

منظور از فاصله منهتنی دو نقطه در این سوال مجموع اختلاف مولفه xx و yy آن‌هاست، یعنی اگر دو نقطه (x1,y1)(x_1, y_1) و (x2,y2)(x_2, y_2) داشته باشیم فاصله آن‌ها برابر با x1x2+y1y2 |x_1 - x_2| + |y_1 - y_2|\ است.

مقدار متنی ویژگی level:

  • در هر زمان که فاصله منهتنی موس و گنج کم‌تر از 1010 شد این مرحله تمام می‌شود و باید مرحله بعدی نمایش داده شود و ویژگی 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)
    Plain text