public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

Compare commits

base: public:004-pedagogical-messages
Branches Tags
public:main public:012-filters-tasks public:009-colors-boxmodel-tasks public:feat/impl-feature-20260328-200101-ecae public:004-validation-messages public:004-pedagogical-messages public:003-flexbox-task-wording public:feat/impl-feature-20260328-133515-7069 public:autoclaude public:feature/new-lessons public:feature/section-color-coding
..
compare: public:feat/impl-feature-20260328-133515-7069
Branches Tags
public:main public:012-filters-tasks public:009-colors-boxmodel-tasks public:feat/impl-feature-20260328-200101-ecae public:004-validation-messages public:004-pedagogical-messages public:003-flexbox-task-wording public:feat/impl-feature-20260328-133515-7069 public:autoclaude public:feature/new-lessons public:feature/section-color-coding

1 Commits
004-pedago ... feat/impl-

Author SHA1 Message Date
Michael Czechowski
26b9b99937 feat: add JavaScript lesson section with starter lessons and sidebar section grouping headers 
Implementation following plan:
- S01: Update JSON schema to support 'javascript' mode
- S02: Install @codemirror/lang-javascript dependency
- S03: Define JavaScript section in sections.js
- S04: Create 3 JavaScript lesson JSON files (variables, DOM, events)
- S05: Add JavaScript validation support in validator.js
- S06: Add JavaScript preview rendering in LessonEngine.js
- S07: Add JavaScript CodeMirror mode and editor config
- S08: Register JavaScript modules in all language stores
- S09: Add JavaScript section to landing page, navigation, and app config
- S10: Add sidebar section grouping headers with category mapping
- S11: Update tests for JavaScript mode and section headers
 2026-03-28 14:03:45 +01:00
77 changed files with 1330 additions and 2744 deletions
Expand all files Collapse all files

9
.claude/settings.json
View File

@@ -1,6 +1,15 @@
{
"permissions": {
"allow": [
"Bash(git add:*)",
"Bash(git commit:*)",
"Bash(git push:*)",
"Bash(npm run build:*)",
"Bash(grep:*)",
"Bash(npm run format.lessons:*)",
"Bash(xargs:*)",
"Bash(cat:*)",
"Bash(prettier --write:*)"
],
"deny": ["Read(./.env)", "Read(./.env.*)", "Read(./secrets/**)"]
},

13
.gitignore vendored
View File

@@ -7,15 +7,4 @@ coverage
.env.local
# Claude Code local settings (user-specific)
.claude/settings.local.json
.claude_settings.json
# Auto-Claude
.auto-claude
.worktrees
# Wave ephemeral data
.wave/workspaces
.wave/traces
.wave/artifacts
.wave/output
.claude/settings.local.json

22
lessons/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Which property controls text color?"
"message": "Add <kbd>color: coral;</kbd>"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "Check the <kbd>background</kbd> property"
"message": "Add <kbd>background: lavender;</kbd>"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "The card needs space inside its edges"
"message": "Add <kbd>padding: 1rem;</kbd>"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Which property changes text color?"
"message": "Set <kbd>color: steelblue</kbd>"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "What value gives a warm, reddish-orange color?"
"message": "Set <kbd>color: coral</kbd>"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "The badge needs a bright red background"
"message": "Set <kbd>background: tomato</kbd>"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "Which property sets the button's fill color?"
"message": "Set <kbd>background: steelblue</kbd>"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "Which property controls the underline on links?"
"message": "Set <kbd>text-decoration: none</kbd>"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Check the <kbd>color</kbd> property"
"message": "Set <kbd>color: steelblue</kbd>"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "The links need to stand out against the blue background"
"message": "Set <kbd>color: white</kbd>"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "Check the <kbd>font-size</kbd> property — the text should be slightly smaller"
"message": "Set <kbd>font-size: 0.9rem</kbd>"
}
]
}

12
lessons/00-basics.json
View File

@@ -147,7 +147,7 @@
"property": "padding",
"expected": "20px"
},
"message": "How much breathing room does the content need? Re-read the task for the exact size",
"message": "Set the padding value to <kbd>20px</kbd>",
"options": {
"exact": true
}
@@ -181,7 +181,7 @@
"property": "margin-bottom",
"expected": "30px"
},
"message": "How much space should separate the title from the content below? Check the task for the amount",
"message": "Set the margin-bottom value to <kbd>30px</kbd>",
"options": {
"exact": true
}
@@ -212,7 +212,7 @@
{
"type": "regex",
"value": "border:\\s*2px\\s+solid\\s+blue",
"message": "The <kbd>border</kbd> shorthand takes three parts: width, style, and color",
"message": "Set the border to <kbd>2px solid blue</kbd>",
"options": {
"caseSensitive": false
}
@@ -246,7 +246,7 @@
"property": "justify-content",
"expected": "center"
},
"message": "How do you center items along the main axis?",
"message": "Set <kbd>justify-content</kbd> to <kbd>center</kbd>",
"options": {
"exact": true
}
@@ -265,7 +265,7 @@
"property": "align-items",
"expected": "center"
},
"message": "Which property centers items along the cross axis?",
"message": "Set <kbd>align-items</kbd> to <kbd>center</kbd>",
"options": {
"exact": true
}
@@ -327,7 +327,7 @@
{
"type": "regex",
"value": "font-family:\\s*Courier,\\s*monospace",
"message": "A font stack lists preferred fonts first, followed by a generic fallback, separated by commas",
"message": "Set the font-family to <kbd>Courier, monospace</kbd>",
"options": {
"caseSensitive": false
}

16
lessons/01-advanced-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "regex",
"value": "^input\\[type=\"text\"\\]\\s*{",
"message": "Which attribute selector syntax targets inputs with a specific type? Check the square-bracket notation from the description.",
"message": "Use <kbd>input[type=\"text\"] { … }</kbd> as your attribute selector",
"options": {
"caseSensitive": true
}
@@ -85,7 +85,7 @@
{
"type": "regex",
"value": "^a\\[href\\^=\"https\"\\]\\s*{",
"message": "Which partial-match attribute selector targets values that <em>start with</em> a given string? Combine the element name with that selector.",
"message": "Use <kbd>a[href^=\"https\"] { … }</kbd> as your attribute selector to target HTTPS links",
"options": {
"caseSensitive": true
}
@@ -145,7 +145,7 @@
{
"type": "regex",
"value": "^\\.main-nav\\s*>\\s*li\\s*{",
"message": "Which combinator selects only <em>direct</em> children, skipping deeper descendants? Place it between the parent and child selectors.",
"message": "Use <kbd>.main-nav > li { … }</kbd> with the child combinator to target only direct children",
"options": {
"caseSensitive": true
}
@@ -203,7 +203,7 @@
{
"type": "regex",
"value": "^nav\\s+a\\s*{",
"message": "The descendant combinator is the simplest one — what character separates a parent selector from a descendant selector?",
"message": "Use <kbd>nav a</kbd> with a space between nav and a",
"options": {
"caseSensitive": true
}
@@ -261,7 +261,7 @@
{
"type": "regex",
"value": "^h2\\s*\\+\\s*p\\s*{",
"message": "Which combinator targets the element <em>immediately</em> following a sibling? Place it between the two element selectors.",
"message": "Use <kbd>h2 + p</kbd> with the adjacent sibling combinator (+)",
"options": {
"caseSensitive": true
}
@@ -319,7 +319,7 @@
{
"type": "regex",
"value": "^h3\\s*~\\s*p\\s*{",
"message": "Which combinator selects <em>all</em> later siblings, not just the one right next to it? Place it between the two element selectors.",
"message": "Use <kbd>h3 ~ p</kbd> with the general sibling combinator (~)",
"options": {
"caseSensitive": true
}
@@ -377,7 +377,7 @@
{
"type": "regex",
"value": "^button:hover\\s*{",
"message": "Which pseudo-class activates when the cursor is over an element? Attach it to the button selector with a colon.",
"message": "Use <kbd>button:hover</kbd> to target buttons on hover",
"options": {
"caseSensitive": true
}
@@ -435,7 +435,7 @@
{
"type": "regex",
"value": "^li:first-child\\s*{",
"message": "Which pseudo-class selects an element only when it is the <em>first</em> child of its parent? Attach it to the <kbd>li</kbd> selector.",
"message": "Use <kbd>li:first-child</kbd> to target first list items",
"options": {
"caseSensitive": true
}

20
lessons/01-box-model.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Which property adds space between an element's content and its border?"
"message": "Set <kbd>padding: 1rem</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "Use the <kbd>border-left</kbd> shorthand with width, style, and color values",
"message": "Set <kbd>border-left: 4px solid steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "Which property creates space below an element, pushing neighbors away?"
"message": "Set <kbd>margin-bottom: 1rem</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "Which <kbd>box-sizing</kbd> value includes padding and border in the element's total width?"
"message": "Set <kbd>box-sizing: border-box</kbd>"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "Use the <kbd>padding</kbd> shorthand with two values: vertical then horizontal",
"message": "Set <kbd>padding: 8px 1rem</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "Use <kbd>margin</kbd> with a keyword that auto-calculates equal left and right spacing",
"message": "Set <kbd>margin: 0 auto</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "Which <kbd>border-radius</kbd> percentage creates a perfect circle from a square element?"
"message": "Set <kbd>border-radius: 50%</kbd>"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Add inner spacing to the notification card"
"message": "Set <kbd>padding: 1rem</kbd>"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "Add a left border accent using the <kbd>border-left</kbd> shorthand",
"message": "Set <kbd>border-left: 4px solid coral</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "Round the corners slightly with <kbd>border-radius</kbd>"
"message": "Set <kbd>border-radius: 4px</kbd>"
}
]
}

8
lessons/03-colors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "background-color", "expected": "seashell" },
"message": "Which property sets the fill color behind an element's content area?"
"message": "Set <kbd>background-color: seashell</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Which CSS property changes the color of text content?"
"message": "Set <kbd>color: coral</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "border-color", "expected": "coral" },
"message": "Which property changes just the color of an existing border?"
"message": "Set <kbd>border-color: coral</kbd>"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "background-color", "expected": "#ffd700" },
"message": "Set the <kbd>background-color</kbd> using a hex code format"
"message": "Set <kbd>background-color: #ffd700</kbd>"
}
]
}

2
lessons/04-typography.json
View File

@@ -142,7 +142,7 @@
{
"type": "contains",
"value": "2px 2px",
"message": "How far should the shadow move horizontally and vertically?"
"message": "Set offset to <kbd>2px 2px</kbd>"
}
]
}

6
lessons/05-units-variables.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "Which property caps an element's width? Try a <kbd>rem</kbd> value for readable line length."
"message": "Set <kbd>max-width: 40rem</kbd>"
}
]
},
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "Use <kbd>calc()</kbd> to subtract the sidebar's fixed width from the full container width.",
"message": "Set <kbd>width: calc(100% - 200px)</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "Which property ensures a minimum height? Use a viewport unit for full-screen coverage."
"message": "Set <kbd>min-height: 100vh</kbd>"
}
]
}

16
lessons/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Specify which property to transition and how long it should take.",
"message": "Set <kbd>transition: background-color 0.3s</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Which easing keyword starts slow, speeds up, then slows down again?"
"message": "Set timing to <kbd>ease-in-out</kbd>"
}
]
},
@@ -95,7 +95,7 @@
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "Use the <kbd>animation</kbd> shorthand: name, duration, and repeat count.",
"message": "Apply <kbd>animation: bounce 1s infinite</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "Which property links an element to a named <kbd>@keyframes</kbd> rule?"
"message": "Set <kbd>animation-name: pulse</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "How long should one full cycle of the animation take?"
"message": "Set <kbd>animation-duration: 2s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "Which property makes the animation wait before starting?"
"message": "Set <kbd>animation-delay: 1s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Which property controls how many times the animation repeats?"
"message": "Set <kbd>animation-iteration-count: 2</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Which property keeps the element styled in its final keyframe state after the animation ends?"
"message": "Set <kbd>animation-fill-mode: forwards</kbd>"
}
]
}

33
lessons/07-layouts.json
View File

@@ -18,24 +18,14 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "display",
"message": "Which display mode arranges children in a row or column?",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "display", "message": "Use <kbd>display: flex</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "justify-content",
"message": "How do you center items along the main axis?",
"message": "Use <kbd>justify-content: center</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "align-items",
"message": "Which property centers items along the cross axis?",
"options": { "caseSensitive": false }
}
{ "type": "contains", "value": "align-items", "message": "Use <kbd>align-items: center</kbd>", "options": { "caseSensitive": false } }
]
},
{
@@ -54,13 +44,13 @@
{
"type": "contains",
"value": "flex-wrap: wrap",
"message": "Which property allows flex items to flow onto multiple lines?",
"message": "Use <kbd>flex-wrap: wrap</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": ".item.*flex:\\s*1\\s+1\\s+100px",
"message": "The <kbd>flex</kbd> shorthand takes grow, shrink, and basis values — what basis size should each item start from?",
"message": "Set <kbd>flex: 1 1 100px</kbd> on items",
"options": { "caseSensitive": false }
}
]
@@ -78,22 +68,17 @@
"codeSuffix": "}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "display: grid",
"message": "Which display mode lets you define rows and columns?",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "display: grid", "message": "Use <kbd>display: grid</kbd>", "options": { "caseSensitive": false } },
{
"type": "contains",
"value": "grid-template-columns",
"message": "Which property defines the column structure of a grid?",
"message": "Define <kbd>grid-template-columns</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "grid-template-columns:\\s*repeat\\(3,\\s*1fr\\)\\s*",
"message": "The <kbd>repeat()</kbd> function can create equal-width columns — how many do you need, and what unit makes them equal?",
"message": "Create three equal columns with <kbd>repeat(3, 1fr)</kbd>",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "gap", "message": "Use <kbd>gap</kbd> property", "options": { "caseSensitive": false } }
@@ -121,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "grid-column", "expected": "1 / span 2" },
"message": "Use <kbd>grid-column</kbd> with a start line and a span count \u2014 how many columns should this item stretch across?",
"message": "Span across 2 columns with <kbd>grid-column: 1 / span 2</kbd>",
"options": { "caseSensitive": false }
}
]

20
lessons/08-responsive.json
View File

@@ -22,7 +22,7 @@
{
"type": "regex",
"value": "@media\\s*\\(max-width:\\s*600px\\)",
"message": "Start with an <kbd>@media</kbd> rule \u2014 which condition targets screens 600px wide or smaller?",
"message": "Use <kbd>@media (max-width: 600px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "Which property changes the element's background color?",
"message": "Set <kbd>background: lightcoral</kbd>",
"options": { "exact": false }
}
]
@@ -53,11 +53,7 @@
"solution": " font-size: 5vw;",
"previewContainer": "preview-area",
"validations": [
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "Which CSS unit scales relative to the viewport width?"
}
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Set <kbd>font-size: 5vw</kbd>" }
]
},
{
@@ -77,18 +73,18 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "Which display mode lets you define rows and columns?"
"message": "Set <kbd>display: grid</kbd>"
},
{
"type": "regex",
"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
"message": "Try <kbd>repeat()</kbd> with <kbd>auto-fit</kbd> and <kbd>minmax()</kbd> — what minimum and maximum sizes create flexible columns?",
"message": "Use <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Which property adds space between grid items?"
"message": "Set <kbd>gap: 1rem</kbd>"
}
]
},
@@ -109,7 +105,7 @@
{
"type": "regex",
"value": "@media\\s*\\(min-width:\\s*768px\\)",
"message": "Which <kbd>@media</kbd> condition applies styles when the viewport is at least 768px wide?",
"message": "Use <kbd>@media (min-width: 768px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -121,7 +117,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "Which property controls how wide the sidebar should be on larger screens?",
"message": "Set <kbd>width: 250px</kbd>",
"options": { "exact": false }
}
]

6
lessons/09-gradients.json
View File

@@ -22,7 +22,7 @@
{
"type": "contains",
"value": "linear-gradient",
"message": "Which CSS function creates a smooth transition between colors along a straight line?"
"message": "Use <kbd>linear-gradient()</kbd>"
},
{
"type": "contains",
@@ -53,7 +53,7 @@
{
"type": "contains",
"value": "to right",
"message": "Which direction keyword makes a gradient flow horizontally from the left side?"
"message": "Add <kbd>to right</kbd> to set the direction"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "contains",
"value": "radial-gradient",
"message": "Which CSS function creates a gradient that radiates outward from a center point?"
"message": "Use <kbd>radial-gradient()</kbd>"
},
{
"type": "contains",

34
lessons/10-tailwind-basics.json
View File

@@ -20,7 +20,7 @@
{
"type": "contains_class",
"value": "bg-blue-500",
"message": "Which Tailwind utility sets a blue background color? Think about the <kbd>bg-{color}-{shade}</kbd> pattern."
"message": "Add the <kbd>bg-blue-500</kbd> class for a blue background."
}
]
},
@@ -38,22 +38,22 @@
{
"type": "contains_class",
"value": "bg-white",
"message": "Which Tailwind utility sets a white background? The pattern is <kbd>bg-{color}</kbd>."
"message": "Add <kbd>bg-white</kbd> to set the background color to white."
},
{
"type": "contains_class",
"value": "p-4",
"message": "Which Tailwind utility adds 1rem padding on all sides? Remember: each spacing unit is 0.25rem."
"message": "Add <kbd>p-4</kbd> to apply 1rem padding on all sides."
},
{
"type": "contains_class",
"value": "rounded",
"message": "Which Tailwind utility adds rounded corners? It is one of the simplest utility names."
"message": "Add <kbd>rounded</kbd> to apply border-radius of 0.25rem."
},
{
"type": "contains_class",
"value": "shadow-sm",
"message": "Which Tailwind utility adds a small drop-shadow? Look for a <kbd>shadow-</kbd> variant."
"message": "Add <kbd>shadow-sm</kbd> to apply small drop-shadow."
}
]
},
@@ -71,17 +71,17 @@
{
"type": "contains_class",
"value": "text-blue-600",
"message": "Which Tailwind utility controls text color? Use the <kbd>text-{color}-{shade}</kbd> pattern with a blue shade."
"message": "Add <kbd>text-blue-600</kbd> to make the text blue"
},
{
"type": "contains_class",
"value": "text-2xl",
"message": "Which Tailwind utility sets the font size to 1.5rem? Check the <kbd>text-{size}</kbd> scale."
"message": "Add <kbd>text-2xl</kbd> to increase the font size to 1.5rem"
},
{
"type": "contains_class",
"value": "font-bold",
"message": "Which Tailwind utility makes text bold? The <kbd>font-{weight}</kbd> pattern controls font weight."
"message": "Add <kbd>font-bold</kbd> to make the text bold (font-weight: 700)"
}
]
},
@@ -99,17 +99,17 @@
{
"type": "contains_class",
"value": "px-6",
"message": "Which Tailwind utility adds horizontal padding of 1.5rem? The <kbd>px-</kbd> prefix targets left and right."
"message": "Add <kbd>px-6</kbd> for horizontal padding (1.5rem left and right)"
},
{
"type": "contains_class",
"value": "py-3",
"message": "Which Tailwind utility adds vertical padding of 0.75rem? The <kbd>py-</kbd> prefix targets top and bottom."
"message": "Add <kbd>py-3</kbd> for vertical padding (0.75rem top and bottom)"
},
{
"type": "contains_class",
"value": "mx-auto",
"message": "Which Tailwind utility centers an element horizontally using auto margins?"
"message": "Add <kbd>mx-auto</kbd> to center the button horizontally"
}
]
},
@@ -127,32 +127,32 @@
{
"type": "contains_class",
"value": "w-full",
"message": "Which Tailwind utility makes an element take up 100% width? This is the base (mobile) style."
"message": "Add <kbd>w-full</kbd> for 100% width on mobile"
},
{
"type": "contains_class",
"value": "md:w-1/2",
"message": "How do you set 50% width at the <kbd>md:</kbd> breakpoint? Tailwind uses fraction notation for widths."
"message": "Add <kbd>md:w-1/2</kbd> for 50% width on tablet and up"
},
{
"type": "contains_class",
"value": "lg:w-1/3",
"message": "How do you set one-third width at the <kbd>lg:</kbd> breakpoint? Use the same fraction pattern."
"message": "Add <kbd>lg:w-1/3</kbd> for 33.33% width on desktop and up"
},
{
"type": "contains_class",
"value": "text-lg",
"message": "Which Tailwind text size utility is one step above the base size? Think about the <kbd>text-{size}</kbd> scale."
"message": "Add <kbd>text-lg</kbd> for the base text size"
},
{
"type": "contains_class",
"value": "md:text-xl",
"message": "How do you increase the text size at the <kbd>md:</kbd> breakpoint? Go one step larger."
"message": "Add <kbd>md:text-xl</kbd> for larger text on tablets"
},
{
"type": "contains_class",
"value": "lg:text-2xl",
"message": "How do you set an even larger text size at the <kbd>lg:</kbd> breakpoint? Continue stepping up the scale."
"message": "Add <kbd>lg:text-2xl</kbd> for even larger text on desktop"
}
]
}

8
lessons/11-filters.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "filter", "expected": "blur(4px)" },
"message": "Which CSS property applies visual effects like blur? Use the <kbd>blur()</kbd> function with a pixel value."
"message": "Set <kbd>filter: blur(4px)</kbd>"
}
]
},
@@ -48,7 +48,7 @@
{
"type": "contains",
"value": "100%",
"message": "What percentage value removes all color completely?"
"message": "Set to <kbd>100%</kbd> for full grayscale"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "contains",
"value": "120%",
"message": "What percentage makes the element slightly brighter than normal? Normal is 100%."
"message": "Set to <kbd>120%</kbd>"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "contains",
"value": "4px 4px 8px",
"message": "Set the x-offset, y-offset, and blur radius. The task describes the exact values needed."
"message": "Set shadow offset and blur"
}
]
}

10
lessons/12-positioning.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "position", "expected": "relative" },
"message": "Which position value keeps an element in normal flow but allows offset adjustments?"
"message": "Set <kbd>position: relative</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "top", "expected": "-8px" },
"message": "Which offset property moves an element upward from its current position?"
"message": "Set <kbd>top: -8px</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "position", "expected": "absolute" },
"message": "Which position value removes an element from normal flow for precise placement?"
"message": "Set <kbd>position: absolute</kbd>"
}
]
},
@@ -85,12 +85,12 @@
{
"type": "property_value",
"value": { "property": "top", "expected": "8px" },
"message": "Which offset property controls the distance from the top of the positioned ancestor?"
"message": "Set <kbd>top: 8px</kbd>"
},
{
"type": "property_value",
"value": { "property": "right", "expected": "8px" },
"message": "Which offset property controls the distance from the right edge?"
"message": "Set <kbd>right: 8px</kbd>"
}
]
}

8
lessons/13-pseudo-elements.json
View File

@@ -48,7 +48,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Which CSS property changes the text color of the bullet? Try a warm, pinkish-orange named color."
"message": "Set <kbd>color: coral</kbd>"
}
]
},
@@ -95,17 +95,17 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "40px" },
"message": "How wide should the decorative line be? Check the task for the pixel value."
"message": "Set <kbd>width: 40px</kbd>"
},
{
"type": "property_value",
"value": { "property": "height", "expected": "3px" },
"message": "Which CSS property controls the thickness of the line? A thin line looks best here."
"message": "Set <kbd>height: 3px</kbd>"
},
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "Which CSS property fills the line with color? Use a steel-toned blue named color."
"message": "Set <kbd>background: steelblue</kbd>"
}
]
}

98
lessons/50-js-variables.json Normal file
View File

@@ -0,0 +1,98 @@
{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "js-variables",
"title": "JS Variables",
"description": "Learn to declare variables with let and const, work with strings and numbers, and use template literals to build dynamic text.",
"mode": "javascript",
"difficulty": "beginner",
"lessons": [
{
"id": "js-const",
"title": "Constants",
"description": "Use <kbd>const</kbd> to declare a variable that cannot be reassigned. Constants are great for values that stay the same throughout your program.",
"task": "Declare a constant named <kbd>name</kbd> with the value <kbd>\"Ada\"</kbd>",
"previewHTML": "<p id=\"out\">Waiting...</p>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "const name = \"Ada\";",
"codePrefix": "",
"codeSuffix": "\ndocument.getElementById(\"out\").textContent = name;",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "const",
"message": "Use <kbd>const</kbd> to declare the variable"
},
{
"type": "regex",
"value": "const\\s+name\\s*=",
"message": "Name your constant <kbd>name</kbd>"
},
{
"type": "regex",
"value": "[\"']Ada[\"']",
"message": "Set the value to <kbd>\"Ada\"</kbd>"
}
]
},
{
"id": "js-let",
"title": "Let Variables",
"description": "Use <kbd>let</kbd> to declare a variable that can be reassigned later. This is useful when you need to update a value.",
"task": "Declare a variable <kbd>score</kbd> with <kbd>let</kbd> and set it to <kbd>0</kbd>",
"previewHTML": "<p id=\"out\">Waiting...</p>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "let score = 0;",
"codePrefix": "",
"codeSuffix": "\ndocument.getElementById(\"out\").textContent = \"Score: \" + score;",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "let",
"message": "Use <kbd>let</kbd> to declare the variable"
},
{
"type": "regex",
"value": "let\\s+score\\s*=\\s*0",
"message": "Set <kbd>score</kbd> to <kbd>0</kbd>"
}
]
},
{
"id": "js-template",
"title": "Template Literals",
"description": "Template literals use backticks <kbd>`</kbd> and <kbd>${}</kbd> to embed expressions inside strings. They make building dynamic text much easier than string concatenation.",
"task": "Create a <kbd>const msg</kbd> using a template literal: <kbd>`Hi, ${name}!`</kbd>",
"previewHTML": "<p id=\"out\">Waiting...</p>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "const msg = `Hi, ${name}!`;",
"codePrefix": "const name = \"Ada\";\n",
"codeSuffix": "\ndocument.getElementById(\"out\").textContent = msg;",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "${",
"message": "Use <kbd>${}</kbd> to embed the variable inside the template"
},
{
"type": "regex",
"value": "`[^`]*\\$\\{\\s*name\\s*\\}[^`]*`",
"message": "Embed <kbd>name</kbd> inside a template literal with backticks"
},
{
"type": "regex",
"value": "const\\s+msg\\s*=",
"message": "Assign the result to a constant named <kbd>msg</kbd>"
}
]
}
]
}

