@getollie/cli 0.0.1

package/library/web_applications-web_visuals/3d-map-amap-vue3-custom-building-blocks-mvt-polyhedrons.json

@@ -0,0 +1,68 @@
+{
+  "index": 1696,
+  "question": "You are a code expert. Please utilize your professional knowledge to generate accurate and professional responses. Be sure to ensure that the code you generate is executable for demonstration. Develop a 3D map using Amap API with Vue 3, draw custom building blocks, and use MVT polyhedrons.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the Amap API integration correctly implemented?",
+      "description": "Review whether the code properly initializes the Amap instance with appropriate API keys, correctly loads the required plugins, and handles map lifecycle events. Check if the map container is properly configured with correct dimensions and initial view settings (center coordinates, zoom level). Score 0 if the map fails to initialize, 5 if basic initialization works but missing error handling, and 10 if fully implemented with proper error handling and loading states.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Are custom building blocks properly implemented?",
+      "description": "Evaluate whether custom building geometries are correctly constructed using Amap's polygon/polyline APIs or custom WebGL rendering. Check if the buildings have proper height extrusion, accurate geographic positioning, and appropriate texturing. Deduct 5 points if buildings lack proper height data, 3 points if texture mapping is incorrect, and 2 points if building footprints don't match geographic data. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the MVT (Mapbox Vector Tiles) polyhedron rendering implemented correctly?",
+      "description": "Check if the code properly loads and renders MVT data, correctly interprets vector tile protocols, and efficiently renders polyhedrons based on tile data. Verify tile loading optimization techniques like caching and level-of-detail management. Deduct 5 points if rendering artifacts occur at tile edges, 3 points if tile loading is inefficient, and 5 points if the MVT protocol implementation is incorrect. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is Vue 3 integration properly implemented with reactive map components?",
+      "description": "Assess whether the code uses Vue 3's Composition API effectively for map component state management, properly handles component lifecycle with map instance creation/destruction, and implements reactive data binding between UI controls and map state. Deduct 5 points for improper component lifecycle management, 3 points for non-reactive map controls, and 5 points for memory leaks in component cleanup. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as API loading failures, network interruptions, invalid geographic data, etc.) and provide friendly error prompts or recovery mechanisms. Code with strong robustness should implement proper try-catch blocks around API calls, handle promise rejections, and provide fallback rendering. Give 10 points for comprehensive error handling, 5 points for basic error handling, and 0 points if no error handling exists.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that are eye-catching?",
+      "description": "Check whether the code includes surprise features that enhance the experience (e.g., 1. Custom shader effects for buildings 2. Dynamic time-of-day lighting 3. Interactive building selection with information panels). Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "Strictly check three types of redundancy: 1. Redundant map initialization or multiple conflicting map instances 2. Unnecessary libraries that increase bundle size without adding functionality 3. Overuse of 3D effects that hinder performance or usability. Deduct 3 points for each redundancy found, and directly deduct 10 points if the core map functionality is compromised by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review modular design (such as separating map configuration/layer management/data fetching logic), reusable component structure, and build process optimization. Deduct 5 points if global state management is poorly implemented; deduct 5 points if there's significant code duplication across components; deduct 5 points if the component hierarchy doesn't follow Vue best practices. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "Evaluate whether the map visualization follows modern cartographic design principles: 1) Balanced visual hierarchy between basemap and custom elements 2) Appropriate color schemes that maintain readability of map features 3) Proper labeling and symbology that scales with zoom levels. Deduct 3 points for cluttered map elements, 5 points for poor color contrast affecting readability, and 5 points for inconsistent styling between map elements. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the dynamic interaction smooth and seamless?",
+      "description": "Judge whether the map interactions meet performance standards: 1) Map pan/zoom responds within 60ms 2) Building selection/hover feedback within 100ms 3) Smooth frame rate (>30fps) during 3D navigation. Deduct 5 points for jerky camera movements, 3 points for delayed tile loading causing visual gaps, and 5 points for unresponsive UI controls during map rendering. Verify if level-of-detail adjustments occur smoothly during zoom operations. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "medium"
+}

package/library/web_applications-web_visuals/ai-park-innovation-platform.json

