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:
@@ -2,15 +2,15 @@
|
||||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||||
"id": "html-marquee",
|
||||
"title": "HTML Marquee",
|
||||
"description": "Create scrolling text with the classic (deprecated but fun!) marquee element",
|
||||
"description": "Twórz przewijający się tekst za pomocą klasycznego (przestarzałego ale fajnego!) elementu marquee",
|
||||
"mode": "html",
|
||||
"difficulty": "beginner",
|
||||
"lessons": [
|
||||
{
|
||||
"id": "marquee-basic",
|
||||
"title": "Scrolling Text",
|
||||
"description": "The <kbd><marquee></kbd> element creates scrolling text - a classic from the early web! While deprecated, it still works in most browsers.<br><br>Note: For production, use CSS animations instead. But for learning and fun, marquee is great!",
|
||||
"task": "Create a simple marquee:<br>1. Add a <kbd><marquee></kbd> element<br>2. Put some text inside like <code>Welcome to my website!</code>",
|
||||
"title": "Przewijający się tekst",
|
||||
"description": "Element <kbd><marquee></kbd> tworzy przewijający się tekst - klasyk z wczesnego internetu! Choć przestarzały, nadal działa w większości przeglądarek.<br><br>Uwaga: W produkcji używaj animacji CSS. Ale do nauki i zabawy marquee jest świetne!",
|
||||
"task": "Utwórz prosty marquee:<br>1. Dodaj element <kbd><marquee></kbd><br>2. Umieść w nim tekst jak <code>Witaj na mojej stronie!</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": "",
|
||||
@@ -21,15 +21,15 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "marquee",
|
||||
"message": "Add a <kbd><marquee></kbd> element"
|
||||
"message": "Dodaj element <kbd><marquee></kbd>"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "marquee-direction",
|
||||
"title": "Direction & Behavior",
|
||||
"description": "Control the marquee with attributes:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (default), slide (stops at edge), alternate (bounces)<br>• <kbd>scrollamount</kbd>: speed (default is 6)",
|
||||
"task": "Create a bouncing marquee:<br>1. Add a <kbd><marquee></kbd> element<br>2. Set <kbd>behavior=\"alternate\"</kbd> to make it bounce<br>3. Add some fun text",
|
||||
"title": "Kierunek i zachowanie",
|
||||
"description": "Kontroluj marquee za pomocą atrybutów:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (domyślnie), slide (zatrzymuje się na krawędzi), alternate (odbija się)<br>• <kbd>scrollamount</kbd>: prędkość (domyślnie 6)",
|
||||
"task": "Utwórz odbijający się marquee:<br>1. Dodaj element <kbd><marquee></kbd><br>2. Ustaw <kbd>behavior=\"alternate\"</kbd> aby się odbijał<br>3. Dodaj jakiś fajny tekst",
|
||||
"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": "",
|
||||
@@ -40,20 +40,20 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "marquee",
|
||||
"message": "Add a <kbd><marquee></kbd> element"
|
||||
"message": "Dodaj element <kbd><marquee></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
|
||||
"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
|
||||
"message": "Dodaj <kbd>behavior=</kbd>\"alternate\" aby się odbijał"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "marquee-retro",
|
||||
"title": "Retro News Ticker",
|
||||
"description": "Combine multiple marquee attributes for a classic news ticker effect. You can even put multiple elements inside!<br><br>Remember: This is deprecated HTML. Modern sites use CSS animations, but marquee is great for understanding web history.",
|
||||
"task": "Create a news ticker:<br>1. A <kbd><marquee></kbd> with <kbd>direction=\"left\"</kbd><br>2. Set <kbd>scrollamount=\"5\"</kbd> for smooth scrolling<br>3. Add a breaking news headline inside",
|
||||
"title": "Retro pasek wiadomości",
|
||||
"description": "Połącz wiele atrybutów marquee dla klasycznego efektu paska wiadomości. Możesz nawet umieścić wiele elementów w środku!<br><br>Pamiętaj: To przestarzały HTML. Nowoczesne strony używają animacji CSS, ale marquee jest świetne do zrozumienia historii internetu.",
|
||||
"task": "Utwórz pasek wiadomości:<br>1. Element <kbd><marquee></kbd> z <kbd>direction=\"left\"</kbd><br>2. Ustaw <kbd>scrollamount=\"5\"</kbd> dla płynnego przewijania<br>3. Dodaj w środku nagłówek z ostatniej chwili",
|
||||
"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": "",
|
||||
@@ -64,17 +64,17 @@
|
||||
{
|
||||
"type": "element_exists",
|
||||
"value": "marquee",
|
||||
"message": "Add a <kbd><marquee></kbd> element"
|
||||
"message": "Dodaj element <kbd><marquee></kbd>"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "marquee", "attr": "direction", "value": "left" },
|
||||
"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
|
||||
"message": "Dodaj <kbd>direction=</kbd>\"left\" dla poziomego przewijania"
|
||||
},
|
||||
{
|
||||
"type": "attribute_value",
|
||||
"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
|
||||
"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
|
||||
"message": "Dodaj <kbd>scrollamount=</kbd>\"5\" dla płynnej prędkości"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user