حالت، DOM و زمان‌سنج‌ها

واردسازی دام

ناپایا شمار := 0

تابع ترسیم:
    نمایشگر := دام.با شناسه("value")
    دام.تنظیم متن(نمایشگر، "" + شمار)
    اگر شمار < 0:
        دام.تنظیم سبک(نمایشگر، "color"، "#dc2626")
    وگرنه:
        دام.تنظیم سبک(نمایشگر، "color"، "#0f172a")
    پایان
پایان

تابع بیفزا:
    شمار += 1
    ترسیم()
پایان

تابع بکاه:
    شمار -= 1
    ترسیم()
پایان

تابع صفرکن:
    شمار = 0
    ترسیم()
پایان

صفحه:
    عنوان = "شمارنده"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "button" فاصله = "8px 18px" اندازه قلم = "1.1rem" کادر = "1px solid #cbd5e1" گردی کادر = 8 پس زمینه = "#f8fafc" نشانگر = اشاره‌گر پایان
    سراسری: گزینشگر = "button:hover" پس زمینه = "#e0e7ff" پایان
    جعبه:
        بیشینه عرض = "16rem" فضا = "0 auto" فاصله = 20 ترازمتن = وسط کادر = "1px solid #e2e8f0" گردی کادر = 14
        سرتیتر: شناسه = "value" اندازه = 1 محتوا = "0" اندازه قلم = "4rem" فضا = "0 0 12px 0" پایان
        دکمه: شناسه = "minus" کلیک = بکاه محتوا = "-1" جهت = "ltr" پایان
        دکمه: شناسه = "plus" کلیک = بیفزا محتوا = "+1" فضا = "0 8px" جهت = "ltr" پایان
        دکمه: شناسه = "zero" کلیک = صفرکن محتوا = "از نو" پایان
    پایان
پایان

واردسازی دام

پایا حد := 80

تابع بسنج:
    استفاده := دام.دریافت خاصیت عددی(دام.با شناسه("note")، "textLength") برگردان صحیح۶۴
    دام.تنظیم متن(دام.با شناسه("used")، "" + استفاده + " / " + حد)
    اگر استفاده > حد:
        دام.تنظیم سبک(دام.با شناسه("used")، "color"، "#dc2626")
        دام.تنظیم سبک(دام.با شناسه("bar")، "width"، "100%")
        دام.تنظیم سبک(دام.با شناسه("bar")، "background"، "#dc2626")
    وگرنه:
        دام.تنظیم سبک(دام.با شناسه("used")، "color"، "#475569")
        دام.تنظیم سبک(دام.با شناسه("bar")، "width"، "" + استفاده * 100 / حد + "%")
        دام.تنظیم سبک(دام.با شناسه("bar")، "background"، "#4f46e5")
    پایان
    دام.تنظیم خاصیت منطقی(دام.با شناسه("post")، "disabled"، استفاده == 0 یا استفاده > حد)
پایان

صفحه:
    عنوان = "شمارنده‌ی نویسه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "28rem" پایان
    متن بلند: شناسه = "note" ورودی = بسنج ردیف‌ها = 3 جانگهدار = "یادداشت کوتاهی بنویسید" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" خانواده قلم = inherit اندازه جعبه = "border-box" گردی کادر = 8 کادر = "1px solid #cbd5e1" پایان
    جعبه: ارتفاع = 6 پس زمینه = "#e2e8f0" گردی کادر = 3 فضا = "6px 0"
        جعبه: شناسه = "bar" ارتفاع = "100%" عرض = "0%" پس زمینه = "#4f46e5" گردی کادر = 3 گذار = "width 0.15s" پایان
    پایان
    جعبه: نمایش = فلکس چینش = "space-between" ترازعمودی = وسط
        تکه: شناسه = "used" محتوا = "0 / 80" رنگ = "#475569" جهت = "ltr" پایان
        دکمه: شناسه = "post" غیرفعال = درست محتوا = "ارسال" فاصله = "6px 16px" پایان
    پایان
پایان

واردسازی دام

تابع محدود:
    عبارت := دام.دریافت مقدار(دام.با شناسه("q"))
    سطرها := دام.پرسمان همه("#books li")
    ناپایا دیده := 0
    تکرار دام.تعداد(سطرها) در ردیف:
        سطر := دام.عنصر شماره(سطرها، ردیف)
        اگر دام.دریافت متن(سطر).دربردارد(عبارت):
            دام.تنظیم سبک(سطر، "display"، "")
            دیده += 1
        وگرنه:
            دام.تنظیم سبک(سطر، "display"، "none")
        پایان
    پایان
    دام.تنظیم متن(دام.با شناسه("found")، "" + دیده + " از " + دام.تعداد(سطرها))
    اگر دیده == 0:
        دام.تنظیم سبک(دام.با شناسه("none")، "display"، "block")
    وگرنه:
        دام.تنظیم سبک(دام.با شناسه("none")، "display"، "none")
    پایان
پایان

صفحه:
    عنوان = "پالایش"
    ظاهر سفارشی: محتوا = "#books li { padding: 10px 12px; margin: 6px 0; background: #f1f5f9; border-radius: 8px }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "26rem" پایان
    ورودی: شناسه = "q" نوع = جستجو ورودی = محدود جانگهدار = "جست‌وجو در قفسه" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" اندازه جعبه = "border-box" گردی کادر = 8 کادر = "1px solid #cbd5e1" پایان
    پاراگراف: شناسه = "found" محتوا = "6 از 6" رنگ = "#475569" فضا = "6px 0" پایان
    فهرست: شناسه = "books" سبک فهرست = هیچ فاصله = 0
        مورد: محتوا = "شازده کوچولو" پایان
        مورد: محتوا = "غرور و تعصب" پایان
        مورد: محتوا = "هابیت" پایان
        مورد: محتوا = "زنان کوچک" پایان
        مورد: محتوا = "موبی دیک" پایان
        مورد: محتوا = "آرزوهای بزرگ" پایان
    پایان
    پاراگراف: شناسه = "none" محتوا = "هیچ کتابی در قفسه با این عبارت نمی‌خواند." نمایش = هیچ رنگ = "#b45309" پایان
پایان

واردسازی دام

ناپایا شبانه := نادرست

تابع بچرخان:
    دام.تعویض کلاس(دام.بدنه()، "night")
    شبانه = وارونه شبانه
    اگر شبانه:
        دام.تنظیم متن(دام.با شناسه("flip")، "رفتن به حالت روز")
    وگرنه:
        دام.تنظیم متن(دام.با شناسه("flip")، "رفتن به حالت شب")
    پایان
پایان

صفحه:
    عنوان = "حالت شب"
    ظاهر سفارشی: محتوا = "body { background: #f8fafc; color: #0f172a; transition: background 0.3s, color 0.3s } body.night { background: #0f172a; color: #e2e8f0 } body.night .card { background: #1e293b; border-color: #334155 }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 فاصله = "1.5rem" کمینه ارتفاع = "12rem" پایان
    جعبه:
        کلاس = "card"
        بیشینه عرض = "26rem" فاصله = 20 پس زمینه = سفید کادر = "1px solid #e2e8f0" گردی کادر = 14
        سرتیتر: اندازه = 2 محتوا = "عصر بخیر" فضا = "0 0 8px 0" پایان
        پاراگراف: محتوا = "یک کلاس روی بدنه‌ی صفحه همه‌ی رنگ‌ها را عوض می‌کند." پایان
        دکمه: شناسه = "flip" کلیک = بچرخان محتوا = "رفتن به حالت شب" فاصله = "8px 16px" گردی کادر = 8 کادر = "1px solid #6366f1" پس زمینه = "#6366f1" رنگ = سفید نشانگر = اشاره‌گر پایان
    پایان
پایان

واردسازی دام