93
lessons/51-js-dom.json Normal file
View File

@@ -0,0 +1,93 @@
{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "js-dom",
"title": "JS DOM",
"description": "Learn to select HTML elements with querySelector, change their text content, and modify their styles using JavaScript.",
"mode": "javascript",
"difficulty": "beginner",
"lessons": [
{
"id": "js-query",
"title": "Select an Element",
"description": "Use <kbd>document.querySelector()</kbd> to find an element by its CSS selector. It returns the first matching element.",
"task": "Select the element with id <kbd>box</kbd> and store it in a <kbd>const el</kbd>",
"previewHTML": "<div id=\"box\" style=\"width:80px;height:80px;background:coral;border-radius:8px;\"></div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "const el = document.querySelector(\"#box\");",
"codePrefix": "",
"codeSuffix": "\nif (el) el.textContent = \"Found!\";",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "querySelector",
"message": "Use <kbd>document.querySelector()</kbd> to select the element"
},
{
"type": "regex",
"value": "querySelector\\s*\\([\"']#box[\"']\\)",
"message": "Pass <kbd>\"#box\"</kbd> as the selector"
},
{
"type": "regex",
"value": "const\\s+el\\s*=",
"message": "Store the result in a constant named <kbd>el</kbd>"
}
]
},
{
"id": "js-text",
"title": "Change Text",
"description": "The <kbd>textContent</kbd> property lets you read or change the text inside an element. Setting it replaces all the element's text.",
"task": "Set the <kbd>textContent</kbd> of <kbd>el</kbd> to <kbd>\"Hello!\"</kbd>",
"previewHTML": "<p id=\"msg\">Old text</p>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "el.textContent = \"Hello!\";",
"codePrefix": "const el = document.querySelector(\"#msg\");\n",
"codeSuffix": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "textContent",
"message": "Use the <kbd>textContent</kbd> property"
},
{
"type": "regex",
"value": "el\\.textContent\\s*=\\s*[\"']Hello![\"']",
"message": "Set <kbd>el.textContent</kbd> to <kbd>\"Hello!\"</kbd>"
}
]
},
{
"id": "js-style",
"title": "Change Style",
"description": "Access an element's inline styles through the <kbd>style</kbd> property. CSS properties use camelCase in JavaScript, so <kbd>background-color</kbd> becomes <kbd>backgroundColor</kbd>.",
"task": "Set <kbd>el.style.backgroundColor</kbd> to <kbd>\"gold\"</kbd>",
"previewHTML": "<div id=\"box\" style=\"width:80px;height:80px;background:coral;border-radius:8px;\"></div>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "el.style.backgroundColor = \"gold\";",
"codePrefix": "const el = document.querySelector(\"#box\");\n",
"codeSuffix": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "style.backgroundColor",
"message": "Use <kbd>el.style.backgroundColor</kbd>"
},
{
"type": "regex",
"value": "\\.style\\.backgroundColor\\s*=\\s*[\"']gold[\"']",
"message": "Set the background color to <kbd>\"gold\"</kbd>"
}
]
}
]
}

103
lessons/52-js-events.json Normal file
View File

@@ -0,0 +1,103 @@
{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "js-events",
"title": "JS Events",
"description": "Learn to respond to user actions by adding event listeners for clicks, toggling classes, and updating the page dynamically.",
"mode": "javascript",
"difficulty": "beginner",
"lessons": [
{
"id": "js-click",
"title": "Click Handler",
"description": "Use <kbd>addEventListener(\"click\", ...)</kbd> to run code when an element is clicked. The first argument is the event type and the second is a callback function.",
"task": "Add a <kbd>click</kbd> event listener to <kbd>btn</kbd> that sets <kbd>out.textContent</kbd> to <kbd>\"Clicked!\"</kbd>",
"previewHTML": "<button id=\"btn\" style=\"padding:8px 16px;font-size:1rem;\">Click me</button>\n<p id=\"out\">Waiting...</p>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "btn.addEventListener(\"click\", () => {\n out.textContent = \"Clicked!\";\n});",
"codePrefix": "const btn = document.querySelector(\"#btn\");\nconst out = document.querySelector(\"#out\");\n",
"codeSuffix": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "addEventListener",
"message": "Use <kbd>addEventListener</kbd> to listen for events"
},
{
"type": "regex",
"value": "addEventListener\\s*\\(\\s*[\"']click[\"']",
"message": "Listen for the <kbd>\"click\"</kbd> event"
},
{
"type": "regex",
"value": "textContent\\s*=\\s*[\"']Clicked![\"']",
"message": "Set <kbd>out.textContent</kbd> to <kbd>\"Clicked!\"</kbd> inside the handler"
}
]
},
{
"id": "js-toggle",
"title": "Toggle a Class",
"description": "Use <kbd>classList.toggle()</kbd> to add a class if it's missing or remove it if it's present. This is perfect for on/off states like toggling dark mode or active states.",
"task": "Inside the click handler, call <kbd>box.classList.toggle(\"on\")</kbd>",
"previewHTML": "<div id=\"box\" style=\"width:80px;height:80px;background:coral;border-radius:8px;transition:background 0.3s;\"></div>\n<style>.on { background: mediumseagreen !important; }</style>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "box.addEventListener(\"click\", () => {\n box.classList.toggle(\"on\");\n});",
"codePrefix": "const box = document.querySelector(\"#box\");\n",
"codeSuffix": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "classList.toggle",
"message": "Use <kbd>classList.toggle()</kbd> to toggle the class"
},
{
"type": "regex",
"value": "classList\\.toggle\\s*\\(\\s*[\"']on[\"']\\s*\\)",
"message": "Toggle the class <kbd>\"on\"</kbd>"
},
{
"type": "contains",
"value": "addEventListener",
"message": "Use <kbd>addEventListener</kbd> to listen for clicks"
}
]
},
{
"id": "js-counter",
"title": "Simple Counter",
"description": "Combine variables and event listeners to build interactive features. Use <kbd>let</kbd> for a value that changes, and update the display each time the button is clicked.",
"task": "In the click handler, increment <kbd>count</kbd> by 1 and set <kbd>out.textContent</kbd> to <kbd>count</kbd>",
"previewHTML": "<button id=\"btn\" style=\"padding:8px 16px;font-size:1rem;\">Add 1</button>\n<p id=\"out\">0</p>",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; }",
"sandboxCSS": "",
"initialCode": "",
"solution": "btn.addEventListener(\"click\", () => {\n count++;\n out.textContent = count;\n});",
"codePrefix": "const btn = document.querySelector(\"#btn\");\nconst out = document.querySelector(\"#out\");\nlet count = 0;\n",
"codeSuffix": "",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "addEventListener",
"message": "Use <kbd>addEventListener</kbd> to listen for clicks"
},
{
"type": "regex",
"value": "count\\s*\\+\\+|count\\s*\\+=\\s*1|count\\s*=\\s*count\\s*\\+\\s*1",
"message": "Increment <kbd>count</kbd> by 1 (use <kbd>count++</kbd>)"
},
{
"type": "regex",
"value": "out\\.textContent\\s*=\\s*count",
"message": "Update the display with <kbd>out.textContent = count</kbd>"
}
]
}
]
}

22
lessons/ar/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "ما الخاصية التي تتحكم في لون النص؟"
"message": "أضف <kbd>color: coral;</kbd>"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "تحقق من خاصية <kbd>background</kbd>"
"message": "أضف <kbd>background: lavender;</kbd>"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "البطاقة تحتاج إلى مساحة داخل حوافها"
"message": "أضف <kbd>padding: 1rem;</kbd>"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "ما الخاصية التي تغيّر لون النص؟"
"message": "اضبط <kbd>color: steelblue</kbd>"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "ما القيمة التي تعطي لوناً دافئاً برتقالياً محمراً؟"
"message": "اضبط <kbd>color: coral</kbd>"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "الشارة تحتاج إلى خلفية حمراء زاهية"
"message": "اضبط <kbd>background: tomato</kbd>"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "ما الخاصية التي تضبط لون تعبئة الزر؟"
"message": "اضبط <kbd>background: steelblue</kbd>"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "ما الخاصية التي تتحكم في الخط أسفل الروابط؟"
"message": "اضبط <kbd>text-decoration: none</kbd>"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "تحقق من خاصية <kbd>color</kbd>"
"message": "اضبط <kbd>color: steelblue</kbd>"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "الروابط تحتاج إلى أن تبرز على الخلفية الزرقاء"
"message": "اضبط <kbd>color: white</kbd>"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "تحقق من خاصية <kbd>font-size</kbd> — النص يجب أن يكون أصغر قليلاً"
"message": "اضبط <kbd>font-size: 0.9rem</kbd>"
}
]
}

20
lessons/ar/01-box-model.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "ما الخاصية التي تضيف مساحة بين محتوى العنصر وحدوده؟"
"message": "اضبط <kbd>padding: 1rem</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "استخدم اختصار <kbd>border-left</kbd> مع قيم العرض والنمط واللون",
"message": "اضبط <kbd>border-left: 4px solid steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "ما الخاصية التي تُنشئ مساحة أسفل العنصر وتدفع الجيران بعيداً؟"
"message": "اضبط <kbd>margin-bottom: 1rem</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "ما قيمة <kbd>box-sizing</kbd> التي تشمل الحشو والحدود في العرض الإجمالي للعنصر؟"
"message": "اضبط <kbd>box-sizing: border-box</kbd>"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "استخدم اختصار <kbd>padding</kbd> بقيمتين: عمودي ثم أفقي",
"message": "اضبط <kbd>padding: 8px 1rem</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "استخدم <kbd>margin</kbd> مع كلمة مفتاحية تحسب تلقائياً مسافات متساوية يميناً ويساراً",
"message": "اضبط <kbd>margin: 0 auto</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "ما نسبة <kbd>border-radius</kbd> التي تُنشئ دائرة كاملة من عنصر مربع؟"
"message": "اضبط <kbd>border-radius: 50%</kbd>"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "أضف مساحة داخلية لبطاقة الإشعار"
"message": "اضبط <kbd>padding: 1rem</kbd>"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "أضف لمسة حدود يسارية باستخدام اختصار <kbd>border-left</kbd>",
"message": "اضبط <kbd>border-left: 4px solid coral</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "دوّر الزوايا قليلاً باستخدام <kbd>border-radius</kbd>"
"message": "اضبط <kbd>border-radius: 4px</kbd>"
}
]
}

10
lessons/ar/05-units-variables.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "ما الخاصية التي تحدّ من عرض العنصر؟ جرّب قيمة بوحدة <kbd>rem</kbd> لطول سطر مقروء."
"message": "اضبط <kbd>max-width: 40rem</kbd>"
}
]
},
@@ -43,13 +43,13 @@
{
"type": "contains",
"value": "--brand",
"message": "عرّف متغير <kbd>--brand</kbd>",
"message": "عرّف المتغير <kbd>--brand</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "steelblue",
"message": "اضبط القيمة إلى <kbd>steelblue</kbd>",
"message": "اضبط القيمة على <kbd>steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "استخدم <kbd>calc()</kbd> لطرح عرض الشريط الجانبي الثابت من عرض الحاوية الكامل.",
"message": "اضبط <kbd>width: calc(100% - 200px)</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "ما الخاصية التي تضمن حداً أدنى للارتفاع؟ استخدم وحدة viewport لتغطية الشاشة بالكامل."
"message": "اضبط <kbd>min-height: 100vh</kbd>"
}
]
}

16
lessons/ar/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "حدد أي خاصية تريد تحريكها وكم من الوقت يجب أن تستغرق.",
"message": "اضبط <kbd>transition: background-color 0.3s</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "ما كلمة التسهيل التي تبدأ بطيئة، تتسارع، ثم تبطئ مرة أخرى؟"
"message": "اضبط التوقيت على <kbd>ease-in-out</kbd>"
}
]
},
@@ -95,7 +95,7 @@
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "استخدم اختصار <kbd>animation</kbd>: الاسم، المدة، وعدد التكرار.",
"message": "طبّق <kbd>animation: bounce 1s infinite</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "ما الخاصية التي تربط العنصر بقاعدة <kbd>@keyframes</kbd> مسماة؟"
"message": "اضبط <kbd>animation-name: pulse</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "كم يجب أن تستغرق دورة كاملة من الحركة؟"
"message": "اضبط <kbd>animation-duration: 2s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "ما الخاصية التي تجعل الحركة تنتظر قبل أن تبدأ؟"
"message": "اضبط <kbd>animation-delay: 1s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "ما الخاصية التي تتحكم في عدد مرات تكرار الحركة؟"
"message": "اضبط <kbd>animation-iteration-count: 2</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "ما الخاصية التي تُبقي العنصر بتنسيق حالته النهائية بعد انتهاء الحركة؟"
"message": "اضبط <kbd>animation-fill-mode: forwards</kbd>"
}
]
}

20
lessons/ar/08-responsive.json
View File

@@ -22,7 +22,7 @@
{
"type": "regex",
"value": "@media\\s*\\(max-width:\\s*600px\\)",
"message": "ابدأ بقاعدة <kbd>@media</kbd> — ما الشرط الذي يستهدف الشاشات بعرض 600px أو أقل؟",
"message": "استخدم <kbd>@media (max-width: 600px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "ما الخاصية التي تغيّر لون خلفية العنصر؟",
"message": "اضبط <kbd>background: lightcoral</kbd>",
"options": { "exact": false }
}
]
@@ -53,11 +53,7 @@
"solution": " font-size: 5vw;",
"previewContainer": "preview-area",
"validations": [
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "ما وحدة CSS التي تتناسب مع عرض viewport؟"
}
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "اضبط <kbd>font-size: 5vw</kbd>" }
]
},
{
@@ -77,18 +73,18 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "ما وضع العرض الذي يتيح لك تعريف صفوف وأعمدة؟"
"message": "اضبط <kbd>display: grid</kbd>"
},
{
"type": "regex",
"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
"message": "جرّب <kbd>repeat()</kbd> مع <kbd>auto-fit</kbd> و <kbd>minmax()</kbd> — ما الحد الأدنى والأقصى للحجم لإنشاء أعمدة مرنة؟",
"message": "استخدم <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "ما الخاصية التي تضيف مساحة بين عناصر الشبكة؟"
"message": "اضبط <kbd>gap: 1rem</kbd>"
}
]
},
@@ -109,7 +105,7 @@
{
"type": "regex",
"value": "@media\\s*\\(min-width:\\s*768px\\)",
"message": "ما شرط <kbd>@media</kbd> الذي يُطبّق الأنماط عندما يكون عرض viewport على الأقل 768px؟",
"message": "استخدم <kbd>@media (min-width: 768px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -121,7 +117,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "ما الخاصية التي تتحكم في عرض الشريط الجانبي على الشاشات الكبيرة؟",
"message": "اضبط <kbd>width: 250px</kbd>",
"options": { "exact": false }
}
]

12
lessons/ar/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "ما قيمة display التي تحوّل العنصر إلى حاوية صندوق مرن؟"
"message": "اضبط <kbd>display: flex</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "ما الخاصية التي تُنشئ تباعداً بين عناصر flex بدون استخدام الهوامش؟"
"message": "اضبط <kbd>gap: 1rem</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "ما قيمة <kbd>justify-content</kbd> التي تدفع العنصر الأول والأخير إلى الحواف المتقابلة؟"
"message": "اضبط <kbd>justify-content: space-between</kbd>"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "ما الخاصية التي تُحاذي عناصر flex على طول المحور المتقاطع؟"
"message": "اضبط <kbd>align-items: center</kbd>"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "ما الخاصية التي تسمح لعناصر flex بالتدفق إلى أسطر متعددة؟"
"message": "اضبط <kbd>flex-wrap: wrap</kbd>"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "ما الخاصية التي تجعل عنصر flex ينمو لملء المساحة المتبقية؟"
"message": "اضبط <kbd>flex: 1</kbd>"
}
]
}

22
lessons/de/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Welche Eigenschaft ändert die Textfarbe?"
"message": "Füge <kbd>color: coral;</kbd> hinzu"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "Welche Eigenschaft steuert die Hintergrundfarbe?"
"message": "Füge <kbd>background: lavender;</kbd> hinzu"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Das Element benötigt auch Innenabstand -- überprüfe die <kbd>padding</kbd>-Eigenschaft"
"message": "Füge <kbd>padding: 1rem;</kbd> hinzu"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welcher Farbwert wurde in der Beschreibung genannt?"
"message": "Setze <kbd>color: steelblue</kbd>"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe sollen die Links haben?"
"message": "Setze <kbd>color: coral</kbd>"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "Überprüfe die <kbd>background</kbd>-Eigenschaft -- welche Farbe soll das Badge haben?"
"message": "Setze <kbd>background: tomato</kbd>"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "Überprüfe die <kbd>background</kbd>-Eigenschaft -- welche Farbe soll der primäre Button haben?"
"message": "Setze <kbd>background: steelblue</kbd>"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "Welche Eigenschaft entfernt die Unterstreichung von Links?"
"message": "Setze <kbd>text-decoration: none</kbd>"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Welche Eigenschaft ändert die Textfarbe der Überschriften?"
"message": "Setze <kbd>color: steelblue</kbd>"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe passt zu einem dunklen Hintergrund?"
"message": "Setze <kbd>color: white</kbd>"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "Welche Eigenschaft steuert die Schriftgröße?"
"message": "Setze <kbd>font-size: 0.9rem</kbd>"
}
]
}

32
lessons/de/01-advanced-selectors.json
View File

@@ -38,7 +38,7 @@
"property": "background-color",
"expected": "lightblue"
},
"message": "Überprüfe die <kbd>background-color</kbd>-Eigenschaft -- welche Farbe sollen die Text-Eingabefelder haben?"
"message": "Setze die Hintergrundfarbe auf <kbd>lightblue</kbd>"
},
{
"type": "regex",
@@ -56,7 +56,7 @@
"property": "border",
"expected": "2px solid blue"
},
"message": "Das Element benötigt einen Rahmen -- überprüfe die <kbd>border</kbd>-Eigenschaft"
"message": "Setze den Rahmen auf <kbd>2px solid blue</kbd>"
},
{
"type": "regex",
@@ -101,7 +101,7 @@
"property": "color",
"expected": "green"
},
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe kennzeichnet sichere Links?"
"message": "Setze die Textfarbe auf <kbd>green</kbd>"
},
{
"type": "contains",
@@ -114,7 +114,7 @@
"property": "text-decoration",
"expected": "underline"
},
"message": "Welcher <kbd>text-decoration</kbd>-Wert macht Links visuell hervorgehoben?"
"message": "Setze text-decoration auf <kbd>underline</kbd>, um HTTPS-Links zu unterstreichen"
},
{
"type": "regex",
@@ -159,7 +159,7 @@
"property": "background-color",
"expected": "cornflowerblue"
},
"message": "Überprüfe die <kbd>background-color</kbd>-Eigenschaft für die Hauptmenüpunkte"
"message": "Setze background-color auf <kbd>cornflowerblue</kbd> für das Hauptmenü-Styling"
},
{
"type": "contains",
@@ -172,7 +172,7 @@
"property": "color",
"expected": "white"
},
"message": "Welche Textfarbe sorgt für guten Kontrast auf einem blauen Hintergrund?"
"message": "Setze die Textfarbe auf <kbd>white</kbd> für Kontrast gegen den blauen Hintergrund"
},
{
"type": "regex",
@@ -217,7 +217,7 @@
"property": "text-decoration",
"expected": "none"
},
"message": "Welcher <kbd>text-decoration</kbd>-Wert entfernt die Unterstreichung?"
"message": "Setze text-decoration auf <kbd>none</kbd>"
},
{
"type": "contains",
@@ -230,7 +230,7 @@
"property": "color",
"expected": "blue"
},
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft für die Links"
"message": "Setze color auf <kbd>blue</kbd>"
},
{
"type": "regex",
@@ -275,7 +275,7 @@
"property": "margin-top",
"expected": "0"
},
"message": "Welcher Wert bei <kbd>margin-top</kbd> entfernt den oberen Abstand?"
"message": "Setze margin-top auf <kbd>0</kbd>"
},
{
"type": "contains",
@@ -288,7 +288,7 @@
"property": "font-style",
"expected": "italic"
},
"message": "Welcher <kbd>font-style</kbd>-Wert macht den Text kursiv?"
"message": "Setze font-style auf <kbd>italic</kbd>"
},
{
"type": "regex",
@@ -333,7 +333,7 @@
"property": "color",
"expected": "gray"
},
"message": "Überprüfe die <kbd>color</kbd>-Eigenschaft -- welche Farbe sollen die Absätze haben?"
"message": "Setze color auf <kbd>gray</kbd>"
},
{
"type": "contains",
@@ -346,7 +346,7 @@
"property": "padding-left",
"expected": "20px"
},
"message": "Das Element benötigt eine Einrückung -- überprüfe die <kbd>padding-left</kbd>-Eigenschaft"
"message": "Setze padding-left auf <kbd>20px</kbd>"
},
{
"type": "regex",
@@ -391,7 +391,7 @@
"property": "background-color",
"expected": "darkblue"
},
"message": "Welche Hintergrundfarbe soll der Button beim Hover haben?"
"message": "Setze background-color auf <kbd>darkblue</kbd>"
},
{
"type": "contains",
@@ -404,7 +404,7 @@
"property": "color",
"expected": "white"
},
"message": "Welche Textfarbe sorgt für Kontrast auf dunklem Hintergrund?"
"message": "Setze color auf <kbd>white</kbd>"
},
{
"type": "regex",
@@ -449,7 +449,7 @@
"property": "font-weight",
"expected": "bold"
},
"message": "Welcher <kbd>font-weight</kbd>-Wert macht Text fett?"
"message": "Setze font-weight auf <kbd>bold</kbd>"
},
{
"type": "contains",
@@ -462,7 +462,7 @@
"property": "margin-top",
"expected": "0"
},
"message": "Welcher Wert entfernt den oberen Abstand vollständig?"
"message": "Setze margin-top auf <kbd>0</kbd>"
},
{
"type": "regex",

20
lessons/de/01-box-model.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Welche Eigenschaft steuert den Innenabstand zwischen Inhalt und Rahmen?"
"message": "Setze <kbd>padding: 1rem</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "Überprüfe die <kbd>border-left</kbd>-Eigenschaft -- welche drei Werte braucht sie?",
"message": "Setze <kbd>border-left: 4px solid steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "Welche Eigenschaft steuert den Außenabstand nach unten?"
"message": "Setze <kbd>margin-bottom: 1rem</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "Welcher <kbd>box-sizing</kbd>-Wert bezieht Padding und Rahmen in die Breite ein?"
"message": "Setze <kbd>box-sizing: border-box</kbd>"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "Überprüfe die <kbd>padding</kbd>-Kurzschreibweise -- zwei Werte setzen vertikal und horizontal",
"message": "Setze <kbd>padding: 8px 1rem</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "Welche <kbd>margin</kbd>-Kurzschreibweise zentriert ein Block-Element horizontal?",
"message": "Setze <kbd>margin: 0 auto</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "Welcher <kbd>border-radius</kbd>-Wert macht ein quadratisches Element rund?"
"message": "Setze <kbd>border-radius: 50%</kbd>"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Das Element benötigt Innenabstand -- überprüfe die <kbd>padding</kbd>-Eigenschaft"
"message": "Setze <kbd>padding: 1rem</kbd>"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "Überprüfe die <kbd>border-left</kbd>-Eigenschaft -- sie braucht Breite, Stil und Farbe",
"message": "Setze <kbd>border-left: 4px solid coral</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "Das Element benötigt abgerundete Ecken -- überprüfe die <kbd>border-radius</kbd>-Eigenschaft"
"message": "Setze <kbd>border-radius: 4px</kbd>"
}
]
}

