Mathématice, intégration des Tice dans l'enseignement des mathématiques  
Sommaire > N°66 - Septembre 2019 - en cours d’élaboration > Associer programmation par blocs et langage (...)

Associer programmation par blocs et langage Logo avec LogoBlocs
Moteur de recherche

A) Introduction

Le langage Logo, très populaire dans les années 1980 à l’occasion du plan « Informatique Pour Tous », est peu à peu tombé en désuétude contrairement à sa célèbre tortue. La (ré)introduction en 2016 du codage à l’école primaire et au collège ne semble pas lui avoir donné un second souffle, en particulier à cause de l’émergence de la programmation par blocs : non seulement celle-ci évite les écueils syntaxiques, mais elle permet une gamme d’activités plus variée dans des décors plus modernes que le jardin d’une tortue Logo.

J’ai donc été surpris quand un enseignant m’a contacté pour que j’intègre la syntaxe Logo dans un de mes logiciels pédagogiques (PluriAlgo), malgré les vertus pédagogiques avérées du langage. Je n’ai pas accédé à cette demande, mais cela m’a donné une autre idée de développement logiciel : créer un outil hybride permettant de bénéficier des avantages respectifs de la programmation par blocs et du langage Logo, à l’instar du logiciel SofusPy que j’ai développé pour associer programmation par blocs et Python. Pour y parvenir, il me fallait disposer d’un interpréteur Logo écrit en Javascript : l’ayant trouvé avec LWLogo, j’ai donc décidé de développer un outil (nommé LogoBlocs) que je vais présenter dans cet article.

Au delà de l’outil, je comparerai les deux approches en les illustrant avec de nombreux exemples : j’y montrerai qu’il n’est pas si évident que ça que la programmation par blocs soit toujours plus pertinente que la programmation Logo pour des élèves du primaire ou du collège...

On peut accéder à LogoBlocs à partir de ma page web consacrée à Blockly (voir lien).

B) Présentation de LogoBlocs

L’environnement de programmation 

LogoBlocs permet de voir simultanément l’éditeur visuel (partie gauche de l’écran) et l’éditeur textuel (partie droite), avec une barre de séparation mobile pour ajuster leur largeur en cas de besoin :

Pour pouvoir exécuter un programme par blocs, il faut le traduire en Logo (bouton « Traduire ») avant de cliquer sur le bouton « Exécuter »). Le résultat s’affiche alors sous les deux éditeurs :

L’exécution peut être suspendue (bouton Pause), puis poursuivie (nouveau clic sur Pause). La vitesse de la tortue peut être modifiée par un curseur, mais c’est sans effet en cours d’exécution. Grâce à une liste déroulante, on peut changer le fond d’écran (options « blanc », « quadrillage », « cahier », « repères »). Cette possibilité est particulièrement utile à l’école primaire où les activités de repérage jouent un rôle important.

Plusieurs approches pédagogiques possibles

Selon les exercices et les objectifs pédagogiques, plusieurs approches sont possibles :

  • tout faire en programmation visuelle
  • tout faire en programmation textuelle
  • panacher les deux

Dans le premier cas, les élèves verront quand même un programme Logo puisqu’il faut traduire le programme visuel en Logo (bouton « Traduire ») pour pouvoir l’exécuter. Mais il suffit de ne pas leur demander d’examiner ce code pour que l’approche soit purement visuelle...

Dans le second cas, tout développer en Logo, un éditeur syntaxique colorisé facilite la lecture des programmes. En cours d’écriture, le fait de ne pas voir un mot clé changer de couleur peut inciter les élèves à vérifier s’ils n’ont pas fait une faute de frappe (voire d’orthographe s’ils écrivent par exemple « avence » au lieu de « avance »). Au pire, ils découvriront cette faute à l’exécution par le biais d’un message d’erreur :

Evidemment, ce type d’erreur aurait pu être évité avec la programmation visuelle. Mais cet exemple ne prouve pas non plus que Logo ne soit pas adapté à des élèves du primaire ou du collège : en effet, on aurait très bien pu utiliser ici la notation abrégée « av 50 ». Pour autant, il ne faut pas mésestimer de réelles difficultés syntaxiques que peuvent rencontrer les élèves, les notations Logo n’étant pas toujours aussi naturelles que le laissent entendre les inconditionnels du langage : j’y reviendrai dans la partie de l’article consacrée au collège. C’est pourquoi LogoBlocs permet d’insérer dans un programme Logo la traduction de blocs, offrant ainsi par cette approche hybride une aide syntaxique :

