Difference between revisions of "Parabola"

From JSXGraph Wiki
Jump to: navigation, search
(The underlying JavaScript code)
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.
 
<html>
 
<html>
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
Line 39: Line 42:
 
print_table_id = board2.addHook(print_table);
 
print_table_id = board2.addHook(print_table);
 
</script>
 
</script>
 +
</html>
 +
 +
===The underlying JavaScript code===
 +
<source lang="html4strict">
 +
<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> 
 +
</source>
  
 +
<source lang="javascript">
 +
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]], {});
  
</html>
+
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);
 +
</source>
 +
 
 +
[[Category:Examples]]

Revision as of 17:44, 3 January 2009

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="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);