Les nouvelles technologies pour l’enseignement des mathématiques
Intégration des TICE dans l’enseignement des mathématiques

MathémaTICE, première revue en ligne destinée à promouvoir les TICE à travers l’enseignement des mathématiques.

Le projet J3P : vers des parcours pédagogiques personnalisés
Un exerciseur intelligent qui adapte ses questions au niveau de chaque élève
Article mis en ligne le 4 octobre 2012
dernière modification le 6 janvier 2021

par Jean-Philippe Vanroyen

Introduction

Le logiciel Mathenpoche comporte plus 1600 exercices interactifs et a beaucoup contribué au succès rencontré par les ressources de Sésamath. Son développement a débuté en 2002. A cette époque, nous avions choisi la technologie Flash pour le développement car c’est celle qui nous avait semblé la plus compatible avec les différents navigateurs puisqu’il suffisait en effet que le lecteur Flash soit installé sur le poste. Néanmoins la technologie Flash n’est pas libre et nécessite que le lecteur Flash soit installé. Elle n’est donc pas multi-plateforme. En 2011 la situation a bien changé. Les navigateurs supportent dans leur grande majorité les technologies du web2.0, et les problèmes de compatibilité peuvent être surmontés de plus en plus facilement. En outre, une application écrite à l’aide de ces technologies ne nécessite pour son fonctionnement rien d’autre qu’un navigateur, comme Firefox ou Chrome par exemple. Ce qui fait qu’elle peut être lancée sur des supports très divers. C’est pourquoi l’association réfléchissait depuis quelques temps à un changement radical : développer les futures ressources en utilisant les technologies du web 2.0.

Parallèlement, Sésamath nouait des partenariats avec le monde universitaire. En particulier, l’outil Pepimep (projet Lingot) fut le fruit d’un partenariat entre Sésamath et deux équipes de chercheurs en didactique des Mathématiques et en informatique . Ce projet consista à élaborer des tests diagnostiques pour l’Algèbre. A partir de ces tests, les élèves sont répartis en différents profils et peuvent accéder, via Labomep, à des remédiations adaptées : il s’agit du premier exemple de parcours non linéaire dans Labomep.

En 2011, l’association décida donc de lancer officiellement un projet défini par deux grands objectifs :
 le développement des ressources sera basé sur les technologies du web2.0, garantissant ainsi une portabilité maximale, et utilisant exclusivement des outils libres, les ressources créées étant bien entendu libres également
 les ressources créées devront pouvoir permettre la création de graphes. Ces derniers permettront ainsi aux élèves de suivre des parcours pédagogiques personnalisés.
Le développement commença en septembre 2011 et on donna comme nom au projet J3P.
C’est donc en quelque sorte son premier anniversaire.

I. Le projet J3P

1) La notion de graphe et de parcours

J3P est le raccourci de JPPP.
Comme 3 se lit E dans le langage leet, on peut donc dire jèp.
Pour comprendre ce que nous entendons par parcours pédagogiques, on peut partir des séances actuelles créées avec Labomep. Une séance est une suite d’exercices mathenpoche. On peut y ajouter également les exercices tracenpoche, les exercices GeoGebra, et la projection de certaines parties d’un manuel par exemple.
A chaque étape, un score est renvoyé, et on passe à l’étape suivante quel que soit le résultat de l’étape.
C’est donc un parcours linéaire :

image001

Il faut toutefois noter que dans une séance Labomep, il est possible de paramétrer un seuil minimal de réussite pour passer à l’exercice suivant (80% pour être plus précis).

Nous avons ci-dessus un graphe, et l’élève, en allant jusqu’au bout, parcourt tout le graphe.
Ainsi on peut dire que le parcours de l’élève est identique au graphe.
L’idée de base de J3P consiste à créer un graphe plus complexe dans lequel chaque élève évolue définissant ainsi son propre parcours dans ce dernier.
Considérons par exemple le graphe suivant :

image002

