Implementation Plan

Objective

Rewrite the 4 CSS Filters lessons in lessons/11-filters.json so tasks describe visual outcomes instead of giving exact CSS code, and validations accept multiple valid answers.

Approach

Follow the same pattern established in issue #9 (colors/box-model rewrite):

Rewrite each task field to describe the desired visual effect
Replace exact-match validations (property_value, contains) with regex validations that accept a range of values
Update validation message fields to give pedagogical hints without revealing answers
Keep description, previewHTML, previewBaseCSS, codePrefix, codeSuffix, and solution unchanged

File Mapping

File	Action	Description
`lessons/11-filters.json`	modify	Rewrite tasks and validations for all 4 lessons

Lesson-by-Lesson Plan

filters-1: Blur Filter

Current task: "Blur the background image using filter: blur(4px)."
New task: Describe frosted-glass effect, mention blur radius range (2px-8px)
Validation: regex matching filter:\s*blur\((2|3|4|5|6|7|8)px\) — accepts 2px through 8px
Message: Hint about the filter property and blur() function

filters-2: Grayscale Filter

Current task: "Make the image grayscale with filter: grayscale(100%)."
New task: Describe removing all color to create a black-and-white effect
Validation: regex matching filter:\s*grayscale\(100%\) — grayscale only makes sense at 100% for "fully desaturated"
Message: Hint about which filter function removes color

filters-3: Brightness Filter

Current task: "Brighten the card with filter: brightness(120%)."
New task: Describe making the card appear brighter/more vivid, accept range 110%-150%
Validation: regex matching filter:\s*brightness\(1[1-5]0%\) — accepts 110% through 150%
Message: Hint about the brightness function and values above 100%

filters-4: Drop Shadow

Current task: "Add a drop shadow with filter: drop-shadow(4px 4px 8px gray)."
New task: Describe adding a soft shadow behind the star to give it depth
Validation: regex matching filter:\s*drop-shadow\( with reasonable offset/blur values
Message: Hint about the drop-shadow filter function

Architecture Decisions

Use regex validation type (not property_value) to allow multiple acceptable values, consistent with the colors/box-model rewrite
Use options: { "caseSensitive": false } on all regex validations for consistency
Keep solution fields unchanged as reference answers

Risks

Risk	Mitigation
Regex too permissive	Test edge cases; only accept pedagogically reasonable values
Regex too restrictive	Allow generous ranges; err on the side of accepting creative answers
Breaking existing progress	localStorage keys are based on lesson IDs which are unchanged

Testing Strategy

Run existing test suite (npm test) to verify no regressions
Validate JSON file against schema
Manual review of regex patterns for correctness

3.1 KiB Raw Blame History