Mathématice, intégration des Tice dans l'enseignement des mathématiques  
Sommaire > N°71 - Septembre 2020 > Présentation interactive de documents

Présentation interactive de documents
Moteur de recherche
Mis en ligne le 17 mai 2020, par Alain Busser

Le court texte ci-dessous fait un peu peur. Mais essayez de cliquer-glisser (to drag) les informations numériques pour faire des expériences encore plus effrayantes :

En 2018 il y avait 408 ppm (parties par million) de CO2 dans l'atmosphère terrestre. Si on continue à l'augmenter de % par an, à ce train-là en l'an on arrivera à ppm de CO2 dans l'atmosphère !

Employé par Apple, Bret Victor est le principal promoteur de la lecture active. Celle-ci permet au lecteur de modifier les données numériques (et autres) du rapport afin de se livrer à des expériences du genre « et que se passerait-il si on modifiait telle variable ? ».

Créé il y a une dizaine d’années par Bret Victor, le module tangle.js permet de produire des documents basés sur la lecture active, avec une facilité qui rend cette technologie accessible à des élèves, notamment des sections technologiques et professionnelles. Le nom de tangle fait allusion au paradigme modèle-vue-contrôleur (on relie par un tangle les modifications des variables, et leur affichage), selon cette correspondance :

en MVC modèle vue contrôleur
dans Tangle fonction JavaScript data-var de classe TK data-var dans html
compétences modéliser représenter communiquer

La présentation qui ouvre cet article ne donne a priori que très peu d’informations : En 2018 il y avait 408 ppm de CO2 et cela correspond à une augmentation annuelle de 0,43 pour cent. Un modèle exponentiel (par une suite géométrique) prévoit alors qu’en l’an 2065 on en arrivera à 500 ppm. Mais en fait il y a bien plus d’informations dans ce document. Par exemple en modifiant l’année d’examen, on apprend que selon le même modèle climatologique on arrivera à 0,1% de CO2 dans l’atmosphère, en 2227. On peut même modifier le pourcentage d’augmentation annuelle pour explorer d’autres modèles climatologiques et ainsi se faire une idée par la manipulation, de l’influence des différents paramètres. Voici quelques avantages de cette façon de présenter :

  • La lecture n’est pas passive (au risque de relâcher l’attention) mais active donc mieux adaptée aux élèves kinesthésiques (mémorisation par le geste).
  • Du fait qu’il y a moins de chiffres visibles en même temps à l’écran, il est plus facile de repérer sinon toutes les informations chiffrées dans le texte, du moins les plus pertinentes.
  • Faire varier les paramètres permet de conceptualiser leur importance et la manière dont ils influencent les résultats. C’est le principe des jeux sérieux qui permettent d’abstraire à partir de l’observation des effets de diverses manipulations.
  • Certaines formes de dyslexie empêchent de trouver une information si, pour cela, il faut déplacer le regard (typiquement pour trouver un élément d’une matrice à partir d’une ligne et d’une colonne). Avec Tangle, les informations sont géométriquement proches les unes des autres et cela permet de les embrasser du regard sans les efforts qui peuvent décourager ces dys.

Dans cet article on se propose de montrer comment a été fait le document de l’entête.

Modéliser

On modélise le taux annuel de CO2 par une suite géométrique, comme semblent le suggérer les relevés depuis l’ère industrielle :

Alors, avec comme valeur initiale VI=408 et comme raison (ou coefficient multiplicateur) CM=1,0043, la quantité de CO2 au bout d’une durée ans est VI×CMans. Les quantités qui interviennent ici seront toutes des variables appartenant au Tangle, et leurs noms seront préfixés par this. Voici les étapes du calcul, regroupées en une fonction update (appelée à chaque fois qu’une mise à jour de l’affichage est nécessaire) :

  1. update: function () {
  2.                 this.taux = this.pourcent/100;
  3.                 this.CM = 1 + this.taux;
  4.                 this.ans = this.an - 2018;
  5.                 this.VI = 408;
  6.         this.ppm = this.VI*Math.pow(this.CM,this.ans);
  7.             }

Télécharger

La variable ppm joue un rôle particulier : elle est en quelque sorte à l’extrémité du Tangle et c’est celle dont l’affichage est mis à jour à chaque fois que quelque chose a changé (une autre variable par exemple). À l’origine du Tangle se trouvent deux variables que le lecteur actif peut modifier : pourcent et an. Ces variables doivent donc être, au chargement de la page, initialisées, par cette fonction :

  1. initialize: function () {
  2.         this.pourcent = 0.43;
  3.         this.an = 2065;
  4.            }

Télécharger

Dans le jargon de Tangle, le modèle est un objet formé par ces deux fonctions :

  1. var CO2_model = { initialize,  update};

En détail

  1. var CO2_model = {
  2.     initialize: function () {
  3.         this.pourcent = 0.43;
  4.         this.an = 2065;
  5.            },
  6.     update: function () {
  7.                 this.taux = this.pourcent/100;
  8.                 this.CM = 1 + this.taux;
  9.                 this.ans = this.an - 2018;
  10.                 this.VI = 408;
  11.         this.ppm = this.VI*Math.pow(this.CM,this.ans);
  12.             }
  13. };

Télécharger

Un Tangle est aussi un objet, associé à un élément html (ici, le document entier) et un modèle :

  1. var CO2tangle = new Tangle(document,CO2_model);

Avec les liens vers tous les scripts du kit tanglekit, ce petit code JavaScript suffit à créer un Tangle. Pour le voir, ce sera l’affaire de html.

