GGBScript for LiaScript: Interactive Geometry Constructions in the Browser

Geometry education benefits enormously from interactive visualizations. Students who can drag a point, observe how angles change, or animate a transformation understand geometry differently than those who only read about it.

The GGBScript template provides a JavaScript-based geometry construction API inspired by GeoGebra. Code blocks with the @GGBScript macro render as interactive canvas diagrams — and they integrate with LiaScript’s @input scripting to create fully dynamic, animated visualizations controlled by sliders.

GGBScript is an experimental implementation developed with the assistance of ChatGPT. It covers the most common geometry constructions but is not yet a complete GeoGebra replacement.

Quick Start

<!--
import: https://raw.githubusercontent.com/LiaTemplates/GGBScript/refs/heads/main/README.md
-->

One macro: @GGBScript used in the fence opener (not at the end of the block).

@GGBScript — Geometry Construction Blocks

Place @GGBScript in the header line of a JavaScript code block. The code runs and renders as an interactive geometry diagram. Double-click on the diagram to edit the code and see changes immediately.

```js @GGBScript
Titel("Dreieck und Mittelpunkt");

const A = Punkt(1, 1, "A");
const B = Punkt(5, 1, "B");
const C = Punkt(3, 4, "C");

const dreieck = Polygon(A, B, C);
Farbe(dreieck, "lightblue");

Mittelpunkt(A, B, C);
```

Available Construction Primitives

GGBScript uses a German-language API that mirrors GeoGebra’s command vocabulary:

Points and Lines

Shapes

Measurements and Derived Objects

Display

Interactive Examples with Sliders

GGBScript integrates with LiaScript’s @input scripting system. Sliders defined with <script input="range" ...> update diagram parameters in real time:

Rotation:
<script input="range" min="0" max="360" value="0" output="rotation">
@input
</script>°

```js @GGBScript
const A = Punkt(2, 1, "A");
const B = Punkt(5, 1, "B");
const C = Punkt(3, 4, "C");

const P = Polygon(A, B, C);
Farbe(P, "red");

const M = Mittelpunkt(P);
const P2 = Rotation(P, M, @input(`rotation`));
Farbe(P2, "blue");
```

The polygon rotates live as the slider moves — no page reload, no server interaction.

Transformations

Full Template Demo

Use Cases

Euclidean geometry — Construct triangles, circles, perpendicular bisectors, and inscribed polygons step by step in the course text. Students can double-click to modify constructions.

Transformation geometry — Animate rotations, reflections, and translations with input sliders. Students drag the rotation angle and see the transformed shape update instantly.

Introductory coordinate geometry — Plot points, lines, and distances on a coordinate plane. Teach the distance formula, midpoint theorem, and circle equations visually.

STEM courses — Illustrate geometric principles in physics, engineering, and optics — angles of incidence, vector components, gear ratios.

Technical Facts

Try It

Related Templates

• JSXGraph — mature, feature-rich interactive math and geometry library
• Algebrite — symbolic computation (CAS) in the browser
• TikzJax — static but precise TikZ geometry diagrams from LaTeX code
• p5js — canvas-based creative coding for geometric animations