View source for 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 [//home.pf.jcu.cz/~hasek/ Roman Hašek])

<jsxgraph width="500" height="400" box="box">
(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]);
})();
</jsxgraph>

===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:

<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 3, 4, -3]});
</source>

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

<source lang="javascript">
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'});
</source>

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)

<source lang="javascript">
var square1 = board.create('regularpolygon', [A, B, 4],{name: ‘Square 1’});
var square2 = board.create('regularpolygon', [B, E, 4],{name: ‘Square 2’});
</source>

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.

<source lang="javascript">
var C = square1.vertices[2];
var G = square2.vertices[3];
</source>

Finally, we draw the lines AH and EC.

<source lang="javascript">
var p = board.create('line', [A, H]);
var q = board.create('line', [E, C]);
</source>


===The complete JavaScript code===

<source lang="javascript">
(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]);
})();
</source>

[[Category:Examples]]
[[Category:Geometry]]