JSXGraph: una libreria javascript per la matematica interattiva

Da qualche anno a questa parte, il livello di competenze matematiche dei migliori studenti americani è cresciuto in modo spettacolare ed imprevisto. Basti dire che nel 2016, dopo più di vent'anni dall'ultima volta, il team americano è riuscito a vincere le Olimpiadi di Matematica che in quell'anno si sono tenute in Tahilandia. Molti osservatori hanno messo in relazione questo fenomeno con l'arrivo sul mercato di alcune piattaforme dedicate all'apprendimento della matematica, prima fra tutte Brilliant.org.

Ciò che rende Brilliant.org radicalmente diversa da tutte le piattaforme che l'hanno preceduta è la sua vocazione interattiva. Ogni volta che è possibile, i redattori di brilliant.org tentano di presentare allo studente un singolo concetto usando una piccola applicazione software interattiva. Questo permette agli studenti di focalizzarsi sul singolo problema in esame e di sperimentare in prima persona come la variazione dei suoi parametri influisce sul suo comportamento. Un caso classico è il "plotting" di funzioni in cui è possibile modificare il parametri della curva per osservarne gli effetti. Questo modo interattivo e focalizzato di presentare i concetti è inserito all'interno di un "frame" di "challenge-based learning" ("apprendimento basato sulle sfide") in cui allo studente vengono presentati alcuni esercizi immediatamente dopo la presentazione dell'argomento. Questo obbliga lo studente a fare uso delle sue personali risorse cognitive e consolida quanto si è appena appreso.

L'avvento di piattaforme come brilliant.org ha radicalmente cambiato il modo in cui gli studenti più brillanti affrontano lo studio della matematica (e di altre discipline scientifiche e tecniche) e, al giorno d'oggi, la stragrande maggioranza di questi studenti dà per scontato che queste piattaforme esistano e siano disponibili per l'apprendimento di queste materie. Purtroppo, la stragrande maggioranza delle istituzioni educative "tradizionali" del pianeta, tra cui la scuola e l'università del nostro paese, sono rimaste del tutto ignare di questa rivoluzione.

Creare "lezioni interattive" come quelle proposte da brilliant.org non è particolarmente difficile ma impone l'uso di una libreria software per la creazione di "oggetti grafici interattivi di carattere matematico e geometrico".

Esistono da tempo programmi applicativi in grado di creare e di gestire questo tipo di "oggetti". Uno degli strumenti più noti e più utilizzati è GeoGebra (geogebra.org). Tuttavia, questi sono – per l'appunto! – "programmi applicativi" (tecnicamente parlando sono degli "editor grafici" e dei "risolutori algebrici") e non sono realmente adatti a questo scopo.

I siti web come brilliant.org, infatti, usano abitualmente una apposita libreria che viene sviluppata sin dal lontano 2010 da un apposito team di sviluppo finanziato dal "Programma Erasmus" Europeo: JSXGraph (jsxgraph.org). Quello che vedete qui di seguito è un tipico esempio di cosa può produrre JSXGraph all'interno di una pagina web.

Questa è una curva di Lissajous, presa dalla pagina “Examples” del sito jsxgraph.org
(https://jsxgraph.org/wiki/index.php/Lissajous_curves). Provate a muovere i cursori ("slide") che vedete in alto a destra.

Questa è una Limacon , presa dalla pagina “Examples” di jsxgraph.org

(https://jsxgraph.org/wiki/index.php/Limacon)
:

JSXGraph è una normale libreria Javascript, non molto diversa da molte altre come JQuery, Plotly e via dicendo. Per utilizzarla all'interno di una pagina web è sufficiente richiamarla da un server CDN ("Content Delivery Network") con queste righe di codice:


<head>
 <link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
 <script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js">
</head>

Una volta caricata, può essere usata in questo modo:


<div id="box" class="jxgbox" style="width:500px; height:500px;">
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true});
</script>

Questo frammento di codice inserisce un “pannello” JSXGraph all’interno della pagina web. È questo pannello a contenere ed a mostrare l’oggetto matematico o geometrico creato da JSXGrap. Il codice che effettivamente genera l’oggetto è simile all’esempio che segue.


var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox: [-12, 10, 12, -10]});
brd.suspendUpdate();
var a = brd.create('slider',[[2,8],[6,8],[0,3,6]],{name:'a'}); 
var b = brd.create('slider',[[2,7],[6,7],[0,2,6]],{name:'b'});
var A = brd.create('slider',[[2,6],[6,6],[0,3,6]],{name:'A'});
var B = brd.create('slider',[[2,5],[6,5],[0,3,6]],{name:'B'});
var delta = brd.create('slider',[[2,4],[6,4],[0,0,Math.PI]],{name:'δ'});

var c = brd.create('curve',[
          function(t){return A.Value()Math.sin(a.Value()t+delta.Value());},
          function(t){return B.Value()Math.sin(b.Value()t);},
          0, 2*Math.PI],{strokeColor:'#aa2233',strokeWidth:3});
brd.unsuspendUpdate();

Ovviamente, la parte difficile consiste nel sapere cosa scrivere all'interno di questo frammento di codice ma questo è un argomento che affronteremo nei prossimi articoli su questo tema.

Per il momento, mi limito ad elencare le principali fonti di informazione che riguardano JSXGraph.

Alessandro Bottoni

JSXGraph: una libreria javascript per la matematica interattiva

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.