Difference between revisions of "Two squares"

From JSXGraph Wiki
Jump to navigationJump to search
(Created page with "===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...")
 
 
Line 27: Line 27:
 
</jsxgraph>
 
</jsxgraph>
  
===The JavaScript code===
+
===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">
 
<source lang="javascript">

Latest revision as of 11:33, 15 July 2020

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