L’aide est aussi de nature sémantique quand on choisit des blocs de transformations de variables : augmenter, augmenter d’un pourcentage...

C) Exemples à l’école primaire

Introduction

Les préconisations des cycles 2 et 3 me semblent plus cohérentes qu’au cycle 4, pour lequel je me suis montré très critique dans un article intitulé « Scratch ou Blockly au collège : un nouveau leurre ? ». Elles ne me paraissent pas irréalistes comme celles du cycle 4, où je sais par expérience que certains exercices proposés dans divers documents pédagogiques sont trop ambitieux ... puisque j’ai ainsi mis en difficulté de nombreux étudiants d’IUT dans le module d’initiation à l’algorithmique ! Autre point positif, il semble y avoir une bonne complémentarité entre activités informatiques (débranchées ou non) et autres disciplines :

Au cycle 3, les élèves apprennent à « programmer les déplacements d’un robot ou ceux d’un personnage sur un écran ». Les élèves travaillent « dans des espaces de travail de tailles différentes (la feuille de papier, la cour de récréation, le quartier, la ville, etc.) », ils utilisent pour cela des plans en travaillant « avec de nouvelles ressources comme les systèmes d’information géographique ». Le cadre est aussi celui « d’activités géométriques (construction de figures simples ou de figures composées de figures simples) », en utilisant des logiciels de géométrie dynamique.

Mais bon, ce n’est qu’une première impression et je ne prétends nullement donner un avis d’expert. Ce que je retiendrai pour cet article, c’est surtout que Logo est compatible avec les nouveaux programmes de cycle 3 (déplacement d’un personnage sur un écran, constructions de figures simples ou de figures composées de figures simples).

Il me semble même que Logo pourrait être pertinent à partir du CE1, mais je ne m’aventurerai pas trop sur ce terrain : combien d’élèves maîtrisent suffisamment la lecture et l’écriture à ce niveau ?

Au cycle 2, les élèves apprennent à « coder et décoder pour prévoir, représenter et réaliser des déplacements dans des espaces familiers, sur un quadrillage, sur un écran ». À partir du CE1, les élèves sont invités à coder des déplacements à l’aide d’un logiciel de programmation adapté.

D’un autre côté, une maîtrise approximative de la lecture et de l’écriture ne me semble pas non plus rédhibitoire, puisqu’il suffit de quelques instructions basiques (av 50, tg 90 et td 50) pour déplacer la tortue sur le quadrillage de LogoBlocs (50 est la taille d’un carreau du quadrillage). Et puis, si c’est effectivement trop tôt, il reste encore le CE2 au cycle 2 pour que ma suggestion puisse y être mise en oeuvre !

Avant d’examiner divers exemples, il me reste une dernière précision à apporter, car elle conditionne le type d’exercice pouvant être posé : la notion de variable informatique, qui figure explicitement au programme du cycle 4, ne semble pas devoir être utilisée au cycle 3 (ou alors a minima).

Figures géométriques

Pour dessiner par exemple un carré de côté 50, la notation Logo est concise et accessible à des élèves de cycle 3 : repete 4 [ av 50 td 90]. Evidemment, ce n’est pas avec cette instruction qu’il faut commencer puisqu’il est fondamental dans l’apprentissage qu’ils trouvent par eux-mêmes une solution opérationnelle. Par tâtonnements successifs, ils parviendront à une solution de ce type : av 50 td 90 av 50 td 90 av 50 td 90 av 50.

Ensuite, que ce soit avec ou sans boucle, on peut leur demander de construire d’autres figures géométriques simples. Là où les choses se compliquent, c’est quand arrive le moment de construire des « figures composées de figures simples » : choix de figures composées abordables, utilisation ou non de sous-programmes (sans paramètre)... Pour illustrer mes propos, j’étudierai plusieurs figures composées classiques, traitées par exemple sur ce site :

Les figures 1 et 3 sont faciles à réaliser à partir du moment où on sait dessiner un carré (et un triangle) :

Pour la figure 2, une imbrication de boucles me semble problématique au cycle 3. Je conseille donc d’introduire un sous-programme, sans théoriser évidemment : on enrichit le vocabulaire de base de Logo (repete, avance...), intuitif, par un nouveau terme intuitif (carré).

Pour la figure 4, les élèves peuvent songer à dupliquer le code d’un carré et à changer la taille, ce qui est plus lisible en Logo (car compact) que ne le serait la duplication de blocs avec Scratch. Mais une autre solution (généralisation de la procédure carré) ne me semble pas irréaliste au CM2 ou en 6ième :

