برنامه تبدیل نمودار ون به عبارت مناسب

سلام… چند وقت پیش یه صفحه طراحی کردم که توش یه نمودار ون بود. هر قسمت که میخواستی رو فعال میکردی و سمت راست هم مهم ترین عبارت هایی که حاصلشون همون قسمت‌ها بود رو نشون میداد. توی این مطلب میخوام روش ساختش رو توضیح بدم.

اول از همه باید بدنه صفحه رو با CSS به دو قسمت برابر تقسیم کنیم. من با Grid انجامش دادم شما میتونید با Flex یا شناور کردن اعضا یا هر چیز دیگه‌ای انجامش بدین.

بعد از تقسیم کردن باید دو تا عنصر به صفحه اضافه کنیم: یه div با شناسه venn و یه ul با شناسه states.

حالا میخوایم بخش نمودار رو بسازیم که من این رو کاملاً با CSS انجام دادم. سه عنصر اینجا وجود داره که دوتاشون دایره های سمت چپ و راست هستن و سومی هم عین دایره سمت چپه ولی با CSS clip-path مشخص کردم که فقط توی دایره سمت راست (عنصر دایره سمت راست نه، یه مسیر که دقیقاً مثل دایره سمت راسته) قابل مشاهده باشه پس تبدیل میشه به همون قسمت همپوشانی دو دایره.

من زمینه دایره ها رو روشن و زمینه قسمت همپوشانی رو تیره انتخاب کردم (به هر کدوم یه شناسه بدین… انتخاب‌های من: left, right, center!) تا قسمت همپوشانی معلوم باشه وگرنه میشد همچین چیزی:

اگه اون قسمت وسط همرنگ قسمت های کناری باشه

اگه خواستین بالاشون اسم مجموعه ها نوشته شده باشه (A / B) میتونید مثل من از pseudo elements استفاده کنین که من از after استفاده کردم.

یه کلاس هم برای فعال / غیر فعال بودن هر بخش در نظر میگیریم (من active رو پیشنهاد میکنم!) و توی CSS به اون هم رنگ میدیم

خب میریم سراغ لیست… باید list-style رو روی none ست کنین که نقطه های کنار نتایج حذف بشن. و همچنین من برای وسط نشون دادن نتایج از display: flex و دو خصوصیت justify-content / align-items استفاده کردم. همچنین اگه مثل من از flex استفاده کردین یادتون نره که بهش اجازه wrap شدن رو بدین.

حالا میریم سراغ قسمت مهم ماجرا: زبان شیرین جاوااسکریپت!

از اونجا که من موجود خیلی تنبلی هستم، اصلاً به فکر راه های خوب و خلاقانه نیفتادم و از همون اول یه آبجکت نوشتم و حالت های ممکن رو با سه کاراکتر صفر و یک نشون دادم:

12345678910const states = {
	'000': [ '{}', '∅' ],
	'001': [ 'B - A', '(A ∪ B) - A', 'B - (A ∩ B)' ],
	'010': [ 'A ∩ B', '(A ∪ B) - (A Δ B)' ],
	'011': [ 'B'],
	'100': [ 'A - B', '(A ∪ B) - B', 'A - (A ∩ B)' ],
	'101': [ 'A Δ B', '(A ∪ B) - (A ∩ B)', '(A - B) ∪ (B - A)' ],
	'110': [ 'A' ],
	'111': [ 'A ∪ B', '(A Δ B) ∪ (A ∩ B)', '(A - B) ∪ (A ∩ B) ∪ (B - A)' ]
}

بعدش یه متغیر هم باید تعریف کنیم (من اسمش رو گذاشتم current) که حالت کنونی رو توش نگه داریم. بعد هم باید یه تابع تعریف کنیم که عبارت ها رو از این آبجکت بگیره و توی لیستمون نشون بده:

123function updateList() {
	document.getElementById("states") = states[current].map(state => `<li>${state}</li>`).join('')
}

حالا میرسیم به مهمترین بخش کار از نظر من، که تابع toggle هست. توی این تابع میایم و وضعیت فعالیت یکی از اعضا رو معکوس میکنیم (فعال به غیر فعال و غیر فعال به فعال) و این رو هم در current و هم در کلاس‌لیست عنصر اعمال میکنیم.

برای شما

1234567function toggleActivity(element, id) {
	element.classList.toggle('active')
	current = current.split('')
	current[id] = element.classList.contains('active') ? '1' : '0'
	current = current.join('')
	updateList()
}

تابع ما دو آرگومنت نیاز داره که به ترتیب عنصر ما در نمودار و جایگاهی از current که باید تغییر داده بشه هستن. مثلاً برای قمست همپوشانی باید توی رویداد عنصرمون بنویسیم:

1toggleActivity(this, 1) // 0 for left, 1 for center and 2 for right

چون از توی رویداد داریم تابع رو فراخوانی میکنیم پس this به معنای اون عنصر هست، و عدد یک هم یعنی باید جایگاه دوم از متغیر current عوض بشه. توی خط اول تابع کلاس active رو برای عنصر toggle میکنیم. توی خط دوم و چهارم به ترتیب current رو تبدیل به آرایه و دوباره تبدیل به رشته میکنیم؛ توی خط سوم براساس فعال بودن یا نبودن عنصر برابر یک یا صفر قرار میدیم… و توی خط آخر هم لیست رو با تابعی که قبل‌تر نوشته‌بودیم بروز میکنیم.

حالا صفحه رو امتحان کنید ببینید خوب شده یا نه؟ هر عبارتی که خواستین رو میتونین به states اضافه کنین.

امیدوارم لذت کافی رو برده باشین. من با این که قبلاً این رو ساخته بودم همه کد ها رو توی ویرایشگر ویرگول نوشتم پس اگه اشتباهی کرده بودم توی بخش نظرات بگین. اینم کد از GitHub Gist:

این اولین کاری بود که با توجه به کتاب های درسی و برای مدرن کردن شیوه آموزشی انجام دادم. از شما هم خواهش میکنم که سعی خودتون رو بکنین. راستی، یه سری رنگ و طرح دیگه هم برای همین برنامه به‌کار بردم که توی همین لینک عکسش رو گذاشتم.

منابعی که برای ساخت این صفحه استفاده کردم:

برای یادگیری مشخصه clip-path و استفاده از آن: MDN / W3Schools

برای یادگیری در حوزه نمودار ون و تبدیل نمودار به عبارت: ریاضی نهم / ریاضیات تکمیلی نهم

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

خدانگهدار

نویسنده مطلب: اشکان لائی

منبع مطلب

برنامه تبدیل نمودار ون به عبارت مناسب

به فکر سرمایه‌گذاری هستی؟