Le projet J3P

Le projet J3P est un projet de l'association Sésamath, projet qui a été lancé en septembre 2011. Si l'essentiel de mon travail de salarié y est consacré, il bénéficie également de l'implication plus ou moins forte d'autres salariés et de quelques bénévoles. C'est un projet en cours de développement et, même si à ce jour on peut déjà compter un an et demi de développement (mars 2013), il n'en reste pas moins un projet très jeune étant donnée l'ampleur de la tâche. Ces quelques lignes vous en convaincront, et vous donneront, je l'espère, une idée assez fidèle des objectifs et enjeux de ce projet.

Pour cela, je suivrai le plan suivant. Après une introduction présentant les raisons de la naissance de ce projet, je commencerai par présenter en détail la notion de section, néologisme de Sésamath. Ensuite, je présenterai les notions de graphes et de parcours, notions au coeur du projet J3P, et qui en constituent tout l'intérêt. Enfin, je conclurai en traçant quelques perspectives et en précisant quelques enjeux importants.
Introduction
Pour comprendre les raisons de l'émergence du projet J3P, il faut partir des exercices interactifs proposés par le logiciel Mathenpoche, que je suppose connu par le lecteur. Dans le cas, contraire, vous pouvez vous rendre ici : .
Mathenpoche, ce sont 1600 exercices interactifs programmés en Flash. Son développement a commencé en 2002 et s'est achevé courant 2009. Ces exercices sont intégrables au sein de séances via l'interface Labomep. Concrètement, le professeur programme pour ses élèves une liste d'exercices, c'est à dire une séance, à une plage horaire donnée, et récupère ensuite, grâce à l'environnement Labomep, les résultats de ses élèves.
L'ancienne interface des exercices Mathenpoche

Interface Labomep

Pour qu'il n'y ait aucune confusion, je précise tout de suite que ce que nous appelons Mathenpoche est le site d'accompagnement à la scolarité ci-dessous :http://mathenpoche.sesamath.net/
Sur ce site, on a accès, en bas à droite, à l'ensemble des exercices interactifs évoqués dans le paragraphe précédent.
Le site Mathenpoche

En 2011 s'est posée pour Sésamath la question de l'avenir des exercices interactifs. Pour le dire simplement : continuons-nous oui ou non à utiliser cette technologie pour leur développement ? Trois raisons principalement expliquent cette remise en question.
Tout d'abord la technologie utilisée. Il s'agit de Flash, repris par Adobe. Flash est une technologie qui semble vouée à disparaître (Adobe a déjà renoncé à poursuivre son développement pour certains terminaux).
Deuxièmement, même si les ressources développées à l'aide de cette technologie sont libres, le logiciel lui ne l'est pas.
Enfin, les applications Flash ne sont pas multi-plateformes (elles ne fonctionnent pas sur les smartphones par exemple).
Ce sont ces trois raisons qui ont conduit Sésamath a envisager le développement d'exercices interactifs à l'aide d'une autre technologie. Pour autant, avec le recul, je pense que la technologie Flash fût le choix le plus pertinent en 2002. Il y a dix ans en effet, la programmation WEB était naissante et nous étions évidemment très loin des possibilités actuelles. Sans doute, à cette époque, le Flash constituait une alternative très intéressante pour le développement de ressources en ligne.

Ceci posé, quitte à créer un nouvel environnement de développement interactifs, autant en profiter pour améliorer le précédent. Mais comment ?
Une première idée réside dans le paramétrage des exercices. Les exercices de Mathenpoche comportent de nombreux paramètres puisque les données sont aléatoires, mais ces paramètres ne sont pas réglables de l'extérieur. Il aurait été possible d'implémenter un tel un système mais à condition de le penser dès le départn ce qui n'a pas été le cas. Ce qui fait qu'aujourd'hui, reprendre les 1600 exercices afin implémenter un système de paramétrage piloté de l'extérieur prendrait un temps considérable.
Parallèlement au développement de Mathenpoche se nouaient des partenariats avec le monde universitaire. C'est le cas du projet Pepimep impliquant Sésamath et deux équipes de chercheurs en informatique et en didactique des mathématiques. Ce projet, en parti basé sur un projet antérieur appelé Lingot, consista à créer des tests diagnostiques en algèbre. Ces tests permettent d'établir, pour chaque élève, un profil, en fonction duquel l'élève est orienté ensuite vers des remédiations adaptées (la plateforme utilisée pour les tests et les remédiations est Labomep). Si on schématise, on a entrée une série d'exercices, une analyse des résultats, et en sortie une autre série d'exercices adaptés au résultat de la première série. Ce que l'on peut représenter comme ceci :
Structure de Pepimep