8
lessons/de/05-units-variables.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "Welche Eigenschaft begrenzt die maximale Breite eines Elements?"
"message": "Setze <kbd>max-width: 40rem</kbd>"
}
]
},
@@ -49,7 +49,7 @@
{
"type": "contains",
"value": "steelblue",
"message": "Welche Farbe soll die Variable haben?",
"message": "Setze den Wert auf <kbd>steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "Überprüfe die <kbd>width</kbd>-Eigenschaft -- wie berechnest du den verbleibenden Platz nach der Sidebar?",
"message": "Setze <kbd>width: calc(100% - 200px)</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "Welche Eigenschaft setzt die Mindesthöhe? Welche Viewport-Einheit entspricht 100% der Fensterhöhe?"
"message": "Setze <kbd>min-height: 100vh</kbd>"
}
]
}

14
lessons/de/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Überprüfe die <kbd>transition</kbd>-Eigenschaft -- welche CSS-Eigenschaft soll sanft übergehen und wie lange?",
"message": "Setze <kbd>transition: background-color 0.3s</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Welche Timing-Funktion startet und endet langsam?"
"message": "Setze timing auf <kbd>ease-in-out</kbd>"
}
]
},
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "Welche Animation soll angewendet werden? Überprüfe den <kbd>@keyframes</kbd>-Namen."
"message": "Setze <kbd>animation-name: pulse</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "Welche Eigenschaft steuert die Dauer der Animation?"
"message": "Setze <kbd>animation-duration: 2s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "Welche Eigenschaft verzögert den Start der Animation?"
"message": "Setze <kbd>animation-delay: 1s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Welche Eigenschaft steuert, wie oft die Animation wiederholt wird?"
"message": "Setze <kbd>animation-iteration-count: 2</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Welcher <kbd>animation-fill-mode</kbd>-Wert behält den Endzustand bei?"
"message": "Setze <kbd>animation-fill-mode: forwards</kbd>"
}
]
}

14
lessons/de/08-responsive.json
View File

@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "Überprüfe die <kbd>background</kbd>-Eigenschaft innerhalb der Media Query",
"message": "Setze <kbd>background: lightcoral</kbd>",
"options": { "exact": false }
}
]
@@ -53,11 +53,7 @@
"solution": " font-size: 5vw;",
"previewContainer": "preview-area",
"validations": [
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "Welche Eigenschaft steuert die Schriftgröße? Welche Viewport-Einheit skaliert mit der Breite?"
}
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Setze <kbd>font-size: 5vw</kbd>" }
]
},
{
@@ -77,7 +73,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "Welcher Display-Wert aktiviert das CSS-Grid-Layout?"
"message": "Setze <kbd>display: grid</kbd>"
},
{
"type": "regex",
@@ -88,7 +84,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Welche Eigenschaft steuert den Abstand zwischen Grid-Zellen?"
"message": "Setze <kbd>gap: 1rem</kbd>"
}
]
},
@@ -121,7 +117,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "Überprüfe die <kbd>width</kbd>-Eigenschaft für die Sidebar",
"message": "Setze <kbd>width: 250px</kbd>",
"options": { "exact": false }
}
]

34
lessons/de/10-tailwind-basics.json
View File

@@ -20,7 +20,7 @@
{
"type": "contains_class",
"value": "bg-blue-500",
"message": "Welche Tailwind-Klasse setzt eine blaue Hintergrundfarbe? Denke an das <kbd>bg-{farbe}-{abstufung}</kbd>-Muster."
"message": "Füge die <kbd>bg-blue-500</kbd>-Klasse für einen blauen Hintergrund hinzu."
}
]
},
@@ -38,22 +38,22 @@
{
"type": "contains_class",
"value": "bg-white",
"message": "Das Element benötigt einen weißen Hintergrund -- welches <kbd>bg-</kbd>-Utility passt?"
"message": "Füge <kbd>bg-white</kbd> hinzu, um die Hintergrundfarbe auf weiß zu setzen."
},
{
"type": "contains_class",
"value": "p-4",
"message": "Welches <kbd>p-</kbd>-Utility erzeugt 1rem Padding auf allen Seiten?"
"message": "Füge <kbd>p-4</kbd> hinzu, um 1rem Padding auf allen Seiten anzuwenden."
},
{
"type": "contains_class",
"value": "rounded",
"message": "Welche Klasse fügt abgerundete Ecken hinzu?"
"message": "Füge <kbd>rounded</kbd> hinzu, um einen border-radius von 0.25rem anzuwenden."
},
{
"type": "contains_class",
"value": "shadow-sm",
"message": "Das Element benötigt einen kleinen Schatten -- welches <kbd>shadow-</kbd>-Utility passt?"
"message": "Füge <kbd>shadow-sm</kbd> hinzu, um einen kleinen Schlagschatten anzuwenden."
}
]
},
@@ -71,17 +71,17 @@
{
"type": "contains_class",
"value": "text-blue-600",
"message": "Welches <kbd>text-</kbd>-Utility setzt eine blaue Textfarbe? Denke an das <kbd>text-{farbe}-{abstufung}</kbd>-Muster."
"message": "Füge <kbd>text-blue-600</kbd> hinzu, um den Text blau zu machen"
},
{
"type": "contains_class",
"value": "text-2xl",
"message": "Welches <kbd>text-</kbd>-Utility setzt die Schriftgröße auf 1.5rem?"
"message": "Füge <kbd>text-2xl</kbd> hinzu, um die Schriftgröße auf 1.5rem zu erhöhen"
},
{
"type": "contains_class",
"value": "font-bold",
"message": "Welches <kbd>font-</kbd>-Utility macht den Text fett?"
"message": "Füge <kbd>font-bold</kbd> hinzu, um den Text fett zu machen (font-weight: 700)"
}
]
},
@@ -99,17 +99,17 @@
{
"type": "contains_class",
"value": "px-6",
"message": "Welches <kbd>px-</kbd>-Utility erzeugt 1.5rem horizontales Padding?"
"message": "Füge <kbd>px-6</kbd> für horizontales Padding hinzu (1.5rem links und rechts)"
},
{
"type": "contains_class",
"value": "py-3",
"message": "Welches <kbd>py-</kbd>-Utility erzeugt 0.75rem vertikales Padding?"
"message": "Füge <kbd>py-3</kbd> für vertikales Padding hinzu (0.75rem oben und unten)"
},
{
"type": "contains_class",
"value": "mx-auto",
"message": "Welches <kbd>mx-</kbd>-Utility zentriert ein Element horizontal?"
"message": "Füge <kbd>mx-auto</kbd> hinzu, um den Button horizontal zu zentrieren"
}
]
},
@@ -127,32 +127,32 @@
{
"type": "contains_class",
"value": "w-full",
"message": "Welches Breiten-Utility macht das Element auf Mobil 100% breit?"
"message": "Füge <kbd>w-full</kbd> für 100% Breite auf Mobil hinzu"
},
{
"type": "contains_class",
"value": "md:w-1/2",
"message": "Welches responsive Breiten-Utility setzt 50% ab dem <kbd>md:</kbd>-Breakpoint?"
"message": "Füge <kbd>md:w-1/2</kbd> für 50% Breite auf Tablet und größer hinzu"
},
{
"type": "contains_class",
"value": "lg:w-1/3",
"message": "Welches responsive Breiten-Utility setzt 33.33% ab dem <kbd>lg:</kbd>-Breakpoint?"
"message": "Füge <kbd>lg:w-1/3</kbd> für 33.33% Breite auf Desktop und größer hinzu"
},
{
"type": "contains_class",
"value": "text-lg",
"message": "Welches <kbd>text-</kbd>-Utility setzt die Basis-Textgröße auf 1.125rem?"
"message": "Füge <kbd>text-lg</kbd> für die Basis-Textgröße hinzu"
},
{
"type": "contains_class",
"value": "md:text-xl",
"message": "Welches responsive Text-Utility setzt eine größere Schrift ab dem <kbd>md:</kbd>-Breakpoint?"
"message": "Füge <kbd>md:text-xl</kbd> für größeren Text auf Tablets hinzu"
},
{
"type": "contains_class",
"value": "lg:text-2xl",
"message": "Welches responsive Text-Utility setzt die größte Schrift ab dem <kbd>lg:</kbd>-Breakpoint?"
"message": "Füge <kbd>lg:text-2xl</kbd> für noch größeren Text auf Desktop hinzu"
}
]
}

12
lessons/de/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "Welcher Display-Wert macht ein Element zu einem flexiblen Box-Container?"
"message": "Setze <kbd>display: flex</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Welche Eigenschaft erzeugt Abstände zwischen Flex-Items ohne Margins?"
"message": "Setze <kbd>gap: 1rem</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "Welcher <kbd>justify-content</kbd>-Wert schiebt das erste und letzte Element an gegenüberliegende Ränder?"
"message": "Setze <kbd>justify-content: space-between</kbd>"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "Welche Eigenschaft richtet Flex-Items entlang der Querachse aus?"
"message": "Setze <kbd>align-items: center</kbd>"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "Welche Eigenschaft erlaubt Flex-Items, auf mehrere Zeilen umzubrechen?"
"message": "Setze <kbd>flex-wrap: wrap</kbd>"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "Welche Eigenschaft lässt ein Flex-Item wachsen, um den verbleibenden Platz zu füllen?"
"message": "Setze <kbd>flex: 1</kbd>"
}
]
}

22
lessons/es/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "¿Qué propiedad controla el color del texto?"
"message": "Añade <kbd>color: coral;</kbd>"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "Revisa la propiedad <kbd>background</kbd>"
"message": "Añade <kbd>background: lavender;</kbd>"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "La tarjeta necesita espacio dentro de sus bordes"
"message": "Añade <kbd>padding: 1rem;</kbd>"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "¿Qué propiedad cambia el color del texto?"
"message": "Establece <kbd>color: steelblue</kbd>"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "¿Qué valor da un color cálido, rojo-anaranjado?"
"message": "Establece <kbd>color: coral</kbd>"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "El badge necesita un fondo rojo brillante"
"message": "Establece <kbd>background: tomato</kbd>"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "¿Qué propiedad establece el color de relleno del botón?"
"message": "Establece <kbd>background: steelblue</kbd>"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "¿Qué propiedad controla el subrayado de los enlaces?"
"message": "Establece <kbd>text-decoration: none</kbd>"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Revisa la propiedad <kbd>color</kbd>"
"message": "Establece <kbd>color: steelblue</kbd>"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "Los enlaces necesitan destacar sobre el fondo azul"
"message": "Establece <kbd>color: white</kbd>"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "Revisa la propiedad <kbd>font-size</kbd> — el texto debería ser ligeramente más pequeño"
"message": "Establece <kbd>font-size: 0.9rem</kbd>"
}
]
}

20
lessons/es/01-box-model.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "¿Qué propiedad añade espacio entre el contenido de un elemento y su borde?"
"message": "Establece <kbd>padding: 1rem</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "Usa el atajo <kbd>border-left</kbd> con valores de ancho, estilo y color",
"message": "Establece <kbd>border-left: 4px solid steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "¿Qué propiedad crea espacio debajo de un elemento, separándolo de sus vecinos?"
"message": "Establece <kbd>margin-bottom: 1rem</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "¿Qué valor de <kbd>box-sizing</kbd> incluye padding y borde en el ancho total del elemento?"
"message": "Establece <kbd>box-sizing: border-box</kbd>"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "Usa el atajo <kbd>padding</kbd> con dos valores: vertical y luego horizontal",
"message": "Establece <kbd>padding: 8px 1rem</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "Usa <kbd>margin</kbd> con una palabra clave que calcula automáticamente espaciado igual a izquierda y derecha",
"message": "Establece <kbd>margin: 0 auto</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "¿Qué porcentaje de <kbd>border-radius</kbd> crea un círculo perfecto a partir de un elemento cuadrado?"
"message": "Establece <kbd>border-radius: 50%</kbd>"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "El elemento necesita espacio interior"
"message": "Establece <kbd>padding: 1rem</kbd>"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "Añade un acento de borde izquierdo usando el atajo <kbd>border-left</kbd>",
"message": "Establece <kbd>border-left: 4px solid coral</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "Redondea las esquinas ligeramente con <kbd>border-radius</kbd>"
"message": "Establece <kbd>border-radius: 4px</kbd>"
}
]
}

8
lessons/es/05-units-variables.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "¿Qué propiedad limita el ancho de un elemento? Prueba un valor en <kbd>rem</kbd> para una longitud de línea legible."
"message": "Establece <kbd>max-width: 40rem</kbd>"
}
]
},
@@ -49,7 +49,7 @@
{
"type": "contains",
"value": "steelblue",
"message": "Asigna el valor <kbd>steelblue</kbd> a la variable",
"message": "Establece el valor a <kbd>steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "Usa <kbd>calc()</kbd> para restar el ancho fijo de la barra lateral del ancho total del contenedor.",
"message": "Establece <kbd>width: calc(100% - 200px)</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "¿Qué propiedad asegura una altura mínima? Usa una unidad de viewport para cobertura de pantalla completa."
"message": "Establece <kbd>min-height: 100vh</kbd>"
}
]
}

16
lessons/es/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Especifica qué propiedad transicionar y cuánto debe durar.",
"message": "Establece <kbd>transition: background-color 0.3s</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "¿Qué palabra clave de easing empieza lento, acelera, y luego desacelera de nuevo?"
"message": "Establece timing a <kbd>ease-in-out</kbd>"
}
]
},
@@ -95,7 +95,7 @@
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "Usa el atajo <kbd>animation</kbd>: nombre, duración y número de repeticiones.",
"message": "Aplica <kbd>animation: bounce 1s infinite</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "¿Qué propiedad vincula un elemento a una regla <kbd>@keyframes</kbd> nombrada?"
"message": "Establece <kbd>animation-name: pulse</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "¿Cuánto debe durar un ciclo completo de la animación?"
"message": "Establece <kbd>animation-duration: 2s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "¿Qué propiedad hace que la animación espere antes de comenzar?"
"message": "Establece <kbd>animation-delay: 1s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "¿Qué propiedad controla cuántas veces se repite la animación?"
"message": "Establece <kbd>animation-iteration-count: 2</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "¿Qué propiedad mantiene el elemento con los estilos de su último keyframe después de que termina la animación?"
"message": "Establece <kbd>animation-fill-mode: forwards</kbd>"
}
]
}

16
lessons/es/08-responsive.json
View File

@@ -22,7 +22,7 @@
{
"type": "regex",
"value": "@media\\s*\\(max-width:\\s*600px\\)",
"message": "Empieza con una regla <kbd>@media</kbd> — ¿qué condición apunta a pantallas de 600px de ancho o menos?",
"message": "Usa <kbd>@media (max-width: 600px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "¿Qué propiedad cambia el color de fondo del elemento?",
"message": "Establece <kbd>background: lightcoral</kbd>",
"options": { "exact": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "¿Qué unidad CSS escala en relación al ancho del viewport?"
"message": "Establece <kbd>font-size: 5vw</kbd>"
}
]
},
@@ -77,18 +77,18 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "¿Qué modo de display permite definir filas y columnas?"
"message": "Establece <kbd>display: grid</kbd>"
},
{
"type": "regex",
"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
"message": "Prueba <kbd>repeat()</kbd> con <kbd>auto-fit</kbd> y <kbd>minmax()</kbd> — ¿qué tamaños mínimo y máximo crean columnas flexibles?",
"message": "Usa <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "¿Qué propiedad añade espacio entre los elementos del grid?"
"message": "Establece <kbd>gap: 1rem</kbd>"
}
]
},
@@ -109,7 +109,7 @@
{
"type": "regex",
"value": "@media\\s*\\(min-width:\\s*768px\\)",
"message": "¿Qué condición <kbd>@media</kbd> aplica estilos cuando el viewport tiene al menos 768px de ancho?",
"message": "Usa <kbd>@media (min-width: 768px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -121,7 +121,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "¿Qué propiedad controla el ancho de la barra lateral en pantallas más grandes?",
"message": "Establece <kbd>width: 250px</kbd>",
"options": { "exact": false }
}
]

12
lessons/es/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "¿Qué valor de display convierte un elemento en un contenedor de caja flexible?"
"message": "Establece <kbd>display: flex</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "¿Qué propiedad crea espaciado entre elementos flex sin usar márgenes?"
"message": "Establece <kbd>gap: 1rem</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "¿Qué valor de <kbd>justify-content</kbd> empuja el primer y último elemento a los extremos opuestos?"
"message": "Establece <kbd>justify-content: space-between</kbd>"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "¿Qué propiedad alinea los elementos flex a lo largo del eje transversal?"
"message": "Establece <kbd>align-items: center</kbd>"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "¿Qué propiedad permite que los elementos flex fluyan a múltiples líneas?"
"message": "Establece <kbd>flex-wrap: wrap</kbd>"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "¿Qué propiedad hace que un elemento flex crezca para llenar el espacio restante?"
"message": "Establece <kbd>flex: 1</kbd>"
}
]
}

12
lessons/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "Which display value turns an element into a flexible box container?"
"message": "Set <kbd>display: flex</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Which property creates spacing between flex items without using margins?"
"message": "Set <kbd>gap: 1rem</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "Which <kbd>justify-content</kbd> value pushes the first and last items to opposite edges?"
"message": "Set <kbd>justify-content: space-between</kbd>"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "Which property aligns flex items along the cross axis?"
"message": "Set <kbd>align-items: center</kbd>"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "Which property allows flex items to flow onto multiple lines?"
"message": "Set <kbd>flex-wrap: wrap</kbd>"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "Which property makes a flex item grow to fill the remaining space?"
"message": "Set <kbd>flex: 1</kbd>"
}
]
}

10
lessons/grid.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "Which <kbd>display</kbd> value activates the CSS Grid layout system?"
"message": "Set <kbd>display: grid</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "grid-template-columns:\\s*repeat\\(\\s*3\\s*,\\s*1fr\\s*\\)",
"message": "Which CSS property defines column sizes in a grid? Use <kbd>repeat()</kbd> with the <kbd>fr</kbd> unit for equal columns.",
"message": "Set <kbd>grid-template-columns: repeat(3, 1fr)</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Which CSS property adds spacing between grid cells without affecting the outer edges?"
"message": "Set <kbd>gap: 1rem</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "regex",
"value": "grid-column:\\s*span\\s+2",
"message": "Which CSS property makes a grid item stretch across multiple columns? Use the <kbd>span</kbd> keyword.",
"message": "Set <kbd>grid-column: span 2</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -108,7 +108,7 @@
{
"type": "regex",
"value": "grid-template-columns:\\s*repeat\\(\\s*auto-fit\\s*,\\s*minmax\\(\\s*150px\\s*,\\s*1fr\\s*\\)\\s*\\)",
"message": "Which CSS property creates responsive columns? Combine <kbd>auto-fit</kbd> with <kbd>minmax()</kbd> for flexible sizing.",
"message": "Set <kbd>grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))</kbd>",
"options": { "caseSensitive": false }
}
]

22
lessons/pl/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Która właściwość kontroluje kolor tekstu?"
"message": "Dodaj <kbd>color: coral;</kbd>"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje karta?"
"message": "Dodaj <kbd>background: lavender;</kbd>"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Element potrzebuje wewnętrznej przestrzeni — sprawdź właściwość <kbd>padding</kbd>"
"message": "Dodaj <kbd>padding: 1rem;</kbd>"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Która właściwość kontroluje kolor tekstu?"
"message": "Ustaw <kbd>color: steelblue</kbd>"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Sprawdź właściwość <kbd>color</kbd> — jaki kolor potrzebują linki?"
"message": "Ustaw <kbd>color: coral</kbd>"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje badge?"
"message": "Ustaw <kbd>background: tomato</kbd>"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje przycisk?"
"message": "Ustaw <kbd>background: steelblue</kbd>"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "Która właściwość kontroluje podkreślenie linków?"
"message": "Ustaw <kbd>text-decoration: none</kbd>"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Która właściwość kontroluje kolor tekstu nagłówków?"
"message": "Ustaw <kbd>color: steelblue</kbd>"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "Sprawdź właściwość <kbd>color</kbd> — jaki kolor potrzebują linki nawigacji?"
"message": "Ustaw <kbd>color: white</kbd>"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "Która właściwość kontroluje rozmiar tekstu?"
"message": "Ustaw <kbd>font-size: 0.9rem</kbd>"
}
]
}

20
lessons/pl/01-box-model.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Element potrzebuje wewnętrznej przestrzeni — sprawdź właściwość <kbd>padding</kbd>"
"message": "Ustaw <kbd>padding: 1rem</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "Sprawdź właściwość <kbd>border-left</kbd> — jakiej szerokości, stylu i koloru potrzebujesz?",
"message": "Ustaw <kbd>border-left: 4px solid steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "Która właściwość kontroluje przestrzeń pod elementem?"
"message": "Ustaw <kbd>margin-bottom: 1rem</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "Która wartość <kbd>box-sizing</kbd> włącza padding i ramkę do szerokości?"
"message": "Ustaw <kbd>box-sizing: border-box</kbd>"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "Sprawdź skrót <kbd>padding</kbd> — dwie wartości oznaczają pion i poziom",
"message": "Ustaw <kbd>padding: 8px 1rem</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "Sprawdź skrót <kbd>margin</kbd> — jak automatycznie wycentrować element poziomo?",
"message": "Ustaw <kbd>margin: 0 auto</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "Która wartość <kbd>border-radius</kbd> tworzy pełne koło?"
"message": "Ustaw <kbd>border-radius: 50%</kbd>"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Element potrzebuje wewnętrznej przestrzeni — sprawdź właściwość <kbd>padding</kbd>"
"message": "Ustaw <kbd>padding: 1rem</kbd>"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "Sprawdź właściwość <kbd>border-left</kbd> — jaki styl akcentu potrzebuje powiadomienie?",
"message": "Ustaw <kbd>border-left: 4px solid coral</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "Element potrzebuje zaokrąglonych rogów — sprawdź właściwość <kbd>border-radius</kbd>"
"message": "Ustaw <kbd>border-radius: 4px</kbd>"
}
]
}

8
lessons/pl/05-units-variables.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "Która właściwość ogranicza maksymalną szerokość elementu?"
"message": "Ustaw <kbd>max-width: 40rem</kbd>"
}
]
},
@@ -49,7 +49,7 @@
{
"type": "contains",
"value": "steelblue",
"message": "Jaki kolor powinna mieć zmienna brand?",
"message": "Ustaw wartość na <kbd>steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "Sprawdź funkcję <kbd>calc()</kbd> — jak obliczyć szerokość minus sidebar?",
"message": "Ustaw <kbd>width: calc(100% - 200px)</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "Która właściwość zapewnia minimalną wysokość na cały viewport?"
"message": "Ustaw <kbd>min-height: 100vh</kbd>"
}
]
}

18
lessons/pl/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Sprawdź właściwość <kbd>transition</kbd> — jaką właściwość i czas trwania podać?",
"message": "Ustaw <kbd>transition: background-color 0.3s</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Która wartość tworzy płynne przyspieszenie i spowolnienie?"
"message": "Ustaw timing na <kbd>ease-in-out</kbd>"
}
]
},
@@ -83,7 +83,7 @@
{
"type": "regex",
"value": "50%.*transform: translateY\\(-20px\\)",
"message": "W połowie animacji piłka powinna podskoczyć w górę — sprawdź <kbd>transform</kbd>",
"message": "Przy <kbd>50%</kbd>, użyj <kbd>transform: translateY(-20px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -95,7 +95,7 @@
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "Sprawdź skrót <kbd>animation</kbd> — podaj nazwę, czas trwania i powtarzanie",
"message": "Zastosuj <kbd>animation: bounce 1s infinite</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "Która właściwość wskazuje nazwę animacji do zastosowania?"
"message": "Ustaw <kbd>animation-name: pulse</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "Sprawdź właściwość <kbd>animation-duration</kbd> — jak długo trwa jeden cykl?"
"message": "Ustaw <kbd>animation-duration: 2s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "Sprawdź właściwość <kbd>animation-delay</kbd> — ile czeka przed startem?"
"message": "Ustaw <kbd>animation-delay: 1s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Sprawdź właściwość <kbd>animation-iteration-count</kbd> — ile razy ma się powtórzyć?"
"message": "Ustaw <kbd>animation-iteration-count: 2</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Która wartość <kbd>animation-fill-mode</kbd> zachowuje końcowy stan animacji?"
"message": "Ustaw <kbd>animation-fill-mode: forwards</kbd>"
}
]
}

14
lessons/pl/08-responsive.json
View File

@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "Sprawdź właściwość <kbd>background</kbd> — jaki kolor potrzebuje panel na małych ekranach?",
"message": "Ustaw <kbd>background: lightcoral</kbd>",
"options": { "exact": false }
}
]
@@ -53,11 +53,7 @@
"solution": " font-size: 5vw;",
"previewContainer": "preview-area",
"validations": [
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "Sprawdź właściwość <kbd>font-size</kbd> — która jednostka skaluje się z viewport?"
}
{ "type": "property_value", "value": { "property": "font-size", "expected": "5vw" }, "message": "Ustaw <kbd>font-size: 5vw</kbd>" }
]
},
{
@@ -77,7 +73,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "Która wartość <kbd>display</kbd> włącza układ siatkowy?"
"message": "Ustaw <kbd>display: grid</kbd>"
},
{
"type": "regex",
@@ -88,7 +84,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Sprawdź właściwość <kbd>gap</kbd> — jaki odstęp potrzebują elementy siatki?"
"message": "Ustaw <kbd>gap: 1rem</kbd>"
}
]
},
@@ -121,7 +117,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "Sprawdź właściwość <kbd>width</kbd> — jaką stałą szerokość potrzebuje sidebar?",
"message": "Ustaw <kbd>width: 250px</kbd>",
"options": { "exact": false }
}
]

