# Two squares

### Example: Two squares

Consider two arbitrary squares *ABCD* and *BFGE* having the vertex *B* in common, see figure below.
Prove that the straight lines *AE* and *CF* are perpendicular for each such two squares.

(Source: Maria Alessandra Mariotti: Reasoning, proof and proving in mathematics education. Proceedings of the 10th International Congress on Mathematical Education (ICME), 4-11 July, 2004. 2008. Construction by Roman Hašek)

### Explanation

The solution to the example, i.e. proving the given statement, is left to the reader. Here we will only deal with the programming of the illustrative dynamic figure.

**Programming:**

First of all, we define the bounding box as follows:

```
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 3, 4, -3]});
```

To get the figure we start plotting points A, B and E, where B is the common vertex of squares.

```
var A = board.create('point', [-3, -1], {color: 'blue'});
var B = board.create('point', [0, -1], {color: 'blue'});
var E = board.create('point', [1, -2], {name: 'E', color: 'blue'});
```

To construct these squares, we use the *regularpolygon* element, specifying the first two vertices, i.e. *A* and *B* for the first square, and *B* and *E* for the second, and the number of vertices, i.e. 4 for both squares. (See https://jsxgraph.org/docs/symbols/RegularPolygon.html)

```
var square1 = board.create('regularpolygon', [A, B, 4],{name: ‘Square 1’});
var square2 = board.create('regularpolygon', [B, E, 4],{name: ‘Square 2’});
```

To label the remaining vertices we call them as elements of vertex array, which is indexed from 0, i. e. the vertex A corresponds to square1.vertices(0) etc.

```
var C = square1.vertices[2];
var G = square2.vertices[3];
```

Finally, we draw the lines AH and EC.

```
var p = board.create('line', [A, H]);
var q = board.create('line', [E, C]);
```

### The complete JavaScript code

```
(function() {
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-4, 3, 4, -3]});
var A = board.create('point', [-3, -1], {color: 'blue'}),
B = board.create('point', [0, -1], {color: 'blue'}),
E = board.create('point', [1, -2], {name: 'E', color: 'blue'}),
square1 = board.create('regularpolygon', [A, B, 4], {name: 'Square 1'}),
square2 = board.create('regularpolygon', [B, E, 4], {name: 'Square 2'}),
C = square1.vertices[2],
H = square2.vertices[3],
p = board.create('line', [A, H]),
q = board.create('line', [E, C]);
})();
```