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.
83 lines
5.4 KiB
JSON
83 lines
5.4 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-marquee",
|
|
"title": "HTML Marquee",
|
|
"description": "Створюйте біжучий текст за допомогою класичного (застарілого але веселого!) елемента marquee",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "marquee-basic",
|
|
"title": "Біжучий текст",
|
|
"description": "Елемент <kbd><marquee></kbd> створює біжучий текст - класика раннього вебу! Хоча він застарілий, все ще працює в більшості браузерів.<br><br>Примітка: Для продакшену використовуйте CSS-анімації. Але для навчання та розваги marquee чудовий!",
|
|
"task": "Створіть простий marquee:<br>1. Додайте елемент <kbd><marquee></kbd><br>2. Помістіть текст всередину, наприклад <code>Ласкаво просимо на мій сайт!</code>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee>Welcome to my website!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Додайте елемент <kbd><marquee></kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-direction",
|
|
"title": "Напрямок та поведінка",
|
|
"description": "Керуйте marquee за допомогою атрибутів:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (за замовчуванням), slide (зупиняється на краю), alternate (відбивається)<br>• <kbd>scrollamount</kbd>: швидкість (за замовчуванням 6)",
|
|
"task": "Створіть marquee що відбивається:<br>1. Додайте елемент <kbd><marquee></kbd><br>2. Встановіть <kbd>behavior=\"alternate\"</kbd> щоб він відбивався<br>3. Додайте веселий текст",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee behavior=\"alternate\">Bounce! Bounce! Bounce!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Додайте елемент <kbd><marquee></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
|
|
"message": "Додайте <kbd>behavior=</kbd>\"alternate\" щоб він відбивався"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-retro",
|
|
"title": "Ретро-стрічка новин",
|
|
"description": "Поєднайте кілька атрибутів marquee для класичного ефекту стрічки новин. Ви навіть можете помістити кілька елементів всередину!<br><br>Пам'ятайте: Це застарілий HTML. Сучасні сайти використовують CSS-анімації, але marquee чудовий для розуміння історії вебу.",
|
|
"task": "Створіть стрічку новин:<br>1. Елемент <kbd><marquee></kbd> з <kbd>direction=\"left\"</kbd><br>2. Встановіть <kbd>scrollamount=\"5\"</kbd> для плавного прокручування<br>3. Додайте всередину заголовок термінових новин",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<marquee direction=\"left\" scrollamount=\"5\">BREAKING NEWS: Marquee element still works in browsers!</marquee>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Додайте елемент <kbd><marquee></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "direction", "value": "left" },
|
|
"message": "Додайте <kbd>direction=</kbd>\"left\" для горизонтального прокручування"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
|
|
"message": "Додайте <kbd>scrollamount=</kbd>\"5\" для плавної швидкості"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|