Cette image ne rend pas compte de la complexite du projet Pepimep. Les tests, une série d'une dizaines d'exercices, ont été soigneusement scénarisés (un peu à l'image des ces anciennes évalations 6ème). L'établissement du profil nécessite une analyse minutieuse des réponses au test. Enfin les remédiations ont été très travaillées également afin qu'elles s'adaptent le mieux possible au profil établi
Quoiqu'il en soit, en prenant un peu de distance, la structure est bien celle-ci c'est à dire une structure de graphe au sein duquel l'élève suivra son propre parcours.

En septembre 2011, Sésamath décida donc de lancer un projet J3P (le nom sera trouvé quelques mois plus-tard) dont le cahier des charges est, dans les grandes lignes, le suivant:
le développement des ressources sera basé sur les technologies du Web (HTML5, javascript, css...) garantissant une portablité maximale et utilisera des ressources libres développées à l'aide d'outils libres.
les ressources devront pouvoir être paramétrées de l'extérieur.
les ressources créées devront pouvoir permettre la création de graphes permettant aux élèves de suivre des parcours pédagogiques personnalisés.


Terminons cette introduction par quelques mots sur l'origine du nom du projet.
Nous sommes partis des mots clefs suivants : Javascript, HTML, Parcours pédagogiques personnalisés, qui ont donné l'acronyme JHPPP. Ce dernier a donné JH3P, puis, le H n'étant pas très joli, tout simplement J3P. Comme 3 peut se lire E dans la langue geek, on peut dire également jèp.
Première partie : les sections
1) Qu'est-ce qu'une section ?
Les sections sont de nature très diverses.
Une section peut-être :
- un exercice interactif.
Si cet exercice peut être un ancien exercice programmé en Flash (donc un exercice de Mathenpoche), ce sera essentiellement un nouvel exercice programmé en JavaScript. Voici un exemple de tel exercice (cliquez sur l'image pour lancer l'exercice) :
Un exercice interactif de J3P

Le tableau de conversion peut être interactif ou non, c'est à dire simplement servir de support visuel pour la question. Il est également éventuellement affiché lors de la correction.

- une aide animée.
Elle peut être développée avec Intrumenpoche (c'est à dire une applet Flash), mais également exportée en HTML5, pour donner par exemple ceci :
Une aide animée en HTML5

- un cours : texte, audio ou video.
Un cours sous forme de texte

Une video en guise de cours

- une section squelette.
L'archétype de cette section est la section QCM. Elle est basée sur un fichier texte, et permet de générer un QCM à l'aide de ce dernier. Ce fichier texte constitue un des paramètres de cette section. Il en existe plusieurs de ce type, mais je ne détaillerai pas ici.

- une section outil.
Les exercices interactifs nécessitent parfois l'utilisation d'outils comme une droite graduée, un module de géométrie dynamique, une calculatrice, un moteur de calcul formel etc. Ces outils peuvent également utilisés seuls. C'est le rôle des sections outils. Voci par exemple l'outil droite graduée:
L'outil droite graduée utilisé seul


- ou tout autre support comme par exemple une section de videoprojection.
Ces sections de videoprojection sont assez particulières mais sont intéressantes car elles contituent un bon exemple montrant à quel point les sections peuvent être de natures très différentes. Le professeur lance la section en classe. Une série d'exercices s'affichent alors successivement avec un temps limité par exercice. L'écran est partagé en deux : un énoncé pour l'élève de gauche, un autre pour l'élève de droite. Quand c'est terminé, alors on passe à la correction de tous les exercices : les solutions sont affichées une à une par le professeur. Evidemment, c'est l'occasion de faire participer les élèves...Cliquez sur ce lien pour voir ce que cela donne.

Bien que les sections puissent être de natures fort différentes, toute section devra respecter deux impératifs :
- elle doit être paramétrable.
Evidemment le degré de paramétrisation dépend de la nature de la section. En général, plus l'interaction entre l'élève et la machine est forte, plus la paramétrisation peut être conséquente. A l'opposé, les sections de cours offrent un degré faible de paramétrisation.
En outre, même si l'activité proposée à l'élève comporte plusieurs étapes, cette activité pourra être répétée plusieurs fois. Ce nombre de fois est également un paramètre de toute section.
- elle renvoie à la fin une information.
Pour les sections de cours, cette information est par exemple le temps passé à lire la note de cours. Pour les exercices interactifs, cette information est souvent un score, mais pas tout le temps. Nous verrons en effet plus bas que l'information renvoyée peut être qualitative. Nous avons appelé cette information renvoyée par toute section : phrase d'état. C'est une phrase censée décrire ce qu'il s'est passé quand l'élève a interagi avec la section.

2) Le paramétrage
Commençons par illustrer le paramétrage à l'aide d'un exemple.
La section cm2N1_18

Cet exercice est à l'origine un exercice papier et nous avons décidé d'en développer une version interactive.
Il s'agit pour l'élève de CM2 (ou de 6ème) de compléter la suite.
Quels paramètres pouvons-nous envisager pour cet exercice ?
le nombre de répétitions (ici il vaut 5), une indication éventuelle (apparaissant quand l'élève clique sur le lien indication en bas à gauche de la fenêtre), le nombre de chances qu'a l'élève pour répondre correctement à une question et enfin un temps limite par question (par défaut, il est infini, il n'y a pas de temps limite). Ces quatre paramètres constituent des paramètres transversaux: nous les retrouverons dans la plupart des sections de type exercice interactif.
Mais nous pouvons également paramétrer les cases qu'il faut remplir, la raison de la suite arithmétique et le premier terme de la suite. On peut bien entendu imaginer d'autres paramètres. Ces paramètres sont des paramètres spécifiques à la section.
Les différents types de paramètres

L'interface ws_j3p.html permet de modifier le paramétrage des sections:
ws_j3p.html

