Difference between revisions of "Parabola"

From JSXGraph Wiki
Jump to: navigation, search
(The underlying JavaScript code)
 
(15 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
That means the numbers below ''a'', ''b'', and ''c'' are updated if the points ''A'', ''B'', and ''C'' are dragged. And other way round,
 
That means the numbers below ''a'', ''b'', and ''c'' are updated if the points ''A'', ''B'', and ''C'' are dragged. And other way round,
 
these numbers are editable.
 
these numbers are editable.
 +
<jsxgraph box="box2" width="600" height="400">
 +
hook = true;
 +
board2 = JXG.JSXGraph.loadBoardFromString('box2', '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', 'Geonext');
 +
</jsxgraph>
 
<html>
 
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
 
 
<table style="border: 0px solid black; text-align: center" width="500px">
 
<table style="border: 0px solid black; text-align: center" width="500px">
<tr><td rowspan="2"><div id="box2" class='jxgbox' style="width:375.0px; height:150.0px; border:0px dashed black; "></div></td><th style="border: 1px solid black" width="100px">a</th><th style="border: 1px solid black" width="100px">b</th><th style="border: 1px solid black" width="100px">c</th></tr>
+
<tr><th style="border: 1px solid black" width="100px">a</th><th style="border: 1px solid black" width="100px">b</th><th style="border: 1px solid black" width="100px">c</th></tr>
 
<tr><td><input type="text" id="print_a" size="2" maxlength="7"  
 
<tr><td><input type="text" id="print_a" size="2" maxlength="7"  
 
     style="border:none; text-align:right; font-size:1.2em; "
 
     style="border:none; text-align:right; font-size:1.2em; "
Line 14: Line 14:
 
></td><td><input type="text" id="print_b" size="2" maxlength="7"  
 
></td><td><input type="text" id="print_b" size="2" maxlength="7"  
 
     style="border:none; text-align:right; font-size:1.2em; "
 
     style="border:none; text-align:right; font-size:1.2em; "
     onKeyUp="board2.getElement('B').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update(); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
+
     onKeyUp="board2.getElement('B').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
 
></td><td><input type="text" id="print_c" size="2" maxlength="7"  
 
></td><td><input type="text" id="print_c" size="2" maxlength="7"  
 
     style="border:none; text-align:right; font-size:1.2em; "
 
     style="border:none; text-align:right; font-size:1.2em; "
     onKeyUp="board2.getElement('C').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update(); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
+
     onKeyUp="board2.getElement('C').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
 
></td></tr>
 
></td></tr>
</table>
+
</table>
<script language="JavaScript">
+
</html>
hook = true;
 
board2 = JXG.JSXGraph.loadBoardFromString('box2', 'eNrtmm1v2zYQgD/bv4JAPteS7DgvmCYgSZNh2NACbVe0eykgW7TNRRYNiUrsFP3vuzseJblTXtwZWT8oAVre8cijyOfupIDhT5evX11+eBf1w/eXb97+/PpVFAyOg9BzUj+c6DhPon4vzOKljH6XarqQ2Sz9s/R9eQhtcRh61AUmKpvpfBkbpbMo9JoSdMalWegc9NwA1VQvlzIzoHMtUM50Zgp1J6NgHHqVgLMnEfhStBjW9cJlvFZLEJJoFqeFDL1agd3ryB/4obcmYWOFDQm3KjGLaHQ8RpUVUL2Qar4w4JtMWQKHnvUoBLjUSVlEw8AfHoGJlehhdJ6oLDYSRNFjhVuWFUg/z1WlpjZpiyxeOS21cTU6V3OFu0ePMvTrh8GnYdk+j+dscbI7rZduVLA1JmiMsFZoX2bKOPvxtpNx04e1wxFG5pWHhnVlafvRMo0nMnWm64btpjJmE7RelqlR908M+7TQt+tqo0io9JumnufmCe2BZEZlpabzIgdsXnlhmYc27QW7aO7Uw6NraxwLVFZeTV42h1mRR1k7HLHWeuNGzD/8KpuHMv9IMo+xljjmRsnblc55hUavokM8PWyQJpUzE70gHTVJOdHGAAjBYHwUeixQR07wjwYQdTnHAXirfYgec11TH9ZAA6+0YmFZpdXSKeS6KKqwIIFPJ4WscHDh4+/VFU6NCupL4mLB+0RNUq60guTQCJtagQHrVhJO4un1PNdlZlMC+7nin8oPdM1UKpmmfArI4b98AttBUceESyT+Vhqp8sh2FoFVORehWsZzGQ0GA0hp1ITcIgQcQGO1glSAYaIwixasIW0Smzg6G2x+HA3GuCsg9bc7z7GzvesCuobb4wh35wcVuHUylZiWCxfza0YGdlanyXuZF2BuKwblZToqnLHX43jDpP7p86fP7xaqEKAo4BSn6ETcxqDIJZCTiFtlFoJq0fqdwPkGX77Y+LNFAWdbruBElqtKWpO4ZnkdvRgNTtwREXGD4aE7JIAlzm2l4Qat1asWG8awqBvJjLFgO2CJEewU/c9PCAT6jkTS5DEEE1NoBbtNUAG5EFrFjSrUJHVunGSDNY+n0s1hBUuiyfW1tGRBEDXFfq/CuWEaHfjwc3Xl+86aYx8hVNkc+xF87K90ZAFsptHB+enL8+OXR4fEKidum6APcJBPsdlI6vZ5Dy5O8BeHNTbAa64O8iHtRCNH1ztTT4hnSWFRHyWJHG5N1xWxdZV1CttfRFmZpqDn3Pt3MYPzwH/5gV0yxpZ9GiiiwDvsNLcsBKXRLLOnhobrnY2N/xQkH3UpgDORl1kGpyLiTMAMMhc3dhKhZy5K9hAgweC0C5AuQJ43QLDSUJ2mksJfFWd/BH+5rwjBoTM/lGMbMKKOGFGjfDx2bxe0A1QFN2zs1daPcHu6Z27ZdGdwRw+CW5NrAfuK3K/RZQKb6Dp2bfdo2GC3gtfOvA3v/0ovTrH1EVUrKjq5p8LTvktV71R27zZwFAFu2YZfvrwKwVYez9t5PLqXx6DDscNxXzimKpNNGuMWFI/vQXGm8sJw7rRt7khjqz/CR3LqHcj8Tgr8+Ilg1vA8AKb9/PtGMOnt4DsBEzbLfWFWDLiyTQzUCFi1RYDm2RocSng7iOvzqURm72uacfcsrK159KI9j57sVNf9LpF2iXQ/df1lC4ynuxT1jsWOxf0U9UkLioH/WFU/uaeqn3ZVvavqz1XVL9vQDXao6cPu46jLo/uq6VdtNA6fXtQ7GDsY91XUp20sjh4r6pg7W6s6YtyV9a6sP09ZP2uD9/iBROp/j3/x/EZUd0ujj6DapdGWNHq0y9/f21C8/69G/r9Q9DsUOxT3guJFG4qnT0Zx2GXFDsXdUYRiXt+8wkt5dAeXroLBBsNC6Caf0TqdxHhFToRms5LRb28v38BhYhN1NpfKrDR3Mk/kTGVK5kaKX+w1rGu665VKVRhZUS7CRBbTXK3okkB8bUqZplJMnjhLc3DfXjKsVhkW8FBTI5OmFj9IWtT9fjgpQcro2i1e5GqI/RA2W8LYH/DWK7b64a12r0vY6tu7MXarPHfJ+R+tkHyx', 'Geonext');
 
 
  
board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
<jsxgraph box="box" width="600" height="400">
// Axes
+
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3], axis: true});
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
 
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
 
  
curve = board.createElement('curve', [function(t){ return t; }, function(t){ return JXG.GetReferenceFromParameter(board2, 'A').X()*t*t+JXG.GetReferenceFromParameter(board2, 'B').X()*t+JXG.GetReferenceFromParameter(board2, 'C').X(); }, "t", -10, 10]);
+
curve = board.createElement('functiongraph', [function(t){ return JXG.getReference(board2, 'A').X()*t*t+JXG.getReference(board2, 'B').X()*t+JXG.getReference(board2, 'C').X(); },-10, 10]);
 
 
function print_table(board) {
+
function print_table() {
 
   if (hook){
 
   if (hook){
     $('print_a').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'A').X(),2);
+
     document.getElementById('print_a').value = JXG.getReference(board2, 'A').X().toFixed(2);
     $('print_b').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'B').X(),2);
+
     document.getElementById('print_b').value = JXG.getReference(board2, 'B').X().toFixed(2);
     $('print_c').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'C').X(),2);
+
     document.getElementById('print_c').value = JXG.getReference(board2, 'C').X().toFixed(2);
 
   }
 
   }
 
};
 
};
+
 
 +
board2.addChild(board);
 +
 
print_table_id = board2.addHook(print_table);
 
print_table_id = board2.addHook(print_table);
</script>
+
</jsxgraph>
</html>
 
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 
<source lang="html4strict">
 
<source lang="html4strict">
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
+
 
 +
<div id="box2" class='jxgbox' style="width:375px; height:150px;"></div>
 +
 
 
<table style="border: 0px solid black; text-align: center" width="500px">
 
<table style="border: 0px solid black; text-align: center" width="500px">
 
<tr>
 
<tr>
  <td rowspan="2"><div id="box2" class='jxgbox' style="width:375.0px; height:150.0px; border:0px dashed black; "></div></td>
 
 
   <th style="border: 1px solid black" width="100px">a</th>
 
   <th style="border: 1px solid black" width="100px">a</th>
 
   <th style="border: 1px solid black" width="100px">b</th>
 
   <th style="border: 1px solid black" width="100px">b</th>
Line 69: Line 66:
 
