Mathématice, intégration des Tice dans l'enseignement des mathématiques  
Sommaire > N°48 - janvier 2016 > Création d’un micromonde avec Blockly

Création d’un micromonde avec Blockly
Moteur de recherche
Mis en ligne le 8 janvier 2016, par Alain Busser

L’avantage avec Blockly, c’est qu’on peut préparer une palette d’instructions adaptée à l’activité en cours (palette graphique si on veut faire du graphisme, tortue si on veut faire du graphisme vectoriel, outils statistiques si on veut faire des simulations probabilistes, etc). L’inconvénient avec Blockly, c’est l’obligation de créer soi-même ce genre de micromonde si on en a besoin pour un exercice précis. Dans cet article on va montrer comment on peut créer un micromonde autour du "jeu de poursuite" (jeu de Nim additif) avec Blockly. Voici, manipulable en ligne, un tel micromonde :

Chaque joueur, quand c’est son tour, attrape un des trois blocs de sa couleur, le glisse juste au-dessus de l’affichage, et clique sur le bouton "lancer". Le premier qui ainsi, obtient un affichage supérieur ou égal à 21 gagne le jeu et appelle, tout fier, le prof...

Cet article peut être librement diffusé et son contenu réutilisé pour une utilisation non commerciale (contacter l’auteur pour une utilisation commerciale) suivant la licence CC-by-nc-sa (http://creativecommons.org/licenses/by-nc-sa/3.0/fr/legalcode)

Micromonde ? Vous avez dit micromonde ?

Papert et Kay

Seymour Papert est sud-africain. Né à Pretoria en 1928, il a grandi dans la brousse, ses parents ayant été scientifiques. Enfant, ses camarades de jeu les plus proches étaient des boshimans vivant à des centaines de kilomètres du camp de ses parents. Et, loin de tout commerce et de tout garage, à l’âge où on joue aux petits soldats, il apprenait à changer ou réparer une durite. Ce genre d’épisode a pu le guider vers les théories piagettiennes. Lui-même dit que l’apprentissage prématuré de la mécanique lui a donné le goût de la logique, et lorsqu’il est allé au lycée au Cap, ce fut pour lui la découverte de la vie citadine mais aussi de l’apartheid, qu’il trouvait illogique : « Vous dites qu’ils ont plein de maladies mais vous les employez comme nourrices ; vous dites qu’ils aiment vivre dans la saleté mais vous les engagez pour faire le ménage chez vous », a-t-il dit au proviseur le jour où il a été renvoyé du lycée pour avoir refusé d’appliquer l’apartheid. Socialiste, il est peu probable que Papert eût fait de longues études s’il était resté en Afrique du Sud. Il a étudié à Cambridge puis à Genève où il a rencontré Jean Piaget. Auprès de Piaget, il a appris la théorie constructiviste qui l’a fortement influencé après son retour au MIT. C’est avec Marvin Minsky qu’il a élaboré la théorie des micromondes et le langage Logo. En 2006, à Hanoï, il est gravement blessé dans un accident de la route. Depuis cette date, il utilise des micromondes pour se rééduquer. Il ne sort jamais de chez lui.

Alan Kay est un des étudiants de Papert, auprès de qui il a été vite sensibilisé à l’importance que l’ordinateur peut avoir pour la construction du savoir, en particulier par les micromondes. Il s’est d’ailleurs inspiré de Logo pour créer le langage Smalltalk. C’est lui qui, au Xerox Parc au début des années 1970, a inventé un micromonde fait de fenêtres avec des icônes cliquables dedans... Il a également inventé le concept d’ordinateur portable. Ancien guitariste de jazz et ami personnel de Quincy Jones, il possède un orgue chez lui, dont il joue régulièrement. Son travail sur les fenêtres l’a amené à être employé par Atari puis par Apple, mais en 1982, il est consultant pour Walt Disney lors du tournage de Tron. Là, il rencontre l’actrice Cindy Morgan qui est maintenant Madame Kay. Il a également travaillé pour Walt Disney. Ensuite, il est revenu à Smalltalk avec Squeak qui a servi de plateforme de développement pour Scratch, puis a lancé le projet OLPC. Il dit souvent que « le meilleur moyen de connaître le futur, c’est de l’inventer ». Et c’est ce qu’il fait...

La notion de micromonde est dûe à Seymour Papert et Marvin Minsky, deux chercheurs en IA qui ont été les premiers à considérer que l’ordinateur pouvait aider l’enfant à apprendre. Mais pour cela, selon Papert :

Dans bien des écoles aujourd’hui, « enseignement assisté par ordinateur » signifie que l’ordinateur est programmé pour enseigner à l’enfant. On pourrait dire que l’ordinateur sert à programmer l’enfant. Dans ma vision des choses, l’enfant programme l’ordinateur et, ce faisant, acquiert la maîtrise de l’un des éléments de la technologie la plus moderne et la plus puissante, tout en établissant un contact intime avec certaines des notions les plus profondes de la science, des mathématiques, et de l’art de bâtir des modèles intellectuels

Seulement pour programmer l’ordinateur il faut un environnement d’apprentissage. C’est cela que Papert et Minsky ont appelé "micromonde". Le premier exemple de micromonde était l’environnement de programmation Logo, mais il y eut aussi CaBri, puis Scratch. Seulement Scratch n’est pas si "micro" que ça avec ses dizaines d’instructions qui ne sont pas rangées dans un ordre propice aux mathématiques. On peut d’ailleurs faire le même reproche à bloquement décrit ci-après.

Un exemple particulièrement intéressant de micromonde est la palette restreinte de CaRMetal.

Proposition honnête

Il devient donc intéressant pour un enseignant de construire un micromonde adapté à l’exercice qu’il veut faire, et cela est plutôt difficile à faire avec Blockly (alors qu’avec Scratch c’est impossible à faire). Pour cela, certaines techniques décrites ci-après ne sont pas destinées à tous les enseignants, mais plutôt à ceux qui serviront de « ressources TICE » avec l’enthousiaste complicité de leurs IPR, et les micromondes construits par ces ressources pourraient être des documents de stage voire des fichiers associés au manuel numérique des éditeurs intéressés par Blockly.

Pour se faire une idée de ce qui est possible dans la diversité des micromondes, le concours Castor applique ce principe : Un micromonde par exercice, même si plusieurs de ces micromondes parlent de castors...

La construction des micromondes de Blockly se fait par copier-coller de morceaux de textes écrits dans des langues exotiques comme JavaScript, Xml, html. Ce copier-coller est réalisable avec un éditeur de texte (un logiciel spécialisé dans ce genre de manips). Il existe de nombreux éditeurs de texte, parmi les plus connus, il y a nano, Vim, Emacs, leafpad, Gedit, Wordpad, notePad++, Smulltron... Ici c’est Geany, logiciel libre multiplateforme, qui a été utilisé.

Un exemple de micromonde Blockly

Tout d’abord, voici un exercice sur les fonctions affines, issu des "démos" de Blockly :

Le but de l’exercice est de programmer une fonction affine, ainsi que le précise l’énoncé :

« Un avion a deux sièges dans le poste de pilotage (pour le pilote et le copilote), et un certain nombre de rangées de sièges passager. Chaque rangée contient quatre sièges.

Construire une formule (ci-dessous) qui calcule le nombre total de sièges dans l’avion quand le nombre de rangées est modifié (ci-dessus). »

Ce micromonde vole donc haut... Il est formé de deux sortes d’objets :

  • les instructions disponibles, dans la zone grise à gauche (constantes, opérations, et la variable "rangées") ;
  • une unique instruction qui fait partie du programme (à droite), et qui est une affectation de la variable "sièges" :

Algèbre dans Blockly

Pour programmer correctement la fonction affine, on a besoin de l’addition (à cause de l’ordonnée à l’origine) et de la multiplication (à cause du coefficient directeur) :

Mais chacune de ses opérations propose le choix entre deux modes d’affichage : En ligne (comme ci-dessus), ou "entrées externes". Pour choisir, on clique droit sur l’opération et on coche l’option choisie dans le menu qui se déroule alors. Si on choisit systématiquement l’option "entrées externes", on voit l’expression algébrique sous forme d’un arbre syntaxique :

Pour montrer comment fonctionne Blockly, il faut prendre un exemple de micromonde ; il y en a bien un ici mais ce "Blockly officiel" est en anglais [1]. En lieu et place, on propose cet interpréteur Sophus, qui est un Blockly "spécial maths" en français.

Zip - 194.7 ko

Une fois téléchargé et décompressé, le dossier obtenu contient des dossiers et un fichier html :

Pour démarrer le logiciel, il faut double-cliquer sur ce fichier html (à droite sur la copie d’écran ci-dessus). On a alors l’univers classique de Blockly (sauf qu’il y a du Sophus dedans) : Des outils ("blocs") à gauche, sur fond gris, organisés dans une structure arborescente de menus, un plan de travail au milieu, qui est l’endroit où on va construire le programme en alignant des blocs, et une fenêtre JavaScript totalement inutile dans un premier temps :

En fait, il y a déjà un programme apparent au démarrage [2]. Si on préfère démarrer sur une page blanche ("from scratch" comme on dit outre-atlantique), il suffit d’attraper avec la souris, le premier bloc en haut à gauche ("fixer c à 0"), puis le faire glisser jusqu’à la poubelle en bas à droite, et hop, on a une page vierge. Le menu à gauche est riche et complet, mais la partie tout en bas de ce menu est un peu éloignée du reste, parce qu’elle n’est pas indispensable pour des activités numériques. La partie consacrée à Sophus est, elle, prise en sandwich entre l’indispensable pour démarrer (en haut) et les structures classiques de programme (en bas ; les maths sont rangées avec les structures classiques !).

Supposons qu’on veuille utiliser Blockly comme calculatrice, et qu’on ne se rappelle plus combien font 8 fois 7 (toute ressemblance avec un élu est purement fortuite). On peut écrire un programme d’une seule ligne demandant l’affichage de 8×7. Comme il s’agit d’un affichage, on clique sur l’option "entrées-sorties" du menu de gauche ; on y trouve, en seconde position, l’affichage :

En glissant ce bloc vers la zone de travail, on démarre la construction du programme. Seulement, pour aller vite, Sophus intègre des exemples fonctionnels, ici l’affichage est par défaut, celui de la variable element. Or ce n’est pas une variable que l’on veut afficher, mais le résultat d’un calcul. On doit donc commencer par faire glisser le bloc mauve (couleur des variables dans Blockly) vers la poubelle, afin de ne laisser que l’affichage. Pour ce qui est de la multiplication, c’est une opération (et pas une constante ni une fonction) et on va donc la chercher dans le menu des opérations mathématiques :

Pas de multiplication ; mais le premier bloc comprend un menu déroulant qui permet de remplacer l’addition par la multiplication :

On constate en passant que le simple fait d’avoir sélectionné l’option "×" du menu, a eu pour effet de placer le bloc dans la zone de travail. Là encore, comme dans Sophus, en général, on multiplie des variables entre elles, il y a déjà des facteurs. Là encore, comme ce sont des constantes qu’on veut multipler entre elles, il faut mettre les deux copies de la variable element à la poubelle. Les constantes sont disponibles dans le menu "constantes" du menu "math" :

La constante par défaut vaut 0, mais en cliquant sur ce 0 on peut modifier sa valeur au clavier, et le remplacer par 7 dans une copie, par 8 dans l’autre. Le programme Blockly est alors fini :

Pour savoir combien font 8×7, il suffit alors de cliquer sur le bouton "Lancer" en bas à gauche, ce qui normalement affiche 56 dans une boîte de dialogue modale.

Pour corser un peu la difficulté, on va refaire le même calcul mais en 3 lignes ; c’est l’occasion de découvrir la notion de variable. Les variables sont si importantes en programmation, que leur menu est tout en haut. Et ce menu est à géométrie variable, puisqu’il contient la liste des variables. Initialement il n’y a qu’une variable element, qui est virtuelle (elle n’existe que dans la boîte à outils, pas dans le programme) :

Comment créer une variable dans Blockly ? Et bien on prend la variable virtuelle, et on la renomme (ou on crée une variable, c’est une autre option du même menu) :

On "fixe" alors la variable (ici appelée nombre, c’est un grand classique des programmes de calcul) à 7, avant de la multiplier par 8. Pour "fixer" une variable, on lui attache une constante (comme on accroche une caravane au bout d’une voiture). Pour multiplier par 8, on peut utiliser Sophus ("transformations"), qui propose de "multiplier element par 2" :

Là c’est magique : Un menu déroulant permet de choisir la variable nombre au lieu de la variable element ; on remplace 2 par 8 au clavier, et il ne reste plus qu’à afficher la variable nombre après tous ces calculs. L’affichage, on a déjà vu comment on le fait. Pour récupérer la variable nombre, on ouvre à nouveau le menu des variables et là, on trouve que ce menu a grandi :

Le programme est maintenant terminé, et là encore un clic sur le bouton "lancer" affiche 56 :

Structure de Blockly

Pour implémenter un micromonde dans Blockly, il faut donc placer

  • un certain nombre d’outils dans la boîte à outils, en gris, ce qui se fait dans la page de travail de Blockly (une "div" appelée "blocklyDiv" et contenant le plan de travail au format graphique svg) et plus précisément dans du xml appelé "toolbox" et rendu invisible pour qu’il n’encombre pas la page ;
  • une ébauche de programme placée dans un autre fichier xml appelé "startBlocks", lui aussi invisible.
  • et éventuellement, des éléments graphiques (le dessin de l’avion ci-dessus par exemple) ou tableaux (voir la bataille navale).

Le problème, c’est que xml est un peu complexe. Aussi a-t-on décidé de rendre invisibles les outils toolbox et startBlocks (pour ne pas traumatiser ceux qui vont regarder la page html). Du coup, c’est à Blockly de les afficher, mais pas sous forme xml, non, sous forme graphique. En plus, se pose la question de la manière dont on peut construire ces fichiers xml. Là, évidemment, on va utiliser ... Blockly lui-même !

Préparer la boîte à outils

afficher le xml

Pour que les xml soient visibles, il faut mettre dans le JavaScript, ceci :

  1. var workspace = Blockly.inject('blocklyDiv',
  2. {media: 'media/',
  3. toolbox: document.getElementById('toolbox')});
  4. Blockly.Xml.domToWorkspace(workspace,
  5. document.getElementById('startBlocks'));

Télécharger

Cela crée une variable workspace obtenue en injectant dans Blockly, la boîte à outils toolbox en tant que boîte à outils, et la traduction de xml vers le workspace ("DOM to Workspace") du programme startBlocks.

Pour éviter d’avoir à partir d’une page html blanche ("from scratch" en anglais), voici un fichier de base contenant ce qu’il faut pour démarrer (c’est un fichier Blockly vide) :

HTML - 1.3 ko

Ce fichier contient, en gros, ce qui a été décrit ci-dessus, et un bouton permettant de lancer le JavaScript qui sera engendré automatiquement par la programmation Blockly. Le fichier contient aussi, en plus des liens vers Blocky et ses dépendances, un lien vers la traduction française de Blockly ; comme ça tout se qui peut s’afficher en français, le sera. Donc récapitulons : Il y a dans le html, un rectangle ("div") de 480 pixels de large et 600 pixels de haut ; ce rectangle s’appelle "blocklyDiv" et contient trois choses invisibles :

  1. la liste, au format xml, des outils disponibles dans le micromonde ;
  2. l’état de départ (avant intervention par l’élève) du micromonde, également au format xml ;
  3. un peu de JavaScript dont l’exécution dessine le micromonde à partir du xml caché, et ce qui se passe lorsqu’on clique sur le bouton "Lancer".

Donc, pour construire le micromonde, il faut connaître la syntaxe des blocs, à moins de laisser Blockly faire le travail, en exportant un programme construit sur une page Blockly permettant l’export, par exemple celle-ci. Donc, que faut-il pour jouer au jeu de la poursuite ?

  • une variable appelée nombre initialisée à 0 (elle sera plutôt dans les starting blocks) ;
  • une fonction d’affichage (elle aussi dans les starting blocks, puisqu’on est censé afficher une seule fois, à la fin) ;
  • une instruction "ajouter 1" qui sera dans la boîte à outils ;
  • une instruction "ajouter 2" elle aussi dans la boîte à outils ;
  • une instruction "ajouter 3" elle aussi dans la boîte à outils.

Mais l’affichage sera attaché à la variable à afficher, et l’initialisation du nombre à 0 se fait elle aussi en y branchant la constante 0.

Tout d’abord, on construit le programme de départ, parce que c’est plus simple : Sur cette page on constate la présence d’une catégorie "Variables" ; en cliquant dessus on voit ceci :

En fait, il n’y a pour l’instant qu’une variable appelée "element" mais virtuelle. Mais on voit un menu déroulant qui permet, à la place de element, de choisir une autre variable, ou plutôt ici, de la créer :

En choisissant cette option, s’ouvre une boîte de dialogue permettant d’entrer le nom de cette nouvelle variable au clavier :

Ceci fait, on dispose maintenant d’un morceau d’instruction :

Pour savoir à quoi fixer cette variable, on cherche une constante (parce que c’est 0 qu’on veut, et que 0 n’est pas une variable), et les constantes sont dans le menu des maths (ci-dessus). Il se trouve que la première constante est par défaut égale à 0 et on n’a donc pas besoin de modifier sa valeur initiale :

Ensuite, il faut afficher la variable nombre. Pour l’affichage c’est dans le menu des entrées-sorties :

Une fois qu’on a décidé d’afficher, reste à voir quoi afficher ; et bien, le menu "variables" contient maintenant une variable de plus :

Il suffit de la sélectionner et l’amener après l’affichage, pour avoir le programme Blockly complet :

La preuve, c’est que si on clique sur le bouton "lancer" en bas à gauche, il se passe quelque chose :

Pas grand-chose : Le programme Blockly demande d’afficher 0 puisque le nombre est resté égal à 0. Et c’est ce qu’il fait, ce programme, afficher 0, et il le fait docilement, à l’instar du savant Cosinus. Maintenant, il y a aussi un bien pratique bouton "sauver" qui est ... salvateur ! Merci à Patrick Raffinat d’avoir mis là ce bouton, il permet de fabriquer automatiquement du Blockly sans avoir à apprendre le Xml ! Voici le fichier obtenu :

Zip - 329 octets

Le Xml obtenu

  1. <xml xmlns="http://www.w3.org/1999/xhtml">
  2. <block type="variables_set" x="-35" y="-11">
  3. <field name="VAR">nombre</field>
  4. <value name="VALUE">
  5. <block type="math_number">
  6. <field name="NUM">0</field>
  7. </block>
  8. </value>
  9. <next>
  10. <block type="text_print">
  11. <value name="TEXT">
  12. <block type="variables_get">
  13. <field name="VAR">nombre</field>
  14. </block>
  15. </value>
  16. </block>
  17. </next>
  18. </block>
  19. </xml>

Télécharger

Ce fichier xml, il suffit de le copier avec un éditeur de texte, puis de coller le résultat dans le fichier html "vierge" proposé ci-dessus, à la ligne 27 (repérable si les numéros de ligne ne sont pas là, par un "commentaire html" disant "placer ici les instructions Blockly préchargées"), pour avoir un micromonde pas désert. Enfin presque : Il ne faut pas copier et coller la première ligne et la dernière, puisqu’elles définissent la structure Xml, et que non seulement cette définition existe déjà dans le fichier html, mais en plus la structure est nommé "startBlocks". De plus, les coordonnées du programme sont un peu fantaisistes, en les remplaçant par des 10 on a un meilleur affichage du programme.

Et pour les outils ? Pareil, on les fabrique avec Blockly et on les exporte en Xml avant de les importer dans le fichier html. Sauf qu’on n’a pas besoin de les coller l’un à l’autre puisqu’ils doivent juste être disponibles. L’outil précédent présente maintenant un inconvénient : Axé en partie sur Sophus, il a été privé de l’instruction mathématique "incrément élément de 1" puisque, par rapport à sophus, elle fait ici double usage. Pour éviter d’avoir à incorporer Sophus, on va donc ... utiliser Sophus ! Plus particulièrement le fichier bloquement disponible dans cet article. Là, on sélectionne dans la catégorie "Math" la fonction "incrémenter de 1" (qui, dans Sophus, s’appelle "ajouter 1 à element") ; pour que l’incrémentation porte sur la variable nombre, il est nécessaire de créer celle-ci comme on l’avait fait précédemment :

Là encore, le bouton d’export est très utile, il crée le fichier suivant :

Zip - 333 octets

La version Xml

  1. <xml xmlns="http://www.w3.org/1999/xhtml">
  2. <block type="variables_set" x="47" y="32">
  3. <field name="VAR">nombre</field>
  4. </block>
  5. <block type="math_change" x="48" y="114">
  6. <field name="VAR">nombre</field>
  7. <value name="DELTA">
  8. <block type="math_number">
  9. <field name="NUM">1</field>
  10. </block>
  11. </value>
  12. </block>
  13. <block type="math_change" x="45" y="181">
  14. <field name="VAR">nombre</field>
  15. <value name="DELTA">
  16. <block type="math_number">
  17. <field name="NUM">2</field>
  18. </block>
  19. </value>
  20. </block>
  21. <block type="math_change" x="44" y="245">
  22. <field name="VAR">nombre</field>
  23. <value name="DELTA">
  24. <block type="math_number">
  25. <field name="NUM">3</field>
  26. </block>
  27. </value>
  28. </block>
  29. </xml>

Télécharger

Cette fois-ci il y a plus à enlever : Outre les première et dernière ligne,superflues, il faut aussi enlever le premier bloc, de définition de la variable (3 lignes suivantes) et ne garder que les trois blocs d’augmentation de n :

  1. <block type="math_change" x="48" y="114">
  2. <field name="VAR">nombre</field>
  3. <value name="DELTA">
  4. <block type="math_number">
  5. <field name="NUM">1</field>
  6. </block>
  7. </value>
  8. </block>
  9. <block type="math_change" x="45" y="181">
  10. <field name="VAR">nombre</field>
  11. <value name="DELTA">
  12. <block type="math_number">
  13. <field name="NUM">2</field>
  14. </block>
  15. </value>
  16. </block>
  17. <block type="math_change" x="44" y="245">
  18. <field name="VAR">nombre</field>
  19. <value name="DELTA">
  20. <block type="math_number">
  21. <field name="NUM">3</field>
  22. </block>
  23. </value>
  24. </block>

Télécharger

Les trois blocs sont de type "math_change" et seule le "math_number" qui est dans leur "field" change de l’un à l’autre (en dehors de leurs coordonnées)

Après avoir enlevé les coordonnées (ici inutiles) des trois blocs d’incrémentation, on insère le xml ainsi produit, dans le fichier html initial (ligne 19, repérée par le commentaire "placer ici les outils au format xml Blockly") pour obtenir le jeu de Nim complet :

HTML - 2.3 ko

Et voilà un micromonde créé ! Voici son aspect avant de commencer le jeu :

Et la structure du fichier, représentée en 3D par l’outil "tilt" de Firefox :

On voit que le "workspace" de Blockly est un rectangle ("div") blanc ; il cache partiellement le bouton "lancer" en bas. Ce rectangle est couvert par des dessins (au format svg), et par la boîte à outils qui est un rectanlge gris. La troisième dimension permet de voir la structure arborescente des blocs et c’est parce que la structure est arborescente, qu’il a fallu passer par Xml.

Astuce : Si les trois blocs sont dans une catégorie (un élement "category" de xml les contient tous les trois), la boîte à outils est plus discrète à l’ouverture, et on gagne une poubelle dans l’affaire.

avantages pédagogiques

Le même jeu à deux sur ordinateur peut être développé dans un autre micromonde, par exemple avec Scratch, un robot à déplacer plutôt que des nombres à additionner. Mais si on essaye de "voir à l’intérieur", on se retrouve avec des menus aussi compexes que complets. Par exemple, des élèves qui programment en Scratch vont vite passer des heures à dessiner leurs propres lutins ou à programmer des boîtes à rythme plutôt que faire des maths. Et s’ils arrivent à s’aventurer assez loin pour voir des maths ("opérateurs"), ils risquent de demander ce que sont ces "ln" et "e^" dans le menu des "racine" :

Didactiquement, cela peut être intéressant : L’élève qui explore un micromonde assez vaste va y passer du temps, mais va aussi avoir tendance à s’approprier les éléments de ce micromonde. L’expérience vaut peut-être la peine d’être tentée ; elle le sera sans doute à très grande échelle vu l’immense promotion de Scratch que fait le ministère dans la rédaction des programmes [3]. Il sera intéressant d’en ananlyser les retours.

Pour Papert, il est important que l’apprenant puisse créer ou modifier son micromonde. Ce qui est permis par une partie du menu (de Sophus par exemple) qu’on n’a pas encore utilisée jusqu’ici : La fabrique, qui permet d’élargir le vocabulaire de Blockly, et définissant des nouveaux mots correspondant à de nouveaux concepts. Les jeux "tortue" et "movie" des jeux Blockly en sont également dotés, mais leur version française est mal orthographiée, le mot "for" ayant été traduit par "à" au lieu de "pour".

Création de blocs dans Blockly

Là encore, on va utiliser bloquement pour faire des blocs, parce que celui-ci est doté d’une catégorie "Fabrique" qui permet de fabriquer des blocs. Cette fabrique ressemble à ceci :

Le second bloc est une fonction, puisqu’elle "retourne" quelque chose. Le premier bloc, au contraire, est une instruction. La distinction n’est d’ailleurs pas importante, puisqu’on peut toujours modifier l’un des deux pour avoir l’autre. On choisit donc le premier, qui s’appelle pour l’instant "faire quelque chose", et qu’on va renommer plus1 (à l’aide du clavier) :

On voit que la variable nombre a été créée (mais non initialisée), c’est nécessaire pour qu’on puisse définir l’instruction plus1 qui va avoir pour effet de modifier nombre (en lui ajoutant 1), et ceci ne peut se faire que si nombre existe.

Note : Dans Blockly comme dans Scratch, toutes les variables sont globales.

Qu’on se le dise, qu’on aime ou pas, c’est comme ça. Cela empêche de faire de la programmation objet, mais c’est pratique pour le calcul parallèle. Ceci explique peut-être cela (la présence de calcul parallèle dans le programme).

C’est le moment de définir plus1, cela se fait en programmant, à l’intérieur du bloc en cours de définition, en Blockly ; ici, pas grand chose à faire, on ajoute 1 à la variable globale nombre :

Attention : Ce n’est pas l’augmentation de Sophus, mais celle des maths de Blockly ("incrémenter de 1" dans la version classique) : On ne veut pas être obligé d’importer tout Sophus dans le micromonde, alors on reste sur les blocs classiques.

Une fois ce bloc défini, il est présent dans la boîte à outils, dans le menu Fabrique :

La suite est très rapide : On effectue un clic droit sur le bloc qu’on vient de définir, et on choisit l’option "dupliquer", ce qui nomme automatiquement "plus2" le nouveau bloc, il suffit alors de modifier l’incrément au clavier, puis de dupliquer le nouveau bloc pour créer automatiquement "plus3" :

La boîte à outils du micromonde désiré est déjà là, telle qu’on la veut, dans le menu "fabrique" :

L’étape suivante est d’exporter tout ça, et d’en extraire le fichier Xml pour le placer dans le fichier Blockly en cours de construction. Mais seuls les 3 outils ci-dessus doivent figurer dans la boîte à outils, le reste (définition des 3 blocs et création/affichage) devant être dans l’espace de travail. Et là on a un problème : Les définition des trois blocs encombrent l’espace de travail. Solution : Leur donner une abscisse plus grande (600 ici) et une ordonnée négative (-100). Blockly refuse de les cacher complètement (après tout c’est un logiciel libre, et ça ne se fait pas, de cacher quelque chose, dans un logiciel libre). Mais en haut à droite, l’encombrement est plus réduit.

Voici le résultat obtenu :

HTML - 3.1 ko

L’aspect d’une partie du jeu, en cours de jeu, est meilleur qu’avec la version précédente :

Mais il reste l’inconvénient des définitions de blocs, et on ne peut pas réellement élargir le micromonde puisque la définition des blocs ne se fait qu’avec ce que permet Blockly.

Création de blocs avec Blockly

Pour faire encore mieux, on peut carrément créer des blocs personnels, que les créateurs de Blockly n’avaient pas imaginés ("plus1", "plus2" et "plus3"). Dit comme ça, ça fait un peu peur, mais on va utiliser l’outil de création de blocs qui est lui-même, évidemment, programmé en Blockly !

L’outil est impressionnant (il est puissant aussi) :

On reconnaît l’interface de Blockly sur la gauche (mais les outils sont spéciaux, ils ne concernent plus la programmation mais la fabrication de blocs ; en fait on est là dans un micromonde de programmation de Blockly lui-même !). Au fur et à mesure que l’on modifie le bloc en cours de création, son aspect est mis à jour en temps réel, en haut à droite (pour l’instant il est tout noir et vide), et sa définition en JavaScript est mise à jour en bas à droite : Quand on aura fini il ne restera plus qu’à copier-coller le résultat dans la partie JavaScript du fichier html. En fait il y a aussi la génération de code, invisible sur la copie d’écran ci-dessus, dont on aura besoin aussi ; et celle-là, il faudra la programmer en JavaScript. Mais ce ne sera pas très difficile avec l’exemple choisi (une ligne de JavaScript).

La première chose à changer c’est le nom du bloc : On remplace "math_foo" par "plus1", au clavier :

Là se pose un problème ... bloquant : Si on essaye d’insérer du texte (menu "field") dans l’espace de la deuxième ligne, on ne peut pas, le bloc refuse tout ce qui n’est pas une entrée. Mais ici, on n’a pas besoin d’entrée, et on doit mettre le texte dans une entrée dont on ne veut pas. Pour cela, Blockly possède une entrée factice ("dummy input") :

Dans cette entrée factice (et pas directement dans le bloc externe), on peut maintenant brancher du texte :

On voit qu’outre du texte, il y a plein d’autres choses qui peuvent être placées dans des blocs ; l’entrée angulaire par exemple sera utilisée plus bas, de façon assez surprenante (pour définir la couleur).

Une fois qu’on a mis du texte dans l’entrée factice, ce texte apparaît dans le bloc (toujours en noir, en haut à droite) :

Pour l’instant on ne peut pas encore faire grand-chose avec ce bloc, parce qu’il ne peut être assemblé avec d’autres blocs : Pour pouvoir l’assembler avec des blocs situés à sa gauche et sa droite, il faut ajouter une entrée à droite et le considérer lui, comme une entrée d’un autre bloc. Ce n’est pas ce qu’on veut faire ici, mais on voudrait pouvoir fabriquer un programme, donc créer des connections en haut et en bas. Inutile donc de toucher au menu des centrées mais celui des connections contient l’option "en haut et en bas" :

En choisissant cette option, on voit en haut à droite que le bloc a pris un aspect classique de bloc :

Le bloc est maintenant presque fini, il reste juste à lui donner une couleur ; ceci se fait en en choisissant une dans le menu des couleurs, en bas :

Au cas improbable où on ne trouverait pas son bonheur dans cette palette, chaque couleur est représentée par un angle allant de 0° (pour le rouge) à 360° (pour le rouge à nouveau) ; c’est la valeur angulaire de la teinte dans le modèle Teinte Saturation Valeur, teinte repérée par un angle dans le cercle chromatique. Ceci dit, la couleur bleue traditionnellement affectée aux maths dans Blockly, est disponible dans la palette ; en la branchant sur l’entrée "couleur", on obtient un joli bloc bleu :

Le bloc est maintenant terminé, et on n’a plus qu’à l’exporter. Pour cela, on se rappelle qu’il y a deux scripts en JavaScript, engendrés dans la partie droite de la fabrique ; le premier est la définition, en JavaScript, du bloc, et a pour effet d’injecter la définition du bloc dans Blockly. Voici le code obtenu :

  1. Blockly.Blocks['plus1'] = {
  2. init: function() {
  3. this.appendDummyInput()
  4. .appendField("+ 1");
  5. this.setPreviousStatement(true);
  6. this.setNextStatement(true);
  7. this.setColour(230);
  8. this.setTooltip('ajouter 1');
  9. this.setHelpUrl('');
  10. }
  11. };

Télécharger

Ce code doit être placé dans une balise "script" du fichier html, par exemple celle où se trouvent déjà les fonctions décrites plus haut (injecter les outils dans la boîte à outils, le programme "startBlocks" dans la page de travail et faire un peu de programmation évènementielle. Il reste une dernière étape pour que le bloc fonctionne : Dire quelle ligne de JavaScript doit être ajoutée au programme "compilé" lorsqu’on ajoute ce bloc dans le programme. Cela se fait au clavier, mais la ligne est juste "nombre += 1" donc on écrit une fonction JavaScript qui renvoie cette chaîne de caractères (soit, un programme en JavaScript, qui écrit un programme en JavaScript) :

  1. Blockly.JavaScript['plus1'] = function(block) {
  2. var code = 'nombre += 1;';
  3. return code;
  4. };

Télécharger

Avec un peu de copier-coller-modifier, on a vite fait d’avoir les autres blocs "plus2" et "plus3" ; voici le résultat obtenu, à consulter avec un éditeur de texte, ou tout simplement à tester :

HTML - 2.9 ko

Enrichissement du micromonde

En partant du fichier engendré ci-dessus, avec 3 blocs "plus1", "plus2" et "plus3", on peut

  • renommer ces blocs en "Aplus1", "Aplus2" et "Aplus3", pour qu’ils soient utilisés par le joueur A ;
  • les copier en "Bplus1", "Bplus2" et "Bplus3" qui produisent le même JavaScript (par exemple "nombre += 2") mais qui n’ont pas la même couleur (teinte nulle pour qu’ils soient rouges).

Ainsi, le micromonde est plus adapté à un jeu où chaque joueur se rappelle à chaque instant si c’est son tour, et où le prof peut voir au premier coup d’œil le déroulement de la partie :

C’est, à peu de choses près, le résultat de ces modifications qui a été montré au début de cet article :

HTML - 4 ko

icônes

Pour rajouter des images, il suffit de glisser l’étoile (image exemple) de la fabrique à la suite du texte dans l’entrée factice. Une fois qu’on a créé un dossier "img" contenant une photo de 32 pixels sur 24, appelée "graine1.png", on peut modifier ainsi la définition du bloc :

  1. Blockly.Blocks['plus1'] = {
  2. init: function() {
  3. this.appendDummyInput()
  4. .appendField("+ 1")
  5. .appendField(new Blockly.FieldImage("./img/graine1.png", 32, 24, "*"));
  6. this.setPreviousStatement(true);
  7. this.setNextStatement(true);
  8. this.setColour(230);
  9. this.setTooltip('le joueur A ajoute 1 graine');
  10. this.setHelpUrl('');
  11. }
  12. };

Télécharger

On le voit, les "fields" s’enchaînent les uns derrière les autres, et on peut insérer des images entre des morceaux de texte. Même des images au format "gif animé" s’affichent correctement. Les blocs créés ainsi sont donc plus visuels et une partie de Nim faite avec le micromonde "en local" ci-après ressemble à ceci :

On constate que le bloc d’affichage a été modifié pour être positionné naturellement en fin de programme (on ne peut plus rien fixer après lui). Voici le dossier contenant le micromonde graphique :

Zip - 175.5 ko

Conclusion (provisoire ?)

L’apprentissage par micromondes est une des spécialités de Blockly, comme en témoigne le premier des jeux Blockly (qu’on devrait facilement pouvoir adapter à des situations mathématiques) et le fait que tout ça se fasse en JavaScript, favorise l’intégration du micromonde dans une page web (comme ça a été fait en haut de cet article), telle que celle du cahier de texte électronique ou du cours en ligne, voire des exercices en ligne. Blockly, de par son absence de "version officielle standard", favorise la diversité des apports et la mutualisation des micromondes peut être assurée par LaboMeP ou des outils similaires. Pour ce qui est de la génération automatique de code JavaScript directement avec Blockly (utile dans cet article), l’outil plurialgo++ semble particulièrement prometteur. Dans un avenir assez proche, on pourra programmer avec Blockly dans DGPad. Et somme toute, Sophus est un micromonde spécial pour programmes de calcul...


ps

Trois autres exemples de micromondes, un peu plus poussés, sont présentés en guise de conclusion : Le premier permet de programmer big.js et ainsi, faire des calculs en grande précision (le curseur permet d’aller jusqu’à 1000 décimales). On peut s’en servir pour explorer le lien entre la rationalité et le caractère périodique du développement décimal :

Zip - 235.6 ko
calculs avec beaucoup de décimales

Le suivant, plus conforme au programme du collège, permet de faire des calculs sur les fractions :

Zip - 217.1 ko
les fractions avec Blockly
attention : La liste des fractions égyptiennes ne se calcule correctement que pour des fractions non entières

Enfin, interfaçant le logiciel sylvester.js, le troisième micromonde permet de faire du calcul matriciel (en dimensions 2 et 3) et notamment de corriger aisément tous les exercices de "spé maths" du bac S, concernant le calcul matriciel :

Zip - 295.1 ko
algèbre linéaire avec Blockly
notes

[1Ceci dit, ce jeu Blockly est un micromonde d’apprentissage de Blockly.

[2Ce programme calcule une valeur approchée de π

[3où il est tout de même dit que « En 5e, les élèves s’initient à la programmation événementielle. Progressivement, ils développent de nouvelles compétences, en programmant des actions en parallèle, en utilisant la notion de variable informatique, en découvrant les boucles et les instructions conditionnelles qui complètent les structures de contrôle liées aux événements. » ; reste à voir si ça aidera ces élèves à mieux connaîtres leurs tables de multiplication, leurs produits remarquables une fois en Terminale, ou à mieux programmer des programmes de calcul au brevet...

Documents associés à l'article
     |   (HTML - 4.2 ko)
  calculs avec beaucoup de décimales   |   (Zip - 235.6 ko)
  les fractions avec Blockly   |   (Zip - 217.1 ko) attention : La liste des fractions égyptiennes ne se calcule correctement que pour des fractions non entières
  algèbre linéaire avec Blockly   |   (Zip - 295.1 ko)
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