En cliquant sur le bouton "Paramètres", on obtient la boîte de dialogue correspondante à la section de notre exemple (après avoir sélectionner la ressource "Série de nombres entiers":
Les paramètres de la section cm2N1_18

J'ai modifié le nombre de répétitions (il vaut 3 au lieu de 5 qui est la valeur par défaut pour cette section), j'ai ajouté l'indication suivante : "Regarde la différence entre deux termes consécutifs", j'ai défini le nombre de chances à 2. Le premier terme de la suite sera un entier appartenant à l'intervalle [100;500] et la raison sera 10 ou 100.
Voici ce que cela donne, après m'être trompé une première fois et avoir cliqué sur le lien indication :
cm2N1_18

Les paramètres sont décrits dans l'interface ws_j3p.html dans la fenêtre Description de la ressource. Quand une section est sélectionnée, le bouton Paramètres permet de les modifier. Enfin le bouton "Lancer le graphe" permet de lancer la ressource dans une nouvel onglet.

Il arrive que le degré de paramétrage soit tel que les ressources obtenues à partir d'une même section soient très différentes pédagogiquement.
Pour illustrer ce point important, prenons l'exemple de la section dglireabscisse qui demande simplement à l'élève de donner l'abscisse d'un point placé sur la droite graduée:
dglireabscisse avec son paramétrage par défaut

Cette section comporte de nombreux paramètres :
Les paramètres de dglireabscisse

La section dglireabscisse avec un premier exemple de paramétrage A :
dglireabscisse avec paramétrage A

Le bouton zoom décimal (qui zoom d'un facteur 10) permet d'obtenir l'abscisse recherchée :
dglireabscisse avec paramétrage A


La section dglireabscisse avec un deuxième exemple de paramétrage B :
dglireabscisse avec paramétrage B

Ici le point M a une abscisse comprise entre 3 et 9. Cette abscisse comporte 4 décimales car le paramètre lepoint vaut "[3;9],4".
En outre, il n'y a plus de bouton zoom décimal mais une barre de zoom continu de couleur jaune. Après manipulation, on obtient :
dglireabscisse avec paramétrage B

Enfin, le paramétrage C suivant est intéressant.
Le paramétrage C

Il donne ceci :
dglireabscisse avec paramétrage C

Ici ne sont disponibles que les boutons zoom. La difficulté réside dans le fait que les graduations ne sont pas affichées : seules les étiquettes 4 et 6 le sont. En zoomant sur la graduation 6, on se retrouve ici :
dglireabscisse avec paramétrage C

Le point M a disparu... Il faut déplacer la droite graduée en prenant bien soin de compter les graduations, sans oublier que le pas vaut maintenant 0,1 puisqu' on a zoomé une fois ! J'ai donc déplacé la droite graduée en comptant les graduations et cliqué sur la graduation 6,8. J'obtiens ceci :
dglireabscisse avec paramétrage C

Le pas vaut maintenant 0,01 donc la graduation noire à gauche de M vaut 6,79 et j'en déduis donc que l'abscisse de M vaut 6,795.
Comme vous pouvez le constater, cette dernière ressource (dglireabscisse avec paramétrage C) nécessite la mise en oeuvre de compétences bien distinctes des exemples précédents.

Le paramétrage d'une section est discutée en amont, lors de la scénarisation de la section.
Il est clair que cette scénarisation est très importante dans la mesure où une section bien paramétrée est susceptible de donner naissance à de nombreuses ressources pédagogiquement différentes.

3) La phrase d'état
C'est l'information renvoyée à la fin d'une section.
Une section de type exercice interactif renvoie une phrase d'état quantitative ou qualitative.
Si c'est un score (sur 1) qui est renvoyé alors la phrase d'état est égale au score et la section est dite quantitative.
Si c'est une phrase qualitative qui est renvoyée alors la phrase d'état est égale à cette phrase et la section est dite qualitative.
Dans le cas où la section est qualitative, un score est quand même renvoyé. Cela aura son importance dans les graphes.
En ce qui concerne les sections de type cours par exemple, alors la section est qualitative (la phrase d'état renvoyée est "lu").

Pour expliciter cela, on va considérer la section 600 demandant à l'élève d'identifier la partie réelle ou la partie imaginaire d'un complexe donné sous sa forme algébrique.
La section 600

On peut décider que cette section sera quantitative auquel cas la phrase d'état renvoyée sera égale au score. Mais ici il y a plus intéressant à faire dans la mesure où nous connaissons les erreurs types pour cet exercice. La première consiste à confondre la partie réelle et la partie imaginaire. La seconde consiste à inclure i dans la partie imaginaire. C'est pourquoi la section va regarder si une ces deux erreurs a eu lieu. Si c'est le cas, alors la phrase d'état renvoyée sera "confusion entre les deux parties" ou 'problème inclusion i dans la réponse". Sinon, la section va renvoyer phrase d'état "Bien" ou "Insuffisant" en se basant sur le score. Evidemment le programme va décider de renvoyer "confusion entre les deux parties" s'il constate que l'erreur s'est produite un certain nombre de fois : nous avons donc besoin d'un seuil de declenchement de renvoi de cette information.
Toutes ces informations apparaissent dans la fenêtre description de la ressource de la section 600 :
Description de la section 600

Tout d'abord on lit en haut que la section 600 est qualitative.
Par ailleurs, nous avons 4 phrases d'état susceptibles d'être renvoyées : pe_1, pe_2, pe_3 et pe_4.
Quelle sera la phrase d'état renvoyée à la fin ?
Expliquons pe_2. Le programme renverra cette phrase d'état si il y a eu confusion entre les deux parties un certain nombre de fois. Combien de fois précisément ? Comme nous avons 5 répétitions et comme la phrase d'état est renvoyée dès que la fréquence de ce type d'erreurs est supérieure à 0.2 comme l'indique le paramètre seuil_confusion, on en conclut que si l'élève commet une fois ce type d'erreur alors c'est cette phrase d'état qui sera renvoyée.
Il en est de même pour pe_3, pour ce qui concerne l'erreur type "inclusion de i dans la réponse".
Si ces phrases d'état (pe_2 et pe_3) ne sont pas renvoyées (c'est à dire dans le cas présent si l'élève n'a commis aucune fois l'un de ces deux erreurs), alors le programme renvoie la phrase d'état pe_1 (Bien) ou pe_4 (insuffisant) en se basant pour cela sur le seuil de réussite demandé.

A ce stade, il faut savoir que, outre la phrase d'état, j3p renvoie également systématiquement le score.
Ainsi, à l'issue de cette section, on pourra avoir pe = "inclusion de i dans la réponse" aussi bien avec un score de 80% qu'avec un score de 0% !
En jouant sur les différents seuils, il devient possible de connaître, dans certains cas du moins, les raisons d'un éventuel mauvais score afin d'envisager des remédiations adaptées...
Nous reviendrons sur ce point dans la partie suivante.

Ce qui a été renvoyé par J3P à l'issue du traitement de la section 600

Ci-dessus, voici les informations renvoyées à l'issue du traitement de la section. La phrase d'état renvoyée est clairement indiquée. Le score obtenu est 60%. L'élève s'est trompé aux répétitions 1 et 4. Il a mis 18 secondes pour traiter les cinq répétitions. Ces informations ne sont pas affichées: elles sont envoyées à Labomep ou utilisées par j3p pour la continuation du parcours de l'élève dans le graphe.
Ce qui a été renvoyé par J3P à l'issue du traitement d'une section quantitative

Ci-dessus, voici le bilan d'une section quantitative. Le score est de 40%.

En conclusion de cette première partie...
Une section est une activité traitée par l'élève. Bien que les sections soient de nature très différentes, chacune d'elles est paramétrable et comporte un jeu de paramètres spécifiques et un jeu de paramètres transversaux. A l'issue du traitement, la section renvoie à J3P une information, appelée phrase d'état, ainsi qu'un score. Dans le cas des sections qualitatives, cette phrase d'état est distinct du score.
Muni de cette information, J3P peut orienter l'élève vers une nouvelle section avec un paramétrage dédié. Commence donc ici la notion de graphe.

Seconde partie : les graphes et les parcours
1) Les notions de graphe et de parcours
Une séance dans Labomep

Une séance dans Labomep consiste à glisser déposer dans la partie centrale un certain nombre ressources. On affecte alors cet ensemble de ressources à un élève ou à un groupe d'élèves. Il existe trois paramétrages possibles dans Labomep, tous faculatifs. Le premier donne la possibilité à l'élève de traiter les exercices dans un ordre quelconque. Le deuxième, s'il est défini, impose une durée minimale de non-zapping. Enfin le troisième exige une réussite minimale de 80% pour pouvoir passer à l'exercice suivant.
Cependant, dans son paramétrage par défaut, on peut représenter la séance ci-dessus de la manière suivante :
Une représentation de la séance Labomep

ce qui montre que cette séance n'est autre qu'un graphe linéaire comportant 4 noeuds. On attend de l'élève qu'il parcourt tout le graphe et dans ce cas, le graphe et le parcours sont donc deux notions confondues.

L'idée consiste donc à généraliser le graphe ci-dessus. Pour cela, commençons par travailler théoriquement. Supposons que nous disposions d'une section S1 proposant un exercice dont la résolution nécessite, d'une part, de comprendre qu'une multiplication est nécessaire pour résoudre le problème , d'autre part demande d'effectuer effectivement cette multiplication pour trouver le résultat. Sous ces conditions, la résolution réclame la mise en oeuvre de deux compétences identifiées : "le sens des opération" et "connaître ses tables de multiplication".
On supposera en outre que la section S1 est qualitative dans la mesure où elle commence par détecter si l'erreur provient d'une méconnaissance des tables. Par ailleurs, comme toute section qualitative, elle renvoie également un score.
Alors on pourrait imaginer le graphe suivant :
Un graphe théorique

A la fin de S1, J3P récupère le score et la phrase d'état.
Si le score est supérieur à 70% alors il passe en S2. Sinon deux cas sont possibles :
un problème dans les tables a été détecté auquel cas, il est orienté vers S4;
aucun problème dans les tables n'est détecté auquel cas il est orienté en S5. Dans le cas de S5, on peut supposer qu'il y a un problème relatif au sens des opérations : la section S5 proposerait un travail plus simple sur ce sujet. S4, quant à elle, proposerait quelques calculs mentaux sur les tables de multiplication afin de lui rafraichir la mémoire...
La suite du graphe théorique

Supposons maintenant que l'élève soit en S4. On pourrait demander à l'élève d'effectuer des multiplications mentalement jusqu'à ce que le score obtenu soit supérieur à 50% (c'est la petite boucle à droite du noeud). S'il obtient un score supérieur à 50% alors il revient en S1. Et si, malgré 5 répétitions de la section S4, il n'obtient pas un minimum de 50%, alors il sort du graphe. Il est en effet clair dans ce cas que la méconnaissance des tables constitue un obctacle rédhibitoire pour S1 et donc pour le graphe.

On peut donc imaginer un graphe comme ci-dessous, où l'on retrouve les deux sous-graphes précédents :
Le graphe théorique complet

Je ne détaillerai pas ici la signification des différentes flêches mais voici l'esprit de ce graphe : le parcours attendu de l'élève est le parcours S1-S2-S3. S4 est une remédiation (révision des tables) de S1. S5 est une remédiation (sens des opérations) de S1. S7 est une remédiation de S5. S6 consiste à refaire la section de S2, mais avec une paramétrage plus simple.
Le graphe tel quel n'est pas valable : par exemple, que se passe-t-il en cas d'échecs répétés en S6 ? Mais peu importe, c'est juste un graphe théorique, qui a le mérite de donner une idée de ce que nous désirons implémenter.

Quelques remarques supplémentaires à propos de ce graphe théorique.

Chaque élève commence en S1 puis suit donc son propre parcours en fonction des résultats à chaque noeud.
Par exemple, on peut imaginer qu'un élève aura suivi le parcours suivant :
Un exemple de parcours dans le graphe théorique

Ici le parcours de l'élève est différent du graphe : graphe et parcours sont deux concepts bien distincts. En quelque sorte, le graphe s'adapte à l'élève car il lui permet de suivre son propre parcours pédagogique. Il permet donc des qparcours pédagogiques personnalisés : J3P.

Un graphe constitue une activité ou encore une ressource. C'est pour cette raison que nous n'avons pas utilisé le terme ressource pour désigner une section. Une ressource a un but pédagogique, c'est donc un graphe et à priori, les sections ne sont que des éléments qui viendront s'insérer dans un graphe, constituant ainsi une ressource. Bien entendu, un graphe peut très bien ne comporter qu'un seul noeud auquel cas la ressource correspondante consistera à ne traiter qu'une section. C'est seulement dans ce cas que l'on peut considérer qu'une section est une ressource, comme seul élément d'un ensemble de noeuds.

Résumons.
Un graphe est composé de noeuds. A chaque noeud, l'élève traite une section quelconque, section paramétrée d'une certaine manière. A la fin du traitement, J3P récupère la phrase d'état renvoyée, le score ainsi que d'autres informations comme le temps passé par exemple. Ces informations permettent de conditionner le passage d'un noeud à un autre. Par exemple, à l'issue du noeud 1, si le score est supérieur à 80%, il sera orienté vers le noeud 2, dans le cas contraire il sera orienté vers le noeud 3. Les conditions peuvent être complexes, puisque l'on peut utiliser les opérateurs logiques ET et OU.

2) Un exemple concret de graphe
Voici un exemple de graphe réel basé sur trois sections.
Commençons par les présenter.
La section parallèlesfaisceau demande d'identifier les deux droites parallèles parmi un faisceau de droites :
parallèlesfaisceau

La section parallèles demande de déplacer le point C de telle sorte que droites rouge et bleue soient parallèles:
parallèles

La section parallèlesremed1 demande de déplacer la parallèle bleue afin qu'elle passe par le point P
parallèlesremed1


Ces trois sections sont quantitatives : la phrase d'état renvoyée est égale au score.

L'idée de la ressource, du graphe correspondant donc, consiste à demander à l'élève de faire la section parallèlesfaisceau.
En cas de réussite c'est terminé.
En cas d'échec, il refait l'exercice mais avec 6 droites au lieu de 8 (le nombre de droites est évidemment un des paramètres de la section).
 S'il réussit, alors il recommence le premier exercice avec les 8 droites.
 En cas de nouvel échec, on lui propose une remédiation consistant à traiter la section parallèles.
  S'il échoue la section parallèles, alors on lui propose comme nouvelle remédiation la section parallèlesremed1
  S'il échoue encore à parallèlesremed1, malgré plusieurs tentatives, alors il sort du graphe.
Voici le graphe correspondant :
Un graphe concret

Cette représentation est appelée diagramme du graphe.

Informatiquement, le graphe est un tableau comme ceci :
Le source du graphe

Nous avons 4 blocs car le graphe comporte 4 noeuds. Expliquons le premier bloc.
L'élève commence au noeud 1. Il traite la section parallèlesfaisceau, comme indiqué en gras noir. En rouge, apparaissent certains paramètres de la section, paramètres que J3P lui fournira. On vérifie qu'il y a bien 8 droites. Comme nbrepetitions est égal à 3, l'exercice sera répété 3 fois. Cette section renvoie comme pe (phrase d'état) le score, noté sur 1. En bleu, on lit ceci : si pe > 0.9, alors nn vaut "fin", son parcours est donc terminé et il sort du graphe. En vert : si pe < 0.89, alors nn vaut 2, et il sera donc orienté vers le noeud 2 avec comme phrase d'information "Diminuons un peu la difficulté". C'est le même principe pour les trois autres blocs.

