Here are couple of examples, how to use jquery.emathnumberline.js. This tool
depends on jQuery and JSXGraph.
Points on numberline
You can create a numberline with static points and interactive points (gliders).
The numberline is created from a html-element with jQuery-method $element.emathnumberline(data),
which takes the data of the numberline as object parameter. Gliders can
be dragged and the current data can be asked from the numberline with
$element.emathnumberline('get').
You can give the color and fillcolor of points and their face ('o', 'x', '<>', '^', '[]').
A: , B:
<div class="box">
</div>
<script type="text/javascript">
jQuery('.box').emathnumberline({
"text":"",
"startval":-10,
"endval":10,
"points": {
"-3": {
"ptype":"point",
"xcoord": -3,
"color": "red",
"fillcolor": "red",
"face": "o"
},
"2": {
"ptype": "point",
"xcoord": 2,
"color": "red",
"fillcolor": "red",
"face": "o"
},
"A": {
"ptype": "glider",
"xcoord": 5,
"color": "green",
"fillcolor": "white",
"face": "o"
},
"B": {
"ptype": "glider",
"xcoord": -4.5,
"color": "blue",
"fillcolor": "blue",
"face": "x"
}
}
});
</script>
Intervals on numberline
You can add intervals between points.
<div class="box">
</div>
<script type="text/javascript">
jQuery('.box').emathnumberline({
"text": "",
"startval": -5,
"endval": 5,
"points": {
"-3": {
"ptype": 'point',
"xcoord": -3,
"color": "red",
"fillColor": "red",
"face": "o"
},
"0": {
"ptype": "point",
"xcoord": 0,
"color": "red",
"fillcolor": "red",
"face": "o"
},
"A": {
"ptype": "glider",
"xcoord": 2,
"color": "red",
"fillcolor": "white",
"face": "o"
},
"infty": {
"ptype":"point",
"xcoord": 100,
"color": "black",
"fillcolor": "black",
"face": "o"
}
},
"ranges": {
"interval1": {
"from": "-3",
"to": "0",
"color": "blue",
"rtype": "range"
},
"interval2": {
"from": "A",
"to": "infty",
"color": "blue",
"rtype": "range"
}
}
});
</script>
Distances on numberline
You can also add biheaded arrows to show distances between two points.
<div class="box">
</div>
<script type="text/javascript">
jQuery('.box').emathnumberline({
"text":"",
"startval":-5,
"endval":5,
"points": {
"A": {
"ptype": "glider",
"xcoord": 4,
"color": "red",
"fillcolor": "red",
"face": "o"
},
"B": {
"ptype": "glider",
"xcoord": 1,
"color": "red",
"fillcolor": "red",
"face": "o"
},
"C": {
"ptype":"glider",
"xcoord": -1,
"color": "green",
"fillcolor": "green",
"face": "o"
}
},
"ranges": {
"dist1": {
"from": "A",
"to": "B",
"color": "blue",
"rtype": "length"
},
"dist2": {
"from": "C",
"to": "B",
"color": "blue",
"rtype": "length"
}
}
});
</script>