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.
45 lines
2.5 KiB
JSON
45 lines
2.5 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-tables",
|
|
"title": "جداول HTML",
|
|
"description": "أنشئ جداول بيانات منظمة بترميز دلالي",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "table-basic",
|
|
"title": "جداول البيانات",
|
|
"description": "الجداول تعرض البيانات المنظمة في صفوف وأعمدة. استخدم <kbd><table></kbd> كحاوية، <kbd><tr></kbd> للصفوف، <kbd><th></kbd> لخلايا الرأس و <kbd><td></kbd> لخلايا البيانات.<br><br>أضف <kbd><caption></kbd> لعنوان قابل للوصول يصف محتوى الجدول.",
|
|
"task": "أنشئ جدول أسعار:<br>1. عنصر <kbd><caption></kbd> يقول <code>Pricing</code><br>2. صف رأس مع <code>Plan</code> و <code>Price</code><br>3. صفين بيانات لـ Basic ($9) و Pro ($29)",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 350px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 16px; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: steelblue; color: white; font-weight: 500; } tr:last-child td { border-bottom: none; } tr:hover td { background: #f8f9fa; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<table>\n <caption>Pricing</caption>\n <tr>\n <th>Plan</th>\n <th>Price</th>\n </tr>\n <tr>\n <td>Basic</td>\n <td>$9</td>\n </tr>\n <tr>\n <td>Pro</td>\n <td>$29</td>\n </tr>\n</table>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "table",
|
|
"message": "أضف عنصر <kbd><table></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "caption",
|
|
"message": "أضف <kbd><caption></kbd> لعنوان الجدول"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "th", "min": 2 },
|
|
"message": "أضف خلايا رأس (<kbd><th></kbd>) لـ Plan و Price"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "tr", "min": 3 },
|
|
"message": "أضف 3 صفوف (1 رأس + 2 صفوف بيانات)"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|