95 lines
10 KiB
JSON
95 lines
10 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "html-marquee",
|
|
"title": "HTML Marquee",
|
|
"description": "Create scrolling text with the classic (deprecated but fun!) marquee element",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "marquee-basic",
|
|
"title": "Scrolling Text",
|
|
"description": "The <kbd><marquee></kbd> element creates scrolling text - a classic from the early web! While deprecated, it still works in most browsers.<br><br>Note: For production, use CSS animations instead. But for learning and fun, marquee is great!",
|
|
"task": "Create a simple marquee:<br>1. Add a <kbd><marquee></kbd> element<br>2. Put some text inside like <code>Welcome to my website!</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",
|
|
"concept": {
|
|
"explanation": "Marquee is a non-standard HTML element introduced by Netscape in the 1990s that created auto-scrolling text without JavaScript—browsers handled animation entirely natively. While deprecated by W3C standards (never officially standardized), browsers still support it for backward compatibility with legacy websites. The element teaches an important web history lesson: browser vendors sometimes implement features unilaterally, and if popular enough, those features persist even after standards bodies reject them. Modern development uses CSS animations (`@keyframes` + `animation`) or JavaScript for scrolling effects, giving developers more control and adhering to web standards, but marquee demonstrates how declarative HTML can embed behavior.",
|
|
"diagram": "Marquee: A Web History Lesson\n\nTimeline:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n1995 → Netscape adds <marquee>\n1996 → IE copies it (vendor wars)\n2000s → W3C: \"This is non-standard\"\n2024 → Still works! (legacy compat)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nHow It Works:\n<marquee>Text</marquee>\n ↓\nBrowser sees marquee element\n ↓\nNative animation engine starts\n ↓\nText scrolls without JS/CSS\n\nModern Equivalent:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<div class=\"scroll\">Text</div>\n\n.scroll {\n animation: scroll 10s linear infinite;\n}\n\n@keyframes scroll {\n from { transform: translateX(100%); }\n to { transform: translateX(-100%); }\n}\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nWhy Deprecated?\n✗ Non-standard (vendor-specific)\n✗ Accessibility issues (motion)\n✗ Limited control\n✗ No standard API\n\n✓ Use CSS animations instead\n✓ Add prefers-reduced-motion\n✓ Full control over timing/easing"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Add a <kbd><marquee></kbd> element"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-direction",
|
|
"title": "Direction & Behavior",
|
|
"description": "Control the marquee with attributes:<br>• <kbd>direction</kbd>: left, right, up, down<br>• <kbd>behavior</kbd>: scroll (default), slide (stops at edge), alternate (bounces)<br>• <kbd>scrollamount</kbd>: speed (default is 6)",
|
|
"task": "Create a bouncing marquee:<br>1. Add a <kbd><marquee></kbd> element<br>2. Set <kbd>behavior=\"alternate\"</kbd> to make it bounce<br>3. Add some fun text",
|
|
"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",
|
|
"concept": {
|
|
"explanation": "Marquee attributes control animation parameters through HTML rather than CSS or JavaScript—this declarative approach was innovative for the 1990s but inflexible by modern standards. The behavior attribute changes motion physics: 'scroll' creates continuous looping (exits one side, enters opposite), 'slide' stops when reaching the edge (one-time animation), and 'alternate' bounces back and forth (ping-pong effect). Direction controls axis (left/right for horizontal, up/down for vertical), and scrollamount sets pixels moved per frame (higher = faster). These attributes demonstrate early attempts at animation control before CSS animations existed, showing how HTML sometimes blurred the line between structure and presentation.",
|
|
"diagram": "Marquee Behaviors\n\nbehavior=\"scroll\" (default):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n→ Text → → → → → (loops)\n\nbehavior=\"slide\":\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n→ Text → → STOP\n(animates once, stops at edge)\n\nbehavior=\"alternate\":\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n→ Text → → ← ← Text ← ←\n(bounces back and forth)\n\nDirection:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\ndirection=\"left\" → Text moves ←\ndirection=\"right\" → Text moves →\ndirection=\"up\" → Text moves ↑\ndirection=\"down\" → Text moves ↓\n\nSpeed Control:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nscrollamount=\"1\" → Slow (1px/frame)\nscrollamount=\"6\" → Default\nscrollamount=\"20\" → Fast (20px/frame)\n\nCombinations:\n<marquee direction=\"right\" \n behavior=\"alternate\"\n scrollamount=\"10\">\n Bounces horizontally at 10px/frame\n</marquee>"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Add a <kbd><marquee></kbd> element"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
|
|
"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "marquee-retro",
|
|
"title": "Retro News Ticker",
|
|
"description": "Combine multiple marquee attributes for a classic news ticker effect. You can even put multiple elements inside!<br><br>Remember: This is deprecated HTML. Modern sites use CSS animations, but marquee is great for understanding web history.",
|
|
"task": "Create a news ticker:<br>1. A <kbd><marquee></kbd> with <kbd>direction=\"left\"</kbd><br>2. Set <kbd>scrollamount=\"5\"</kbd> for smooth scrolling<br>3. Add a breaking news headline inside",
|
|
"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",
|
|
"concept": {
|
|
"explanation": "Marquee represents a cautionary tale about web standards versus implementation reality: despite being deprecated for over a decade and never formally standardized, browsers maintain support because removing it would break thousands of legacy websites. This teaches the web's core principle of \"don't break the web\"—backward compatibility trumps clean standards. Modern developers should avoid marquee for accessibility reasons (motion can trigger vestibular disorders, and it ignores prefers-reduced-motion), lack of control (can't pause on hover, sync with other animations, or adjust timing curves), and semantic incorrectness (mixing behavior into structure). Instead, CSS animations provide the same visual effects with full control, accessibility hooks, and standards compliance.",
|
|
"diagram": "Legacy Compat vs Modern Standards\n\nThe \"Don't Break the Web\" Principle:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n1995 → Site uses <marquee>\n2024 → Site still online (unchanged)\n → Browser must still support it\n → Can't remove deprecated feature\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nAccessibility Issues:\n✗ Triggers motion sickness\n✗ Ignores prefers-reduced-motion\n✗ Can't pause on hover\n✗ Distracts from content\n✗ Not keyboard-accessible\n\nModern Replacement:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nHTML:\n<div class=\"ticker\">BREAKING NEWS</div>\n\nCSS:\n@media (prefers-reduced-motion: no-preference) {\n .ticker {\n animation: scroll 10s linear infinite;\n }\n}\n\n@keyframes scroll {\n from { transform: translateX(100%); }\n to { transform: translateX(-100%); }\n}\n\n.ticker:hover {\n animation-play-state: paused;\n}\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nLesson Learned:\n✓ Standards matter\n✓ Accessibility first\n✓ Use CSS for presentation\n✓ Don't mix behavior into HTML\n✓ Respect user preferences"
|
|
},
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "marquee",
|
|
"message": "Add a <kbd><marquee></kbd> element"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "direction", "value": "left" },
|
|
"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
|
|
"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|