AID Activex : grug0

Association pour l'Innovation Didactique

Centre de Recherche et d'Expérimentation pour l'Enseignement des Mathématiques

Pour lire cette page, les contrôles ActiveX de Geoplan-Geospace et EcritMath doivent être installés et le navigateur doit être Internet Explorer.

Si les boutons qui figurent dans cette page se présentent sous un aspect anormal en mode Edition, il suffit de modifier leur taille.

L'objectif est de créer la page grug1 que vous pouvez d'abord consulter: consulter la page achevée "grug1".

Cette page a été créée en direct lors de la réunion du GRUG (Groupe des utilisateurs de Geoplan, ouvert à tous) du 30 mars 2000 et c'est pour répondre à une demande que nous vous proposons ce texte qui va permettre de refaire ce travail à ceux qui n'ont pas pris de notes ou à ceux qui n'étaient pas là. Il s'agit d'un document rustique, fourni à la demande unanime des participants.
Ce n'est pas le fond des exercices qui importe ici (ils sont simplistes) mais la façon dont on peut créer ce mini-didactitiel, qui contient des figures, des textes contenant des formules mathématiques, des questions dont les réponses sont soit une tâche à faire sur la figure, soit un nombre à écrire dans la page, des boutons et des tests.

Le guidage est écrit en bleu. Vous n'aurez qu'à l'effacer à la fin pour comparer votre travail à la page grug1.html. Vous pouvez aussi essayer de travailler dans une nouvelle fenêtre, mais après essais, cela s'avère peu pratique.
Au départ, nous supposons que vous lisez cette page sous Internet Explorer et que le bouton Edition vous branche sur votre éditeur de page html. Ici nous supposerons qu'il s'agit de FrontPage 2000 (ou, mutatis lutandis, FrontPageExpress). Si vous en avez un autre, il vous faudra adapter la suite Les éditeurs récents permettent l'insertion de contrôles ActiveX (il faut quelque fois les paramétrer pour leur indiquer lesquels doivent être disponibles).

Création de la figure
Appuyez sur le bouton Edition de Internet Explorer. Vous devez passer sous l'éditeur de pages html.
Maintenant, à partir de cette ligne, vous lisez et agissez dans l'éditeur.

Placez le curseur là où vous souhaitez avoir la figure, ici par exemple.

Dans le menu Insertion, choisissez Avancées puis Contrôle ActiveX. La liste des contrôles installés sur votre machine et disponibles dans l'éditeur apparaît. Choisissez GP0.GP0Ctl.
Vous avez maintenant une figure-Geoplan ne contenant que les objets de base. Par un double-click vous obtenez la fenêtre des propriétés du contrôle. Appuyez sur l'onglet Balise Object pour modifier le nom en remplaçant celui donné automatiquement par Figure (le procédures de tests font référence à ce nom). Vous pouvez observer en regardant le code html de la page (sélectionnez la figure pour la retrouver parmi tout le reste) que le paramètre TexteDeLaFigure n'est pas affecté pour le moment. C'est lui que vous allez modifier pour obtenir la figure voulue. Cette figure a été faite sous Geoplan et vous allez recopier son texte pour le coller ici. Ouvrez la figure Figgrug1.g2w avec Geoplan (ou avec un éditeur de texte) et copiez son texte. Collez ce texte après value de <param name="TexteDeLaFigure" value>, en ajoutant =" devant et " derrière. Dans votre code html, vous devez voir (ne recopiez pas le texte ci-dessous à partir de l'éditeur, il y aurait des ennuis avec les retours-chariot, mais vous pouvez le récupérer par copiage dans l'aperçu ou sous Internet Explorer en affichant cette page ou en cliquant sur : figgrug1.txt):

Normalement, vous devez voir votre figure (il faut la redimensionner, à la main) et vous devez pouvoir vérifier qu'elle fonctionne en mode Aperçu.