12
lessons/pl/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "Która właściwość <kbd>display</kbd> tworzy kontener flex?"
"message": "Ustaw <kbd>display: flex</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Sprawdź właściwość <kbd>gap</kbd> — jaki odstęp potrzebują elementy?"
"message": "Ustaw <kbd>gap: 1rem</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "Która wartość <kbd>justify-content</kbd> rozdziela elementy na końce?"
"message": "Ustaw <kbd>justify-content: space-between</kbd>"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "Która właściwość kontroluje wyrównanie na osi poprzecznej?"
"message": "Ustaw <kbd>align-items: center</kbd>"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "Sprawdź właściwość <kbd>flex-wrap</kbd> — jak pozwolić elementom przenosić się na nowe linie?"
"message": "Ustaw <kbd>flex-wrap: wrap</kbd>"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "Sprawdź właściwość <kbd>flex</kbd> — jak sprawić, by element wypełnił dostępną przestrzeń?"
"message": "Ustaw <kbd>flex: 1</kbd>"
}
]
}

22
lessons/uk/00-basic-selectors.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Яка властивість керує кольором тексту?"
"message": "Додайте <kbd>color: coral;</kbd>"
}
]
},
@@ -43,12 +43,12 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lavender" },
"message": "Перевірте властивість <kbd>background</kbd>"
"message": "Додайте <kbd>background: lavender;</kbd>"
},
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Картка потребує простору всередині її меж"
"message": "Додайте <kbd>padding: 1rem;</kbd>"
}
]
},
@@ -74,7 +74,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Яка властивість змінює колір тексту?"
"message": "Встановіть <kbd>color: steelblue</kbd>"
}
]
},
@@ -100,7 +100,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "coral" },
"message": "Яке значення дає теплий червонувато-оранжевий колір?"
"message": "Встановіть <kbd>color: coral</kbd>"
}
]
},
@@ -126,7 +126,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "tomato" },
"message": "Значку потрібен яскравий червоний фон"
"message": "Встановіть <kbd>background: tomato</kbd>"
}
]
},
@@ -152,7 +152,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "steelblue" },
"message": "Яка властивість встановлює колір заливки кнопки?"
"message": "Встановіть <kbd>background: steelblue</kbd>"
}
]
},
@@ -178,7 +178,7 @@
{
"type": "property_value",
"value": { "property": "text-decoration", "expected": "none" },
"message": "Яка властивість керує підкресленням посилань?"
"message": "Встановіть <kbd>text-decoration: none</kbd>"
}
]
},
@@ -199,7 +199,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "steelblue" },
"message": "Перевірте властивість <kbd>color</kbd>"
"message": "Встановіть <kbd>color: steelblue</kbd>"
}
]
},
@@ -225,7 +225,7 @@
{
"type": "property_value",
"value": { "property": "color", "expected": "white" },
"message": "Посилання мають виділятися на синьому фоні"
"message": "Встановіть <kbd>color: white</kbd>"
}
]
},
@@ -251,7 +251,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "0.9rem" },
"message": "Перевірте властивість <kbd>font-size</kbd> — текст має бути трохи меншим"
"message": "Встановіть <kbd>font-size: 0.9rem</kbd>"
}
]
}

20
lessons/uk/01-box-model.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Яка властивість додає простір між вмістом елемента та його межею?"
"message": "Встановіть <kbd>padding: 1rem</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+steelblue",
"message": "Використайте скорочення <kbd>border-left</kbd> зі значеннями ширини, стилю та кольору",
"message": "Встановіть <kbd>border-left: 4px solid steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -65,7 +65,7 @@
{
"type": "property_value",
"value": { "property": "margin-bottom", "expected": "1rem" },
"message": "Яка властивість створює простір знизу елемента, відштовхуючи сусідів?"
"message": "Встановіть <kbd>margin-bottom: 1rem</kbd>"
}
]
},
@@ -86,7 +86,7 @@
{
"type": "property_value",
"value": { "property": "box-sizing", "expected": "border-box" },
"message": "Яке значення <kbd>box-sizing</kbd> включає padding та межу в загальну ширину елемента?"
"message": "Встановіть <kbd>box-sizing: border-box</kbd>"
}
]
},
@@ -107,7 +107,7 @@
{
"type": "regex",
"value": "padding:\\s*8px\\s+1rem",
"message": "Використайте скорочення <kbd>padding</kbd> з двома значеннями: вертикальне та горизонтальне",
"message": "Встановіть <kbd>padding: 8px 1rem</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -129,7 +129,7 @@
{
"type": "regex",
"value": "margin:\\s*0\\s+auto",
"message": "Використайте <kbd>margin</kbd> з ключовим словом, яке автоматично обчислює рівні ліві та праві відступи",
"message": "Встановіть <kbd>margin: 0 auto</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -151,7 +151,7 @@
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "50%" },
"message": "Який відсоток <kbd>border-radius</kbd> створює ідеальне коло з квадратного елемента?"
"message": "Встановіть <kbd>border-radius: 50%</kbd>"
}
]
},
@@ -172,18 +172,18 @@
{
"type": "property_value",
"value": { "property": "padding", "expected": "1rem" },
"message": "Додайте внутрішній відступ до картки сповіщення"
"message": "Встановіть <kbd>padding: 1rem</kbd>"
},
{
"type": "regex",
"value": "border-left:\\s*4px\\s+solid\\s+coral",
"message": "Додайте лівий акцент за допомогою скорочення <kbd>border-left</kbd>",
"message": "Встановіть <kbd>border-left: 4px solid coral</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "border-radius", "expected": "4px" },
"message": "Злегка заокругліть кути за допомогою <kbd>border-radius</kbd>"
"message": "Встановіть <kbd>border-radius: 4px</kbd>"
}
]
}

8
lessons/uk/05-units-variables.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "max-width", "expected": "40rem" },
"message": "Яка властивість обмежує ширину елемента? Спробуйте значення в <kbd>rem</kbd> для комфортної довжини рядка."
"message": "Встановіть <kbd>max-width: 40rem</kbd>"
}
]
},
@@ -49,7 +49,7 @@
{
"type": "contains",
"value": "steelblue",
"message": "Встановіть значення на <kbd>steelblue</kbd>",
"message": "Встановіть значення <kbd>steelblue</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -71,7 +71,7 @@
{
"type": "regex",
"value": "width:\\s*calc\\(\\s*100%\\s*-\\s*200px\\s*\\)",
"message": "Використайте <kbd>calc()</kbd>, щоб відняти фіксовану ширину сайдбару від повної ширини контейнера.",
"message": "Встановіть <kbd>width: calc(100% - 200px)</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -93,7 +93,7 @@
{
"type": "property_value",
"value": { "property": "min-height", "expected": "100vh" },
"message": "Яка властивість забезпечує мінімальну висоту? Використайте одиницю viewport для повноекранного покриття."
"message": "Встановіть <kbd>min-height: 100vh</kbd>"
}
]
}

16
lessons/uk/06-transitions-animations.json
View File

@@ -28,7 +28,7 @@
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Вкажіть, яку властивість анімувати та скільки це має тривати.",
"message": "Встановіть <kbd>transition: background-color 0.3s</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Яке ключове слово пом'якшення починається повільно, прискорюється, а потім знову сповільнюється?"
"message": "Встановіть timing на <kbd>ease-in-out</kbd>"
}
]
},
@@ -95,7 +95,7 @@
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "Використайте скорочення <kbd>animation</kbd>: назва, тривалість та кількість повторень.",
"message": "Застосуйте <kbd>animation: bounce 1s infinite</kbd>",
"options": { "caseSensitive": false }
}
]
@@ -117,27 +117,27 @@
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "Яка властивість пов'язує елемент з іменованим правилом <kbd>@keyframes</kbd>?"
"message": "Встановіть <kbd>animation-name: pulse</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "Скільки має тривати один повний цикл анімації?"
"message": "Встановіть <kbd>animation-duration: 2s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "Яка властивість змушує анімацію зачекати перед початком?"
"message": "Встановіть <kbd>animation-delay: 1s</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Яка властивість контролює кількість повторень анімації?"
"message": "Встановіть <kbd>animation-iteration-count: 2</kbd>"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Яка властивість зберігає стиль елемента в його фінальному стані keyframe після завершення анімації?"
"message": "Встановіть <kbd>animation-fill-mode: forwards</kbd>"
}
]
}

16
lessons/uk/08-responsive.json
View File

@@ -22,7 +22,7 @@
{
"type": "regex",
"value": "@media\\s*\\(max-width:\\s*600px\\)",
"message": "Почніть з правила <kbd>@media</kbd> — яка умова націлюється на екрани шириною 600px або менше?",
"message": "Використайте <kbd>@media (max-width: 600px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -34,7 +34,7 @@
{
"type": "property_value",
"value": { "property": "background", "expected": "lightcoral" },
"message": "Яка властивість змінює колір фону елемента?",
"message": "Встановіть <kbd>background: lightcoral</kbd>",
"options": { "exact": false }
}
]
@@ -56,7 +56,7 @@
{
"type": "property_value",
"value": { "property": "font-size", "expected": "5vw" },
"message": "Яка одиниця CSS масштабується відносно ширини viewport?"
"message": "Встановіть <kbd>font-size: 5vw</kbd>"
}
]
},
@@ -77,18 +77,18 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "grid" },
"message": "Який режим display дозволяє визначати рядки та колонки?"
"message": "Встановіть <kbd>display: grid</kbd>"
},
{
"type": "regex",
"value": "repeat\\(auto-fit,\\s*minmax\\(200px,\\s*1fr\\)\\)",
"message": "Спробуйте <kbd>repeat()</kbd> з <kbd>auto-fit</kbd> та <kbd>minmax()</kbd> — які мінімальний та максимальний розміри створять гнучкі колонки?",
"message": "Використайте <kbd>repeat(auto-fit, minmax(200px, 1fr))</kbd>",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Яка властивість додає простір між елементами grid?"
"message": "Встановіть <kbd>gap: 1rem</kbd>"
}
]
},
@@ -109,7 +109,7 @@
{
"type": "regex",
"value": "@media\\s*\\(min-width:\\s*768px\\)",
"message": "Яка умова <kbd>@media</kbd> застосовує стилі, коли viewport має ширину щонайменше 768px?",
"message": "Використайте <kbd>@media (min-width: 768px)</kbd>",
"options": { "caseSensitive": false }
},
{
@@ -121,7 +121,7 @@
{
"type": "property_value",
"value": { "property": "width", "expected": "250px" },
"message": "Яка властивість контролює ширину сайдбару на великих екранах?",
"message": "Встановіть <kbd>width: 250px</kbd>",
"options": { "exact": false }
}
]

12
lessons/uk/flexbox.json
View File

@@ -22,7 +22,7 @@
{
"type": "property_value",
"value": { "property": "display", "expected": "flex" },
"message": "Яке значення display перетворює елемент на гнучкий контейнер?"
"message": "Встановіть <kbd>display: flex</kbd>"
}
]
},
@@ -43,7 +43,7 @@
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Яка властивість створює відстань між flex-елементами без використання margin?"
"message": "Встановіть <kbd>gap: 1rem</kbd>"
}
]
},
@@ -64,7 +64,7 @@
{
"type": "property_value",
"value": { "property": "justify-content", "expected": "space-between" },
"message": "Яке значення <kbd>justify-content</kbd> розміщує перший та останній елементи на протилежних краях?"
"message": "Встановіть <kbd>justify-content: space-between</kbd>"
}
]
},
@@ -85,7 +85,7 @@
{
"type": "property_value",
"value": { "property": "align-items", "expected": "center" },
"message": "Яка властивість вирівнює flex-елементи вздовж поперечної осі?"
"message": "Встановіть <kbd>align-items: center</kbd>"
}
]
},
@@ -106,7 +106,7 @@
{
"type": "property_value",
"value": { "property": "flex-wrap", "expected": "wrap" },
"message": "Яка властивість дозволяє flex-елементам переходити на кілька рядків?"
"message": "Встановіть <kbd>flex-wrap: wrap</kbd>"
}
]
},
@@ -127,7 +127,7 @@
{
"type": "property_value",
"value": { "property": "flex", "expected": "1" },
"message": "Яка властивість змушує flex-елемент зростати, щоб заповнити залишковий простір?"
"message": "Встановіть <kbd>flex: 1</kbd>"
}
]
}