</tr>
 
</tr>
 
</table>   
 
</table>   
 +
 +
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
 
</source>
 
</source>
  
Line 74: Line 73:
 
hook = true;
 
hook = true;
 
board2 = JXG.JSXGraph.loadBoardFromString('box2', 'eNrtmm1v2zYQgD/bv4JAPteS7D...Y6tu7MXarPHfJ+R+tkHyx', 'Geonext');
 
board2 = JXG.JSXGraph.loadBoardFromString('box2', 'eNrtmm1v2zYQgD/bv4JAPteS7D...Y6tu7MXarPHfJ+R+tkHyx', 'Geonext');
board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
+
 
 +
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3]});
 
// Axes
 
// Axes
 
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
 
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
 
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
 
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
  
curve = board.createElement('curve', [function(t){ return t; }, function(t){ return JXG.GetReferenceFromParameter(board2, 'A').X()*t*t+JXG.GetReferenceFromParameter(board2, 'B').X()*t+JXG.GetReferenceFromParameter(board2, 'C').X(); }, "t", -10, 10]);
+
curve = board.createElement('functiongraph',  
 +
                [function(t){ return JXG.getReference(board2, 'A').X()*t*t+
 +
                                      JXG.getReference(board2, 'B').X()*t+
 +
                                      JXG.getReference(board2, 'C').X();  
 +
                  },  
 +
                  -10, 10]);
 
 
function print_table(board) {
+
function print_table() {
 
   if (hook){
 
   if (hook){
     $('print_a').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'A').X(),2);
+
     document.getElementById('print_a').value = JXG.getRef(board2, 'A').X().toFixed(2);
     $('print_b').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'B').X(),2);
+
     document.getElementById('print_b').value = JXG.getRef(board2, 'B').X().toFixed(2);
     $('print_c').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'C').X(),2);
+
     document.getElementById('print_c').value = JXG.getRef(board2, 'C').X().toFixed(2);
 
   }
 
   }
 
};
 
};
 +
 +
board2.addChild(board);
 
 
 
print_table_id = board2.addHook(print_table);
 
print_table_id = board2.addHook(print_table);
 
</source>
 
</source>
 +
 +
===GEONExT Construction used in this example===
 +
[[Media:Sliders.gxt|Sliders.gxt]]
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Calculus]]

Latest revision as of 16:03, 16 January 2012

This is an example for JSXGraph with two boards and so called hooks into HTML. That means the numbers below a, b, and c are updated if the points A, B, and C are dragged. And other way round, these numbers are editable.

abc

The underlying JavaScript code

<div id="box2" class='jxgbox' style="width:375px; height:150px;"></div>

<table style="border: 0px solid black; text-align: center" width="500px">
<tr>
  <th style="border: 1px solid black" width="100px">a</th>
  <th style="border: 1px solid black" width="100px">b</th>
  <th style="border: 1px solid black" width="100px">c</th>
</tr>
<tr>
  <td><input type="text" id="print_a" size="2" maxlength="7" style="border:none; text-align:right; font-size:1.2em; "
    onKeyUp="board2.getElement('A').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();" 
    onfocus="hook=false;" onblur="hook=true"
    ></td>
  <td><input type="text" id="print_b" size="2" maxlength="7"style="border:none; text-align:right; font-size:1.2em; "
    onKeyUp="board2.getElement('B').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();" 
    onfocus="hook=false;" onblur="hook=true
    ></td>
  <td><input type="text" id="print_c" size="2" maxlength="7" style="border:none; text-align:right; font-size:1.2em; "
    onKeyUp="board2.getElement('C').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();"
    onfocus="hook=false;" onblur="hook=true"
  ></td>
</tr>
</table>  

<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
hook = true;
board2 = JXG.JSXGraph.loadBoardFromString('box2', 'eNrtmm1v2zYQgD/bv4JAPteS7D...Y6tu7MXarPHfJ+R+tkHyx', 'Geonext');

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3]});
// Axes
b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});

curve = board.createElement('functiongraph', 
                 [function(t){ return JXG.getReference(board2, 'A').X()*t*t+
                                      JXG.getReference(board2, 'B').X()*t+
                                      JXG.getReference(board2, 'C').X(); 
                  }, 
                  -10, 10]);						
			
function print_table() {
  if (hook){
    document.getElementById('print_a').value = JXG.getRef(board2, 'A').X().toFixed(2);
    document.getElementById('print_b').value = JXG.getRef(board2, 'B').X().toFixed(2);
    document.getElementById('print_c').value = JXG.getRef(board2, 'C').X().toFixed(2);
  }
};

board2.addChild(board);
				
print_table_id = board2.addHook(print_table);

GEONExT Construction used in this example

Sliders.gxt