JSXGraph
JSXGraph share

Share

Number line
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/number-line" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Number line" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-5.2, 2, 5.2, -2], keepaspectratio: true });
    var axisx = board.create('axis', [[0, 0], [1, 0]],
    {
        firstArrow: true,
        lastArrow: true,
        ticks: {
            strokeOpacity: 1,
            drawZero: true,
            ticksDistance: 1,
            majorHeight: 30,
            tickEndings: [1, 1],
            minorTicks: 0,
            label: { anchorX: 'middle', offset: [0, -25] }
        }
    });
    var p = board.create('glider', [2.2, 0, axisx], {});
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-5.2, 2, 5.2, -2], keepaspectratio: true });
var axisx = board.create('axis', [[0, 0], [1, 0]],
{
    firstArrow: true,
    lastArrow: true,
    ticks: {
        strokeOpacity: 1,
        drawZero: true,
        ticksDistance: 1,
        majorHeight: 30,
        tickEndings: [1, 1],
        minorTicks: 0,
        label: { anchorX: 'middle', offset: [0, -25] }
    }
});
var p = board.create('glider', [2.2, 0, axisx], {});
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Number line" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-5.2, 2, 5.2, -2], keepaspectratio: true });
   var axisx = board.create('axis', [[0, 0], [1, 0]],
   {
       firstArrow: true,
       lastArrow: true,
       ticks: {
           strokeOpacity: 1,
           drawZero: true,
           ticksDistance: 1,
           majorHeight: 30,
           tickEndings: [1, 1],
           minorTicks: 0,
           label: { anchorX: 'middle', offset: [0, -25] }
       }
   });
   var p = board.create('glider', [2.2, 0, axisx], {});
</jsxgraph>

Number line

Glider
From wikipedia: "A number line is a graphical representation of a straight line that serves as spatial representation of numbers, usually graduated like a ruler with a particular origin point representing the number zero and evenly spaced marks in either direction representing integers, imagined to extend infinitely. The association between numbers and points on the line links arithmetical operations on numbers to geometric relations between points, and provides a conceptual framework for learning mathematics." The glider lets users explore positions along the number line.
Web references 
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-5.2, 2, 5.2, -2], keepaspectratio: true });
var axisx = board.create('axis', [[0, 0], [1, 0]],
{
    firstArrow: true,
    lastArrow: true,
    ticks: {
        strokeOpacity: 1,
        drawZero: true,
        ticksDistance: 1,
        majorHeight: 30,
        tickEndings: [1, 1],
        minorTicks: 0,
        label: { anchorX: 'middle', offset: [0, -25] }
    }
});
var p = board.create('glider', [2.2, 0, axisx], {});

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.