Les nouvelles technologies pour l’enseignement des mathématiques
Intégration des TICE dans l’enseignement des mathématiques

MathémaTICE, première revue en ligne destinée à promouvoir les TICE à travers l’enseignement des mathématiques.

GeoGebra et Javascript

Le logiciel GeoGebra inclut un moteur de script compatible avec Javascript. Cela permet d’agir sur les objets géométriques de GeoGebra.

Article mis en ligne le 8 février 2019
dernière modification le 5 avril 2019

par Thomas Castanet

Cet article peut être librement diffusé à l’identique dans la limite d’une utilisation non commerciale suivant la licence CC-by-nc-nd http://creativecommons.org/licenses/by-nc-nd/3.0/fr/legalcode

GeoGebra donne la possibilité d’utiliser un langage de script, compatible avec la norme Javascript, pour inter-agir avec le logiciel.

Dans cet article, sont présentés des exemples d’utilisation de Javascript offrant des fonctionnalités utiles lors d’une utilisation en classe :

  • Auto-correction d’un exercice : GeoGebra affiche un message lorsque l’élève réussit à construire une figure pré-définie ;
  • Revenir à une figure initiale : un bouton permet à l’élève d’annuler ses modifications et de revenir à la version initiale du fichier ;
  • Plusieurs configurations dans un fichier : un même fichier peut présenter plusieurs configurations correspondant à des questions différentes ; l’élève navigue de l’une à l’autre en cliquant sur des boutons ;
  • Des présentations avancées : mettre en scène des situations mathématiques pour présenter une notion, un phénomène.

Cet article propose d’explorer le code Javascript permettant au lecteur, ayant des connaissances de base dans ce langage, de produire ses propres scripts.

Un guide complet de l’usage de Javascript dans GeoGebra est disponible ici.

Vérification automatique

L’animation ci-dessous présente un fichier GeoGebra contenant un script affichant une boîte à dialogue lorsque l’utilisateur réussit à reproduire le symétrique du triangle ABC :

Voici le code utilisé :

Son principe de fonctionnement est simple :

  • on crée la figure à laquelle l’élève doit aboutir : ici, on la repèrera dans le panneau « Algèbre » de GeoGebra par le nom « sym » (utilisé à la ligne 3)
  • La méthode « newObjectListener() » de Javascript/GeoGebra est exécutée chaque fois qu’est créé un objet par l’utilisateur. En redéfinissant cette fonction, on demande à GeoGebra de vérifier si le triangle symétrique est créé.

Vous trouverez ci-dessous le fichier GeoGebra et un fichier d’explication un peu plus précis sur le fonctionnement du script.

D’autres exemples de scripts « auto-corrigés » de GeoGebra sont accessibles sur la page de l’IREM de Paris.

Ré-initialiser une figure

Dans cet exemple, les élèves doivent utiliser une même figure pour déterminer un vecteur représentatif de la somme de vecteurs.
Après quelques questions, la figure devient très souvent surchargée et pour revenir à la figure initiale, les élèves ré-ouvrent le fichier entrainant une perte de temps.

L’usage de la commande « ggbApplet.reset() » permet de ré-initialiser les objets GeoGebra et de revenir à la dernière version du fichier utilisé.
Cela peut être un inconvénient si le fichier sur un même poste est utilisé par plusieurs classes : un enregistrement écraserait la version initiale proposée par l’enseignant.

La solution proposée ici et de rendre les objets initiaux « non sélectionnables » ; l’utilisation du bouton « Effacer » exécutant un script efface seulement les objets créés par l’élève.

Voici le code du script associé au bouton « Effacer »

L’idée du script est assez simple :

  • La variable « listeObjet » contient tous les objets GeoGebra présents dans la version initiale du fichier. Lors de son exécution, le script inspecte tous les objets de GeoGebra et les efface s’ils ne font pas partie de la variable « listeObjet ».
  • La méthode « setCoordSystem() » permet de recentrer la vue de GeoGebra au cas où l’élève a zoomé ou déplacé l’affichage de GeoGebra

Voici le fichier de cette activité et une explication plus précise de ce code :

Créer plusieurs situations

  • 1er exemple :

Lors de cette activité, les élèves étudient l’effet d’une transformation du plan complexe en observant un point A d’affixe a et son image A’ d’affixe a’. Ils sont invités à conjecturer les caractéristiques possibles de cette transformation du plan

Voici le code du bouton « Test 1 » :

Son exécution est simple :

    • Ligne 1 : on modifie la valeur de l’objet « a » de GeoGebra. Cela permet de repositionner le point A dans la fenêtre ;
    • Ligne 2 : on redéfinit le point A’, image de A par une nouvelle transformation complexe ;
    • Ligne 3 : on modifie l’affichage du texte présentant la transformation complexe afin de le signifier à l’élève.

Voici le fichier GeoGebra :

L’autre version de cette activité présentée ci-dessous affiche le segment [OA] et son image par la transformation complexe permettant à l’élève de conjecturer plus facilement la nature de la transformation associée du plan :

  • 2ème exemple

