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.
103 lines
5.7 KiB
JSON
103 lines
5.7 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-basic",
|
|
"title": "Formularze HTML",
|
|
"description": "Naucz się tworzyć formularze z różnymi typami pól",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "form-structure",
|
|
"title": "Struktura formularza",
|
|
"description": "Każdy formularz potrzebuje wrappera <kbd><form></kbd>. Wewnątrz używaj <kbd><label></kbd> do opisywania pól i <kbd><input></kbd> do wprowadzania danych.<br><br>Atrybut <kbd>for</kbd> w labelach powinien odpowiadać <kbd>id</kbd> pól dla dostępności.",
|
|
"task": "Stwórz formularz z:<br>1. <kbd><label></kbd> z tekstem <code>Imię:</code> i atrybutem <kbd>for=\"name\"</kbd><br>2. Tekstowym <kbd><input></kbd> z atrybutami <kbd>id=\"name\"</kbd> i <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\">Imię:</label>\n <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form",
|
|
"message": "Otocz wszystko elementem <kbd><form></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Dodaj <kbd><label></kbd> dla swojego pola"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input",
|
|
"message": "Dodaj element <kbd><input></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "label", "attr": "for", "value": null },
|
|
"message": "Dodaj atrybut <kbd>for</kbd> do swojego labela"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "id", "value": null },
|
|
"message": "Dodaj atrybut <kbd>id</kbd> do swojego pola"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "input-types",
|
|
"title": "Typy pól",
|
|
"description": "Różne typy pól zapewniają odpowiednie klawiatury i walidację:<br><br><kbd>type=\"text\"</kbd> - Ogólny tekst<br><kbd>type=\"email\"</kbd> - Email z walidacją @<br><kbd>type=\"password\"</kbd> - Ukryte znaki<br><kbd>type=\"number\"</kbd> - Klawiatura numeryczna<br><kbd>type=\"tel\"</kbd> - Klawiatura telefoniczna",
|
|
"task": "Stwórz formularz logowania z dwoma polami:<br>1. Pole email: <kbd><label for=\"email\">Email:</label></kbd> i <kbd><input type=\"email\" id=\"email\"></kbd><br>2. Pole hasła: <kbd><label for=\"password\">Hasło:</label></kbd> i <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\">Hasło:</label>\n <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='email']",
|
|
"message": "Dodaj pole z type=\"email\""
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "input[type='password']",
|
|
"message": "Dodaj pole z type=\"password\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "label", "min": 2 },
|
|
"message": "Dodaj labele dla obu pól"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "submit-button",
|
|
"title": "Przycisk wysyłania",
|
|
"description": "Formularze potrzebują sposobu na wysłanie danych. Użyj:<br><br><kbd><button type=\"submit\"></kbd> - Preferowany, elastyczna zawartość<br><kbd><input type=\"submit\"></kbd> - Prosty przycisk tekstowy<br><br>Tekst przycisku powinien być zorientowany na akcję (np. <code>Zaloguj</code>, 'Zarejestruj', 'Wyślij').",
|
|
"task": "Dodaj przycisk wysyłania do formularza z tekstem <code>Zaloguj</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\">Hasło:</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\">Hasło:</label>\n <input type=\"password\" id=\"password\">\n \n <button type=\"submit\">Zaloguj</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "button[type='submit'], input[type='submit']",
|
|
"message": "Dodaj przycisk wysyłania do formularza"
|
|
},
|
|
{
|
|
"type": "element_text",
|
|
"value": { "selector": "button", "text": "Zaloguj" },
|
|
"message": "Przycisk powinien wyświetlać <kbd>Zaloguj</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|