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

Accueil MathGraph32 Historique

Cómo poner en línea la aplicación MathGraph32 sobre un sitio web

modification dimanche 26 janvier 2023.


Las explicaciones siguientes son para usuarios que quieren cargar la aplicación JavaScript de MathGraph32 sobre su propio sitio.

Primer ejemplo

Explicaciones de referencia

Puesta en línea de un ejercicio de construcción


ejemplo

Su página debe contener un DIV dedicado a contener la aplicación MathGraph32. En este ejemplo suponemos que este DIV tiene por id main.

Para hacer esto, por ejemplo, el body de vuestra página contendrá las siguientes líneas :

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

Este div puede estar vacío. Si es así, se creará un SVG dentro de este div para contener la interfaz de la aplicación.

Si este div ya contiene un SVG de id idSVG (por ejemplo) entonces es en este SVG que se contendrá la interfaz de la aplicación (y las dimensiones de este div permanecerán sin cambios)

Su página debe contener un código análogo al código siguiente :

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

Explicaciones

Las siguientes líneas se utilizan para preparar la versión de MathJax utilizada por MathGraph32 (esto es lo que permite mostrar el código LaTeX sobre las figuras) :

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

El orden relativo de estas líneas no debe cambiarse.

Las siguientes líneas proporcionan información sobre la figura de partida y sobre el SVG que contiene la interfaz 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"
}

Finalmente la línea siguiente :

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

Crea la aplicación ella misma proporcionando los parámetros creados anteriormente

Explicaciones de referencia

Su página debe contener las líneas siguientes :

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

Para crear la aplicación, debe utilizar las siguientes líneas :

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

 container es un DIV o el id de un contenedor div para el SVG que contiene la interfaz de la aplicación que ya debe existir

 datafig es sea una cadena base64 que representa la figura que se mostrará en la carga sea un objeto del tipo type, datarep, unity donde

 opciones es un objeto que da información del SVG a crear en la figura

 figureOptions es un objeto del tipo que da información sobre la inicialización de la aplicación que puede contener los siguientes campos :

 functionOnSave : función callBack para llamar eventualmente cuando el usuario presiona el botón de registrar

 callBackAfterReady : null o callBack para llamar cuando la figura está cargada y se puede usar. Esta función puede utilizar el parámetro mtgApp, que hace entonces referencia a mtgLoader.mtgApp.

 bplayer : si está presente y true se puede utilizar mtgloader.mtgApp.player que es un MtgAppLecteur (utilizado para ejercicios de construcción o para mostrar figuras además del SVG que contiene la aplicación).

Una vez que se crea el objeto mtgloader, mtgloader.mtgApp hace referencia a la propia aplicación que tiene las siguientes funciones :

 giveFormula2(nomCalcul, formule) : Da el cálculo o la función nominada NomCalcul la fórmula contenida en la cadena de caracteres formule. Devuelve true si la fórmula es válida o false si la fórmula no es válida o no hay ningún cálculo con ese nombre.

 valueOf(nomCalcul) : Devuelve el valor actual del cálculo real denominado nomCalcul en la figura.

 getLatexCode(ind) : Devuelve el contenido de la visualización LaTeX del índice ind en la figura (los índices que comienzan en cero).

 calculateAndDisplay(brandom) : Recalcula y vuelve a mostrar la figura. Si brandom es true, los cálculos aleatorios que utilizan la función rand() se actualizan, de lo contrario, quedan los mismos valores.

Si el parámetro bPlayer es true, usted puede entonces mostrar figuras MathGraph32 en otros SVG en su página web. El player MathGraph32 es entonces el objeto mtgloader.mtgApp.player. Consulte las explicaciones concernientes a este player para utilizarlo.

Cómo utilizar la aplicación JavaScript MathGraph32 para realizar en línea ejercicios de construcción :

El parámetro datafig debe contener la cadena Base64 en la figura.

Esta figura debe contener una macro de aparición de objetos de título #Solution# mostrando los objetos que el estudiante debe construir.

Los objetos que el estudiante debe construir deben estar ocultos.

Si el (los) objeto (s) a construir son puntos o rectas nominadas, el estudiante debe construir los objetos solicitados y darles el mismo nombre que el nombre inicial de los objetos a construir (los que están ocultos).

Si los objetos a construir no son nominados, simplemente se verificará que el alumno ha construido los objetos solicitados, sin tener en cuenta sus nombres.

Si la figura contiene cálculos o funciones que el estudiante está autorizado a usar, sus nombres deben aparecer en el comentario de la macro #Solution# encerrado entre llaves.

Para saber si el alumno ha respondido bien, se pueden utilizar las siguientes funciones del objeto mtgloader.mtgApp :

 validateAnswer() : Función que devuelve true si el estudiante ha construido correctamente los objetos solicitados (con los nombres solicitados si los objetos a construir están nominados) y false si no.

 getMissingNames() : Función que devuelve una tabla que consiste en los nombres de los objetos que el estudiante debe construir y que el estudiante no ha nombrado. Si esta tabla está vacía, todos los nombres solicitados están presentes en la figura.

 objectConstructed() : Función que devuelve true si por lo menos un objeto ha sido construido y false en caso contrario.