MathJax and JSX Graph
413 views
Skip to first unread message
david...@t-online.de
Sep 8, 2017, 4:55:17 AM9/8/17
to JSXGraph
Hello,
I would like to create a text with MathJax into an extra text field. If I enable the graph, which means I delete <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"</script> then the equation \(f(x)=a\cdot x^2 + b\) is shown, but otherwise not. How can I make it work?
Thank you very much!!!
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"</script>
<script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<style>
.text1{
background-color: white;
border-radius: 4px ;
padding: 20px 60px;
font-family: arial;
position:absolute;
top: 159px;
left: 700px;
}
</style>
</head>
<body>
<form id="myForm">
<box class="text1" style="font-size:0.750em">\(f(x)=a\cdot x^2 + b\)</box>
<div id="box2" class="jxgbox" style="width:500px; height:100px; float:top; margin:-10px 20px 100px 0px;"></div>
<div id="box1" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:-10px 20px 100px 0px;"></div>
<script type="text/javascript">
var brd2 = JXG.JSXGraph.initBoard('box2', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
var brd1 = JXG.JSXGraph.initBoard('box1', {showCopyright:false, axis:false, grid:false, boundingbox: [-0.9, 2.2, 12.4, -2.2]});
brd2.addChild(brd1);
xaxis = brd1.create('axis', [[0, 0], [1,0]], {withLabel:true, label:{position:'rt', offset:[-25, 15]}});
yaxis = brd1.create('axis', [[0, 0], [0, 1]], {withLabel:true, label:{position:'rt', offset:[10, -5]}});
a = brd2.create('slider',[[-0.7,1.5],[3,1.5],[-10,0.5,10]], {suffixlabel:' a=', snapWidth:1}),
b = brd2.create('slider',[[-0.7,0.5],[3,0.5],[-10,1,10]], {suffixlabel:'b=', snapWidth:1}),
func = brd1.create('functiongraph',[function(x){
return (a.Value()*x*x+b.Value())
},0], {strokeColor: "red"});
</script>
</form>
</body>
</html>
Alfred Wassermann
Sep 8, 2017, 6:43:33 AM9/8/17
to JSXGraph
In
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"</script>there is a ">" missing at the end of the script tag
Best wishes,
Alfred
Best wishes,
Alfred
david...@t-online.de
Sep 9, 2017, 7:37:57 AM9/9/17
to jsxg...@googlegroups.com
Dear Mr. Wassermann,
thank you for your response. May you also give me a very simple example, how to include MathJax in the JSX board? Because it doesn’t work, when I try this example: http://jsxgraph.uni-bayreuth.de/wiki/index.php/Using_MathJax.
Thank you very much and have a nice weekend.
Best wishes,
David
--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/ZZ9_HLZTkw8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Alfred Wassermann
Sep 13, 2017, 8:06:36 AM9/13/17
to JSXGraph
Here you see a working example: https://groups.google.com/forum/#!topic/jsxgraph/l7-npRkHMu0
Best wishes,
Alfred
re...@alefeducation.com
Jan 24, 2019, 3:16:15 AM1/24/19
to JSXGraph
Can you show me a mathjax example for displaying power or square root in jsxgraph board.
Thanks
Renju
Alfred Wassermann
Jan 24, 2019, 11:55:53 AM1/24/19
to JSXGraph
A complete working example is, see https://jsfiddle.net/h2gr9y34/2/ :
<html>
<head>
<script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraph.css"></head>
<body>
<div id="jxgbox" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:50px 20px 100px 200px;"></div>
<script type="text/javascript">
(function() {
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5, 6, 6, -6], axis:true});
var a = board.create('slider', [[-4, -4.5], [4, -4.5], [-4, 1, 4]], {snapWidth:1, precision: 0, name: 'a' });
var b = board.create('slider', [[-4, -5], [4, -5], [-4, 0, 4]], {snapWidth:1, precision: 0, name: 'b' });
var c = board.create('slider', [[-4, -5.5], [4, -5.5], [-4, 0, 4]], {snapWidth:1, precision: 0, name: 'c' });
var f = board.create('functiongraph', [
function (x) {
return a.Value() * Math.pow(x, 2) + b.Value() * x + c.Value();
}, -6, 6 ]);
var text1 = board.create('text', [1, 4, '$$\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}$$'], {fontsize: 20,fixed: true, parse: false, useMathJax:true});
var text2 = board.create('text', [-3, 4, function () {
var aS ="",bS="",cS="";
if(a.Value() == 1)
aS = "x^2";
else if(a.Value() == -1)
aS = "-x^2";
else if(a.Value() === 0)
aS = "";
else
aS = a.Value() + "x^2";
if(b.Value() == 1)
bS = "+x";
else if(b.Value() == -1)
bS = "-x";
else if(b.Value() === 0)
bS = "";
else if(b.Value() > 1)
bS = "+"+b.Value() + "x";
else
bS = b.Value() + "x";
if(c.Value() > 0)
cS = "+"+c.Value();
else if(c.Value() === 0)
cS = "";
else
cS = c.Value();
if(a.Value()===0 && b.Value()===0 && c.Value()===0)
aS = "0";
return '$$y=' + aS + bS + cS + '$$'
}], {
fontsize: 20,
layer: 7,
fixed: true,
parse: false,
useMathJax:true
});
})();
</script>
</body>
</html>
Best wishes,
Alfred
Renju Soman
Jan 27, 2019, 12:18:59 AM1/27/19
to jsxg...@googlegroups.com
Thank you so much Alfred. It is working good.😊
| ||||||
--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/ZZ9_HLZTkw8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
To post to this group, send email to jsxg...@googlegroups.com.
Visit this group at https://groups.google.com/group/jsxgraph.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/6e22e62c-a999-42e4-a5e0-b2b706a7f6e6%40googlegroups.com.
Alfred Wassermann
Jan 29, 2019, 7:40:13 AM1/29/19
to JSXGraph
Dear Renju,
you're welcome!
Best wishes,
Alfred
Renju Soman
Feb 17, 2019, 1:07:02 AM2/17/19
to JSXGraph
Dear Mr. Alfred,
Can you give me an example showing a user-designed slider outside JSXgraph which controls the board elements?
| ||||||
--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/ZZ9_HLZTkw8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
To post to this group, send email to jsxg...@googlegroups.com.
Visit this group at https://groups.google.com/group/jsxgraph.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/47414483-5481-4cc7-aeda-e47cab3b1690%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Alfred Wassermann
Feb 18, 2019, 4:11:15 AM2/18/19
to JSXGraph
Dear Renju,
here is a small example with the HTML input type="range" element, see it in action at https://jsfiddle.net/5bvq32Lt/ .
I take the oninput event to trigger updates of the JSXGraph construction:
HTML:
<input type="range" min="-10" max="10" value="2" id="mySlider" oninput="updateJSXGraph();">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px"></div>
JavaScript:
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5],
axis: true
});
var slider = document.getElementById('mySlider');
var plot = board.create('functiongraph', [
(x) => Math.pow(x, slider.value)
]);
var txt = board.create('text', [3, 3, function() {
return 'x<sup>' + slider.value + '</sup>';
}], {fontSize: 32});
updateJSXGraph = function() {
board.update();
};
Best wishes,
Alfred
Renju Soman
Mar 11, 2019, 6:50:07 AM3/11/19
to JSXGraph
Dear Alfred,
Is there any option in JSXGraph for the user to plot a point in the Graph, either with a mouse click on the graph or by entering the coordinates in an input area in the graph.
Please help me with this.
|
|
|
On Tue, Feb 19, 2019 at 3:29 PM Renju Soman <re...@alefeducation.com> wrote:
Thank you so much.
Renju Soman
Digital Content Producer
Alef Education, Masdar City, P.O. Box 112230, Abu Dhabi, UAE
Telephone: +971 2 305 2400
Direct Line: +971 5 651 54568
Facsimile: +971 2 626 8448
re...@alefeducation.com
www.alefeducation.com
--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/ZZ9_HLZTkw8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
To post to this group, send email to jsxg...@googlegroups.com.
Visit this group at https://groups.google.com/group/jsxgraph.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/6045edcb-3c05-493a-8a60-5ca9847ad627%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Alfred Wassermann
Apr 3, 2019, 11:21:04 AM4/3/19
to JSXGraph
Sorry for the long delay.
Here is a starting point, see https://jsfiddle.net/mhcau7rx/ :
var points = [];
board.on('up', function(evt) {
var c = new JXG.Coords(JXG.COORDS_BY_SCREEN, board.getMousePosition(evt, 0), board);
points.push(board.create('point', c.usrCoords));
});
With "board.getMousePosition(evt, 0)" one gets the pixel coordinates of the down event. These coordinates
are converted in user coordinates, which are used to create a point.
Best wishes,
Alfred
Renju Soman
Apr 7, 2019, 1:25:50 AM4/7/19
to JSXGraph
Thank you so much, Alfred. It works for me.
| ||||||
--
You received this message because you are subscribed to a topic in the Google Groups "JSXGraph" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsxgraph/ZZ9_HLZTkw8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsxgraph+u...@googlegroups.com.
To post to this group, send email to jsxg...@googlegroups.com.
Visit this group at https://groups.google.com/group/jsxgraph.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/64c8f690-6afa-41da-a4c1-f3976589899b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages