Parabola

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.

	a	b	c

The underlying JavaScript code

<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
<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>
  <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>

hook = true;
board2 = JXG.JSXGraph.loadBoardFromString('box2', 'eNrtmm1v2zYQgD/bv4JAPteS7D...Y6tu7MXarPHfJ+R+tkHyx', 'Geonext');
board = JXG.JSXGraph.initBoard('box', {originX: 250, originY: 250, unitX: 50, unitY: 50});
// 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]);						
			
function print_table(board) {
  if (hook){
    $('print_a').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'A').X(),2);
    $('print_b').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'B').X(),2);
    $('print_c').value = board.algebra.round(JXG.GetReferenceFromParameter(board, 'C').X(),2);
  }
};
				
print_table_id = board2.addHook(print_table);