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