Vous pouvez tester ce graphe ici:
adresse

Danbs ws_j3p.html, le script du graphe est représenté de la manière suivants :
Le script du graphe dans ws_j3p


Ce script permet de modifier le diagramme du graphe. Inversement la modification du diagramme induit la modification du script du graphe. Ce module de construction de graphe dans ws_j3p est en cours de développement.

Avant de donner quelques autres exemples de graphe, je voudrais insister sur un point précis. Après avoir travaillé et établi quelques graphes, il apparaît clairement que le diagramme, et son module de construction, ne constituent pas la panacée. Un tel module, aussi performant soit-il, ne constitue pas, à lui seul, la clef ouvrant la porte à des centaines de graphes, loin de là ! Un graphe c'est avant tout une idée de ressource, presque un pari pédagogique. Dans le graphe précédent, l'idée de base est la suivante. Si l'élève ne parvient pas à identifier les deux droites parallèles dans le faisceau, alors on peut dans un premier temps diminuer légèrement le nombre de droites. Mais en cas de second échec, diminuer à nouveau le nombre de droites n'a plus de sens : évidemment qu'il identifiera deux droites parallèles dans un faisceau de trois droites ! Il faut donc lui proposer une remédiation qualitative consistant à traiter une autre section. Dans le cas présent, la thèse du concepteur du graphe (un professeur d'école en l'occurrence) est que la section parallèles peut constituer une remédiation qualitative en cas d'échec à parallelesfaisceau. Tout cela est bien entendu discutable...Quoiqu'il en soit, un graphe c'est avant tout une idée pédagogique. Si l'idée, si la thèse est claire, alors le graphe sera facile à implémenter. Terminons en signalant qu'une section donnée peut constituer le coeur d'un graphe A et ne constituer qu'une remédiation dans un graphe B. Ainsi le sens d'une section se révèle souvent en considérant les graphes dans lesquels elle intervient.