Ce graphe est défini par un ensemble de noeuds et d’arêtes.
Chaque noeud est appelé section.
Une section peut être un exercice de type mathenpoche, peut consister à visualiser une partie d’un cours, à regarder une vidéo ou encore à manipuler un outil.
Quand l’élève termine une section, en fonction du résultat de cette section, il sera orienté vers tel ou tel autre noeud du graphe, qui contiendra soit une autre section, soit la même paramétrée différemment.
Les nœuds du graphe précédent contiennent des sections, chacune d’elles proposant un exercice de type mathenpoche. De manière classique, on propose à l’élève de traiter les exercices dans un ordre défini comme par exemple celui-ci : S1-S5-S2-S6-S3.
Mais on peut imaginer que ce que nous souhaitons dans l’idéal est que l’élève parcoure le graphe selon le chemin S1-S2-S3. Toutefois, en cas d’échec à la section S1, des remédiations peuvent s’imposer. Ainsi, selon les cas, l’élève sera orienté vers la section S4 ou la section S5. Pour ce faire, nous avons décidé que toute section renvoie ce que nous avons appelé une phrase d’état. Cela peut-être un score de réussite ou encore une phrase qualitative comme « problème dans les tables de multiplication ». Ce sont ces phrases d’état qui vont décider du cheminement de l’élève dans le graphe, qui va donc permettre à l’élève de suivre son propre parcours.

Le programme j3p permet de définir ces graphes.
Définir un graphe, c’est donc commencer par définir tous les noeuds et c’est définir toutes les conditions permettant de passer d’un noeud à un autre.

Considérons par exemple le sous-graphe du graphe précédent suivant :

image003

Supposons que la section S1 contienne des multiplications, et supposons que l’ensemble des phrases d’état renvoyées par S1 soit : {"problème dans les tables", score}.
Alors, à la fin de traitement par l’élève, la section S1 renverra systématiquement le score de réussite et éventuellement la chaîne : « problème dans les tables »

Alors nous pouvons définir dans j3p le sous-graphe suivant :

image004

Si l’élève bloque en S1 à cause des tables, on l’envoie vers la section S4, qui proposerait par exemple un travail sur les tables .
Que se passe-t-il en S4 ?

image005

On peut imaginer la chose suivante : l’élève travaille les tables jusqu’à ce qu’il obtienne un score convenable. Si malgré un certain nombre de répétitions le score reste insuffisant alors il sort du graphe et achève ainsi son parcours. Dans ce cas, il faudrait lui proposer un parcours complet pour travailler les tables. Si après un certain nombre de répétitions, il obtient un score suffisant, alors il retourne en S1 et recommence.
Il est possible de programmer ce comportement dans j3p :

image006

Au final, on peut imaginer qu’un élève aura suivi par exemple le parcours suivant :

image007

Ces graphes seront disponibles dans Labomep, au même titre que les exercices mathenpoche.
Il sera possible de les modifier pour en faire des versions personnelles, adaptées à ses propres élèves. A terme, il sera également possible de créer des graphes utilisant les sections existantes.

De nombreuses informations seront renvoyées au serveur. En particulier, on pourra s’intéresser au parcours de l’élève ainsi qu’aux différentes phrases d’état renvoyées à l’issue du traitement de chacune des sections de son parcours. Labomep affichera également le parcours de l’élève comme ci-dessus, en ajoutant sur chaque noeud la phrase d’état renvoyée.
De la sorte, on aura une « vision » assez rapide et synthétique du parcours de chaque élève.
Des tableaux annexes contiendraient le détail de son parcours.

Quand un graphe est choisi, il est possible de paramétrer finement chaque section.
Prenons un exemple simple.
Supposons une section proposant d’effectuer des opérations du type a * b.
Cette section proposerait des paramètres :
- choix de l’opération *
 intervalles auxquels appartiennent les entiers a et b
 limite de temps par question

Quand cette section figure au sein d’un graphe, alors nous pourrons préciser la valeur de chacun de ses paramètres.

On peut également faire traiter une seule section par l’élève, section que l’on aura paramétré pour l’occasion. Mais c’est un encore graphe, sauf qu’il ne comporte qu’un seul nœud.

Ce qui fait que définir un graphe consiste à :
 paramétrer chaque section présente dans le graphe
 définir tous les liens permettant de passer d’une section à l’autre,en se basant sur les phrases d’état renvoyées par chacune des sections,

Voici un exemple de parcours réel portant sur les nombres complexes :

image008

http://j3p.devsesamath.net/index.html