تابع بگردان(نام: رشته):
    سرخط := دام.با شناسه("h-" + نام)
    قاب := دام.با شناسه("p-" + نام)
    دام.تعویض کلاس(قاب، "open")
    اگر دام.دریافت ویژگی(سرخط، "aria-expanded") == "true":
        دام.تنظیم ویژگی(سرخط، "aria-expanded"، "false")
    وگرنه:
        دام.تنظیم ویژگی(سرخط، "aria-expanded"، "true")
    پایان
پایان

بخش تاشو(نام، عنوان):
    جعبه:
        کلاس = "fold"
        دکمه: شناسه = "h-" + نام باز شده دسترسی‌پذیری = "false" کلیک = (): بگردان(نام) پایان محتوا = عنوان پایان
        جعبه: شناسه = "p-" + نام کلاس = "pane"
            محتوا: پایان
        پایان
    پایان
پایان

صفحه:
    عنوان = "پرسش‌های پرتکرار"
    ظاهر سفارشی: محتوا = ".pane { display: none; padding: 0 14px 12px } .pane.open { display: block } .fold button { width: 100%; text-align: start; padding: 12px 14px; font-size: 1rem; border: 0; background: #f1f5f9; cursor: pointer; font-family: inherit } .fold button:hover { background: #e0e7ff } .fold button[aria-expanded=true] { font-weight: bold }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "30rem" پایان
    سراسری: گزینشگر = ".fold" کادر = "1px solid #e2e8f0" گردی کادر = 10 سرریز = پنهان فضا = "0 0 8px 0" پایان
    تاشو: نام = "ship" عنوان = "ارسال سفارش چقدر طول می‌کشد؟"
        پاراگراف: محتوا = "دو تا چهار روز کاری، در سراسر کشور." پایان
    پایان
    تاشو: نام = "back" عنوان = "آیا می‌توانم کالا را پس بدهم؟"
        پاراگراف: محتوا = "بله، تا سی روز، به شرط آنکه استفاده نشده باشد." پایان
    پایان
    تاشو: نام = "pay" عنوان = "چه روش‌هایی برای پرداخت دارید؟"
        پاراگراف: محتوا = "کارت بانکی و حواله‌ی بانکی." پایان
    پایان
پایان

واردسازی دام

تابع برگزین(شماره: صحیح):
    زبانه‌ها := دام.پرسمان همه(".tab")
    برگه‌ها := دام.پرسمان همه(".sheet")
    تکرار دام.تعداد(زبانه‌ها) در ردیف:
        زبانه := دام.عنصر شماره(زبانه‌ها، ردیف)
        برگه := دام.عنصر شماره(برگه‌ها، ردیف)
        اگر ردیف == شماره:
            دام.افزودن کلاس(زبانه، "on")
            دام.افزودن کلاس(برگه، "on")
            دام.تنظیم ویژگی(زبانه، "aria-selected"، "true")
        وگرنه:
            دام.حذف کلاس(زبانه، "on")
            دام.حذف کلاس(برگه، "on")
            دام.تنظیم ویژگی(زبانه، "aria-selected"، "false")
        پایان
    پایان
پایان

صفحه:
    عنوان = "نان تخت"
    ظاهر سفارشی: محتوا = ".tab { padding: 10px 18px; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 1rem; font-family: inherit; cursor: pointer } .tab:hover { background: #f1f5f9 } .tab.on { border-bottom-color: #4f46e5; font-weight: bold } .sheet { display: none; padding: 14px 4px } .sheet.on { display: block }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "32rem" پایان
    جعبه: نقش = tablist کادر پایین = "1px solid #e2e8f0"
        دکمه: کلاس = "tab on" aria selected = "true" کلیک = (): برگزین(0) پایان محتوا = "نمای کلی" پایان
        دکمه: کلاس = "tab" aria selected = "false" کلیک = (): برگزین(1) پایان محتوا = "دستور" پایان
        دکمه: کلاس = "tab" aria selected = "false" کلیک = (): برگزین(2) پایان محتوا = "نظرها" پایان
    پایان
    جعبه: کلاس = "sheet on" محتوا = "نانی نازک که روی سنگ داغ، در حدود چهار دقیقه پخته می‌شود." پایان
    جعبه: کلاس = "sheet" محتوا = "آرد، آب، نمک و یک قاشق خمیرمایه. خمیر را یک ساعت استراحت بدهید." پایان
    جعبه: کلاس = "sheet" محتوا = "میانگین چهار و نیم ستاره از ۲۱۲ خواننده." پایان
