fix(i18n): sync all lesson translations with English source
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.
This commit is contained in:
@@ -1,100 +1,100 @@
|
||||
{
|
||||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||||
"id": "html-forms-basic",
|
||||
"title": "HTML Forms",
|
||||
"description": "Learn to create forms with various input types",
|
||||
"title": "نماذج HTML",
|
||||
"description": "تعلم إنشاء النماذج بأنواع حقول مختلفة",
|
||||
"mode": "html",
|
||||
"difficulty": "beginner",
|
||||
"lessons": [
|
||||
{
|
||||
"id": "form-structure",
|
||||
"title": "Form Structure",
|
||||
"description": "Every form needs a <kbd><form></kbd> wrapper. Inside, use <kbd><label></kbd> to describe inputs and <kbd><input></kbd> for user data entry.<br><br>The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs for accessibility.",
|
||||
"task": "Create a form with:<br>1. A <kbd><label></kbd> with the text <code>Name:</code> and <kbd>for=\"name\"</kbd> attribute<br>2. A text <kbd><input></kbd> with <kbd>id=\"name\"</kbd> and <kbd>name=\"name\"</kbd> attributes",
|
||||
"title": "هيكل النموذج",
|
||||
"description": "كل نموذج يحتاج غلاف <kbd><form></kbd>. بداخله، استخدم <kbd><label></kbd> لوصف الحقول و <kbd><input></kbd> لإدخال البيانات.<br><br>سمة <kbd>for</kbd> في التسميات يجب أن تطابق <kbd>id</kbd> في الحقول للوصولية.",
|
||||
"task": "أنشئ نموذجاً مع:<br>1. <kbd><label></kbd> بالنص <code>الاسم:</code> وسمة <kbd>for=\"name\"</kbd><br>2. <kbd><input></kbd> نصي بسمات <kbd>id=\"name\"</kbd> و <kbd>name=\"name\"</kbd>",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "",
|
||||
"solution": "<form>\n <label for=\"name\">Name:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
|
||||
"solution": "<form>\n <label for=\"name\">الاسم:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "form",
|
||||
"message": "Wrap everything in a <kbd><form></kbd> element"
|
||||
"message": "أحط كل شيء بعنصر <kbd><form></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "label",
|
||||
"message": "Add a <kbd><label></kbd> for your input"
|
||||
"message": "أضف <kbd><label></kbd> لحقلك"
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "input",
|
||||
"message": "Add an <kbd><input></kbd> element"
|
||||
"message": "أضف عنصر <kbd><input></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "label", "attr": "for", "value": null },
|
||||
"message": "Add a <kbd>for</kbd> attribute to your label"
|
||||
"message": "أضف سمة <kbd>for</kbd> للتسمية"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "input", "attr": "id", "value": null },
|
||||
"message": "Add an <kbd>id</kbd> attribute to your input"
|
||||
"message": "أضف سمة <kbd>id</kbd> لحقلك"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "input-types",
|
||||
"title": "Input Types",
|
||||
"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
|
||||
"task": "Create a login form with two fields:<br>1. An email field: <kbd><label for=\"email\">Email:</label></kbd> and <kbd><input type=\"email\" id=\"email\"></kbd><br>2. A password field: <kbd><label for=\"password\">Password:</label></kbd> and <kbd><input type=\"password\" id=\"password\"></kbd>",
|
||||
"title": "أنواع الحقول",
|
||||
"description": "أنواع الحقول المختلفة توفر لوحات مفاتيح وتحقق مناسب:<br><br><kbd>type=\"text\"</kbd> - نص عام<br><kbd>type=\"email\"</kbd> - بريد إلكتروني مع تحقق @<br><kbd>type=\"password\"</kbd> - أحرف مخفية<br><kbd>type=\"number\"</kbd> - لوحة مفاتيح رقمية<br><kbd>type=\"tel\"</kbd> - لوحة مفاتيح هاتف",
|
||||
"task": "أنشئ نموذج تسجيل دخول بحقلين:<br>1. حقل بريد: <kbd><label for=\"email\">البريد:</label></kbd> و <kbd><input type=\"email\" id=\"email\"></kbd><br>2. حقل كلمة مرور: <kbd><label for=\"password\">كلمة المرور:</label></kbd> و <kbd><input type=\"password\" id=\"password\"></kbd>",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "<form>\n \n</form>",
|
||||
"solution": "<form>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n \n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
|
||||
"solution": "<form>\n <label for=\"email\">البريد:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n \n <label for=\"password\">كلمة المرور:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "input[type='email']",
|
||||
"message": "Add an input with type=\"email\""
|
||||
"message": "أضف حقل بـ type=\"email\""
|
||||
},
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "input[type='password']",
|
||||
"message": "Add an input with type=\"password\""
|
||||
"message": "أضف حقل بـ type=\"password\""
|
||||
},
|
||||
{
|
||||
"type": "element_count",
|
||||
"value": { "selector": "label", "min": 2 },
|
||||
"message": "Add labels for both inputs"
|
||||
"message": "أضف تسميات لكلا الحقلين"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "submit-button",
|
||||
"title": "Submit Button",
|
||||
"description": "Forms need a way to submit data. Use:<br><br><kbd><button type=\"submit\"></kbd> - Preferred, flexible content<br><kbd><input type=\"submit\"></kbd> - Simple text-only button<br><br>The button text should be action-oriented (e.g., <code>Sign In</code>, 'Register', 'Send').",
|
||||
"task": "Add a submit button to the form with the text <code>Sign In</code>.",
|
||||
"title": "زر الإرسال",
|
||||
"description": "النماذج تحتاج طريقة لإرسال البيانات. استخدم:<br><br><kbd><button type=\"submit\"></kbd> - مفضل، محتوى مرن<br><kbd><input type=\"submit\"></kbd> - زر نص بسيط<br><br>نص الزر يجب أن يكون موجه للعمل (مثل <code>تسجيل الدخول</code>، 'التسجيل'، 'إرسال').",
|
||||
"task": "أضف زر إرسال للنموذج بالنص <code>تسجيل الدخول</code>.",
|
||||
"previewHTML": "",
|
||||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
|
||||
"sandboxCSS": "",
|
||||
"initialCode": "<form>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\">\n \n</form>",
|
||||
"solution": "<form>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\">\n \n <button type=\"submit\">Sign In</button>\n</form>",
|
||||
"initialCode": "<form>\n <label for=\"email\">البريد:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">كلمة المرور:</label>\n <input type=\"password\" id=\"password\">\n \n</form>",
|
||||
"solution": "<form>\n <label for=\"email\">البريد:</label>\n <input type=\"email\" id=\"email\">\n \n <label for=\"password\">كلمة المرور:</label>\n <input type=\"password\" id=\"password\">\n \n <button type=\"submit\">تسجيل الدخول</button>\n</form>",
|
||||
"previewContainer": "preview-area",
|
||||
"validations": [
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "button[type='submit'], input[type='submit']",
|
||||
"message": "Add a submit button to your form"
|
||||
"message": "أضف زر إرسال لنموذجك"
|
||||
},
|
||||
{
|
||||
"type": "element_text",
|
||||
"value": { "selector": "button", "text": "Sign In" },
|
||||
"message": "The button should say <kbd>Sign In</kbd>"
|
||||
"value": { "selector": "button", "text": "تسجيل الدخول" },
|
||||
"message": "يجب أن يعرض الزر <kbd>تسجيل الدخول</kbd>"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user