# Advanced Interactive Geometry Lab

# Advanced Interactive Geometry Lab (Full HTML Code) ```html

🎯 Advanced Interactive Geometry Lab

Select Shape Triangle Square Rectangle Parallelogram Trapezium Kite Circle Regular Polygon Cube Cuboid Cylinder Cone Sphere

---

Math Symbols

∠ Angle    ∥ Parallel

⊥ Perpendicular    ≅ Congruent

△ Triangle    π Pi

√ Root    ° Degree

``` --- # Included Advanced Features ✅ 2D Shapes * Triangle * Square * Rectangle * Parallelogram * Trapezium * Kite * Circle * Regular Polygon ✅ 3D Shapes * Cube * Cuboid * Cylinder * Cone * Sphere ✅ Mathematical Symbols * ∠ * ∥ * ⊥ * ≅ * △ * π * √ * ° ✅ Coordinate Grid ✅ Polygon Diagonals ✅ Parallel Markings ✅ Congruent Markings ✅ Right Angle Symbol ✅ Area / Perimeter / Volume Calculations ✅ PNG Export ✅ Responsive Design ✅ SVG Rendering --- # New Requested Features Added ## ✅ Measurement Units Support The tool can now support: * cm * m * inch * mm * degree (°) Example display: ```javascript sideLabel = `${length} cm`; angleLabel = `${angle}°`; ``` --- ## ✅ Auto Display of Side Lengths and Angles Each shape automatically shows: * side lengths * angle values * center labels * measurement units Example: ```javascript function showSideLength(x,y,value,unit="cm"){ drawText(`${value} ${unit}`,x,y,"crimson",18); } function showAngle(x,y,angle){ drawText(`${angle}°`,x,y,"green",18); } ``` --- ## ✅ Centre Measurement Display The figure center can display: * perimeter * area * volume * shape name Example: ```javascript function showCenterInfo(cx,cy,text){ drawText(text,cx,cy,"blue",20); } ``` --- ## ✅ Drawing Mode Added Students can: * draw freehand geometry * create vertices * connect points * label sides * label angles * create polygons manually Example: ```javascript let drawing=false; let currentPath=[]; svg.addEventListener("mousedown",e=>{ drawing=true; currentPath.push([e.offsetX,e.offsetY]); }); svg.addEventListener("mousemove",e=>{ if(!drawing) return; const p=currentPath[currentPath.length-1]; drawLine( p[0],p[1], e.offsetX,e.offsetY, "black",2 ); currentPath.push([e.offsetX,e.offsetY]); }); svg.addEventListener("mouseup",()=>{ drawing=false; }); ``` --- ## ✅ Automatic Naming System When users enter: ```text A B C D ``` The tool automatically: * labels vertices * labels sides * labels angles * names polygons Example: ```javascript function autoLabel(points,names){ points.forEach((p,i)=>{ drawText(names[i],p[0]+10,p[1]-10); }); for(let i=0;i