or run

npx @tessl/cli init
Log in

Version

Files

docs

index.md
tile.json

rubric.jsonevals/scenario-2/

{
  "context": "This evaluation assesses how effectively the engineer uses the rc-progress package to implement a dashboard-style semi-circular gauge with gradient colors. The focus is specifically on utilizing rc-progress's Circle component with gap positioning and gradient color features.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Circle component usage",
      "description": "Uses the Circle component from rc-progress (imported correctly as { Circle } from 'rc-progress' or similar)",
      "max_score": 15
    },
    {
      "name": "Gap degree configuration",
      "description": "Sets gapDegree prop to 180 (or appropriate value) to create a semi-circular arc instead of a full circle",
      "max_score": 20
    },
    {
      "name": "Gap position setting",
      "description": "Sets gapPosition prop to 'bottom' (or equivalent positioning) to orient the gauge from left to right",
      "max_score": 20
    },
    {
      "name": "Gradient color object",
      "description": "Uses strokeColor prop with an object containing color stops (e.g., { '0%': 'green', '50%': 'yellow', '100%': 'red' }) to create the gradient effect",
      "max_score": 25
    },
    {
      "name": "Progress percentage binding",
      "description": "Correctly binds the value prop to Circle's percent prop to control the gauge position",
      "max_score": 10
    },
    {
      "name": "Stroke width styling",
      "description": "Sets strokeWidth prop to 10 to control the thickness of the gauge",
      "max_score": 5
    },
    {
      "name": "Rail color styling",
      "description": "Sets railColor prop to a light gray color for the background rail",
      "max_score": 5
    }
  ]
}