Quelques exemples de graphe.

3) Des graphes de différents types
Graphe basé sur une seule section


Ce graphe est basé sur une seule section, la section cm2exN1_18 que nous avons rencontrée plus haut, celle qui demande de compléter une suite. Le parcours attendu est 1-3-5-6, les noeuds 2 et 5 consituant respectivement des remédiations des noeuds 1 et 4.

Souvent ce type de parcours que l'on rencontre dans les séances Labomep présente une difficulté croissante, l'élève commençant au noeud présentant la difficuté la plus faible (ou presque).
Il est à noter que ce type de graphe, basé sur une seule section avec difficulté graduelle, est d'autant plus intéressant que l'on peut imaginer que l'élève commence à un noeud de difficulté médiane. En cas d'échec, il est orienté vers des noeuds avec difficulté décroissante, en cas de réussite vers des noeuds avec difficulté croissante.
C'est tout à fait nouveau par rapport aux séances classiques où le système figé impose une difficulté croissante.
Avec ce type de graphe donc, le climat n'est plus de tout le même. La raison en est la suivante. Dans une séance classique, on note chez l'élève une frustration de deux types : chez le bon élève, l'obligation de traiter les exercices et questions simples avant d'attaquer les exercices plus difficiles qui offrent un réel intérêt pour lui, et chez l'élève en difficulté, le fait de savoir qu'il bloquera de toute façon rapidement dès les premiers exercices faciles résolus.
Or dans un graphe avec entrée dans un noeud de difficulté médiane, la situation change totalement car ces deux élèves travailleront exactement de la même façon, le graphe s'adaptant à leur niveau : dit sommairement, on a deux élèves qui travaillent, sans que soit nécessairement mis en avant la réussite ou l'échec de chacun d'eux. Bref l'ambiance change totalement.