پایان

واردسازی دام

تابع بشمار:
    مانده := دام.تعداد(دام.پرسمان همه("#tasks li"))
    دام.تنظیم متن(دام.با شناسه("left")، "" + مانده + " کار مانده")
پایان

تابع ثبت(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    خانه := دام.با شناسه("name")
    نوشته := دام.دریافت مقدار(خانه)
    اگر نوشته.طول() > 0:
        سطر := دام.بساز("li")
        عبارت := دام.بساز("span")
        دام.تنظیم متن(عبارت، نوشته)
        انجام := دام.بساز("button")
        دام.تنظیم متن(انجام، "انجام شد")
        دام.هنگام رویداد(انجام، "click"، (): دام.برداشتن(سطر) بشمار() پایان)
        دام.افزودن(سطر، عبارت)
        دام.افزودن(سطر، انجام)
        دام.افزودن(دام.با شناسه("tasks")، سطر)
        دام.تنظیم مقدار(خانه، "")
        بشمار()
    پایان
پایان

صفحه:
    عنوان = "کارهای من"
    ظاهر سفارشی: محتوا = "#tasks li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin: 6px 0; background: #f1f5f9; border-radius: 8px } #tasks button { border: 0; background: #e0e7ff; border-radius: 6px; padding: 4px 10px; cursor: pointer }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "26rem" پایان
    فرم:
        شناسه = "new" ارسال = ثبت نمایش = فلکس شکاف = 8
        ورودی: شناسه = "name" جانگهدار = "چه کاری باید انجام شود؟" فلکس = 1 فاصله = 8 اندازه قلم = "1rem" پایان
        دکمه: شناسه = "add" نوع = ارسال محتوا = "افزودن" فاصله = "8px 16px" کادر = "0" پس زمینه = "#4f46e5" رنگ = سفید گردی کادر = 8 نشانگر = اشاره‌گر پایان
    پایان
    فهرست: شناسه = "tasks" سبک فهرست = هیچ فاصله = 0 پایان
    پاراگراف: شناسه = "left" محتوا = "0 کار مانده" رنگ = "#475569" پایان
پایان

واردسازی دام

تابع رزرو(رویداد: صحیح۶۴):
    دام.تعویض کلاس(دام.هدف رویداد(رویداد)، "taken")
    گرفته := دام.تعداد(دام.پرسمان همه(".seat.taken"))
    دام.تنظیم متن(دام.با شناسه("summary")، "" + گرفته + " صندلی از 8 صندلی انتخاب شده است")
پایان

صفحه:
    عنوان = "صندلی‌ها"
    ظاهر سفارشی: محتوا = ".seat { width: 44px; height: 44px; border: 2px solid #94a3b8; border-radius: 8px 8px 14px 14px; background: white; cursor: pointer } .seat:hover { border-color: #4f46e5 } .seat.taken { background: #4f46e5; border-color: #4f46e5 }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه: نمایش = شبکه ستون های شبکه = "repeat(4, 44px)" شکاف = 10 چینش = آغاز
        دکمه: تکرار = 8 کلاس = "seat" کلیک = رزرو برچسب دسترسی‌پذیری = "صندلی" پایان
    پایان
    پاراگراف: شناسه = "summary" محتوا = "0 صندلی از 8 صندلی انتخاب شده است" رنگ = "#475569" پایان
پایان

واردسازی دام

ناپایا دهم := 0
ناپایا ضربان := 0 برگردان صحیح۶۴
ناپایا روشن := نادرست

تابع ترسیم:
    دام.تنظیم متن(دام.با شناسه("time")، "" + دهم / 600 + ":" + دهم / 10 % 60 / 10 + دهم / 10 % 60 % 10 + "." + دهم % 10)
پایان

تابع تیک:
    دهم += 1
    ترسیم()
پایان

تابع آغازوپایان:
    اگر روشن:
        دام.پاک کردن بازه(ضربان)
        روشن = نادرست
        دام.تنظیم متن(دام.با شناسه("go")، "شروع")
    وگرنه:
        ضربان = دام.تنظیم بازه((): تیک() پایان، 100)
        روشن = درست
        دام.تنظیم متن(دام.با شناسه("go")، "توقف")
    پایان
پایان

تابع صفرکن:
    دهم = 0
    ترسیم()
پایان

صفحه:
    عنوان = "کرنومتر"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "button" فاصله = "8px 20px" اندازه قلم = "1.05rem" کادر = "1px solid #cbd5e1" گردی کادر = 8 پس زمینه = "#f8fafc" نشانگر = اشاره‌گر پایان
    جعبه:
        بیشینه عرض = "16rem" فضا = "0 auto" فاصله = 20 ترازمتن = وسط کادر = "1px solid #e2e8f0" گردی کادر = 14
        پاراگراف: شناسه = "time" محتوا = "0:00.0" اندازه قلم = "3rem" خانواده قلم = "ui-monospace, monospace" فضا = "0 0 12px 0" جهت = "ltr" پایان
        دکمه: شناسه = "go" کلیک = آغازوپایان محتوا = "شروع" پایان
        دکمه: شناسه = "clear" کلیک = صفرکن محتوا = "از نو" فضا = "0 8px 0 0" پایان
    پایان
پایان

واردسازی دام

ناپایا منتظر := 0 برگردان صحیح۶۴

تابع بپوشان:
    دام.حذف کلاس(دام.با شناسه("toast")، "show")
پایان

تابع رونوشت:
    دام.پاک کردن مهلت(منتظر)
    دام.افزودن کلاس(دام.با شناسه("toast")، "show")
    منتظر = دام.تنظیم مهلت((): بپوشان() پایان، 2000)
پایان

صفحه:
    عنوان = "پیام موقت"
    ظاهر سفارشی: محتوا = "#toast { opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none } #toast.show { opacity: 1; transform: none }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    دکمه: شناسه = "copy" کلیک = رونوشت محتوا = "کپی پیوند" فاصله = "10px 20px" اندازه قلم = "1rem" گردی کادر = 8 کادر = "1px solid #4f46e5" پس زمینه = "#4f46e5" رنگ = سفید نشانگر = اشاره‌گر خانواده قلم = inherit پایان
    جعبه: شناسه = "toast" نقش = status محتوا = "پیوند کپی شد. این پیام تا دو ثانیه‌ی دیگر محو می‌شود." فضا = "14px 0 0 0" فاصله = "10px 14px" پس زمینه = "#0f172a" رنگ = سفید گردی کادر = 8 بیشینه عرض = "20rem" پایان
پایان

واردسازی دام

ناپایا آغاز := 0.0

تابع بلغز(زمان: اعشار۶۴):
    ناپایا چپ := (زمان - آغاز) / 4.0
    اگر چپ < 240.0:
        دام.درخواست فریم((بعدی: اعشار۶۴): بلغز(بعدی) پایان)
    وگرنه:
        چپ = 240.0
    پایان
    دام.تنظیم سبک(دام.با شناسه("ball")، "left"، "" + چپ + "px")
پایان

تابع پرتاب:
    آغاز = دام.اکنون()
    دام.درخواست فریم((زمان: اعشار۶۴): بلغز(زمان) پایان)
پایان

صفحه:
    عنوان = "لغزش"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    جعبه: موقعیت = نسبی عرض = 280 ارتفاع = 44 پس زمینه = "#e0e7ff" گردی کادر = 22 جهت = "ltr"
        جعبه: شناسه = "ball" موقعیت = مطلق بالا = 4 چپ = 0 عرض = 36 ارتفاع = 36 پس زمینه = "#4f46e5" گردی کادر = "50%" پایان
    پایان
    دکمه: شناسه = "go" کلیک = پرتاب محتوا = "بلغزان" فضا = "14px 0 0 0" فاصله = "8px 18px" کادر = "0" پس زمینه = "#4f46e5" رنگ = سفید گردی کادر = 8 نشانگر = اشاره‌گر خانواده قلم = inherit پایان
پایان

واردسازی دام

تابع ذخیره:
    نوشته := دام.دریافت مقدار(دام.با شناسه("text"))
    دام.تنظیم متن ذخیره("note"، نوشته)
    اگر دام.دریافت متن ذخیره("note") == نوشته:
        دام.تنظیم متن(دام.با شناسه("state")، "روی این دستگاه ذخیره شد.")
    وگرنه:
        دام.تنظیم متن(دام.با شناسه("state")، "این مرورگر آن را نگه نمی‌دارد.")
    پایان
پایان

تابع بارگذاری:
    ذخیره‌شده := دام.دریافت متن ذخیره("note")
    اگر ذخیره‌شده.طول() > 0:
        دام.تنظیم مقدار(دام.با شناسه("text")، ذخیره‌شده)
        دام.تنظیم متن(دام.با شناسه("state")، "یادداشت ذخیره‌شده‌ی شما بارگذاری شد.")
    وگرنه:
        دام.تنظیم متن(دام.با شناسه("state")، "هنوز چیزی ذخیره نشده است.")
    پایان
پایان

صفحه:
    عنوان = "یادداشت"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "28rem" پایان
    متن بلند: شناسه = "text" ورودی = ذخیره ردیف‌ها = 4 جانگهدار = "یادداشت شما" عرض = "100%" فاصله = 10 اندازه قلم = "1rem" خانواده قلم = inherit اندازه جعبه = "border-box" گردی کادر = 8 کادر = "1px solid #cbd5e1" پایان
    جعبه: نمایش = فلکس چینش = "space-between" ترازعمودی = وسط فضا = "6px 0"
        تکه: شناسه = "state" محتوا = "هنوز چیزی ذخیره نشده است." رنگ = "#475569" پایان
        دکمه: شناسه = "again" کلیک = بارگذاری محتوا = "بارگذاری یادداشت" فاصله = "6px 14px" پایان
    پایان
    اسکریپت سفارشی: محتوا = "window.addEventListener('DOMContentLoaded', function () { بارگذاری(); });" پایان
پایان

واردسازی دام

تابع رای(نام: رشته):
    جمع := دام.با شناسه("votes-" + نام)
    دام.تنظیم متن(جمع، "" + (دام.دریافت متن(جمع).به صحیح() + 1))
پایان

بخش گزینه(نام):
    جعبه:
        کلاس = "choice"
        دکمه: کلیک = (): رای(نام) پایان محتوا = "رأی به " + نام پایان
        تکه: شناسه = "votes-" + نام محتوا = "0" پایان
    پایان
پایان

صفحه:
    عنوان = "نظرسنجی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "26rem" پایان
    سراسری: گزینشگر = ".choice" نمایش = فلکس چینش = "space-between" ترازعمودی = وسط فاصله = "8px 12px" فضا = "0 0 8px 0" پس زمینه = "#f1f5f9" گردی کادر = 10 پایان
    سراسری: گزینشگر = ".choice button" فاصله = "6px 14px" کادر = "1px solid #6366f1" گردی کادر = 8 پس زمینه = سفید رنگ = "#4338ca" نشانگر = اشاره‌گر خانواده قلم = inherit پایان
    سراسری: گزینشگر = ".choice span" اندازه قلم = "1.4rem" وزن قلم = پررنگ رنگ = "#0f172a" پایان
    سرتیتر: اندازه = 2 محتوا = "نوشیدنی مورد علاقه‌ی شما؟" فضا = "0 0 12px 0" پایان
    گزینه: نام = "چای" پایان
    گزینه: نام = "قهوه" پایان
    گزینه: نام = "آبمیوه" پایان
پایان

واردسازی دام

ناپایا پرسیده := 0
ناپایا امتیاز := 0
ناپایا قفل := نادرست

تابع کارت(شماره: صحیح): رشته:
    ترابرد شماره:
        0: برگشت "کدام عنصر بزرگ‌ترین سرتیتر است؟|h1|h6|header|0" پایان
        1: برگشت "کدام ویژگی به تصویر متن جایگزین می‌دهد؟|alt|src|title|0" پایان
        وگرنه: برگشت "کدام رویداد با هر تایپ در یک کادر رخ می‌دهد؟|click|input|load|1" پایان
    پایان
    برگشت ""
پایان

تابع نمایش‌کارت:
    اجزا := کارت(پرسیده).بشکاف("|")
    دام.تنظیم متن(دام.با شناسه("ask")، اجزا.بگیر(0))
    تکرار 3 در k:
        دام.تنظیم متن(دام.با شناسه("c" + k)، اجزا.بگیر(k + 1))
        دام.تنظیم ویژگی(دام.با شناسه("c" + k)، "class"، "choice")
    پایان
    دام.تنظیم متن(دام.با شناسه("verdict")، "یک پاسخ انتخاب کنید.")
    قفل = نادرست
پایان

تابع انتخاب(k: صحیح):
    اگر وارونه قفل:
        قفل = درست
        درست‌ها := کارت(پرسیده).بشکاف("|").بگیر(4).به صحیح()
        اگر k == درست‌ها:
            امتیاز += 1
            دام.افزودن کلاس(دام.با شناسه("c" + k)، "right")
            دام.تنظیم متن(دام.با شناسه("verdict")، "درست است.")
        وگرنه:
            دام.افزودن کلاس(دام.با شناسه("c" + k)، "wrong")
            دام.افزودن کلاس(دام.با شناسه("c" + درست‌ها)، "right")
            دام.تنظیم متن(دام.با شناسه("verdict")، "این بار نه.")
        پایان
    پایان
پایان

تابع بعدی:
    اگر پرسیده == 3:
        پرسیده = 0
        امتیاز = 0
        دام.تنظیم متن(دام.با شناسه("next")، "بعدی")
        نمایش‌کارت()
    وگرنه قفل:
        پرسیده += 1
        اگر پرسیده == 3:
            دام.تنظیم متن(دام.با شناسه("verdict")، "امتیاز شما " + امتیاز + " از 3 است.")
            دام.تنظیم متن(دام.با شناسه("next")، "بازی دوباره")
        وگرنه:
            نمایش‌کارت()
        پایان
    پایان
پایان

صفحه:
    عنوان = "پرسش و پاسخ"
    ظاهر سفارشی: محتوا = ".choice { display: block; width: 100%; margin: 6px 0; padding: 10px 14px; text-align: start; font-size: 1rem; font-family: inherit; border: 1px solid #cbd5e1; border-radius: 8px; background: white; cursor: pointer } .choice:hover { background: #eef2ff } .choice.right { background: #dcfce7; border-color: #16a34a } .choice.wrong { background: #fee2e2; border-color: #dc2626 }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "28rem" پایان
    سرتیتر: شناسه = "ask" اندازه = 3 محتوا = "کدام عنصر بزرگ‌ترین سرتیتر است؟" پایان
    دکمه: شناسه = "c0" کلاس = "choice" کلیک = (): انتخاب(0) پایان محتوا = "h1" جهت = "ltr" پایان
    دکمه: شناسه = "c1" کلاس = "choice" کلیک = (): انتخاب(1) پایان محتوا = "h6" جهت = "ltr" پایان
    دکمه: شناسه = "c2" کلاس = "choice" کلیک = (): انتخاب(2) پایان محتوا = "header" جهت = "ltr" پایان
    پاراگراف: شناسه = "verdict" محتوا = "یک پاسخ انتخاب کنید." رنگ = "#475569" پایان
    دکمه: شناسه = "next" کلیک = بعدی محتوا = "بعدی" فاصله = "8px 18px" کادر = "0" پس زمینه = "#4f46e5" رنگ = سفید گردی کادر = 8 نشانگر = اشاره‌گر پایان
پایان