@@ -0,0 +1,68 @@
+{
+  "index": 878,
+  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. Make sure the code you generate is executable and demonstrable when possible. Help me create a webpage for \"AI Park Innovation\" - an AI platform specifically for generating industrial designs, featuring a dedicated information plaza, model integration interface, and generation interface. The page should be simple yet impressive, with the words \"AI Park Innovation\" appearing on each page.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the main webpage structure properly implemented?",
+      "description": "Evaluate if the HTML structure follows semantic principles with proper sectioning (header, main, footer), responsive layout, and correct navigation between the three key sections (information plaza, model integration interface, and generation interface). Check if the title 'AI Park Innovation' appears consistently on each page. Score 0 if basic structure is missing, 5 if structure exists but with improper hierarchy, and 10 if perfectly structured with proper semantic HTML5 tags and responsive design principles.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the information plaza functionality complete?",
+      "description": "Review whether the information plaza includes essential components like news feed, featured designs, user highlights, and information filtering/searching. Check if dynamic content loading is implemented, if pagination or infinite scrolling works, and if the content display adapts to different screen sizes. Deduct 3 points if filtering is missing, 4 points if dynamic loading isn't implemented, and 3 points if responsiveness fails on mobile devices. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the model integration interface functional and intuitive?",
+      "description": "Assess the model integration interface for its ability to upload/select AI models, configure parameters, and display integration status. Verify if the interface includes model compatibility checking, parameter validation, and visual feedback during integration processes. Deduct 5 points if there's no error handling for model uploads, 3 points if parameter configuration is confusing, and 2 points if visual feedback during processes is missing. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the AI design generation interface well-implemented?",
+      "description": "Evaluate the design generation interface for input mechanisms (text prompts, reference images, parameter settings), generation state management, and result visualization. Check if it includes progress indicators, cancellation options, and history tracking. Deduct 4 points if there's no visual preview or progress indication, 3 points if the interface lacks parameter fine-tuning, and 3 points if history/saved designs aren't accessible. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as invalid inputs, network failures, image loading errors, etc.) and provide friendly error prompts or recovery mechanisms. Code with strong robustness should be able to effectively handle these edge cases, giving 10 points. If the robustness is average, give 5 points, and if no exceptions are handled, give 0 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that are eye-catching?",
+      "description": "Check whether the code includes surprise features that enhance the experience (e.g., 1. Real-time AI design preview 2. Collaborative design capabilities 3. AR visualization of generated designs). Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "Strictly check three types of redundancy: 1. Redundant implementation of similar functions (e.g., multiple image uploaders) 2. Function modules unrelated to industrial design generation (e.g., social networking functions) 3. Fancy effects that affect performance (e.g., excessive animations that slow down core functionality). Deduct 3 points for each redundancy found, and directly deduct 10 points if the core functions are interfered with by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review modular design (such as separating UI/API/state management), component reusability, and build process optimization. Deduct 5 points if global state pollution is found or modern frontend frameworks aren't leveraged; deduct 5 points if the code duplication rate is too high (over 30%); deduct 5 points if the build/bundling process is inefficient. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "Evaluate whether the overall design follows modern design principles: 1) Harmonious color matching (no more than 3 primary colors) 2) Proper layout spacing (element spacing follows the 8px multiple principle) 3) Professional font system (body font size ≥ 14px, line height over 1.5 times). Deduct 3 points for each crowded visual element, 5 points for a glaring color combination, and 5 points for chaotic text-image layout. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the dynamic interaction smooth and seamless?",
+      "description": "Judge whether the dynamic effects conform to human perception characteristics: 1) Click feedback delay ≤ 100ms 2) Transition animation duration controlled between 300-500ms 3) Clear visual focus guidance. Deduct 5 points for each operation without feedback, 3 points for visual after-images during transitions, and 5 points for hard-to-find key function buttons. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "medium"
+}

package/library/web_applications-web_visuals/alarm-data-overview-module.json

