Logiciel libre de géométrie, d'analyse et de simulation multiplateforme par Yves Biton
 
Accueil - L’applet MathGraph32 et l’export html

Utilisation de l’applet : Exemple 7. Exercice interactif sur l’équation d’une parabole. Cas d’un sommet quelconque.

publication samedi 5 juillet 2008.


Cet exemple est analogue à l’exemple 6.

Il montre comment une page internet peut changer la formule d’une fonction contenue dans une applet MathGraph32 et mémoriser la formule de cette fonction ainsi que d’autres paramètres de façon à les réutiliser dans une nouvelle page de rétroaction.

Créez un répertoire sur votre disque dur que nous appellerons RepExemple7.

Cliquez ci_dessous pour télécharger les fichiers correspondant à cet exemple dans ce nouveau répertoire.

Zip - 237 ko
Exemple7.zip

Décompressez ce fichier Exemple7.zip dans ce même répertoire.

Vous obtenez alors un répertoire contenant :
- Trois fichiers html nommés PagePrincipale.htm, ExplicationsVrai.htm et ExplicationsFaux.htm.
- Le fichier jar contenant l’applet nommé AppletMathGraph32.jar.
- Trois figures MathGraph32 nommées Exemple7.mgf, Exemple7Bis.mgf et Exemple7Ter.mgf.

Dans le répertoire RepExemple7, double-cliquez sur le fichier PagePrincipale.htm pour lancer cette page dans votre navigateur.

Vous pouvez aussi cliquer sur ce lien pour voir cet exemple en action dans une nouvelle fenêtre.

Cette page s’ouvre et présente une parabole.

La page contient un champ permettant à l’utilisateur de proposer une formule pour f(x) de façon que la courbe de f soit la parabole tracée.

Lorsque sa réponse est prête, l’utilisateur doit cliquer sur le bouton de validation ou taper sur la touche Entrée du clavier.

La validité de la syntaxe est alors analysée par l’applet.

Si la réponse est correcte, une page de rétroaction s’affiche avec la formule proposée (bonne donc).

Si la réponse est fausse, une autre page de rétroaction présente la bonne réponse avec la courbe proposée et la courbe correspondant à la réponse fausse (si elle est visible) ainsi que la réponse proposée.

Nous allons expliquer comment tout cela fonctionne.

