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)

0,0

–o+←↓↑→

A

B

E

C

D

F

G

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]);
})();