Logiciel libre de géométrie, d'analyse et de simulation multiplateforme par Yves Biton
 
Accueil - Présentation

Comment mettre en ligne l’application MathGraph32 sur un site

publication mercredi 13 septembre 2017.


Les explications ci-dessous concernent les utilisateurs qui veulent mettre en ligne l’application JavaScript MathGraph32 sur leur propre site.

Premier exemple

Explications de référence

Mise en ligne d’un exercice de construction


exemple

Votre page doit contenir un DIV dédié à contenir l’application MathGraph32. Dans cet exemple nous supposerons que ce DIV a pour id main.

Pour ce faire, par exemple, le body de votre page contiendra les lignes suivantes :

<div id="main"></div>

Ce div peut être vide. Si c’est le cas, un SVG sera créé à l’intérieur de ce div pour contenir l’interface de l’application.

Si ce div contient déjà un SVG d’id idSVG (par exemple) alors c’est dans ce SVG que sera contenue l’interface de l’application (et les dimensions de ce div resteront inchangée)

Votre page doit contenir un code analogue au code suivant :

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$","$"],["\\(","\\)"]]
},
SVG:{mtextFontInherit: false},
jax: ["input/TeX","output/SVG"],
TeX: {extensions: ["color.js"]},
messageStyle:'none'
});
</script>
<script type="text/javascript" src="https://www.mathgraph32.org/ftp/js/MathJax/MathJax.js?config=TeX-AMS-MML_SVG-full"></script>
<script type="text/javascript" src="https://www.mathgraph32.org/ftp/js/mtgloader/mtgLoader.min.js"></script> <script type="application/javascript">

if (typeof mtgLoader === 'function') {
var datafig = {type:"orthonormal",datarep:{quadhor:false, quadver:false, grid:true, withvect:false, grad:"simple"},
unity:"rad"}
var options = {
idSVG: 'svg',
width:"900",
height:"560"
}
var figureOptions = {
local : false,
level : 3
}
var mtgloader = new mtgLoader('main', datafig, options, figureOptions)
} else {
alert('mathgraph n’est pas chargé correctement')
}
</script>

Explications

Les lignes suivantes servent à préparer la version de MathJax utilisée par MathGraph32 ((c’est elle qui permet d’afficher du code LaTeX sur les figures) :

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$","$"],["\\(","\\)"]]
},
SVG:{mtextFontInherit: false},
jax: ["input/TeX","output/SVG"],
TeX: {extensions: ["color.js"]},
messageStyle:'none'
});
</script>
<script type="text/javascript" src="https://www.mathgraph32.org/ftp/js/MathJax/MathJax.js?config=TeX-AMS-MML_SVG-full"></script>

Il ne faut pas changer l’ordre relatif de ces lignes.

Les lignes suivantes donnent des informations sur la figure de départ et sur le SVG contenant l’interface de MathGraph32 :

var datafig = {type:"orthonormal",datarep:{quadhor:false, quadver:false, grid:true, withvect:false, grad:"simple"},unity:"rad"}
var options = {
idSVG: 'svg',
width:"900",
height:"560"
}

Enfin la ligne suivante :

new mtgLoader('main', datafig, options, figureOptions)

Crée l’application elle-même en lui fournissant les paramètres créés précédemment.

Explications de référence

Votre page doit contenir les lignes suivantes :

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$","$"],["\\(","\\)"]]
},
SVG:{mtextFontInherit: false},
jax: ["input/TeX","output/SVG"],
TeX: {extensions: ["color.js"]},
messageStyle:'none'
});
</script>
<script type="text/javascript" src="https://www.mathgraph32.org/ftp/js/MathJax/MathJax.js?config=TeX-AMS-MML_SVG-full"></script>
<script type="text/javascript" src="https://www.mathgraph32.org/ftp/js/mtgloader/mtgLoader.min.js"></script> <script type="application/javascript">

Pour créer l’application, vous devez utiliser les lignes suivantes :

Var mtgloader = new mtgLoader (container, datafig, options, figureOptions, functionOnSave, callBackAfterReady, bplayer) où :

- container est un DIV ou l’id d’un div conteneur pour le SVG contenant l’interface de l’appli qui doit déjà exister

- datafig est soit une chaîne base64 représentant la figure à afficher au chargement soit un objet du type type, datarep, unity

- options est un objet donnant les infos du svg à créer dans la figure

- figureOptions est un objet du type donnant des informations sur l’initialisation de l’application pouvant contenir les champs suivants :

- functionOnSave : fonction de callBack éventuelle à appeler lorsque l’utilisateur appuie sur le bouton d’enregistrement

- callBackAfterReady : null ou fonction de callBack à appeler lorsque la figure est chargée et peut être utilisée. Cette fonction peut utiliser le paramètre mtgApp qui fait alors référence à mtgLoader.mtgApp.

- bplayer : si présent et true on peut utilier mtgloader.mtgApp.player qui est un MtgAppLecteur (sert pour les exercices de construction ou pour afficher des figure en plus du SVG contenant l’application).

Une fois l’objet mtgloader créé, mtgloader.mtgApp fait référence à l’application elle-même qui possède les fonctions suivantes :

- giveFormula2(nomCalcul, formule) : Donne au calcul ou à la fonction nomménNomCalcul la formule contenue dans la chaîne de caractères formule. Renvoie true si la formule était valide ou false si la formule n’est pas valide ou il n’y a pas de calcul ayant ce nom.

- valueOf(nomCalcul) : Renvoie la valeur actuelle du calcul réel nommé nomCalcul dans la figure.

- getLatexCode(ind) : Renvoie le contenu de l’affichage LaTeX d’indice ind de la figure (les indices commençant à zéro).

- calculateAndDisplay(brandom) : Recalcule et réaffiche la figure. Si brandom est true, les calculs aléatoires utilisant la fonction rand() sont réactualisés, sinon ils rendent les mêmes valeurs.

Si le paramètre bPlayer est true, vous pouvez alors aussi afficher des figures MathGraph32 dans d’autres SVG de votre page internet. Le player MathGraph32 est alors l’objet mtgloader.mtgApp.player. Se référer aux explications concernant ce player pour l’utiliser.

Comment utiliser l’application JavaScript MathGraph32 pour faire faire en ligne des exercices de construction :

Le paramètre datafig doit contenir la chaîne Base64 de la figure.

Cette figure doit contenir un macro d’apparition d’objets d’intitulé #Solution# faisant apparaître les objets que l’élève doit construire.

Les objets que l’élève doit construire doivent être cachés.

Si le ou les objets à construire sont des points ou des droites nommés, l’élève doit construire les objets demandés et leur donner le même nom que celui qui est le nom initial des objets à construire (ceux qui sont cachés).

Si les objets à construire ne sont pas nommés, il sera simplement vérifié que l’élève a bien construit les objets demandés, sans tenir compte de leurs noms.

Si la figure comporte des calculs ou des fonctions que l’élève a le droit d’utiliser, leur nom doit figurer dans le commentaire de la macro #Solution# entouré d’accolades.

Pour savoir si l’élève a bien répondu on peut utiliser les fonctions suivantes de l’objet mtgloader.mtgApp :

- validateAnswer() : Fonction renvoyant true si l’élève a bien construits les objets demandés (avec les noms demandés si les objets à construire sont nommé) et false sinon.

- getMissingNames() : Fonction renvoyant un tableau formé des noms des objets que l’élève doit construire et que l’élève n’a pas nommés. Si ce tableau est vide c’est que tous les noms demandés sont bien présents dans la figure.

- objectConstructed() : Fonction renvoyant true si au moins un objet a été construit et false sinon.