Comme nous supposons que vous n'êtes pas là pour apprendre à taper du texte, nous l'avons fait pour vous mais il reste à insérer les contrôles EcritMath qui permettront d'écrire les vecteurs. Il s'agit d'insérer après le mot repère, et après tel que dans la phrase qui accompagnera la figure:
Dans la figure, la droite d est munie du repère , le point I est tel que , les points A et B ont pour abscisses respectives (-2) et 5, le point M est un point libre de la droite d et x est son abscisse.
Remettez-vous si nécessaire en mode Edition, Placez le curseur au bon endroit après le mot repère avec un espace derrière. Dans le menu Insertion, choisissez Avancées puis Contrôle ActiveX. Choisissez EcritMath.EcritMathCtl. Ouvrez la fenêtre de propriétés par un double click sur l'instance du contrôle. Inutile de changer le nom dont on ne se sert généralement pas, en revanche il faut régler l'alignement à Milieu absolu. Utilisez l'onglet Paramètres et ouvrez par double-click sur Expression la fenêtre qui va vous permettre d'entrer l'expression justement : dans la ligne Données écrivez (\O\,\vec(i)\) et appuyez sur OK deux fois. Recommencez pour l'égalité vectorielle qui définit I en écrivant cette fois \vec(O,I)\=\vec(i)\.
Nous avons écrit pour vous la question 1 mais vous pouvez essayer de l'écrire vous-même...

Question 1 : Placer le point M pour que .
Il faut maintenant créer trois boutons. Ce sont des boutons de commande ordinaires (INPUT) que vous trouverez dans sous-menu Formulaire du menu Insertion. En double-cliquant sur le bouton, ouvrez une fenêtre qui vous permettra de lui donner un nom et une Valeur/Etiquette (value dans le code html). Choisissez Graduer comme nom (utilisé ensuite dans la programmation) et Graduer d comme value. Faire de même le bouton de nom AfficherX et de value Afficher x, et le troisième de nom Tester et de value Tester la position de M.

Vous devez maintenant avoir vos trois boutons. Faisons les scripts.

Voici celui du bouton Graduer:

<script language="VBScript"><!--

Sub Graduer_onclick
Figure.ExecuteLigne "Objet dessinable d, particularités: gris foncé"
Figure.InfoEtBoutons "La droite d est maintenant graduée de 1 en 1."," Graduer d","Ok"
Graduer.enabled=false
end sub

--></script>

Vous devez le taper tel quel dans votre code html (ne le recopiez pas directement par copier-coller depuis cette page car le codage html donne des scories, mais on peut fonctionner par copier-coller de code html à code html, ou par copiage en passant par l'aperçu).
Il doit être placé entre <BODY> et </BODY> à peu près n'importe où.
L'encadrement obligatoire par <script language="VBScript"></script> peut contenir plusieurs procédures. Regardez nos exemples, nous regroupons souvent toutes les procédures en tête du code html.
Pour avoir des explications sur l' instruction ExecuteLigne regardez les pages d'aide.
InfoEtBoutons permet d'afficher un texte dans une fenêtre contenant ici un bouton OK (on peut mettre plusieurs boutons mais nous n'en parlerons pas ici).
Graduer.enabled=false sert à désactiver le bouton Graduer une fois qu'il a servi.

De même pour le deuxième bouton qui contient un ExecuteLigne avec plusieurs lignes à exécuter (vous pouvez copier-coller depuis la page grug1.html):

Sub AfficherX_onclick
Figure.ExecuteLigne "Hauteur de la zone des affichages: 20"+chr(13) _
+"Af0 affichage du scalaire x (2 décimales)"+chr(13) _
+"Objet dessinable Af0, particularités: rose"+chr(13) _
+"Position de l'affichage Af0: (300,0)"
end sub

Ce script est à placer entre <script language="VBScript"></script> (si vous voulez à la suite du script précédent)

Le troisième bouton va déclencher une procédure de test qui comparera la position de M à la solution de l'exercice, créée par programmation et cachée comme on peut le voir (M749 est non dessiné), puis supprimée par programmation. Comme précédemment, les possibilités des tests ne peuvent être détaillées ici mais une page d'aide en donne tous les détails.