Ci-dessous, on a un graphe basé sur trois sections (voir la légende en haut à gauche).
Graphe basé sur plusieurs section


Dans ce graphe qui comporte 10 noeuds, on a décidé de réserver une couleur pour chacune des trois sections. Le parcours attendu est le passage en haut : on passe directement de la section S1 à gauche à la section S1 à droite, paramétrée différemment. Les noeuds de couleur cyan constituent une remédiation des noeuds bleu-foncé. Et les noeuds de couleur rouge constituent une remédiation des noeuds de couleur cyan.
Ce type de graphe propose souvent un travail sur une notion et comporte les sections nécessaires en cas d'échec dans le parcours attendu, afin de proposer des remédiations. On peut dire qu'on a une section qui constituent le coeur du graphe, les autres sections, faculatives, étant présentes pour remédier aux problèmes éventuels.

Vous pouvez tester ce graphe ici:
adresse

Voici un graphe combinant les principes rencontrés dans les deux graphes précédents.
Graphe combinant les graphes précédents


L'élève entre dans le noeud central où il traite la section 602bis (où l'on demande la partie réelle ou imaginaire d'un complexe de la forme ki(a+ib) ).
Cette section est qualitative, elle détecte les erreurs classiques que nous avons explicitées plus haut.
Si une erreur classique est détectée (confusion des deux parties ou inclusion de i dans la partie imaginaire) alors l'élève est orientée dans le sous-graphe grisé à gauche.
Sinon
   -en cas de réussite, on augmente la difficulté et l'élève est orienté dans la partie supérieure du graphe.
   -en cas d'échec en revanche, j3p commence par regarder si c'est le calcul de i^2 qui pose problème ou si l'erreur ne vient pas de là.
     Ces deux cas sont traités dans la partie inférieure droite du droite.
Comme expliqué dans le paragraphe précédent, ce graphe présente l'avantage de mettre tout le monde au travail sans frustration pour l'élève.

Je vais arrêter ici pour les exemples de graphes. D'ailleurs j'ai en fait peu détaillé ces trois graphes ni relaté les nombreuses discussions que leurs constructions ont nécessitées. Il me semble malgré tout que les idées de graphe et de parcours sont retranscrites assez fidèlement, enfin je l'espère !
4) L'information renvoyée à la fin du parcours de l'élève
A la fin du parcours, J3P renvoie des informations à Labomep :
Les informations renvoyées à Labomep à la fin d'un parcours

Ces informations ne sont pas affichées sur l'écran de l'élève. La question de la nature de l'information affichée à l'élève à la fin de son parcours est actuellement en discussion.
Voici le graphe correspondant:
Graphe ayant engendré le résultat précédent

Comme on peut le voir, le parcours de l'élève a été 1-2-4-8-9-7-3-10
Labomep récupère de nombreux éléments : le parcours, le score à chaque étape du parcours, le temps passé à chaque étape, et bien d'autres informations encore.

