Parabola: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.
See [[Slider and function plot]] for an easier example howto plot a parabola.
<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>
<tr><td><input type="text" id="print_a" size="2" maxlength="7"  
  <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.select('A').moveTo([parseFloat(this.value),0]); 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.select('B').moveTo([parseFloat(this.value),0]); 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.select('C').moveTo([parseFloat(this.value),0]); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
></td>
</tr>
</table>
</html>
 
<jsxgraph box="box" width="600" height="400">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3], axis: true});
 
var curve = board.create('functiongraph', [function(t){
        return board2.select('A').X() * t * t + board2.select('B').X() * t + board2.select('C').X();
    }, -10, 10]);
function print_table() {
  if (hook){
    document.getElementById('print_a').value = board2.select('A').X().toFixed(2);
    document.getElementById('print_b').value = board2.select('B').X().toFixed(2);
    document.getElementById('print_c').value = board2.select('C').X().toFixed(2);
  }
};
 
board2.addChild(board);
print_table_id = board2.on('update', print_table);
</jsxgraph>
 
===The underlying JavaScript code===
<source lang="html4strict">
 
<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; "
     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"
     onKeyUp="board2.select('A').moveTo([parseFloat(this.value),0]); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
></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.select('B').moveTo([parseFloat(this.value),0]); 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.select('C').moveTo([parseFloat(this.value),0]); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
></td></tr>
  ></td>
</tr>
</table>   
</table>   
<script language="JavaScript">
 
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
</source>
 
<source lang="javascript">
hook = true;
hook = true;
board2 = JXG.JSXGraph.loadBoardFromString('box2', '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', '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});
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3], axis: true});
// Axes
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]);
var curve = board.create('functiongraph', [function(t){  
        return board2.select('A').X() * t * t + board2.select('B').X() * t + board2.select('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 = board2.select('A').X().toFixed(2);
     $('print_b').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'B').X(),2);
     document.getElementById('print_b').value = board2.select('B').X().toFixed(2);
     $('print_c').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'C').X(),2);
     document.getElementById('print_c').value = board2.select('C').X().toFixed(2);
   }
   }
};
};
print_table_id = board2.addHook(print_table);
</script>


board2.addChild(board);
print_table_id = board2.on('update', print_table);
</source>


</html>
===GEONExT Construction used in this example===
 
[[Media:Sliders.gxt|Sliders.gxt]]
 
[[Category:Examples]]
[[Category:Calculus]]

Latest revision as of 14:11, 15 January 2021

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.

See Slider and function plot for an easier example howto plot a parabola.

a b c

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.select('A').moveTo([parseFloat(this.value),0]); 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.select('B').moveTo([parseFloat(this.value),0]); 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.select('C').moveTo([parseFloat(this.value),0]); 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');

var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3], axis: true});

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

board2.addChild(board);
			
print_table_id = board2.on('update', print_table);

GEONExT Construction used in this example

Sliders.gxt