چرتک بلاگ

کدنویسی، آموزش وبلاگ، تفریح و دلنوشت با کمی چاشنی طنز

ابزار ساخت فلش کارت آنلاین

توسط Mohsen シ در تاریخ ۲۷ بهمن ۱۳۹۹

در موضوعات: ابزار و قالب وبلاگ

سلام! امیدوارم که حال دلتون خوب باشه... شاید مدت زیادی نباشه که توی بلاگ بیان نبودم ولی این مدت کوتاه هم برام صد سال گذشته بخاطر این دانشگاه و مصائبش :) ولی خوب اون میمونه برای یک پست دیگه... امروز قراره ابزاری رو که تقریبا از تابستون روش کار میکردم اما بخاطر تنبلی زیادم هیچوقت کاملش نمیکردم رو بهتون معرفی کنم:

ابزار ساخت فلش کارت آنلاین

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

کلمه اول:معنی کلمه اول

کلمه دوم: معنی کلمه دوم

کلمه سوم: معنی کلمه سوم

به برنامه میدین و این برنامه مشابه کاربرد فلش کارت ها به صورت رندم سوالات رو از شما میپرسه. شما میتونین تو هر مرحله جواب رو ببینین. اگر جوابتون درست بود، روی دکمه درست کلیک میکنین و اگر غلط بود روی دکمه غلط. در نهایت برنامه یک لیست از کلمات درست و اشتباهی که جواب دادین رو بهتون برمیگردونه. همین :) نرم افزار ساده ای هستش ولی خوب پیاده سازیش شاید اون جوری ها هم که فکر میکنین ساده نباشه.

در هر حال توی لینک پایین میتونین دموی برنامه رو ببینین و چون دیگه هدفم یاد دادن برنامه نویسی به دیگرانه و از طرفی پروژه چندان بزرگی هم نیستش، به صورت آزاد با مجوز MIT توی گیتهاب گذاشتم. اگر به برنامه نویسی وب و جاواسکریپت علاقه داشتین میتونین چک کنین اگرچه خودمم الان سر در نمیارم چی به چیه و واقعا چی نوشتم :/ شاید بعضیا بگن استفاده از یک فریمورک مثل ری اکت بهتر بود تو این مورد و باید بگم کاملا حق دارین! ولی بلد نیستم... :) در هر حال:

 

لینک پیش نمایش ابزار ساخت فلش کارت آنلاین

 

لینک کد منبع ابزار در گیتهاب

 

برای تست ابزار بالا میتونین از این متن پایین استفاده کنین: (کلمات کتاب 504 هستش)

abandon: ترک کردن
vacant : خالی
keen: تیز
jealous: حسود
tact : تاکتیک
oath: سوگند
hardship : سختی
data : اطلاعات
bachelor: مرد مجرد
qualify : واجد شرایط شدن

 

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

نظرات

برو به فرم ارسال نظر

تا الان ۷ نظر داریم.

barsam mohamadee ۲۷ بهمن ۱۳۹۹، ۲۲:۵۰

سلام .
خیلی خوشحال میشم از اطلعات شما بهره ببرم.
آیا خارج از اطلاتی که میدهید پرسش هم داشته باشم؟
باسپاس

Mohsen シ ۲۷ بهمن ۱۳۹۹، ۲۳:۱۲

سلام :)

خواهش میکنم لطف دارین.
بعله تا حد امکان کمک میکنم و اگر نیاز به توضیحات بیشتری بود لینک میدم تا مشکل یا سوالتون رو حل کنین.

فآطم .. ۲۸ بهمن ۱۳۹۹، ۱۰:۲۳

خسته نباشیددددد
🤔 چه باحال

Mohsen シ ۲۸ بهمن ۱۳۹۹، ۱۲:۳۹

خیلی ممنون :) خواهش میکنم!

AliReza ‌‌ ۲۸ بهمن ۱۳۹۹، ۲۳:۰۷

دمت گرم خفنه :))
شنیدم با جاوااسکریپت میشه اپ هم طراحی کرد تو بلدی؟ اگه واسه همین یه اپ طراحی کنی عالی میشه :)

Mohsen シ ۲۹ بهمن ۱۳۹۹، ۱۸:۵۸

قربان تو :)

آره با استفاده از React Native میشه. اتفاقا کار سختیم نیست منظور همین الانشم میشه از همین کد استفاده کرد ولی خوب بلد نیستم :) ایده جالبیه ولی. اگر جاوا اسکریپت گوشی فعال باشه میشه باز از این ابزار استفاده کرد ولی باید کمی تغییر بدم که در گوشی هم خوب دیده بشه

