از پاورپوینت تا گیتهاب! | داستان یک بازی آموزشی برای یادگیری استانهای ایران
ایدهی این بازی از یک نیاز خیلی ساده شروع شد: اینکه دانشآموزها فقط اسم استانهای ایران و جای تقریبیشان روی نقشه را یاد بگیرند.
نسخهی اول بازی اصلاً کدنویسی نبود! یک بازی خیلی ساده بود که با پاورپوینت اجرا میشد و هدفش فقط این بود که بچهها بتوانند استانها را تشخیص بدهند. اما کمکم، هم خود بازی بزرگتر شد و هم مسیر من تغییر کرد.
با خودم گفتم: وقتی اینهمه وقت گذاشتم و دارم کدنویسی یاد میگیرم، چرا از اون برای ساختن بازیهای آموزشی برای دانشآموزان استفاده نکنم؟
از همینجا بود که ایدهی شروع جدی کدنویسی برای من شکل گرفت.

مسئلهای که من را به ساخت این بازی رساند این بود که در کلاس پنجم، دانشآموزها در درس مطالعات اجتماعی با «نواحی جمعیتی» آشنا میشوند: اینکه چند ناحیهی جمعیتی داریم، چرا تهران (پایتخت) پرجمعیتتر است، چرا کنارههای دریای خزر دومین ناحیهی پرجمعیت کشورند و سوالاتی از این دست…
مشکل اینجا بود که بچهها این مطالب را حفظ میکردند و حتی در امتحان هم درست جواب میدادند؛ اما وقتی ازشان میپرسیدی: پایتخت ایران دقیقاً کجاست؟یا نواحی کنار دریای خزر شامل کدام استانها میشود؟ تقریباً هیچ تصوری نداشتند!
برای خودم سؤال شد که این ضعف از کجا میآید. کتابهای مطالعات اجتماعی را از کلاس سوم به بعد بررسی کردم و به یک نکتهی مهم رسیدم : در هیچکدام از کتابها، مستقیماً از دانشآموز خواسته نشده که اسم استانها، شهرهای مهم، یا مراکز استانها را دقیق بلد باشد.
اما در پایههای بالاتر، انگار بهصورت نانوشته انتظار میرود که این دانستهها وجود داشته باشد!

طبیعی است که وقتی کتاب روی چیزی تأکید نمیکند، منِ معلم هم طبق کتاب پیش میروم و خیلی روی آن پافشاری نمیکنم. نتیجهاش این میشود که دانشآموز حتی تا کلاس دوازدهم و گرفتن دیپلم جلو میرود، اما اسم و جای نیمی از استانهای ایران را روی نقشه بلد نیست که واقعاً جای تأسف دارد.
برای همین تصمیم گرفتم این بازی را بسازم! بازیای که حفظکردنی نباشد، بچه را وادار کند با نقشه کار کند، و یادگیری اسم و موقعیت استانها را تجربهمحور کند.
این پروژه قرار است 20 مرحله داشت باشد که تا مرحله چهارم آن تا الان ساخته شده و در گیتهاب در دسترس است.
این چهار مرحله شامل: آشنایی با نام استانها، آشنایی با شکل استان، تشخیص مرکز استان، سه شهر مهم هر استان است و هر مرحله سه سطح 20، 15 و 10 ثانیه دارد.

