تقييم الدرس 8
Tailwind CSS: التنسيق بالأصناف الجاهزة
أجب عن الأسئلة ثم اضغط «صحّح ورقتي» في آخر الصفحة. ← العودة إلى الدرس
أسئلة التقييم
تقييم الدرس 8: Tailwind CSS: التنسيق بالأصناف الجاهزة. إجاباتك تُحفظ تلقائيًّا على هذا الجهاز؛ أجب ثم اضغط «صحّح ورقتي».
1السؤال الأول: اختر الإجابة الصحيحة
1) أي وصف ينطبق على
Tailwind؟2) الصنف
text-xl يتحكم في:3) لماذا نفضّل
ms-4 على ml-4 في واجهة عربية؟4) ما الذي يحدث لهذا الزر عند مرور الفأرة؟
<button className="bg-sky-600 hover:bg-sky-800 text-white">شراء</button>5) أين تضع @
import "tailwindcss" في مشروع Vite؟2السؤال الثاني: صح أم خطأ
1)
Tailwind يتطلب كتابة ملف CSS لكل مكوّن.الصواب: خطأ
2) بناء اسم الصنف من أجزاء مثل
'bg-' + color قد لا يعمل في المشروع الحقيقي.الصواب: صح
3) الرقم 4 في
p-4 يساوي 16 بكسل.الصواب: صح
4) لا يمكن استخدام
Tailwind مع React.الصواب: خطأ
3السؤال الثالث: أكمل الفراغات من القائمة المنسدلة
1) الصنف الذي يجعل العنصر حاوية مرنة هو .
الإجابة: flex
2) لزوايا دائرية كاملة نستخدم .
الإجابة:
rounded-full3) الدرجة 50 في
bg-sky-50 تعني لونًا .الإجابة: فاتحًا جدًّا
4السؤال الرابع: أسئلة عملية
1) ما النص الذي يظهر؟
const sizes = { sm: 'text-sm', lg: 'text-lg' };export default function App() { const s = 'lg'; return <p className={sizes[s]}>الصنف: {sizes[s]}</p>;}
الناتج الصحيح:
الصنف: text-lg
2) ما النص الذي يظهر؟
export default function App() { const on = false; const cls = 'px-2 ' + (on ? 'bg-green-500' : 'bg-gray-300'); return <span className={cls}>{cls.split(' ').length} أصناف</span>;}
الناتج الصحيح:
2 أصناف
أجب عن الأسئلة ثم اضغط «صحّح ورقتي».