Parabola: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 8: Line 8:
<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.select('A').moveTo([parseFloat(this.value),0]); 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.select('B').moveTo([parseFloat(this.value),0]); 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.select('C').moveTo([parseFloat(this.value),0]); 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>
Line 54: Line 62:
</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.select('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>

Revision as of 14:09, 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.

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