يشهد الذكاء الاصطناعي تطورًا متسارعًا في قدرته على تحويل الأفكار إلى تطبيقات عملية، ويأتي نموذج Gemini 3.5 Flash من جوجل كأحد أبرز الأمثلة على هذا التوجه. فبدلًا من الاعتماد على البرمجة التقليدية وكتابة الأكواد يدويًا، أصبح من الممكن إنشاء تطبيقات تعليمية تفاعلية كاملة باستخدام أوامر نصية بسيطة باللغة العربية.
في تجربة عملية، تم اختبار قدرات Gemini 3.5 Flash داخل بيئة Gemini وCanvas من خلال تطوير ثلاثة تطبيقات تعليمية مختلفة تستهدف تبسيط المفاهيم العلمية وتحويلها إلى تجارب بصرية وتفاعلية. التطبيق الأول يشرح حالات المادة للأطفال بطريقة ممتعة تعتمد على الرسوم المتحركة والعناصر التفاعلية التي تساعد على فهم الفرق بين الحالة الصلبة والسائلة والغازية. أما التطبيق الثاني فهو لوحة تعليمية تفاعلية تتناول تأثير الاحتباس الحراري على الكائنات الحية، حيث تم الاعتماد على محتوى مستخرج من ملف PDF وتحويله إلى تجربة تعليمية منظمة وسهلة الاستيعاب. بينما يركز التطبيق الثالث على إنشاء محاكاة تفاعلية توضح كيفية عمل محرك السيارة من الداخل، مع عرض الأجزاء الرئيسية وآلية الحركة بصورة مبسطة تناسب المتعلمين والمهتمين بالمجالات التقنية.
تكشف هذه التجارب عن إمكانيات Gemini 3.5 Flash في إنشاء تطبيقات HTML تفاعلية، وتصميم واجهات تعليمية جذابة، وبناء محاكاة بصرية تساعد على توصيل المعلومات بطريقة أكثر وضوحًا وتأثيرًا من الأساليب التقليدية. كما يبرز النموذج قدرته على فهم الأوامر باللغة العربية وتحويلها إلى أدوات تعليمية عملية يمكن استخدامها في الفصول الدراسية، أو ضمن المحتوى الرقمي، أو في المنصات التعليمية المختلفة.
ويعكس هذا التطور توجهًا جديدًا في استخدام الذكاء الاصطناعي، حيث لم يعد دوره مقتصرًا على الإجابة عن الأسئلة أو توليد النصوص، بل أصبح شريكًا في تطوير التطبيقات وصناعة المحتوى التعليمي التفاعلي. ومع استمرار تطور هذه النماذج، قد يصبح إنشاء الأدوات التعليمية المتقدمة متاحًا لأي شخص يمتلك فكرة جيدة، حتى دون امتلاك خبرة تقنية أو برمجية متخصصة.
الأوامر المستخدمة في بناء التطبيقات التي جاءت في الفيديو السابق:
تطبيق حالات المادة:
أنشئ فيديو أنيميشن تعليمي مبهر كملف HTML واحد فقط عن موضوع “حالات المادة”، مناسب للأطفال بعمر{ادخال العمر}.
يجب أن يكون الفيديو مدته حوالي 5 دقائق، ويبدو كأنه كرتون علمي ممتع وملوّن، وليس درسًا تقليديًا مملًا. اجعل التصميم جذابًا، مليئًا بالحركة، سهل الفهم، ومناسبًا لفيديو تعليمي على يوتيوب للأطفال.
استخدم HTML و CSS و JavaScript فقط داخل ملف واحد.
يجب أن يعمل الملف مباشرة داخل المتصفح بدون الحاجة إلى أي ملفات خارجية.
اجعل العرض بنسبة 16:9 مناسبًا لفيديو يوتيوب.
اللغة:
- استخدم اللغة العربية في كل النصوص الظاهرة على الشاشة.
- اجعل الجمل قصيرة وواضحة ومناسبة للأطفال.
- اجعل الخط كبيرًا وسهل القراءة.
لوحة تفاعلية عن الإحتباس الحراري:
أنشئ لوحة تعليمية تفاعلية جذابة اعتمادًا على الملف المرفق الذي يتحدث عن “تأثير الاحتباس الحراري على الكائنات الحية”.
يجب أن تكون اللوحة مصممة بأسلوب بصري حديث، واضح، ومناسب للطلاب، بحيث تحول محتوى الملف إلى تجربة تعليمية تفاعلية سهلة الفهم بدلًا من عرض نصوص طويلة.
المطلوب:
- اقرأ الملف جيدًا واستخرج أهم الأفكار والمعلومات العلمية منه.
- لا تنسخ النصوص الطويلة كما هي، بل لخّصها في نقاط قصيرة وواضحة.
- استخدم اللغة العربية في جميع النصوص.
- اجعل النصوص مختصرة، كبيرة، وسهلة القراءة.
- اجعل التصميم جذابًا وغير مزدحم.
موضوع اللوحة:
“تأثير الاحتباس الحراري على الكائنات الحية”
نوع اللوحة:
لوحة تفاعلية تعليمية تعمل كصفحة HTML واحدة، باستخدام:
HTML + CSS + JavaScript
يجب أن تعمل مباشرة في المتصفح بدون الحاجة إلى ملفات خارجية.
تصميم اللوحة:
- خلفية بيئية جذابة تجمع بين الأرض، الشمس، الغلاف الجوي، النباتات، الحيوانات، والمحيطات.
- استخدم ألوانًا طبيعية مثل الأخضر، الأزرق، البرتقالي، والأحمر بدرجات معتدلة.
- اجعل التصميم يوضح الفرق بين الأرض الطبيعية والأرض المتأثرة بارتفاع الحرارة.
- أضف مؤثرات بسيطة مثل أشعة الشمس، غازات شفافة في الغلاف الجوي، ارتفاع درجة الحرارة، وذبول النباتات.
- اجعل الواجهة مناسبة للعرض على شاشة كبيرة أو جهاز لوحي.
العنوان الرئيسي:
“كيف يؤثر الاحتباس الحراري على الكائنات الحية؟”
أقسام اللوحة التفاعلية:
- قسم المقدمة:
اعرض شرحًا مبسطًا جدًا:
“الاحتباس الحراري يحدث عندما تحتبس الغازات الحرارة داخل الغلاف الجوي، مما يؤدي إلى ارتفاع درجة حرارة الأرض.”
أضف رسمًا مبسطًا:
الشمس ترسل أشعتها إلى الأرض، وبعض الحرارة تنعكس، وبعضها يبقى محبوسًا بسبب الغازات.
- قسم أسباب الاحتباس الحراري:
اعرض بطاقات تفاعلية لأهم الأسباب المستخرجة من الملف، مثل:
- حرق الوقود الأحفوري
- عوادم السيارات
- المصانع
- إزالة الغابات
- زيادة ثاني أكسيد الكربون
عند الضغط على كل بطاقة، يظهر شرح قصير جدًا عن السبب.
- قسم تأثيره على النباتات:
اعرض مشهدًا فيه نبات أخضر يتحول تدريجيًا إلى نبات ذابل عند رفع درجة الحرارة.
النصوص:
- “ارتفاع الحرارة يضعف نمو بعض النباتات”
- “الجفاف يقلل كمية المياه المتاحة”
- “بعض النباتات قد لا تتحمل التغير السريع في المناخ”
أضف زرًا:
“ارفع درجة الحرارة”
عند الضغط عليه، يتغير لون النبات وتقل أوراقه تدريجيًا.
- قسم تأثيره على الحيوانات:
اعرض مجموعة حيوانات مثل دب قطبي، طائر، سمكة، وسلحفاة بحرية.
اجعل كل حيوان بطاقة تفاعلية.
عند الضغط على الحيوان، يظهر تأثير الاحتباس الحراري عليه.
أمثلة:
- الدب القطبي: “ذوبان الجليد يقلل مكان عيشه وصيده”
- الطيور: “تغير المناخ يؤثر على الهجرة والتكاثر”
- الأسماك: “ارتفاع حرارة المياه يؤثر على الأكسجين والغذاء”
- السلاحف البحرية: “ارتفاع حرارة الرمال قد يؤثر على فقس البيض”
- قسم تأثيره على البحار والمحيطات:
اعرض محيطًا يتحول تدريجيًا من لون أزرق صحي إلى لون أكثر حرارة وقلقًا.
أضف عناصر مثل الشعاب المرجانية والأسماك.
النصوص:
- “ارتفاع حرارة المياه يضر بالكائنات البحرية”
- “الشعاب المرجانية قد تفقد ألوانها”
- “بعض الأسماك تهاجر إلى أماكن أبرد”
- قسم تأثيره على الإنسان:
اعرض شخصية إنسان أو طفل مع أيقونات حوله:
حرارة، ماء، طعام، صحة.
النصوص:
- “قد تزداد موجات الحر”
- “قد تقل بعض المحاصيل الزراعية”
- “قد تنتشر بعض الأمراض في مناطق جديدة”
- “قد يزداد نقص المياه في بعض الأماكن”
- قسم السلسلة البيئية:
أنشئ رسمًا تفاعليًا يوضح أن تأثر كائن واحد قد يؤثر على كائنات أخرى.
مثال:
نباتات أقل → غذاء أقل للحشرات → غذاء أقل للطيور → اختلال في التوازن البيئي
اجعل الأسهم تتحرك عند الضغط على زر:
“شاهد التأثير المتسلسل”
- قسم ماذا يمكننا أن نفعل؟
اعرض حلولًا بسيطة على شكل بطاقات:
- زراعة الأشجار
- تقليل استهلاك الطاقة
- استخدام وسائل نقل أقل تلوثًا
- إعادة التدوير
- حماية الحيوانات وبيئاتها
- نشر الوعي البيئي
عند الضغط على كل بطاقة، تظهر جملة تشجيعية قصيرة.
- قسم الاختبار التفاعلي:
أضف اختبارًا قصيرًا بعنوان:
“اختبر فهمك!”
ضع 3 أسئلة اختيار من متعدد، مثل:
السؤال الأول:
“ما السبب الرئيسي في زيادة الاحتباس الحراري؟”
الاختيارات:
- زيادة الغازات الدفيئة
- قلة ضوء الشمس
- حركة القمر
- دوران الأرض
السؤال الثاني:
“كيف يؤثر الاحتباس الحراري على الدب القطبي؟”
الاختيارات:
- يزيد الجليد
- يذيب الجليد ويقلل موطنه
- يجعله يطير
- يحوله إلى سمكة
السؤال الثالث:
“ماذا يمكننا أن نفعل لتقليل المشكلة؟”
الاختيارات:
- زراعة الأشجار
- إهدار الكهرباء
- قطع الغابات
- زيادة التلوث
عند الإجابة الصحيحة، أظهر رسالة:
“أحسنت! إجابة صحيحة”
وعند الإجابة الخاطئة، أظهر رسالة:
“حاول مرة أخرى”
التفاعل المطلوب:
- أزرار قابلة للضغط.
- بطاقات تفتح معلومات قصيرة.
- شريط يوضح ارتفاع درجة الحرارة وتأثيره.
- رسوم متحركة بسيطة للنباتات والحيوانات والمحيطات.
- أسئلة تفاعلية في النهاية.
- تأثيرات انتقال ناعمة بين الأقسام.
- إمكانية التمرير داخل اللوحة بسهولة.
الشكل النهائي:
اجعل اللوحة تبدو مثل تجربة تعليمية تفاعلية أو لعبة علمية مصغرة، وليست صفحة نصية عادية.
مهم جدًا:
- اعتمد على معلومات الملف المرفق فقط قدر الإمكان.
- إذا كانت هناك معلومات ناقصة، أضف معلومات علمية عامة بسيطة بشرط أن تكون مناسبة للطلاب وغير معقدة.
- لا تستخدم فقرات طويلة.
- استخدم أيقونات ورسومات مبسطة.
- اجعل كل قسم يحتوي على فكرة واحدة واضحة.
- اجعل اللوحة جذابة بصريًا ومناسبة للشرح داخل الصف أو في فيديو تعليمي.
المطلوب النهائي:
اكتب كود HTML كامل في ملف واحد يحتوي على:
- HTML
- CSS
- JavaScript
- التصميم الكامل
- التفاعلات
- الاختبار
- الرسوم المتحركة البسيطة
يجب أن تكون النتيجة النهائية لوحة تفاعلية تعليمية جذابة تشرح تأثير الاحتباس الحراري على الكائنات الحية بطريقة واضحة وممتعة.
تطبيق محاكاة محرك السيارة:
أنشئ محاكاة تعليمية تفاعلية جذابة كملف HTML واحد فقط تشرح “كيفية عمل محرك السيارة” بطريقة مبسطة وواضحة.
يجب أن تكون المحاكاة مناسبة للطلاب والمبتدئين، وتشرح فكرة عمل محرك الاحتراق الداخلي رباعي الأشواط بطريقة بصرية تفاعلية، بدون تعقيد زائد.
استخدم:
HTML + CSS + JavaScript
داخل ملف واحد فقط.
يجب أن تعمل المحاكاة مباشرة في المتصفح بدون الحاجة إلى ملفات خارجية.
العنوان الرئيسي:
“كيف يعمل محرك السيارة؟”
الفكرة العامة:
اعرض محرك سيارة مبسطًا من الداخل، مع أسطوانة، مكبس، عمود مرفقي، صمامات، شمعة احتراق، وقود، هواء، وعادم.
يجب أن يرى المستخدم حركة أجزاء المحرك خطوة بخطوة، مع شرح قصير يظهر بجانب كل مرحلة.
المراحل الأساسية التي يجب شرحها:
- شوط السحب
اعرض صمام السحب وهو يفتح.
اجعل خليط الهواء والوقود يدخل إلى الأسطوانة.
اجعل المكبس يتحرك إلى أسفل.
النص الظاهر:
“1. السحب”
“يدخل خليط الهواء والوقود إلى الأسطوانة” - شوط الضغط
أغلق الصمامات.
اجعل المكبس يتحرك إلى أعلى.
اجعل الخليط ينضغط داخل الأسطوانة.
النص الظاهر:
“2. الضغط”
“يضغط المكبس خليط الهواء والوقود” - شوط الاحتراق / القدرة
اجعل شمعة الاحتراق تطلق شرارة.
اعرض انفجارًا صغيرًا آمنًا ومبسطًا داخل الأسطوانة.
اجعل المكبس يندفع إلى أسفل بقوة.
النص الظاهر:
“3. الاحتراق”
“الشرارة تشعل الخليط فتدفع المكبس إلى أسفل” - شوط العادم
افتح صمام العادم.
اجعل الغازات تخرج من الأسطوانة.
اجعل المكبس يتحرك إلى أعلى.
النص الظاهر:
“4. العادم”
“تخرج الغازات المحترقة من المحرك”
التفاعل المطلوب:
- زر تشغيل / إيقاف للمحاكاة.
- زر “التالي” لعرض كل شوط خطوة بخطوة.
- زر “إعادة التشغيل”.
- شريط سرعة يسمح للمستخدم بتغيير سرعة حركة المحرك.
- أزرار لاختيار عرض:
– عرض مبسط
– عرض تفصيلي
العناصر البصرية:
- رسم مقطعي واضح للمحرك.
- مكبس يتحرك لأعلى وأسفل.
- عمود مرفقي يدور متزامنًا مع حركة المكبس.
- صمامات تفتح وتغلق في الوقت الصحيح.
- جزيئات هواء ووقود تدخل في شوط السحب.
- ضغط بصري يظهر في شوط الضغط.
- شرارة ولمعة ضوئية في شوط الاحتراق.
- دخان رمادي خفيف يخرج في شوط العادم.
التصميم:
- اجعل التصميم حديثًا ونظيفًا وغير مزدحم.
- استخدم خلفية داكنة أو رمادية تشبه ورشة سيارات تعليمية.
- استخدم ألوانًا واضحة:
– الأزرق للهواء
– الأصفر للوقود
– البرتقالي للاحتراق
– الرمادي للعادم
– الأحمر للحرارة والطاقة - اجعل النصوص العربية كبيرة وواضحة.
- استخدم خطوط وأسهم توضيحية لشرح اتجاه الحركة.
- أضف تسميات للأجزاء:
– الأسطوانة
– المكبس
– صمام السحب
– صمام العادم
– شمعة الاحتراق
– عمود المرفق
– غرفة الاحتراق
قسم الشرح:
أضف لوحة جانبية تحتوي على:
- اسم المرحلة الحالية
- شرح مختصر جدًا
- رسم صغير أو أيقونة توضيحية
- معلومة سريعة بعنوان “هل تعلم؟”
أمثلة لمعلومات “هل تعلم؟”:
- “المكبس يتحرك بسرعة كبيرة جدًا داخل المحرك”
- “المحرك يحول طاقة الاحتراق إلى حركة”
- “عمود المرفق يحول حركة المكبس إلى حركة دورانية”
- “هذه الحركة الدورانية تساعد السيارة على السير”
أضف قسمًا تفاعليًا بعنوان:
“تتبع مسار الطاقة”
عند الضغط على زر:
“شاهد كيف تتحول الطاقة”
اعرض سلسلة متحركة:
وقود + هواء → شرارة → احتراق → حركة المكبس → دوران العمود → حركة السيارة
أضف اختبارًا بسيطًا في نهاية المحاكاة بعنوان:
“اختبر فهمك!”
السؤال الأول:
“في أي شوط يدخل الهواء والوقود إلى الأسطوانة؟”
الاختيارات:
- السحب
- الضغط
- العادم
- التبريد
السؤال الثاني:
“ما وظيفة شمعة الاحتراق؟”
الاختيارات:
- إشعال خليط الهواء والوقود
- إخراج العادم
- تبريد المحرك
- فتح العجلات
السؤال الثالث:
“ماذا يفعل عمود المرفق؟”
الاختيارات:
- يحول حركة المكبس إلى حركة دورانية
- يخزن الوقود
- يفتح الأبواب
- يبرد السيارة
عند الإجابة الصحيحة:
أظهر رسالة:
“أحسنت! إجابة صحيحة”
عند الإجابة الخاطئة:
أظهر رسالة:
“حاول مرة أخرى”
الحركة والأنيميشن:
- استخدم CSS Animations و JavaScript للتحكم في الحركة.
- اجعل حركة المكبس والصمامات وعمود المرفق متزامنة.
- اجعل كل شوط مميزًا بلون وتأثير بصري مختلف.
- أضف انتقالات ناعمة بين المراحل.
- اجعل المحاكاة قابلة للتشغيل تلقائيًا أو يدويًا خطوة بخطوة.
مهم جدًا:
- اجعل الشرح مبسطًا للمبتدئين.
- لا تستخدم مصطلحات معقدة بدون شرح.
- لا تجعل الصفحة مزدحمة.
- اجعل المحاكاة تعليمية، جذابة، وتبدو مثل لعبة تعليمية صغيرة.
- اجعل التصميم مناسبًا للشاشة الكبيرة والموبايل.
- استخدم اللغة العربية في جميع النصوص.
المطلوب النهائي:
اكتب كود HTML كامل في ملف واحد يحتوي على:
- HTML
- CSS
- JavaScript
- رسم المحرك
- الحركة التفاعلية
- أزرار التحكم
- لوحة الشرح
- اختبار بسيط
يجب أن تكون النتيجة النهائية محاكاة تفاعلية ممتعة واحترافية تشرح كيفية عمل محرك السيارة بطريقة بصرية واضحة وسهلة الفهم.
