Michael Czechowski
1a5c09b750
Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match the English source. This ensures code, solutions, and validations are identical while only title, description, task, and message fields are translated. Changes include: - Box model lessons (01-box-model.json) - Units and variables (05-units-variables.json) - Transitions and animations (06-transitions-animations.json) - Responsive design (08-responsive.json) - HTML elements (20-html-elements.json) - HTML forms basic and validation (21, 22) - HTML details/summary, progress/meter (23, 24) - HTML datalist, dialog, fieldset (25, 27, 28) - HTML tables and SVG (30, 32) - HTML marquee (31) - Welcome module (00-welcome.json) Fixes validation inconsistencies and removes extra content that exceeded English source. German translations were largely correct; Polish, Spanish, Arabic, and Ukrainian required full translations.
83 lines
4.7 KiB
JSON
83 lines
4.7 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-marquee",
|
|
"title": "HTML Marquee",
|
|
"description": "أنشئ نصاً متحركاً باستخدام عنصر marquee الكلاسيكي (قديم لكنه ممتع!)",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "marquee-basic",
|
|
"title": "النص المتحرك",
|
|
"description": "عنصر <kbd><marquee></kbd> ينشئ نصاً متحركاً - كلاسيكي من الويب القديم! رغم أنه قديم، لا يزال يعمل في معظم المتصفحات.<br><br>ملاحظة: للإنتاج، استخدم حركات CSS بدلاً منه. لكن للتعلم والمرح، marquee رائع!",
|
|
"task": "أنشئ marquee بسيط:<br>1. أضف عنصر <kbd><marquee></kbd><br>2. ضع نصاً بداخله مثل <code>مرحباً بك في موقعي!</code>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee>Welcome to my website!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "أضف عنصر <kbd><marquee></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-direction",
|
|
"title": "الاتجاه والسلوك",
|
|
"description": "تحكم في marquee باستخدام السمات:<br>• <kbd>direction</kbd>: left، right، up، down<br>• <kbd>behavior</kbd>: scroll (افتراضي)، slide (يتوقف عند الحافة)، alternate (يرتد)<br>• <kbd>scrollamount</kbd>: السرعة (الافتراضي 6)",
|
|
"task": "أنشئ marquee مرتداً:<br>1. أضف عنصر <kbd><marquee></kbd><br>2. اضبط <kbd>behavior=\"alternate\"</kbd> ليرتد<br>3. أضف نصاً ممتعاً",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee behavior=\"alternate\">Bounce! Bounce! Bounce!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "أضف عنصر <kbd><marquee></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
|
|
"message": "أضف <kbd>behavior=</kbd>\"alternate\" ليرتد"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-retro",
|
|
"title": "شريط أخبار كلاسيكي",
|
|
"description": "اجمع عدة سمات marquee لتأثير شريط أخبار كلاسيكي. يمكنك حتى وضع عناصر متعددة بداخله!<br><br>تذكر: هذا HTML قديم. المواقع الحديثة تستخدم حركات CSS، لكن marquee رائع لفهم تاريخ الويب.",
|
|
"task": "أنشئ شريط أخبار:<br>1. عنصر <kbd><marquee></kbd> مع <kbd>direction=\"left\"</kbd><br>2. اضبط <kbd>scrollamount=\"5\"</kbd> للتمرير السلس<br>3. أضف عنواناً إخبارياً عاجلاً بداخله",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee direction=\"left\" scrollamount=\"5\">BREAKING NEWS: Marquee element still works in browsers!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "أضف عنصر <kbd><marquee></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "direction", "value": "left" },
|
|
"message": "أضف <kbd>direction=</kbd>\"left\" للتمرير الأفقي"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
|
|
"message": "أضف <kbd>scrollamount=</kbd>\"5\" لسرعة سلسة"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|