Michael Czechowski
c560676544
Rewrite ~120 validation error messages across 17 English lesson modules and their localized variants (ar, de, es, pl, uk) to use concept questions, property hints, and directional nudges instead of revealing the exact CSS property-value answers. Priority modules (flexbox, box-model, colors, positioning) fully rewritten. All remaining CSS modules updated. Only message strings changed — no validation logic modifications.
260 lines
16 KiB
JSON
260 lines
16 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "css-basic-selectors",
|
|
"title": "أساسيات CSS",
|
|
"description": "تعلم اللبنات الأساسية لـ CSS: الخصائص والقيم والمحددات. يعلمك هذا الوحدة قواعد الصياغة التي يتبعها كل إعلان CSS.",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "css-properties",
|
|
"title": "خصائص CSS",
|
|
"description": "تقوم CSS بتنسيق العناصر باستخدام <strong>الإعلانات</strong> - أزواج من الخصائص والقيم. كل إعلان يتبع نفس النمط:<br><br><pre>property: value;</pre><br><strong>الخصاصية</strong> هي ما تريد تغييره (مثل <kbd>color</kbd> أو <kbd>background</kbd>). <strong>القيمة</strong> هي ما تضبطها عليه. النقطتان تفصلهما، والفاصلة المنقوطة تنهي السطر.<br><br>القيم تأتي بأنواع مختلفة:<br>• <strong>كلمات مفتاحية:</strong> <kbd>red</kbd>، <kbd>bold</kbd>، <kbd>center</kbd><br>• <strong>أرقام بوحدات:</strong> <kbd>16px</kbd>، <kbd>2rem</kbd>، <kbd>100%</kbd><br>• <strong>ألوان:</strong> <kbd>steelblue</kbd>، <kbd>#ff0000</kbd>",
|
|
"task": "أكمل الإعلان بإضافة <kbd>color: coral;</kbd> لتغيير لون النص.",
|
|
"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".text {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "color: coral;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "coral" },
|
|
"message": "ما الخاصية التي تتحكم في لون النص؟"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "multiple-properties",
|
|
"title": "خصائص متعددة",
|
|
"description": "يمكن أن تحتوي القاعدة على إعلانات متعددة. كل واحدة تذهب في سطرها الخاص، وكل واحدة تحتاج فاصلة منقوطة في النهاية:<br><br><pre>.box {<br> background: gold;<br> color: navy;<br> padding: 1rem;<br>}</pre><br>الترتيب عادةً لا يهم - CSS تطبقها جميعًا. عند التعارض، الأخيرة تفوز.",
|
|
"task": "أضف إعلانين: <kbd>background: lavender;</kbd> و <kbd>padding: 1rem;</kbd>",
|
|
"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": ".card {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "background: lavender;\n padding: 1rem;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "background", "expected": "lavender" },
|
|
"message": "تحقق من خاصية <kbd>background</kbd>"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "padding", "expected": "1rem" },
|
|
"message": "البطاقة تحتاج إلى مساحة داخل حوافها"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "type-selectors",
|
|
"title": "محددات النوع",
|
|
"description": "<strong>المحدد</strong> يخبر المتصفح أي العناصر يجب تنسيقها. أبسط محدد هو <strong>محدد النوع</strong> — مجرد اسم وسم HTML.<br><br><pre>p {<br> color: steelblue;<br>}</pre><br>هذه القاعدة تستهدف كل عنصر <kbd><p></kbd> في الصفحة. محددات النوع رائعة لتعيين الأنماط الأساسية.",
|
|
"task": "نسق جميع الفقرات. اكتب قاعدة مع <kbd>p</kbd> كمحدد واضبط <kbd>color: steelblue</kbd>.",
|
|
"previewHTML": "<article>\n <h2>Fresh Roasted Coffee</h2>\n <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"solution": "p {\n color: steelblue;\n}",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "p\\s*\\{",
|
|
"message": "ابدأ بـ <kbd>p {</kbd> لاختيار الفقرات"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "steelblue" },
|
|
"message": "ما الخاصية التي تغيّر لون النص؟"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "styling-links",
|
|
"title": "تنسيق الروابط",
|
|
"description": "محددات النوع تعمل مع أي عنصر HTML. المحدد <kbd>a</kbd> يستهدف جميع الروابط في الصفحة.<br><br>الروابط لها لون أزرق وخط تحتها افتراضيًا. يمكنك تغيير كليهما مع CSS — استخدم <kbd>color</kbd> للنص و <kbd>text-decoration: none</kbd> لإزالة الخط.",
|
|
"task": "نسق روابط التنقل. اكتب قاعدة مع <kbd>a</kbd> كمحدد واضبط <kbd>color: coral</kbd>.",
|
|
"previewHTML": "<nav>\n <a href=\"#\">Home</a>\n <a href=\"#\">Menu</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n</nav>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"solution": "a {\n color: coral;\n}",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "a\\s*\\{",
|
|
"message": "ابدأ بـ <kbd>a {</kbd> لاختيار الروابط"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "coral" },
|
|
"message": "ما القيمة التي تعطي لوناً دافئاً برتقالياً محمراً؟"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "class-selectors",
|
|
"title": "محددات الفئة",
|
|
"description": "محددات النوع تنسق <em>جميع</em> العناصر من ذلك النوع. لكن ماذا لو أردت تنسيق بعضها فقط؟<br><br><strong>محددات الفئة</strong> تستهدف العناصر ذات سمة <kbd>class</kbd> محددة. تبدأ بنقطة:<br><br><pre>.badge {<br> background: coral;<br>}</pre><br>هذا ينسق فقط العناصر ذات <kbd>class=\"badge\"</kbd>.",
|
|
"task": "نسق شارة الإشعارات. اكتب قاعدة مع <kbd>.badge</kbd> كمحدد واضبط <kbd>background: tomato</kbd>.",
|
|
"previewHTML": "<header>\n <h1>Dashboard</h1>\n <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"solution": ".badge {\n background: tomato;\n}",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\.badge\\s*\\{",
|
|
"message": "ابدأ بـ <kbd>.badge {</kbd> (لا تنسَ النقطة!)"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "background", "expected": "tomato" },
|
|
"message": "الشارة تحتاج إلى خلفية حمراء زاهية"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "button-variants",
|
|
"title": "متغيرات الأزرار",
|
|
"description": "يمكن أن تحتوي العناصر على فئات متعددة. عندما تسلسل محددات الفئة بدون مسافات، تستهدف العناصر التي لديها <em>جميع</em> تلك الفئات:<br><br><pre>.btn.primary {<br> background: steelblue;<br>}</pre><br>هذا يستهدف العناصر ذات <kbd>class=\"btn primary\"</kbd>، وليس فقط <kbd>.btn</kbd> أو فقط <kbd>.primary</kbd>.",
|
|
"task": "نسق الزر الأساسي. اكتب قاعدة مع <kbd>.btn.primary</kbd> كمحدد واضبط <kbd>background: steelblue</kbd>.",
|
|
"previewHTML": "<div class=\"actions\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn primary\">Save Changes</button>\n</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"solution": ".btn.primary {\n background: steelblue;\n}",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\.btn\\.primary\\s*\\{",
|
|
"message": "استخدم <kbd>.btn.primary {</kbd> (بدون مسافة بين الفئات)"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "background", "expected": "steelblue" },
|
|
"message": "ما الخاصية التي تضبط لون تعبئة الزر؟"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "specific-elements",
|
|
"title": "استهداف عناصر محددة",
|
|
"description": "أحيانًا تريد أن تبدو الفئة مختلفة على عناصر مختلفة. اجمع محدد النوع مع محدد الفئة (بدون مسافة) لتكون أكثر تحديدًا:<br><br><pre>a.btn {<br> text-decoration: none;<br>}</pre><br>هذا ينسق فقط عناصر <kbd><a></kbd> ذات الفئة <kbd>btn</kbd>، وليس عناصر <kbd><button></kbd> ذات تلك الفئة.",
|
|
"task": "أزل الخط من أزرار الروابط. اكتب قاعدة مع <kbd>a.btn</kbd> كمحدد واضبط <kbd>text-decoration: none</kbd>.",
|
|
"previewHTML": "<div class=\"actions\">\n <button class=\"btn\">Regular Button</button>\n <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"solution": "a.btn {\n text-decoration: none;\n}",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "a\\.btn\\s*\\{",
|
|
"message": "استخدم <kbd>a.btn {</kbd> (نوع + فئة، بدون مسافة)"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "text-decoration", "expected": "none" },
|
|
"message": "ما الخاصية التي تتحكم في الخط أسفل الروابط؟"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "grouping-selectors",
|
|
"title": "تجميع المحددات",
|
|
"description": "عندما تحتاج عناصر متعددة لنفس الأنماط، اذكرها مفصولة بفواصل. هذا يحافظ على CSS نظيفًا وقابلاً للصيانة.<br><br><pre>h1, h2, h3 {<br> color: steelblue;<br>}</pre><br>هذا يطبق نفس اللون على مستويات العناوين الثلاثة في قاعدة واحدة.",
|
|
"task": "نسق جميع العناوين بشكل متسق. أضف <kbd>color: steelblue</kbd> إلى المحدد المجمع <kbd>h1, h2, h3</kbd>.",
|
|
"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "h1, h2, h3 {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"previewContainer": "preview-area",
|
|
"solution": "color: steelblue;",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "steelblue" },
|
|
"message": "تحقق من خاصية <kbd>color</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "descendant-selectors",
|
|
"title": "محددات الأحفاد",
|
|
"description": "استهدف العناصر داخل عناصر أخرى باستخدام مسافة بين المحددات. هذا أحد أكثر الأنماط فائدة في CSS.<br><br><pre>.nav a {<br> color: white;<br>}</pre><br>هذا ينسق فقط الروابط داخل <kbd>.nav</kbd>، تاركًا الروابط الأخرى دون تغيير.",
|
|
"task": "نسق روابط التنقل بشكل مختلف. اكتب قاعدة مع <kbd>.nav a</kbd> كمحدد واضبط <kbd>color: white</kbd>.",
|
|
"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"solution": ".nav a {\n color: white;\n}",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\.nav\\s+a\\s*\\{",
|
|
"message": "استخدم <kbd>.nav a {</kbd> (مسافة بين .nav و a)"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "color", "expected": "white" },
|
|
"message": "الروابط تحتاج إلى أن تبرز على الخلفية الزرقاء"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "nested-styling",
|
|
"title": "الأنماط المتداخلة",
|
|
"description": "محددات الأحفاد تتيح لك إنشاء أنماط سياقية. نفس العنصر يمكن أن يبدو مختلفًا حسب مكان ظهوره.<br><br>على سبيل المثال، الفقرات في <kbd>.card</kbd> قد تكون أصغر من الفقرات في <kbd>article</kbd>.",
|
|
"task": "اجعل الفقرات داخل البطاقة أصغر. اكتب قاعدة مع <kbd>.card p</kbd> كمحدد واضبط <kbd>font-size: 0.9rem</kbd>.",
|
|
"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
|
|
"sandboxCSS": "",
|
|
"codePrefix": "",
|
|
"initialCode": "",
|
|
"codeSuffix": "",
|
|
"previewContainer": "preview-area",
|
|
"solution": ".card p {\n font-size: 0.9rem;\n}",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\.card\\s+p\\s*\\{",
|
|
"message": "استخدم <kbd>.card p {</kbd> (مسافة بين .card و p)"
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "font-size", "expected": "0.9rem" },
|
|
"message": "تحقق من خاصية <kbd>font-size</kbd> — النص يجب أن يكون أصغر قليلاً"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|