Difference between revisions of "Parabola"

From JSXGraph Wiki
Jump to navigationJump to search
 
(11 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.
 +
 +
See [[Slider and function plot]] for an easier example howto plot a parabola.
 +
 
<jsxgraph box="box2" width="600" height="400">
 
<jsxgraph box="box2" width="600" height="400">
 
hook = true;
 
hook = true;
Line 8: Line 11:
 
<html>
 
<html>
 
<table style="border: 0px solid black; text-align: center" width="500px">
 
<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>
<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; "
 
     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();" 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();" 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>
 
</html>
 
</html>
  
 
<jsxgraph box="box" width="600" height="400">
 
<jsxgraph box="box" width="600" height="400">
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3], axis: true});
+
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 7, -3], axis: true});
  
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]);
+
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){
     document.getElementById('print_a').value = JXG.getReference(board, 'A').X().toFixed(2);
+
     document.getElementById('print_a').value = board2.select('A').X().toFixed(2);
     document.getElementById('print_b').value = JXG.getReference(board, 'B').X().toFixed(2);
+
     document.getElementById('print_b').value = board2.select('B').X().toFixed(2);
     document.getElementById('print_c').value = JXG.getReference(board, 'C').X().toFixed(2);
+
     document.getElementById('print_c').value = board2.select('C').X().toFixed(2);
 
   }
 
   }
 
};
 
};
Line 37: Line 50:
 
board2.addChild(board);
 
board2.addChild(board);
 
 
print_table_id = board2.addHook(print_table);
+
print_table_id = board2.on('update', print_table);
 
</jsxgraph>
 
</jsxgraph>
  
Line 52: Line 65:
 
</tr>
 
</tr>
 
<tr>
 
<tr>
   <td><input type="text" id="print_a" size="2" maxlength="7" style="border:none; text-align:right; font-size:1.2em; "
+
   <td><input type="text" id="print_a" size="2" maxlength="7"  
     onKeyUp="board2.getElement('A').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();"  
+
    style="border:none; text-align:right; font-size:1.2em; "
    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>
   <td><input type="text" id="print_b" size="2" maxlength="7"style="border:none; text-align:right; font-size:1.2em; "
+
   <td><input type="text" id="print_b" size="2" maxlength="7"  
     onKeyUp="board2.getElement('B').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();"  
+
    style="border:none; text-align:right; font-size:1.2em; "
    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>
   <td><input type="text" id="print_c" size="2" maxlength="7" style="border:none; text-align:right; font-size:1.2em; "
+
   <td><input type="text" id="print_c" size="2" maxlength="7"  
     onKeyUp="board2.getElement('C').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();"
+
    style="border:none; text-align:right; font-size:1.2em; "
    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>
 
   ></td>
 
</tr>
 
</tr>
Line 74: Line 87:
 
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});
+
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('functiongraph',  
+
var curve = board.create('functiongraph', [function(t){  
                [function(t){ return JXG.getReference(board2, 'A').X()*t*t+
+
        return board2.select('A').X() * t * t + board2.select('B').X() * t + board2.select('C').X();  
                                      JXG.getReference(board2, 'B').X()*t+
+
    }, -10, 10]);
                                      JXG.getReference(board2, 'C').X();  
 
                  },  
 
                  -10, 10]);
 
 
 
function print_table(board) {
+
function print_table() {
 
   if (hook){
 
   if (hook){
     document.getElementById('print_a').value = JXG.getReference(board, 'A').X().toFixed(2);
+
     document.getElementById('print_a').value = board2.select('A').X().toFixed(2);
     document.getElementById('print_b').value = JXG.getReference(board, 'B').X().toFixed(2);
+
     document.getElementById('print_b').value = board2.select('B').X().toFixed(2);
     document.getElementById('print_c').value = JXG.getReference(board, 'C').X().toFixed(2);
+
     document.getElementById('print_c').value = board2.select('C').X().toFixed(2);
 
   }
 
   }
 
};
 
};
  
 
board2.addChild(board);
 
board2.addChild(board);
+
print_table_id = board2.addHook(print_table);
+
print_table_id = board2.on('update', print_table);
 
</source>
 
</source>
 +
 +
===GEONExT Construction used in this example===
 +
 +
[[Media:Sliders.gxt|Sliders.gxt]]
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Calculus]]
 
[[Category:Calculus]]

Latest revision as of 15: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