واجهة مستخدم تفاعلية بسيطة للتدريس والتقييم: 11 خطوة

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:41

تم تطوير هذا المشروع كجزء من فصل جامعي ، وكان الهدف هو إنشاء نظام تفاعلي لتدريس وتقييم موضوع معين. لذلك ، استخدمنا معالجة على جهاز كمبيوتر للواجهة و Arduino NANO لزر الممرات ومصابيح LED ، لذلك فهو بسيط جدًا للتدريس ، فهو يوفر واجهة حيث يتم عرض نموذج ويمكن للمستخدم النقر فوق كل مكون من المكونات للحصول على وصف نصي لها. ومع ذلك ، لتقييم المستخدم ، فإنه يقدم مشكلة تشبه اللغز ، حيث يتعين على المستخدم سحب وإسقاط كل جزء لبناء النموذج المقابل ، والضغط على زر لتأكيد إجابته ، ثم تخبر مؤشرات LED الموجودة على الزر المستخدم إذا كانت الإجابة صحيحة أم لا.

كانت المشكلة الأكثر شيوعًا التي واجهناها في إنشاء هذا المشروع هي الاتصال بين المعالجة و Arduino حيث يمكن أن يختلف زمن انتقال الاتصال بين أجهزة الكمبيوتر ، مما يعيق إمكانية نقل الجهاز. أيضًا ، يجب عليك تحديد المنفذ الذي يتصل به Arduino في كل مرة ، لأن كل جهاز USB متصل به مهم ، لذا عليك التحقق من أي COM هو.

الخطوة 1: برمجة الواجهة عند المعالجة (الإعداد)

قمنا بإعداد المتغيرات التي سيتم استخدامها ، وموضع جميع الأجزاء كمصفوفات من x و y ، بالإضافة إلى مصفوفات لصور كل جزء من قوائم التدريس (imgA) وتقييم (img) ، مصفوفة للتحقق مما إذا كانت الإجابات صحيحة ومصفوفات للعشائر والأقفال ، والتي ستحدد ما إذا كان الماوس فوق القطع وما إذا كان يحاول التقاطها. ثم تابع تهيئتها وفتح المنفذ الذي ستتواصل منه الواجهة مع Arduino.

الخطوة 2: برمجة الواجهة عند المعالجة (القائمة الرئيسية)

أولاً ، ستعرض القائمة الرئيسية زرين ، وعندما يتم الضغط على أحدهما ، سيقوم البرنامج بتحميل إما قائمة "تعليم" أو قائمة "تقييم".

لذلك عندما يتم الضغط على الماوس ، ويكون فوق أحد الأزرار ، فإنه يرسل مواضع جميع الأجزاء التي تحتاجها القائمة الجديدة ويقوم بتحميل القائمة الأخرى.

الخطوة 3: برمجة الواجهة عند المعالجة (قائمة "Teach")

هنا ، إذا كان الماوس يحوم فوق أحد الأجزاء ، فسيقوم بتنشيط bover المقابل ، والذي ، إذا تم الضغط على الماوس ، فسيؤدي إلى تنشيط النص المقابل وسيعرضه على الشاشة.

الخطوة 4: برمجة الواجهة عند المعالجة (قائمة "تقييم")

هنا هو نفسه ، سيؤدي إلى تنشيط الأزرار ، والتي عند الضغط على الماوس ستنشط الأقفال ولكن هذه المرة بدلاً من عرض النصوص ، فإنها ستسحب الجزء المحدد. (كان هذا يعتمد على "السحب والإفلات والتمرير بالماوس." من process.js)

الخطوة 5: عند الضغط على الماوس

كما ذكرنا سابقًا ، عندما يتم الضغط على الفأرة ويكون العاشق "صحيحًا" ، فإنه سينشط القفل المقابل.

الخطوة 6: عند سحب الماوس

إذا تم سحب الماوس ، فإن القائمة الفعلية هي قائمة التقييم وإحدى القوائم المقفلة "صحيحة" ، فسوف تسحب الجزء المقابل إلى جانب الماوس.

الخطوة 7: عند تحرير الماوس

لذلك إذا تم تحرير الماوس ولا يزال في قائمة "تقييم" ، فسيضع الجزء الذي تم سحبه في المكان الذي تحتاج فيه إلى إنشاء النموذج إذا كان قريبًا بدرجة كافية وسيتحقق مما إذا كانت إجابتك صحيحة. ثم إعادة تعيين جميع المقفلة والنصوص إلى "خطأ".

الخطوة 8: التواصل مع Arduino

لذلك إذا ضغطت الآن على الزر الموجود في Arduino ، فإنه يتحقق مما إذا كنت قد وضعت جميع الأجزاء الصحيحة في مكانها ويخبرك ما إذا كانت صحيحة أم خاطئة ، ثم يرسل "1" إذا كان صحيحًا أو "2" إذا كان خطأ اردوينو.

الخطوة 9: إعداد Arduino (المخطط)

كان هذا هو المخطط المستخدم لاردوينو ، ولكن باستخدام زر Arcade ، لذلك فإن السلك الأخضر الذي ينتقل إلى الزر سينتقل إلى الموصل السفلي على الزر (COM) وسينتقل السلك الأحمر إلى الوسط (NO). تم استخدام المقاوم 220 أوم لمصابيح LED ، و 1 كيلو أوم للزر.

الخطوة 10: برمجة Arduino

الآن ، يقوم بتهيئة الزر كـ INPUT على الدبوس الرقمي 2 ومصابيح LED كـ OUTPUT في 4 و 6 و 8. ثم يقوم بتكوين المنفذ وقراءته ، إذا حصل على "1" (إجابة صحيحة) فإنه سيضيء 3 مصابيح LED واحدة تلو الأخرى ، إذا حصلت على "2" (إجابة خاطئة) فسوف تضيء واحدة منها فقط. أيضًا ، إذا تم الضغط على الزر ، فسيتم إرسال "e" إلى الواجهة.

الخطوة 11: هذا كل شيء ، استمتع

فيما يلي الرموز المستخدمة لهذا المشروع: