@getollie/cli 0.0.1

package/library/web_applications-web_visuals/frontend-online-preview-file-streams-vue2.json

@@ -0,0 +1,68 @@
+{
+  "index": 308,
+  "question": "You are a code expert, please use your professional knowledge to generate accurate and professional responses. Make sure that the code you generate is executable for demonstration purposes. Implement frontend online preview of file streams in Vue 2.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the file streaming preview functionality fully implemented?",
+      "description": "Check whether the code correctly implements file streaming preview for common formats (PDF, images, videos, audio, text) using appropriate native or third-party viewers. Score 0 if no preview functionality is implemented, 5 if only basic formats are supported, and 10 if comprehensive format support with fallback mechanisms is included.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the Vue 2 implementation technically correct?",
+      "description": "Evaluate whether the code follows Vue 2 best practices, including proper component structure, lifecycle hooks, and reactivity patterns. Check if it uses Vue-specific features appropriately (e.g., props, computed properties, watchers). Deduct 5 points for anti-patterns like direct DOM manipulation outside of directives, and 3 points for not using Vue's reactivity system properly. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the streaming implementation optimized?",
+      "description": "Assess if the implementation uses efficient streaming techniques like chunked loading, progressive rendering, or range requests instead of loading the entire file at once. Check if it handles large files (>10MB) without memory issues. Deduct 5 points if streaming is simulated with complete downloads, and 3 points if no loading progress indicator is provided. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the preview functionality secure and robust against malicious files?",
+      "description": "Verify that the code includes security measures such as content type validation, sanitization for potentially dangerous files, and proper error handling for corrupted files. Score 0 if no security measures are implemented, 5 if basic validation exists, and 10 if comprehensive protection (including sandboxing where appropriate) is included.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as unsupported file types, network interruptions, partial file loads, CORS issues, 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. Automatic format detection 2. Thumbnail generation for quick preview 3. Dark mode support for previews 4. Annotation capabilities). 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 preview libraries for the same file type) 2. Function modules unrelated to file preview (e.g., built-in editing capabilities) 3. Fancy effects that affect performance (e.g., unnecessary animations during file loading). 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 preview logic/UI/network layers), test coverage, and error handling. Deduct 5 points if global state pollution is found or if 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 proper error boundary implementation. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "Evaluate whether the preview interface follows modern design principles: 1) Responsive layout that works across device sizes 2) Proper controls positioning and sizing (play/pause, zoom, navigation) 3) Consistent visual language with the surrounding Vue application. Deduct 3 points for each usability issue, 5 points for disproportionate control sizes, and 5 points for preview containers that don't adapt to available space. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the dynamic interaction smooth and seamless?",
+      "description": "Judge whether the preview interactions conform to user expectations: 1) Loading states with progress indication 2) Smooth transitions when switching between files or preview modes 3) Intuitive controls for different file types. Deduct 5 points for each missing loading indicator, 3 points for jarring transitions between states, and 5 points for unintuitive or inconsistent control behaviors across file types. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Management Systems-File Management",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/frontend-rotating-ppt-charts-program.json

@@ -0,0 +1,68 @@
+{
+  "index": 328,
+  "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 display. Create a frontend program that shows rotating PPT charts.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the basic PPT chart rotation functionality implemented?",
+      "description": "Check if the code implements core functionality for displaying and rotating between slides. Score 0 if no rotation mechanism exists, 5 if only basic manual navigation (prev/next) is implemented, 10 if it includes both manual and automatic rotation with transition controls.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Are multiple chart types supported in the implementation?",
+      "description": "Evaluate the variety of chart types supported (e.g., bar charts, line charts, pie charts, scatter plots). Score 3 points for each chart type implemented with proper rendering and data binding, up to a maximum of 10 points. If only one basic chart type is implemented, score no more than 5 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the data visualization properly implemented with a flexible data structure?",
+      "description": "Review whether the code uses appropriate data structures for chart data and supports dynamic data updates. Score 0 if data is hardcoded without abstraction, 5 if there's basic data structure but limited flexibility, 10 if it provides a complete data model with update mechanisms and data validation.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Are interactive chart features implemented?",
+      "description": "Examine whether the charts include interactive features such as tooltips on hover, zoom functionality, click events, or data filtering. Score 2 points for each interactive feature that enhances user experience, up to 10 points. Basic interactivity scores 5 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as invalid data formats, missing values, window resizing, etc.) and provide friendly error prompts or recovery mechanisms. Code with strong robustness should 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. Custom animation effects between slides 2. Theme switching capability 3. Export/import of chart configurations). 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 animation systems coexisting) 2. Function modules unrelated to PPT charts (e.g., unnecessary form elements) 3. Fancy effects that affect performance (e.g., excessive animations that slow down transitions). 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 logic/view/data layers), 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 code organization or comments. 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) Slide transition smoothness with no visual stuttering 2) Transition animation duration controlled between 300-500ms 3) Clear visual cues for current slide position. Deduct 5 points for jarring or abrupt transitions, 3 points for animations that feel too slow or too fast, and 5 points for lack of progress indicators. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "medium"
+}

package/library/web_applications-web_visuals/gridstackjs-vue3-designer.json

@@ -0,0 +1,68 @@
+{
+  "index": 1103,
+  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. Be sure to make the generated code executable for demonstration purposes. https://gridstackjs.com/ is the official website of gridstackjs. I want to create a large screen designer based on it with: left component list, layer management, top menu bar, middle layer area, and right property configuration panel. It should allow dynamically adding and dragging Vue components, dynamically adjusting component layers, and support features like screen theme colors, background images, and responsive design. Please implement this based on Vue3 + TypeScript.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the layout structure properly implemented with all required panels?",
+      "description": "Review whether the code correctly implements the five main areas (left component list, layer management, top menu bar, middle layer area, right property configuration panel) using proper Vue 3 components and CSS grid/flex layouts. Check if responsive breakpoints are properly defined and if the layout adapts well to different screen sizes. Deduct 3 points if any section is missing, 3 points for improper responsive design implementation, and 5 points if the panels cannot be resized or collapsed.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is GridStack.js correctly integrated with Vue 3 and TypeScript?",
+      "description": "Examine whether GridStack.js is properly wrapped as Vue components with TypeScript interfaces. Check if GridStack events are properly bound to Vue methods, if GridStack options are properly typed, and if the integration follows Vue 3 Composition API patterns. Score 10 points if fully implemented with proper type safety, 5 points if basic functionality works but with type issues, 0 points if the integration is broken or incomplete.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the component drag-and-drop system fully functional?",
+      "description": "Verify if components can be dragged from the left panel to the grid area with proper preview and positioning. Check if the drag interactions handle edge cases (grid boundaries, overlapping elements, etc.) and if the component is properly instantiated upon drop with correct properties. Evaluate if custom drag handles are implemented and if position data is properly synchronized with the state management system. Deduct 5 points if drag-and-drop doesn't work consistently, 3 points if it lacks visual feedback during drag.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the layer management system properly implemented?",
+      "description": "Assess if the layer panel correctly displays all components in the design with proper hierarchy, allows reordering through drag-and-drop, and synchronizes z-index changes with the GridStack instance. Check if layer visibility toggling, locking, and selection highlighting are implemented. Deduct 5 points if z-index management is broken, 3 points if layer reordering doesn't work properly, and 2 points if visual indicators for selection/visibility are missing.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as component loading errors, network interruptions, user operation errors, etc.) and provide friendly error prompts or recovery mechanisms. Check if there are proper validation for user inputs, error boundaries for components, and defensive programming practices. 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. Component templates/presets system 2. Undo/redo functionality 3. Export/import capability 4. Real-time collaboration 5. Component animation editor). Add 2 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 state management solutions coexisting) 2. Function modules unrelated to screen design (e.g., built-in irrelevant tools) 3. Fancy effects that affect performance (e.g., excessive animations). 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 TypeScript type definitions (proper interfaces, generics, and type guards), component composition (proper props/emits definitions, lifecycle handling), and build process setup. Check if the application follows Vue 3 best practices (Composition API usage, proper refs/reactive objects). Deduct 5 points if TypeScript is used incorrectly or has any \"any\" types; deduct 5 points if Vue components are poorly structured; deduct 3 points if there's no proper build configuration or optimization. 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 for the editor UI (distinguishable from the designed content) 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) 4) Clear visual hierarchy between panels. Deduct 3 points for each crowded visual element, 5 points for a glaring color combination, and 5 points for chaotic panel organization. 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) Immediate feedback when interacting with components 2) Smooth animations for resizing/moving components (60fps) 3) Clear visual indicators for selection, hover states, and active elements 4) Proper loading states for asynchronous operations. Deduct 5 points for sluggish drag operations, 3 points for missing interaction feedback, and 5 points for confusing UI states during operations. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "hard"
+}

package/library/web_applications-web_visuals/h5-panoramic-vr-effect-code.json

@@ -0,0 +1,68 @@
+{
+  "index": 1102,
+  "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 purposes. H5 implementation of panoramic VR effect code (without introducing other library files)",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the panoramic VR rendering core implemented correctly?",
+      "description": "Verify the implementation of the spherical projection algorithm, ensuring correct texture mapping using equirectangular projection. Check if the code includes proper handling of field of view (FOV), aspect ratio, and perspective distortion correction. Score 0 if no spherical projection is implemented, 5 if basic projection exists with inaccuracies, and 10 if the projection correctly renders 360° imagery with proper distortion handling.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the mouse/touch interaction for camera control properly implemented?",
+      "description": "Evaluate the implementation of drag-to-rotate functionality, including proper event listeners for both mouse and touch inputs. Check for smooth damping effects, proper calculation of rotation angles based on input deltas, and prevention of gimbal lock. Look for inertia implementation for natural movement. Deduct 5 points if only one input method is supported, 3 points if interaction feels jerky or unnatural, and 2 points if edge cases (like rapid movements) aren't handled.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is device orientation support implemented for mobile VR experience?",
+      "description": "Assess whether the code uses the DeviceOrientation API to allow navigation via physical device movement. Check if the implementation includes proper permission handling, fallbacks for unsupported devices, and calibration options. Verify that orientation changes are translated correctly to camera rotation. Score 0 if completely missing, 5 if implemented but with significant limitations (e.g., works only in certain orientations), and 10 if fully functional with smooth and accurate tracking.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the panoramic image loading and texture management efficient?",
+      "description": "Check if the code implements proper image loading with progress indicators, error handling for failed loads, and optimization techniques like mip-mapping or progressive loading for large panoramic images. Verify that memory management is considered for large textures. Deduct 3 points if no loading feedback is provided, 5 points if image optimizations are absent, and 5 points if errors in loading aren't gracefully handled.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as unsupported browsers, WebGL initialization failures, image loading errors, etc.) and provide friendly error prompts or fallback mechanisms. Code with strong robustness should detect WebGL support, handle various aspect ratios, and manage resource limitations gracefully. Give 10 points for comprehensive error handling, 5 points for partial error handling, and 0 points if exceptions are unmanaged.",
+      "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 VR experience (e.g., 1. Hotspot navigation system 2. Animated transitions between panoramas 3. Customizable viewing filters 4. Audio spatialization tied to viewing direction). 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. Duplicate rendering approaches coexisting unnecessarily 2. Overly complex shader code for simple effects 3. Unused event listeners or abandoned experimental features still present in the code. Deduct 3 points for each redundancy found, and directly deduct 10 points if the core VR functionality is impaired by redundant code.",
+      "maxScore": 10
+    },
+    {
+      "id": 7,
+      "title": "Does the code have engineering quality?",
+      "description": "Review the code structure for separation of concerns (renderer, controls, UI components), proper namespacing to avoid global pollution, and appropriate commenting. Check for hard-coded values that should be configurable parameters. Deduct 5 points for excessive global variables, 5 points for poor code organization (monolithic structure), and 5 points for inadequate documentation of the API or functions. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "Evaluate whether UI elements (controls, loading indicators, hotspots) follow modern design principles: 1) Minimal and unobtrusive UI that doesn't distract from the immersive experience 2) Clear iconography for interactive elements 3) Proper contrast ensuring visibility against varying panorama backgrounds. Deduct 3 points for cluttered UI elements, 5 points for controls that obscure the VR experience, and 5 points for poor visibility of interactive elements. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the performance optimization adequate for smooth VR experience?",
+      "description": "Judge whether the implementation maintains 60fps minimum for a smooth VR experience: 1) Efficient WebGL practices (proper use of buffers, minimal state changes) 2) Render optimizations like frustum culling or level-of-detail 3) Appropriate texture size management for mobile devices. Deduct 5 points for each noticeable frame drop during rotation, 5 points for excessive memory usage causing browser warnings, and 5 points if the code doesn't adapt rendering quality for different devices. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "hard"
+}

package/library/web_applications-web_visuals/homepage-spinning-animation-loading-popup.json

@@ -0,0 +1,68 @@
+{
+  "index": 1528,
+  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. Ensure that the code you generate is executable when possible. I want to design a homepage where there's a popup window in the center of the screen with a spinning animation when it loads, including a prompt that says \"Loading...",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the popup window implementation complete?",
+      "description": "Review whether the code correctly positions a popup window in the center of the screen using proper CSS positioning techniques (absolute positioning with top/left 50% and transform translate). Check if the window has proper styling (borders, background, shadow effects) and is responsive on different screen sizes. Score 0 if no popup is implemented, 5 if it's basic but fixed-size, and 10 if it's fully responsive and properly styled.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the spinning animation correctly implemented?",
+      "description": "Evaluate the spinning animation implementation - check for CSS animation/transition properties with keyframes or JavaScript-based animation. The animation should be smooth (60fps), have appropriate duration (1-3s per rotation), and proper easing. Animations should use hardware acceleration (transform instead of position changes). Deduct 5 points if the animation is jerky, 3 points if it lacks easing, and 2 points if it's CPU-intensive.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Is the 'Loading...' prompt properly displayed?",
+      "description": "Check if the loading text is visible, properly formatted, and positioned relative to the spinner. Text should have sufficient contrast ratio (minimum 4.5:1), appropriate font size (16px+), and should indicate loading progress clearly. Deduct 5 points if the text is hard to read, 3 points if poorly positioned relative to the spinner, and 2 points if it doesn't visually connect with the loading action.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is there a proper loading state management?",
+      "description": "Verify if the code includes logic to display the loading popup during actual loading operations (fetch requests, large asset loading) and properly hides it when loading completes. Check for timeout handling (showing error message after excessive loading time), ability to cancel loading, and smooth transition when loading completes. Give 10 points for comprehensive loading state management, 5 for basic show/hide functionality, and 0 if no real loading logic exists.",
+      "maxScore": 10
+    },
+    {
+      "id": 4,
+      "title": "Is the code robust?",
+      "description": "Evaluate whether the code can handle common abnormal situations (such as slow network, missing assets, script 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. Progressive loading indicators 2. Customized themed spinner 3. Subtle background animations during loading). 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 animations (e.g., multiple spinners running simultaneously) 2. Unnecessary decorative elements that distract from the loading state 3. Heavy effects that affect performance (e.g., complex particle effects during loading). 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 components/animation logic/loading state management), code reusability, and performance optimization. Deduct 5 points if global scope 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 no performance considerations exist (like requestAnimationFrame for animations). 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) Animation timing appears natural (not too fast or slow) 2) Transition between loading and loaded states is smooth without jarring changes 3) Visual hierarchy guides user attention appropriately. Deduct 5 points for abrupt appearance/disappearance without transitions, 3 points for animations that cause layout shifts, and 5 points for distracting animations that compete with the main content. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/horror-game-official-website-html.json

@@ -0,0 +1,68 @@
+{
+  "index": 1162,
+  "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 display. Create an HTML code for a horror game official website with 2000 lines of code, including customer service information on the right side that can be collapsed/expanded, download links, game introduction, image showcase, a horror website background, scary background music, and dynamic background effects.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the horror game official website structure fully implemented?",
+      "description": "Review whether the HTML code implements a complete website structure with proper semantic HTML5 tags (header, nav, main, footer), responsive layout (using CSS Grid/Flexbox), and organized sections for all required components (game intro, image showcase, download links, etc). Score 0 if basic structure is missing, 5 if structure exists but with improper semantics, and 10 if properly structured with semantic HTML.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the customer service feature implemented as specified?",
+      "description": "Check whether the collapsible/expandable customer service component is fully functional on the right side of the website. It should include proper animation transitions, accessibility features (ARIA attributes, keyboard navigation), and contact information. Deduct 5 points if the component doesn't collapse/expand properly, 3 points if it lacks responsive behavior on mobile devices. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Are the dynamic horror background effects properly implemented?",
+      "description": "Evaluate the quality and performance of background effects. Check for WebGL/Canvas/CSS animations that create horror atmosphere (fog, flickering lights, floating elements, etc.). Effects should be optimized for performance (using requestAnimationFrame, proper canvas rendering). Deduct 5 points if effects cause visible performance issues, 3 points if animations are basic/generic. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the scary background music functionality properly implemented?",
+      "description": "Check whether the audio implementation includes: auto-play with user consent mechanism, volume control, mute option, and proper looping without gaps. Audio should preload for seamless playback and include fallback formats. Deduct 5 points if audio controls are missing, 3 points if there's no user consent mechanism for autoplay, and 5 points if mobile implementation is broken. 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 image loading failures, audio playback issues, browser compatibility issues, 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. Interactive horror elements that respond to user actions 2. Randomized jumpscares or events 3. Parallax scrolling with horror themes). 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 animation systems doing the same thing) 2. Function modules unrelated to a horror game website (e.g., unrelated social media features) 3. Fancy effects that affect performance (e.g., excessive particle effects that slow down the page). 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 structure/styles/scripts), code organization, use of appropriate design patterns, and browser compatibility. Deduct 5 points if global scope pollution is found; deduct 5 points if the code duplication rate is too high (over 30%); deduct 5 points if there's no progressive enhancement or graceful degradation for older browsers. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional horror design standards?",
+      "description": "Evaluate whether the overall design follows horror genre design principles: 1) Dark color scheme with appropriate accent colors for emphasis 2) Typography that enhances the horror theme (gothic/distressed fonts for headings, readable fonts for content) 3) Proper use of negative space to create tension. Deduct 3 points for each visual element that breaks the horror atmosphere, 5 points for overly bright/cheerful color combinations, and 5 points for cluttered layouts that diminish the horror experience. 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 horror genre expectations: 1) Subtle hover effects that create unease 2) Transition animations that build suspense (300-800ms duration) 3) Clear visual hierarchy guiding users to key elements. Deduct 5 points for each interaction without appropriate feedback, 3 points for animations that break immersion, and 5 points for confusing navigation that frustrates users. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/html-3d-street-view-renderer.json

@@ -0,0 +1,68 @@
+{
+  "index": 278,
+  "question": "You are a code expert. Please use your professional knowledge to generate accurate, professional responses. Make sure that the code you generate is executable for demonstration purposes. Help me write an HTML that can render a 3D street view.",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the 3D street view rendering system properly implemented?",
+      "description": "Check if the code properly implements a 3D street view using appropriate technology (WebGL, Three.js, Babylon.js, etc.). Evaluate if it includes camera controls, perspective projection, and proper scene setup. Score 0 if no 3D rendering is implemented, 5 if basic scene rendering is present, and 10 if a complete street environment with proper depth and perspective is achieved.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Are interactive navigation controls implemented?",
+      "description": "Verify if the code includes intuitive navigation controls (pan, tilt, zoom, street movement) with keyboard/mouse/touch support. Check for smooth camera transitions between positions and proper collision detection to prevent going through buildings/objects. Deduct 5 points if navigation is limited to basic rotation only, 3 points if movement feels jerky or unnatural. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Does the street view include realistic environment elements?",
+      "description": "Evaluate the presence and quality of urban environment elements (buildings, roads, sidewalks, street furniture, vehicles, etc.). Check if textures are properly applied and if lighting creates realistic shadows. Deduct 3 points for missing essential street elements, 5 points for unrealistic textures, and 3 points for poor lighting implementation. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is performance optimization implemented for 3D rendering?",
+      "description": "Assess whether the code includes optimization techniques like level-of-detail rendering, texture compression, object instancing, frustum culling, or occlusion culling. Check for frame rate stability during navigation. Deduct 5 points if frame rate drops below 30fps on standard hardware, 3 points if no asset loading strategies are implemented. 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 WebGL not supported, texture loading failures, window resizing, 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. Dynamic time-of-day lighting 2. Weather effects like rain or snow 3. Interactive storefronts or landmarks 4. Procedurally generated building facades). 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 camera control systems) 2. Function modules unrelated to street view (e.g., a built-in mini-game) 3. Fancy effects that affect performance (e.g., excessive particle systems or post-processing effects). 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 3D rendering/controls/asset management layers), code organization, and build process automation. 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 shader code is mixed with application logic. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 8,
+      "title": "Does the interface vision meet professional design standards?",
+      "description": "Evaluate whether the UI overlay elements follow 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) Clear navigation indicators and controls. Deduct 3 points for each cluttered UI element, 5 points for poor contrast between UI and 3D scene, and 5 points for control elements that block the view. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 9,
+      "title": "Is the dynamic interaction smooth and seamless?",
+      "description": "Judge whether the 3D navigation conforms to human perception characteristics: 1) Camera movement inertia feels natural 2) Transition animations between positions last 300-500ms 3) Movement speed is appropriate for exploring a street. Deduct 5 points for jerky camera movements, 3 points for disorienting rotations or transitions, and 5 points for navigation controls that are difficult to use. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}

package/library/web_applications-web_visuals/html-button-new-page-esp32-arduino.json

@@ -0,0 +1,68 @@
+{
+  "index": 1588,
+  "question": "You are a code expert, please use your professional knowledge to generate accurate and professional responses. Be sure to ensure that the generated code is executable when possible. I am using Arduino IDE to develop for ESP32. I want to develop an HTML page with a button in the middle. When the button is clicked, it should open a new page. When opening the page, it should call function A(), and when closing the page, it should call function B().",
+  "checklist": [
+    {
+      "id": 0,
+      "title": "Is the HTML page correctly structured with a centered button?",
+      "description": "Examine if the HTML document has proper DOCTYPE, head, body sections, and if the button is accurately centered using CSS (flex, grid, or absolute positioning). Button should be properly styled with appropriate size (at least 44x44px for touch targets), contrast ratio (at least 4.5:1 for AA compliance), and hover/active states. Deduct 5 points if button styling is minimal or non-existent, 3 points if centering is approximate rather than precise. Full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 1,
+      "title": "Is the navigation functionality properly implemented?",
+      "description": "Check if the button click handler correctly navigates to a new page using appropriate methods (window.location, <a> tag with href, or history API). Assess whether the navigation maintains proper browser history state. Deduct 5 points if navigation occurs but breaks browser back button functionality, 7 points if navigation is implemented incorrectly or incompletely. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 2,
+      "title": "Are functions A() and B() correctly implemented and called at appropriate lifecycle events?",
+      "description": "Verify that function A() is properly called when the new page loads (using window.onload, DOMContentLoaded, or equivalent ESP32 approach) and function B() is called when closing/navigating away (using beforeunload, pagehide, or equivalent). Examine if both functions are defined with proper scoping. Deduct 5 points if only one function works correctly, 10 points if neither function works. The full score is 10 points.",
+      "maxScore": 10
+    },
+    {
+      "id": 3,
+      "title": "Is the ESP32 integration correctly implemented?",
+      "description": "Evaluate whether the code includes proper ESP32 server setup using ESP32WebServer or equivalent library. Check if the HTML is served correctly from SPIFFS or embedded strings, and if any required ESP32-specific configurations are present (like CORS settings for local development). Deduct 5 points if the implementation works but has inefficient memory usage patterns for an embedded system, 10 points if ESP32 integration is missing or fundamentally flawed. 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 network interruption, page reload, rapid button clicking, etc.) and provide friendly error handling. 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. Smooth transition animations between pages 2. Persistent state management across navigation 3. Offline functionality with service workers). 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 event listeners or multiple ways to trigger the same action 2. Unnecessary libraries or frameworks for a simple ESP32 application 3. Overly complex solutions for simple requirements that may impact ESP32 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 HTML/CSS/JS, using appropriate ESP32 file structure), error handling, and code readability. Deduct 5 points if global scope is polluted; deduct 5 points if the code is not optimized for ESP32's memory constraints; deduct 5 points if variable/function naming is unclear. 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 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 jarring transitions, and 5 points for unclear interactive elements. Consider ESP32's processing limitations when evaluating animation smoothness. The full score is 10 points.",
+      "maxScore": 10
+    }
+  ],
+  "class": "Web Applications-Web Visuals",
+  "difficulty": "easy"
+}