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
-* type : Contient une chaîne de caractères égale à
-**"simple" pour une figure sans longueur unité sans repère
-**"unity" pour une figure avec segment longueur unité et sans repère
-**"orthonormal" pour une figure avec repère orthonormal
-**"orthogonal pour un figure avec repère orthogonal"
-*datarep : objet du type quadhor, quadver, grid, withvect, grad
-** quadver est un booléan égal à true si on veut que le repère soit quadrillé verticalement
-** quadhor est un booléan égal à true si on veut que le repère soit quadrillé horizontalement
-** withvect est true si le repère doit avoir des vecteurs directeurs sur chaque axe
-** grid est un booléen égal à true si on veut que le repère ait des pointillés aux coordonnées entières
-** grad est une chaîne de caractères valant :
-***"no" si on ne veut pas de graduations sur les axes
-***"simple" si on veut des graduations usuelles
-***"trig" si on veut des graduations trigo sur l’axe des abscisses
Dans le cas où grad est égal à "trig", le paramètre unity de datafig n’est pas pris en compte et l’unité de la figure est le radian
-*unity est une chaîne de caractères égale à "deg" pour qu la figure utilise le degré et "rad" pour le radian

- options est un objet donnant les infos du svg à créer dans la figure
-* width : La largeur du SVG contenant l’appli
-* height : La hauteur de ce svg
-* idSVG : L’id de ce svg

- figureOptions est un objet du type donnant des informations sur l’initialisation de l’application pouvant contenir les champs suivants :
-*level : un entier de 0 à 3 donnant le niveau de fonctionnement du logiciel ou une chaine de caractères Base64 donnant les outils permis ou interdits. Le niveau sera 3 si le paramètre est absent.
-*local :
— - Soit un booléen valant true si l’application fonctionne en local hors-ligne (Sera false si le paramètre est absent).

— - Soit une chaîne de caractères donnant le chemin menant au fichier mtgloader.js, chemin relatif par rapport à la page qui a lancé l’application auquel cas le fonctionnement est supposé local.

-* displayOnLoad : un boolean mis à true si la figure doit s’afficher automatiquement dès qu’elle est prête et false sinon. true par défaut.
-* displayMeasures : true si on veut que les mesures de longueur et d’angles soient automatiquement affichées sur la figure et false sinon. true par défaut.
-* codeBase64 : true on veut que l’outil permettant d’obtenir le code Base64 de la figure soit présent (true si absent)
-* open : true si on veut que l’outil permettant d’ouvrir une figure soit présent (true par défaut)
-* save : true si on veut que l’outil permettant d’enregistrer une figure soit présent (true par défaut)
-* newFig : true si on veut que l’outil permettant de créer une nouvelle figure soit présent (true par défaut)
-* trace : true si on veut que l’outil permettant d’activer ou non le mode trace soit présent (true par défaut)
-* options : true si on veut que l’outil permettant de changer les options de la figure soit présent (true par défaut)
-* onlyPoints : true si on veut que les outils de transformation ne s’appliquent qu’à des poins (false par défaut)
-* dys : true si on veut que l’interface démarre adaptée au utilisateurs "dys" : traits épais, points en grande croix, taille des noms plus grande.

- 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.