Une question importante concerne l'affichage des résultats dans Labomep, dont le développement est également en cours.
En l'état actuel de nos réflexions, nous envisageons le système suivant :

   -Pour les graphes ne comportant qu'un seul noeud, nous aurons l'affichage de la phrase d'état (souvent le score) ainsi que le détail des échecs-réussites à chaque répétition exactement comme pour les séances Labomep actuelles.

   -Pour les graphes comportant plusieurs noeuds, nous aurons l'affichage du parcours sous forme 1-2-4-8-9-7-3-10.
En cliquant sur ce parcours, alors le graphe s'affichera et apparaîtra, en sur-impression, le parcours de l'élève.
Si on reprend le dernier exemple des graphes présentés dans le 3), cette surimpression donnera immédiatement une visualisation de ce qu'il s'est passé pour l'élève. De la sorte, on aura une "vision" assez rapide et synthétique du parcours de chaque élève.
Par exemple, si le parcours de l'élève est dans le sous-graphe de couleur bleue, c'est que l'élève a échoué à l'exercice initial, mais que cet échec n'est pas dû aux erreurs classiques (confusion des deux parties ou inclusion i dans la partie imaginaire).
Pour ce type de graphe, une question ouverte est celle du score. Est-il pertinent de définir un score pour un parcours donné ? Nous pensons laisser la responsabilité au professeur de calculer un score ou non, à lui de juger de la pertinence ou non de ce dernier.
Conclusion : perspectives et enjeux
1) Labomep
L'interface Labomep

C'est Labomep qui permettra l'utilisation de j3p en classe.
En effet, les ressources de j3p pourront être glissées déposées au sein d'une séance, puis paramétrées.
En outre, c'est Labomep qui affichera les bilans.
C'est également au sein de Labomep que le professeur trouvera les modules nécessaires à l'exploration et aux tests des différentes ressources j3p, ainsi que les modules nécessaires à la construction de graphes personnalisés.
Enfin, Labomep est également un espace de partage. Il sera intéressant de pouvoir partager les graphes personnalisés avec les collègues.
Conscient donc de ces enjeux, nous travaillons au développement des modules nécessaires à l'intégration de j3p dans Labomep. Cette intégration nous paraît indispensable pour pouvoir utiliser efficacement les ressources.
2) Le développement de sections
Comme toujours dans Sésamath, nous essayons de créer les ressources via la mise en oeuvre d'un travail collaboratif.
Il est clair que, sans section, j3p n'est qu'une coquille vide.
Comme pour Mathenpoche, nous avons une petite équipe de bénévoles (des membres de Sésamath) qui développent des sections. Cela suppose un travail d'équipe avec une formation initiale assez forte, ainsi qu'un suivi régulier de ma part. Pour que cela soit possible, il a fallu également programmer des formations, rédiger une documentation, et surtout créer un modèle, une structure, proposant de nombreux outils, sur lesquels le développeur peut s'appuyer pour développer une section.
En outre, le développement d'une section demande au préalable une scénarisation. Cette dernière est d'autant plus importante que c'est une scénarisation réfléchie qui fera qu'au final nous aurons d'une section disposant d'un paramétrage pertinent et efficient. Souvent cette scénarisation est discutée indépendamment des graphes. Mais pas tout le temps : il arrive en effet que ce sont des idées de graphes qui ont nécessité le développement de sections particulières. Cette scénarisation n'implique donc pas que les développeurs : elle implique également les professeurs qui ont évidemment des idées sur une section donnée ou pourquoi pas sur un graphe. Enfin ces professeurs testent parfois les sections avec leurs élèves. Les remontées et participations des collègues nous sont donc très précieuses.
3) Le développement de graphes
Nous avons déjà évoqué les graphes basés sur une seule section, des graphes basés sur plusieurs sections proposant le travail d'une notion avec remédiation, et toute combinaison des deux. On pourrait ajouter des graphes d'évaluation et de diagnostique. A priori tous ces graphes portent sur un notion donnée étudiée durant une période données, même si une remédiation peut bien-sûr porter sur une notion vue dans une année antérieure.
On peut également imaginer un autre type de graphe : les graphes transversaux. Donnons un exemple concret, anecdotique certes, mais qui éclaire bien cet aspect. Il y a quelques mois, un enseignant du Primaire a proposé un graphe (en le décrivant naturellement) traitant du pluriel en primaire. Ce dernier 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 ferait au niveau du CE, et le graphe étant censé couvrir tous les aspects du pluriel, l’élève construit son parcours dans le graphe en fonction de ses connaissances, si bien qu'au final sa classe (CE ou CM) actuelle n’a pas une grande importance. En effet, ce graphe proposant un traitement transversal de la notion, l'élève construirait ainsi son parcours dans un graphe qui lui proposera de toute façon rapidement des noeuds adaptés à son niveau, ainsi que des remédiations pour les difficultés rencontrées.
De toute évidence, la construction d'un graphe complexe et comportant de nombreux noeuds, peut être très difficile. Une scénarisation de qualité nous semble être la clef afin de disposer de ressources pertinentes. Cette scénarisation nécessite souvent des discussions et des tests; le fait est que l'on parvient rarement à une solution satisfaisante au premier essai.
Malgré tout, en ne considérant que les graphes simples, comportant quelques noeuds seulement, il y aurait déjà matière pour de nombreuses ressources intéressantes à publier. Dans Sésamath, nous nous efforçons de travailler collaborativement (même si le groupe est restreint) pour le développement des ressources et cela inclut la scénarisation. Et c'est une très bonne chose car ce travail collaboratif de scénarisation nous semble particulièrement indispensable en ce qui concerne les graphes !
4) Typologie, ontologie
Le paragraphe précédent montre qu'il serait utile de définir quelques types fondamentaux de graphes, afin de pouvoir en proposer une première classification, autrement dit de définir une première typologie des graphes.
En outre, j'imagine sans peine que le lecteur arrivé jusque ici doit s'y perdre un peu au milieu de tous ces termes : noeuds, graphe, parcours, section, qualtitative, phrase d'état.... Pour ce qui me concerne, ce n'est que plusieurs mois après le début du projet, que j'ai soudainement réalisé la différence fondamentale entre parcours et graphe... Bizarrement ces deux notions se confondaient dans mon esprit. Le jour où la distinction fut faite, et le vocabulaire correspondant défini, cela a été pour moi beaucoup plus clair car ce sont deux concepts très importants.
La définition de différents concepts est importante car l'existence de deux concepts implique à priori qu'ils sont différents, sinon pourquoi deux termes ? Souvent ces différences posent la problématique et alimentent la réflexion, laquelle en retour permet de travailler plus efficacement sur le domaine. Par exemple, éthique et morale constituent deux concepts distincts. En quoi sont-ils différents ? La réflexion qui s'en suit ne peut être que bénéfique.
C'est pourquoi une succinte ontologie de notre domaine nous permettra de définir précisément le vocabulaire, les différents concepts ainsi que leurs relations.
Je réfléchis depuis peu sur ces questions. C'est délicat car le domaine concerné ici est lui-même en construction (il n'est déjà pas évident de construire des ontologies de domaines existants !). Mais cela me semble nécessaire car ce type de réflexion impacte directement sur le développement de j3p, et ce bénéfiquement.
5) Intégration d'outils
On a peine à imaginer le nombre d'outils libres utilisables par le JavaSript. Pour ma part, j'y vois là une espèce d'anarchie joyeuse et exhubérante, l'exhubérance des débuts.... D'ailleurs il est probable que d'ici quelques décennies, on tendra vers une normalisation, avec quelques outils phares qui auront occupsé l'espace du web 2.0 (ou 3.0). En attendant...
S'il est relativement aisé d'utiliser un de ces outils, c'en est une autre de les intégrer dans J3P, de les faire communiquer, car les conflits peuvent être parfois surprenants. Or l'intégration d'outils est fondamentale car nous ne pouvons pas tout réécrire (et ce serait idiot car on le ferait en moins bien), et car ces outils permettent d'envisager le développement de très nombreuses sections.
Concernant cette question, où en sommes-nous dans j3p ?
Tout d'abord, cela aura un sens au moins pour les spécialistes, nous utilisons jquery et head.js, mais à minima.

