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.
84 lines
4.8 KiB
JSON
84 lines
4.8 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-dialog",
|
|
"title": "Dialogi",
|
|
"description": "Twórz okna dialogowe bez bibliotek JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "dialog-basic",
|
|
"title": "Otwórz dialog",
|
|
"description": "Element <kbd><dialog></kbd> tworzy natywne okno modalne. Dodaj atrybut <kbd>open</kbd>, aby je wyświetlić.<br><br>Użyj <kbd><form method=\"dialog\"></kbd> wewnątrz, aby zamknąć je przy wysłaniu formularza - bez JavaScript!",
|
|
"task": "Utwórz dialog z:<br>1. Atrybutem <kbd>open</kbd> aby go wyświetlić<br>2. Elementem <kbd><h2></kbd> z tekstem <code>Witaj!</code><br>3. Elementem <kbd><p></kbd> z wiadomością powitalną<br>4. Elementem <kbd><form method=\"dialog\"></kbd> z przyciskiem zamknięcia",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: #f5f5f5; } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 400px; } dialog::backdrop { background: rgba(0,0,0,0.5); } dialog h2 { margin: 0 0 15px 0; color: #1976d2; } dialog p { color: #666; margin: 0 0 20px 0; } dialog button { background: #1976d2; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } dialog button:hover { background: #1565c0; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<dialog open>\n <h2>Welcome!</h2>\n <p>This is a native HTML dialog element.</p>\n <form method=\"dialog\">\n <button>Close</button>\n </form>\n</dialog>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog",
|
|
"message": "Dodaj element <kbd><dialog></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "dialog", "attr": "open", "value": true },
|
|
"message": "Dodaj atrybut <kbd>open</kbd> aby wyświetlić dialog"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog h2",
|
|
"message": "Dodaj nagłówek <kbd><h2></kbd> wewnątrz dialogu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form[method='dialog']",
|
|
"message": "Dodaj <kbd><form method=\"dialog\"></kbd> do zamknięcia"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog button",
|
|
"message": "Dodaj przycisk zamknięcia wewnątrz formularza"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "dialog-form",
|
|
"title": "Dialog z formularzem",
|
|
"description": "Dialogi mogą zawierać pełne formularze. <kbd>method=\"dialog\"</kbd> sprawia, że formularz zamyka dialog przy wysłaniu zamiast wysyłać dane.<br><br>Ten wzorzec jest idealny dla dialogów potwierdzenia, szybkich wejść lub paneli ustawień.",
|
|
"task": "Utwórz dialog potwierdzenia:<br>1. Dodaj <kbd>open</kbd> aby go wyświetlić<br>2. Element <kbd><h2></kbd> z tekstem <code>Potwierdź usunięcie</code><br>3. Element <kbd><p></kbd> z pytaniem <code>Czy jesteś pewien?</code><br>4. Element <kbd><form method=\"dialog\"></kbd> z przyciskami Anuluj i Usuń",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; min-height: 200px; background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); } dialog { border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 25px; max-width: 350px; text-align: center; } dialog h2 { margin: 0 0 10px 0; color: #c62828; } dialog p { color: #666; margin: 0 0 20px 0; } dialog form { display: flex; gap: 10px; justify-content: center; } dialog button { padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; border: none; } dialog button:first-child { background: #e0e0e0; color: #333; } dialog button:last-child { background: #c62828; color: white; } dialog button:hover { opacity: 0.9; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<dialog open>\n <h2>Confirm Delete</h2>\n <p>Are you sure you want to delete this item?</p>\n <form method=\"dialog\">\n <button value=\"cancel\">Cancel</button>\n <button value=\"delete\">Delete</button>\n </form>\n</dialog>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog[open]",
|
|
"message": "Dodaj <kbd><dialog></kbd> z atrybutem open"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "dialog h2",
|
|
"message": "Dodaj nagłówek do dialogu"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "form[method='dialog']",
|
|
"message": "Dodaj <kbd><form method=\"dialog\"></kbd> dla przycisków"
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "dialog button", "min": 2 },
|
|
"message": "Dodaj co najmniej 2 przyciski (Anuluj i Potwierdź)"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|