JSXGraph book

{lang=EN}

Example: Proof without words

Area of a parallelogram. The area of a parallelogram equals its base multiplied by its height. Prove it!

To solve the example we will use a dynamic proof without words, see figure below. By this means we will show that the area of a parallelogram equals the area of a rectangle whose base and height are the same as that of the parallelogram. {/lang}

{lang=SI}

Primer: dokaz brez besed

Površina paralelograma. Površina paralelograma je enaka produktu dolžine osnovnice in njegove višine. Dokažite!

Za rešitev problema bomo uporabili metodo dokaz brez besed. To bomo storili tako, da bomo pokazali, da je površina paralelograma enaka površini pravokotnika, ki ima eno stranico enako osnovnici paralelograma, druga stranica pa je enaka višini paralelograma. {/lang}

{lang=CZ}

Příklad: Důkaz beze slov

Obsah rovnoběžníku. Obsah rovnoběžníku je roven součinu velikostí jeho základny a výšky na tuto základnu. Dokažte!

Úkol vyřešíme předložením dynamického důkazu beze slov, viz obrázek níže. Jeho prostřednictvím prokážeme, že obsah rovnoběžníku je stejný jako obsah obdélníku, jehož základna a výška jsou stejné jako u rovnoběžníku. {/lang}

{lang=EN} Programming:

First, we define dimensions, width and height, of the drawing area setting the corresponding properties of the div element: {/lang}

{lang=SI} Programiranje:

Najprej definiramo dimenzije risalne površine z nastavitvijo lastnosti div elementa: {/lang}

{lang=CZ} Programování:

Nejprve stanovíme rozměry, tj. šířku a výšku, nákresny přiřazením náležitých hodnot odpovídajícím atributům prvku div: {/lang}

<div id="jxgbox" class="jxgbox" style="width:400px; height:250px;"></div>

{lang=EN} Subsequently, at the beginning of the code bounded by the tags <script>, </script>, we determine the Bounding box as follows: {/lang}

{lang=SI} Nadalje določimo naš bounding box tako: {/lang}

{lang=CZ} Následně, na začátku kódu vymezeného tagy <script>, </script>, definujeme rozsahy souřadnicových os zavedených v nákresně: {/lang}

<div id="jxgbox" class="jxgbox" style="width:400px; height:250px;"></div>
<script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 4, 7, -1]});
</script>

{lang=EN} As an initial sketch, the foundation of the dynamic figure, we draw the fixed parallelogram ABCD that is visible only by its boundary, having no filling: {/lang}

{lang=SI} Kot osnovo naše dinamične slike narišemo paralelogram ABCD, ki ima vidne robove, v notranjosti pa je prazen: {/lang}

{lang=CZ} Jako výchozí motiv, který se stane základem dynamického obrázku, sestrojíme pevný (tj. nepohyblivý) rovnoběžník ABCD, bez výplně, zobrazený pouze svými stranami: {/lang}

<div id="jxgbox" class="jxgbox" style="width:400px; height:250px;"></div>
<script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 4, 7, -1]});
	var A = board.create('point', [0,0], {name:'A', fixed:true, size:1});
    var B = board.create('point', [4,0], {name:'B', fixed:true, size:1});
    var D = board.create('point', [2,3], {name:'D', fixed:true, size:1});
    var C = board.create('parallelpoint', [A, B, D], {name:'C', size:1});
    var par = board.create('polygon', [A, B, C, D], {color:'blue', fillOpacity: 0});
</script>

{lang=EN} Then, we determine point Q, invisible in the figure, the foot of the line passing through D perpendicular to AB, and use it to define a trapezoid QBCD with blue filling, an invariable part of the intended dynamic figure: {/lang}

{lang=SI} Potem določimo točko Q (ki bo na sliki nevidna) kot nožišče pravokotnice na osnovnico skozi točko D. S tem lahko določimo trapez QBCD z modrim polnilom: {/lang}

{lang=CZ} Jako patu kolmice z vrcholu D na přímku AB určíme bod Q, který je v dynamickém obrázku skryt. Slouží jako čtvrtý vrchol potřebný pro sestrojení modře vybarveného lichoběžníku QBCD, který je nehybnou částí vytvářeného dynamického vizuálního důkazu: {/lang}

<div id="jxgbox" class="jxgbox" style="width:400px; height:250px;"></div>
<script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 4, 7, -1]});
	var A = board.create('point', [0,0], {name:'A', fixed:true, size:1});
    var B = board.create('point', [4,0], {name:'B', fixed:true, size:1});
    var D = board.create('point', [2,3], {name:'D', fixed:true, size:1});
    var C = board.create('parallelpoint', [A, B, D], {name:'C', size:1});
    var par = board.create('polygon', [A, B, C, D], {color:'blue', fillOpacity: 0});
	var Q = board.create('point', [
                    function(){ return D.X(); },
                    function(){ return A.Y();
            }], {name:'Q', visible:false});
	var tra = board.create('polygon', [Q, B,C,D], {color:'blue', withLines:false, fillOpacity: 0.3});
