تدريب 2 - كتاب المهارات الرقمية - الصف 9 - الفصل 1 - المملكة العربية السعودية

سؤال 2: تدريب 2: أنشئ مقطعًا برمجيًا لرسم الأشكال الآتية:

الإجابة: س2: - أنشئ نافذة Tkinter و Canvas بخلفية سوداء. - ارسم دائرتين (Oval) على اللوحة: - دائرة خضراء يسارًا. - دائرة صفراء يمينًا. - اجعل لون التعبئة مطابقًا للون الدائرة.

خطوات الحل:

1. | البند | الوصف | |--------|--------| | **المطلوب** | إنشاء مقطع برمجي لرسم دائرتين على لوحة رسومية. | | **الشكل 1** | دائرة خضراء على الجانب الأيسر. | | **الشكل 2** | دائرة صفراء على الجانب الأيسر. | | **البيئة** | استخدام مكتبة Tkinter في Python. | | **التفاصيل** | خلفية اللوحة سوداء، ولون تعبئة كل دائرة مطابق للون حدودها. |
2. **المبدأ المستخدم:** استخدام عناصر واجهة `Tkinter`، وتحديداً كائن `Canvas` لرسم الأشكال الهندسية.
3. 1. **استيراد المكتبة:** نبدأ باستيراد وحدة `tkinter` بأكملها أو الفئات المطلوبة منها. python import tkinter as tk
4. 2. **إنشاء النافذة الرئيسية:** نقوم بإنشاء النافذة الرئيسية للتطبيق. python window = tk.Tk() window.title("رسم دوائر ملونة")
5. 3. **إنشاء لوحة الرسم (Canvas):** ننشئ لوحة الرسم داخل النافذة ونحدد خلفيتها باللون الأسود. python canvas = tk.Canvas(window, width=400, height=300, bg='black') canvas.pack()
6. 4. **رسم الدائرة الخضراء (اليسار):** نستخدم دالة `create_oval` لرسم بيضاوي (دائرة هنا). نحدد إحداثيات الزاوية العلوية اليسرى والسفلية اليمنى للمربع المحيط، ولون التعبئة (`fill`) والحدود (`outline`). python # دائرة خضراء على اليسار (إحداثيات x1, y1, x2, y2) left_circle = canvas.create_oval(50, 100, 150, 200, fill='green', outline='green')
7. 5. **رسم الدائرة الصفراء (اليمين):** نكرر العملية مع إحداثيات مختلفة على الجانب الأيمن من اللوحة ولون مختلف. python # دائرة صفراء على اليمين right_circle = canvas.create_oval(250, 100, 350, 200, fill='yellow', outline='yellow')
8. 6. **تشغيل التطبيق:** أخيراً، ندخل الحلقة الرئيسية لتطبيق `Tkinter` لعرض النافذة. python window.mainloop()
9. > **ملاحظة:** يمكن تغيير أبعاد النافذة (`width`, `height`) وإحداثيات الدوائر (`x1, y1, x2, y2`) لتحقيق التنسيق المرغوب. **النتيجة النهائية:** سيعرض البرنامج نافذة ذات خلفية سوداء، تحتوي على **دائرة خضراء** في الجزء الأيسر و**دائرة صفراء** في الجزء الأيمن من اللوحة الرسومية.

سؤال 3: تدريب 3: أنشئ مقطعًا برمجيًا لرسم خطوط ملونة على لوحة رسومية بحيث تتغير الألوان في كل مرة يتم فيها الضغط داخل اللوحة.

الإجابة: س3: أنشئ نافذة Canvas وقائمة ألوان. اربط النقر بدالة تختار اللون وترسم خطًا وتحدث الفهرس.

خطوات الحل:

1. | البند | الوصف | |--------|--------| | **المطلوب** | إنشاء مقطع برمجي يرسم خطوطاً ملونة على لوحة، مع تغيير لون الخط في كل مرة ينقر فيها المستخدم داخل اللوحة. | | **الحدث المحفز** | النقر بزر الفأرة داخل منطقة `Canvas`. | | **الاستجابة** | رسم خط من نقطة ثابتة (أو عشوائية) إلى موقع النقر، بلون مختلف في كل مرة. | | **البيئة** | استخدام مكتبة Tkinter في Python. |
2. **المبدأ المستخدم:** ربط أحداث واجهة المستخدم (Event Binding) بدوال معالجة الأحداث (Event Handlers) في `Tkinter`، واستخدام قائمة ألوان دورية.
3. 1. **استيراد المكتبة:** نستورد وحدة `tkinter`. python import tkinter as tk
4. 2. **تهيئة المتغيرات العامة:** ننشئ قائمة (`list`) بالألوان المراد تداولها، ومؤشر (`index`) لتتبع اللون الحالي. python colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'] color_index = 0
5. 3. **إنشاء النافذة واللوحة:** ننشئ النافذة الرئيسية ولوحة الرسم `Canvas` داخلها. python window = tk.Tk() window.title("خطوط متغيرة الألوان") canvas = tk.Canvas(window, width=500, height=400, bg='white') canvas.pack()
6. 4. **تحديد دالة معالجة النقر:** ننشئ دالة ستُنفذ عند كل نقر على اللوحة. ستقوم هذه الدالة بما يلي: - الوصول إلى المتغير `color_index` باستخدام الكلمة المفتاحية `nonlocal` (إذا كانت الدالة داخل أخرى) أو تعريفها كمتغيرات كائن إذا استخدمنا فئة. - استخدام اللون الحالي من القائمة لرسم خط. - تحديث المؤشر `color_index` للانتقال إلى اللون التالي في القائمة (مع العودة للبداية إذا لزم الأمر). python def draw_line(event): nonlocal color_index # للوصول إلى المتغير الخارجي current_color = colors[color_index] # مثال: رسم خط من مركز اللوحة إلى موقع النقر canvas.create_line(250, 200, event.x, event.y, fill=current_color, width=2) # الانتقال للون التالي في القائمة (دوراني) color_index = (color_index + 1) % len(colors)
7. 5. **ربط الحدث بالدالة:** نربط حدث النقر بزر الفأرة (`<Button-1>`) على كائن `canvas` بالدالة `draw_line` التي أنشأناها. python canvas.bind('<Button-1>', draw_line)
8. 6. **تشغيل التطبيق:** ندخل الحلقة الرئيسية للتطبيق. python window.mainloop()
9. > **ملاحظة مهمة:** في المثال أعلاه، تم افتراض أن الدالة `draw_line` مُعرفة داخل نطاق يحتوي على `color_index`. في برنامج كامل، قد تحتاج إلى استخدام `global` أو تصميم البرنامج باستخدام فئة (`class`) لإدارة الحالة بشكل أفضل. **النتيجة النهائية:** عند تشغيل البرنامج، سيتم رسم **خط** من نقطة ثابتة (كمركز اللوحة) إلى موقع كل **نقرة** يقوم بها المستخدم على اللوحة البيضاء، حيث يتغير **لون الخط** بشكل تتابعي ودوراني وفقاً لقائمة الألوان المُعرفة مسبقاً.

ما الخطوة الأولى الصحيحة لإنشاء مقطع برمجي في Python باستخدام Tkinter لرسم دائرتين (خضراء على اليسار وصفراء على اليمين) على لوحة سوداء؟

• أ) كتابة دالة لمعالجة أحداث الفأرة مباشرة.
• ب) استيراد مكتبة tkinter وإنشاء النافذة الرئيسية.
• ج) تحديد قائمة ألوان للدوائر المراد رسمها.
• د) رسم الدوائر مباشرة دون إنشاء نافذة.

الإجابة الصحيحة: b

الإجابة: استيراد مكتبة tkinter وإنشاء النافذة الرئيسية.

الشرح: ١. استيراد مكتبة tkinter: `import tkinter as tk`. ٢. إنشاء النافذة الرئيسية للتطبيق: `window = tk.Tk()`. ٣. إنشاء لوحة الرسم Canvas بخلفية سوداء: `canvas = tk.Canvas(window, width=400, height=300, bg='black')`. ٤. رسم الدائرة الخضراء باستخدام `create_oval` مع الإحداثيات واللون المناسبين. ٥. رسم الدائرة الصفراء بنفس الطريقة مع إحداثيات مختلفة. ٦. تشغيل التطبيق باستخدام `window.mainloop()`.

تلميح: تذكر أن أي برنامج باستخدام واجهة المستخدم الرسومية في Python يبدأ باستيراد المكتبة المناسبة.

التصنيف: صيغة/خطوات | المستوى: متوسط

في برنامج يرسم خطوطاً ملونة تتغير مع كل نقرة على لوحة Canvas، ما الوظيفة الرئيسية للكود `color_index = (color_index + 1) % len(colors)` داخل دالة معالجة النقر؟

• أ) حذف اللون الحالي من القائمة بعد استخدامه.
• ب) تحديد لون عشوائي جديد من القائمة.
• ج) تحديد مؤشر اللون للانتقال إلى اللون التالي في القائمة بشكل دوري (يعود للبداية بعد الأخير).
• د) إعادة تعيين الفهرس إلى الصفر فقط عند الوصول للنهاية.

الإجابة الصحيحة: c

الإجابة: تحديد مؤشر اللون للانتقال إلى اللون التالي في القائمة بشكل دوري (يعود للبداية بعد الأخير).

الشرح: ١. `colors` هي قائمة تحتوي على الألوان المتاحة (مثل ['red', 'blue', 'green']). ٢. `color_index` هو متغير يخزن موقع اللون الحالي في القائمة. ٣. `(color_index + 1)` تزيد الفهرس بمقدار 1 للانتقال للون التالي. ٤. `% len(colors)` تعني باقي القسمة على طول القائمة، مما يجعل الفهرس يعود إلى 0 عندما يصل لنهاية القائمة. ٥. النتيجة: تغيير اللون بشكل متتابع ودوراني مع كل نقرة.

تلميح: فكر في كيفية ضمان عدم تجاوز الفهرس حدود القائمة وتكرار الألوان.

التصنيف: مفهوم جوهري | المستوى: متوسط