Dans cette activité, les élèves vont relever les nombres dérivés de fonctions de références. Les boutons permettent à l’élève de passer plus facilement d’une fonction à l’autre.

Ci-dessous est présenté le code Javascript du bouton « Test1 » :

et quelques explications :

    • Les méthodes setRepaintingActive() permettent de « geler » l’affichage et ainsi d’accélérer l’exécution du script ;
    • La méthode setCoordSystem() permet d’adapter la fenêtre d’affichage à chacune des fonctions affichées ;
    • Les méthodes evalCommand() permettent de transmettre une chaine de caractères modifiant les objets de GeoGebra comme si ces commandes étaient saisies directement dans la ligne de saisie de GeoGebra.

Voici le fichier de cette activité :

  • 3ème exemple

Ce document est plus un document de présentation utilisé par l’enseignant pour un affichage via le vidéo-projecteur. Il peut aussi être distribué aux élèves afin qu’ils y repèrent les différentes étapes de construction de la courbe représentative de la fonction sinus.

Voici une partie du code utilisée :

Quelques explications de ce code du bouton « Test4 »

  • de la ligne 1 à 5, on désactive toutes les animations qui auraient pu être lancées par d’autres boutons précédemment et on ne lance que celle associée au « Bouton4 » ;
  • de la ligne 7 à 16, ces commandes permettent de n’afficher que les objets GeoGebra nécessaires pour ce bouton.

Voici le fichier GeoGebra de cette présentation :

Démarches algorithmiques

Ces deux activités utilisent GeoGebra pour présenter une démarche algorithmique : appuyer sur un bouton permet d’exécuter un certain nombre d’actions sur les objets de GeoGebra présentant une étape de l’exécution de l’algorithme.

  • Dichotomie

Partant d’une fonction et d’une intervalle connu sur lequel la fonction ne s’annule qu’une fois, un jeu de couleurs sur l’intervalle permet de choisir le « demi-intervalle » où se situe le zéro de la fonction :

Voici le code Javascript utilisé pour deux des boutons de ce document :

Bouton réinitialisé

  • les lignes 1 à 3 définissent l’intervalle initial ;
  • les valeurs initiales utilisées par le code Javascript sont transférées à GeoGebra via les lignes 5 à 7
  • les lignes 9 à 14 adaptent la fenêtre d’affichage de GeoGebra en fonction de la fonction utilisée et de l’intervalle utilisé

Choisir valeur

  • les lignes 1 à 3 récupérent les valeurs des objets de GeoGebra afin d’être utilisées par le code Javascript ;
  • on reconnait à la ligne 10 la conditionnelle essentielle à la recherche d’un zéro pour une fonction continue par l’algorithme de dichotomie ;
  • Les lignes 11 à 14 et les lignes 17 à 20 permettent d’effacer le « demi-intervalle » non-utile et d’actualiser les valeurs des objets de GeoGebra pour la prochaine étape de l’algorithme.

Et le fichier GeoGebra :

  • Jeux du Chaos

Cette présentation a été proposée par Mustafa Biba pour introduire l’algorithmique en classe de Seconde : le lancer d’un dé permet de déplacer un point à l’intérieur du triangle équilatéral. Une répétition de cette expérience permet de conjecturer que le point M ne peut se placer en tout point du triangle et la « mémorisation » de son emplacement permet de mettre en évidence la fractale du « triangle de Sierpinski »

Le bouton « Lancer le dé » permet d’exécuter une étape de l’algorithme alors que le bouton « Effectuer 500 lancers » permet d’en effectuer 500 et de conjecturer plus facilement les positions possibles du point M.

Je vous laisse inspecter le code (qui n’apporte rien de nouveau par apport aux explications précédentes) dans le fichier GeoGebra :

Plus loin

Cette section présente la possibilité pour un script Javascript de modifier directement le code XML définissant les objets de GeoGebra. Cette utilisation « avancée » de GeoGebra nécessite une bonne connaissance du langage XML et de l’utilisation des expressions régulières avec Javascript.

Ce fichier de présentation de la recherche de l’aire du domaine défini par une courbe représentative, l’axe des abscisses et deux droites verticales, aurait pu être réalisé plus facilement avec l’usage des commandes SommeGauche, SommeInférieure (...) mais je ne les connaissais pas lors de la création de ce script.

Lors de sa conception, je suis tombé sur une difficulté : la création par GeoGebra des 256 rectangles (entraînant la création de quatre fois plus de sommets et segments) prenait trop de temps avec le langage Javascript.

Ainsi, au lieu de demander à GeoGebra de créer tous ces objets, le script modifie directement le contenu de GeoGebra en agissant directement sur les fichiers XML définissant les objets de GeoGebra.
Cela est possible via la méthode « ggbApplet.setXML() » et l’usage des expressions rationnelles de Javascript pour repérer les objets et les modifier ou les effacer directement.

L’extension « ggb » est en fait une archive informatique qu’on peut ouvrir avec un logiciel de décompression classique et accéder aux fichiers définissant votre « fichier » GeoGebra

Voici le code de cette application :

Voici le fichier GeoGebra :