با توجه به تجربهای که تا کنون با دانشآموزان از پایه سوم ابتدایی تا پایه دهم داشتهام این بازی به طرز شگفتآوری علاقه آنان را به دانستن بیشتر افزایش میدهد. حتی دانشآموزان گاه شروع به سوال پرسیدن درمورد اینکه چطور خودشان میتوانند بازی بسازند میکنند که این کجکاوی نشان از روحیه بالا دانشآموزان برای ساخت و تشویق به خلاقیت دارد که در بستری مناسب میتوانیم زمینه رشد و پرورش آنها را فراهم کنیم.
🔗شما هم آنلاین بازی کنید و تجربه خود را با من به اشتراک بگذارید: [کلیک کنید!]
بازی فعلا در اسکرینهای بزرگ (کامپیوتر – لپتاپ و تبلت) قابل اجراست و هنوز برای تلفنهمراه بهینه سازی نشده است.
توضیحات فنی در ادامه مطلب~
بازی آموزشی «شناخت استانهای ایران | ورژن 4.1»
🎮 یک بازی تعاملی، مرحلهای و زماندار برای تقویت مهارت شناخت استانها
این بازی با هدف تقویت یادگیری فعال، افزایش دقت، و حفظ نام و موقعیت استانهای ایران طراحی شده است.
بازیکن در هر مرحله با کلیک روی استان درست، امتیاز میگیرد و با اشتباهکردن قلب (فرصت) از دست میدهد.
بازی -فعلا!- شامل چهار مرحله اصلی، سیستم وقت محدود، امتیازدهی ستارهای و پاداشها است.
آنلاین بازی کنید!
✨قابلیتهای جدید و برجسته در این بروز رسانی✨
- زمانبندی تنظیمشده برای کاهش استرس : به هر مرحله 5 ثانیه زمان برای کاهش استرس و فرصت فکرکردن بیشتر اضافه شد.
- سیستم پیشرفت هوشمند : قفل گشایی مراحل به ترتیب و ذخیره خودکار پیشرفت در مرورگر.
- حالت تمرین : امکان مرور تصادفی سوالات از مراحل تکمیل شده بدون زمان بندی.
- کنترل بهتر بازی : امکان انتخاب سطح دشواری (زمان) در هر مرحله، حتی برای مراحل قبلی.
- تاییدیه قبل از مرحله بعد : کاربر پس از پایان رساندن یک مرحله و دیدن صفحه پایان و تشویق با تاییدکردن به مرحله بعد میرود.
✨ ویژگیهای کلیدی بازی
- دو مرحله دارای ۳ سطح زمانی:
- سطح ۱ → 20 ثانیه
- سطح ۲ → 15 ثانیه
- سطح ۳ → 10 ثانیه
- سیستم امتیازدهی ستارهای + صدای تشویق
- نمایش پاسخ درست هنگام اشتباهات برای یادگیری بهتر
🔴 واکنش به پاسخ اشتباه
- نقطه اشتباه انتخابشده با رنگ قرمز نمایش داده میشود.
- محل صحیح با افکت و رنگ سبز مشخص میشود تا دانشآموز بتواند اشتباه خود را تشخیص دهد.
⭐ امتیازدهی
- هر پاسخ صحیح = ۱۰ امتیاز + یک ستاره
- همراه با صدای تشویق و افکت بصری ستارهها
🟩 مرحله اول: تشخیص استان از روی رنگ و نام
در این مرحله:
- نام استان همراه با رنگ مخصوص همان استان نمایش داده میشود.
- همان رنگ در نقشه اصلی ایران نیز برای آن استان استفاده شده است.
- دانشآموز میتواند به کمک رنگ، نام و جایگاه کلی، استان را پیدا کند.
- برای ایجاد چالش آموزشی:
- برخی استانها عمداً رنگهای مشابه دارند تا دقت در یادگیری افزایش یابد.
🟦 مرحله دوم: تشخیص استان از روی شکل + تقسیمات داخلی
در این مرحله:
- شکل کامل استان نمایش داده میشود.
شامل: - مرزهای استان
- شهرستانها
- شهرهای مهم
- کنار تصویر:
- نام استان
- نام مرکز استان
- این توضیحات به رنگ مخصوص همان استان نوشته شدهاند.
🎓 هدف آموزشی
این ترکیب باعث میشود:
- چشم دانشآموز به فرم کلی استان عادت کند
- نام استان → رنگ → فرم → مرکز استان
این چهار عامل کنار هم، یادگیری را عمیق و چندلایه میکنند.
🟩 مرحله سوم: تشخیص استان از روی نام مرکز
در این مرحله:
- نام مرکز استان نمایش داده میشود.
- با توجه به اینکه در مرحله پیشین در کنار شکل و نام استان مرکز آن نیز نوشته شده بود انتظار میرود دانشآموزان با کمی دقت یا مرور مرحله قبل بتوانند این مرحله را نیز پشت سر بگذارند.
🟦 مرحله چهارم: تشخیص استان از روی نام شهرهای مهم
در این مرحله:
- نام سه شهر مهم از هر استان نمایش داده میشود.
- با توجه به اینکه در مراحل قبل نقشه هر استان نمایش داده شده بود انتظار میرود در این مرحله نیز دانشآموزان با کمی آزمون و خطا بتوانند شهرهای مهم را در هر استان شناسایی کنند.
❤️ سیستم قلب (فرصتها)
- هر اشتباه = از دست دادن ۱ قلب
- اگر دانشآموز یک سطح یا مرحله را کامل و درست تمام کند → قلبهای از دست دادهشده به عنوان پاداش به او برگردانده میشوند
- این مکانیزم باعث انگیزه بیشتر و کاهش استرس یادگیری میشود.
🏆 پایانبندی
اگر دانشآموز همه مراحل و سطوح را پشت سر بگذارد:
- جام قهرمانی به صورت انیمیشنی در وسط صفحه ظاهر میشود.
- پیام نهایی نمایش داده میشود:
«تبریک! تو قهرمان این بازی شدی 🎉»
🚀 آمادهسازی برای مراحل بعدی
تا کنون 20 مرحله به صورت پیشفرض بر اساس آنچه در کتابهای دوره ابتدایی آموخته میشود و به صورت اطلاعات عمومی مورد نیاز است به بازی اضافه شده که تا مرحله چهارم در دسترس و قابل اجراست. لازم به ذکر است که مراحل و ترتیب آنها با توجه به صلاح دید و واکنش دانشآموزان امکان دارد تغییر کند.
🛠️ تکنولوژیهای استفادهشده
- HTML5
- CSS3
- JavaScript
- local Storage
پینوشت یک: اگر بازی کردید خوشحال میشم تجربهتون رو باهام به اشتراک بذارید^^
پینوشت دو: هنوز برای تجربه و رابط کاربری ui/ux کلی کار داره ولی من با همین هم خوشحالم :دی
چقدر این عالی بود.ولی در مرحله دومش گیج زدم. هر استان به شهرستانها تقسیم شده بود. ولی نقشه هنوز همان نقشه قبلی بود. یا باید اسامی شهرستانها را می خواندم یا زود روی نقشه کلیک میکردم. خوب معلوم است امتیاز مهمتر از یادگیری شد. بیخیال اسم شهرستانها شدم.
سلام.
در مرحله دوم هدف این است که ذهن شما با فرم کلی استان آشنا شود، برای همین نام استان و مرکز آن با همان رنگ مخصوص هر استان در کنار تصویر نوشته شده.
این آشنایی کلی به شما برای مراحل بعدی : مرکز استان و شهرهای مهم کمک میکند.
در بخش تمرین هم میتوانید بدون محدودیت زمانی بازی کنید تا باز هم با تمرکز بیشتر به تصویر استانها نگاه کنید^^
چرا آینک من دخترانه است؟ قدیمها خیلی قدیمها که هنوز اینترنت قطع نشده بود، سایتی بود خارجکی، به اسم…اسم…م…م… حالا اسمش مهم نیست. یادم نیست. انجا ثبت نام میکردیم و بعد آینک انتخاب میکردیم یا از سایت یا خودمان بارگزاری میکردیم. از آن به بعد هر جا که از آن اسم و عنوان انتخاب شده استفاده میکرویم، در هر سایتی که بود، همان آینک را نشان میداد. البته سایت باید مجهز به آن خط کدها بود که به ان سایت که اسمش یادم نیست وصل میشد.
حالا این همه گفتم که چی؟ شما که ذوق داری و کدبانو شدی؟ آنچنان چیزی راه اندازی کن.
اگر متوجه نشدید منظورم چیست. تا بیشتر بگویم.
پی نوشت: ادرس رایانامه را تغییر دادم تا ببینم آینک چه تغییری میکند. وگر نه من همان قبلی هستم.
برای ایمیل قبلیات یک آواتار اختصاصی پسرانه تعریف کردم. فقط برای خود خودت. از این به بعد با ایمیل قبلی کامنت بگذار.
آفرین! حالا خوب شد. برای هر کدام از کاربرها یک آوا_تار ویژه بساز. خیلی جالب میشود.
همه که نه… برای کاربرهای ویژه، آواتار ویژه هم داریم :دی
چه کار جذابی انجام دادی 🙂
فقط حیف که فعلا به سیستم دسترسی ندارم و با گوشیام…
تلاشت برای آموزش دادن به دانشآموزها قابل تحسینه.
سلام سلام
ای بابا 🙁
به زودی روش کار میکنم احتمالا توی بروزرسانی بعدی مشکل ریسپانسیو گوشی هم حل میشه!
ممنوونممم لطف داری که*^*~
من پارسال چهارم بودم. بچه ها استان ها را و مراکزشون یاد می گیرن حتی میشه همسایه ها را یاد داد. اما اما اما مهم ترین چیز اینه که چند درس جلوتر نواحی اب و هوای ایران میاد. نمی تونن استان ها را تطبیق بدن که شرجی جنوب تو چه استان هایی هست یا سرد و نیمه خشک کوهستانی کدوم استان هاست.
کتابم البته تاکید نداره و خود درس اب و هوا سنگینه 🙁
باز نشد گیتهاب برام. دوست داشتم ببینم. چه زبانی هست؟ کجا آموزش میبینی چند وقته! اگر انلاینه بم بگو جالب شد برام
ولی تاکید کتاب و خیلی از معلمها این نیست که استانها رو بفهمن کجای نقشهست یا مراکز رو حفظ باشن…
کلا مطالعات چهارم و پنجم بیشترین تاکید رو روی انواع و اقسام نقشهها دارن، تا اونجا که من نگاه کردم نواحی آب و هوایی، بلندیهای زمین، جلگهها، نواحی صنعتی و جمعیتی و … همه رو یهو تو کتاب چهارم و پنجم بهشون یاد میدن…
میشه یک بار دیگه امتحان کنید؟ لینک رو چک کردم و دوباره گذاشتمش…
چهار-پنج ساله تفریحی از این طرف و اون طرف ویدیو میبینم برای زبانها html, css,java script. تا امسال که دیگه جدی جدی شروع کردم به یاد گرفتن و ساختن برنامه باهاشون.