Michael Czechowski
4bed75eb74
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.
128 lines
7.7 KiB
JSON
128 lines
7.7 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-fieldset",
|
|
"title": "Fieldset",
|
|
"description": "Grupuj elementy formularza za pomocą fieldset i legend",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "fieldset-basic",
|
|
"title": "Grupowanie z Fieldset",
|
|
"description": "Element <kbd><fieldset></kbd> grupuje powiązane elementy formularza. Dodaj <kbd><legend></kbd> jako pierwsze dziecko, aby nadać grupie tytuł.<br><br>To pomaga w dostępności i wizualnej organizacji złożonych formularzy.",
|
|
"task": "Utwórz formularz z fieldset:<br>1. Element <kbd><form></kbd><br>2. Element <kbd><fieldset></kbd> wewnątrz<br>3. Element <kbd><legend></kbd> z tekstem <code>Dane osobowe</code><br>4. Dwa opisane pola dla imienia i e-maila",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <fieldset>\n <legend>Personal Info</legend>\n <label for=\"name\">Name:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n </fieldset>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form",
|
|
"message": "Dodaj element <kbd><form></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "fieldset",
|
|
"message": "Dodaj <kbd><fieldset></kbd> wewnątrz formularza"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "legend",
|
|
"message": "Dodaj <kbd><legend></kbd> jako tytuł fieldset"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "label", "min": 2 },
|
|
"message": "Dodaj co najmniej 2 etykiety"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "input", "min": 2 },
|
|
"message": "Dodaj co najmniej 2 pola wprowadzania"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "fieldset-textarea",
|
|
"title": "Dodawanie Textarea",
|
|
"description": "Element <kbd><textarea></kbd> tworzy wieloliniowe pole tekstowe, idealne dla dłuższych treści jak wiadomości lub opisy.<br><br>Użyj atrybutów <kbd>rows</kbd> i <kbd>cols</kbd> aby ustawić domyślny rozmiar.",
|
|
"task": "Utwórz formularz kontaktowy:<br>1. Element <kbd><fieldset></kbd> z <kbd><legend></kbd> <code>Kontakt</code><br>2. Opisane <kbd><input></kbd> dla e-maila<br>3. Opisane <kbd><textarea></kbd> dla wiadomości<br>4. Przycisk <kbd><button></kbd> wysyłania",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <fieldset>\n <legend>Contact Us</legend>\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" name=\"email\">\n <label for=\"message\">Message:</label>\n <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n <button type=\"submit\">Send Message</button>\n </fieldset>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "fieldset",
|
|
"message": "Dodaj element <kbd><fieldset></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "legend",
|
|
"message": "Dodaj element <kbd><legend></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "textarea",
|
|
"message": "Dodaj <kbd><textarea></kbd> dla wiadomości"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button",
|
|
"message": "Dodaj przycisk wysyłania"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input",
|
|
"message": "Dodaj pole dla e-maila"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "fieldset-multiple",
|
|
"title": "Wiele Fieldsetów",
|
|
"description": "Złożone formularze mogą używać wielu elementów <kbd><fieldset></kbd> do organizacji różnych sekcji.<br><br>To poprawia użyteczność długich formularzy jak rejestracja czy koszyk.",
|
|
"task": "Utwórz formularz rejestracji z 2 fieldsetami:<br>1. <code>Dane konta</code> z polami nazwa użytkownika i hasło<br>2. <code>Preferencje</code> z textarea dla bio<br>3. Przycisk wysyłania poza fieldsetami",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<form>\n <fieldset>\n <legend>Account Info</legend>\n <label for=\"username\">Username:</label>\n <input type=\"text\" id=\"username\" name=\"username\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n </fieldset>\n <fieldset>\n <legend>Preferences</legend>\n <label for=\"bio\">Bio:</label>\n <textarea id=\"bio\" name=\"bio\"></textarea>\n </fieldset>\n <button type=\"submit\">Register</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "fieldset", "min": 2 },
|
|
"message": "Utwórz co najmniej 2 fieldsety"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "legend", "min": 2 },
|
|
"message": "Dodaj legend do każdego fieldseta"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "textarea",
|
|
"message": "Dodaj textarea dla bio"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button",
|
|
"message": "Dodaj przycisk wysyłania"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "input", "min": 2 },
|
|
"message": "Dodaj co najmniej 2 pola wprowadzania"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|