Sub Tester_onclick
Figure.ExecuteLigne "M749 point d'abscisse -3.5 dans le repère d"+chr(13) _
+"Objet dessinable M749, particularités: non dessiné"
T=Figure.TestParTexte( "Teste égalité des valeurs de M et M749 (tolérance: 1)")
if T=0 then message ="Exact" else message="Faux"
Figure.InfoEtBoutons message,"Test de la position de M","Ok"
Figure.ExecuteLigne "Supprimer M749"
end sub

Vous avez fait maintenant la plus grosse partie du travail, et vous pouvez essayer de vous mettre en position d'élève pour placer le point M et tester sa position.

Passons à la question 2.

Question 2 : A chaque point M de d, on associe N tel que . Créer N dans la figure.
Exercez vous à écrire l'égalité vectorielle vous-même dans un EcritMath.
Créez les deux boutons (ou gardez ceux-ci si vous estimez que c'est une tâche que vous savez faire).

Les scripts de ces boutons sont à écrire dans le code html:

Sub Aide_onclick
message="N est l'image de M par une translation"+chr(13) _
+"de vecteur \vec(u)\ à déterminer."+chr(13)+" "
Figure.InfoEtBoutons message,"Aide pour N","Ok"
end sub

Remarquez la présence des antislashs autour de vec(u) pour l'écriture mathématique des vecteurs.

Sub TesterN_onclick
Figure.ExecuteLigne "N654 point d'abscisse 4x+3.5 dans le repère d"+chr(13) _
+"Objet dessinable N654, particularités: non dessiné"
T=Figure.TestParTexte("Teste égalité de N et N654")
if T = 0 then
    message="Exact"
elseif T=51 then
     message="Construire un point N !"
elseif T=53 then
    message="Juste pour la position actuelle de M"+chr(13) _
   +"mais pas pour toutes les positions de M."+chr(13) _
   +"Corriger."
else
   message="Faux"
end if
Figure.InfoEtBoutons message,"Test de N","Ok"
Figure.ExecuteLigne "Supprimer N654"
end sub

N654 est la solution, créée par programmation, non dessinée, et supprimée ensuite. On teste l'égalité entre N et N654.
Les codes renvoyés par la procédure de tests sont expliqués dans le document d'aide déjà cité.
Ici 0 signifie que N=N654
    51 signifie qu'il n'y a pas d'objet N dans la figure testée,
    53 signifie que l'égalité par valeur est vérifiée mais pas celle avec agitation des variables (autrement dit le point N est bien placé pour la position actuelle de M mais il n'est pas construit à partir de M et si on déplace M, qui est libre, N ne "suivra pas".

Essayez votre programmation avant de passer à la suite.

Passons à la troisième question. Elle va traiter des possibilités de communication de données numériques entre la figure et la page html.

Une figure complète est fournie (nom Figure1), avec le point N et une variable lg, longueur du segment MN. On aurait pu créer cette variable par programmation dans la figure du début (de nom Figure) après s'être assuré que l'élève a bien créé le point N mais nous avons préféré rester simples.
Vous pouvez supprimer cette figure et vous exercer à en remettre une. Respectez le nom Figure1 utilisé dans les scripts des boutons.

Question 3 : lorsque M varie sur la droite d, la longueur MN varie aussi.
Déplacer le point M et observer les valeurs de MN. MN » Vous allez insérer ici un signet (menu Insertion). Donnez-lui le nom ValeurMN.
Il faut faire un script pour écrire dans ce signet la longueur MN en l'actualisant à chaque modification de N.

Sub Figure1_EventMobileBougeGP(ByVal Numero)
LongueurMN=Figure1.ValeurScalaireDoubleGP(Figure1.NumeroFigure, "lg")
ValeurMN.InnerText=FormatNumber(LongueurMN,2)
end sub

L'événement EventMobileBougeGP est déclenché dès qu'il y a un changement dans la figure (ici Figure1). La procédure récupère cet événement et la méthode ValeurScalaireDoubleGP permet de récupérer la valeur de la variable lg et de la faire afficher dans le signet ValeurMN (en la formatant à deux décimales).

Passons à la suite qui demande une réponse numérique à l'élève, réponse que l'on veut récupérer et tester.
Déterminer une valeur de x pour laquelle MN = 0 : x = Insérez ici un contrôle EcritMath, (mode Edition, menu Insertion, Avancées, ContrôleActiveX, EcritMath.EcritMathCtl). Ouvrez la fenêtre des Propriétés, changez le nom (FPourX) et l'alignement (Milieu Absolu). Appuyez sur l'onglet Paramètres. Vous allez modifier Expression (écrivez ? dans la ligne de Données) AntiSlashParDLL est à mettre à True en écrivant -1 à la place de 0 dans la ligne de Données et ExpressionModifiable est à mettre à True de la même façon. Ce contrôle EcritMath ainsi conditionné permet l'entrée d'une expression, sans nécessité de mettre des Antislashs puisque ceux-ci seront ajoutés automatiquement. Cette expression sera récupérable pour un test.
(Double-cliquer sur le point d'interrogation pour proposer une valeur.)
Exercez-vous à créer ce bouton vous-même si vous voulez en l'appelant TesterX. Insérez son script:

sub TesterX_onclick
If FPourX.Expression="?" then
    message="Donnez une valeur de x."
Else
   Figure1.ExecuteLigneSansDessiner "c1="+FPourX.Expression
   Figure1.ExecuteLigneSansDessiner "c2=-7/6"
   T=Figure1.TestParTexte "Teste égalité des valeurs de c1 et c2")
    if T=0 then message="exact" else message="faux"
End if
Figure1.InfoEtBoutons message,"test de x","Ok"
end sub

Remarquez que cette fois les procédures font référence à Figure1.
Après une précaution pour le cas où l'utilisateur demanderait le test avant de donner une valeur de x, on crée par programmation une variable c1 égale à ce que l'élève a écrit dans l'EcritMath (que l'on récupère dans la propriété Expression du contrôle EcritMath FPourX), on crée la solution c2 et on teste l'égalité de c1 et c2 (égalité des valeurs puisqu'il n'y a pas de variables ici).

