Michael Czechowski
c560676544
Rewrite ~120 validation error messages across 17 English lesson modules and their localized variants (ar, de, es, pl, uk) to use concept questions, property hints, and directional nudges instead of revealing the exact CSS property-value answers. Priority modules (flexbox, box-model, colors, positioning) fully rewritten. All remaining CSS modules updated. Only message strings changed — no validation logic modifications.
260 lines
18 KiB
JSON
260 lines
18 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "css-basic-selectors",
|
||
"title": "Основи CSS",
|
||
"description": "Вивчіть основні будівельні блоки CSS: властивості, значення та селектори. Цей модуль навчає правилам синтаксису, яких дотримується кожна декларація CSS.",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "css-properties",
|
||
"title": "Властивості CSS",
|
||
"description": "CSS стилізує елементи за допомогою <strong>декларацій</strong> - пар властивостей і значень. Кожна декларація має той самий шаблон:<br><br><pre>property: value;</pre><br><strong>Властивість</strong> - це те, що ви хочете змінити (як <kbd>color</kbd> або <kbd>background</kbd>). <strong>Значення</strong> - це те, на що ви це встановлюєте. Двокрапка їх розділяє, а крапка з комою закінчує рядок.<br><br>Значення бувають різних типів:<br>• <strong>Ключові слова:</strong> <kbd>red</kbd>, <kbd>bold</kbd>, <kbd>center</kbd><br>• <strong>Числа з одиницями:</strong> <kbd>16px</kbd>, <kbd>2rem</kbd>, <kbd>100%</kbd><br>• <strong>Кольори:</strong> <kbd>steelblue</kbd>, <kbd>#ff0000</kbd>",
|
||
"task": "Завершіть декларацію, додавши <kbd>color: coral;</kbd> щоб змінити колір тексту.",
|
||
"previewHTML": "<p class=\"text\">This text should turn coral.</p>",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": ".text {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"previewContainer": "preview-area",
|
||
"solution": "color: coral;",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "color", "expected": "coral" },
|
||
"message": "Яка властивість керує кольором тексту?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "multiple-properties",
|
||
"title": "Кілька властивостей",
|
||
"description": "Правило може мати кілька декларацій. Кожна йде в окремому рядку, і кожна потребує крапки з комою в кінці:<br><br><pre>.box {<br> background: gold;<br> color: navy;<br> padding: 1rem;<br>}</pre><br>Порядок зазвичай не має значення - CSS застосовує всі. При конфліктах перемагає остання.",
|
||
"task": "Додайте дві декларації: <kbd>background: lavender;</kbd> та <kbd>padding: 1rem;</kbd>",
|
||
"previewHTML": "<div class=\"card\">A styled card with background and padding.</div>",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .card { border-radius: 8px; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": ".card {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"previewContainer": "preview-area",
|
||
"solution": "background: lavender;\n padding: 1rem;",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "background", "expected": "lavender" },
|
||
"message": "Перевірте властивість <kbd>background</kbd>"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "padding", "expected": "1rem" },
|
||
"message": "Картка потребує простору всередині її меж"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "type-selectors",
|
||
"title": "Селектори типу",
|
||
"description": "<strong>Селектор</strong> говорить браузеру, які елементи стилізувати. Найпростіший селектор - це <strong>селектор типу</strong> — просто назва HTML-тегу.<br><br><pre>p {<br> color: steelblue;<br>}</pre><br>Це правило націлюється на кожен елемент <kbd><p></kbd> на сторінці. Селектори типу чудово підходять для встановлення базових стилів.",
|
||
"task": "Стилізуйте всі абзаци. Напишіть правило з <kbd>p</kbd> як селектором і встановіть <kbd>color: steelblue</kbd>.",
|
||
"previewHTML": "<article>\n <h2>Fresh Roasted Coffee</h2>\n <p>Our beans are sourced from small farms in Colombia and Ethiopia.</p>\n <p>Each batch is roasted weekly to ensure peak freshness.</p>\n</article>",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": "p {\n color: steelblue;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "p\\s*\\{",
|
||
"message": "Почніть з <kbd>p {</kbd> щоб вибрати абзаци"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "color", "expected": "steelblue" },
|
||
"message": "Яка властивість змінює колір тексту?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "styling-links",
|
||
"title": "Стилізація посилань",
|
||
"description": "Селектори типу працюють для будь-якого HTML-елемента. Селектор <kbd>a</kbd> націлюється на всі посилання на сторінці.<br><br>Посилання мають синій колір і підкреслення за замовчуванням. Ви можете змінити обидва з CSS — використовуйте <kbd>color</kbd> для тексту і <kbd>text-decoration: none</kbd> щоб прибрати підкреслення.",
|
||
"task": "Стилізуйте навігаційні посилання. Напишіть правило з <kbd>a</kbd> як селектором і встановіть <kbd>color: coral</kbd>.",
|
||
"previewHTML": "<nav>\n <a href=\"#\">Home</a>\n <a href=\"#\">Menu</a>\n <a href=\"#\">About</a>\n <a href=\"#\">Contact</a>\n</nav>",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } nav { display: flex; gap: 1.5rem; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": "a {\n color: coral;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "a\\s*\\{",
|
||
"message": "Почніть з <kbd>a {</kbd> щоб вибрати посилання"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "color", "expected": "coral" },
|
||
"message": "Яке значення дає теплий червонувато-оранжевий колір?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "class-selectors",
|
||
"title": "Селектори класів",
|
||
"description": "Селектори типу стилізують <em>усі</em> елементи цього типу. Але що якщо ви хочете стилізувати лише деякі з них?<br><br><strong>Селектори класів</strong> націлюються на елементи з певним атрибутом <kbd>class</kbd>. Вони починаються з крапки:<br><br><pre>.badge {<br> background: coral;<br>}</pre><br>Це стилізує лише елементи з <kbd>class=\"badge\"</kbd>.",
|
||
"task": "Стилізуйте значок сповіщень. Напишіть правило з <kbd>.badge</kbd> як селектором і встановіть <kbd>background: tomato</kbd>.",
|
||
"previewHTML": "<header>\n <h1>Dashboard</h1>\n <span class=\"badge\">3</span>\n</header>\n<p>You have new notifications waiting.</p>",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": ".badge {\n background: tomato;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.badge\\s*\\{",
|
||
"message": "Почніть з <kbd>.badge {</kbd> (не забудьте крапку!)"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "background", "expected": "tomato" },
|
||
"message": "Значку потрібен яскравий червоний фон"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "button-variants",
|
||
"title": "Варіанти кнопок",
|
||
"description": "Елементи можуть мати кілька класів. Коли ви з'єднуєте селектори класів без пробілів, ви націлюєтесь на елементи, які мають <em>усі</em> ці класи:<br><br><pre>.btn.primary {<br> background: steelblue;<br>}</pre><br>Це націлюється на елементи з <kbd>class=\"btn primary\"</kbd>, а не лише <kbd>.btn</kbd> або лише <kbd>.primary</kbd>.",
|
||
"task": "Стилізуйте основну кнопку. Напишіть правило з <kbd>.btn.primary</kbd> як селектором і встановіть <kbd>background: steelblue</kbd>.",
|
||
"previewHTML": "<div class=\"actions\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn primary\">Save Changes</button>\n</div>",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: #e0e0e0; color: #333; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": ".btn.primary {\n background: steelblue;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.btn\\.primary\\s*\\{",
|
||
"message": "Використовуйте <kbd>.btn.primary {</kbd> (без пробілу між класами)"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "background", "expected": "steelblue" },
|
||
"message": "Яка властивість встановлює колір заливки кнопки?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "specific-elements",
|
||
"title": "Націлювання на конкретні елементи",
|
||
"description": "Іноді ви хочете, щоб клас виглядав по-різному на різних елементах. Поєднайте селектор типу з селектором класу (без пробілу) щоб бути більш специфічним:<br><br><pre>a.btn {<br> text-decoration: none;<br>}</pre><br>Це стилізує лише елементи <kbd><a></kbd> з класом <kbd>btn</kbd>, а не елементи <kbd><button></kbd> з цим класом.",
|
||
"task": "Приберіть підкреслення з кнопок-посилань. Напишіть правило з <kbd>a.btn</kbd> як селектором і встановіть <kbd>text-decoration: none</kbd>.",
|
||
"previewHTML": "<div class=\"actions\">\n <button class=\"btn\">Regular Button</button>\n <a href=\"#\" class=\"btn\">Link Button</a>\n</div>",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .actions { display: flex; gap: 0.75rem; align-items: center; } .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; background: steelblue; color: white; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": "a.btn {\n text-decoration: none;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "a\\.btn\\s*\\{",
|
||
"message": "Використовуйте <kbd>a.btn {</kbd> (тип + клас, без пробілу)"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "text-decoration", "expected": "none" },
|
||
"message": "Яка властивість керує підкресленням посилань?"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "grouping-selectors",
|
||
"title": "Групування селекторів",
|
||
"description": "Коли кільком елементам потрібні однакові стилі, перелічіть їх через кому. Це тримає ваш CSS чистим і підтримуваним.<br><br><pre>h1, h2, h3 {<br> color: steelblue;<br>}</pre><br>Це застосовує однаковий колір до всіх трьох рівнів заголовків в одному правилі.",
|
||
"task": "Стилізуйте всі заголовки однаково. Додайте <kbd>color: steelblue</kbd> до згрупованого селектора <kbd>h1, h2, h3</kbd>.",
|
||
"previewHTML": "<article><h1>Main Title</h1><p>Introduction paragraph with some text.</p><h2>Section Heading</h2><p>More content here.</p><h3>Subsection</h3><p>Final paragraph.</p></article>",
|
||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } p { color: #555; line-height: 1.6; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "h1, h2, h3 {\n ",
|
||
"initialCode": "",
|
||
"codeSuffix": "\n}",
|
||
"previewContainer": "preview-area",
|
||
"solution": "color: steelblue;",
|
||
"validations": [
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "color", "expected": "steelblue" },
|
||
"message": "Перевірте властивість <kbd>color</kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "descendant-selectors",
|
||
"title": "Селектори нащадків",
|
||
"description": "Націлюйтесь на елементи всередині інших елементів використовуючи пробіл між селекторами. Це один з найкорисніших патернів у CSS.<br><br><pre>.nav a {<br> color: white;<br>}</pre><br>Це стилізує лише посилання всередині <kbd>.nav</kbd>, залишаючи інші посилання без змін.",
|
||
"task": "Стилізуйте навігаційні посилання по-іншому. Напишіть правило з <kbd>.nav a</kbd> як селектором і встановіть <kbd>color: white</kbd>.",
|
||
"previewHTML": "<nav class=\"nav\"><a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Contact</a></nav><p>Read more in our <a href=\"#\">documentation</a>.</p>",
|
||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": ".nav a {\n color: white;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.nav\\s+a\\s*\\{",
|
||
"message": "Використовуйте <kbd>.nav a {</kbd> (пробіл між .nav і a)"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "color", "expected": "white" },
|
||
"message": "Посилання мають виділятися на синьому фоні"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "nested-styling",
|
||
"title": "Вкладені стилі",
|
||
"description": "Селектори нащадків дозволяють створювати контекстні стилі. Один і той самий елемент може виглядати по-різному залежно від того, де він з'являється.<br><br>Наприклад, абзаци в <kbd>.card</kbd> можуть бути меншими ніж абзаци в <kbd>article</kbd>.",
|
||
"task": "Зробіть абзаци всередині картки меншими. Напишіть правило з <kbd>.card p</kbd> як селектором і встановіть <kbd>font-size: 0.9rem</kbd>.",
|
||
"previewHTML": "<article><h2>Article Title</h2><p>This is a regular article paragraph with normal-sized text for comfortable reading.</p><div class=\"card\"><strong>Quick Tip</strong><p>Card paragraphs should be slightly smaller to fit the compact design.</p></div><p>Back to regular article text here.</p></article>",
|
||
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } article { max-width: 500px; } h2 { color: steelblue; margin-top: 0; } p { line-height: 1.6; color: #444; } .card { background: #f0f4f8; padding: 1rem; border-radius: 8px; border-left: 4px solid steelblue; } .card strong { color: steelblue; display: block; margin-bottom: 0.5rem; }",
|
||
"sandboxCSS": "",
|
||
"codePrefix": "",
|
||
"initialCode": "",
|
||
"codeSuffix": "",
|
||
"previewContainer": "preview-area",
|
||
"solution": ".card p {\n font-size: 0.9rem;\n}",
|
||
"validations": [
|
||
{
|
||
"type": "regex",
|
||
"value": "\\.card\\s+p\\s*\\{",
|
||
"message": "Використовуйте <kbd>.card p {</kbd> (пробіл між .card і p)"
|
||
},
|
||
{
|
||
"type": "property_value",
|
||
"value": { "property": "font-size", "expected": "0.9rem" },
|
||
"message": "Перевірте властивість <kbd>font-size</kbd> — текст має бути трохи меншим"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|