رابط کاربری ساده تعاملی برای آموزش و ارزیابی .: 11 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:57

این پروژه به عنوان بخشی از کلاس دانشگاه ایجاد شد ، هدف ایجاد یک سیستم تعاملی برای آموزش و ارزیابی یک موضوع خاص بود. برای آن ما از پردازش بر روی رایانه برای رابط و Arduino NANO برای دکمه بازی و LED ها استفاده کردیم ، بنابراین بسیار ساده است. برای آموزش ، رابط کاربری را ارائه می دهد که در آن یک مدل نمایش داده می شود و کاربر می تواند روی هر یک از اجزا کلیک کند برای دریافت توضیحات متنی درباره آن با این حال ، برای ارزیابی کاربر ، یک مشکل شبیه به پازل ارائه می دهد ، جایی که کاربر باید هر قسمت را بکشد تا مدل مربوطه را بسازد و یک دکمه را برای تأیید پاسخ خود فشار دهد ، سپس LED های روی دکمه به کاربر اطلاع می دهد اگر جواب درست باشد یا نه

رایج ترین مشکلی که ما در ساخت این پروژه با آن روبرو شدیم ، ارتباط بین پردازش و یک آردوینو بود ، زیرا تأخیر اتصال بین رایانه ها می تواند متفاوت باشد و مانع از قابلیت حمل دستگاه شود. همچنین ، باید پورتی را که آردوینو هر بار به آن متصل می شود ، تعریف کنید ، زیرا هر دستگاه USB متصل به شمار می رود ، بنابراین باید بررسی کنید که کدام COM است.

مرحله 1: برنامه نویسی رابط در پردازش (راه اندازی)

ما متغیرهایی را که قرار است مورد استفاده قرار گیرد ، موقعیت همه قسمتها را به عنوان آرایه های x و y cordinates ، و همچنین آرایه هایی برای تصاویر هر یک از قسمتها برای منوهای Teach (imgA) و Evaluate (img) تنظیم کرده ایم. ، آرایه ای برای بررسی صحت پاسخ ها و آرایه هایی برای بورها و قفل ها ، که تعیین می کند آیا موس روی قطعات قرار دارد یا خیر و آیا سعی در جمع آوری آنها دارد. سپس اقدام به مقداردهی اولیه آنها کرده و پورتی را که قرار است رابط از طریق آن با آردوینو ارتباط برقرار کند ، باز کنید.

مرحله 2: برنامه نویسی رابط در پردازش (منوی اصلی)

ابتدا ، منوی اصلی دو دکمه را نمایش می دهد ، و هنگامی که یکی از آنها فشار داده می شود ، برنامه یا منوی "آموزش" یا منوی "ارزیابی" را بارگیری می کند.

بنابراین وقتی موس فشرده می شود و بالای یکی از دکمه ها قرار دارد ، موقعیت تمام قسمتهایی را که منوی جدید به آن نیاز دارد ارسال می کند و منوی دیگر را بارگذاری می کند.

مرحله 3: برنامه نویسی رابط پردازش (منوی "آموزش")

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

مرحله 4: برنامه ریزی رابط پردازش (منوی "ارزیابی")

در اینجا همان است ، می تواند بورها را فعال کند ، که وقتی ماوس را فشار می دهید قفل ها را فعال می کند ، اما این بار به جای نمایش متن ، قسمت انتخاب شده را بکشید. (این بر اساس "کشیدن ، رها کردن و شناور کردن با ماوس" از processing.js بود)

مرحله 5: وقتی موس فشار داده می شود

همانطور که قبلاً گفته شد ، وقتی ماوس را فشار می دهیم و یک بور "درست" است ، قفل مربوطه را فعال می کند.

مرحله ششم: وقتی موش کشیده می شود

اگر ماوس کشیده شود ، منوی اصلی منوی ارزیابی است و یکی از قفل شده "true" است و قسمت مربوطه را در کنار ماوس بکشد.

مرحله 7: هنگامی که موش آزاد می شود

بنابراین اگر ماوس آزاد شده و هنوز در منوی "ارزیابی" باشد ، قسمتی که کشیده می شود را در جایی که باید مدل را بسازید قرار می دهد اگر به اندازه کافی نزدیک باشد و بررسی می کند که آیا پاسخ شما درست است. سپس همه قفل ها و متن ها را روی "false" تنظیم می کند.

مرحله 8: ارتباط با آردوینو

بنابراین اگر دکمه آردوینو را فشار دهید ، بررسی می کند که آیا تمام قسمت های مناسب را در محل قرار داده اید یا خیر یا درست است ، سپس "1" را در صورت صحیح یا "2" را در صورت اشتباه به آردوینو

مرحله 9: راه اندازی Arduino (طرح)

این برنامه ای بود که برای آردوینو استفاده می شد ، اما با دکمه Arcade ، بنابراین سیم سبز که به دکمه می رفت به اتصال پایین دکمه (COM) و سیم قرمز به قسمت میانی (NO) می رفت. برای LED ها از مقاومت 220Ω ، برای دکمه 1kΩ استفاده شد.

مرحله 10: برنامه نویسی آردوینو

در حال حاضر ، دکمه را به عنوان INPUT در پین دیجیتال 2 و LED ها را به عنوان OUTPUT در 4 ، 6 و 8 پیکربندی می کند ، سپس Port را پیکربندی می کند و آن را می خواند ، در صورت دریافت "1" (پاسخ صحیح) 3 را روشن می کند چراغ های LED یک به یک ، اگر "2" (پاسخ اشتباه) دریافت کند ، فقط یکی از آنها روشن می شود. همچنین ، اگر دکمه فشار داده شود ، یک "e" به رابط ارسال می کند.

مرحله 11: این همه ، خوش بگذرانید

در اینجا کدهای مورد استفاده برای این پروژه آمده است: