Difference between revisions of "Parabola"

From JSXGraph Wiki
Jump to: navigation, search
Line 14: Line 14:
 
></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.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"  
 
></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.getElement('C').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
 
></td></tr>
 
></td></tr>
 
</table>   
 
</table>   
Line 48: Line 48:
 
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
 
<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"  
+
  <td rowspan="2"><div id="box2" class='jxgbox' style="width:375.0px; height:150.0px;  
    style="border:none; text-align:right; font-size:1.2em; "
+
                                        border:0px dashed black; "></div></td>
     onKeyUp="board2.getElement('A').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
+
  <th style="border: 1px solid black" width="100px">a</th>
></td><td><input type="text" id="print_b" size="2" maxlength="7"  
+
  <th style="border: 1px solid black" width="100px">b</th>
    style="border:none; text-align:right; font-size:1.2em; "
+
  <th style="border: 1px solid black" width="100px">c</th>
     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"
+
</tr>
></td><td><input type="text" id="print_c" size="2" maxlength="7"  
+
<tr>
    style="border:none; text-align:right; font-size:1.2em; "
+
  <td><input type="text" id="print_a" 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(); board2.update(); board.update();" onfocus="hook=false;" onblur="hook=true"
+
     onKeyUp="board2.getElement('A').setPositionX(JXG.COORDS_BY_USER,parseFloat(this.value)); board2.update(); board.update();"  
></td></tr>
+
    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>   
 
</table>   
 
</source>
 
</source>
Line 70: Line 80:
 
b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
 
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]);
+
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) {
 
function print_table(board) {
Line 84: Line 100:
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Calculus]]

Revision as of 19:07, 21 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);