Can we include JSXGraph in some meaningful way inside the ASCII block?

[sangwinc]

Can we include JSXGraph in some meaningful way inside the ASCII block?

If we can combine the JSXGraph block and the ASCII block to load JSXGraph, then this paves the way for support for graphs and diagrams. This is just a proof of concept/establishing the difficulty of issue at this stage.

[sangwinc]

Another user (@timdrysdale ) also suggested we investigate this for diagrams: https://mermaid.js.org/

[aharjula]

@sangwinc , while I do have some ideas on how to make nested [[iframes]] work (currently no idea of how to handle nested bindings to inputs), I do have to wonder whether it makes sense to provide the same kind of tooling to students as we provide for authors; writing JavaScript to plot something is not exactly the most intuitive thing for a random student. Furthermore, extracting anything sensible from free-form JavaScript code is not easy; it would be better to have a more descriptive language, making it simpler to extract objects from it.

I would think that one would instead provide some button to launch, e.g. Sketchometry or some such tool for drawing and then include the result from that in the input.

Ahh, back in the STACK 1.x days, the TKK branch had a GraphViz block for doing DOT diagrams; having mermaid or some such modern alternative would naturally also be nice, as long as we can do the rendering in the browser with a small loadable library. Note that there is already a WebAssembly version of GraphViz, which is rather handy for layout and might be nice to add as a tool.

[sangwinc]

Thanks @aharjula! There is no ambition to have students write JSXGraph code directly! And I'm not suggesting we next iframes either.

I'm suggesting that we include the JSXGraph JS libraries in both the JSXGraph block, and separately (additionally) in the ASCII block.

I have in mind that we (somone!) will develop a simple markdown extension for plots and diagrams (e.g. see mermaid) for mathematical plots. This extension will be filtered, and replaced with the full JSXGraph code. This issue is preliminary to that.

Indeed, if we have a popup to create a graph, then it needs to embedded in some kind of text based format. That can either be the markdown extension (easy to human edit) or it could be the full JSXGraph code generated by the popup.

[KZerva]

What could be "meaningful"? I can think of a simple case where a student finds 2 points of a linear function, or 1 point and the slope and the graph is created. Maybe a parabola is possible? Simple graphs like circles and ellipses.

[EJMFarrow]

Yeah, not quite sure what we're aiming for here. Working on a proof of concept and this is where I'm at:

[KZerva]

I suppose what you are doing on the left column needs to be presented in a student friendly way. We don't expect them to be able to code the plot. Maybe have a semi-filled template, with comments on what they need to fill in? Like, define the min and max values of the axis, type the function, type the coordinates of a point...

[christianp]

Would you not give them GeoGebra?

[EJMFarrow]

For just basic plot preview JSXGraph is more lightweight and we can supply a small set of simple commands. GeoGebra may be more familiar to people but we'd probably want to restrict what they could do.

Beyond the technical considerations, there are licensing issues with GeoGebra which look like a deal-breaker. It's only free for non-commercial use, so whatever we do we'll need a JSXGraph-powered option. I'm just getting something up and running at the moment and then we can figure out what we really need it to do.

[EJMFarrow]

WIP branch: https://github.com/maths/moodle-qtype_stack/blob/iss1789/doc/en/Authoring/Question_blocks/ASCII.md#plot-blocks

[timdrysdale]

What could be "meaningful"? I can think of a simple case where a student finds 2 points of a linear function, or 1 point and the slope and the graph is created. Maybe a parabola is possible? Simple graphs like circles and ellipses.

Hello everyone, I'm really excited to see the new developments in STACK. I have quite a different set of use cases in mind that are not just maths education which I appreciate is a scope screep of a giant order - so I thought I would add a comment here to explain a bit more without any expectation of action ....

We are currently doing remote laboratory exercises in the browser with students then downloading and uploading experimental data in jupyter notebooks for analysing and plotting and also treating like a lab notebook. It occurred to me that the new STACK approach could offer some benefits here. I would be interested in investing some thought and effort in this approach as an alternative to our current approach that supports more extension and integration with lower overhead due to cleaner plug in architecture and base model.

It does however rather stretch the potential feature/plug in list and the requirements are not definitive at this stage.

But for the sake of moving the conversation on, I would add comments about how I interpret graphs here-

Graphs as not just plots of functions but also data, sometimes one or other, sometimes both e.g. as in comparing data and analytical function such as simple harmonic motion in our first year labs.

And also graphs as in nodes and edges for diagrams of e.g. relationship and flow written using say mermaid, perhaps data flow, control flow, or ordering and frequency of transitions between states

Aiming to illuminate rather than request and would feel a bit more oriented once more familiar with some of the underlying tech details I think .

[EJMFarrow]

Creating a graph from data seems like something we should have. The details of syntax, etc, to be iterated over but here's a start:

I'm thinking adding mermaid.js is possible, it just adds another dependency for us to ship and keep-up-to-date. I'm going to talk to Chris first about that one as I'm already unsure about design choices with the plots related to our filter/extension/transform set up for free-text questions. Currently they're a markdown extension but they could be a filter or transform - we'll have to figure out what makes most sense.

[timdrysdale]

Oooh cool!! That was quick. Yeah I hear you on shipping extra dependencies. I am wondering about how best to handle that in the general case if there is a set of things one user group cares about more than another - many things easier said than done of course

[sangwinc]

Would you not give them GeoGebra?

@christianp yes, we can (and do) include GeoGebra. I would prefer to include only fully opensource (not "non commercial") software, but other colleagues have asked for GeoGebra and so we already have it.

Within this particular block we will want to include graphs and diagrams. We already have JSXGraph in STACK, so using this as a a (fully opensource) base for other functionality makes most sense.

There is no suggestions students will learn/type fill JSXGraph code!

[sangwinc]

I suppose what you are doing on the left column needs to be presented in a student friendly way. We don't expect them to be able to code the plot. Maybe have a semi-filled template, with comments on what they need to fill in? Like, define the min and max values of the axis, type the function, type the coordinates of a point...

This is all at a very early stage, @KZerva and all this is open to discussion. The first step is to have a simple text-format for plots. Then we decide if the students learn/type it, whether we have templates, or a pop-up tool which ultimately puts the text into the student's answer. The goal is that the student's answer should be an editable text-based format however they end up that way.