L’élève commence son parcours par la section 602bis. Si tout va bien, il évolue vers le haut et quitte le parcours en haut à droite. Les sous-graphes bleus et gris correspondent à des remédiations qui devraient, après leur traitement, permettre à l’élève de reprendre et réussir la section 602bis.

On peut proposer ce graphe tel quel aux élèves.
Il est sera possible de le modifier (il sera même possible de créer des graphes de toutes pièces).
Mais entre ces deux extrêmes, il y a une étape intermédiaire qui consiste à modifier le paramétrage des sections.
Par exemple la section 602bis possède les paramètres suivant :

image009

Il est possible de modifier chacun d’eux. Le graphe reste identique mais on peut changer la condition permettant à l’élève de passer du nœud N1 au nœud N2 (en violet) en changeant par exemple le seuil de réussite nécessaire.

Ainsi il est possible de personnaliser chaque section présente dans le graphe précédent.
Vous pouvez tester ce graphe à cette adresse :
http://j3p.devsesamath.net/J3P.php?...

Nous pouvons également définir des graphes comportant plusieurs nœuds, chacun d’eux proposant le traitement d’une même section, mais paramétrée à chaque fois d’une manière différente.
En voici un exemple.
La section 400 propose à l’élève de placer au jugé une perpendiculaire à une droite :

image010

Cette section comporte autant de questions que l’on souhaite. Ici, cette section comporte 3 répétitions.
Voici la description de cette section :

image011

Comme indiqué précédemment, tous les paramètres listés ci-dessus peuvent être modifiés lors de l’écriture du graphe.
On peut donc commencer par faire traiter cette section avec une tolérance égale à 10°, avec 3 répétitions et un nombre de réponses correctes égale à 3 pour avoir Bien comme phrase d’état renvoyée. Autrement dit, pour que la section renvoie Bien, il faudra que l’élève place correctement les trois perpendiculaires, à 10° près, pour les trois questions proposées. Si la pe renvoyée est Bien, alors il est orienté vers un nœud comportant la même section mais une difficulté plus grande (tolérance plus petite, plus grand nombre de répétitions etc). Sinon, il est renvoyé vers un nœud comportant la même section mais paramétrée plus facilement. Et ainsi de suite.... on peut en effet compliquer à loisir le graphe.
Vous pouvez tester ce graphe ici :
http://j3p.devsesamath.net/J3P.php?...
A noter que l’on peut également définir un temps limite pour chaque nœud, afin d’ajouter éventuellement une dimension dans la difficulté.

2) Le site

Voici l’adresse du site consacré à j3p : http://j3p.devsesamath.net/index.html

image012

Il n’est pas très étoffé, mais devrait contenir à terme tout ce qui concerne j3p, en particulier la documentation relative à la création de graphes et au développement de sections. On trouvera également la liste des ressources développées.
On trouve également un onglet « Participer ».

En base de la page d’accueil, on trouve un bouton :

Ce bouton donne accès à un second site :

http://j3p.devsesamath.net/J3P.php

Cette interface permet de tester les sections que nous avons publiées, listées dans le cadre haut-gauche. Beaucoup d’entre elles sont à améliorer ou finaliser.

Quand on clique sur une section, dans le cadre à côté, on peut lire les informations relatives à la section.

image014

C’est une interface assez fruste qui évoluera dans les mois qui viennent.
Par exemple en cliquant sur la section 400, on peut lire :

image015

On retrouve la section présentée plus haut.

Le bouton permet de tester la section (en réalité un graphe ne comportant qu’un nœud) dans sa configuration par défaut, c’est à dire avec :

 nbrepetitions = 5
 tolerance = 5
 nbreponsescorrectes = 4
 totalerreurs = 10

A tout moment, vous pouvez cliquer sur image016 afin de revenir à la page précédente.

On remarque alors que la zone jaune du milieu contenant le graphe courant est remplie.
Précisément quand on lance cette section, j3p se lance en créant un graphe ne comportant qu’un nœud, et le graphe lancé par j3p s’affiche dans la zone jaune au milieu :

image017

Il est possible de modifier les paramètres présents dans cette zone jaune, en particulier les valeurs que l’on trouve ici :
{tolerance:"10",nbreponsescorrectes:"3",totalerreurs:"10",nbrepetitions:"3"}
Par exemple on diminue la tolérance, puis on peut tester ce que cela donne en cliquant sur

image018

En bas de cette page, on trouve la partie concernant les parcours.
Nous ne proposons pour l’instant que trois parcours.
Si on clique sur le parcours Complexes, alors on obtient sa description sur la droite.

image019

Pour pouvoir tester ce parcours, il faut d’abord le charger en cliquant sur le bouton

C’est donc une interface assez frustre et temporaire. Elle nous permet cependant de publier quelques ressources afin de faire des démonstrations. Par ailleurs, elle nous permet de lancer des parcours ou des sections avec des liens directs (même s’il n’est pas possible d’enregistrer les résultats).
Assez rapidement, nous pourrons travailler au sein de Labomep, ce dernier devenant alors également un espace de production dans la mesure où nous pourrons y construire des parcours (voir le paragraphe concernant l’intégration dans Labomep).

Toutes les sections et graphes publiés peuvent être lancés directement en suivant la syntaxe suivante :
http://j3p.devsesamath.net/J3P.php?section=nom_de_la_section
http://j3p.devsesamath.net/J3P.php?parcours=nom_du_parcours
Par exemple, pour lancer la section 400, avec ses paramètres par défaut :
http://j3p.devsesamath.net/J3P.php?...

3) L’intégration dans Labomep

Comme nous l’avons dit, une ressource j3p est définie par un graphe, même si ce graphe ne comporte qu’un seul nœud.
Dans la partie GAUCHE de Labomep, on trouve les ressources publiques :

image020

Nous aurons un nouveau répertoire j3p, base d’une arborescence contenant de nombreuses ressources. Chaque ressource sera définie par un titre, une description, et un graphe.
Un clic droit permettra de visualiser la ressource c’est à dire de la tester en changeant ses paramètres éventuels.
Comme toute ressource publique, on pourra la glisser-déposer dans la partie droite de Labomep, c’est à dire dans son espace personnel :

image021

Un clic droit permettra également de la tester en changeant ses paramètres éventuels. Dans ce cas, les changements effectués seront enregistrés dans l’espace personnel du prof. Cette ressource pourra évidemment être intégrée au sein d’une séance.

Dans la partie droite également, nous aurons la possibilité de créer une ressource j3p. Ce sera une ressource perso donc. Créer une ressource j3p consiste « simplement » à définir un graphe utilisant les sections publiées (ces sections apparaîtront dans la partie gauche, c’est à dire dans la partie publique).

Par ailleurs, des administrateurs disposeront des droits pour faire passer une ressource perso vers la partie gauche de Labomep, c’est à dire pour en faire une ressource publique, donc accessible à tous.

En ce qui concerne l’enregistrement des résultats, à terme, Labomep récupérera ce que renvoie j3p à l’issue de tout parcours. Nous étudierons les modalités d’affichage des résultats dans un second temps.

Comme toute ressource de Labomep, les ressources de j3p (autrement dit les graphes) pourront être glissées au sein d’une séance programmée par le professeur.

4) Les participants aux projets

Je travaille sur ce projet depuis maintenant un an et avec le temps, ce projet a fini par occuper l’essentiel de mon temps de travail salarié. D’autres salariés sont également impliqués : Alexis Lecomte qui travaille activement sur ce projet et qui a développé de nombreuses sections, Daniel Caillibaud et Arnaud Rommens qui interviennent régulièrement en travaillant sur des aspects spécifiques de j3p.
Mais il faut noter aussi l’implication de bénévoles : Luc Destombes qui travaille sur un outil ambitieux de tuiles algébriques, Laurent Fréguin qui a développé quelques sections, Jean-Pierre Branchard qui travaille sur l’intégration du tableur, Emmanuel Ostenne, spécialiste de JSXGraph, dont les nombreuses aides nous ont permis d’avoir de la géométrie dynamique dans j3p.
D’autres comme Rémi Deniaud et Christophe Paumelle vont sans doute rapidement rejoindre l’équipe.
Outre l’aspect développement, un grand travail de scénarisation est nécessaire : définition des sections et construction des graphes. Sébastien Hache et Gilles Bougon ont travaillé sur la scénarisation de graphes et en ont proposé quelques-uns.
Nous reviendrons sur la problématique de la scénarisation dans la conclusion de cet article.