Plus concrètement, nous distinguons les outils externes des outils internes, c'est à dire les outils développés par nos soins.

Voici quelques exemples d'outils externes :
GeoGebra en HTML5

L'équipe GeoGebra travaille actuellement sur une version JavaScript de leur logiciel. Même si le développement est en cours, nous pouvons déjà, intégrer une figure GeoGebra dans j3p. La version JavaScript de GeoGebra donne tous les clefs pour une communication efficiente entre GeoGebra et le programme l'intégrant. Ainsi il sera possible de créer des exercices avec une figure GeoGebra.
Tableur de xcasenligne

Ci-dessus, nous avons intégré le tableur JavaScript (développé par JP Branchard) lui-même basé sur celui de XCas.
Comme on a une commmunication entre j3p et le tableur, il est donc possible de développer des sections proposant un tableur.
Intégration d'une partie de ProgLab

ProgLab (développé par François Pirsch) propose une version JavaScript du logiciel AlgoBox. Ici l'intégration a nécessité des échanges entre notre équipe et François, qui a procédé aux modifications nécessaires pour une intégration satisfaisante (merci à lui!).
Suite à cette intégration, nous sommes en mesure de proposer des graphes d'initiation à l'algorithmique, J3P proposant, à chaque noeud, un exercice simple d'algorithmique et corrigeant à la fin.

En ce qui concerne les outils internes, vous en avez déjà rencontré au moins deux : la droite graduée ou encore le tableau de conversion.
Il en existe beaucoup d'autres :
- des outils de calcul formel (XCas ou outils formels de MathGraph 32 qu'Yves Byton travaille actuellement à réécrire complètement en JavaScript)
- une calculatrice
Une calculatrice

- un outil de géométrie dynamique
Un module de géométrie dynamique

- Il y en a d'autres, mais nous n'allons pas énumérer tous les outils externes et internes. Ces intégrations des outils constituent à la fois un enjeu et des perspectives. Enjeu car parfois leur intégration dans j3p est difficile, perspectives car il en existe de très nombreux et qu'ils laissent entrevoir la perspective de sections très intéressantes, donnant donc leur tour naissance, à des ressources très intéressantes.
6) Graphe de graphes
Pour terminer, quand on considère le graphe suivant


on a l'impression qu'on pourrait imaginer des graphes de graphes. L'élève construirait son parcours au sein d'un premier graphe, lequel renverrait à la fin une phrase d'état. Cette phrase d'état serait définie en fonction de son parcours et des différentes phrases d'état renvoyées à chaque noeud. Ensuite, en fonction de celle-ci, il serait renvoyé vers tel ou tel autre graphe. Ici, tout est encore à implémenter !

Jean-philippe VANROYEN
Mars 2013