Déplacements et obstacles à éviter

Parmi les exemples de démonstration de LWLogo, l’interpréteur utilisé par LogoBlocs, il y en a un auquel je ne m’attendais pas du tout : on y voit en effet la tortue rebondir sur des obstacles (matérialisés par des rectangles pleins marrons). Cela m’a donné deux idées d’activités qu’on peut proposer aux élèves.

La première, très basique, consiste à leur demander de colorier certaines cases du quadrillage, grâce à la commande « MUR& » :

Les quatre paramètres de cette commande sont l’abscisse du coin inférieur gauche, l’ordonnée du coin supérieur droit, la longueur du rectangle (50 pour une case du quadrillage) et sa largeur. La commande « MUR& » ne marche que si elle est placée dans une procédure événementielle nommée « init ! », qui se déclenche automatiquement au démarrage de l’exécution du code Logo. Bien évidemment, cela n’est pas à expliquer aux élèves, à qui on demandera plus prosaïquement de placer leurs instructions entre « pour init ! » et « fin ».

Une seconde activité, plus élaborée et amusante, fait partie des exemples de démonstration de LogoBlocs (menu « démos », puis bouton « obstacles »). En la téléchargeant, on voit apparaître des obstacles que la tortue doit éviter en se déplaçant sur le quadrillage afin d’atteindre le haut de la scène. Voici un exemple de parcours gagnant :

Le jeu peut être décliné en déplacements absolus ou en déplacements relatifs :

  • en déplacements absolus, les consignes sont d’utiliser les instructions « est », « ouest » et « nord ».
  • en déplacements relatifs, les consignes sont d’utiliser les instructions « « a » » (avancer d’un carreau), « d » (tourner à droite de 90 degrés) et « g » (tourner à gauche de 90 degrés).

Les élèves sont invités à taper leurs instructions avant un commentaire du programme le précisant :

Les différentes lignes suivant ce commentaire n’ont pas, heureusement, à être examinées par les élèves. Si des enseignants veulent proposer à leurs élèves un parcours plus élaboré que le mien, il leur suffit de modifier la procédure « init ! ». Pour les lecteurs férus de codage, j’ajouterai que la procédure « collision ! » est une procédure événementielle qui se déclenche lorsque la tortue touche un des obstacles ou le bord de la scène.

Activités du site de LogoPlus

Comme je l’ai indiqué au début de l’article, j’en ai eu l’idée après avec été contacté par un enseignant (D. Bille), qui a développé une version de Logo nommée LogoPlus. Parmi les nombreuses ressources pédagogiques qu’il propose sur son site web, j’en ai sélectionné en calcul (choix d’opérations pour résoudre un problème) et en français (conjugaison) : ces thèmes fondamentaux devraient intéresser tous les enseignants du primaire, et montrent que Logo n’est pas limité à sa tortue.

Voici deux exemples de problèmes de calcul, le premier étant indiqué pour le CE2, le second pour le CM2 :

  • Hervé avait 95 feutres. Il en donne 56. Combien en a-t-il maintenant ?
  • Un pantalon coûte 80 €, il est en solde à 30%. Combien coûte le pantalon ?

Et voici les corrigés fournis :

D. Bille propose également une activité faisant travailler les élèves sur la conjugaison à l’imparfait des verbes se terminant par « er » :

Il arrive progressivement à un programme qui, à partir d’un verbe et d’un pronom, affiche la conjugaison associée. Comme ce programme est à mon avis trop technique (introduction d’instructions conditionnelles sur le pronom), je suggère donc de faire afficher la conjugaison de tous les pronoms, ce qui est tout aussi formateur pour l’apprentissage de l’imparfait :

Les variables ne figurent peut-être pas au programme officiel du cycle 3, mais il en est fait ici une utilisation a minima. Et je trouverais dommage de s’en passer pour cette raison, alors que l’exercice permet de combiner codage et conjugaison, sans compter qu’il deviendra plus simple si on le reconduit avec d’autres familles de verbes et/ou d’autres temps que l’imparfait.

D) Exemples au collège

Introduction

Au collège, on aborde des concepts dont les notations peuvent perturber les élèves, notamment les variables et leur instruction d’affectation. Pour l’illustrer, je vais analyser cet exemple dessinant une spirale :