II. Les ressources

1) Les outils

Une ressource j3p est donc un parcours, même si ce dernier ne comporte qu’un nœud, c’est à dire se résume à ne traiter qu’une seule section.
Pour développer les sections, nous utilisons souvent des outils, outils libres que nous trouvons sur le net, ou outils que nous avons développés nous-mêmes.
En voici quelques exemples (la liste n’est pas exhaustive).

 JQuery, qui nous permet de gérer l’affichage de boîtes de dialogue, comme par exemple celle-ci, qui s’affiche quand on clique sur le bouton Aide :

image022

 MathQuill
Il nous permet d’éditer des maths dans j3p ainsi que des zones de saisie mathématique :

image023

A noter que la barre d’outils est un outil développé par nos soins.
Les boutons dialoguent avec l’outil MQ.

 JSXGraph
Il nous permet d’insérer de la géométrie dynamique, avec un dialogue et une interaction réelle entre la figure JSXGraph et la section l’utilisant.

La section jsx propose quelques exemples d’utilisation, en voici un :

image024

Une fois la figure construite, nous pouvons l’interroger (par exemple ici on demande une longueur).
Nous pouvons également créer des objets, comme un point par exemple (le point C a été créé à l’aide du bouton : ce bouton n’est pas dans JSXGraph, il est dans la section qui inter-agit donc avec JSXGraph).

 XCas
Très facilement, au sein de toute section, il est très facile de faire appel à un serveur utilisant XCas pour du calcul formel.

image025

Ici, nous utilisons MathQuill pour un affichage naturel du résultat.
Les différents outils sont donc en interaction.

 La calculatrice

Elle est sommaire mais peut être facilement améliorée.
A noter qu’elle est évidemment paramétrable.

Nous reparlerons de cet aspect important de paramétrisation et d’utilisation des outils plus bas.

image026

 Le tableur
C’est un outil très complexe, basé sur le tableur de XCas, et développé par Jean-Pierre Branchard.

image027

Son développement et son intégration sont en cours.

 La droite graduée

image028

2) Les sections

Ces outils nous ont donc permis de développer de nombreuses sections.
En voici quelques exemples.

a) Les sections classiques

image029

Voici une section proposant un exercice d’algorithmique.

b) Les sections de vidéoprojection

A l’aide du vidéoprojecteur, on affiche une série de plusieurs questions que l’élève traite sur son cahier. On trouve à chaque fois deux énoncés : un pour l’élève de gauche, un pour l’élève de droite, car en classe les élèves sont souvent à une table de deux.
A la fin, on affiche progressivement les corrections au vidéoprojecteur, ce qui permet de nombreux échanges avec les élèves.
Voici quelques copies d’écran :

Attention, on va bientôt démarrer :

image030

C’est parti pour tous les énoncés :

image031

On passe aux corrigés, que l’on affiche un par un :

image032

À noter que pour cette section, il y a un paramètre sur le type de correction qui permet d’afficher une autre correction, utilisant simplement la fonction dérivée !

c) Les sections basées sur un outil

Voici par exemple un section utilisant l’outil droite graduée, et demandant l’abscisse d’un point donné.

image033

Cette section est largement paramétrable, les niveaux de difficulté sont donc très variables.
On peut également demander une valeur approchée de l’abscisse d’un point.

d) Les sections squelette

Ce sont des sections particulières et dont le contenu dépend uniquement des paramètres. L’archétype de ces sections est la section permettant de créer une question de QCM.

image034

Quand on lance cette section, il faut préciser le paramètre contenant le nom d’un fichier texte.
Le fichier texte contient en effet tous les items du QCM, ainsi que les réponses.
Ainsi en paramétrant cette section, on fabrique son propre QCM, que l’on pourra alors intégrer au sein d’une séance Labomep.

III La problématique de la scénarisation et la participation

En guise de conclusion

Il y a plusieurs manières de participer à l’élaboration des ressources :

 en développant des sections et d’outils
Domaine plutôt réservé aux professeurs motivés ayant une petite expérience en programmation. Le développement de sections est analogue au développement d’exercices mathenpoche : il suppose une formation et des échanges avec l’équipe.

 en scénarisant des graphes ou des sections
