JSXGraph interactive demonstrator
This is a proposal for interactive presentation of JSXGraph coding and output. It's a proof-of-concept for further consideration.
It is similar to Stackoverflow's "Run code snippet" facility.
Current issues
Most of us make use of JSFiddle to demonstrate code, but it is a disaster on a phone, so it always requires having to open up a desktop to view files. JSFiddle is an external site, of course, and is subject to the vagaries of link rot if users delete fiddles.
Codepen is a better alternative since it is phone-friendly (as long as developers use responsive JSXGraph layouts), but still involves going to a separate site and having to have an account there to post.
Features
This "demonstrator" has the following features:
1. Users can see and modify:
- HTML surrounding a JSXGraph graph.
- CSS which can target the graph, and/or surrounding HTML
- The code necessary to produce the graph
2. Om a desktop, you can resize the graph by dragging the bottom right corner, so you can see how it will look on typical phone screens.
3. Everything is mobile-friendly.
4. Things are (potentially) secure, since we make use of sandboxed iframes for the JSXGraph output, with the content coming from a different domain.
Potential uses
1. Example code on pages in the JSXGraph Reference docs, or the Examples database, or the Wiki.
2. The Discourse discussion board.
Graph 1
<div id="jxgbox" class="jxgbox"></div>
Use the slider to change the point's x-value:
Graph 2
<div id="jxgbox" class="jxgbox"></div>
This is the graph of y = 0.25x2sin(10x)
Graph 3
<div id="jxgbox" class="jxgbox"></div>
This is an example of an implicit curve, |xy| = 3.
We've used CSS to change the background colour of the graph.
Explanation
The iframes used in JSXGraph output follow the principles as outlined in the web.dev page Play safely in sandboxed IFrames.
We're making use of frame.contentWindow.postMessage to pass graph parameters between the parent page and the iframes.
While it's not possible for the user to save their experiments on this page, this would be desirable if this were to be used on the Discourse forum.
Sometimes the iframe height is not quite right. Usually pressing the "run" button fixes that.
There's still a few things that need ironing out, but after all, it's a proof-of-concept.
Mobile considerations
On a phone, the user needs to be able to see the whole graph, whether the phone is in landscape or protrait orientation. This is because it's possible to get "trapped" where you can't escape from the graph if it is larger than the screen width or height (given that panning of the graph is enabled by deefault for phones).
As such, the CSS and javascript ensures the graph is fully visible no matter the screen size.