تقييم الدرس 9

واجهات متجاوبة بـ Tailwind

أجب عن الأسئلة ثم اضغط «صحّح ورقتي» في آخر الصفحة. ← العودة إلى الدرس

أسئلة التقييم

تقييم الدرس 9: واجهات متجاوبة بـ Tailwind. إجاباتك تُحفظ تلقائيًّا على هذا الجهاز؛ أجب ثم اضغط «صحّح ورقتي».

1السؤال الأول: اختر الإجابة الصحيحة

1) في Tailwind، الصنف بلا بادئة يطبّق على:

2) نقطة التوقف md تبدأ من:

3) لجدول عريض في الجوال نضعه داخل:

4) كم عمودًا على حاسب بعرض 1300 بكسل؟

<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">…</div>

5) أفضل طريقة لبدء التصميم المتجاوب:

2السؤال الثاني: صح أم خطأ

1) md:hidden يخفي العنصر في الشاشات الصغيرة فقط.

الصواب: خطأ

2) hidden md:block يظهر العنصر من الجهاز اللوحي فما فوق.

الصواب: صح

3) البادئة dark: تتبع وضع الجهاز الداكن.

الصواب: صح

4) العرض الثابت الكبير بالبكسل مناسب للجوال.

الصواب: خطأ

3السؤال الثالث: أكمل الفراغات من القائمة المنسدلة

1) لجعل العناصر عمودية في الجوال وأفقية من md نكتب flex flex-col و .

الإجابة: md:flex-row

2) لتوسيط حاوية بعرض محدود نستخدم max-w-5xl و .

الإجابة: mx-auto

3) نقطة التوقف lg تبدأ من بكسل.

الإجابة: 1024

4السؤال الرابع: أسئلة عملية

1) ما النص الذي يظهر؟

const bp = { sm: 640, md: 768, lg: 1024 };export default function App() {  const w = 800;  const active = Object.keys(bp).filter(k => w >= bp[k]);  return <p>{active.join(' و ')}</p>;}

الناتج الصحيح:

sm و md

2) ما النص الذي يظهر؟

export default function App() {  const open = true;  return <button>{open ? '✕ إغلاق' : '☰ القائمة'}</button>;}

الناتج الصحيح:

✕ إغلاق

أجب عن الأسئلة ثم اضغط «صحّح ورقتي».

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس