@getollie/cli 0.0.4 → 0.2.0

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

@@ -1,68 +0,0 @@
-{
-  "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

@@ -1,68 +0,0 @@
-{
-  "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

@@ -1,68 +0,0 @@
-{
-  "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

@@ -1,68 +0,0 @@
-{
-  "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"
-}

package/library/web_applications-web_visuals/display-videos-from-local-folder-on-web-page.json

@@ -1,68 +0,0 @@
-{
-  "index": 1398,
-  "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 purposes. Display all videos from a video folder on a web page without using a server.",
-  "checklist": [
-    {
-      "id": 0,
-      "title": "Is the local file access implementation correctly designed?",
-      "description": "Check if the code properly implements file access using the HTML5 File API or other client-side techniques. Score 0 if no solution for local file access is provided, 5 if a basic implementation with limitations is present, and 10 if a robust solution with proper error handling is implemented that works across modern browsers.",
-      "maxScore": 10
-    },
-    {
-      "id": 1,
-      "title": "Are appropriate video formats and codecs supported?",
-      "description": "Evaluate whether the code handles multiple video formats (MP4, WebM, OGG) and provides fallbacks for browser compatibility. Deduct 3 points if only one format is supported without fallbacks, 5 points if common formats are missing. Check if the implementation detects and handles unsupported formats gracefully. The full score is 10 points.",
-      "maxScore": 10
-    },
-    {
-      "id": 2,
-      "title": "Is a functional video playback interface implemented?",
-      "description": "Review whether the implementation includes essential playback controls (play/pause, volume, seek bar, fullscreen toggle). Deduct 2 points for each missing core control. Also check if the player includes nice-to-have features like playback speed controls or picture-in-picture support. The full score is 10 points.",
-      "maxScore": 10
-    },
-    {
-      "id": 3,
-      "title": "Is there an effective video gallery navigation system?",
-      "description": "Assess whether the implementation provides a gallery-style interface for browsing and selecting videos (thumbnails, filtering, sorting options). Score 3 points for basic listing, 7 points for intermediate features like thumbnails and sorting, and 10 points for advanced gallery features with responsive design and good organization.",
-      "maxScore": 10
-    },
-    {
-      "id": 4,
-      "title": "Is the code robust?",
-      "description": "Evaluate whether the code can handle common abnormal situations (such as unsupported file formats, large video files, corrupted videos, 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 thumbnail generation 2. Video metadata extraction and display 3. Playlist creation functionality). 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 video player instances) 2. Function modules unrelated to video playback (e.g., unnecessary data processing) 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 modular design (such as separating UI/video processing/file handling), maintainability, and code organization. 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 separation of concerns. 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 fast sliding, and 5 points for hard-to-find key function buttons. The full score is 10 points.",
-      "maxScore": 10
-    }
-  ],
-  "class": "Web Applications-Web Visuals",
-  "difficulty": "easy"
-}

package/library/web_applications-web_visuals/dotnet-6-website-baidu-map-location-markers.json

@@ -1,68 +0,0 @@
-{
-  "index": 1632,
-  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. Be sure to provide executable code in your demonstrations whenever possible. How do I create a .NET 6.0 website that can browse maps and set location markers using the Baidu API?",
-  "checklist": [
-    {
-      "id": 0,
-      "title": "Is the .NET 6.0 project structure properly set up?",
-      "description": "Check whether the code correctly implements a .NET 6.0 web application structure with proper MVC/Razor Pages patterns, appropriate project organization, and dependency injection configuration. Score 0 if using outdated .NET Framework, 5 if using .NET Core 3.1 or .NET 5, and 10 if correctly implemented with .NET 6.0 specific features (minimal APIs or traditional controllers).",
-      "maxScore": 10
-    },
-    {
-      "id": 1,
-      "title": "Is Baidu Maps API integration properly implemented?",
-      "description": "Review if the code includes proper Baidu Maps API key configuration, correct script loading with appropriate API version, and proper JavaScript initialization. Verify error handling for API loading failures and API key validation. Deduct 5 points if API key is hardcoded in client-side code, 3 points if no error handling for map initialization failures. The full score is 10 points.",
-      "maxScore": 10
-    },
-    {
-      "id": 2,
-      "title": "Is the map browsing functionality complete?",
-      "description": "Evaluate whether the implementation includes essential map browsing capabilities: pan, zoom controls, map type switching, and geolocation. Check if the code handles responsive design for different screen sizes. Deduct 3 points if zoom controls are missing, 5 points if geolocation functionality isn't implemented, and 2 points if map type switching is absent. The full score is 10 points.",
-      "maxScore": 10
-    },
-    {
-      "id": 3,
-      "title": "Is the marker management system fully functional?",
-      "description": "Check whether the marker system includes adding, editing, removing, and persisting markers. Verify if marker data includes appropriate properties (coordinates, title, description, custom icons). Deduct 5 points if marker persistence to database is missing, 3 points if marker customization is limited, and 5 points if CRUD operations are incomplete. 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 failures, network interruptions, invalid coordinates, and concurrent marker operations) 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. Marker clustering for handling large datasets 2. Custom polygon/polyline drawing 3. Heatmap visualization 4. Route planning between markers). 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 map initialization routines) 2. Function modules unrelated to mapping (e.g., unnecessary social media integrations) 3. Fancy effects that affect performance (e.g., excessive animations or autoplay videos). 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 map services/controllers/view models), unit test coverage, 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 the build process is not automated. 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) Map interaction response delay ≤ 100ms 2) Marker animation duration controlled between 200-400ms 3) Clear visual feedback when placing markers. Deduct 5 points for each operation without feedback, 3 points for laggy map rendering during pan/zoom operations, and 5 points for confusing marker placement UI. The full score is 10 points.",
-      "maxScore": 10
-    }
-  ],
-  "class": "Web Applications-Web Visuals",
-  "difficulty": "easy"
-}

package/library/web_applications-web_visuals/draggable-nodes-to-forms-using-vue-flow.json

@@ -1,68 +0,0 @@
-{
-  "index": 932,
-  "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 for demonstration. Create an example of draggable nodes to forms using Vue Flow.\n\n(1) The left side of the page is a node placement area, displaying the node types I can drag in small icon format.\n(2) The right side of the page is a canvas area. When nodes are dragged onto it and released, they become input forms.",
-  "checklist": [
-    {
-      "id": 0,
-      "title": "Is the Vue Flow draggable node system fully implemented?",
-      "description": "Review whether the code correctly implements Vue Flow's node dragging mechanism, including drag source configuration, drop target handling, and node type registration. Check if custom node components are properly defined with Vue Flow's node interface. Score 0 if core dragging functionality is missing, 5 if only basic drag-drop works without proper Vue Flow integration, and 10 if all Vue Flow dragging features are correctly implemented with proper event handling.",
-      "maxScore": 10
-    },
-    {
-      "id": 1,
-      "title": "Is the node-to-form transformation mechanism properly implemented?",
-      "description": "Evaluate whether dragged nodes correctly transform into functional input forms on the canvas. Check if form field types (text, number, select, etc.) are properly mapped to node types, form validation is implemented, and form data binding works correctly. Deduct 5 points if forms lack proper validation, 3 points if data binding is incomplete. Full score requires complete form functionality with proper Vue reactivity.",
-      "maxScore": 10
-    },
-    {
-      "id": 2,
-      "title": "Is the dual-panel layout (sidebar + canvas) properly structured?",
-      "description": "Check whether the left sidebar displays node types in an organized, visually appealing icon format and the right canvas area provides adequate space for form building. Evaluate if the layout is responsive and maintains proper proportions. Deduct 5 points if layout breaks on different screen sizes, 3 points if sidebar icons are poorly organized. Requires proper CSS Grid/Flexbox implementation.",
-      "maxScore": 10
-    },
-    {
-      "id": 3,
-      "title": "Is the canvas state management and node persistence implemented?",
-      "description": "Evaluate whether the canvas properly manages node positions, form configurations, and maintains state consistency. Check if nodes can be repositioned after being dropped, form data is preserved during interactions, and the overall canvas state can be serialized/deserialized. Deduct 5 points if node positions aren't persistent, 3 points if form data is lost during operations. Full score requires complete state management.",
-      "maxScore": 10
-    },
-    {
-      "id": 4,
-      "title": "Is the code robust?",
-      "description": "Evaluate whether the code can handle common abnormal situations (such as invalid drag operations, browser compatibility issues, Vue component lifecycle errors, etc.) and provide friendly error prompts or recovery mechanisms. Code with strong robustness should effectively handle edge cases like dragging outside canvas bounds, invalid node types, and component mounting failures. Give 10 points if fully robust, 5 points if average robustness, and 0 points if no exception handling.",
-      "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 form preview with sample data 2. Node connection system for form logic 3. Form template saving/loading 4. Drag-to-connect form validation rules). Add 3 points for each practical innovative feature implemented (maximum 10 points). Features must be functional, not just visual enhancements.",
-      "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 drag handlers for same functionality) 2. Function modules unrelated to form building (e.g., built-in calendar widget unrelated to forms) 3. Fancy effects that affect drag performance (e.g., heavy animations during drag operations). Deduct 3 points for each redundancy found, and directly deduct 10 points if core drag-drop functionality is interfered with by redundant code.",
-      "maxScore": 10
-    },
-    {
-      "id": 7,
-      "title": "Does the code have engineering quality?",
-      "description": "Review Vue component architecture (proper separation of concerns, composables usage, component reusability), TypeScript integration if applicable, and proper Vue Flow plugin configuration. Deduct 5 points if components are tightly coupled or Vue best practices aren't followed; deduct 5 points if code duplication rate is too high (over 30%); deduct 5 points if Vue Flow isn't properly configured. Full score requires clean Vue architecture.",
-      "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 sidebar icons and canvas (no more than 3 primary colors) 2) Proper layout spacing following 8px grid system 3) Professional typography (≥14px font size, 1.5x line height) 4) Clear visual hierarchy between sidebar and canvas. Deduct 3 points for each crowded visual element, 5 points for glaring color combinations, and 5 points for chaotic icon layout in sidebar.",
-      "maxScore": 10
-    },
-    {
-      "id": 9,
-      "title": "Is the dynamic interaction smooth and seamless?",
-      "description": "Judge whether drag interactions conform to human perception: 1) Drag initiation feedback ≤100ms 2) Smooth drag animations without performance drops 3) Clear drop zone indicators 4) Proper hover states on sidebar icons 5) Form field focus management. Deduct 5 points for each laggy drag operation, 3 points for unclear drop feedback, and 5 points for missing hover states on draggable elements. Requires 60fps drag performance.",
-      "maxScore": 10
-    }
-  ],
-  "class": "Web Applications-Web Visuals",
-  "difficulty": "medium"
-}

package/library/web_applications-web_visuals/electronic-map-mark-points-insert-photos.json

@@ -1,68 +0,0 @@
-{
-  "index": 922,
-  "question": "You are a code expert. Please use your professional knowledge to generate accurate and professional responses. Be sure to ensure that the code you generate is executable and can be demonstrated. I need code or a program that can mark points on an electronic map and insert photos at those points.",
-  "checklist": [
-    {
-      "id": 0,
-      "title": "Is the map initialization and basic functionality properly implemented?",
-      "description": "Review whether the code correctly initializes a map using a standard mapping API (like Google Maps, Leaflet, or Mapbox), with proper API keys and configuration. Check if the map renders correctly with appropriate initial zoom level and center coordinates. Score 0 if no map is displayed, 5 if basic map display works but with initialization issues, and 10 if the map initializes perfectly with proper error handling.",
-      "maxScore": 10
-    },
-    {
-      "id": 1,
-      "title": "Is the marker placement functionality fully implemented?",
-      "description": "Evaluate whether users can add markers to the map through clicks or coordinate input. Check if markers persist after placement and if their positions are accurately maintained when zooming or panning. Deduct 5 points if marker placement works but lacks user interaction feedback, 3 points if markers don't maintain accurate positions, and 5 points if no custom styling options are available. The full score is 10 points.",
-      "maxScore": 10
-    },
-    {
-      "id": 2,
-      "title": "Is the photo upload and attachment system well-designed?",
-      "description": "Check if the code includes functionality to upload photos (through drag-and-drop, file picker, or URL input) and attach them to specific markers. Verify that multiple file formats are supported (at least JPG, PNG, GIF) and that proper validation occurs for file size and type. Deduct 5 points if only one upload method is available, 3 points if file validation is missing, and 5 points if large photos aren't resized/compressed for performance. The full score is 10 points.",
-      "maxScore": 10
-    },
-    {
-      "id": 3,
-      "title": "Is the photo-marker association and display functionality effective?",
-      "description": "Assess whether photos are visibly associated with their respective markers and if they display properly when interacting with markers (on click, hover, etc.). Check for preview thumbnails, full-size viewing options, and if multiple photos per marker are supported. Deduct 5 points if the photo-marker visual association is unclear, 3 points if there's no larger view option for photos, and 5 points if multiple photos per marker aren't supported. 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 image files, network interruption during uploads, marker placement outside valid map areas, 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. Geolocation to add markers at user's current position 2. Clustering for managing many markers 3. Photo editing/filters before attaching to markers 4. Export/import functionality for saving marked maps). 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 ways to add markers with duplicate code) 2. Function modules unrelated to map/photo features (e.g., unnecessary social sharing widgets) 3. Fancy effects that affect performance (e.g., excessive animations when showing photos). 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 map logic/photo handling/UI components), unit test coverage, 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 the build process is not automated. 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) Marker placement feedback delay ≤ 100ms 2) Photo loading indicators when attaching images 3) Smooth transitions when opening/viewing photos from markers. Deduct 5 points for each operation without feedback, 3 points for laggy photo loading without indicators, and 5 points for abrupt transitions when interacting with markers and photos. The full score is 10 points.",
-      "maxScore": 10
-    }
-  ],
-  "class": "Web Applications-Web Visuals",
-  "difficulty": "medium"
-}