Rappelons que vous pouvez ouvrir les fichiers .htm dans votre traitement de texte pour examiner leur code (vous pouvez aussi demander à voir le code de la page dans votre navigateur.

La page principale

Elle est nommée PagePrincipale.htm
Expliquons son fonctionnement :

Les lignes suivantes déclarent une fonction en JavaScript :

Cette fonction est appelée quand on clique sur le bouton de validation que contient cette page.

Dans la figure MathGraph32 affichée par l’applet, la fonction dont la courbe est tracée dépend de trois paramètres signe, a et b qui sont calculés de façon aléatoire et mémorisés dans les calculs res1, res2 et res3 de façon à pouvoir être réutilisés dans les pages de rétroaction.

La figure MathGraph32 Figure3.mgf contient aussi un calcul nommé reponse. La figure est faite de façon que reponse contient 1 si l’utilisateur a bien entré une formule pour f(x) correspondant à la parabole tracée et 0 sinon.

La ligne 3 interroge donc le formulaire contenu plus loin dans cette page pour récupérer la formule proposée.

La ligne 4 essaye de modifier dans la figure gérée par l‘applet la formule définissant la fonction z1 (on choisit ce nom car les fonctions de nom z1, z2 jusqu’à z10 peuvent être mémorisées par l’applet).

Vous remarquerez que le troisième paramètre est le nom de la variable formelle de la fonction (ce doit être le même que dans la figure MathGraph32). Le résultat renvoyé est négatif ou nul dans le cas où la syntaxe est incorrecte. Dans ce cas la formule n’est pas changée dans l’applet.

La ligne 8 recalcule la figure et la redessine en sauvegardant la valeur des calculs res1, res2 et res3 (voir la ligne 12 ci-après) et la formule contenue dans la fonction z1. Elle n’est indispensable ici que parce que le paramètre Action de l’applet a été mis à Sauvegarde.

La ligne 9 interroge l’applet pour connaître la valeur du calcul reponse qui vaut 1 si la réponse était correcte.

Les lignes 10 et 11 se chargent de remplacer dans la navigateur la page en cours par la page ExplicationsVrai.htm si la réponse était correcte et ExplicationsFaux.htm si elle était fausse.

Voyons maintenant les lignes qui servent à déclarer l’appel de l’applet dans cette page :

Ces lignes peuvent être fournies automatiquement par MathGraph32 via le menu Aide >> Code html pour applet et en cliquant sur le bouton Coller le code html dans le presse-papier.

La ligne 13 est classique (AppletMathGraph32.jar est le nom du fichier jar contenant l’applet que vous avez téléchargée sur le site du CNDP). Elle déclare l’applet, le fichier jar contenant le source lui donne un nom Applet1 qui est utilisé dans la fonction validationReponse() et ses dimensions qui sont fournies par MathGraph32 via le menu Aide >> Code HTML pour applet. Cette applet est nommé Applet1 car ce nom est utilisé dans la fonction validationReponse().

La ligne 14 donne l’emplacement de la figure MathGraph32 sur le serveur.

La ligne 15 demande à l’applet de sauvegarder certaines valeurs qui sont contenues dans la figure MathGraph32 (pour mémoriser la réponse de l’utilisateur lorsqu’il a validé sa réponse. Les valeurs qui sont sauvegardées sont les valeurs des calculs res1, res2res10 (s’ils sont définis) et les formules des calculs ou fonctions nommés z1, z2z10. Dans le cas de notre figure, les valeurs utilisées sont res1, res2 et res3 ainsi que la fonction z1.

Enfin les lignes suivantes déclarent le formulaire contenant un champ servant à entrer la réponse de l’utilisateur et un bouton qui, lorsqu’il est pressé active la fonction validationReponse() :

La page affichée lorsque la réponse est exacte

Elle s’appelle ExplicationsVrai.htm.

Expliquons son fonctionnement :

Les lignes suivantes permettent d’afficher la figure MathGraph32 nommé Exemple7Bis.mgf :

La ligne 27 est importante : En spécifiant que la valeur du paramètre Action est Restitution, la valeur précédemment sauvegardée des calculs res1, res2 et res3 sont réaffectées aux calculs res1, res2 et res3 contenus dans la figure Exemple7Bis et la formule sauvegardée de la fonction z1 est réaffectée à la fonction z1.

Cette figure est conçue pour afficher une figure analogue à la précédente avec la réponse de l’utilisateur sur la figure. Ainsi l’utilisateur voit une figure analogue à celle qui lui avait été proposée bien que la fonction ait été déterminée de façon aléatoire.

Les lignes suivantes servent elles à créer un bouton Suite qui fait revenir le navigateur à la page initiale quand il est activé :

La page affichée lorsque la réponse est fausse

Elle s’appelle ExplicationsFaux.htm.

Elle fonctionne de façon analogue à la page ExplicationsVrai.htm.

Les lignes suivantes permettent d’afficher la figure MathGraph32 nommée Exemple7Ter.mgf :

La ligne 31 est importante : En spécifiant que la valeur du paramètre Action est Restitution, la valeur précédemment sauvegardée des calculs res1, res2 et res3 sont réaffectées aux calculs res1, res2 et res3 contenus dans la figure Exemple7Ter et la formule sauvegardée de la fonction z1 est réaffectée à la fonction z1.

Cette figure est conçue pour afficher une figure analogue à la précédente avec la réponse de l’utilisateur sur la figure et la formule qu’il avait proposée est réutilisée.

On peut donc ainsi tracer la courbe de la fonction correspondant à la formule (fausse) proposée par l’utilisateur.

Ainsi l’utilisateur voit une figure analogue à celle qui lui avait été proposée bien que la fonction ait été déterminée de façon aléatoire.
On peut donc ainsi tracer la courbe de la fonction correspondant à la formule (fausse) proposée par l’utilisateur.

Les lignes suivantes servent elles à créer un bouton Suite qui fait revenir le navigateur à la page initiale quand il est activé :

Retour en haut de cette page