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.
79 lines
4.3 KiB
JSON
79 lines
4.3 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-datalist",
|
|
"title": "Datalist",
|
|
"description": "Dodaj sugestie do pól tekstowych bez JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "datalist-basic",
|
|
"title": "Pole z sugestiami",
|
|
"description": "Element <kbd><datalist></kbd> dostarcza sugestie autouzupełniania dla pól. Połącz go używając atrybutu <kbd>list</kbd> na polu, pasującego do <kbd>id</kbd> datalist.<br><br>Użytkownicy mogą nadal pisać dowolnie - sugestie to tylko pomocnicy!",
|
|
"task": "Utwórz selektor przeglądarki:<br>1. Dodaj <kbd><label></kbd> z tekstem <code>Przeglądarka:</code><br>2. Dodaj <kbd><input></kbd> z <kbd>list=\"browsers\"</kbd><br>3. Dodaj <kbd><datalist id=\"browsers\"></kbd> z opcjami Chrome, Firefox i Safari",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"browser\">Browser:</label>\n<input type=\"text\" id=\"browser\" list=\"browsers\">\n<datalist id=\"browsers\">\n <option value=\"Chrome\">\n <option value=\"Firefox\">\n <option value=\"Safari\">\n</datalist>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "datalist",
|
|
"message": "Dodaj element <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "list", "value": "browsers" },
|
|
"message": "Połącz pole z datalist używając <kbd>list=</kbd>\"browsers\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "option", "min": 3 },
|
|
"message": "Dodaj co najmniej 3 elementy <kbd><option></kbd> wewnątrz <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Dodaj <kbd><label></kbd> dla pola"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "datalist-countries",
|
|
"title": "Selektor krajów",
|
|
"description": "Datalist świetnie sprawdza się przy długich listach jak kraje. Użytkownicy mogą pisać, aby natychmiast filtrować sugestie.<br><br>Atrybut <kbd>value</kbd> określa, co zostanie wpisane, a po nim możesz dodać tekst wyświetlany.",
|
|
"task": "Utwórz pole kraju:<br>1. Dodaj <kbd><label></kbd> z tekstem <code>Kraj:</code><br>2. Dodaj <kbd><input></kbd> z <kbd>list=\"countries\"</kbd><br>3. Dodaj <kbd><datalist id=\"countries\"></kbd> z co najmniej 4 opcjami krajów",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"country\">Country:</label>\n<input type=\"text\" id=\"country\" list=\"countries\" placeholder=\"Start typing...\">\n<datalist id=\"countries\">\n <option value=\"Germany\">\n <option value=\"France\">\n <option value=\"Spain\">\n <option value=\"Italy\">\n</datalist>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "datalist",
|
|
"message": "Dodaj element <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "datalist", "attr": "id", "value": "countries" },
|
|
"message": "Ustaw <kbd>id=</kbd>\"countries\" w datalist"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "list", "value": "countries" },
|
|
"message": "Połącz pole używając <kbd>list=</kbd>\"countries\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "option", "min": 4 },
|
|
"message": "Dodaj co najmniej 4 opcje krajów"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|