Parabola

From JSXGraph Wiki
Revision as of 15:03, 16 January 2012 by Michael (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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