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.
98 lines
6.7 KiB
JSON
98 lines
6.7 KiB
JSON
{
|
||
"$schema": "../../schemas/code-crispies-module-schema.json",
|
||
"id": "html-details-summary",
|
||
"title": "HTML Details & Summary",
|
||
"description": "Створюйте розгортувані секції без JavaScript",
|
||
"mode": "html",
|
||
"difficulty": "beginner",
|
||
"lessons": [
|
||
{
|
||
"id": "details-summary-basic",
|
||
"title": "Перший віджет",
|
||
"description": "Елемент <kbd><details></kbd> створює згортувану секцію. Елемент <kbd><summary></kbd> надає клікабельний заголовок.<br><br>Натисніть на summary, щоб показати прихований вміст - без JavaScript!",
|
||
"task": "Створіть елемент <kbd><details></kbd> з:<br>1. Елементом <kbd><summary></kbd> з текстом <code>Click to reveal</code><br>2. Елементом <kbd><p></kbd> з текстом <code>This content was hidden!</code>",
|
||
"previewHTML": "",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
|
||
"sandboxCSS": "",
|
||
"initialCode": "",
|
||
"solution": "<details>\n <summary>Click to reveal</summary>\n <p>This content was hidden!</p>\n</details>",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "element_exists",
|
||
"value": "details",
|
||
"message": "Додайте елемент <kbd><details></kbd>"
|
||
},
|
||
{
|
||
"type": "element_exists",
|
||
"value": "summary",
|
||
"message": "Додайте <kbd><summary></kbd> всередину details"
|
||
},
|
||
{
|
||
"type": "parent_child",
|
||
"value": { "parent": "details", "child": "summary" },
|
||
"message": "Елемент <kbd><summary></kbd> має бути всередині <kbd><details></kbd>"
|
||
},
|
||
{
|
||
"type": "parent_child",
|
||
"value": { "parent": "details", "child": "p" },
|
||
"message": "Додайте <kbd><p></kbd> всередину <kbd><details></kbd> для прихованого вмісту"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "details-open-attribute",
|
||
"title": "Розгорнуто за замовчуванням",
|
||
"description": "За замовчуванням <kbd><details></kbd> закритий. Додайте атрибут <kbd>open</kbd>, щоб показати вміст спочатку.<br><br>Це булевий атрибут - просто додайте <kbd>open</kbd> без значення.",
|
||
"task": "Додайте атрибут <kbd>open</kbd> до елемента <kbd><details></kbd>, щоб показати вміст за замовчуванням.",
|
||
"previewHTML": "",
|
||
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; } summary { font-weight: 600; cursor: pointer; } details p { margin-top: 15px; color: #666; }",
|
||
"sandboxCSS": "",
|
||
"initialCode": "<details>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
||
"solution": "<details open>\n <summary>FAQ: What is HTML5?</summary>\n <p>HTML5 is the latest version of the HTML standard with new semantic elements and APIs.</p>\n</details>",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "attribute_value",
|
||
"value": { "selector": "details", "attr": "open", "value": true },
|
||
"message": "Додайте атрибут <kbd>open</kbd> до <kbd><details></kbd>"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"id": "faq-accordion",
|
||
"title": "FAQ акордеон",
|
||
"description": "Кілька елементів <kbd><details></kbd> створюють FAQ у стилі акордеону. Кожне питання можна розгортати незалежно.<br><br><b>Порада:</b> Введіть <kbd>details*3>summary+p</kbd> і натисніть Tab для розгортання Emmet. <kbd>*3</kbd> створює 3 елементи, <kbd>></kbd> вкладає всередину, <kbd>+</kbd> додає сусідні.",
|
||
"task": "Створіть секцію FAQ з:<br>1. Заголовком <kbd><h1></kbd> з текстом <code>Frequently Asked Questions</code><br>2. Трьома елементами <kbd><details></kbd>, кожен з питанням у <kbd><summary></kbd> та відповіддю у <kbd><p></kbd>",
|
||
"previewHTML": "",
|
||
"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
|
||
"sandboxCSS": "",
|
||
"initialCode": "",
|
||
"solution": "<h1>Frequently Asked Questions</h1>\n\n<details>\n <summary>What is HTML5?</summary>\n <p>HTML5 is the latest version of HTML with new semantic elements and APIs.</p>\n</details>\n\n<details>\n <summary>Do I need JavaScript?</summary>\n <p>Many interactive features work with pure HTML5, no JavaScript required!</p>\n</details>\n\n<details>\n <summary>Is this accessible?</summary>\n <p>Yes! Native HTML elements have built-in keyboard and screen reader support.</p>\n</details>",
|
||
"previewContainer": "preview-area",
|
||
"validations": [
|
||
{
|
||
"type": "element_exists",
|
||
"value": "h1",
|
||
"message": "Додайте заголовок <kbd><h1></kbd> для назви FAQ"
|
||
},
|
||
{
|
||
"type": "element_count",
|
||
"value": { "selector": "details", "min": 3 },
|
||
"message": "Створіть принаймні 3 елементи <kbd><details></kbd> для FAQ"
|
||
},
|
||
{
|
||
"type": "element_count",
|
||
"value": { "selector": "summary", "min": 3 },
|
||
"message": "Кожен <kbd><details></kbd> потребує <kbd><summary></kbd> для питання"
|
||
},
|
||
{
|
||
"type": "element_count",
|
||
"value": { "selector": "details p", "min": 3 },
|
||
"message": "Кожен <kbd><details></kbd> потребує <kbd><p></kbd> для відповіді"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|