Communiquer

Pour la partie  vue on crée un élément html auquel on donne la propriété data-var avec, comme valeur, le nom de la variable à afficher. Pour un affichage directement dans le texte, Bret Victor propose un span :

<span data-var="ppm" data-format="%.0f"> ppm</span>

Cette partie de la page affiche la valeur de la variable ppm. En plus on a formaté cet affichage, en représentant 0 chiffre après la virgule (c’est-à-dire qu’on arrondit à l’entier, toujours pour faciliter la lecture).

Dans le contexte

Voici l’intégralité du paragraphe, avec les variables :

  1. <p>En 2018 il y avait 408 ppm (parts par million) de CO<sub>2</sub> dans l'atmosphère
  2. terrestre. Si on continue à l'augmenter de
  3. <span data-var="pourcent" class="TKAdjustableNumber" data-min="0" data-max="1" data-step="0.01" data-format="%.2f"> % </span>
  4.  par an, à ce train-là en l'an
  5. <span data-var="an" class="TKAdjustableNumber" data-min="2020" data-max="3000"> </span>
  6. on arrivera à
  7. <span data-var="ppm" data-format="%.0f"> ppm</span> de CO<sub>2</sub> dans l'atmosphère !
  8. </p>
  9.  

Télécharger

En dehors du JavaScript, il n’y a vraiment rien d’autre que cela dans le document interactif !

Représenter

Pour permettre au lecteur de modifier une variable, c’est comme pour la partie communiquer (il faut bien l’afficher, cette variable !). Mais on lui donne une classe Css comme TkAdjustableNumber (pour avoir un nombre ajustable du Tangle Toolkit) comme

  1. <span data-var="an" class="TKAdjustableNumber"
  2. data-min="2020" data-max="3000"> </span>

Télécharger

En fait on a représenté ainsi un intervalle d’entiers. Il a donc fallu également fournir des valeurs aux propriétés

  • data-min : la valeur minimale que peut prendre la variable ;
  • data-max : la valeur maximale que peut prendre la variable.

La variable pourcent n’est pas un nombre entier, donc on lui donne aussi un data-step :

  1. <span data-var="pourcent" class="TKAdjustableNumber"
  2. data-min="0" data-max="1"
  3. data-step="0.01" data-format="%.2f"> % </span>

Télécharger

Le source complet

Voici l’intégralité du document précédent, JavaScript compris :

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.  
  5.     <script type="text/javascript" src="http://worrydream.com/Tangle/Tangle.js"></script>
  6.  
  7.     <link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css" type="text/css">
  8.     <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script>
  9.     <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script>
  10.     <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script>
  11.     <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script>
  12.  
  13. </head>
  14.  
  15. <body>
  16. <p>En 2018 il y avait 408 ppm (parts par million) de CO<sub>2</sub> dans l'atmosphère
  17. terrestre. Si on continue à l'augmenter de
  18. <span data-var="pourcent" class="TKAdjustableNumber" data-min="0" data-max="1" data-step="0.01" data-format="%.2f"> % </span>
  19.  par an, à ce train-là en l'an
  20. <span data-var="an" class="TKAdjustableNumber" data-min="2020" data-max="3000"> </span>
  21. on arrivera à
  22. <span data-var="ppm" data-format="%.0f"> ppm</span> de CO<sub>2</sub> dans l'atmosphère !
  23. </p>
  24.        
  25. <script type="text/javascript">
  26. var CO2_model = {
  27.     initialize: function () {
  28.         this.pourcent = 0.43;
  29.         this.an = 2065;
  30.            },
  31.     update: function () {
  32.                 this.taux = this.pourcent/100;
  33.                 this.CM = 1 + this.taux;
  34.                 this.ans = this.an - 2018;
  35.                 this.VI = 408;
  36.         this.ppm = this.VI*Math.pow(this.CM,this.ans);
  37.             }
  38. };
  39. var CO2tangle = new Tangle(document,CO2_model);
  40.  
  41. </script>
  42. </body>
  43. </html>

Télécharger

Vu comme ça, cela paraît ambitieux pour un devoir à rendre par des élèves, mais on peut très bien leur remettre un fichier comprenant seulement l’entête et le début du JavaScript, et leur demander de compléter le résultat. Voici le fichier html correspondant :

Le document interactif

Pour finir, voici quelques autres exemples à manipuler en ligne, avec leur code source à télécharger pour utilisation locale ou examen du code :

Calcul de vitesse

Un véhicule qui parcourt km en h se déplace à une vitesse de km/h.

Calcul de vitesse

Table de multiplication minuscule

× =.

Toute la table de Pythagore en une ligne

Numération binaire

En binaire, la notation représente le nombre :

  • zéro
  • un
  • deux
  • trois
  • quatre
  • cinq
  • six
  • sept
  • huit
  • neuf
  • dix
  • onze
  • douze
  • treize
  • quatorze
  • quinze

entrée d’un nombre en binaire

Un autre exemple figure dans cet article.


Documents associés à l'article
  Le module Tangle pour intégration à un site web   |   (Zip - 37.2 ko)
Crédits : Bret Victor 2011
Réagir à cet article
Vous souhaitez compléter cet article pour un numéro futur, réagir à son contenu, demander des précisions à l'auteur ou au comité de rédaction...
À lire aussi ici
MathémaTICE est un projet
en collaboration avec
Suivre la vie du site Flux RSS 2.0  |  Espace de rédaction  |  Nous contacter  |  Site réalisé avec: SPIP  |  N° ISSN 2109-9197