AliReza ‌‌ ۲۹ بهمن ۱۳۹۹، ۲۰:۱۲

آها :))

راستی یه سوال فنی
این فونت متن داخل همین فیلدی دارم که تایپ میکنم کد سی اس اسش چیه😐
هرچی از اینسپکت رفتم کلاسش رو کشف کنم نشد
اطلاعاتم قشنگ نصف و نیمه ست

Mohsen シ ۲۹ بهمن ۱۳۹۹، ۲۰:۴۰

حقیقتش من از سایت خاصی استفاده نکردم. تو تمام صفحات میتونی هر فونتی که خواستی رو اضافه کنی میتونی برای اطلاعات بیشتر به این لینک مراجعه کنی ولی خلاصش رو بگم اینطوریه کد:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
قسمت اولش یک اسم برای فونتت انتخاب میکنی که بعدا با همین دستور فونت قسمت مد نظرت رو تغییر بدی
قسمت دوم هم لینک اون فونت رو میدی. همین :) برای هر فونت باید اینکارو انجام بدی جدا و البته باید تو فایل CSS اون اوایل باشه. علت اینکه کلاسی هم نداره اینه که توی body و input تعریف کردم کلا همه چیز به اون فونت باشه و همشون از اونا این خصوصیت فونت رو به ارث میبرن.

AliReza ‌‌ ۲۹ بهمن ۱۳۹۹، ۲۱:۵۵

والا من هم به همه body فونت دادم ولی نشد
بهرحال ممنون :)

Mohsen シ ۲۹ بهمن ۱۳۹۹، ۲۳:۵۶

میتونی کدت رو آپلود کنی تا مشکل رو بگم ولی برای قسمت های ورودی مثل دکمه ها و ورودی متن باید توی input بنویسی حتما :)

خواهش میکنم! 

محمدرضا ... ۳۰ بهمن ۱۳۹۹، ۰۰:۵۹

چه کد تمیزی نوشتی ... خیلی خوب از توابع استفاده کردی و برنامه‌ی کوتاهی شده ... به کمک آبجکت و کلوژر میشه کوتاه‌ترش هم کرد ... خیلی خوشم اومد ...

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

Mohsen シ ۳۰ بهمن ۱۳۹۹، ۱۷:۴۵

بعله درسته اساسا استفاده از آبجکت ها خیلی بهتر بود ولی هر کاری کردم نحوه پیاده سازیش به ذهنم نرسید :) استفاده از let هم بهتر بود ولی نمیدونم چقدر از مرورگر ها از این کلمه کلیدی پشتیبانی میکنن.

مرسی 😊 واقعا ممنون از نظرتون!

barsam mohamadee ۳۰ بهمن ۱۳۹۹، ۱۷:۵۷

سلام.
من کمی با html آشنایی دارم و کد حاشیه مطالبم را از طریق
Html درست میکنم .
برای تغیر هدر مشکل دارم به قسمت قالب، ویرایش cssفعلی هم رفتم در آنجا کد های زیادر است منظور از خط 1و 3 و ادرس
//cdn.bayan.ir/blog/templates/230/slide_show.jpg
را نتوانستم پیدا کنم . اگر با راهنایی شما اخل را پیدا کیدم.
باز سیوال است
1- عکس دلخواه را برای هدر باید آپلود کنم؟
2- و کد را در مخل بگذارم آیا اندازه عکس مهم است؟
ببخشید وقتتان را میگیرم

Mohsen シ ۳۰ بهمن ۱۳۹۹، ۱۹:۰۲

در همون قسمت ویرایش سی اس اس قالب فعلی اگر به خط 299 برین یک چنین چیزی رو میبینین (یک دکمه هست اونجا برای پریدن به خط کافیه اون رو بزنین و عدد 299 رو بزنین):

.slide_show{
height:200px;
background:#111 url(//cdn.bayan.ir/blog/templates/230/slide_show.jpg) no-repeat center top;
}
اون قسمت که نوشته //cdn.bayan.ir/blog/templates/230/slide_show.jpg همون لینک عکس هدر فعلی هستش.
باید عکس خودتون که در طولش 960 پیکسل و ارتفاعش 200 پیکسل هست رو تو جایی مثل بیان باکس (همون فضای اختصاصی) آپلود کنین و لینک دانلودش رو به جای اون لینک بالا بزارین. نمیدونم اندازه مهم هستش یا نه ولی بهتره در اون اندازه باشه ممکنه تو اندازه های بزرگ یا کوچیکتر درست نشون نده.
خواهش میکنم :)

کاربران بیان میتوانند بدون نیاز به تأیید، نظرات خود را ارسال کنند.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.
تجدید کد امنیتی