Par rapport à mathenpoche, la complexité des scénarii est une donnée nouvelle.
Une ressource gagne à ne plus être pensée seule, mais au contraire pensée comme s’intégrant potentiellement dans un graphe. C’est plus complexe, mais le gain qualitatif est appréciable.

 en construisant des parcours à partir des ressources
Il est possible de décrire les graphes « naturellement » ; l’équipe se chargera alors d’étudier dans quelle mesure le graphe peut être implémenté et quelles ressources il implique.

 en adaptant des parcours existants (via le réglage des nombreux paramètres) pour créer des parcours personnalisés.

 en faisant remonter les bugs et les remarques, car on peut toujours améliorer une ressource.

Actuellement, comme vous avez pu le constater, nous disposons de quelques ressources.
On peut déjà remarquer que leur développement s’est inscrit dans une dynamique particulière.
Nous développons une section afin de répondre à la demande d’un graphe et en retour, cette section, largement paramétrable, donne l’idée de nouveaux graphes.
Il en est de même pour les outils. Des outils sont développés pour pouvoir répondre à des besoins de sections, et en retour ces outils, une fois développés, donnent des idées de nouvelles sections !
On pourrait également se représenter cette dynamique de la façon suivante.
On a une idée de graphe traitant d’un sujet, comme par exemple l’abscisse d’un point sur la droite graduée. Il s’ensuit un ensemble de scénarii de sections permettant de le construire. Chacune de ces sections doit être bien pensée, en particulier le paramétrage, afin de bien répondre aux besoins du graphe.
Si ces sections utilisent un outil particulier, alors on développe cet outil.
Si ces sections demandent des nouvelles fonctionnalités pour un outil existant, alors on améliore l’outil existant.
Réciproquement, l’outil amélioré, ou le nouvel outil développé, peut donner des idées pour de nouvelles sections, qui elles peuvent donner l’idée de nouveaux graphes.
Sans compter qu’une section développée pour les besoins du graphe initial peut à elle seule donner l’idée d’un nouveau graphe !

Ce qui nous semble remarquable dans ce projet, c’est l’intrication extrême entre la scénarisation et le développement. Je vous renvoie à l’article de Sébastien Hache. Nous sommes vraiment dans une logique de travail collaboratif de ce point de vue.

Donnons un exemple concret anecdotique mais qui éclaire bien cet aspect.
Il y a quelques mois, un enseignant du Primaire a proposé un graphe (sous forme littérale, en le décrivant naturellement) traitant du pluriel en primaire. Le pluriel en primaire est étudié sur les cinq années : on commence par la reconnaissance du pluriel (présence d’un s) et on termine avec les pluriels complexes en aux et avec les invariables. L’entrée dans le graphe se fait au niveau du CE.
Le graphe est donc censé couvrir tous les aspects du pluriel en primaire. L’élève construit son parcours dans le graphe en fonction de ses connaissances, et au final sa classe (CE ou CM) n’a pas une grande importance car ce graphe proposerait un traitement transversal de la notion. Il construirait ainsi son parcours dans le graphe, ce dernier proposant rapidement des noeuds adaptés à son niveau ainsi que des remédiations pour les difficultés rencontrées. Certes un tel graphe reste à écrire précisément, sans compter les sections qu’il faudrait développer...
Et comme un parcours pourra se dérouler sur plusieurs séances, en particulier si l’élève travaille chez lui en autonomie, le parcours peut être assez vaste. L’élève disposera ainsi du temps nécessaire pour une remédiation efficace.

Quel que soit le mode opératoire choisi pour la scénarisation, une scénarisation de qualité nous semble être la clef afin de disposer de ressources proposant un gain qualitatif par rapport à l’existant car sinon ce ne sera jamais qu’un mathenpoche bis version JavaScript.
Un des enjeux de certains graphes consisterait à tenter de déterminer les différents obstacles rencontrés par l’élève, et de proposer des remédiations adaptées. Il semble que nous touchions les problématiques de remédiation et d’aide individualisée.
En tous les cas, de telles ressources j3p nécessiteront sans aucun doute une implication de bénévoles, et même plus largement des acteurs de la communauté enseignante.