</script>

{lang=EN} To complete the parallelogram, we create the right triangle MNP, again filled with blue, the moving part of the visual proof without words. To allow its movement the vertices M, N, P will be independent on the other objects of the figure: {/lang}

{lang=SI} Da dopolnimo trapez do paralelograma, ustvarimo še pravokotni trikotnik MNP, spet z modrim polnilom. To bo gibljivi del našega dokaza, zato morajo njegova oglišča biti neodvisna od preostalih objektov na sliki. {/lang}

{lang=CZ} Pro dokončení výplně rovnoběžníku vytvoříme pravoúhlý trojúhelník MNP, opět modře vybarvený, který bude pohyblivou částí vizuálního dynamického důkazu beze slov. Aby se mohl hýbat, vytvoříme jeho vrcholy M, N, P jako body nezávislé na ostatních prvcích obrázku: {/lang}

<div id="jxgbox" class="jxgbox" style="width:400px; height:250px;"></div>
<script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 4, 7, -1]});
	var A = board.create('point', [0,0], {name:'A', fixed:true, size:1});
    var B = board.create('point', [4,0], {name:'B', fixed:true, size:1});
    var D = board.create('point', [2,3], {name:'D', fixed:true, size:1});
    var C = board.create('parallelpoint', [A, B, D], {name:'C', size:1});
    var par = board.create('polygon', [A, B, C, D], {color:'blue', fillOpacity: 0});
	var Q = board.create('point', [
                    function(){ return D.X(); },
                    function(){ return A.Y();
            }], {name:'Q', visible:false});
	var tra = board.create('polygon', [Q, B,C,D], {color:'blue', withLines:false, fillOpacity: 0.3});
	var M = board.create('point', [0,0], {name:'M', visible:false});
    var N = board.create('point', [function() {return M.X()+2;}, function(){return M.Y();}], {name:'N', visible:false})
    var P = board.create('point', [function() {return M.X()+2;}, function(){return M.Y()+3;}], {name:'P', visible:false})
    var tri = board.create('polygon', [M, N, P], {color:'blue', withLines:false, fillOpacity: 0.3});
</script>

{lang=EN} Finally, we define two buttons to control the movement of the triangle MNP back and forth: {/lang}

{lang=SI} Nato definiramo dva gumba, ki bosta premikala trikotnik MNP naprej ali nazaj: {/lang}

{lang=CZ} Nakonec vytvoříme dvě tlačítka pro ovládání pohybu pravoúhlého trojúhelníku MNP tam a zpět: {/lang}

<div id="jxgbox" class="jxgbox" style="width:400px; height:250px;"></div>
<script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 4, 7, -1]});
	var A = board.create('point', [0,0], {name:'A', fixed:true, size:1});
    var B = board.create('point', [4,0], {name:'B', fixed:true, size:1});
    var D = board.create('point', [2,3], {name:'D', fixed:true, size:1});
    var C = board.create('parallelpoint', [A, B, D], {name:'C', size:1});
    var par = board.create('polygon', [A, B, C, D], {color:'blue', fillOpacity: 0});
	var Q = board.create('point', [
                    function(){ return D.X(); },
                    function(){ return A.Y();
            }], {name:'Q', visible:false});
	var tra = board.create('polygon', [Q, B,C,D], {color:'blue', withLines:false, fillOpacity: 0.3});
	var M = board.create('point', [0,0], {name:'M', visible:false});
    var N = board.create('point', [function() {return M.X()+2;}, function(){return M.Y();}], {name:'N', visible:false})
    var P = board.create('point', [function() {return M.X()+2;}, function(){return M.Y()+3;}], {name:'P', visible:false})
    var tri = board.create('polygon', [M, N, P], {color:'blue', withLines:false, fillOpacity: 0.3});
	var button1 = board.create('button', [-0.5,3, 'Forth', function(){ M.moveTo([4,0], 1000); }]);
    var button2 = board.create('button', [-0.5,2.5, 'Back', function(){ M.moveTo([0,0], 1000); }]);
</script>

{lang=EN} The task solution code is now complete. {/lang}

{lang=SI} Koda dokaza je s tem končana. {/lang}

{lang=CZ} Kód řešení úlohy je nyní kompletní. {/lang}

{lang=EN}JSXGraph Book{/lang}{lang=SI}Knjiga o JSXGraphu{/lang}{lang=CZ}Příručka JSXGraph{/lang}{lang=DE}JSXGraph-Buch{/lang}

Example: Proof without words

Primer: dokaz brez besed

Příklad: Důkaz beze slov