Enfin, on fournit à l'élève une zone pour écrire sa démonstration (qui ne sera pas testée). C'est un contrôle EcritMath dans lequel Expression vaut Démonstration, AntiSlashParDLL est à false (0) et ExpressionModifiable est à true (-1). L'élève pourra y écrire un texte de plusieurs lignes, contenant des écritures mathématiques écrites avec la même syntaxe que dans Geoplan (et les même boutons pour les écrire), les expressions à dessiner devant être mises entre antislashs. Une aide est accessible. Il ne faut pas oublier d'utiliser le bouton Appliquer pour refermer la fenêtre d'édition.

Ecrire la démonstration ci-dessous (double-cliquer sur le mot démonstration).

Exercez-vous à créer ce contrôle (le fond bleu est obtenu en mettant le paramètre BackColor à 15780518..

Vous pouvez maintenant nettoyer ce document de tout ce qui est écrit en bleu, l'enregistrer (sous un autre nom si vous voulez conserver celui-ci) le comparer au document grug1 et l'essayer en position d'élève.

Il resterait à améliorer la présentation. Comme vous pouvez le voir dans les différents exemples proposés, on peut mettre des couleurs (avec parfois des surprises quand on passe d'une machine à l'autre) et soigner la mise en page. Mais ce n'est pas le plus difficile. Ce qui demande le plus de temps c'est de trouver des bons exercices, de poser des bonnes questions et surtout de faire une analyse pertinente des réponses, prévoir les erreurs les plus courantes, se donner les moyens de les repérer, fournir les bonnes aides etc. Il faut être modeste au début car la création d'un didacticiel est une tâche qui devient très vite difficile à gérer.