7
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@codemirror/commands": "^6.10.1",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.11",
"@codemirror/lang-javascript": "^6.2.5",
"@codemirror/lang-markdown": "^6.5.0",
"@codemirror/state": "^6.5.2",
"@codemirror/theme-one-dark": "^6.1.3",
@@ -208,9 +209,9 @@
}
},
"node_modules/@codemirror/lang-javascript": {
"version": "6.2.4",
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
"integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
"version": "6.2.5",
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
"integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
"license": "MIT",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",

1
package.json
View File

@@ -37,6 +37,7 @@
"@codemirror/commands": "^6.10.1",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.11",
"@codemirror/lang-javascript": "^6.2.5",
"@codemirror/lang-markdown": "^6.5.0",
"@codemirror/state": "^6.5.2",
"@codemirror/theme-one-dark": "^6.1.3",

6
schemas/code-crispies-module-schema.json
View File

@@ -19,8 +19,8 @@
},
"mode": {
"type": "string",
"enum": ["css", "tailwind", "html", "markdown"],
"description": "Whether this module teaches CSS, Tailwind, HTML, or Markdown"
"enum": ["css", "tailwind", "html", "markdown", "javascript"],
"description": "Whether this module teaches CSS, Tailwind, HTML, Markdown, or JavaScript"
},
"difficulty": {
"type": "string",
@@ -60,7 +60,7 @@
},
"mode": {
"type": "string",
"enum": ["css", "tailwind", "html", "markdown"],
"enum": ["css", "tailwind", "html", "markdown", "javascript"],
"description": "Override module mode for individual lessons"
},
"tailwindConfig": {

87
specs/004-pedagogical-messages/plan.md
View File

@@ -1,87 +0,0 @@
# Implementation Plan
## 1. Objective
Rewrite all answer-revealing validation error messages across lesson JSON files to use pedagogical hints (concept questions, property-name nudges, directional guidance) instead of literal CSS solutions. This eliminates the fail-then-copy anti-pattern and promotes genuine learning.
## 2. Approach
**Phase-based, content-first strategy:**
1. Define a message style guide with 3 hint categories:
- **Concept question:** "Which property adds space inside an element?" (for property discovery)
- **Property hint:** "Check the `padding` property" (when the property is known but value is wrong)
- **Directional nudge:** "The items need to wrap to the next line" (for layout concepts)
2. Rewrite English priority modules first (flexbox, box-model, colors, positioning) — these are 100% answer-revealing and form the template for all other rewrites.
3. Rewrite remaining English modules, reusing the same hint patterns established in step 2.
4. Update localized variants with equivalent pedagogical messages in each target language (ar, de, es, pl, uk), translating the English hints while preserving natural phrasing in each language.
5. Run `npm run format.lessons` to ensure consistent formatting, then run tests.
## 3. File Mapping
### Files to modify (message field only, no validation logic changes):
**English priority (create → N/A, modify → 4, delete → N/A):**
- `lessons/flexbox.json` — modify 6 messages
- `lessons/01-box-model.json` — modify 10 messages
- `lessons/03-colors.json` — modify 4 messages
- `lessons/12-positioning.json` — modify 5 messages
**English remaining (modify → 13):**
- `lessons/00-basics.json` — modify 4 messages
- `lessons/00-basic-selectors.json` — modify 15 messages
- `lessons/01-advanced-selectors.json` — modify 8 messages
- `lessons/04-typography.json` — modify 1 message
- `lessons/05-units-variables.json` — modify 3 messages
- `lessons/06-transitions-animations.json` — modify 8 messages
- `lessons/07-layouts.json` — modify 8 messages
- `lessons/08-responsive.json` — modify 8 messages
- `lessons/09-gradients.json` — modify 3 messages
- `lessons/10-tailwind-basics.json` — modify 16 messages
- `lessons/11-filters.json` — modify 4 messages
- `lessons/13-pseudo-elements.json` — modify 4 messages
- `lessons/grid.json` — modify 5 messages
**Localized variants (modify):**
- `lessons/ar/flexbox.json`, `lessons/ar/01-box-model.json`, + other ar/ modules with answer-revealing messages
- `lessons/de/flexbox.json`, `lessons/de/01-box-model.json`, + other de/ modules
- `lessons/es/flexbox.json`, `lessons/es/01-box-model.json`, + other es/ modules
- `lessons/pl/flexbox.json`, `lessons/pl/01-box-model.json`, + other pl/ modules
- `lessons/uk/flexbox.json`, `lessons/uk/01-box-model.json`, + other uk/ modules
**No new files or deleted files.**
## 4. Architecture Decisions
1. **Message-only changes:** Only the `"message"` string within validation objects is modified. The `type`, `value`, and `options` fields remain untouched. This preserves all validation logic.
2. **No code changes to validator.js:** The validator reads the `message` field as a passthrough string for display. No runtime changes needed.
3. **Hint style per validation type:**
- `property_value` validations → concept question or property hint (since the property and value are tested programmatically, the message should teach the concept, not repeat the answer)
- `regex` validations → directional nudge describing the expected pattern conceptually
- `contains` / `contains_class` validations → concept question about what to include
4. **Localization approach:** Each localized message should be a natural translation of the English pedagogical hint, not a word-for-word translation. The hint category (question, nudge, property hint) should match the English version.
5. **Preserve `<kbd>` tags selectively:** `<kbd>` tags may still be used for property names (e.g., "Check the `<kbd>padding</kbd>` property") but never for complete property-value pairs that reveal the answer.
## 5. Risks
| Risk | Likelihood | Mitigation |
|------|-----------|------------|
| Pedagogical hints are too vague, frustrating learners | Medium | Each hint should name the relevant CSS property or concept — just not the exact value. The task description already provides context. |
| Localized translations lose pedagogical intent | Medium | Use consistent hint categories across languages. Review each language for natural phrasing. |
| Existing tests assert on specific message text | Low | Check test files for hardcoded message assertions before changing. Adjust tests if needed. |
| Formatting inconsistency after bulk edits | Low | Run `npm run format.lessons` after all changes. |
## 6. Testing Strategy
1. **Existing test suite:** Run `npm run test` to verify no regressions. The validator tests should pass since validation logic is unchanged.
2. **Grep audit:** After changes, grep all lesson files for remaining "Set <kbd>" patterns to confirm none were missed.
3. **JSON validity:** Ensure all modified JSON files parse correctly (the format.lessons command will catch syntax errors).
4. **Manual spot-check:** Verify a few lessons in the dev server to confirm messages display correctly in the UI.

50
specs/004-pedagogical-messages/spec.md
View File

@@ -1,50 +0,0 @@
# fix: validation error messages reveal the solution instead of guiding learning
**Issue:** [#4](https://git.librete.ch/libretech/code-crispies/issues/4)
**Repository:** libretech/code-crispies
**Author:** libretech
**State:** open
**Labels:** none
## Issue Body
Pedagogy audit: 88% of exercises reveal the answer in error messages, creating a fail-then-copy loop. Change validation messages from 'Set padding: 1rem' to 'Which property adds space between content and the element edge?' This applies across all modules — start with flexbox, box-model, and colors (the 3 worst offenders).
## Acceptance Criteria
1. Validation error messages in **flexbox**, **box-model**, and **colors** modules must no longer reveal the exact CSS property-value answer
2. Replacement messages should use pedagogical hints: concept questions, property-name hints, or directional guidance — never the literal solution
3. All remaining English lesson modules with answer-revealing messages must also be rewritten
4. Localized variants (ar/, de/, es/, pl/, uk/) of affected modules must be updated with equivalent pedagogical messages in each language
5. Existing validations (type, value, options) must remain unchanged — only the `"message"` field is modified
6. All existing tests must continue to pass
## Scope
### English priority modules (100% answer-revealing):
- `lessons/flexbox.json` — 6 messages
- `lessons/01-box-model.json` — 10 messages
- `lessons/03-colors.json` — 4 messages
- `lessons/12-positioning.json` — 5 messages
### English remaining modules (partial answer-revealing):
- `lessons/00-basics.json` — 4 of 26
- `lessons/00-basic-selectors.json` — 15 of 18
- `lessons/01-advanced-selectors.json` — 8 of 49
- `lessons/04-typography.json` — 1 of 9
- `lessons/05-units-variables.json` — 3 of 5
- `lessons/06-transitions-animations.json` — 8 of 13
- `lessons/07-layouts.json` — 8 of 11
- `lessons/08-responsive.json` — 8 of 10
- `lessons/09-gradients.json` — 3 of 7
- `lessons/10-tailwind-basics.json` — 16 of 17
- `lessons/11-filters.json` — 4 of 7
- `lessons/13-pseudo-elements.json` — 4 of 8
- `lessons/grid.json` — 5 of 9
### Localized variants (each language directory):
- `lessons/ar/` — Arabic
- `lessons/de/` — German
- `lessons/es/` — Spanish
- `lessons/pl/` — Polish
- `lessons/uk/` — Ukrainian

39
specs/004-pedagogical-messages/tasks.md
View File

@@ -1,39 +0,0 @@
# Tasks
## Phase 1: Preparation
- [X] Task 1.1: Audit existing tests for hardcoded validation message assertions; note any that need updating
- [X] Task 1.2: Read each priority English module and draft replacement messages using the hint style guide (concept question / property hint / directional nudge)
## Phase 2: English Priority Modules (100% answer-revealing)
- [X] Task 2.1: Rewrite validation messages in `lessons/flexbox.json` (6 messages) [P]
- [X] Task 2.2: Rewrite validation messages in `lessons/01-box-model.json` (10 messages) [P]
- [X] Task 2.3: Rewrite validation messages in `lessons/03-colors.json` (4 messages) [P]
- [X] Task 2.4: Rewrite validation messages in `lessons/12-positioning.json` (5 messages) [P]
## Phase 3: English Remaining Modules
- [X] Task 3.1: Rewrite messages in `lessons/00-basic-selectors.json` (15 messages) [P]
- [X] Task 3.2: Rewrite messages in `lessons/00-basics.json` (4 messages) [P]
- [X] Task 3.3: Rewrite messages in `lessons/01-advanced-selectors.json` (8 messages) [P]
- [X] Task 3.4: Rewrite messages in `lessons/04-typography.json` (1 message) [P]
- [X] Task 3.5: Rewrite messages in `lessons/05-units-variables.json` (3 messages) [P]
- [X] Task 3.6: Rewrite messages in `lessons/06-transitions-animations.json` (8 messages) [P]
- [X] Task 3.7: Rewrite messages in `lessons/07-layouts.json` (8 messages) [P]
- [X] Task 3.8: Rewrite messages in `lessons/08-responsive.json` (8 messages) [P]
- [X] Task 3.9: Rewrite messages in `lessons/09-gradients.json` (3 messages) [P]
- [X] Task 3.10: Rewrite messages in `lessons/10-tailwind-basics.json` (16 messages) [P]
- [X] Task 3.11: Rewrite messages in `lessons/11-filters.json` (4 messages) [P]
- [X] Task 3.12: Rewrite messages in `lessons/13-pseudo-elements.json` (4 messages) [P]
- [X] Task 3.13: Rewrite messages in `lessons/grid.json` (5 messages) [P]
## Phase 4: Localized Variants
- [X] Task 4.1: Update Arabic (ar/) localized modules with pedagogical messages [P]
- [X] Task 4.2: Update German (de/) localized modules with pedagogical messages [P]
- [X] Task 4.3: Update Spanish (es/) localized modules with pedagogical messages [P]
- [X] Task 4.4: Update Polish (pl/) localized modules with pedagogical messages [P]
- [X] Task 4.5: Update Ukrainian (uk/) localized modules with pedagogical messages [P]
## Phase 5: Validation & Polish
- [X] Task 5.1: Run `npm run format.lessons` to ensure JSON formatting consistency
- [X] Task 5.2: Run `npm run test` and fix any test failures related to message text assertions
- [X] Task 5.3: Grep audit — verify no "Set <kbd>" answer-revealing patterns remain in any lesson file
- [X] Task 5.4: Spot-check a few lessons via `npm start` to confirm messages render correctly in the UI

67
src/app.js
View File

@@ -578,6 +578,11 @@ function updateEditorForMode(mode) {
label: "Markdown Editor",
cmMode: "markdown"
},
javascript: {
placeholder: "// Write your JavaScript here...",
label: "JavaScript Editor",
cmMode: "javascript"
},
playground: {
placeholder: "<style>\n /* CSS here */\n</style>\n\n<!-- HTML here -->",
label: "HTML & CSS",
@@ -1493,6 +1498,64 @@ This is \`inline code\`.</code></pre>
</div>
</div>
</div>
`,
javascript: `
<div class="section-overview">
<p><strong>JavaScript</strong> is the programming language of the web. It makes pages interactive—responding to clicks, updating content, and manipulating the DOM (Document Object Model). Every modern website uses JavaScript to create dynamic user experiences.</p>
<p>Start with the fundamentals: declaring variables with <code>const</code> and <code>let</code>, selecting elements with <code>querySelector</code>, changing content and styles, and responding to user events like clicks.</p>
</div>
<div class="topic-row">
<div class="topic-text">
<h2>Variables</h2>
<p>Store values using <code>const</code> (cannot be reassigned) and <code>let</code> (can be updated). Use template literals with backticks to build dynamic strings with embedded expressions.</p>
<p>
<a href="#js-variables/0" class="topic-link">Practice variables</a>
</p>
</div>
<div class="topic-code">
<div class="code-block">
<pre><code>const name = "Ada";
let score = 0;
const msg = \`Hi, \${name}!\`;</code></pre>
</div>
</div>
</div>
<div class="topic-row">
<div class="topic-text">
<h2>DOM Manipulation</h2>
<p>Use <code>document.querySelector()</code> to find elements, <code>textContent</code> to change text, and <code>style</code> to modify CSS properties directly from JavaScript.</p>
<p>
<a href="#js-dom/0" class="topic-link">Practice DOM</a>
</p>
</div>
<div class="topic-code">
<div class="code-block">
<pre><code>const el = document.querySelector("#box");
el.textContent = "Hello!";
el.style.backgroundColor = "gold";</code></pre>
</div>
</div>
</div>
<div class="topic-row">
<div class="topic-text">
<h2>Events</h2>
<p>Use <code>addEventListener</code> to respond to user interactions. Handle clicks, toggle classes, and build interactive features like counters and toggles.</p>
<p>
<a href="#js-events/0" class="topic-link">Practice events</a>
</p>
</div>
<div class="topic-code">
<div class="code-block">
<pre><code>btn.addEventListener("click", () => {
count++;
out.textContent = count;
});</code></pre>
</div>
</div>
</div>
`
};
@@ -2310,7 +2373,7 @@ function showLandingPage() {
*/
function renderFooterLessonLinks() {
const modules = lessonEngine.modules || [];
const sectionGroups = { css: [], html: [] };
const sectionGroups = { css: [], html: [], markdown: [], javascript: [] };
modules.forEach((module) => {
if (module.excludeFromProgress) return;
@@ -2347,7 +2410,7 @@ function renderFooterLessonLinks() {
* Update progress indicators on landing page
*/
function updateLandingProgress() {
["css", "html", "markdown"].forEach((sectionId) => { // tailwind temporarily disabled
["css", "html", "markdown", "javascript"].forEach((sectionId) => { // tailwind temporarily disabled
const progressEl = document.getElementById(`${sectionId}-progress`);
if (progressEl) {
const sectionModules = getModulesBySection(lessonEngine.modules, sectionId);

79
src/config/lessons.js
View File

@@ -31,6 +31,9 @@ import filtersEN from "../../lessons/11-filters.json";
import positioningEN from "../../lessons/12-positioning.json";
import pseudoElementsEN from "../../lessons/13-pseudo-elements.json";
import markdownBasicsEN from "../../lessons/40-markdown-basics.json";
import jsVariablesEN from "../../lessons/50-js-variables.json";
import jsDomEN from "../../lessons/51-js-dom.json";
import jsEventsEN from "../../lessons/52-js-events.json";
import playgroundEN from "../../lessons/98-playground.json";
import goodbyeEN from "../../lessons/99-goodbye.json";
@@ -165,6 +168,10 @@ const moduleStoreEN = [
htmlTablesEN,
// Markdown
markdownBasicsEN,
// JavaScript
jsVariablesEN,
jsDomEN,
jsEventsEN,
// Outro
goodbyeEN,
playgroundEN
@@ -206,6 +213,10 @@ const moduleStoreDE = [
htmlTablesDE,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -247,6 +258,10 @@ const moduleStorePL = [
htmlTablesPL,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -288,6 +303,10 @@ const moduleStoreES = [
htmlTablesES,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -329,6 +348,10 @@ const moduleStoreAR = [
htmlTablesAR,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -370,6 +393,10 @@ const moduleStoreUK = [
htmlTablesUK,
// Markdown
markdownBasicsEN, // Using EN fallback until translated
// JavaScript
jsVariablesEN, // Using EN fallback until translated
jsDomEN, // Using EN fallback until translated
jsEventsEN, // Using EN fallback until translated
// Outro
goodbyeEN,
playgroundEN
@@ -385,6 +412,58 @@ const moduleStores = {
uk: moduleStoreUK
};
/**
* Category labels for sidebar section headers.
* Maps module IDs to their visual grouping label.
*/
const moduleCategories = {
// CSS Basics
"css-basic-selectors": "CSS Basics",
colors: "CSS Basics",
gradients: "CSS Basics",
typography: "CSS Basics",
"box-model": "CSS Basics",
// CSS Layout
flexbox: "CSS Layout",
grid: "CSS Layout",
positioning: "CSS Layout",
"units-variables": "CSS Layout",
responsive: "CSS Layout",
// CSS Polish
"transitions-animations": "CSS Polish",
filters: "CSS Polish",
"pseudo-elements": "CSS Polish",
// HTML Structure
"html-elements": "HTML Structure",
"html-semantic": "HTML Structure",
"html-figure": "HTML Structure",
"html-svg": "HTML Structure",
// HTML Interactive
"html-details-summary": "HTML Interactive",
"html-dialog": "HTML Interactive",
"html-progress-meter": "HTML Interactive",
"html-forms-basic": "HTML Interactive",
"html-forms-validation": "HTML Interactive",
"html-forms-fieldset": "HTML Interactive",
"html-datalist": "HTML Interactive",
"html-tables": "HTML Interactive",
// Markdown
"markdown-basics": "Markdown",
// JavaScript
"js-variables": "JavaScript",
"js-dom": "JavaScript",
"js-events": "JavaScript"
};
/**
* Get the sidebar category label for a module
* @param {string} moduleId - The module ID
* @returns {string|null} The category label, or null for uncategorized modules (welcome, outro)
*/
export function getModuleCategory(moduleId) {
return moduleCategories[moduleId] || null;
}
/**
* Load all available modules for a given language
* @param {string} language - Language code ('en', 'de', 'pl', 'es', 'ar', 'uk')

8
src/config/sections.js
View File

@@ -31,6 +31,13 @@ export const sections = {
description: "Lightweight markup language for formatting text",
color: "#5b8dd9",
order: 4
},
javascript: {
id: "javascript",
title: "JavaScript",
description: "Variables, DOM manipulation, and event handling",
color: "#f0c040",
order: 5
}
};
@@ -65,6 +72,7 @@ export function getModuleSection(module) {
if (mode === "html") return "html";
if (mode === "tailwind") return "tailwind";
if (mode === "markdown") return "markdown";
if (mode === "javascript") return "javascript";
return "css";
}

14
src/helpers/renderer.js
View File

@@ -2,6 +2,7 @@
* Renderer - Handles UI updates for the CSS learning platform
*/
import { t } from "../i18n.js";
import { getModuleCategory } from "../config/lessons.js";
/**
* Compute lesson difficulty based on lesson structure
@@ -72,8 +73,21 @@ export function renderModuleList(container, modules, onSelectModule, onSelectLes
}
}
// Track current category for section headers
let currentCategory = null;
// Create list items for each module
modules.forEach((module) => {
// Insert section header when category changes
const category = getModuleCategory(module.id);
if (category && category !== currentCategory) {
currentCategory = category;
const header = document.createElement("h3");
header.className = "module-section-header";
header.textContent = category;
header.setAttribute("aria-hidden", "true");
container.appendChild(header);
}
// Create module container
// Use native <details>/<summary> for expand/collapse
const moduleContainer = document.createElement("details");

76
src/helpers/validator.js
View File

@@ -10,6 +10,8 @@ export function validateUserCode(userCode, lesson) {
return validateHtmlCode(userCode, lesson);
case "tailwind":
return validateTailwindClasses(userCode, lesson);
case "javascript":
return validateJavaScriptCode(userCode, lesson);
case "css":
default:
return validateCssCode(userCode, lesson);
@@ -204,6 +206,80 @@ function validateHtmlCode(userHtml, lesson) {
return result;
}
/**
* Validate user JavaScript code against the lesson requirements
* @param {string} userCode - User submitted JavaScript code
* @param {Object} lesson - The current lesson object
* @returns {Object} Validation result with isValid and message properties
*/
function validateJavaScriptCode(userCode, lesson) {
if (!lesson || !lesson.validations) {
return { isValid: true, message: "No validations specified for this lesson." };
}
const validations = lesson.validations;
let result = {
isValid: true,
validCases: 0,
totalCases: validations.length,
message: "Your CODE looks CRISPY!"
};
for (const validation of validations) {
const { type, value, message, options } = validation;
let validationPassed = false;
switch (type) {
case "contains":
validationPassed = containsValidation(userCode, value, options);
if (!validationPassed) {
result = {
...result,
isValid: false,
message: message || `Your code should include "${value}".`
};
}
break;
case "not_contains":
validationPassed = !containsValidation(userCode, value, options);
if (!validationPassed) {
result = {
...result,
isValid: false,
message: message || `Your code should not include "${value}".`
};
}
break;
case "regex":
validationPassed = regexValidation(userCode, value, options);
if (!validationPassed) {
result = {
...result,
isValid: false,
message: message || "Your code does not match the expected pattern."
};
}
break;
default:
console.warn(`Unknown JavaScript validation type: ${type}`);
validationPassed = true;
}
if (validationPassed) {
result.validCases++;
} else {
return result;
}
}
result.validCases = validations.length;
return result;
}
function validateTailwindClasses(userClasses, lesson) {
if (!lesson || !lesson.validations) {
return { isValid: true, message: "No validations specified for this lesson." };

33
src/impl/CodeEditor.js
View File

@@ -8,12 +8,13 @@ import { history } from "@codemirror/commands";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";
import { markdown } from "@codemirror/lang-markdown";
import { javascript } from "@codemirror/lang-javascript";
import { autocompletion } from "@codemirror/autocomplete";
import { abbreviationTracker, expandAbbreviation } from "@emmetio/codemirror6-plugin";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags } from "@lezer/highlight";
// Custom theme with pink accent colors (matching app completed state)
// Custom theme with purple accent colors (matching app completed state)
const crispyTheme = EditorView.theme(
{
"&": {
@@ -21,10 +22,10 @@ const crispyTheme = EditorView.theme(
color: "#c8c8d0"
},
".cm-content": {
caretColor: "#d46d9b"
caretColor: "#9b6dd4"
},
".cm-cursor, .cm-dropCursor": {
borderLeftColor: "#d46d9b"
borderLeftColor: "#9b6dd4"
},
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
backgroundColor: "#3e3e4a"
@@ -35,10 +36,10 @@ const crispyTheme = EditorView.theme(
},
".cm-searchMatch": {
backgroundColor: "#3e3e4a",
outline: "1px solid #d46d9b"
outline: "1px solid #9b6dd4"
},
".cm-searchMatch.cm-searchMatch-selected": {
backgroundColor: "rgba(212, 109, 155, 0.3)"
backgroundColor: "rgba(155, 109, 212, 0.3)"
},
".cm-activeLine": {
backgroundColor: "#2e2e3a"
@@ -63,13 +64,13 @@ const crispyTheme = EditorView.theme(
// Default syntax highlighting (blue accent)
const defaultHighlight = HighlightStyle.define([
{ tag: tags.keyword, color: "#eba6c9" },
{ tag: tags.keyword, color: "#c9a6eb" },
{ tag: tags.operator, color: "#cdd6f4" },
{ tag: tags.variableName, color: "#89b4fa" },
{ tag: tags.propertyName, color: "#89b4fa" },
{ tag: tags.attributeName, color: "#89b4fa" },
{ tag: tags.className, color: "#89b4fa" },
{ tag: tags.tagName, color: "#eba6c9" },
{ tag: tags.tagName, color: "#c9a6eb" },
{ tag: tags.string, color: "#a6e3a1" },
{ tag: tags.number, color: "#fab387" },
{ tag: tags.bool, color: "#fab387" },
@@ -79,20 +80,20 @@ const defaultHighlight = HighlightStyle.define([
{ tag: tags.punctuation, color: "#cdd6f4" },
{ tag: tags.definition(tags.variableName), color: "#89b4fa" },
{ tag: tags.function(tags.variableName), color: "#89b4fa" },
{ tag: tags.atom, color: "#eba6c9" },
{ tag: tags.atom, color: "#c9a6eb" },
{ tag: tags.unit, color: "#a6e3a1" },
{ tag: tags.color, color: "#f9e2af" }
]);
// CSS section highlighting (pink selectors)
// CSS section highlighting (purple selectors)
const cssHighlight = HighlightStyle.define([
{ tag: tags.keyword, color: "#eba6c9" },
{ tag: tags.keyword, color: "#c9a6eb" },
{ tag: tags.operator, color: "#cdd6f4" },
{ tag: tags.variableName, color: "#eba6c9" },
{ tag: tags.variableName, color: "#c9a6eb" },
{ tag: tags.propertyName, color: "#89b4fa" },
{ tag: tags.attributeName, color: "#89b4fa" },
{ tag: tags.className, color: "#eba6c9" },
{ tag: tags.tagName, color: "#eba6c9" },
{ tag: tags.className, color: "#c9a6eb" },
{ tag: tags.tagName, color: "#c9a6eb" },
{ tag: tags.string, color: "#a6e3a1" },
{ tag: tags.number, color: "#fab387" },
{ tag: tags.bool, color: "#fab387" },
@@ -100,9 +101,9 @@ const cssHighlight = HighlightStyle.define([
{ tag: tags.comment, color: "#6c7086", fontStyle: "italic" },
{ tag: tags.bracket, color: "#cdd6f4" },
{ tag: tags.punctuation, color: "#cdd6f4" },
{ tag: tags.definition(tags.variableName), color: "#eba6c9" },
{ tag: tags.definition(tags.variableName), color: "#c9a6eb" },
{ tag: tags.function(tags.variableName), color: "#89b4fa" },
{ tag: tags.atom, color: "#eba6c9" },
{ tag: tags.atom, color: "#c9a6eb" },
{ tag: tags.unit, color: "#a6e3a1" },
{ tag: tags.color, color: "#f9e2af" }
]);
@@ -181,7 +182,7 @@ export class CodeEditor {
const fullDoc = prefix + initialValue + suffix;
// Get language extension based on mode
const langExtension = this.mode === "html" ? html() : this.mode === "markdown" ? markdown() : css();
const langExtension = this.mode === "html" ? html() : this.mode === "markdown" ? markdown() : this.mode === "javascript" ? javascript() : css();
// Create read-only zones decorations
const readOnlyMark = Decoration.mark({ class: "cm-readonly-zone" });

92
src/impl/LessonEngine.js
View File

@@ -216,18 +216,18 @@ export class LessonEngine {
iframe.style.height = "100%";
iframe.style.border = "none";
iframe.title = "Preview";
iframe.setAttribute("sandbox", "allow-scripts");
const container = document.getElementById(previewContainer || "preview-area");
container.innerHTML = "";
container.appendChild(iframe);
let html;
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
if (mode === "html" || mode === "playground") {
// For HTML/playground mode, user code IS the HTML content (may include <style> blocks)
const userHtml = this.userCode || "";
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -239,11 +239,11 @@ export class LessonEngine {
${userHtml}
</body>
</html>
`;
`);
} else if (mode === "tailwind") {
// For Tailwind mode, user code goes directly in HTML classes
const htmlWithClasses = this.injectTailwindClasses(previewHTML, this.userCode);
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -256,11 +256,11 @@ export class LessonEngine {
${htmlWithClasses}
</body>
</html>
`;
`);
} else if (mode === "markdown") {
// For Markdown mode, parse user code to HTML
const renderedHtml = marked.parse(this.userCode || "");
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -288,11 +288,35 @@ export class LessonEngine {
${renderedHtml}
</body>
</html>
`;
`);
} else if (mode === "javascript") {
// For JavaScript mode, inject user code as a script
const { codePrefix, codeSuffix } = this.currentLesson;
const fullScript = `${codePrefix || ""}${this.userCode || ""}${codeSuffix || ""}`;
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
<style>html, body { min-height: 100%; margin: 0; }</style>
<style>${previewBaseCSS || ""}</style>
<style>${sandboxCSS || ""}</style>
</head>
<body>
${previewHTML || ""}
<script>
try {
${fullScript}
} catch (e) {
console.error("Script error:", e);
}
</script>
</body>
</html>
`);
} else {
// Original CSS mode
const userCssWithWrapper = this.getCompleteCss();
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -305,10 +329,10 @@ export class LessonEngine {
${previewHTML}
</body>
</html>
`;
`);
}
iframe.srcdoc = html;
iframeDoc.close();
}
injectTailwindClasses(html, userClasses) {
@@ -341,7 +365,6 @@ export class LessonEngine {
iframe.style.height = "100%";
iframe.style.border = "none";
iframe.title = "Expected Result";
iframe.setAttribute("sandbox", "allow-scripts");
const container = document.getElementById("preview-expected");
if (!container) return;
@@ -349,11 +372,12 @@ export class LessonEngine {
container.innerHTML = "";
container.appendChild(iframe);
let html;
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
if (mode === "html" || mode === "playground") {
// For HTML/playground mode, solution code IS the HTML content
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -365,11 +389,11 @@ export class LessonEngine {
${solutionCode}
</body>
</html>
`;
`);
} else if (mode === "tailwind") {
// For Tailwind mode, inject solution classes into HTML
const htmlWithClasses = this.injectTailwindClasses(previewHTML, solutionCode);
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -382,11 +406,11 @@ export class LessonEngine {
${htmlWithClasses}
</body>
</html>
`;
`);
} else if (mode === "markdown") {
// For Markdown mode, parse solution to HTML
const renderedHtml = marked.parse(solutionCode || "");
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -414,12 +438,36 @@ export class LessonEngine {
${renderedHtml}
</body>
</html>
`;
`);
} else if (mode === "javascript") {
// For JavaScript mode, inject solution code as a script
const { codePrefix, codeSuffix } = this.currentLesson;
const fullScript = `${codePrefix || ""}${solutionCode}${codeSuffix || ""}`;
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
<style>html, body { min-height: 100%; margin: 0; }</style>
<style>${previewBaseCSS || ""}</style>
<style>${sandboxCSS || ""}</style>
</head>
<body>
${previewHTML || ""}
<script>
try {
${fullScript}
} catch (e) {
console.error("Script error:", e);
}
</script>
</body>
</html>
`);
} else {
// CSS mode - wrap solution with prefix/suffix
const { codePrefix, codeSuffix } = this.currentLesson;
const solutionCss = `${codePrefix || ""}${solutionCode}${codeSuffix || ""}`;
html = `
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
@@ -432,10 +480,10 @@ export class LessonEngine {
${previewHTML}
</body>
</html>
`;
`);
}
iframe.srcdoc = html;
iframeDoc.close();
}
/**

10
src/index.html
View File

@@ -4,7 +4,6 @@
<meta charset="UTF-8" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://librete.ch https://liberapay.com; style-src 'self' 'unsafe-inline'; connect-src 'self' https://*.supabase.co wss://*.supabase.co; img-src 'self' https://liberapay.com data:; font-src 'self'; frame-src 'self' blob:" />
<!-- Primary Meta Tags -->
<title>CODE CRISPIES - Learn HTML & CSS Interactively | Free Coding Practice</title>
@@ -77,6 +76,7 @@
<a href="#html" class="nav-link" data-section="html">HTML</a>
<!-- <a href="#tailwind" class="nav-link" data-section="tailwind">Tailwind</a> -->
<a href="#markdown" class="nav-link" data-section="markdown">Markdown</a>
<a href="#javascript" class="nav-link" data-section="javascript">JS</a>
<a href="#reference/css" class="nav-link nav-link-ref" data-section="reference">Reference</a>
</nav>
<button id="auth-trigger-header" class="btn btn-outline btn-sm" data-i18n="authLogin">Log In</button>
@@ -178,6 +178,12 @@
<p data-i18n="landingMarkdownDesc">Lightweight markup for formatting text</p>
<span class="section-card-progress" id="markdown-progress"></span>
</a>
<a href="#javascript" class="section-card" data-section="javascript">
<div class="section-card-icon" style="background: #f0c040">JS</div>
<h3>JavaScript</h3>
<p data-i18n="landingJsDesc">Variables, DOM manipulation, and event handling</p>
<span class="section-card-progress" id="javascript-progress"></span>
</a>
</div>
<p class="device-notice" data-i18n-html="deviceNotice">
<strong>Best on desktop or tablet (landscape).</strong> Mobile works, but larger screens make coding easier.
@@ -478,6 +484,8 @@
<a href="#css" class="sidebar-nav-link" data-section="css">CSS</a>
<a href="#html" class="sidebar-nav-link" data-section="html">HTML</a>
<!-- <a href="#tailwind" class="sidebar-nav-link" data-section="tailwind">Tailwind</a> -->
<a href="#markdown" class="sidebar-nav-link" data-section="markdown">Markdown</a>
<a href="#javascript" class="sidebar-nav-link" data-section="javascript">JavaScript</a>
<button id="auth-trigger-mobile" class="sidebar-nav-link sidebar-auth-link" data-i18n="authLogin">Log In</button>
</nav>

199
src/main.css
View File

@@ -1,15 +1,15 @@
/* ================= BASE THEME ================= */
:root {
/* Primary colors */
--primary-color: #c9507a;
--primary-light: #e077a0;
--primary-dark: #a83d65;
--primary-color: #5e4b8b;
--primary-light: #8a77b5;
--primary-dark: #724a95;
/* Section colors (default to CSS pink) */
--section-color: #d95a8a;
--section-color-light: #e87da6;
--section-color-dark: #b84472;
--section-color-rgb: 217, 90, 138;
/* Section colors (default to CSS purple) */
--section-color: #9163b8;
--section-color-light: #a87dc8;
--section-color-dark: #724a95;
--section-color-rgb: 145, 99, 184;
/* Secondary colors */
--secondary-color: #444444;
@@ -23,9 +23,9 @@
--white-text: #ffffff;
/* Background colors */
--bg-color: #fcf7f9;
--bg-color: #f8f7fc;
--panel-bg: #ffffff;
--code-bg: #faf5f7;
--code-bg: #f7f5fa;
--editor-bg: #1e1e1e;
--editor-highlight: #303030;
@@ -34,9 +34,9 @@
/* Status colors */
--info-color: #7a93fe;
--success-color: #d46d9b;
--success-color-dark: #b84472;
--success-color-light: #e8b8d0;
--success-color: #9b6dd4;
--success-color-dark: #7c4dff;
--success-color-light: #c9b8e8;
--error-color: #cb6e75;
--danger-color: #dc3545;
@@ -252,11 +252,11 @@ kbd {
}
.logo h1 .code-text {
color: #d95a8a;
color: #9163b8;
}
.logo h1 .crispies-text {
background: #d95a8a;
background: #9163b8;
color: white;
padding: 0.15rem 0.35rem;
border-radius: 4px;
@@ -291,6 +291,14 @@ kbd {
background: #5b8dd9;
}
[data-section="javascript"] .logo h1 .code-text {
color: #d4a020;
}
[data-section="javascript"] .logo h1 .crispies-text {
background: #d4a020;
}
.help-toggle {
width: 28px;
height: 28px;
@@ -468,7 +476,7 @@ kbd {
.completion-badge {
display: inline-block;
padding: 0.15rem 0.5rem;
background: linear-gradient(135deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
color: white;
font-size: 0.7rem;
font-weight: 600;
@@ -714,7 +722,7 @@ kbd {
position: absolute;
inset: var(--spacing-md);
border-radius: var(--border-radius-md);
background: conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
background: conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
filter: blur(30px);
opacity: 0;
animation: spin-glow 3s ease-out forwards;
@@ -727,7 +735,7 @@ kbd {
position: absolute;
inset: var(--spacing-md);
border-radius: var(--border-radius-md);
background: conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a);
background: conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8);
filter: blur(30px);
opacity: 0.35;
pointer-events: none;
@@ -816,7 +824,7 @@ kbd {
border: 6px solid transparent;
background:
linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
conic-gradient(from 0deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
conic-gradient(from 0deg, #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
}
.preview-wrapper.matched {
@@ -824,7 +832,7 @@ kbd {
border: 6px solid transparent;
background:
linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
conic-gradient(from var(--border-angle), #d95a8a, #d45aa0, #1aafb8, #ff4d88, #d95a8a) border-box;
conic-gradient(from var(--border-angle), #9163b8, #d45aa0, #1aafb8, #7c4dff, #9163b8) border-box;
animation: spin-border 3s ease-out forwards;
overflow: visible;
}
@@ -844,7 +852,7 @@ kbd {
font-weight: 800;
letter-spacing: 0.05em;
color: white;
background: linear-gradient(135deg, #d95a8a 0%, #d45aa0 50%, #ff4d88 100%);
background: linear-gradient(135deg, #9163b8 0%, #d45aa0 50%, #7c4dff 100%);
padding: 1.25rem 2rem 1.75rem;
z-index: 10;
pointer-events: none;
@@ -1142,7 +1150,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #d95a8a, #d45aa0, #1aafb8, #ff4d88);
background: linear-gradient(90deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
background-size: calc(100% * 100 / var(--progress-percent, 100)) 100%;
border-radius: 4px;
transition: width 0.3s ease;
@@ -1206,7 +1214,7 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
}
/* Each milestone gets a color evenly distributed across the gradient
Gradient: #d95a8a (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #ff4d88 (100%) */
Gradient: #9163b8 (0%) → #d45aa0 (33%) → #1aafb8 (67%) → #7c4dff (100%) */
.milestone.reached:nth-child(1) { background: #a55eac; } /* ~14% */
.milestone.reached:nth-child(2) { background: #c459a2; } /* ~28% */
.milestone.reached:nth-child(3) { background: #d45aa0; } /* ~33% pink */
@@ -1214,12 +1222,12 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
.milestone.reached:nth-child(5) { background: #7785ac; } /* ~50% */
.milestone.reached:nth-child(6) { background: #33a3b6; } /* ~62% */
.milestone.reached:nth-child(7) { background: #4889d8; } /* ~80% */
.milestone.reached:nth-child(8) { background: #ff4d88; } /* 100% */
.milestone.reached:nth-child(8) { background: #7c4dff; } /* 100% */
.milestone.current {
color: white;
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(217, 90, 138, 0.4);
box-shadow: 0 2px 8px rgba(145, 99, 184, 0.4);
}
.milestone.next {
@@ -1249,6 +1257,17 @@ nav.sidebar-section:not(.sidebar-nav-mobile) {
/* No max-height - parent nav.sidebar-section handles overflow */
}
.module-section-header {
font-size: 0.7rem;
text-transform: uppercase;
color: #888;
letter-spacing: 0.08em;
padding: 0.75rem var(--spacing-sm) 0.25rem;
margin: 0;
font-weight: 600;
pointer-events: none;
}
.module-container {
margin-bottom: 4px;
}
@@ -2590,7 +2609,7 @@ input:checked + .toggle-slider::before {
margin-top: var(--spacing-lg);
text-align: center;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, rgba(217, 90, 138, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
background: linear-gradient(135deg, rgba(145, 99, 184, 0.1), rgba(212, 90, 160, 0.1), rgba(26, 175, 184, 0.1));
border-radius: var(--border-radius-md);
color: var(--light-text);
font-size: 0.9rem;
@@ -2840,7 +2859,7 @@ input:checked + .toggle-slider::before {
}
.section-overview code {
background: rgba(var(--section-color-rgb, 217, 90, 138), 0.1);
background: rgba(var(--section-color-rgb, 145, 99, 184), 0.1);
color: var(--section-color-dark, var(--primary-dark));
padding: 0.1rem 0.35rem;
border-radius: 4px;
@@ -2950,7 +2969,7 @@ input:checked + .toggle-slider::before {
/* Inline code in topic text */
.topic-text code {
background: rgba(var(--section-color-rgb, 217, 90, 138), 0.1);
background: rgba(var(--section-color-rgb, 145, 99, 184), 0.1);
color: var(--section-color-dark, var(--primary-dark));
padding: 0.15rem 0.4rem;
border-radius: 4px;
@@ -3592,7 +3611,7 @@ input:checked + .toggle-slider::before {
}
/* ================= SECTION COLOR CODING ================= */
/* CSS Section uses default pink from :root */
/* CSS Section uses default purple from :root */
/* HTML Section - Pink (balanced) */
[data-section="html"] {
@@ -3618,9 +3637,17 @@ input:checked + .toggle-slider::before {
--section-color-rgb: 91, 141, 217;
}
/* JavaScript Section - Gold */
[data-section="javascript"] {
--section-color: #d4a020;
--section-color-light: #e0b840;
--section-color-dark: #b08818;
--section-color-rgb: 212, 160, 32;
}
/* Apply section colors to nav links */
.nav-link[data-section="css"] {
color: #d95a8a;
color: #9163b8;
}
.nav-link[data-section="html"] {
@@ -3635,10 +3662,14 @@ input:checked + .toggle-slider::before {
color: #5b8dd9;
}
.nav-link[data-section="javascript"] {
color: #d4a020;
}
.nav-link[data-section="css"]:hover,
.nav-link[data-section="css"].active {
background: rgba(217, 90, 138, 0.1);
color: #a83d65;
background: rgba(145, 99, 184, 0.1);
color: #724a95;
}
.nav-link[data-section="html"]:hover,
@@ -3659,14 +3690,20 @@ input:checked + .toggle-slider::before {
color: #4070b8;
}
.nav-link[data-section="javascript"]:hover,
.nav-link[data-section="javascript"].active {
background: rgba(212, 160, 32, 0.1);
color: #b08818;
}
/* Hint section colors */
body[data-section="css"] .hint {
background: rgba(217, 90, 138, 0.3);
background: rgba(145, 99, 184, 0.3);
border-left-color: #a98cd6;
}
body[data-section="css"] .hint-progress {
background: #d95a8a;
background: #9163b8;
}
body[data-section="html"] .hint {
@@ -3696,6 +3733,15 @@ body[data-section="markdown"] .hint-progress {
background: #5b8dd9;
}
body[data-section="javascript"] .hint {
background: rgba(212, 160, 32, 0.3);
border-left-color: #e0b840;
}
body[data-section="javascript"] .hint-progress {
background: #d4a020;
}
/* RTL hint border */
[dir="rtl"] body[data-section="css"] .hint {
border-right-color: #a98cd6;
@@ -3713,12 +3759,16 @@ body[data-section="markdown"] .hint-progress {
border-right-color: #7ba3e5;
}
[dir="rtl"] body[data-section="javascript"] .hint {
border-right-color: #e0b840;
}
/* Reference nav link colors */
.ref-nav-link[data-ref="css"],
.ref-nav-link[data-ref="selectors"],
.ref-nav-link[data-ref="flexbox"],
.ref-nav-link[data-ref="grid"] {
color: #d95a8a;
color: #9163b8;
}
.ref-nav-link[data-ref="css"]:hover,
@@ -3729,8 +3779,8 @@ body[data-section="markdown"] .hint-progress {
.ref-nav-link[data-ref="flexbox"].active,
.ref-nav-link[data-ref="grid"]:hover,
.ref-nav-link[data-ref="grid"].active {
background: rgba(217, 90, 138, 0.15);
color: #a83d65;
background: rgba(145, 99, 184, 0.15);
color: #724a95;
}
.ref-nav-link[data-ref="html"] {
@@ -3745,21 +3795,21 @@ body[data-section="markdown"] .hint-progress {
/* CodeMirror section color overrides */
body[data-section="css"] .cm-editor .cm-content {
caret-color: #d95a8a !important;
caret-color: #9163b8 !important;
}
body[data-section="css"] .cm-editor .cm-cursor,
body[data-section="css"] .cm-editor .cm-dropCursor {
border-left-color: #d95a8a !important;
border-left-color: #9163b8 !important;
}
body[data-section="css"] .cm-editor .cm-selectionBackground,
body[data-section="css"] .cm-editor .cm-content ::selection {
background-color: rgba(217, 90, 138, 0.25) !important;
background-color: rgba(145, 99, 184, 0.25) !important;
}
body[data-section="css"] .cm-editor .cm-activeLine {
background-color: rgba(217, 90, 138, 0.08) !important;
background-color: rgba(145, 99, 184, 0.08) !important;
}
body[data-section="html"] .cm-editor .cm-content {
@@ -3816,14 +3866,32 @@ body[data-section="markdown"] .cm-editor .cm-activeLine {
background-color: rgba(91, 141, 217, 0.08) !important;
}
body[data-section="javascript"] .cm-editor .cm-content {
caret-color: #d4a020 !important;
}
body[data-section="javascript"] .cm-editor .cm-cursor,
body[data-section="javascript"] .cm-editor .cm-dropCursor {
border-left-color: #d4a020 !important;
}
body[data-section="javascript"] .cm-editor .cm-selectionBackground,
body[data-section="javascript"] .cm-editor .cm-content ::selection {
background-color: rgba(212, 160, 32, 0.25) !important;
}
body[data-section="javascript"] .cm-editor .cm-activeLine {
background-color: rgba(212, 160, 32, 0.08) !important;
}
/* Module pill section colors */
body[data-section="css"] .module-pill {
background: rgba(217, 90, 138, 0.1);
color: #d95a8a;
background: rgba(145, 99, 184, 0.1);
color: #9163b8;
}
body[data-section="css"] .module-pill .level-indicator {
color: #a83d65;
color: #724a95;
}
body[data-section="html"] .module-pill {
@@ -3853,9 +3921,18 @@ body[data-section="markdown"] .module-pill .level-indicator {
color: #4070b8;
}
body[data-section="javascript"] .module-pill {
background: rgba(212, 160, 32, 0.1);
color: #d4a020;
}
body[data-section="javascript"] .module-pill .level-indicator {
color: #b08818;
}
/* Code block border section colors */
body[data-section="css"] .code-block {
border-color: rgba(217, 90, 138, 0.4);
border-color: rgba(145, 99, 184, 0.4);
}
body[data-section="html"] .code-block {
@@ -3870,6 +3947,10 @@ body[data-section="markdown"] .code-block {
border-color: rgba(91, 141, 217, 0.4);
}
body[data-section="javascript"] .code-block {
border-color: rgba(212, 160, 32, 0.4);
}
/* Section code block CodeMirror syntax highlighting overrides */
body[data-section="css"] .code-block .cm-editor .cm-line {
color: #c9c0e0;
@@ -3887,9 +3968,13 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
color: #c0d0e8;
}
body[data-section="javascript"] .code-block .cm-editor .cm-line {
color: #e8dcc0;
}
/* Task instruction bubble section colors */
[data-section="css"] .task-instruction {
background: rgba(217, 90, 138, 0.92);
background: rgba(145, 99, 184, 0.92);
}
[data-section="html"] .task-instruction {
@@ -3904,9 +3989,13 @@ body[data-section="markdown"] .code-block .cm-editor .cm-line {
background: rgba(91, 141, 217, 0.92);
}
[data-section="javascript"] .task-instruction {
background: rgba(212, 160, 32, 0.92);
}
/* Section page progress bar colors */
body[data-section="css"] .section-progress-bar .progress-fill {
background: #d95a8a;
background: #9163b8;
}
body[data-section="html"] .section-progress-bar .progress-fill {
@@ -3921,9 +4010,13 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
background: #5b8dd9;
}
body[data-section="javascript"] .section-progress-bar .progress-fill {
background: #d4a020;
}
/* Section page header colors */
[data-section="css"] .section-hero h1 {
color: #d95a8a;
color: #9163b8;
}
[data-section="html"] .section-hero h1 {
@@ -3938,9 +4031,13 @@ body[data-section="markdown"] .section-progress-bar .progress-fill {
color: #5b8dd9;
}
[data-section="javascript"] .section-hero h1 {
color: #d4a020;
}
/* Lesson title h2 section colors */
body[data-section="css"] #lesson-title {
color: #d95a8a;
color: #9163b8;
}
body[data-section="html"] #lesson-title {
@@ -3955,6 +4052,10 @@ body[data-section="markdown"] #lesson-title {
color: #5b8dd9;
}
body[data-section="javascript"] #lesson-title {
color: #d4a020;
}
/* Section and Reference footer - override landing-footer styles */
.section-footer.landing-footer,
.reference-footer.landing-footer {

30
tests/unit/lessons.test.js
View File

@@ -27,7 +27,35 @@ describe("Lessons Config Module", () => {
modules.forEach((module) => {
module.lessons.forEach((lesson) => {
expect(lesson.mode).toBeDefined();
expect(["html", "css", "tailwind", "markdown", "playground"]).toContain(lesson.mode);
expect(["html", "css", "tailwind", "markdown", "javascript", "playground"]).toContain(lesson.mode);
});
});
});
});
describe("JavaScript modules", () => {
test("should include JavaScript modules", async () => {
const modules = await loadModules();
const moduleIds = modules.map((m) => m.id);
expect(moduleIds).toContain("js-variables");
expect(moduleIds).toContain("js-dom");
expect(moduleIds).toContain("js-events");
});
test("JavaScript modules should have correct mode and structure", async () => {
const modules = await loadModules();
const jsModules = modules.filter((m) => m.mode === "javascript");
expect(jsModules.length).toBe(3);
jsModules.forEach((module) => {
expect(module.lessons.length).toBeGreaterThanOrEqual(3);
module.lessons.forEach((lesson) => {
expect(lesson.mode).toBe("javascript");
expect(lesson.validations.length).toBeGreaterThan(0);
expect(lesson.task).toBeTruthy();
expect(lesson.solution).toBeTruthy();
});
});
});

538
tests/unit/renderer-extended.test.js
View File

@@ -1,538 +0,0 @@
import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
import {
renderModuleList,
renderLesson,
renderLevelIndicator,
renderDifficultyBadge,
showFeedback,
clearFeedback,
updateActiveLessonInSidebar,
computeLessonDifficulty
} from "../../src/helpers/renderer.js";
// Mock i18n
vi.mock("../../src/i18n.js", () => ({
t: (key, params = {}) => {
const translations = {
lessonLabel: "Lesson",
untitledLesson: "Untitled Lesson",
lessonFallback: `Lesson ${params.index || ""}`,
difficulty_easy_label: "Easy difficulty",
difficulty_medium_label: "Medium difficulty",
difficulty_hard_label: "Hard difficulty",
difficulty_easy: "Easy",
difficulty_medium: "Medium",
difficulty_hard: "Hard"
};
return translations[key] || key;
}
}));
describe("Renderer Extended Coverage", () => {
beforeEach(() => {
document.body.innerHTML = `
<div id="module-list"></div>
<div class="lesson-title-row">
<h2 id="title"></h2>
</div>
<div id="description"></div>
<div id="task"></div>
<div id="preview"></div>
<div id="prefix"></div>
<textarea id="input"></textarea>
<div id="suffix"></div>
<div id="level-indicator"></div>
<div class="editor-content"></div>
<input type="checkbox" id="disable-feedback-toggle" checked>
`;
localStorage.clear();
});
describe("renderModuleList - progress tracking", () => {
test("renderModuleList_CorruptedProgress_HandlesGracefully", () => {
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
localStorage.setItem("codeCrispies.progress", "not-valid-json{{{");
const container = document.getElementById("module-list");
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining("Error parsing progress"), expect.anything());
// Should still render modules despite parse error
expect(container.querySelectorAll(".module-header").length).toBe(1);
errorSpy.mockRestore();
});
test("renderModuleList_CompletedModule_AddedCompletedClass", () => {
localStorage.setItem(
"codeCrispies.progress",
JSON.stringify({
mod1: { completed: [0, 1], current: 1 }
})
);
const container = document.getElementById("module-list");
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const header = container.querySelector(".module-header");
expect(header.classList.contains("completed")).toBe(true);
});
test("renderModuleList_PartiallyCompleted_NoCompletedClass", () => {
localStorage.setItem(
"codeCrispies.progress",
JSON.stringify({
mod1: { completed: [0], current: 1 }
})
);
const container = document.getElementById("module-list");
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const header = container.querySelector(".module-header");
expect(header.classList.contains("completed")).toBe(false);
});
test("renderModuleList_CompletedLesson_HasCompletedClass", () => {
localStorage.setItem(
"codeCrispies.progress",
JSON.stringify({
mod1: { completed: [0], current: 1 }
})
);
const container = document.getElementById("module-list");
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const lessonItems = container.querySelectorAll(".lesson-list-item");
expect(lessonItems[0].classList.contains("completed")).toBe(true);
expect(lessonItems[1].classList.contains("completed")).toBe(false);
});
test("renderModuleList_CurrentLesson_HasCurrentClass", () => {
localStorage.setItem(
"codeCrispies.progress",
JSON.stringify({
mod1: { completed: [0], current: 1 }
})
);
const container = document.getElementById("module-list");
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const lessonItems = container.querySelectorAll(".lesson-list-item");
expect(lessonItems[1].classList.contains("current")).toBe(true);
expect(lessonItems[0].classList.contains("current")).toBe(false);
});
});
describe("renderModuleList - welcome/playground always expanded", () => {
test("renderModuleList_WelcomeModule_AlwaysExpanded", () => {
const container = document.getElementById("module-list");
const modules = [{ id: "welcome", title: "Welcome", lessons: [{ title: "Intro" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const details = container.querySelector("details.module-container");
expect(details.open).toBe(true);
});
test("renderModuleList_PlaygroundModule_AlwaysExpanded", () => {
const container = document.getElementById("module-list");
const modules = [{ id: "playground", title: "Playground", lessons: [{ title: "Play" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const details = container.querySelector("details.module-container");
expect(details.open).toBe(true);
});
test("renderModuleList_RegularModule_CollapsedByDefault", () => {
const container = document.getElementById("module-list");
const modules = [{ id: "flexbox", title: "Flexbox", lessons: [{ title: "L1" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const details = container.querySelector("details.module-container");
expect(details.open).toBe(false);
});
});
describe("renderModuleList - lesson fallback title", () => {
test("renderModuleList_NoLessonTitle_UsesFallback", () => {
const container = document.getElementById("module-list");
const modules = [{ id: "mod1", title: "Module 1", lessons: [{}] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const lessonItem = container.querySelector(".lesson-list-item");
expect(lessonItem.textContent).toContain("Lesson");
});
});
describe("renderModuleList - click behavior", () => {
test("renderModuleList_LessonClick_RemovesActiveFromOthers", () => {
const container = document.getElementById("module-list");
const modules = [
{
id: "mod1",
title: "Module 1",
lessons: [{ title: "L1" }, { title: "L2" }]
}
];
const onSelectLesson = vi.fn();
renderModuleList(container, modules, vi.fn(), onSelectLesson);
const lessonItems = container.querySelectorAll(".lesson-list-item");
// Click first lesson
lessonItems[0].click();
expect(lessonItems[0].classList.contains("active")).toBe(true);
expect(onSelectLesson).toHaveBeenCalledWith("mod1", 0);
// Click second lesson
lessonItems[1].click();
expect(lessonItems[0].classList.contains("active")).toBe(false);
expect(lessonItems[1].classList.contains("active")).toBe(true);
expect(onSelectLesson).toHaveBeenCalledWith("mod1", 1);
});
});
describe("renderModuleList - module dataset", () => {
test("renderModuleList_DataAttributes_SetCorrectly", () => {
const container = document.getElementById("module-list");
const modules = [{ id: "flex-mod", title: "Flex Module", lessons: [{ title: "L1" }] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
const details = container.querySelector("details.module-container");
expect(details.dataset.moduleId).toBe("flex-mod");
const header = container.querySelector(".module-header");
expect(header.dataset.moduleId).toBe("flex-mod");
const lesson = container.querySelector(".lesson-list-item");
expect(lesson.dataset.moduleId).toBe("flex-mod");
expect(lesson.dataset.lessonIndex).toBe("0");
});
});
describe("renderModuleList - empty lessons", () => {
test("renderModuleList_EmptyLessonsArray_RendersModuleOnly", () => {
const container = document.getElementById("module-list");
const modules = [{ id: "mod1", title: "Module 1", lessons: [] }];
renderModuleList(container, modules, vi.fn(), vi.fn());
expect(container.querySelectorAll(".module-header").length).toBe(1);
expect(container.querySelectorAll(".lesson-list-item").length).toBe(0);
});
});
describe("renderDifficultyBadge", () => {
test("renderDifficultyBadge_EasyLesson_CreatesEasyBadge", () => {
const container = document.querySelector(".lesson-title-row");
const lesson = { codePrefix: ".box {\n ", solution: "color: red;" };
renderDifficultyBadge(container, lesson);
const badge = container.querySelector(".difficulty-badge");
expect(badge).not.toBeNull();
expect(badge.classList.contains("difficulty-easy")).toBe(true);
expect(badge.querySelectorAll(".bar").length).toBe(3);
});
test("renderDifficultyBadge_MediumLesson_CreatesMediumBadge", () => {
const container = document.querySelector(".lesson-title-row");
const lesson = { codePrefix: "", solution: "p {\n color: red;\n}" };
renderDifficultyBadge(container, lesson);
const badge = container.querySelector(".difficulty-badge");
expect(badge.classList.contains("difficulty-medium")).toBe(true);
});
test("renderDifficultyBadge_HardLesson_CreatesHardBadge", () => {
const container = document.querySelector(".lesson-title-row");
const lesson = { codePrefix: "", solution: ".nav a {\n color: white;\n}" };
renderDifficultyBadge(container, lesson);
const badge = container.querySelector(".difficulty-badge");
expect(badge.classList.contains("difficulty-hard")).toBe(true);
});
test("renderDifficultyBadge_CalledTwice_RemovesPreviousBadge", () => {
const container = document.querySelector(".lesson-title-row");
const lesson1 = { codePrefix: ".box {\n ", solution: "color: red;" };
const lesson2 = { codePrefix: "", solution: ".nav a {\n color: white;\n}" };
renderDifficultyBadge(container, lesson1);
expect(container.querySelectorAll(".difficulty-wrapper").length).toBe(1);
renderDifficultyBadge(container, lesson2);
expect(container.querySelectorAll(".difficulty-wrapper").length).toBe(1);
const badge = container.querySelector(".difficulty-badge");
expect(badge.classList.contains("difficulty-hard")).toBe(true);
});
test("renderDifficultyBadge_HasAriaLabel", () => {
const container = document.querySelector(".lesson-title-row");
const lesson = { codePrefix: ".box {", solution: "color: red;" };
renderDifficultyBadge(container, lesson);
const badge = container.querySelector(".difficulty-badge");
expect(badge.getAttribute("aria-label")).toBeTruthy();
expect(badge.getAttribute("title")).toBeTruthy();
});
});
describe("showFeedback", () => {
test("showFeedback_Success_CreatesSuccessElement", () => {
showFeedback(true, "Great job!");
const feedback = document.querySelector(".feedback-success");
expect(feedback).not.toBeNull();
expect(feedback.innerHTML).toBe("Great job!");
});
test("showFeedback_Success_InsertedAfterEditorContent", () => {
showFeedback(true, "Good!");
const editorContent = document.querySelector(".editor-content");
const feedback = editorContent.nextSibling;
expect(feedback).not.toBeNull();
expect(feedback.classList.contains("feedback-success")).toBe(true);
});
test("showFeedback_Error_ToggleChecked_ShowsError", () => {
const toggle = document.getElementById("disable-feedback-toggle");
toggle.checked = true;
showFeedback(false, "Try again");
const feedback = document.querySelector(".feedback-error");
expect(feedback).not.toBeNull();
expect(feedback.innerHTML).toBe("Try again");
});
test("showFeedback_Error_ToggleUnchecked_HidesError", () => {
const toggle = document.getElementById("disable-feedback-toggle");
toggle.checked = false;
showFeedback(false, "Try again");
const feedback = document.querySelector(".feedback-error");
expect(feedback).toBeNull();
});
test("showFeedback_Error_AutoClearsAfterTimeout", () => {
vi.useFakeTimers();
const toggle = document.getElementById("disable-feedback-toggle");
toggle.checked = true;
showFeedback(false, "Error!");
expect(document.querySelector(".feedback-error")).not.toBeNull();
vi.advanceTimersByTime(3000);
expect(document.querySelector(".feedback-error")).toBeNull();
vi.useRealTimers();
});
test("showFeedback_Success_DoesNotAutoCleanup", () => {
vi.useFakeTimers();
showFeedback(true, "Good!");
vi.advanceTimersByTime(5000);
expect(document.querySelector(".feedback-success")).not.toBeNull();
vi.useRealTimers();
});
test("showFeedback_CalledTwice_ClearsPrevious", () => {
showFeedback(true, "First");
showFeedback(true, "Second");
const feedbacks = document.querySelectorAll(".feedback-success");
expect(feedbacks.length).toBe(1);
expect(feedbacks[0].innerHTML).toBe("Second");
});
});
describe("clearFeedback", () => {
test("clearFeedback_NoExistingFeedback_DoesNotThrow", () => {
expect(() => clearFeedback()).not.toThrow();
});
test("clearFeedback_ExistingFeedback_RemovesIt", () => {
showFeedback(true, "Test");
expect(document.querySelector(".feedback-success")).not.toBeNull();
clearFeedback();
expect(document.querySelector(".feedback-success")).toBeNull();
});
test("clearFeedback_CalledMultipleTimes_Safe", () => {
showFeedback(true, "Test");
clearFeedback();
clearFeedback();
clearFeedback();
expect(document.querySelector(".feedback-success")).toBeNull();
});
test("clearFeedback_ClearsTimeout", () => {
vi.useFakeTimers();
const toggle = document.getElementById("disable-feedback-toggle");
toggle.checked = true;
showFeedback(false, "Error");
clearFeedback();
// Advance past the timeout - should not throw
vi.advanceTimersByTime(5000);
vi.useRealTimers();
});
});
describe("updateActiveLessonInSidebar", () => {
beforeEach(() => {
document.body.innerHTML = `
<details class="module-container" data-module-id="mod1">
<summary class="module-header">Module 1</summary>
<div class="lessons-container">
<button class="lesson-list-item active" data-module-id="mod1" data-lesson-index="0">L1</button>
<button class="lesson-list-item" data-module-id="mod1" data-lesson-index="1">L2</button>
</div>
</details>
<details class="module-container" data-module-id="mod2">
<summary class="module-header">Module 2</summary>
<div class="lessons-container">
<button class="lesson-list-item" data-module-id="mod2" data-lesson-index="0">L1</button>
</div>
</details>
`;
// Mock scrollIntoView on all lesson items (not available in jsdom)
document.querySelectorAll(".lesson-list-item").forEach((el) => {
el.scrollIntoView = vi.fn();
});
});
test("updateActiveLessonInSidebar_ValidLesson_ActivatesCorrectItem", () => {
updateActiveLessonInSidebar("mod1", 1);
const items = document.querySelectorAll(".lesson-list-item");
expect(items[0].classList.contains("active")).toBe(false);
expect(items[1].classList.contains("active")).toBe(true);
});
test("updateActiveLessonInSidebar_DifferentModule_ExpandsParent", () => {
const details = document.querySelector('details[data-module-id="mod2"]');
expect(details.open).toBe(false);
updateActiveLessonInSidebar("mod2", 0);
expect(details.open).toBe(true);
const mod2Lesson = document.querySelector('.lesson-list-item[data-module-id="mod2"]');
expect(mod2Lesson.classList.contains("active")).toBe(true);
});
test("updateActiveLessonInSidebar_RemovesPreviousActive", () => {
const firstItem = document.querySelector('.lesson-list-item[data-module-id="mod1"][data-lesson-index="0"]');
expect(firstItem.classList.contains("active")).toBe(true);
updateActiveLessonInSidebar("mod2", 0);
expect(firstItem.classList.contains("active")).toBe(false);
});
test("updateActiveLessonInSidebar_NonExistentItem_DoesNotThrow", () => {
expect(() => {
updateActiveLessonInSidebar("nonexistent", 99);
}).not.toThrow();
// All active classes should still be removed
const activeItems = document.querySelectorAll(".lesson-list-item.active");
expect(activeItems.length).toBe(0);
});
test("updateActiveLessonInSidebar_ScrollsToLesson", () => {
const targetItem = document.querySelector('.lesson-list-item[data-module-id="mod1"][data-lesson-index="1"]');
updateActiveLessonInSidebar("mod1", 1);
expect(targetItem.scrollIntoView).toHaveBeenCalledWith({ behavior: "smooth", block: "nearest" });
});
});
describe("computeLessonDifficulty - additional edge cases", () => {
test("computeLessonDifficulty_NoSolution_ReturnsMedium", () => {
expect(computeLessonDifficulty({ codePrefix: "" })).toBe("medium");
});
test("computeLessonDifficulty_SolutionNoBrace_ReturnsMedium", () => {
expect(
computeLessonDifficulty({
codePrefix: "",
solution: "color: red;"
})
).toBe("medium");
});
test("computeLessonDifficulty_CodePrefixWithBrace_IgnoresSolution", () => {
expect(
computeLessonDifficulty({
codePrefix: ".nav a {",
solution: ".nav a {\n color: white;\n}"
})
).toBe("easy");
});
test("computeLessonDifficulty_NullCodePrefix_ReturnsMedium", () => {
expect(computeLessonDifficulty({ codePrefix: null, solution: null })).toBe("medium");
});
});
describe("renderLesson - edge cases", () => {
test("renderLesson_NullInputEl_DoesNotThrow", () => {
const titleEl = document.getElementById("title");
const descriptionEl = document.getElementById("description");
const taskEl = document.getElementById("task");
const previewEl = document.getElementById("preview");
const prefixEl = document.getElementById("prefix");
const suffixEl = document.getElementById("suffix");
const lesson = { title: "Test", description: "Desc", task: "Task" };
expect(() => {
renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl, null, suffixEl, lesson);
}).not.toThrow();
});
});
describe("renderLevelIndicator - formatting", () => {
test("renderLevelIndicator_ContainsLabelSpan", () => {
const element = document.getElementById("level-indicator");
renderLevelIndicator(element, 5, 12);
const label = element.querySelector(".level-label");
expect(label).not.toBeNull();
expect(label.textContent).toBe("Lesson");
expect(element.textContent).toContain("5 / 12");
});
});
});

63
tests/unit/renderer.test.js
View File

@@ -240,4 +240,67 @@ describe("Renderer Module", () => {
expect(computeLessonDifficulty({ codePrefix: null })).toBe("medium");
});
});
describe("renderModuleList section headers", () => {
const noop = () => {};
test("inserts section header elements between different category groups", () => {
const container = document.getElementById("module-list");
const modules = [
{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
{ id: "colors", title: "Colors", lessons: [{ title: "L1" }] },
{ id: "flexbox", title: "Flexbox", lessons: [{ title: "L1" }] },
{ id: "html-elements", title: "HTML Elements", lessons: [{ title: "L1" }] }
];
renderModuleList(container, modules, noop, noop);
const headers = container.querySelectorAll(".module-section-header");
expect(headers.length).toBe(3); // CSS Basics, CSS Layout, HTML Structure
});
test("section headers display correct category text", () => {
const container = document.getElementById("module-list");
const modules = [
{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
{ id: "flexbox", title: "Flexbox", lessons: [{ title: "L1" }] }
];
renderModuleList(container, modules, noop, noop);
const headers = container.querySelectorAll(".module-section-header");
expect(headers[0].textContent).toBe("CSS Basics");
expect(headers[1].textContent).toBe("CSS Layout");
});
test("no section header is inserted between modules in the same category", () => {
const container = document.getElementById("module-list");
const modules = [
{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
{ id: "colors", title: "Colors", lessons: [{ title: "L1" }] },
{ id: "typography", title: "Typography", lessons: [{ title: "L1" }] }
];
renderModuleList(container, modules, noop, noop);
const headers = container.querySelectorAll(".module-section-header");
expect(headers.length).toBe(1);
expect(headers[0].textContent).toBe("CSS Basics");
});
test("Welcome and Outro modules have no section headers", () => {
const container = document.getElementById("module-list");
const modules = [
{ id: "welcome", title: "Welcome", lessons: [{ title: "L1" }] },
{ id: "css-basic-selectors", title: "CSS Selectors", lessons: [{ title: "L1" }] },
{ id: "playground", title: "Playground", lessons: [{ title: "L1" }] }
];
renderModuleList(container, modules, noop, noop);
const headers = container.querySelectorAll(".module-section-header");
expect(headers.length).toBe(1);
expect(headers[0].textContent).toBe("CSS Basics");
});
});
});

232
tests/unit/router.test.js
View File

@@ -1,232 +0,0 @@
import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
import { parseHash, updateHash, navigateTo, replaceHash, replaceTo, getShareableUrl, getSectionIds, RouteType } from "../../src/helpers/router.js";
describe("Router", () => {
let pushStateSpy;
let replaceStateSpy;
beforeEach(() => {
// Reset hash
window.location.hash = "";
pushStateSpy = vi.spyOn(history, "pushState").mockImplementation(() => {});
replaceStateSpy = vi.spyOn(history, "replaceState").mockImplementation(() => {});
});
afterEach(() => {
pushStateSpy.mockRestore();
replaceStateSpy.mockRestore();
});
describe("RouteType", () => {
test("RouteType_Constants_CorrectValues", () => {
expect(RouteType.HOME).toBe("home");
expect(RouteType.SECTION).toBe("section");
expect(RouteType.REFERENCE).toBe("reference");
expect(RouteType.LESSON).toBe("lesson");
expect(RouteType.LANGUAGE).toBe("language");
});
});
describe("parseHash", () => {
test("parseHash_EmptyHash_ReturnsHome", () => {
window.location.hash = "";
const result = parseHash();
expect(result).toEqual({ type: RouteType.HOME });
});
test("parseHash_HashOnly_ReturnsHome", () => {
window.location.hash = "#";
const result = parseHash();
expect(result).toEqual({ type: RouteType.HOME });
});
test.each([
["de", "de"],
["pl", "pl"],
["ar", "ar"],
["es", "es"],
["en", "en"],
["uk", "uk"]
])("parseHash_LanguageCode_%s_ReturnsLanguageRoute", (code, expectedLang) => {
window.location.hash = `#${code}`;
const result = parseHash();
expect(result).toEqual({ type: RouteType.LANGUAGE, lang: expectedLang });
});
test.each([
["css", "css"],
["html", "html"],
["markdown", "markdown"]
])("parseHash_SectionId_%s_ReturnsSectionRoute", (sectionId, expectedId) => {
window.location.hash = `#${sectionId}`;
const result = parseHash();
expect(result).toEqual({ type: RouteType.SECTION, sectionId: expectedId });
});
test("parseHash_ReferenceWithoutSubpage_ReturnsReferenceRouteNullRefId", () => {
window.location.hash = "#reference";
const result = parseHash();
expect(result).toEqual({ type: RouteType.REFERENCE, refId: null });
});
test("parseHash_ReferenceWithSubpage_ReturnsReferenceRouteWithRefId", () => {
window.location.hash = "#reference/css";
const result = parseHash();
expect(result).toEqual({ type: RouteType.REFERENCE, refId: "css" });
});
test("parseHash_ReferenceWithFlexboxSubpage_ReturnsCorrectRefId", () => {
window.location.hash = "#reference/flexbox";
const result = parseHash();
expect(result).toEqual({ type: RouteType.REFERENCE, refId: "flexbox" });
});
test("parseHash_SingleUnknownSegment_ReturnsLessonWithIndex0", () => {
window.location.hash = "#flexbox";
const result = parseHash();
expect(result).toEqual({ type: RouteType.LESSON, moduleId: "flexbox", lessonIndex: 0 });
});
test("parseHash_ModuleWithLessonIndex_ReturnsLessonRoute", () => {
window.location.hash = "#flexbox/2";
const result = parseHash();
expect(result).toEqual({ type: RouteType.LESSON, moduleId: "flexbox", lessonIndex: 2 });
});
test("parseHash_ModuleWithIndex0_ReturnsLessonRoute", () => {
window.location.hash = "#box-model/0";
const result = parseHash();
expect(result).toEqual({ type: RouteType.LESSON, moduleId: "box-model", lessonIndex: 0 });
});
test("parseHash_NegativeLessonIndex_ReturnsNull", () => {
window.location.hash = "#module/-1";
const result = parseHash();
expect(result).toBeNull();
});
test("parseHash_NonNumericLessonIndex_ReturnsNull", () => {
window.location.hash = "#module/abc";
const result = parseHash();
expect(result).toBeNull();
});
test("parseHash_ThreeOrMoreSegments_ReturnsNull", () => {
window.location.hash = "#a/b/c";
const result = parseHash();
expect(result).toBeNull();
});
test("parseHash_EmptyModuleIdWithIndex_ReturnsNull", () => {
// #/0 → parts = ["", "0"], moduleId is empty string (falsy)
window.location.hash = "#/0";
const result = parseHash();
expect(result).toBeNull();
});
});
describe("updateHash", () => {
test("updateHash_NewHash_CallsPushState", () => {
window.location.hash = "";
updateHash("flexbox", 2);
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#flexbox/2");
});
test("updateHash_SameHash_DoesNotCallPushState", () => {
window.location.hash = "#flexbox/2";
updateHash("flexbox", 2);
expect(pushStateSpy).not.toHaveBeenCalled();
});
test("updateHash_DifferentModule_CallsPushState", () => {
window.location.hash = "#flexbox/0";
updateHash("box-model", 0);
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#box-model/0");
});
});
describe("navigateTo", () => {
test("navigateTo_SectionRoute_CallsPushState", () => {
window.location.hash = "";
navigateTo("css");
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#css");
});
test("navigateTo_EmptyRoute_NavigatesToHash", () => {
window.location.hash = "#something";
navigateTo("");
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#");
});
test("navigateTo_SameHash_DoesNotCallPushState", () => {
window.location.hash = "#css";
navigateTo("css");
expect(pushStateSpy).not.toHaveBeenCalled();
});
});
describe("replaceHash", () => {
test("replaceHash_ValidArgs_CallsReplaceState", () => {
replaceHash("flexbox", 3);
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#flexbox/3");
});
test("replaceHash_Index0_FormatsCorrectly", () => {
replaceHash("box-model", 0);
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#box-model/0");
});
});
describe("replaceTo", () => {
test("replaceTo_Route_CallsReplaceState", () => {
replaceTo("css");
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#css");
});
test("replaceTo_EmptyRoute_ReplacesToHash", () => {
replaceTo("");
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#");
});
test("replaceTo_ReferenceRoute_FormatsCorrectly", () => {
replaceTo("reference/flexbox");
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#reference/flexbox");
});
});
describe("getShareableUrl", () => {
test("getShareableUrl_ValidArgs_ReturnsFullUrl", () => {
const url = getShareableUrl("flexbox", 2);
expect(url).toContain("#flexbox/2");
expect(url).toMatch(/^https?:\/\/.+#flexbox\/2$/);
});
test("getShareableUrl_Index0_IncludesIndex", () => {
const url = getShareableUrl("box-model", 0);
expect(url).toContain("#box-model/0");
});
});
describe("getSectionIds", () => {
test("getSectionIds_ReturnsCopy_NotOriginalArray", () => {
const ids1 = getSectionIds();
const ids2 = getSectionIds();
expect(ids1).toEqual(ids2);
expect(ids1).not.toBe(ids2); // Different references
});
test("getSectionIds_ContainsExpectedSections", () => {
const ids = getSectionIds();
expect(ids).toContain("css");
expect(ids).toContain("html");
expect(ids).toContain("markdown");
});
test("getSectionIds_MutatingCopy_DoesNotAffectOriginal", () => {
const ids = getSectionIds();
ids.push("custom");
const freshIds = getSectionIds();
expect(freshIds).not.toContain("custom");
});
});
});

172
tests/unit/sections.test.js
View File

@@ -1,172 +0,0 @@
import { describe, test, expect } from "vitest";
import { sections, getSection, getSectionList, getModuleSection, getModulesBySection } from "../../src/config/sections.js";
describe("Sections Config", () => {
describe("sections constant", () => {
test("sections_AllDefined_HasFourSections", () => {
expect(Object.keys(sections)).toHaveLength(4);
expect(sections).toHaveProperty("css");
expect(sections).toHaveProperty("html");
expect(sections).toHaveProperty("tailwind");
expect(sections).toHaveProperty("markdown");
});
test("sections_EachSection_HasRequiredFields", () => {
for (const [key, section] of Object.entries(sections)) {
expect(section.id).toBe(key);
expect(section.title).toBeTruthy();
expect(section.description).toBeTruthy();
expect(section.color).toMatch(/^#[0-9a-f]{6}$/);
expect(typeof section.order).toBe("number");
}
});
});
describe("getSection", () => {
test.each([
["css", "CSS"],
["html", "HTML"],
["tailwind", "Tailwind CSS"],
["markdown", "Markdown"]
])("getSection_%s_ReturnsCorrectSection", (id, expectedTitle) => {
const section = getSection(id);
expect(section).not.toBeNull();
expect(section.id).toBe(id);
expect(section.title).toBe(expectedTitle);
});
test("getSection_NonExistentId_ReturnsNull", () => {
expect(getSection("nonexistent")).toBeNull();
});
test("getSection_Undefined_ReturnsNull", () => {
expect(getSection(undefined)).toBeNull();
});
test("getSection_EmptyString_ReturnsNull", () => {
expect(getSection("")).toBeNull();
});
});
describe("getSectionList", () => {
test("getSectionList_Default_ReturnsSortedByOrder", () => {
const list = getSectionList();
expect(list).toHaveLength(4);
// Verify sorted by order
for (let i = 1; i < list.length; i++) {
expect(list[i].order).toBeGreaterThan(list[i - 1].order);
}
});
test("getSectionList_Default_CSSIsFirst", () => {
const list = getSectionList();
expect(list[0].id).toBe("css");
});
test("getSectionList_Default_MarkdownIsLast", () => {
const list = getSectionList();
expect(list[list.length - 1].id).toBe("markdown");
});
test("getSectionList_Default_ContainsAllSections", () => {
const list = getSectionList();
const ids = list.map((s) => s.id);
expect(ids).toContain("css");
expect(ids).toContain("html");
expect(ids).toContain("tailwind");
expect(ids).toContain("markdown");
});
});
describe("getModuleSection", () => {
test("getModuleSection_ExplicitSection_UsesExplicitValue", () => {
const module = { mode: "css", section: "html" };
expect(getModuleSection(module)).toBe("html");
});
test.each([
["css", "css"],
["html", "html"],
["tailwind", "tailwind"],
["markdown", "markdown"]
])("getModuleSection_Mode%s_InfersCorrectSection", (mode, expectedSection) => {
const module = { mode };
expect(getModuleSection(module)).toBe(expectedSection);
});
test("getModuleSection_NoMode_DefaultsToCss", () => {
expect(getModuleSection({})).toBe("css");
});
test("getModuleSection_UndefinedMode_DefaultsToCss", () => {
expect(getModuleSection({ mode: undefined })).toBe("css");
});
test("getModuleSection_UnknownMode_DefaultsToCss", () => {
expect(getModuleSection({ mode: "javascript" })).toBe("css");
});
test("getModuleSection_ExplicitSectionOverridesMode_UsesSection", () => {
const module = { mode: "html", section: "tailwind" };
expect(getModuleSection(module)).toBe("tailwind");
});
});
describe("getModulesBySection", () => {
const testModules = [
{ id: "css-basics", mode: "css" },
{ id: "flexbox", mode: "css" },
{ id: "html-elements", mode: "html" },
{ id: "tailwind-intro", mode: "tailwind" },
{ id: "markdown-basics", mode: "markdown" },
{ id: "welcome", mode: "css", excludeFromProgress: true },
{ id: "playground", mode: "css", excludeFromProgress: true }
];
test("getModulesBySection_Css_ReturnsCssModules", () => {
const result = getModulesBySection(testModules, "css");
expect(result).toHaveLength(2);
expect(result.map((m) => m.id)).toEqual(["css-basics", "flexbox"]);
});
test("getModulesBySection_Html_ReturnsHtmlModules", () => {
const result = getModulesBySection(testModules, "html");
expect(result).toHaveLength(1);
expect(result[0].id).toBe("html-elements");
});
test("getModulesBySection_Tailwind_ReturnsTailwindModules", () => {
const result = getModulesBySection(testModules, "tailwind");
expect(result).toHaveLength(1);
expect(result[0].id).toBe("tailwind-intro");
});
test("getModulesBySection_ExcludesFromProgress_FiltersOut", () => {
const result = getModulesBySection(testModules, "css");
const ids = result.map((m) => m.id);
expect(ids).not.toContain("welcome");
expect(ids).not.toContain("playground");
});
test("getModulesBySection_EmptyModules_ReturnsEmptyArray", () => {
const result = getModulesBySection([], "css");
expect(result).toEqual([]);
});
test("getModulesBySection_NonExistentSection_ReturnsEmptyArray", () => {
const result = getModulesBySection(testModules, "nonexistent");
expect(result).toEqual([]);
});
test("getModulesBySection_ExplicitSectionOverride_IncludesModule", () => {
const modules = [
{ id: "special", mode: "css", section: "html" },
{ id: "normal-html", mode: "html" }
];
const result = getModulesBySection(modules, "html");
expect(result).toHaveLength(2);
expect(result.map((m) => m.id)).toContain("special");
});
});
});

735
tests/unit/validator-extended.test.js
View File

@@ -1,735 +0,0 @@
import { describe, test, expect, vi, beforeEach } from "vitest";
import { validateUserCode, validateCssCode } from "../../src/helpers/validator.js";
describe("Validator Extended Coverage", () => {
describe("validateUserCode mode dispatch", () => {
test("validateUserCode_NoMode_DefaultsToCss", () => {
const result = validateUserCode("color: red;", {
validations: [{ type: "contains", value: "color: red" }]
});
expect(result.isValid).toBe(true);
});
test("validateUserCode_CssMode_UsesCssValidator", () => {
const result = validateUserCode("display: flex;", {
mode: "css",
validations: [{ type: "contains", value: "display: flex" }]
});
expect(result.isValid).toBe(true);
});
test("validateUserCode_TailwindMode_UsesTailwindValidator", () => {
const result = validateUserCode("flex items-center", {
mode: "tailwind",
validations: [{ type: "contains_class", value: "flex" }]
});
expect(result.isValid).toBe(true);
});
test("validateUserCode_HtmlMode_UsesHtmlValidator", () => {
const result = validateUserCode("<div>Hello</div>", {
mode: "html",
validations: [{ type: "element_exists", value: "div" }]
});
expect(result.isValid).toBe(true);
});
test("validateUserCode_UnknownMode_DefaultsToCss", () => {
const result = validateUserCode("color: red;", {
mode: "javascript",
validations: [{ type: "contains", value: "color: red" }]
});
expect(result.isValid).toBe(true);
});
test("validateUserCode_NullLesson_Throws", () => {
expect(() => validateUserCode("anything", null)).toThrow();
});
test("validateUserCode_UndefinedLesson_Throws", () => {
expect(() => validateUserCode("anything", undefined)).toThrow();
});
});
describe("Tailwind validation", () => {
test("tailwind_ContainsClass_Pass", () => {
const result = validateUserCode("flex items-center justify-between", {
mode: "tailwind",
validations: [{ type: "contains_class", value: "flex" }]
});
expect(result.isValid).toBe(true);
expect(result.validCases).toBe(1);
});
test("tailwind_ContainsClass_Fail_ReturnsMessage", () => {
const result = validateUserCode("items-center", {
mode: "tailwind",
validations: [{ type: "contains_class", value: "flex", message: "Add flex class" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toBe("Add flex class");
});
test("tailwind_ContainsClass_Fail_DefaultMessage", () => {
const result = validateUserCode("items-center", {
mode: "tailwind",
validations: [{ type: "contains_class", value: "flex" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toContain("flex");
});
test("tailwind_ContainsClass_PartialMatch_Fails", () => {
// "flex-1" contains "flex" as substring but split should not match
const result = validateUserCode("flex-1 items-center", {
mode: "tailwind",
validations: [{ type: "contains_class", value: "flex" }]
});
expect(result.isValid).toBe(false);
});
test("tailwind_ContainsPattern_Pass", () => {
const result = validateUserCode("text-lg font-bold", {
mode: "tailwind",
validations: [{ type: "contains_pattern", value: "text-\\w+" }]
});
expect(result.isValid).toBe(true);
});
test("tailwind_ContainsPattern_Fail_ReturnsMessage", () => {
const result = validateUserCode("font-bold", {
mode: "tailwind",
validations: [{ type: "contains_pattern", value: "text-\\w+", message: "Add text size" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toBe("Add text size");
});
test("tailwind_ContainsPattern_Fail_DefaultMessage", () => {
const result = validateUserCode("font-bold", {
mode: "tailwind",
validations: [{ type: "contains_pattern", value: "text-\\w+" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toContain("pattern");
});
test("tailwind_DefaultType_FallsBackToContains", () => {
const result = validateUserCode("flex items-center", {
mode: "tailwind",
validations: [{ type: "contains", value: "items-center" }]
});
expect(result.isValid).toBe(true);
});
test("tailwind_NoValidations_ReturnsValid", () => {
const result = validateUserCode("flex", { mode: "tailwind" });
expect(result.isValid).toBe(true);
expect(result.message).toContain("No validations specified");
});
test("tailwind_NullLesson_ReturnsValid", () => {
const result = validateUserCode("flex", { mode: "tailwind", validations: null });
// validateTailwindClasses checks !lesson.validations
expect(result.isValid).toBe(true);
});
test("tailwind_MultipleValidations_AllPass", () => {
const result = validateUserCode("flex items-center gap-4", {
mode: "tailwind",
validations: [
{ type: "contains_class", value: "flex" },
{ type: "contains_class", value: "items-center" },
{ type: "contains_class", value: "gap-4" }
]
});
expect(result.isValid).toBe(true);
expect(result.validCases).toBe(3);
});
test("tailwind_MultipleValidations_EarlyReturn", () => {
const result = validateUserCode("flex", {
mode: "tailwind",
validations: [
{ type: "contains_class", value: "flex" },
{ type: "contains_class", value: "items-center", message: "Missing items-center" },
{ type: "contains_class", value: "gap-4" }
]
});
expect(result.isValid).toBe(false);
expect(result.message).toBe("Missing items-center");
expect(result.validCases).toBe(1);
});
test("tailwind_WhitespaceHandling_LeadingTrailing", () => {
const result = validateUserCode(" flex items-center ", {
mode: "tailwind",
validations: [{ type: "contains_class", value: "flex" }]
});
expect(result.isValid).toBe(true);
});
test("tailwind_EmptyUserClasses_Fails", () => {
const result = validateUserCode("", {
mode: "tailwind",
validations: [{ type: "contains_class", value: "flex" }]
});
expect(result.isValid).toBe(false);
});
});
describe("HTML validation - sibling type", () => {
test("sibling_ValidOrder_Passes", () => {
const result = validateUserCode("<h1>Title</h1><p>Content</p>", {
mode: "html",
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
});
expect(result.isValid).toBe(true);
});
test("sibling_NonAdjacentButAfter_Passes", () => {
const result = validateUserCode("<h1>Title</h1><span>Middle</span><p>Content</p>", {
mode: "html",
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
});
expect(result.isValid).toBe(true);
});
test("sibling_WrongOrder_Fails", () => {
const result = validateUserCode("<p>Content</p><h1>Title</h1>", {
mode: "html",
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
});
// h1 is after p, so p is not a sibling after h1 - but wait, h1 exists and p is before h1...
// Actually h1 exists. nextElementSibling of h1 is nothing. So it fails.
expect(result.isValid).toBe(false);
});
test("sibling_FirstNotFound_Fails", () => {
const result = validateUserCode("<p>Content</p>", {
mode: "html",
validations: [{ type: "sibling", value: { first: "h1", then: "p" }, message: "h1 not found" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toBe("h1 not found");
});
test("sibling_ThenNotFound_Fails", () => {
const result = validateUserCode("<h1>Title</h1><span>Only span</span>", {
mode: "html",
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
});
expect(result.isValid).toBe(false);
});
test("sibling_DefaultMessage_ContainsBothSelectors", () => {
const result = validateUserCode("<div>Only div</div>", {
mode: "html",
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
});
expect(result.isValid).toBe(false);
expect(result.message).toContain("p");
expect(result.message).toContain("h1");
});
test("sibling_NoFollowingSiblings_Fails", () => {
const result = validateUserCode("<div><h1>Title</h1></div>", {
mode: "html",
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
});
expect(result.isValid).toBe(false);
});
});
describe("HTML validation - not_contains type", () => {
test("htmlNotContains_AbsentText_Passes", () => {
const result = validateUserCode("<p>Hello</p>", {
mode: "html",
validations: [{ type: "not_contains", value: "class=" }]
});
expect(result.isValid).toBe(true);
});
test("htmlNotContains_PresentText_Fails", () => {
const result = validateUserCode('<p class="red">Hello</p>', {
mode: "html",
validations: [{ type: "not_contains", value: "class=", message: "Remove classes" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toBe("Remove classes");
});
test("htmlNotContains_DefaultMessage", () => {
const result = validateUserCode('<p class="red">Hello</p>', {
mode: "html",
validations: [{ type: "not_contains", value: "class=" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toContain("should not include");
});
});
describe("HTML validation - regex type", () => {
test("htmlRegex_MatchingPattern_Passes", () => {
const result = validateUserCode('<img src="photo.jpg" alt="A photo">', {
mode: "html",
validations: [{ type: "regex", value: 'alt="[^"]+"' }]
});
expect(result.isValid).toBe(true);
});
test("htmlRegex_NonMatchingPattern_Fails", () => {
const result = validateUserCode('<img src="photo.jpg">', {
mode: "html",
validations: [{ type: "regex", value: 'alt="[^"]+"', message: "Add alt text" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toBe("Add alt text");
});
test("htmlRegex_DefaultMessage", () => {
const result = validateUserCode("<p>Hello</p>", {
mode: "html",
validations: [{ type: "regex", value: "<h1>" }]
});
expect(result.isValid).toBe(false);
expect(result.message).toContain("pattern");
});
});
describe("HTML validation - unknown type", () => {
test("htmlUnknownType_SkipsAndPasses", () => {
const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
const result = validateUserCode("<p>Hello</p>", {
mode: "html",
validations: [{ type: "unknown_type", value: "anything" }]
});
expect(result.isValid).toBe(true);
expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Unknown HTML validation type"));
warnSpy.mockRestore();
});
});
describe("HTML validation - element_count fallback (>0)", () => {
test("elementCount_NoCountNoMin_ChecksGreaterThanZero_Pass", () => {
const result = validateUserCode("<ul><li>Item</li></ul>", {
mode: "html",
validations: [{ type: "element_count", value: { selector: "li" } }]
});
expect(result.isValid).toBe(true);
});
test("elementCount_NoCountNoMin_NoElements_Fails", () => {
const result = validateUserCode("<ul></ul>", {
mode: "html",
validations: [{ type: "element_count", value: { selector: "li" } }]
});
expect(result.isValid).toBe(false);
});
});
describe("HTML validation - attribute_value edge cases", () => {
test("attributeValue_ElementNotFound_Fails", () => {
const result = validateUserCode("<p>Hello</p>", {
mode: "html",
validations: [{ type: "attribute_value", value: { selector: "input", attr: "type", value: "email" } }]
});
expect(result.isValid).toBe(false);
});
test("attributeValue_NullValue_ChecksExists", () => {
const result = validateUserCode('<input data-test="anything">', {
mode: "html",
validations: [{ type: "attribute_value", value: { selector: "input", attr: "data-test", value: null } }]
});
expect(result.isValid).toBe(true);
});
test("attributeValue_NullValue_AttributeMissing_Fails", () => {
const result = validateUserCode("<input>", {
mode: "html",
validations: [{ type: "attribute_value", value: { selector: "input", attr: "data-test", value: null } }]
});
expect(result.isValid).toBe(false);
});
});
describe("HTML validation - element_text edge cases", () => {
test("elementText_ElementNotFound_Fails", () => {
const result = validateUserCode("<p>Hello</p>", {
mode: "html",
validations: [{ type: "element_text", value: { selector: "button", text: "Submit" } }]
});
expect(result.isValid).toBe(false);
});
test("elementText_EmptyTextContent_FailsForNonEmptyExpected", () => {
const result = validateUserCode("<button></button>", {
mode: "html",
validations: [{ type: "element_text", value: { selector: "button", text: "Submit" } }]
});
expect(result.isValid).toBe(false);
});
test("elementText_EmptyExpectedText_MatchesEmptyElement", () => {
const result = validateUserCode("<button></button>", {
mode: "html",
validations: [{ type: "element_text", value: { selector: "button", text: "" } }]
});
expect(result.isValid).toBe(true);
});
});
describe("CSS validation - containsValidation wholeWord option", () => {
test("contains_WholeWord_ExactMatch_Passes", () => {
const result = validateUserCode("color: red;", {
validations: [{ type: "contains", value: "red", options: { wholeWord: true } }]
});
expect(result.isValid).toBe(true);
});
test("contains_WholeWord_PartialMatch_Fails", () => {
const result = validateUserCode("color: darkred;", {
validations: [{ type: "contains", value: "red", options: { wholeWord: true } }]
});
expect(result.isValid).toBe(false);
});
test("contains_WholeWord_CaseInsensitive_Passes", () => {
const result = validateUserCode("COLOR: RED;", {
validations: [{ type: "contains", value: "red", options: { wholeWord: true, caseSensitive: false } }]
});
expect(result.isValid).toBe(true);
});
test("contains_WholeWord_SpecialChars_Escaped", () => {
// \b doesn't match at non-word chars like ".", so use a word value with special chars around it
const result = validateUserCode("value: calc(100% - 20px);", {
validations: [{ type: "contains", value: "calc", options: { wholeWord: true } }]
});
expect(result.isValid).toBe(true);
// "calc" should not match "recalculate"
const failResult = validateUserCode("/* recalculate */", {
validations: [{ type: "contains", value: "calc", options: { wholeWord: true } }]
});
expect(failResult.isValid).toBe(false);
});
});
describe("CSS validation - regexValidation options", () => {
test("regex_CaseInsensitive_Passes", () => {
const result = validateUserCode("COLOR: RED;", {
validations: [{ type: "regex", value: "color:\\s*red", options: { caseSensitive: false } }]
});
expect(result.isValid).toBe(true);
});
test("regex_CaseSensitive_Default_FailsOnCaseMismatch", () => {
const result = validateUserCode("COLOR: RED;", {
validations: [{ type: "regex", value: "color:\\s*red" }]
});
expect(result.isValid).toBe(false);
});
test("regex_MultilineFalse_DoesNotMatchAcrossLines", () => {
const code = "body {\n color: red;\n}";
// With multiline=false, ^ should not match beginning of each line
const result = validateUserCode(code, {
validations: [{ type: "regex", value: "^\\s*color", options: { multiline: false } }]
});
expect(result.isValid).toBe(false);
});
test("regex_MultilineTrue_Default_MatchesEachLine", () => {
const code = "body {\n color: red;\n}";
const result = validateUserCode(code, {
validations: [{ type: "regex", value: "^\\s*color", options: { multiline: true } }]
});
expect(result.isValid).toBe(true);
});
test("regex_InvalidPattern_ReturnsFalse", () => {
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
const result = validateUserCode("color: red;", {
validations: [{ type: "regex", value: "[invalid(regex" }]
});
expect(result.isValid).toBe(false);
expect(errorSpy).toHaveBeenCalled();
errorSpy.mockRestore();
});
test("regex_EmptyPattern_MatchesEverything", () => {
const result = validateUserCode("color: red;", {
validations: [{ type: "regex", value: "" }]
});
expect(result.isValid).toBe(true);
});
});
describe("CSS validation - propertyValueValidation edge cases", () => {
test("propertyValue_PropertyNotFound_Fails", () => {
const result = validateUserCode("color: red;", {
validations: [
{
type: "property_value",
value: { property: "display", expected: "flex" }
}
]
});
expect(result.isValid).toBe(false);
});
test("propertyValue_ExactMatch_Passes", () => {
const result = validateUserCode("display: flex;", {
validations: [
{
type: "property_value",
value: { property: "display", expected: "flex" },
options: { exact: true }
}
]
});
expect(result.isValid).toBe(true);
});
test("propertyValue_ExactMatch_CaseMismatch_Fails", () => {
const result = validateUserCode("display: FLEX;", {
validations: [
{
type: "property_value",
value: { property: "display", expected: "flex" },
options: { exact: true }
}
]
});
expect(result.isValid).toBe(false);
});
test("propertyValue_FlexibleMatch_CaseInsensitive", () => {
const result = validateUserCode("display: FLEX;", {
validations: [
{
type: "property_value",
value: { property: "display", expected: "flex" }
}
]
});
expect(result.isValid).toBe(true);
});
test("propertyValue_ShorthandProperty_Passes", () => {
const result = validateUserCode("margin: 10px 20px;", {
validations: [
{
type: "property_value",
value: { property: "margin", expected: "10px 20px" }
}
]
});
expect(result.isValid).toBe(true);
});
test("propertyValue_DefaultMessage_IncludesPropertyAndExpected", () => {
const result = validateUserCode("color: red;", {
validations: [
{
type: "property_value",
value: { property: "display", expected: "flex" }
}
]
});
expect(result.isValid).toBe(false);
expect(result.message).toContain("display");
expect(result.message).toContain("flex");
});
});
describe("CSS validation - syntaxValidation", () => {
test("syntax_ValidCss_Passes", () => {
const result = validateUserCode("div { color: red; }", {
validations: [{ type: "syntax" }]
});
expect(result.isValid).toBe(true);
});
});
describe("CSS validation - custom edge cases", () => {
test("custom_NoValidatorFunction_ReturnsEarlyWithOriginalResult", () => {
const result = validateUserCode("color: red;", {
validations: [{ type: "custom" }]
});
// When validator is falsy, validationPassed stays false, but result.isValid was never set to false
// The function returns early with the unmodified result (isValid: true)
expect(result.isValid).toBe(true);
});
test("custom_NonFunctionValidator_ReturnsEarlyWithOriginalResult", () => {
const result = validateUserCode("color: red;", {
validations: [{ type: "custom", validator: "not-a-function" }]
});
// Same behavior: validator check fails, validationPassed stays false, returns unmodified result
expect(result.isValid).toBe(true);
});
test("custom_ValidatorReturnsNoMessage_UsesMessage", () => {
const result = validateUserCode("color: red;", {
validations: [
{
type: "custom",
validator: () => ({ isValid: false }),
message: "Fallback message"
}
]
});
expect(result.isValid).toBe(false);
expect(result.message).toBe("Fallback message");
});
test("custom_ValidatorReturnsNoMessage_NoLessonMessage_DefaultMessage", () => {
const result = validateUserCode("color: red;", {
validations: [
{
type: "custom",
validator: () => ({ isValid: false })
}
]
});
expect(result.isValid).toBe(false);
expect(result.message).toContain("does not meet the requirements");
});
});
describe("CSS validation - unknown type", () => {
test("unknownType_WarnsAndContinues", () => {
const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
const result = validateUserCode("color: red;", {
validations: [
{ type: "invented_type", value: "anything" },
{ type: "contains", value: "color: red" }
]
});
expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Unknown validation type"));
// The unknown type is skipped (continue), then the next validation passes
expect(result.isValid).toBe(true);
warnSpy.mockRestore();
});
});
describe("CSS validation - empty and whitespace input", () => {
test("emptyString_ContainsValidation_Fails", () => {
const result = validateUserCode("", {
validations: [{ type: "contains", value: "color" }]
});
expect(result.isValid).toBe(false);
});
test("whitespaceOnly_ContainsValidation_Fails", () => {
const result = validateUserCode(" \n\t ", {
validations: [{ type: "contains", value: "color" }]
});
expect(result.isValid).toBe(false);
});
test("emptyString_NotContains_Passes", () => {
const result = validateUserCode("", {
validations: [{ type: "not_contains", value: "color" }]
});
expect(result.isValid).toBe(true);
});
});
describe("CSS validation - validCases and totalCases tracking", () => {
test("allPassingValidations_ValidCasesEqualsTotalCases", () => {
const result = validateUserCode("display: flex; color: red;", {
validations: [
{ type: "contains", value: "display: flex" },
{ type: "contains", value: "color: red" }
]
});
expect(result.isValid).toBe(true);
expect(result.validCases).toBe(2);
expect(result.totalCases).toBe(2);
});
test("firstValidationFails_ValidCasesIs0", () => {
const result = validateUserCode("color: red;", {
validations: [
{ type: "contains", value: "display: flex" },
{ type: "contains", value: "color: red" }
]
});
expect(result.isValid).toBe(false);
expect(result.validCases).toBe(0);
expect(result.totalCases).toBe(2);
});
test("secondValidationFails_ValidCasesIs1", () => {
const result = validateUserCode("display: flex;", {
validations: [
{ type: "contains", value: "display: flex" },
{ type: "contains", value: "color: red" }
]
});
expect(result.isValid).toBe(false);
expect(result.validCases).toBe(1);
expect(result.totalCases).toBe(2);
});
});
describe("CSS validation - special regex metacharacters in contains", () => {
test("contains_DotInValue_TreatedAsLiteral", () => {
// ".class" should match literally, not any char + "class"
const result = validateUserCode(".card { color: red; }", {
validations: [{ type: "contains", value: ".card" }]
});
expect(result.isValid).toBe(true);
});
test("contains_BracketsInValue_TreatedAsLiteral", () => {
const result = validateUserCode("content: '[test]';", {
validations: [{ type: "contains", value: "[test]" }]
});
expect(result.isValid).toBe(true);
});
});
describe("HTML validation - deeply nested parent_child", () => {
test("parentChild_DeeplyNested_Passes", () => {
const html = "<div><section><article><p>Deep</p></article></section></div>";
const result = validateUserCode(html, {
mode: "html",
validations: [{ type: "parent_child", value: { parent: "div", child: "p" } }]
});
expect(result.isValid).toBe(true);
});
});
describe("HTML validation - validCases tracking", () => {
test("htmlAllPass_ValidCasesEqualsTotal", () => {
const result = validateUserCode("<h1>Title</h1><p>Content</p>", {
mode: "html",
validations: [
{ type: "element_exists", value: "h1" },
{ type: "element_exists", value: "p" }
]
});
expect(result.isValid).toBe(true);
expect(result.validCases).toBe(2);
expect(result.totalCases).toBe(2);
});
test("htmlPartialPass_EarlyReturn", () => {
const result = validateUserCode("<h1>Title</h1>", {
mode: "html",
validations: [
{ type: "element_exists", value: "h1" },
{ type: "element_exists", value: "p", message: "Need paragraph" }
]
});
expect(result.isValid).toBe(false);
expect(result.validCases).toBe(1);
expect(result.message).toBe("Need paragraph");
});
});
});

63
tests/unit/validator.test.js
View File

@@ -226,6 +226,69 @@ describe("CSS Validator", () => {
});
});
describe("JavaScript Validator", () => {
describe("validateUserCode with mode: javascript", () => {
it("should pass contains validation for correct code", () => {
const userCode = 'const name = "Ada";';
const lesson = {
mode: "javascript",
validations: [{ type: "contains", value: "const", message: "Use const" }]
};
const result = validateUserCode(userCode, lesson);
expect(result.isValid).toBe(true);
});
it("should fail contains validation for missing code", () => {
const userCode = 'var name = "Ada";';
const lesson = {
mode: "javascript",
validations: [{ type: "contains", value: "const", message: "Use const keyword" }]
};
const result = validateUserCode(userCode, lesson);
expect(result.isValid).toBe(false);
expect(result.message).toBe("Use const keyword");
});
it("should pass regex validation", () => {
const userCode = 'const name = "Ada";';
const lesson = {
mode: "javascript",
validations: [{ type: "regex", value: "const\\s+name\\s*=", message: "Declare name" }]
};
const result = validateUserCode(userCode, lesson);
expect(result.isValid).toBe(true);
});
it("should handle not_contains validation", () => {
const userCode = "let score = 0;";
const lesson = {
mode: "javascript",
validations: [{ type: "not_contains", value: "var", message: "Don't use var" }]
};
const result = validateUserCode(userCode, lesson);
expect(result.isValid).toBe(true);
const failLesson = {
mode: "javascript",
validations: [{ type: "not_contains", value: "let", message: "Don't use let" }]
};
const failResult = validateUserCode(userCode, failLesson);
expect(failResult.isValid).toBe(false);
});
it("should pass with no validations", () => {
const result = validateUserCode("const x = 1;", { mode: "javascript" });
expect(result.isValid).toBe(true);
expect(result.message).toContain("No validations specified");
});
});
});
describe("HTML Validator", () => {
describe("validateUserCode with mode: html", () => {
it("should validate element_exists correctly", () => {

376
wave.yaml
View File

@@ -1,376 +0,0 @@
adapters:
claude:
binary: claude
default_permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
deny: []
mode: headless
output_format: json
project_files:
- CLAUDE.md
- .claude/settings.json
apiVersion: v1
kind: WaveManifest
metadata:
description: An interactive platform for learning CSS through practical challenges
name: code-crispies
ontology:
telos: Interactive self-learning platform for web technologies (CSS, HTML, JavaScript, Markdown)
personas:
auditor:
adapter: claude
description: Security review and quality assurance
model: claude-haiku
permissions:
allowed_tools:
- Read
- Write
- Grep
- Glob
- Bash
deny:
- Edit(*)
- Bash(rm -rf /*)
- Bash(git push*)
- Bash(git commit*)
system_prompt_file: .wave/personas/auditor.md
temperature: 0.1
craftsman:
adapter: claude
description: Code implementation and testing
model: claude-opus
permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
deny:
- Bash(rm -rf /*)
system_prompt_file: .wave/personas/craftsman.md
temperature: 0.7
debugger:
adapter: claude
description: Systematic debugging and root cause analysis
model: claude-opus
permissions:
allowed_tools:
- Read
- Write
- Glob
- Grep
- Bash
deny:
- Edit(*)
- Bash(rm -rf /*)
- Bash(git push*)
- Bash(git commit*)
system_prompt_file: .wave/personas/debugger.md
temperature: 0.1
gitea-analyst:
adapter: claude
description: Gitea issue analysis and scanning
permissions:
allowed_tools:
- Read
- Write
- Bash(tea issues view*)
- Bash(tea issues list*)
- Bash(tea releases list*)
- Bash(tea pulls view*)
- Bash(tea pulls list*)
- Bash(tea --version)
- Bash(git log*)
- Bash(git status*)
- Bash(ls *)
deny:
- Bash(tea issues edit*)
- Bash(tea issues create*)
- Bash(tea issues close*)
- Bash(gh *)
- Bash(glab *)
- Edit(*)
system_prompt_file: .wave/personas/gitea-analyst.md
temperature: 0.1
gitea-commenter:
adapter: claude
description: Posts comments on Gitea issues and pull requests
permissions:
allowed_tools:
- Read
- Write
- Bash(tea issues comment*)
- Bash(tea pulls create*)
- Bash(tea --version)
- Bash(git push*)
- Bash(git status*)
- Bash(git log*)
- Bash(git remote*)
- Bash(git diff*)
deny:
- Bash(tea issues edit*)
- Bash(tea issues close*)
- Bash(tea pulls merge*)
- Bash(tea pulls close*)
- Bash(gh *)
- Bash(glab *)
- Edit(*)
system_prompt_file: .wave/personas/gitea-commenter.md
temperature: 0.2
gitea-enhancer:
adapter: claude
description: Gitea issue enhancement and improvement
permissions:
allowed_tools:
- Read
- Write
- Bash(tea issues edit*)
- Bash(tea issues view*)
- Bash(tea --version)
deny:
- Bash(tea issues create*)
- Bash(tea issues close*)
- Bash(gh *)
- Bash(glab *)
- Edit(*)
system_prompt_file: .wave/personas/gitea-enhancer.md
temperature: 0.2
gitea-scoper:
adapter: claude
description: Gitea epic analysis, decomposition, and sub-issue creation
permissions:
allowed_tools:
- Read
- Write
- Bash(tea issues create*)
- Bash(tea issues view*)
- Bash(tea issues list*)
- Bash(tea --version)
deny:
- Bash(tea issues edit*)
- Bash(tea issues close*)
- Bash(gh *)
- Bash(glab *)
- Edit(*)
system_prompt_file: .wave/personas/gitea-scoper.md
temperature: 0.1
implementer:
adapter: claude
description: Execution specialist for code changes and structured output
model: claude-opus
permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep
deny:
- Bash(rm -rf /*)
- Bash(sudo *)
system_prompt_file: .wave/personas/implementer.md
temperature: 0.3
navigator:
adapter: claude
description: Read-only codebase exploration and analysis
model: claude-haiku
permissions:
allowed_tools:
- Read
- Write
- Glob
- Grep
- Bash(git log*)
- Bash(git status*)
deny:
- Edit(*)
- Bash(git commit*)
- Bash(git push*)
system_prompt_file: .wave/personas/navigator.md
temperature: 0.1
philosopher:
adapter: claude
description: Architecture design and specification
model: claude-opus
permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep
deny: []
system_prompt_file: .wave/personas/philosopher.md
temperature: 0.3
planner:
adapter: claude
description: Task breakdown and planning
model: claude-haiku
permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep
deny: []
system_prompt_file: .wave/personas/planner.md
temperature: 0.2
provocateur:
adapter: claude
description: Creative challenger for divergent thinking and complexity hunting
model: claude-opus
permissions:
allowed_tools:
- Read
- Write
- Glob
- Grep
- Bash(wc *)
- Bash(git log*)
- Bash(git diff*)
- Bash(find*)
- Bash(ls*)
deny:
- Edit(*)
- Bash(git commit*)
- Bash(git push*)
- Bash(rm*)
system_prompt_file: .wave/personas/provocateur.md
temperature: 0.8
researcher:
adapter: claude
description: Deep codebase research and analysis
model: claude-opus
permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep
- WebSearch
- WebFetch
deny: []
system_prompt_file: .wave/personas/researcher.md
temperature: 0.1
reviewer:
adapter: claude
description: Code review and quality checks
permissions:
allowed_tools:
- Read
- Write
- Glob
- Grep
- Bash
deny:
- Write(*.go)
- Write(*.ts)
- Write(*.py)
- Write(*.rs)
- Edit(*)
- Bash(rm *)
- Bash(git push*)
- Bash(git commit*)
system_prompt_file: .wave/personas/reviewer.md
temperature: 0.1
summarizer:
adapter: claude
description: Context compaction for relay handoffs
model: claude-haiku
permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep
deny: []
system_prompt_file: .wave/personas/summarizer.md
temperature: 0
supervisor:
adapter: claude
description: Work supervision and quality evaluation
model: claude-opus
permissions:
allowed_tools:
- Read
- Write
- Glob
- Grep
- Bash
deny:
- Edit(*)
- Bash(git push*)
- Bash(git commit*)
- Bash(rm*)
system_prompt_file: .wave/personas/supervisor.md
temperature: 0.2
synthesizer:
adapter: claude
description: Structured synthesis of analysis findings into actionable JSON proposals
permissions:
allowed_tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep
deny: []
system_prompt_file: .wave/personas/synthesizer.md
temperature: 0.2
validator:
adapter: claude
description: Skeptical analysis and verification of findings against source code
permissions:
allowed_tools:
- Read
- Write
- Glob
- Grep
- Bash(wc *)
- Bash(git log*)
- Bash(git diff*)
deny:
- Edit(*)
- Bash(git commit*)
- Bash(git push*)
- Bash(rm*)
system_prompt_file: .wave/personas/validator.md
temperature: 0.1
project:
build_command: npm run build
flavour: node
format_command: npm run format
language: javascript
lint_command: ""
skill: javascript
source_glob: '*.{js,jsx,ts,tsx}'
test_command: npm test
runtime:
audit:
log_all_file_operations: false
log_all_tool_calls: true
log_dir: .wave/traces/
default_timeout_minutes: 30
max_concurrent_workers: 5
meta_pipeline:
max_depth: 2
max_total_steps: 20
max_total_tokens: 500000
timeout_minutes: 60
relay:
strategy: summarize_to_checkpoint
token_threshold_percent: 80
workspace_root: .wave/workspaces