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 CO₂ dans l'atmosphère terrestre. Si on continue à l'augmenter de % par an, à ce train-là en l'an on arrivera à ppm de CO₂ 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 :

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 CO₂ 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 CO₂ 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 CO₂ 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 CO₂ au bout d’une durée ans est VI×CM^ans. 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) :

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

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 :

initialize: function () {
        this.pourcent = 0.43;
        this.an = 2065;
           }

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

var CO2_model = { initialize,  update};

var CO2_model = {
    initialize: function () {
        this.pourcent = 0.43;
        this.an = 2065;
           },
    update: function () {
		this.taux = this.pourcent/100;
		this.CM = 1 + this.taux;
		this.ans = this.an - 2018;
		this.VI = 408;
        this.ppm = this.VI*Math.pow(this.CM,this.ans);
            }
};

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

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

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

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

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

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 :

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

<html>
<head>
    <meta charset="utf-8">

    <script type="text/javascript" src="http://worrydream.com/Tangle/Tangle.js"></script>

    <link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css" type="text/css">
    <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script>
    <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script>
    <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script>
    <script type="text/javascript" src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script>

</head>

<body>
<p>En 2018 il y avait 408 ppm (parts par million) de CO<sub>2</sub> dans l'atmosphère 
terrestre. Si on continue à l'augmenter de 
<span data-var="pourcent" class="TKAdjustableNumber" data-min="0" data-max="1" data-step="0.01" data-format="%.2f"> % </span>
 par an, à ce train-là en l'an
<span data-var="an" class="TKAdjustableNumber" data-min="2020" data-max="3000"> </span> 
on arrivera à 
<span data-var="ppm" data-format="%.0f"> ppm</span> de CO<sub>2</sub> dans l'atmosphère !
</p>
        
<script type="text/javascript">
var CO2_model = {
    initialize: function () {
        this.pourcent = 0.43;
        this.an = 2065;
           },
    update: function () {
		this.taux = this.pourcent/100;
		this.CM = 1 + this.taux;
		this.ans = this.an - 2018;
		this.VI = 408;
        this.ppm = this.VI*Math.pow(this.CM,this.ans);
            }
};
var CO2tangle = new Tangle(document,CO2_model);

</script>
</body>
</html>

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.