Michael Czechowski
1a5c09b750
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
5.0 KiB
JSON
79 lines
5.0 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "html-datalist",
|
||
"title": "Datalist",
|
||
"description": "Додайте підказки для текстових полів без JavaScript",
|
||
"mode": "html",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "datalist-basic",
|
||
"title": "Поле з підказками",
|
||
"description": "Елемент <kbd><datalist></kbd> надає підказки автозаповнення для полів. З'єднайте його за допомогою атрибута <kbd>list</kbd> на полі, що відповідає <kbd>id</kbd> datalist.<br><br>Користувачі все одно можуть вводити вільно - підказки лише помічники!",
|
||
"task": "Створіть селектор браузера:<br>1. Додайте <kbd><label></kbd> з текстом <code>Браузер:</code><br>2. Додайте <kbd><input></kbd> з <kbd>list=\"browsers\"</kbd><br>3. Додайте <kbd><datalist id=\"browsers\"></kbd> з варіантами Chrome, Firefox та 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": "Додайте елемент <kbd><datalist></kbd>"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "input", "attr": "list", "value": "browsers" },
|
||
"message": "З'єднайте поле з datalist за допомогою <kbd>list=</kbd>\"browsers\""
|
||
},
|
||
{
|
||
"type": "element_count",
|
||
"value": { "selector": "option", "min": 3 },
|
||
"message": "Додайте принаймні 3 елементи <kbd><option></kbd> всередину <kbd><datalist></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "label",
|
||
"message": "Додайте <kbd><label></kbd> для поля"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "datalist-countries",
|
||
"title": "Селектор країн",
|
||
"description": "Datalist чудово працює для довгих списків, як країни. Користувачі можуть вводити, щоб миттєво фільтрувати підказки.<br><br>Атрибут <kbd>value</kbd> - це те, що вводиться, і ви можете додати текст для відображення після нього.",
|
||
"task": "Створіть поле країни:<br>1. Додайте <kbd><label></kbd> з текстом <code>Країна:</code><br>2. Додайте <kbd><input></kbd> з <kbd>list=\"countries\"</kbd><br>3. Додайте <kbd><datalist id=\"countries\"></kbd> з принаймні 4 варіантами країн",
|
||
"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": "Додайте елемент <kbd><datalist></kbd>"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "datalist", "attr": "id", "value": "countries" },
|
||
"message": "Встановіть <kbd>id=</kbd>\"countries\" в datalist"
|
||
},
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "input", "attr": "list", "value": "countries" },
|
||
"message": "З'єднайте поле за допомогою <kbd>list=</kbd>\"countries\""
|
||
},
|
||
{
|
||
"type": "element_count",
|
||
"value": { "selector": "option", "min": 4 },
|
||
"message": "Додайте принаймні 4 варіанти країн"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|