On peut noter que Logo fait une distinction entre le nom de la variable ("taille) et sa valeur (:taille). Il y a certes une raison logique à cette différence de notation, mais cela peut perturber certains élèves, en particulier dans le cas de la dernière instruction ( donne "taille :taille + 10 ).

Une parade peut être d’utiliser GéoTortue, qui s’inspire de Logo tout en adoptant des conventions plus « universelles » pour manipuler les variables :

Une autre parade, avec LogoBlocs, est d’insérer la traduction de blocs dans le code Logo lorsqu’une écriture directe n’est pas naturelle pour les élèves :

Expressions et fonctions

Supposons qu’on veuille calculer l’expression $\sqrt{2} * 10$ avec Logo. On peut le faire avec une notation classique ( « racine(2) * 10 » ), mais on obtiendra le bon résultat fortuitement : en effet les parenthèses n’indiquent pas que 2 est l’argument de la fonction, et sont totalement inutiles puisque Logo évalue l’expression (2) en 2. Donc, l’interpréteur Logo fera comme si on avait tapé « racine 2 * 10 ». Et il se trouve que cela sera évalué comme attendu et pas en « racine(2*10) ».

En cas de doute dans un tel cas, on peut effectivement mettre des parenthèses, mais la notation adéquate pour calculer « f(x1, x2 ... xn) » est « (f x1 x2 ... xn) » :

Dans une instruction conditionnelle ou une boucle tantque, les « et » et « ou » sont des fonctions booléennes. Par exemple, pour tester si une variable n vaut 1, 2 ou 3, on écrira ceci : si ou (:n=1) (:n=2) (:n=3) [ ... ]. Si cette notation préfixée pose problème aux collégiens, on peut utiliser les opérateurs « & » et « | » avec le dialecte Logo de LogoBlocs : l’exemple précédent peut donc aussi s’écrire « si (:n=1) | (:n=2) | (:n=3) [ ... ] ».

Un document de référence publié par l’IREM Paris-Diderot

L’IREM Paris-Diderot a publié un document d’environ 140 pages traitant de l’algorithmique et de la programmation au cycle 4 (voir lien). J’y ai puisé quelques exemples que je vais traduire en Logo. Auparavant, je tiens à signaler que j’en recommande la lecture.

Ce document, très complet, a la particularité de présenter les différentes notions algorithmiques en les illustrant à partir d’extraits de plusieurs manuels de cycle 4 :

Dans chacun des manuels, nous relevons des exercices et des activités intéressants et nous suggérons pour certains des compléments, des modifications ou des variantes. Nous avons occasionnellement souligné certaines parties qui nous ont paru discutables. En effet, certains exercices, certaines activités et certaines façons de présenter des notions nous semblent risquer d’induire des confusions chez les élèves. Il nous a paru important de les souligner dans un but d’efficacité pédagogique. Il ne s’agit que de remarques ponctuelles et ceci ne retire rien à la qualité générale des manuels étudiés. Ce document est donc conçu pour pouvoir être utilisé comme complément des manuels choisis par les enseignants.

J’en ai extrait quatre exemples, afin de faire un rapide tour d’horizon des possibilités offertes par LogoBlocs au collège. Les deux derniers exemples montrent certaines limites pédagogiques de Logo : les notations perdent en effet de leur élégance et, compte des risques accrus d’erreurs syntaxiques, il devient presque indispensable de recourir à la programmation par blocs avant d’utiliser le traducteur de LogoBlocs.

Exemple 1 du document : carré tronqué (saisie et tortue)

Le programme doit demander à l’utilisateur de saisir deux nombres a et b (avec a plus grand que b), puis construire un grand carré de côté a dans lequel dans un coin est découpé un petit carré de côté b, et enfin calculer son périmètre.

On peut soit chercher à écrire directement le programme Logo, soit passer d’abord par ce programme par blocs :

On obtient alors la traduction suivante :

Comme il n’y avait pas d’instruction de saisie dans LWLogo, j’ai dû en créer une (instruction « lis »). Lors de la traduction en Logo, l’espace du message « grand côté » est remplacé par le caractère « _ » puisqu’un texte ne peut pas comporter d’espaces en Logo.

Exemple 2 du document : fractions (instructions conditionnelles)

Le programme doit demander à l’utilisateur les numérateurs et dénominateurs de deux fractions, puis comparer ces deux fractions (sans faire de division). Voici la version Scratch proposée dans le document, en supposant que tous les nombres sont positifs :

Une écriture directe du code Logo me semble envisageable si les élèves utilisent 3 instructions conditionnelles séparées au lieu de 2 « si ... sinon ... » imbriqués :

Par contre, si on tient aux « si ... sinon ... » imbriqués, il est préférable de passer par la programmation par blocs et le traducteur de LogoBlocs :

Exemple 3 du document : entiers aléatoires (listes)

Le programme doit mettre dans une liste 15 entiers aléatoires compris entre 1 et 100, puis rechercher le maximum et son rang. Voici la solution Scratch proposée dans le document :

Et voici son équivalent Logo, qui peut être obtenu en appliquant le traducteur de LogoBlocs à ce programme Blockly :

Exemple 4 du document : code de César (chaînes de caractères)

Les auteurs du document recommandent un projet de programmation (du manuel Myriades) sur le thème du code de César, dont voici un extrait du programme Scratch final :

Et voici son équivalent Logo, qui peut être obtenu en appliquant le traducteur de LogoBlocs à ce programme Blockly :

Malgré les commentaires que j’ai ajoutés, je doute que ce programme Logo soit intelligible pour la plupart des élèves de collège : outre la syntaxe, problème qui peut être contourné grâce au traducteur de blocs de LogoBlocs, il y a surtout la complexité de l’algorithme que je trouve sous-estimée dans le document de l’IREM Paris-Diderot.

Et pour le vérifier, j’ai posé cet exercice à mes étudiants de première année d’IUT (en travaux dirigés, après une quinzaine d’heures d’enseignement dans le module). Pas plus d’un tiers de mes étudiants ne m’a proposé de solution exacte, alors que j’avais pourtant pris plusieurs hypothèses simplificatrices :

  • codage d’une seule lettre, afin d’éviter l’imbrication de 2 boucles (non triviales)
  • variable alphabetClair comportant uniquement les 26 lettres
  • décalage supposé compris entre 1 et 25 : il suffit donc de soustraire 26 si « position + décalage » dépasse 26, ce qui évite un raisonnement avec l’opérateur modulo [1].

E) Conclusion

Si la programmation par blocs n’avait pas été inventée, il est à mon avis probable que Logo figurerait actuellement dans de nombreux manuels scolaires pour l’école primaire ou le collège. Pour autant, il me semble possible et légitime de l’utiliser dans le contexte actuel.

A l’école primaire, il y a de nombreuses activités débranchées pour se repérer et se déplacer dans le plan. Et, lorsqu’elles sont mises en oeuvre avec un logiciel, Logo n’est pas plus compliqué que la programmation par blocs : les risques d’erreurs syntaxiques sont négligeables pour des tâches courantes (av, td, tg, repete) en Logo, et la programmation par blocs exige une bonne motricité pas toujours au rendez-vous même sans handicap particulier comme le souligne P. Tchounikine dans un article intitulé « Initier les élèves à la pensée informatique et à la programmation avec Scratch ».

J’ai été surpris de voir certains élèves avoir des difficultés à déplacer des blocs Scratch « à la souris » et, surtout, à avoir des problèmes pour éditer des données/texte (par exemple dans des blocs « Dire xxx » ; la difficulté n’était pas de saisir des textes au clavier, mais de cliquer sur la zone où éditer sans déplacer le bloc). Plusieurs institutrices m’ont confirmé que les élèves de CM1-CM2 ne savaient pas utiliser une souris de façon précise (dans certains cas car … ils utilisent surtout des tablettes tactiles ou des consoles de jeux).

Je trouverais donc légitime qu’on propose aux élèves du primaire les deux approches (visuelle ou textuelle), en leur laissant le choix, ce que permet LogoBlocs.

Au collège, malgré la pression du brevet, d’autres langages (visuels ou textuels) que Scratch peuvent y trouver leur place. Le document de référence pour l’algorithmique au cycle 4 publié par l’IREM Paris-Diderot en cite plusieurs, dont GéoTortue qui s’inspire de Logo.


notes

[1Depuis des années, j’observe que le reste entier d’une division semble être une notion bien abstraite chez de nombreux étudiants : donc, j’hésite de plus en plus à l’utiliser, puisqu’elle dégrade la lisibilité d’un algorithme chez ces étudiants... En plus, pour cet exemple, l’utilisation d’un modulo renvoie un entier compris entre 0 et 25 alors que la numérotation d’une lettre va de 1 à 26, ce qui oblige à faire un test supplémentaire pour savoir si le reste vaut 0 : dans ce cas, la lettre cryptée est la 26 ième lettre de l’alphabet.

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