@@ -0,0 +1,68 @@
+{
+  "index": 958,
+  "question": "You are a code expert, please use your professional knowledge to generate accurate and professional responses. Make sure the code you generate is executable for demonstration when possible.\n\n2. Today's Alarm Data Overview Module\n- Statistical analysis of total alarms by time dimension\n- Alarm type distribution (bar chart/pie chart)\n- Processing status proportion (donut chart)\n- Alarm heat map of key areas\n\nPlease help me design the frontend component layout for the above features, and write a complete HTML example page for mobile version.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the statistical analysis of total alarms by time dimension properly implemented?",
+      "description": "Check if the code implements a time-based visualization (line chart, bar chart, etc.) showing alarm frequency over different time periods. The implementation should include time filtering options (daily, weekly, monthly), proper time axis formatting, and data aggregation logic. Score 0 if missing, 5 if basic implementation without filtering, 10 if complete with interactive time range selection.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the alarm type distribution visualization correctly implemented?",
+      "description": "Evaluate whether the bar chart or pie chart accurately represents alarm type distribution with proper legends, labels, and percentage values. Check if the visualization is responsive and handles various data scenarios (many categories, single dominant category). Deduct 5 points if legends are missing or unclear, 3 points if percentage calculation is incorrect. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the processing status proportion (donut chart) properly visualized?",
+      "description": "Check if the donut chart correctly displays alarm processing statuses (e.g., pending, in progress, resolved) with clear color coding, labels, and center statistics. The chart should be interactive allowing users to select status segments for filtering. Deduct 3 points if center statistics are missing, 5 points if interaction is not implemented. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the alarm heat map for key areas effectively implemented?",
+      "description": "Review if the heat map properly visualizes alarm concentration in different areas using appropriate color gradients, legends, and location markers. The heat map should be responsive to different screen sizes and provide zoom/pan capabilities. Deduct 5 points if the color gradient is hard to interpret, 3 points if area labeling is unclear, 5 points if the map is not interactive. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as empty datasets, network errors, rendering on different screen sizes, etc.) and provide friendly error prompts or fallback displays. Code with strong robustness should be able to effectively handle these edge cases, giving 10 points. If the robustness is average, give 5 points, and if no exceptions are handled, give 0 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that are eye-catching?",
+      "description": "Check whether the code includes surprise features that enhance the experience (e.g., 1. Real-time data updates with animation 2. Cross-chart filtering capabilities 3. Custom alert thresholds with visual indicators). Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "Strictly check three types of redundancy: 1. Redundant implementation of similar visualizations (e.g., multiple charts showing the same data) 2. Function modules unrelated to alarm data overview 3. Fancy effects that affect performance (e.g., excessive animations or 3D effects that slow down rendering). Deduct 3 points for each redundancy found, and directly deduct 10 points if the core functions are interfered with by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review modular design (such as separating chart components, data processing, and layout), code reuse for similar chart types, and responsive design implementation. Deduct 5 points if global variables are excessively used; deduct 5 points if the code duplication rate is too high (over 30%); deduct 5 points if responsive design breakpoints are poorly implemented. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards for mobile?",
+      "description": "Evaluate whether the mobile design follows modern principles: 1) Touch-friendly element size (min 44px tap targets) 2) Proper layout spacing for small screens (element spacing follows the 8px multiple principle) 3) Professional font system (body font size ≥ 16px for mobile readability). Deduct 3 points for elements that are too small to tap accurately, 5 points for horizontal scrolling on standard mobile screens, and 5 points for text that requires zooming to read. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the mobile interaction smooth and optimized for touch?",
+      "description": "Judge whether the mobile interaction conforms to touch interaction standards: 1) Fast touch response (≤ 100ms) 2) Proper touch gestures for map navigation/chart interaction 3) Clear visual feedback for tapped states. Deduct 5 points for interactions requiring precise cursor control, 3 points for missing touch feedback, and 5 points for overlapping touch targets. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/birthday-card-with-oldies-music.json

@@ -0,0 +1,68 @@
+{
+  "index": 337,
+  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. Make sure the generated code is executable for demonstration. Help me create a birthday card frontend program for my 85-year-old mother who was a teacher, accompanied by classic Western oldies music.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the birthday card visual design age-appropriate and teacher-themed?",
+      "description": "Review whether the code implements a visually appealing birthday card with teacher-themed elements (books, apples, classroom motifs, etc.) and age-appropriate design for an 85-year-old recipient. Check for large, readable fonts (minimum 18px), high contrast colors, and meaningful educational symbols. Score 0 if no thematic elements are present, 5 if basic birthday card layout exists, and 10 if fully themed with teacher-specific decorations and age-appropriate considerations.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the classic Western oldies music integration properly implemented?",
+      "description": "Check whether the HTML5 audio implementation includes proper music controls, autoplay handling (with user interaction compliance), and features classic Western oldies tracks suitable for an 85-year-old. Verify volume controls, play/pause functionality, and track selection. Deduct 5 points if music doesn't autoplay after user interaction, 3 points if volume controls are missing, and 5 points if music selection isn't age-appropriate. Full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Are interactive birthday card animations and effects well-designed?",
+      "description": "Evaluate whether the card includes engaging but gentle animations suitable for elderly users - such as falling confetti, blooming flowers, or gentle fade-in effects for birthday messages. Animations should be smooth, not overwhelming, and enhance the emotional impact. Deduct 5 points if animations are too fast or jarring, 3 points if no interactive elements exist, and 5 points if effects don't match the celebratory theme. Full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the personalized message system and content delivery implemented?",
+      "description": "Check whether the code includes a personalized birthday message system with heartfelt content appropriate for a retired teacher. Verify if messages appear progressively, include teaching appreciation themes, and have options for customization. Deduct 5 points if messages are generic, 3 points if no progressive reveal mechanism exists, and 5 points if content doesn't reflect the teacher profession. Give 10 points if fully personalized with teaching-related appreciation messages.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as audio loading failures, browser compatibility issues, slow network connections, etc.) and provide friendly error prompts or fallback mechanisms. Code with strong robustness should effectively handle these edge cases, giving 10 points. If robustness is average, give 5 points, and if no exceptions are handled, give 0 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that enhance emotional connection?",
+      "description": "Check whether the code includes thoughtful features that enhance the emotional experience (e.g., 1. Photo slideshow integration 2. Voice message recording capability 3. Memory timeline of teaching career 4. Interactive guest book for family messages). Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "Strictly check three types of redundancy: 1. Redundant implementation of similar functions (e.g., multiple audio players) 2. Function modules unrelated to birthday celebration (e.g., games or complex navigation) 3. Overly flashy effects that might overwhelm elderly users (e.g., rapid blinking animations). Deduct 3 points for each redundancy found, and directly deduct 10 points if core birthday card functions are interfered with by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review modular design (such as separating audio/visual/interaction layers), clean HTML structure, and organized CSS/JavaScript. Deduct 5 points if global state pollution is found or no design patterns are used; deduct 5 points if code duplication rate is too high (over 30%); deduct 5 points if files are not properly organized. Full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet accessibility and aesthetic standards for elderly users?",
+      "description": "Evaluate whether the design follows accessibility principles for elderly users: 1) High contrast color combinations with warm, nostalgic tones 2) Large, clear typography (minimum 18px, preferably 20px+) 3) Generous spacing and large clickable areas 4) Consistent visual hierarchy. Deduct 3 points for each small or hard-to-read element, 5 points for poor color contrast, and 5 points for cluttered layout. Full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the user interaction gentle and intuitive for elderly users?",
+      "description": "Judge whether interactions are designed for elderly users: 1) Large, clearly labeled buttons with hover effects 2) Gentle, slow-paced animations (500-800ms duration) 3) Clear visual feedback for all interactions 4) Simple, intuitive navigation flow. Deduct 5 points for each small or unclear interactive element, 3 points for too-fast animations, and 5 points for confusing navigation. Full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/create-bouncing-heart-dev-code.json

@@ -0,0 +1,68 @@
+{
+  "index": 1623,
+  "question": "You are a code expert, please use your professional knowledge to generate accurate and professional responses. Make sure any code you generate can be executed and displayed. Use dev to create a bouncing heart.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the bouncing heart animation fully implemented?",
+      "description": "Examine if the code correctly implements a heart-shaped object with bouncing physics. Check if the heart shape is accurately drawn using path commands or SVG elements. Deduct 5 points if the shape isn't clearly heart-like. Give 0 points if there's no bouncing animation, 5 points if basic movement exists, and 10 points if the heart shows realistic physics with proper acceleration/deceleration.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Does the heart bounce with realistic physics?",
+      "description": "Evaluate the physics implementation of the bouncing effect. Look for gravity simulation, proper velocity changes on bounce, and natural movement patterns. A high-quality implementation would include elastic deformation on impact, momentum conservation, and possibly damping effects. Deduct 3 points if gravity feels unnatural, 3 points if the bounce lacks realistic rebound, and 5 points if there's no collision detection with boundaries. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the animation smooth and performant?",
+      "description": "Check if the animation runs at 60fps without jank or stuttering. Examine whether the implementation uses requestAnimationFrame() instead of setInterval/setTimeout for better performance. Consider whether the rendering approach is optimized (Canvas/SVG/CSS). Deduct 5 points for visible stuttering during animation, 3 points for inefficient animation loops, and 5 points if performance degrades over time. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the heart visually appealing?",
+      "description": "Assess the visual quality of the heart. Check for smooth curves, appropriate coloring/shading, and whether any visual enhancements (gradients, shadows, etc.) are implemented tastefully. A great implementation might include pulsing effects, particle trails, or creative styling. Deduct 5 points for jagged edges or crude shape implementation, 3 points for plain/flat appearance without any styling. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as window resizing, browser tab switching, device rotation, etc.) and maintain the animation state correctly. Code with strong robustness should be able to effectively handle these edge cases, giving 10 points. If the robustness is average, give 5 points, and if no exceptions are handled, give 0 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that are eye-catching?",
+      "description": "Check whether the code includes surprise features that enhance the experience (e.g., 1. User interaction with the heart 2. Multiple hearts with different behaviors 3. Special effects like trails or particle emissions on bounce). Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "Strictly check three types of redundancy: 1. Redundant animation loops or duplicate render functions 2. Unnecessary complex calculations that could be simplified 3. Excessive effects that impact performance without adding value. Deduct 3 points for each redundancy found, and directly deduct 10 points if the core animation is interfered with by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review code organization (separation of concerns between animation, rendering, and physics), naming conventions, and reusability. Deduct 5 points if animation logic is mixed with rendering code; deduct 3 points if variable/function names are unclear; deduct 5 points if the code can't be easily adapted for different scenarios. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the implementation meet professional design standards?",
+      "description": "Evaluate whether the overall design follows modern visual principles: 1) Appropriate use of color for the heart (not garish) 2) Good proportions and symmetry in the heart shape 3) Professional integration with the page (no awkward overlaps or positioning). Deduct 3 points for poor color choices, 5 points for asymmetrical or poorly proportioned hearts, and 5 points for hearts that don't integrate well with the page layout. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the interaction responsive and user-friendly?",
+      "description": "Judge whether any user interactions (if implemented) are intuitive and responsive: 1) Click/touch responses within 100ms 2) Clear visual feedback for interactions 3) Intuitive controls if the heart can be manipulated. Deduct 5 points for delayed response to user input, 3 points for confusing interaction patterns, and 5 points for complete lack of interaction when interaction would enhance the experience. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/create-nicegui-marquee-text-scrolling-effect.json

@@ -0,0 +1,68 @@
+{
+  "index": 1081,
+  "question": "You are a code expert, please use your professional knowledge to generate accurate and professional responses. Pay attention to ensuring that the generated code is executable for demonstration purposes. Create a marquee (text scrolling effect) using nicegui.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the basic marquee functionality correctly implemented?",
+      "description": "Review whether the code successfully implements text scrolling using NiceGUI components. Check if the text moves continuously from one side to another and wraps around correctly. Score 0 if no scrolling effect is achieved, 5 if basic movement exists but with flaws, and 10 if smooth continuous scrolling is implemented.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Are the NiceGUI-specific components and APIs properly utilized?",
+      "description": "Evaluate the appropriate use of NiceGUI's component model, reactive properties, and event handling. Deduct 5 points if using direct DOM manipulation instead of NiceGUI APIs, 3 points if UI updates are implemented inefficiently, and 3 points if not leveraging NiceGUI's built-in capabilities for animations or UI updates. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Does the implementation provide configuration options?",
+      "description": "Check whether the marquee implementation includes customization options like scrolling speed, direction (left-to-right or right-to-left), pause on hover, text color, background color, and font size. Deduct 2 points for each missing essential option. Give 10 points if all key options are present and functional.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the marquee component reusable and properly encapsulated?",
+      "description": "Evaluate if the marquee is implemented as a reusable component/class that can be instantiated multiple times on the same page with different content and settings. Check if it's properly encapsulated with clean separation between marquee logic and the main application. Deduct 5 points if the component isn't reusable, and 3 points if the interface is unclear or inconsistent. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle various edge cases such as empty text, very long text, text with HTML characters, window resizing, and dynamic content updates. Code with strong robustness should handle these edge cases effectively, giving 10 points. If the robustness is average, give 5 points, and if no edge cases are handled, give 0 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that are eye-catching?",
+      "description": "Check whether the code includes surprise features that enhance the experience (e.g., 1. Multiple marquees synchronization 2. Text effects like fading edges 3. Responsive behavior based on screen size). Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "Strictly check three types of redundancy: 1. Redundant implementation of similar animation logics 2. Function modules unrelated to marquee functionality 3. Fancy effects that affect performance. Deduct 3 points for each redundancy found, and directly deduct 10 points if the core functions are interfered with by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review code structure, commenting quality, error handling, and adherence to Python/NiceGUI best practices. Deduct 5 points if there's no error handling; deduct 3 points if the code formatting doesn't follow PEP 8 guidelines; deduct 3 points if comments are missing or insufficient. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "Evaluate whether the marquee design follows modern UI principles: 1) Harmonious integration with surrounding UI elements 2) Proper contrast between text and background 3) Smooth animation without visual jitter. Deduct 3 points for poor text readability, 5 points for animation jankiness, and 3 points for inconsistent styling with the rest of the UI. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the dynamic interaction smooth and seamless?",
+      "description": "Judge whether the scrolling animation performs well: 1) Consistent and smooth scrolling at the defined speed 2) No performance issues on different screen sizes 3) Proper behavior when tab is inactive and reactivated. Deduct 5 points for jerky animations, 3 points for performance degradation with longer text, and 5 points if the marquee breaks on window resize. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/css-visual-effects-spring-theme.json

@@ -0,0 +1,68 @@
+{
+  "index": 1092,
+  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. CSS Visual Effects Implementation Solutions\n\n## 1. Card Container (#card1)\n- **Multi-layer Gradient Background**  \n  `linear-gradient` + `background-blend-mode` overlay\n- **Frosted Glass Effect**  \n  `backdrop-filter: blur()` + semi-transparent background\n- **Hover Zoom**  \n  `transform: scale()` + `transition` easing\n- **Dynamic Shadow**  \n  `filter: drop-shadow()` with animation\n- **Border Animation**  \n  `border-image` + gradient animation\n- **Clipping Effect**  \n  `clip-path` polygon transformation\n- **Glow Flow**  \n  pseudo-element + `box-shadow` diffusion animation\n- **Glitch Effect**  \n  random cutting with `clip-path` + chromatic aberration\n- **3D Flip**  \n  `transform-style: preserve-3d`\n- **Ripple Diffusion**  \n  pseudo-element radial gradient scaling\n- **Dynamic Noise**  \n  `background` with base64 noise image overlay\n- **Breathing Light Effect**  \n  `animation` opacity pulse\n- **Hover Tilt**  \n  `rotateX/Y` perspective transformation\n- **Stroke Drawing**  \n  `stroke-dasharray` SVG border animation\n- **Content Highlight**  \n  `mix-blend-mode: lighten` blending mode\n\n---\n\n## 2. Title Module (card1-title)\n- **Text Gradient Color**  \n  `background-clip:text` + gradient background\n- **Text Stroke**  \n  `-webkit-text-stroke` colored border\n- **Neon Text**  \n  multiple `text-shadow` pulse animation\n- **Text Mask**  \n  dynamic gradient with `mask-image`\n- **Typewriter Effect**  \n  `steps()` animation + `width` clipping\n- **Text Shattering**  \n  `clip-path` fragment animation\n- **Light Tracking**  \n  pseudo-element tracking mouse position (`:hover`)\n- **3D Embossing**  \n  multiple layers of `text-shadow`\n- **Liquid Fill**  \n  `linear-gradient` background position animation\n- **Text Shaking**  \n  random displacement with `transform: translate()`\n- **Mirror Reflection**  \n  `-webkit-box-reflect` property\n- **Blur Focus**  \n  `filter: blur()` clearing on hover\n- **Letter Spacing Animation**  \n  `letter-spacing` easing change\n- **Text Impression**  \n  `text-shadow` simulating concave effect\n- **Stroke Flow**  \n  `conic-gradient` rotation animation\n\n---\n## 3. Subtitle Module (card1-title2)\n- **Two-color Gradient Text**  \n  `background`  \n  `background-clip`  \n  Smooth transition effect from main color to secondary color\n- **Metallic Stroke**  \n  `-webkit-text-stroke`  \n  `text-shadow`  \n  Light gray metallic border + soft shadow design\n- **Ambient Light Shadow**  \n  `text-shadow`  \n  Three-dimensional shadow effect simulating ambient light source\n- **Dynamic Gradient Animation**  \n  `background`  \n  `animation`  \n  Three-color cyclic flowing gradient effect\n- **Breathing Halo**  \n  `box-shadow`  \n  `animation`  \n  Theme color breathing light effect\n- **Particle Trajectory**  \n  `background-image`  \n  High-light fine dot matrix distribution\n- **Hover Hue Shift**  \n  `filter`  \n  Dynamic hue change interaction in main color system\n- **Click Highlight**  \n  `background`  \n  `transition`  \n  Instantaneous highlight click feedback\n- **Focus Halo**  \n  `box-shadow`  \n  Accent color focus indicator halo\n- **Dynamic Color Space**  \n  `mix-blend-mode`  \n  `background`  \n  Interactive background color mixing effect\n- **Holographic Projection**  \n  `text-shadow`  \n  Multi-color rainbow overlay effect\n- **Flowing Colors**  \n  `mask`  \n  Theme color flowing across text effect\n\n---\n\n## 4. Icon (.card1-icon)\n- **Wheel Rotation**  \n  `@keyframes` + `transform: rotate()`\n- **Hover Bounce**  \n  `cubic-bezier()` easing curve\n- **Headlight Sweep**  \n  pseudo-element + `rotate()` angle animation\n- **Exhaust Smoke**  \n  `border-radius` bubble diffusion animation\n- **Car Body Reflection**  \n  `linear-gradient` highlight movement\n- **Hover Shadow**  \n  dynamic expansion with `filter: drop-shadow()`\n- **Color Switch**  \n  `:hover` triggering `filter: hue-rotate()`\n- **Path Movement**  \n  `offset-path` + `animation`\n- **Motion Blur Effect**  \n  multiple pseudo-elements with `animation-delay` overlay\n- **Vibration Feedback**  \n  quick micro-movements with `transform: translate()`\n- **Entrance Animation**  \n  compound animation with `scale()` + `opacity`\n- **3D Folding**  \n  perspective with `skew()` transformation\n- **Flowing Border**  \n  gradient animation with `border-image`\n- **Pixelation Effect**  \n  `image-rendering: pixelated`\n- **Glitch Color Change**  \n  `clip-path` cutting + hue separation\n\n---\n\n## 5. Step Flow Group\n### Container Effects\n- **Grid Background**  \n  `repeating-linear-gradient`\n- **Line Animation**  \n  `border-dashoffset` dashed line flow\n- **Hover Lift**  \n  `translateY()` + deeper shadow\n- **Card Folding**  \n  `max-height` transition animation\n- **Entrance Sequence**  \n  delayed animation with `nth-child()`\n- **Glass Effect**  \n  `backdrop-filter` + semi-transparency\n- **Hover Highlight**  \n  `mix-blend-mode: screen`\n- **Dynamic Border**  \n  `outline` + `animation`\n- **Glow Focus**  \n  pseudo-element radial gradient scaling\n- **Card Stacking**  \n  multiple pseudo-element layers with `rotate()`\n\n### 5.1 Individual Step\n- **Number Bounce**  \n  elastic animation with `transform: scale()`\n- **Arrow Flow**  \n  `background-position` displacement\n- **Term Flicker**  \n  random opacity with `animation: flicker`\n- **Highlight Scanning**  \n  `linear-gradient` background position animation\n- **Icon Rotation**  \n  infinite loop with `transform: rotate()`\n- **Text Fade-in**  \n  `width` clipping + `steps()` animation\n- **Background Ripple**  \n  pseudo-element wave diffusion\n- **Hover Zoom**  \n  focused content with `scale()`\n- **3D Flip**  \n  double-sided card 3D transformation\n- **Dynamic Marker**  \n  animated underline with `::after`\n\n---\n\n## 6. Tip Module\n- **Bulb Flashing**  \n  `filter: brightness()` pulse\n- **Border Scanning**  \n  `conic-gradient` rotation animation\n- **Text Flow Light**  \n  gradient animation with `background`\n- **Warning Flicker**  \n  hue cycle with `animation: alert`\n- **Hover Expansion**  \n  compound transformation with `transform`\n- **Dynamic Underline**  \n  `background-size` position animation\n- **Elastic Text**  \n  stretching with `transform: scaleY()`\n- **Blur Focus**  \n  clearing `filter: blur()` on `:hover`\n- **Fragment Assembly**  \n  fragment reassembly animation with `clip-path`\n- **3D Shadow**  \n  multiple layers of `box-shadow`\n- **Color Inversion**  \n  triggering `filter: invert()`\n- **Typewriter Effect**  \n  character-by-character display with `@keyframes`\n- **Text Mirroring**  \n  reflection with `-webkit-box-reflect`\n- **Dynamic Marker**  \n  bouncing dot with `::before`\n- **Background Disturbance**  \n  noise animation with `mask-image`\n\n---Please help me combine these effects to write CSS for the HTML I asked you to observe earlier, creating a complete HTML document. The style should be spring-themed with fresh colors.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the card container (#card1) implementation complete and effective?",
+      "description": "• Evaluate whether the multi-layer gradient background is properly implemented with `linear-gradient` and appropriate `background-blend-mode`.\n• Check if the frosted glass effect uses correct `backdrop-filter: blur()` values with semi-transparent background.\n• Verify that hover zoom interactions use smooth transitions with proper easing functions.\n• Examine if dynamic shadows utilize `filter: drop-shadow()` with appropriate animation parameters.\n• Assess if the border animation employs `border-image` with gradient animations that complement the spring theme.\n• The card container should demonstrate at least 5 of the requested effects. Deduct 2 points for each missing or incorrectly implemented effect.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Are the title module effects properly implemented?",
+      "description": "• Check if text gradient color is correctly implemented using `background-clip: text` with spring-themed gradient colors.\n• Verify that text stroke is applied appropriately with `-webkit-text-stroke` and complements the design.\n• Assess if neon text effects use multiple `text-shadow` properties with appropriate color values.\n• Examine if any text mask or typewriter effects are properly animated with correct timing functions.\n• Review if 3D embossing or other requested title effects enhance the spring theme.\n• Full marks require at least 4 title effects to be correctly implemented. Deduct 2.5 points for each missing or poorly executed effect.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the subtitle module (card1-title2) implementation effective?",
+      "description": "• Verify if the two-color gradient text transitions smoothly between spring-themed colors.\n• Check if metallic stroke or ambient light shadow effects properly enhance readability without overwhelming the text.\n• Assess if dynamic gradient animations use appropriate timing and colors that match the spring theme.\n• Examine if hover effects (like hue shift or focus halo) provide meaningful interaction feedback.\n• Evaluate if holographic or flowing color effects complement rather than detract from the overall design.\n• Full implementation should include at least 4 subtitle effects. Deduct 2.5 points for each missing or improperly implemented effect.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Are the icon (.card1-icon) effects interactive and visually appealing?",
+      "description": "• Check if wheel rotation animations use proper `@keyframes` with smooth `transform: rotate()` implementation.\n• Verify that hover bounce effects employ appropriate `cubic-bezier()` easing curves for natural movement.\n• Assess if headlight sweep or similar effects use correctly positioned pseudo-elements with proper animations.\n• Examine if color change effects (such as `filter: hue-rotate()`) are triggered appropriately on hover.\n• Evaluate if entrance animations combine scaling and opacity changes with proper timing.\n• At least 4 icon effects should be correctly implemented. Deduct 2.5 points for each missing or poorly executed effect.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "• Evaluate whether the CSS handles browser compatibility issues (e.g., proper vendor prefixes for `-webkit-text-stroke`, `backdrop-filter`, etc.).\n• Check if fallback styles are provided for browsers that don't support advanced CSS features.\n• Verify that animations and transitions have reasonable performance optimizations (using `transform` and `opacity` for animations, `will-change` property where appropriate).\n• Assess if media queries are used to adapt effects for different screen sizes and devices.\n• Code with strong robustness should effectively handle these compatibility concerns, giving 10 points. If the robustness is average, give 5 points, and if no compatibility handling is included, give 0 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that are eye-catching?",
+      "description": "• Check whether the code includes surprise features that enhance the experience (e.g., 1. Coordinated animations that respond to scrolling 2. Dynamic color schemes that adapt to system preferences 3. Interactive elements that respond to cursor movement beyond basic hover).\n• Assess if combinations of effects create unique visual experiences not explicitly requested.\n• Evaluate if any custom animations or transitions demonstrate creative approaches to the spring theme.\n• Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "• Strictly check three types of redundancy: 1. Redundant implementation of similar effects (e.g., multiple glow effects with minimal differences) 2. Effect modules unrelated to the spring theme 3. Fancy effects that affect performance (e.g., excessive particle animations or filters).\n• Assess if animations are overused, creating visual noise rather than enhancing the user experience.\n• Check if CSS properties are unnecessarily duplicated or if there's inefficient nesting of selectors.\n• Deduct 3 points for each redundancy found, and directly deduct 10 points if the core functions are interfered with by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "• Review modular CSS organization (such as separating base styles, animations, and effect components).\n• Check if CSS custom properties (variables) are used for consistent color schemes and animation parameters.\n• Assess if naming conventions are consistent and follow a recognizable pattern (BEM, SMACSS, etc.).\n• Verify if code is properly commented for complex effects and animations.\n• Evaluate if there's unnecessary repetition of CSS rules that could be consolidated.\n• Deduct 5 points if global styles cause unintended side effects; deduct 5 points if code is poorly organized or has excessive duplication; deduct 5 points if there's no use of CSS variables or other modern practices. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "• Evaluate whether the overall design follows modern design principles: 1) Harmonious color matching that reflects a spring theme (no more than 3 primary colors plus accents) 2) Proper layout spacing (element spacing follows the 8px multiple principle) 3) Professional font system (body font size ≥ 14px, line height over 1.5 times).\n• Check if the visual effects enhance rather than distract from content readability.\n• Verify that spring-themed colors are properly balanced and not overwhelming.\n• Assess if animations maintain visual hierarchy rather than competing for attention.\n• Deduct 3 points for each crowded visual element, 5 points for a glaring color combination, and 5 points for chaotic text-image layout. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the dynamic interaction smooth and seamless?",
+      "description": "• Judge whether the dynamic effects conform to human perception characteristics: 1) Animation durations are appropriate (300-500ms for most transitions) 2) Easing functions match the physical nature of the animations 3) Hover effects provide immediate feedback (≤ 100ms).\n• Check if animations have proper finishing states rather than abrupt stops.\n• Verify that multiple animations on the same element are properly choreographed.\n• Assess if animations respect user preferences for reduced motion.\n• Evaluate if effects degrade gracefully when not supported.\n• Deduct 5 points for each operation without feedback, 3 points for visual after-images during animations, and 5 points for jarring or disorienting transitions. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "medium"
+}

package/library/web_applications-web_visuals/customizable-rectangles-with-embedded-panel.json

@@ -0,0 +1,68 @@
+{
+  "index": 1392,
+  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. Make sure the code you generate is executable and displayable. Implement a front-end framework with a rectangle that has a default width of 500mm and height of 1200mm, with customizable height and width. This represents a glass panel. Then embed another rectangle on the right side of this rectangle, with a fixed height of 33mm and width of 73mm. This smaller rectangle should be positioned at a fixed distance of 950mm from the bottom of the outer rectangle.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the front-end framework properly implemented?",
+      "description": "Check if a proper framework is used (React, Vue, or vanilla JS) with appropriate component structure. The code should follow modern front-end practices with clear separation of concerns. Score 0 if no framework approach is used, 5 if basic implementation exists, and 10 if well-structured with proper component architecture.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Are the glass panel dimensions correctly implemented?",
+      "description": "Verify that the main rectangle (glass panel) has the default dimensions of 500mm width and 1200mm height. Check if these dimensions are properly rendered and if the code includes functionality to customize both height and width. Deduct 5 points if default dimensions are incorrect, 3 points if customization is missing for either dimension.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the smaller rectangle accurately positioned and sized?",
+      "description": "Confirm that the smaller rectangle is precisely 73mm width by 33mm height, embedded on the right side of the main rectangle, and positioned exactly 950mm from the bottom of the outer rectangle. Deduct 5 points if dimensions are incorrect, 5 points if positioning is wrong.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is there a proper unit conversion system implemented?",
+      "description": "Evaluate whether the code handles unit conversion properly (mm to pixels or other screen units). Check if the system maintains proportions when resized and across different screen sizes. Deduct 5 points if conversion is inconsistent, 5 points if proportions are lost during resizing.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as negative dimensions, extremely large values, browser compatibility issues, etc.) and provide friendly error handling or fallback mechanisms. Code with strong robustness should effectively handle edge cases, giving 10 points. If robustness is average, give 5 points, and if no exceptions are handled, give 0 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 5,
+      "title": "Are there any innovative features that are eye-catching?",
+      "description": "Check whether the code includes surprise features that enhance the experience (e.g., 1. Interactive resizing with visual guides 2. Responsive scaling with device orientation 3. Animation effects when dimensions change). Add 3 points for each practical innovative feature implemented (maximum 10 points).",
+      "maxScore": 10
+    },
+    {
+      "id": 6,
+      "title": "Are there any redundant features?",
+      "description": "Strictly check three types of redundancy: 1. Redundant implementation of similar functions (e.g., multiple resize handlers) 2. Function modules unrelated to the rectangle requirements 3. Fancy effects that affect performance. Deduct 3 points for each redundancy found, and directly deduct 10 points if the core functions are interfered with by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review modular design (such as separating rendering logic from dimension calculations), code reusability, and maintainability. Deduct 5 points if global state pollution is found or design patterns are not used; deduct 5 points if the code duplication rate is too high (over 30%); deduct 5 points if there's no clear architecture. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "Evaluate whether the visualization follows modern design principles: 1) Clean visual representation of the rectangles 2) Proper contrast between elements 3) Professional appearance with appropriate borders, shadows, or other visual cues to distinguish the rectangles. Deduct 3 points for each visual inconsistency, 5 points for poor visual hierarchy, and 5 points for unprofessional appearance. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the dynamic interaction smooth and seamless?",
+      "description": "Judge whether any interactive elements (like customization controls) are intuitive and responsive: 1) Input feedback delay ≤ 100ms 2) Smooth transition when dimensions change 3) Clear visual indication of current dimensions. Deduct 5 points for each operation without feedback, 3 points for laggy transitions, and 5 points for confusing or hidden controls. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}