JSXGraph & LiaScript ... a perfect Match

JSXGraph & LiaScript … a perfect Match

name: Dr.-Ing. André Dietrich & Prof. Dr.-Ing. Sebastian Zug

adress:
TU Bergakademie Freiberg
Bernhard-von-Cotta-Straße 2
09599 Freiberg

abstract:
Liascript is an extension for markdown with was especially developed as a language easy and dezentralized creation of interactive online courses, in short a language for OER. It add various features to markdown, which where previously missing, such as the integration of multimedia content, integration of Oembed sites, the execution of script-tags, animations in combination text to speech output to generate a mixture between screencast and interactive textbooks. It does not require an additonal compilation step, since the content is directly interpreted within the browser. Additonally other markdown-dialects often lack of extending the language, in LiaScript this is possible with an additional macro-syntax which allows for integrating an mixing external javascript, css, plus the liascript markdown language.

We therefor have added a JSXGraph extension, which is in itself a Markdown file that only has to be imported into the header of a document. This readme is itself a self describing documentation. Afterwards, it is possible to use different jsx extensions directly within the codeblock, which are indicated by the @JSX.Graph.

JXG.Options.slider.snapValues = [-5, -2, -1, 0, 1, 2, 5];
JXG.Options.slider.snapValueDistance = 0.2;

var a = board.create('slider', [[2, -5], [7, -5], [-5, 1, 5]], { name: 'a' });
var b = board.create('slider', [[2, -6], [7, -6], [-5, 0, 5]], { name: 'b' });
var c = board.create('slider', [[2, -7], [7, -7], [-5, 0, 5]], { name: 'c' });
 
var f = board.create('functiongraph', [(x) => a.Value() * x * x + b.Value() * x + c.Value()]);
 
var txt = board.create('text', [-9, -5,
       () => JXG.Math.Numerics.generatePolynomialTerm([c.Value(), b.Value(), a.Value()], 2, 'x', 2)
], { fontSize: 18 });

As an alternative, if you want to allow users to inspect the code, simply use the @JSX.Script macro, which will be highlighted differently. This allows the user to double-click or double-tab on the “result of the script”, which will reveal the code, that was required to generate the output, thus, users can inspect, modify and experiment with the code to get a deeper understanding.

JXG.Options.slider.snapValues = [-5, -2, -1, 0, 1, 2, 5];
JXG.Options.slider.snapValueDistance = 0.2;

var a = board.create('slider', [[2, -5], [7, -5], [-5, 1, 5]], { name: 'a' });
var b = board.create('slider', [[2, -6], [7, -6], [-5, 0, 5]], { name: 'b' });
var c = board.create('slider', [[2, -7], [7, -7], [-5, 0, 5]], { name: 'c' });
 
var f = board.create('functiongraph', [(x) => a.Value() * x * x + b.Value() * x + c.Value()]);
 
var txt = board.create('text', [-9, -5,
       () => JXG.Math.Numerics.generatePolynomialTerm([c.Value(), b.Value(), a.Value()], 2, 'x', 2)
], { fontSize: 18 });

JSXGraph delivers robust, low-latency visualisations; LiaScript supplies the narrative glue, assessment scaffolding, and friction-free distribution channel. Together they create living, explorable documents in which theory, code, and visual feedback co-evolve in real time—no build chains, no vendor lock-in, and zero installation overhead. Authors write once; learners tinker anywhere, from a smartphone on the bus to an offline and remote Feature-Phone. This synergy lowers the entry barrier for content creators, turns static lessons into interactive laboratories, and ultimately bridges the gap between explanation and exploration—exactly the kind of experience we believe the JSXGraph community strives for.